diff --git a/docs/data/base/components/select/UnstyledSelectBasic/css/index.js b/docs/data/base/components/select/UnstyledSelectBasic/css/index.js new file mode 100644 index 00000000000000..02790d6124a516 --- /dev/null +++ b/docs/data/base/components/select/UnstyledSelectBasic/css/index.js @@ -0,0 +1,166 @@ +import * as React from 'react'; +import Select, { selectClasses } from '@mui/base/Select'; +import Option, { optionClasses } from '@mui/base/Option'; +import { useTheme } from '@mui/system'; + +export default function UnstyledSelectBasic() { + return ( + + + + + ); +} + +const cyan = { + 50: '#E9F8FC', + 100: '#BDEBF4', + 200: '#99D8E5', + 300: '#66BACC', + 400: '#1F94AD', + 500: '#0D5463', + 600: '#094855', + 700: '#063C47', + 800: '#043039', + 900: '#022127', +}; + +const grey = { + 50: '#f6f8fa', + 100: '#eaeef2', + 200: '#d0d7de', + 300: '#afb8c1', + 400: '#8c959f', + 500: '#6e7781', + 600: '#57606a', + 700: '#424a53', + 800: '#32383f', + 900: '#24292f', +}; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +function Styles() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx new file mode 100644 index 00000000000000..02790d6124a516 --- /dev/null +++ b/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx @@ -0,0 +1,166 @@ +import * as React from 'react'; +import Select, { selectClasses } from '@mui/base/Select'; +import Option, { optionClasses } from '@mui/base/Option'; +import { useTheme } from '@mui/system'; + +export default function UnstyledSelectBasic() { + return ( + + + + + ); +} + +const cyan = { + 50: '#E9F8FC', + 100: '#BDEBF4', + 200: '#99D8E5', + 300: '#66BACC', + 400: '#1F94AD', + 500: '#0D5463', + 600: '#094855', + 700: '#063C47', + 800: '#043039', + 900: '#022127', +}; + +const grey = { + 50: '#f6f8fa', + 100: '#eaeef2', + 200: '#d0d7de', + 300: '#afb8c1', + 400: '#8c959f', + 500: '#6e7781', + 600: '#57606a', + 700: '#424a53', + 800: '#32383f', + 900: '#24292f', +}; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +function Styles() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/select/UnstyledSelectSimple.js b/docs/data/base/components/select/UnstyledSelectBasic/system/index.js similarity index 95% rename from docs/data/base/components/select/UnstyledSelectSimple.js rename to docs/data/base/components/select/UnstyledSelectBasic/system/index.js index dadc162ce7c527..a31ba7c5d4304b 100644 --- a/docs/data/base/components/select/UnstyledSelectSimple.js +++ b/docs/data/base/components/select/UnstyledSelectBasic/system/index.js @@ -15,7 +15,7 @@ const CustomSelect = React.forwardRef(function CustomSelect(props, ref) { return ({ + className: `text-sm box-border h-12 w-80 p-3 rounded-xl text-left leading-normal bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 ${ + focusVisible ? 'border-purple-400 shadow-outline-purple' : '' + } ${ + open ? 'after:content-["▴"]' : 'after:content-["▾"]' + } after:float-right`, + }), + listbox: { + className: `text-sm p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 shadow shadow-slate-200 dark:shadow-slate-900`, + }, + popper: { className: `${isDarkMode ? 'dark' : ''} z-10` }, + }} + defaultValue={10} + > + + + + + + ); +} diff --git a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx new file mode 100644 index 00000000000000..68f90a9a5f92d6 --- /dev/null +++ b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx @@ -0,0 +1,77 @@ +import * as React from 'react'; +import Select from '@mui/base/Select'; +import BaseOption, { OptionProps, OptionOwnerState } from '@mui/base/Option'; +import { useTheme } from '@mui/system'; + +const getOptionColorClasses = ({ + selected, + highlighted, + disabled, +}: Partial>) => { + let classes = ''; + if (disabled) { + classes += 'text-slate-400 dark:text-slate-700'; + } else { + if (selected) { + classes += + ' bg-purple-100 dark:bg-purple-950 text-purple-950 dark:text-purple-50'; + } else if (highlighted) { + classes += + ' bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-300'; + } + classes += + ' hover:dark:bg-slate-800 hover:bg-slate-100 hover:dark:text-slate-300 hover:text-slate-900'; + } + return classes; +}; + +const Option = React.forwardRef>((props, ref) => { + return ( + ({ + className: `list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 ${getOptionColorClasses( + { selected, highlighted, disabled }, + )}`, + }), + }} + /> + ); +}); + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +export default function UnstyledSelectBasic() { + // Replace this with your app logic for determining dark modes + const isDarkMode = useIsDarkMode(); + + return ( +
+ +
+ ); +} diff --git a/docs/data/base/components/select/UnstyledSelectSimple.tsx.preview b/docs/data/base/components/select/UnstyledSelectSimple.tsx.preview deleted file mode 100644 index d2b6f081a69b69..00000000000000 --- a/docs/data/base/components/select/UnstyledSelectSimple.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - Ten - Twenty - Thirty - \ No newline at end of file diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md index db24c408cef6a5..36edd240a630fc 100644 --- a/docs/data/base/components/select/select.md +++ b/docs/data/base/components/select/select.md @@ -54,7 +54,7 @@ export default function MyApp() { The following demo shows how to create and style a Select component. -{{"demo": "UnstyledSelectSimple.js", "defaultCodeOpen": false}} +{{"demo": "UnstyledSelectBasic", "defaultCodeOpen": false}} #### Form submission