mui · hbjORbj · Dec 5, 2022 · Nov 18, 2022 · Nov 18, 2022 · Nov 18, 2022
diff --git a/docs/data/joy/components/autocomplete/CountrySelect.js b/docs/data/joy/components/autocomplete/CountrySelect.js
@@ -10,7 +10,7 @@ export default function CountrySelect() {
     <Autocomplete
       id="country-select-demo"
       placeholder="Choose a country"
-      componentsProps={{
+      slotProps={{
         input: {
           autoComplete: 'new-password', // disable autocomplete and autofill
         },

diff --git a/docs/data/joy/components/autocomplete/CountrySelect.tsx b/docs/data/joy/components/autocomplete/CountrySelect.tsx
@@ -10,7 +10,7 @@ export default function CountrySelect() {
     <Autocomplete
       id="country-select-demo"
       placeholder="Choose a country"
-      componentsProps={{
+      slotProps={{
         input: {
           autoComplete: 'new-password', // disable autocomplete and autofill
         },

diff --git a/docs/data/joy/components/autocomplete/GitHubLabel.js b/docs/data/joy/components/autocomplete/GitHubLabel.js
@@ -134,7 +134,7 @@ export default function GitHubLabel() {
               multiple
               size="sm"
               placeholder="Filter labels"
-              components={{ listbox: Listbox }}
+              slots={{ listbox: Listbox }}
               onClose={(event, reason) => {
                 if (reason === 'escape') {
                   handleClose();

diff --git a/docs/data/joy/components/autocomplete/GitHubLabel.tsx b/docs/data/joy/components/autocomplete/GitHubLabel.tsx
@@ -134,7 +134,7 @@ export default function GitHubLabel() {
               multiple
               size="sm"
               placeholder="Filter labels"
-              components={{ listbox: Listbox }}
+              slots={{ listbox: Listbox }}
               onClose={(event, reason) => {
                 if (reason === 'escape') {
                   handleClose();

diff --git a/docs/data/joy/components/autocomplete/Virtualize.js b/docs/data/joy/components/autocomplete/Virtualize.js
@@ -121,7 +121,7 @@ export default function Virtualize() {
         sx={{ width: 300 }}
         disableListWrap
         placeholder="Type to search"
-        components={{
+        slots={{
           listbox: ListboxComponent,
         }}
         options={OPTIONS}

diff --git a/docs/data/joy/components/autocomplete/Virtualize.tsx b/docs/data/joy/components/autocomplete/Virtualize.tsx
@@ -121,7 +121,7 @@ export default function Virtualize() {
         sx={{ width: 300 }}
         disableListWrap
         placeholder="Type to search"
-        components={{
+        slots={{
           listbox: ListboxComponent,
         }}
         options={OPTIONS}

diff --git a/docs/data/joy/components/autocomplete/Virtualize.tsx.preview b/docs/data/joy/components/autocomplete/Virtualize.tsx.preview
@@ -4,7 +4,7 @@
     sx={{ width: 300 }}
     disableListWrap
     placeholder="Type to search"
-    components={{
+    slots={{
       listbox: ListboxComponent,
     }}
     options={OPTIONS}

diff --git a/docs/data/joy/components/autocomplete/autocomplete.md b/docs/data/joy/components/autocomplete/autocomplete.md
@@ -301,7 +301,7 @@ In the event you want the avoid autofill, you can try the following:
 
   ```jsx
   <Autocomplete
-    componentsProps={{
+    slotProps={{
       input: {
         autoComplete: 'new-password',
       },
@@ -318,7 +318,7 @@ You can work around the issue with the `disablePortal` prop.
 
 ```jsx
 <Autocomplete
-  componentsProps={{
+  slotProps={{
     listbox: {
       disablePortal: true,
     },

diff --git a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
@@ -54,7 +54,7 @@ export default function ExampleButtonCheckbox() {
                 setValue((val) => val.filter((text) => text !== item));
               }
             }}
-            componentsProps={{
+            slotProps={{
               action: ({ checked }) => ({
                 sx: {
                   bgcolor: checked ? 'background.surface' : 'transparent',

diff --git a/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js b/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
@@ -52,7 +52,7 @@ export default function ExampleChoiceChipCheckbox() {
                       setValue((val) => val.filter((text) => text !== item));
                     }
                   }}
-                  componentsProps={{
+                  slotProps={{
                     action: ({ checked }) => ({
                       sx: checked
                         ? {

diff --git a/docs/data/joy/components/checkbox/FocusCheckbox.js b/docs/data/joy/components/checkbox/FocusCheckbox.js
@@ -9,14 +9,14 @@ export default function FocusCheckbox() {
         label="Label"
         defaultChecked
         // to demonstrate the focus outline
-        componentsProps={{ action: { className: checkboxClasses.focusVisible } }}
+        slotProps={{ action: { className: checkboxClasses.focusVisible } }}
       />
       <Checkbox
         label="Label"
         defaultChecked
         sx={{ [`& > .${checkboxClasses.checkbox}`]: { position: 'relative' } }}
         // to demonstrate the focus outline
-        componentsProps={{ action: { className: checkboxClasses.focusVisible } }}
+        slotProps={{ action: { className: checkboxClasses.focusVisible } }}
       />
     </Box>
   );

diff --git a/docs/data/joy/components/checkbox/HoverCheckbox.js b/docs/data/joy/components/checkbox/HoverCheckbox.js
@@ -7,7 +7,7 @@ export default function HoverCheckbox() {
     <Checkbox
       uncheckedIcon={<Done />}
       label="Label"
-      componentsProps={{
+      slotProps={{
         root: ({ checked, focusVisible }) => ({
           sx: !checked
             ? {

diff --git a/docs/data/joy/components/checkbox/OverlayCheckbox.js b/docs/data/joy/components/checkbox/OverlayCheckbox.js
@@ -22,7 +22,7 @@ export default function OverlayCheckbox() {
           label="Focus outline covers the parent!"
           overlay
           // Force the outline to appear in the demo. Usually, you don't need this in your project.
-          componentsProps={{ action: { className: checkboxClasses.focusVisible } }}
+          slotProps={{ action: { className: checkboxClasses.focusVisible } }}
         />
       </Sheet>
     </Box>

diff --git a/docs/data/joy/components/chip/LinkChip.js b/docs/data/joy/components/chip/LinkChip.js
@@ -3,7 +3,7 @@ import Chip from '@mui/joy/Chip';
 
 export default function ClickableChip() {
   return (
-    <Chip componentsProps={{ action: { component: 'a', href: '#as-link' } }}>
+    <Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
       Anchor chip
     </Chip>
   );

diff --git a/docs/data/joy/components/chip/LinkChip.tsx b/docs/data/joy/components/chip/LinkChip.tsx
@@ -3,7 +3,7 @@ import Chip from '@mui/joy/Chip';
 
 export default function ClickableChip() {
   return (
-    <Chip componentsProps={{ action: { component: 'a', href: '#as-link' } }}>
+    <Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
       Anchor chip
     </Chip>
   );

diff --git a/docs/data/joy/components/chip/LinkChip.tsx.preview b/docs/data/joy/components/chip/LinkChip.tsx.preview
@@ -1,3 +1,3 @@
-<Chip componentsProps={{ action: { component: 'a', href: '#as-link' } }}>
+<Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
   Anchor chip
 </Chip>
diff --git a/docs/data/joy/components/menu/MenuIconSideNavExample.js b/docs/data/joy/components/menu/MenuIconSideNavExample.js
@@ -89,7 +89,7 @@ function MenuButton({ children, menu, open, onOpen, onLeaveMenu, label, ...props
         actions: menuActions,
         anchorEl: buttonRef.current,
         modifiers,
-        componentsProps: {
+        slotProps: {
           listbox: {
             id: `nav-example-menu-${label}`,
             'aria-label': label,

diff --git a/docs/data/joy/components/menu/MenuToolbarExample.js b/docs/data/joy/components/menu/MenuToolbarExample.js
@@ -51,7 +51,7 @@ const MenuButton = React.forwardRef(
           open,
           actions: menuActions,
           anchorEl: buttonRef.current,
-          componentsProps: {
+          slotProps: {
             listbox: {
               id: `toolbar-example-menu-${children}`,
               'aria-label': children,

diff --git a/docs/data/joy/components/menu/MenuUsage.js b/docs/data/joy/components/menu/MenuUsage.js
@@ -78,7 +78,7 @@ export default function MenuUsage() {
             anchorEl={anchorEl}
             open={open}
             onClose={handleClose}
-            componentsProps={{
+            slotProps={{
               listbox: {
                 'aria-labelledby': 'menu-usage-button',
               },

diff --git a/docs/data/joy/components/modal/FadeModalDialog.js b/docs/data/joy/components/modal/FadeModalDialog.js
@@ -18,7 +18,7 @@ export default function FadeModalDialog() {
             keepMounted
             open={!['exited', 'exiting'].includes(state)}
             onClose={() => setOpen(false)}
-            componentsProps={{
+            slotProps={{
               backdrop: {
                 sx: {
                   opacity: 0,

diff --git a/docs/data/joy/components/radio/ExampleAlignmentButtons.js b/docs/data/joy/components/radio/ExampleAlignmentButtons.js
@@ -55,7 +55,7 @@ export default function ExampleAlignmentButtons() {
               }[item]
             }
             variant={alignment === item ? 'solid' : 'plain'}
-            componentsProps={{
+            slotProps={{
               input: { 'aria-label': item },
               action: {
                 sx: { borderRadius: 0, transition: 'none' },

diff --git a/docs/data/joy/components/radio/ExampleProductAttributes.js b/docs/data/joy/components/radio/ExampleProductAttributes.js
@@ -48,7 +48,7 @@ export default function ExampleProductAttributes() {
                 color={color}
                 checkedIcon={<Done fontSize="xl2" />}
                 value={color}
-                componentsProps={{
+                slotProps={{
                   input: { 'aria-label': color },
                   radio: {
                     sx: {

diff --git a/docs/data/joy/components/radio/ExampleSegmentedControls.js b/docs/data/joy/components/radio/ExampleSegmentedControls.js
@@ -38,7 +38,7 @@ export default function ExampleSegmentedControls() {
               px: 2,
               alignItems: 'center',
             }}
-            componentsProps={{
+            slotProps={{
               action: ({ checked }) => ({
                 sx: {
                   ...(checked && {

diff --git a/docs/data/joy/components/radio/IconlessRadio.js b/docs/data/joy/components/radio/IconlessRadio.js
@@ -41,7 +41,7 @@ export default function IconlessRadio() {
               overlay
               disableIcon
               value={value}
-              componentsProps={{
+              slotProps={{
                 label: ({ checked }) => ({
                   sx: {
                     fontWeight: 'lg',

diff --git a/docs/data/joy/components/radio/RadioButtons.js b/docs/data/joy/components/radio/RadioButtons.js
@@ -16,14 +16,14 @@ export default function RadioButtons() {
         onChange={handleChange}
         value="a"
         name="radio-buttons"
-        componentsProps={{ input: { 'aria-label': 'A' } }}
+        slotProps={{ input: { 'aria-label': 'A' } }}
       />
       <Radio
         checked={selectedValue === 'b'}
         onChange={handleChange}
         value="b"
         name="radio-buttons"
-        componentsProps={{ input: { 'aria-label': 'B' } }}
+        slotProps={{ input: { 'aria-label': 'B' } }}
       />
     </Box>
   );

diff --git a/docs/data/joy/components/radio/RadioPositionEnd.js b/docs/data/joy/components/radio/RadioPositionEnd.js
@@ -34,7 +34,7 @@ export default function RadioPositionEnd() {
               value={item}
               label={item}
               sx={{ flexGrow: 1, flexDirection: 'row-reverse' }}
-              componentsProps={{
+              slotProps={{
                 action: ({ checked }) => ({
                   sx: (theme) => ({
                     ...(checked && {

diff --git a/docs/data/joy/components/radio/radio-pt.md b/docs/data/joy/components/radio/radio-pt.md
@@ -98,7 +98,7 @@ Here are a few tips to make sure you have an accessible radio button component:
 ```jsx
 <Radio
   value="radioA"
-  componentsProps={{
+  slotProps={{
     input: {
       'aria-label': 'Radio A',
     },

diff --git a/docs/data/joy/components/radio/radio-zh.md b/docs/data/joy/components/radio/radio-zh.md
@@ -98,7 +98,7 @@ Here are a few tips to make sure you have an accessible radio button component:
 ```jsx
 <Radio
   value="radioA"
-  componentsProps={{
+  slotProps={{
     input: {
       'aria-label': 'Radio A',
     },

diff --git a/docs/data/joy/components/radio/radio.md b/docs/data/joy/components/radio/radio.md
@@ -119,7 +119,7 @@ Here are a few tips to make sure you have an accessible radio button component:
 ```jsx
 <Radio
   value="radioA"
-  componentsProps={{
+  slotProps={{
     input: {
       'aria-label': 'Radio A',
     },

diff --git a/docs/data/joy/components/select/SelectCustomOption.js b/docs/data/joy/components/select/SelectCustomOption.js
@@ -9,7 +9,7 @@ export default function SelectCustomOption() {
   return (
     <Select
       defaultValue="1"
-      componentsProps={{
+      slotProps={{
         listbox: {
           sx: {
             '--List-decorator-size': '44px',

diff --git a/docs/data/joy/components/select/SelectCustomValueAppearance.js b/docs/data/joy/components/select/SelectCustomValueAppearance.js
@@ -21,7 +21,7 @@ export default function SelectCustomValueAppearance() {
   return (
     <Select
       defaultValue="Eric"
-      componentsProps={{
+      slotProps={{
         listbox: {
           sx: {
             '--List-decorator-size': '48px',

diff --git a/docs/data/joy/components/select/SelectFieldDemo.js b/docs/data/joy/components/select/SelectFieldDemo.js
@@ -13,7 +13,7 @@ export default function SelectFieldDemo() {
       </FormLabel>
       <Select
         defaultValue="dog"
-        componentsProps={{
+        slotProps={{
           button: {
             id: 'select-field-demo-button',
             // TODO: Material UI set aria-labelledby correctly & automatically

diff --git a/docs/data/joy/components/select/SelectFieldDemo.tsx b/docs/data/joy/components/select/SelectFieldDemo.tsx
@@ -13,7 +13,7 @@ export default function SelectFieldDemo() {
       </FormLabel>
       <Select
         defaultValue="dog"
-        componentsProps={{
+        slotProps={{
           button: {
             id: 'select-field-demo-button',
             // TODO: Material UI set aria-labelledby correctly & automatically

diff --git a/docs/data/joy/components/select/SelectGroupedOptions.js b/docs/data/joy/components/select/SelectGroupedOptions.js
@@ -25,7 +25,7 @@ export default function SelectGroupedOptions() {
   return (
     <Select
       placeholder="Choose your animal"
-      componentsProps={{
+      slotProps={{
         listbox: {
           component: 'div',
           sx: {

diff --git a/docs/data/joy/components/select/select-pt.md b/docs/data/joy/components/select/select-pt.md
@@ -122,7 +122,7 @@ To create a [listbox with grouped options](https://www.w3.org/WAI/ARIA/apg/examp
 
 ```jsx
 <Select
-  componentsProps={{
+  slotProps={{
     listbox: {
       sx: {
         maxHeight: 300,

diff --git a/docs/data/joy/components/select/select-zh.md b/docs/data/joy/components/select/select-zh.md
@@ -122,7 +122,7 @@ To create a [listbox with grouped options](https://www.w3.org/WAI/ARIA/apg/examp
 
 ```jsx
 <Select
-  componentsProps={{
+  slotProps={{
     listbox: {
       sx: {
         maxHeight: 300,

diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md
@@ -127,7 +127,7 @@ That way, you'll have a consistent height and will be able to leverage nested CS
 
 ```jsx
 <Select
-  componentsProps={{
+  slotProps={{
     listbox: {
       sx: {
         maxHeight: 300,
@@ -153,7 +153,7 @@ Alternatively, you can do it manually by targeting the button slot:
 ```jsx
 <label htmlFor="select-button" id="select-label">Label</label>
 <Select
-  componentsProps={{
+  slotProps={{
     button: {
       id: 'select-button',
       'aria-labelledby': 'select-label select-button',

diff --git a/docs/data/joy/components/switch/ExampleThumbChild.js b/docs/data/joy/components/switch/ExampleThumbChild.js
@@ -5,7 +5,7 @@ import DarkMode from '@mui/icons-material/DarkMode';
 export default function ExampleThumbChild() {
   return (
     <Switch
-      componentsProps={{
+      slotProps={{
         input: { 'aria-label': 'Dark mode' },
         thumb: {
           children: <DarkMode />,

diff --git a/docs/data/joy/components/switch/ExampleTrackChild.js b/docs/data/joy/components/switch/ExampleTrackChild.js
@@ -5,7 +5,7 @@ import Typography from '@mui/joy/Typography';
 export default function ExampleTrackChild() {
   return (
     <Switch
-      componentsProps={{
+      slotProps={{
         track: {
           children: (
             <React.Fragment>

diff --git a/docs/data/joy/components/switch/SwitchControl.js b/docs/data/joy/components/switch/SwitchControl.js
@@ -22,7 +22,7 @@ export default function SwitchLabel() {
         color={checked ? 'success' : 'neutral'}
         variant="outlined"
         endDecorator={checked ? 'On' : 'Off'}
-        componentsProps={{
+        slotProps={{
           endDecorator: {
             sx: {
               minWidth: 24,

diff --git a/docs/data/joy/components/switch/SwitchDecorators.js b/docs/data/joy/components/switch/SwitchDecorators.js
@@ -8,7 +8,7 @@ export default function SwitchDecorators() {
   return (
     <Switch
       color={dark ? 'primary' : 'danger'}
-      componentsProps={{ input: { 'aria-label': 'dark mode' } }}
+      slotProps={{ input: { 'aria-label': 'dark mode' } }}
       startDecorator={
         <LocalFireDepartmentRoundedIcon
           sx={{ color: dark ? 'text.tertiary' : 'danger.600' }}