diff --git a/docs/pages/joy-ui/api/alert.json b/docs/pages/joy-ui/api/alert.json
index dab33366637b07..806793b60b8521 100644
--- a/docs/pages/joy-ui/api/alert.json
+++ b/docs/pages/joy-ui/api/alert.json
@@ -7,6 +7,7 @@
},
"default": "'primary'"
},
+ "component": { "type": { "name": "elementType" } },
"endDecorator": { "type": { "name": "node" } },
"role": { "type": { "name": "string" }, "default": "'alert'" },
"size": {
@@ -16,6 +17,20 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ endDecorator?: func
| object, root?: func
| object, startDecorator?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ endDecorator?: elementType, root?: elementType, startDecorator?: elementType }"
+ },
+ "default": "{}"
+ },
"startDecorator": { "type": { "name": "node" } },
"sx": {
"type": {
diff --git a/docs/pages/joy-ui/api/aspect-ratio.json b/docs/pages/joy-ui/api/aspect-ratio.json
index 79517d17964694..19214b051a9f41 100644
--- a/docs/pages/joy-ui/api/aspect-ratio.json
+++ b/docs/pages/joy-ui/api/aspect-ratio.json
@@ -8,6 +8,7 @@
},
"default": "'neutral'"
},
+ "component": { "type": { "name": "elementType" } },
"maxHeight": { "type": { "name": "union", "description": "number
| string" } },
"minHeight": { "type": { "name": "union", "description": "number
| string" } },
"objectFit": {
@@ -21,6 +22,17 @@
"type": { "name": "union", "description": "number
| string" },
"default": "'16 / 9'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ content?: func
| object, root?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ content?: elementType, root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/autocomplete-listbox.json b/docs/pages/joy-ui/api/autocomplete-listbox.json
index c9eafd5ace0a47..19ff0a286e6ea8 100644
--- a/docs/pages/joy-ui/api/autocomplete-listbox.json
+++ b/docs/pages/joy-ui/api/autocomplete-listbox.json
@@ -12,6 +12,14 @@
"type": { "name": "enum", "description": "'sm'
| 'md'
| 'lg'" },
"default": "'md'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/autocomplete-option.json b/docs/pages/joy-ui/api/autocomplete-option.json
index 7d535f443ebc08..ae30f020b233dd 100644
--- a/docs/pages/joy-ui/api/autocomplete-option.json
+++ b/docs/pages/joy-ui/api/autocomplete-option.json
@@ -8,6 +8,14 @@
"default": "'neutral'"
},
"component": { "type": { "name": "elementType" } },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/autocomplete.json b/docs/pages/joy-ui/api/autocomplete.json
index 6dba13c7ee1eb1..b2b3dbf20101d4 100644
--- a/docs/pages/joy-ui/api/autocomplete.json
+++ b/docs/pages/joy-ui/api/autocomplete.json
@@ -69,6 +69,20 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ clearIndicator?: func
| object, endDecorator?: func
| object, input?: func
| object, limitTag?: func
| object, listbox?: func
| object, loading?: func
| object, noOptions?: func
| object, option?: func
| object, popupIndicator?: func
| object, root?: func
| object, startDecorator?: func
| object, wrapper?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ clearIndicator?: elementType, endDecorator?: elementType, input?: elementType, limitTag?: elementType, listbox?: elementType, loading?: elementType, noOptions?: elementType, option?: elementType, popupIndicator?: elementType, root?: elementType, startDecorator?: elementType, wrapper?: elementType }"
+ },
+ "default": "{}"
+ },
"startDecorator": { "type": { "name": "node" } },
"sx": {
"type": {
diff --git a/docs/pages/joy-ui/api/avatar.json b/docs/pages/joy-ui/api/avatar.json
index 18d1d9b67e4e14..a23fa60409e5f2 100644
--- a/docs/pages/joy-ui/api/avatar.json
+++ b/docs/pages/joy-ui/api/avatar.json
@@ -9,6 +9,7 @@
},
"default": "'neutral'"
},
+ "component": { "type": { "name": "elementType" } },
"size": {
"type": {
"name": "union",
@@ -16,6 +17,20 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ fallback?: func
| object, img?: func
| object, root?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ fallback?: elementType, img?: elementType, root?: elementType }"
+ },
+ "default": "{}"
+ },
"src": { "type": { "name": "string" } },
"srcSet": { "type": { "name": "string" } },
"sx": {
diff --git a/docs/pages/joy-ui/api/badge.json b/docs/pages/joy-ui/api/badge.json
index 8dac98694693c2..ba5b4f9cd8879b 100644
--- a/docs/pages/joy-ui/api/badge.json
+++ b/docs/pages/joy-ui/api/badge.json
@@ -20,6 +20,7 @@
},
"default": "'primary'"
},
+ "component": { "type": { "name": "elementType" } },
"invisible": { "type": { "name": "bool" }, "default": "false" },
"max": { "type": { "name": "number" }, "default": "99" },
"showZero": { "type": { "name": "bool" }, "default": "false" },
@@ -30,6 +31,17 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ badge?: func
| object, root?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ badge?: elementType, root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/breadcrumbs.json b/docs/pages/joy-ui/api/breadcrumbs.json
index 0aa1e0c08f7d3b..207a2788ab3318 100644
--- a/docs/pages/joy-ui/api/breadcrumbs.json
+++ b/docs/pages/joy-ui/api/breadcrumbs.json
@@ -1,6 +1,7 @@
{
"props": {
"children": { "type": { "name": "node" } },
+ "component": { "type": { "name": "elementType" } },
"separator": { "type": { "name": "node" }, "default": "'/'" },
"size": {
"type": {
@@ -9,6 +10,20 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ li?: func
| object, ol?: func
| object, root?: func
| object, separator?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ li?: elementType, ol?: elementType, root?: elementType, separator?: elementType }"
+ },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/button.json b/docs/pages/joy-ui/api/button.json
index 302550c9c55b01..759f03a6ad0763 100644
--- a/docs/pages/joy-ui/api/button.json
+++ b/docs/pages/joy-ui/api/button.json
@@ -13,6 +13,7 @@
},
"default": "'primary'"
},
+ "component": { "type": { "name": "elementType" } },
"disabled": { "type": { "name": "bool" }, "default": "false" },
"endDecorator": { "type": { "name": "node" } },
"fullWidth": { "type": { "name": "bool" }, "default": "false" },
@@ -32,6 +33,20 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ endDecorator?: func
| object, loadingIndicatorCenter?: func
| object, root?: func
| object, startDecorator?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ endDecorator?: elementType, loadingIndicatorCenter?: elementType, root?: elementType, startDecorator?: elementType }"
+ },
+ "default": "{}"
+ },
"startDecorator": { "type": { "name": "node" } },
"sx": {
"type": {
diff --git a/docs/pages/joy-ui/api/card-overflow.json b/docs/pages/joy-ui/api/card-overflow.json
index a9b86c5b36191a..8d608a8cd8ff32 100644
--- a/docs/pages/joy-ui/api/card-overflow.json
+++ b/docs/pages/joy-ui/api/card-overflow.json
@@ -9,6 +9,14 @@
"default": "'neutral'"
},
"component": { "type": { "name": "elementType" } },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/card.json b/docs/pages/joy-ui/api/card.json
index 77c5e67a3e9655..96756be9146c47 100644
--- a/docs/pages/joy-ui/api/card.json
+++ b/docs/pages/joy-ui/api/card.json
@@ -21,6 +21,14 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/checkbox.json b/docs/pages/joy-ui/api/checkbox.json
index 9d367bf447d122..1b6398880c8bf5 100644
--- a/docs/pages/joy-ui/api/checkbox.json
+++ b/docs/pages/joy-ui/api/checkbox.json
@@ -10,6 +10,7 @@
},
"default": "'neutral'"
},
+ "component": { "type": { "name": "elementType" } },
"defaultChecked": { "type": { "name": "bool" } },
"disabled": { "type": { "name": "bool" } },
"disableIcon": { "type": { "name": "bool" }, "default": "false" },
@@ -25,6 +26,20 @@
"type": { "name": "enum", "description": "'sm'
| 'md'
| 'lg'" },
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ action?: func
| object, checkbox?: func
| object, input?: func
| object, label?: func
| object, root?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ action?: elementType, checkbox?: elementType, input?: elementType, label?: elementType, root?: elementType }"
+ },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/chip-delete.json b/docs/pages/joy-ui/api/chip-delete.json
index a05a72a46a9bfa..7a6f6af55f55a8 100644
--- a/docs/pages/joy-ui/api/chip-delete.json
+++ b/docs/pages/joy-ui/api/chip-delete.json
@@ -11,6 +11,14 @@
"component": { "type": { "name": "elementType" } },
"disabled": { "type": { "name": "bool" } },
"onDelete": { "type": { "name": "func" } },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/chip.json b/docs/pages/joy-ui/api/chip.json
index e5c415e800015d..321f2c33b41c09 100644
--- a/docs/pages/joy-ui/api/chip.json
+++ b/docs/pages/joy-ui/api/chip.json
@@ -8,6 +8,7 @@
},
"default": "'primary'"
},
+ "component": { "type": { "name": "elementType" } },
"disabled": { "type": { "name": "bool" }, "default": "false" },
"endDecorator": { "type": { "name": "node" } },
"onClick": { "type": { "name": "func" } },
@@ -18,6 +19,20 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ action?: func
| object, endDecorator?: func
| object, label?: func
| object, root?: func
| object, startDecorator?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ action?: elementType, endDecorator?: elementType, label?: elementType, root?: elementType, startDecorator?: elementType }"
+ },
+ "default": "{}"
+ },
"startDecorator": { "type": { "name": "node" } },
"sx": {
"type": {
diff --git a/docs/pages/joy-ui/api/circular-progress.json b/docs/pages/joy-ui/api/circular-progress.json
index b6500df365b7c7..8114956daff8ac 100644
--- a/docs/pages/joy-ui/api/circular-progress.json
+++ b/docs/pages/joy-ui/api/circular-progress.json
@@ -7,6 +7,7 @@
},
"default": "'primary'"
},
+ "component": { "type": { "name": "elementType" } },
"determinate": { "type": { "name": "bool" }, "default": "false" },
"size": {
"type": {
@@ -15,6 +16,20 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ progress?: func
| object, root?: func
| object, svg?: func
| object, track?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ progress?: elementType, root?: elementType, svg?: elementType, track?: elementType }"
+ },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/divider.json b/docs/pages/joy-ui/api/divider.json
index e0b48ee0ec6322..9833d3b3b0c64a 100644
--- a/docs/pages/joy-ui/api/divider.json
+++ b/docs/pages/joy-ui/api/divider.json
@@ -12,6 +12,14 @@
"type": { "name": "enum", "description": "'horizontal'
| 'vertical'" },
"default": "'horizontal'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/form-helper-text.json b/docs/pages/joy-ui/api/form-helper-text.json
index f5ad6c18f35525..ac6f2cef69ed24 100644
--- a/docs/pages/joy-ui/api/form-helper-text.json
+++ b/docs/pages/joy-ui/api/form-helper-text.json
@@ -2,6 +2,14 @@
"props": {
"children": { "type": { "name": "node" } },
"component": { "type": { "name": "elementType" } },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/icon-button.json b/docs/pages/joy-ui/api/icon-button.json
index 0888f14759acce..6b46dd5406e314 100644
--- a/docs/pages/joy-ui/api/icon-button.json
+++ b/docs/pages/joy-ui/api/icon-button.json
@@ -23,6 +23,14 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/linear-progress.json b/docs/pages/joy-ui/api/linear-progress.json
index ba57059d72dbd5..72e7022ba8026a 100644
--- a/docs/pages/joy-ui/api/linear-progress.json
+++ b/docs/pages/joy-ui/api/linear-progress.json
@@ -16,6 +16,14 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/link.json b/docs/pages/joy-ui/api/link.json
index 6912718928fd78..b000988dda9b48 100644
--- a/docs/pages/joy-ui/api/link.json
+++ b/docs/pages/joy-ui/api/link.json
@@ -8,6 +8,7 @@
},
"default": "'primary'"
},
+ "component": { "type": { "name": "elementType" } },
"disabled": { "type": { "name": "bool" }, "default": "false" },
"endDecorator": { "type": { "name": "node" } },
"level": {
@@ -18,6 +19,20 @@
"default": "'body1'"
},
"overlay": { "type": { "name": "bool" }, "default": "false" },
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ endDecorator?: func
| object, root?: func
| object, startDecorator?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ endDecorator?: elementType, root?: elementType, startDecorator?: elementType }"
+ },
+ "default": "{}"
+ },
"startDecorator": { "type": { "name": "node" } },
"sx": {
"type": {
diff --git a/docs/pages/joy-ui/api/list-divider.json b/docs/pages/joy-ui/api/list-divider.json
index 6bc5611b5a0a01..09fa25a6e19682 100644
--- a/docs/pages/joy-ui/api/list-divider.json
+++ b/docs/pages/joy-ui/api/list-divider.json
@@ -13,6 +13,14 @@
"type": { "name": "enum", "description": "'horizontal'
| 'vertical'" },
"default": "'horizontal'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/list-item-button.json b/docs/pages/joy-ui/api/list-item-button.json
index 74e146d2c50335..3cda7fba9d8509 100644
--- a/docs/pages/joy-ui/api/list-item-button.json
+++ b/docs/pages/joy-ui/api/list-item-button.json
@@ -23,6 +23,14 @@
"default": "'horizontal'"
},
"selected": { "type": { "name": "bool" }, "default": "false" },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/list-item-content.json b/docs/pages/joy-ui/api/list-item-content.json
index edbbb372b8c3e6..206ffd7831914c 100644
--- a/docs/pages/joy-ui/api/list-item-content.json
+++ b/docs/pages/joy-ui/api/list-item-content.json
@@ -2,6 +2,14 @@
"props": {
"children": { "type": { "name": "node" } },
"component": { "type": { "name": "elementType" } },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/list-item-decorator.json b/docs/pages/joy-ui/api/list-item-decorator.json
index 5bf7d5f3e5ebf4..f8729f2e3a683d 100644
--- a/docs/pages/joy-ui/api/list-item-decorator.json
+++ b/docs/pages/joy-ui/api/list-item-decorator.json
@@ -2,6 +2,14 @@
"props": {
"children": { "type": { "name": "node" } },
"component": { "type": { "name": "elementType" } },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/list-item.json b/docs/pages/joy-ui/api/list-item.json
index 0f2400d208cd9d..8019ccb1070763 100644
--- a/docs/pages/joy-ui/api/list-item.json
+++ b/docs/pages/joy-ui/api/list-item.json
@@ -11,6 +11,20 @@
"component": { "type": { "name": "elementType" } },
"endAction": { "type": { "name": "node" } },
"nested": { "type": { "name": "bool" }, "default": "false" },
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ endAction?: func
| object, root?: func
| object, startAction?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ endAction?: elementType, root?: elementType, startAction?: elementType }"
+ },
+ "default": "{}"
+ },
"startAction": { "type": { "name": "node" } },
"sticky": { "type": { "name": "bool" }, "default": "false" },
"sx": {
diff --git a/docs/pages/joy-ui/api/list-subheader.json b/docs/pages/joy-ui/api/list-subheader.json
index 963a0fcab9e578..d763598b057d62 100644
--- a/docs/pages/joy-ui/api/list-subheader.json
+++ b/docs/pages/joy-ui/api/list-subheader.json
@@ -8,6 +8,14 @@
}
},
"component": { "type": { "name": "elementType" } },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sticky": { "type": { "name": "bool" }, "default": "false" },
"sx": {
"type": {
diff --git a/docs/pages/joy-ui/api/list.json b/docs/pages/joy-ui/api/list.json
index e8185c0af7b0be..a98ada16b5f83e 100644
--- a/docs/pages/joy-ui/api/list.json
+++ b/docs/pages/joy-ui/api/list.json
@@ -20,6 +20,14 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/menu-item.json b/docs/pages/joy-ui/api/menu-item.json
index b651d0ff457cff..e939bef560d36b 100644
--- a/docs/pages/joy-ui/api/menu-item.json
+++ b/docs/pages/joy-ui/api/menu-item.json
@@ -9,6 +9,14 @@
"default": "selected ? 'primary' : 'neutral'"
},
"selected": { "type": { "name": "bool" }, "default": "false" },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"variant": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/menu-list.json b/docs/pages/joy-ui/api/menu-list.json
index afd856334c1624..12463b7899e799 100644
--- a/docs/pages/joy-ui/api/menu-list.json
+++ b/docs/pages/joy-ui/api/menu-list.json
@@ -21,6 +21,14 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/menu.json b/docs/pages/joy-ui/api/menu.json
index a4edb80ef58db3..4ec1d0c3b7d2c0 100644
--- a/docs/pages/joy-ui/api/menu.json
+++ b/docs/pages/joy-ui/api/menu.json
@@ -27,6 +27,14 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
@@ -54,7 +62,7 @@
"spread": true,
"themeDefaultProps": false,
"muiName": "JoyMenu",
- "forwardsRefTo": "HTMLUListElement",
+ "forwardsRefTo": "HTMLDivElement",
"filename": "/packages/mui-joy/src/Menu/Menu.tsx",
"inheritance": { "component": "PopperUnstyled", "pathname": "/base/api/popper-unstyled/" },
"demos": "",
diff --git a/docs/pages/joy-ui/api/modal-close.json b/docs/pages/joy-ui/api/modal-close.json
index 843a05141e2908..8c8ac7adf3e54d 100644
--- a/docs/pages/joy-ui/api/modal-close.json
+++ b/docs/pages/joy-ui/api/modal-close.json
@@ -15,6 +15,14 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/modal-dialog.json b/docs/pages/joy-ui/api/modal-dialog.json
index 7fd3767fecd4b6..0f11e53cc2afb0 100644
--- a/docs/pages/joy-ui/api/modal-dialog.json
+++ b/docs/pages/joy-ui/api/modal-dialog.json
@@ -23,6 +23,14 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/modal.json b/docs/pages/joy-ui/api/modal.json
index 61aba2e2b9a731..4358dfb91be052 100644
--- a/docs/pages/joy-ui/api/modal.json
+++ b/docs/pages/joy-ui/api/modal.json
@@ -2,6 +2,7 @@
"props": {
"children": { "type": { "name": "custom", "description": "element" }, "required": true },
"open": { "type": { "name": "bool" }, "required": true },
+ "component": { "type": { "name": "elementType" } },
"container": { "type": { "name": "union", "description": "HTML element
| func" } },
"disableAutoFocus": { "type": { "name": "bool" }, "default": "false" },
"disableEnforceFocus": { "type": { "name": "bool" }, "default": "false" },
@@ -12,6 +13,17 @@
"hideBackdrop": { "type": { "name": "bool" }, "default": "false" },
"keepMounted": { "type": { "name": "bool" }, "default": "false" },
"onClose": { "type": { "name": "func" } },
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ backdrop?: func
| object, root?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ backdrop?: elementType, root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/option.json b/docs/pages/joy-ui/api/option.json
index 448de11c7012e5..36493f504d4523 100644
--- a/docs/pages/joy-ui/api/option.json
+++ b/docs/pages/joy-ui/api/option.json
@@ -11,6 +11,14 @@
"component": { "type": { "name": "elementType" } },
"disabled": { "type": { "name": "bool" }, "default": "false" },
"label": { "type": { "name": "union", "description": "element
| string" } },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/radio.json b/docs/pages/joy-ui/api/radio.json
index 583c09112329ee..28038d5cf6d7d8 100644
--- a/docs/pages/joy-ui/api/radio.json
+++ b/docs/pages/joy-ui/api/radio.json
@@ -10,6 +10,7 @@
},
"default": "'neutral'"
},
+ "component": { "type": { "name": "elementType" } },
"defaultChecked": { "type": { "name": "bool" } },
"disabled": { "type": { "name": "bool" } },
"disableIcon": { "type": { "name": "bool" }, "default": "false" },
@@ -26,6 +27,20 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ action?: func
| object, icon?: func
| object, input?: func
| object, label?: func
| object, radio?: func
| object, root?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ action?: elementType, icon?: elementType, input?: elementType, label?: elementType, radio?: elementType, root?: elementType }"
+ },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/scoped-css-baseline.json b/docs/pages/joy-ui/api/scoped-css-baseline.json
index f94dd51e62ccbd..3fc84e35ada114 100644
--- a/docs/pages/joy-ui/api/scoped-css-baseline.json
+++ b/docs/pages/joy-ui/api/scoped-css-baseline.json
@@ -3,6 +3,14 @@
"children": { "type": { "name": "node" } },
"component": { "type": { "name": "elementType" } },
"disableColorScheme": { "type": { "name": "bool" }, "default": "false" },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/sheet.json b/docs/pages/joy-ui/api/sheet.json
index e6e9def1eb495e..7983a4e332cc3d 100644
--- a/docs/pages/joy-ui/api/sheet.json
+++ b/docs/pages/joy-ui/api/sheet.json
@@ -10,6 +10,14 @@
},
"component": { "type": { "name": "elementType" } },
"invertedColors": { "type": { "name": "bool" }, "default": "false" },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/slider.json b/docs/pages/joy-ui/api/slider.json
index 52fee97da08bc5..1e69ffa6874802 100644
--- a/docs/pages/joy-ui/api/slider.json
+++ b/docs/pages/joy-ui/api/slider.json
@@ -10,6 +10,7 @@
},
"default": "'primary'"
},
+ "component": { "type": { "name": "elementType" } },
"defaultValue": {
"type": { "name": "union", "description": "Array<number>
| number" }
},
@@ -42,6 +43,20 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ input?: func
| object, mark?: func
| object, markLabel?: func
| object, rail?: func
| object, root?: func
| object, thumb?: func
| object, track?: func
| object, valueLabel?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ input?: elementType, mark?: elementType, markLabel?: elementType, rail?: elementType, root?: elementType, thumb?: elementType, track?: elementType, valueLabel?: elementType }"
+ },
+ "default": "{}"
+ },
"step": { "type": { "name": "number" }, "default": "1" },
"sx": {
"type": {
diff --git a/docs/pages/joy-ui/api/svg-icon.json b/docs/pages/joy-ui/api/svg-icon.json
index 77f51eee103db9..7961d4811f2ada 100644
--- a/docs/pages/joy-ui/api/svg-icon.json
+++ b/docs/pages/joy-ui/api/svg-icon.json
@@ -19,6 +19,14 @@
"htmlColor": { "type": { "name": "string" } },
"inheritViewBox": { "type": { "name": "bool" }, "default": "false" },
"shapeRendering": { "type": { "name": "string" } },
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/switch.json b/docs/pages/joy-ui/api/switch.json
index 92c5dbcb2906d2..5c8f9881101b3e 100644
--- a/docs/pages/joy-ui/api/switch.json
+++ b/docs/pages/joy-ui/api/switch.json
@@ -8,6 +8,7 @@
},
"default": "'neutral'"
},
+ "component": { "type": { "name": "elementType" } },
"defaultChecked": { "type": { "name": "bool" } },
"disabled": { "type": { "name": "bool" } },
"endDecorator": { "type": { "name": "union", "description": "node
| func" } },
@@ -21,6 +22,20 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ action?: func
| object, endDecorator?: func
| object, input?: func
| object, root?: func
| object, startDecorator?: func
| object, thumb?: func
| object, track?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ action?: elementType, endDecorator?: elementType, input?: elementType, root?: elementType, startDecorator?: elementType, thumb?: elementType, track?: elementType }"
+ },
+ "default": "{}"
+ },
"startDecorator": { "type": { "name": "union", "description": "node
| func" } },
"sx": {
"type": {
diff --git a/docs/pages/joy-ui/api/tab-list.json b/docs/pages/joy-ui/api/tab-list.json
index fa8cc21976da34..5a0332ff946330 100644
--- a/docs/pages/joy-ui/api/tab-list.json
+++ b/docs/pages/joy-ui/api/tab-list.json
@@ -15,6 +15,14 @@
"description": "'sm'
| 'md'
| 'lg'
| string"
}
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/tab-panel.json b/docs/pages/joy-ui/api/tab-panel.json
index 56741417cbf739..4f3c1d238b1584 100644
--- a/docs/pages/joy-ui/api/tab-panel.json
+++ b/docs/pages/joy-ui/api/tab-panel.json
@@ -8,6 +8,14 @@
"description": "'sm'
| 'md'
| 'lg'
| string"
}
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/tab.json b/docs/pages/joy-ui/api/tab.json
index eef32912ef4e6f..327df793074920 100644
--- a/docs/pages/joy-ui/api/tab.json
+++ b/docs/pages/joy-ui/api/tab.json
@@ -20,6 +20,14 @@
"type": { "name": "enum", "description": "'horizontal'
| 'vertical'" },
"default": "'horizontal'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/table.json b/docs/pages/joy-ui/api/table.json
index f62018786652df..f6cb3bcec3d0dc 100644
--- a/docs/pages/joy-ui/api/table.json
+++ b/docs/pages/joy-ui/api/table.json
@@ -25,6 +25,14 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"stickyHeader": { "type": { "name": "bool" }, "default": "false" },
"stripe": {
"type": {
diff --git a/docs/pages/joy-ui/api/tabs.json b/docs/pages/joy-ui/api/tabs.json
index 7ff1b37fab837b..312a8ebd254e28 100644
--- a/docs/pages/joy-ui/api/tabs.json
+++ b/docs/pages/joy-ui/api/tabs.json
@@ -32,6 +32,14 @@
},
"default": "'md'"
},
+ "slotProps": {
+ "type": { "name": "shape", "description": "{ root?: func
| object }" },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/tooltip.json b/docs/pages/joy-ui/api/tooltip.json
index d02987c9821027..17aea0554636b0 100644
--- a/docs/pages/joy-ui/api/tooltip.json
+++ b/docs/pages/joy-ui/api/tooltip.json
@@ -9,6 +9,7 @@
},
"default": "'neutral'"
},
+ "component": { "type": { "name": "elementType" } },
"describeChild": { "type": { "name": "bool" }, "default": "false" },
"direction": {
"type": { "name": "enum", "description": "'ltr'
| 'rtl'" },
@@ -47,6 +48,17 @@
"type": { "name": "enum", "description": "'sm'
| 'md'
| 'lg'" },
"default": "'md'"
},
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ arrow?: func
| object, root?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": { "name": "shape", "description": "{ arrow?: elementType, root?: elementType }" },
+ "default": "{}"
+ },
"sx": {
"type": {
"name": "union",
diff --git a/docs/pages/joy-ui/api/typography.json b/docs/pages/joy-ui/api/typography.json
index 66743cd71e9e42..84b7048d96f573 100644
--- a/docs/pages/joy-ui/api/typography.json
+++ b/docs/pages/joy-ui/api/typography.json
@@ -22,6 +22,20 @@
"default": "{\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n h6: 'h6',\n body1: 'p',\n body2: 'p',\n body3: 'p',\n inherit: 'p',\n}"
},
"noWrap": { "type": { "name": "bool" }, "default": "false" },
+ "slotProps": {
+ "type": {
+ "name": "shape",
+ "description": "{ endDecorator?: func
| object, root?: func
| object, startDecorator?: func
| object }"
+ },
+ "default": "{}"
+ },
+ "slots": {
+ "type": {
+ "name": "shape",
+ "description": "{ endDecorator?: elementType, root?: elementType, startDecorator?: elementType }"
+ },
+ "default": "{}"
+ },
"startDecorator": { "type": { "name": "node" } },
"sx": {
"type": {
diff --git a/docs/translations/api-docs-joy/alert/alert.json b/docs/translations/api-docs-joy/alert/alert.json
index 166fc4c6ef43df..12fc2dd17900f4 100644
--- a/docs/translations/api-docs-joy/alert/alert.json
+++ b/docs/translations/api-docs-joy/alert/alert.json
@@ -2,9 +2,12 @@
"componentDescription": "",
"propDescriptions": {
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"endDecorator": "Element placed after the children.",
"role": "The ARIA role attribute of the element.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"startDecorator": "Element placed before the children.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
diff --git a/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json b/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json
index 4a3bbd0788d841..ccc369faacaf4d 100644
--- a/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json
+++ b/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json
@@ -3,10 +3,13 @@
"propDescriptions": {
"children": "Used to render icon or text elements inside the AspectRatio if src is not set. This can be an element, or just a string.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"maxHeight": "The maximum calculated height of the element (not the CSS height).",
"minHeight": "The minimum calculated height of the element (not the CSS height).",
"objectFit": "The CSS object-fit value of the first-child.",
"ratio": "The aspect-ratio of the element. The current implementation uses padding instead of the CSS aspect-ratio due to browser support. https://caniuse.com/?search=aspect-ratio",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/autocomplete-listbox/autocomplete-listbox.json b/docs/translations/api-docs-joy/autocomplete-listbox/autocomplete-listbox.json
index ff69dd776e7e75..a3f9975ca3909e 100644
--- a/docs/translations/api-docs-joy/autocomplete-listbox/autocomplete-listbox.json
+++ b/docs/translations/api-docs-joy/autocomplete-listbox/autocomplete-listbox.json
@@ -4,6 +4,8 @@
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"size": "The size of the component (affect other nested list* components). To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/autocomplete-option/autocomplete-option.json b/docs/translations/api-docs-joy/autocomplete-option/autocomplete-option.json
index 2b9fbcddd61817..35a7c4a7509306 100644
--- a/docs/translations/api-docs-joy/autocomplete-option/autocomplete-option.json
+++ b/docs/translations/api-docs-joy/autocomplete-option/autocomplete-option.json
@@ -3,6 +3,8 @@
"propDescriptions": {
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/autocomplete/autocomplete.json b/docs/translations/api-docs-joy/autocomplete/autocomplete.json
index 27da5dcc124bf6..aeff165f225c78 100644
--- a/docs/translations/api-docs-joy/autocomplete/autocomplete.json
+++ b/docs/translations/api-docs-joy/autocomplete/autocomplete.json
@@ -46,6 +46,8 @@
"renderTags": "Render the selected value.
Signature:
function(value: Array<T>, getTagProps: function, ownerState: object) => ReactNode
value: The value provided to the component.
getTagProps: A tag props getter.
ownerState: The state of the Autocomplete component.",
"required": "If true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"startDecorator": "Leading adornment for this input.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"type": "Type of the input element. It should be a valid HTML5 input type.",
diff --git a/docs/translations/api-docs-joy/avatar/avatar.json b/docs/translations/api-docs-joy/avatar/avatar.json
index 1e000beb23fe10..4d0e4d4be6c139 100644
--- a/docs/translations/api-docs-joy/avatar/avatar.json
+++ b/docs/translations/api-docs-joy/avatar/avatar.json
@@ -4,7 +4,10 @@
"alt": "Used in combination with src or srcSet to provide an alt attribute for the rendered img element.",
"children": "Used to render icon or text elements inside the Avatar if src is not set. This can be an element, or just a string.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"size": "The size of the component. It accepts theme values between 'sm' and 'lg'. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"src": "The src attribute for the img element.",
"srcSet": "The srcSet attribute for the img element. Use this attribute for responsive image display.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
diff --git a/docs/translations/api-docs-joy/badge/badge.json b/docs/translations/api-docs-joy/badge/badge.json
index 13dda006cfffc9..5c6dcf20d586dc 100644
--- a/docs/translations/api-docs-joy/badge/badge.json
+++ b/docs/translations/api-docs-joy/badge/badge.json
@@ -6,10 +6,13 @@
"badgeInset": "The inset of the badge. Support shorthand syntax as described in https://developer.mozilla.org/en-US/docs/Web/CSS/inset.",
"children": "The badge will be added relative to this node.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"invisible": "If true, the badge is invisible.",
"max": "Max count to show.",
"showZero": "Controls whether the badge is hidden when badgeContent is zero.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/breadcrumbs/breadcrumbs.json b/docs/translations/api-docs-joy/breadcrumbs/breadcrumbs.json
index 5ddcad845bbc57..851846491cefb2 100644
--- a/docs/translations/api-docs-joy/breadcrumbs/breadcrumbs.json
+++ b/docs/translations/api-docs-joy/breadcrumbs/breadcrumbs.json
@@ -2,8 +2,11 @@
"componentDescription": "",
"propDescriptions": {
"children": "The content of the component.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"separator": "Custom separator node.",
"size": "The size of the component. It accepts theme values between 'sm' and 'lg'. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": {},
diff --git a/docs/translations/api-docs-joy/button/button.json b/docs/translations/api-docs-joy/button/button.json
index 385f3584009e06..fb2c78e8f6735f 100644
--- a/docs/translations/api-docs-joy/button/button.json
+++ b/docs/translations/api-docs-joy/button/button.json
@@ -3,6 +3,7 @@
"propDescriptions": {
"action": "A ref for imperative actions. It currently only supports focusVisible() action.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"disabled": "If true, the component is disabled.",
"endDecorator": "Element placed after the children.",
"fullWidth": "If true, the button will take up the full width of its container.",
@@ -10,6 +11,8 @@
"loadingIndicator": "The node should contain an element with role="progressbar" with an accessible name. By default we render a CircularProgress that is labelled by the button itself.",
"loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"startDecorator": "Element placed before the children.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
diff --git a/docs/translations/api-docs-joy/card-overflow/card-overflow.json b/docs/translations/api-docs-joy/card-overflow/card-overflow.json
index d71c82ebc0f098..d1f9e63eb05308 100644
--- a/docs/translations/api-docs-joy/card-overflow/card-overflow.json
+++ b/docs/translations/api-docs-joy/card-overflow/card-overflow.json
@@ -4,6 +4,8 @@
"children": "Used to render icon or text elements inside the CardOverflow if src is not set. This can be an element, or just a string.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/card/card.json b/docs/translations/api-docs-joy/card/card.json
index b20810cbf6adac..4bd1bdeb7a4500 100644
--- a/docs/translations/api-docs-joy/card/card.json
+++ b/docs/translations/api-docs-joy/card/card.json
@@ -7,6 +7,8 @@
"invertedColors": "If true, the children with an implicit color prop invert their colors to match the component's variant and color.",
"orientation": "The component orientation.",
"size": "The size of the component. It accepts theme values between 'sm' and 'lg'. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/checkbox/checkbox.json b/docs/translations/api-docs-joy/checkbox/checkbox.json
index ae3d75ac46a0a2..18e4ae1d653c22 100644
--- a/docs/translations/api-docs-joy/checkbox/checkbox.json
+++ b/docs/translations/api-docs-joy/checkbox/checkbox.json
@@ -5,6 +5,7 @@
"checkedIcon": "The icon to display when the component is checked.",
"className": "Class name applied to the root element.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"defaultChecked": "The default checked state. Use when the component is not controlled.",
"disabled": "If true, the component is disabled.",
"disableIcon": "If true, the checked icon is removed and the selected variant is applied on the action element instead.",
@@ -17,6 +18,8 @@
"readOnly": "If true, the component is read only.",
"required": "If true, the input element is required.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"uncheckedIcon": "The icon when checked is false.",
"value": "The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value.",
diff --git a/docs/translations/api-docs-joy/chip-delete/chip-delete.json b/docs/translations/api-docs-joy/chip-delete/chip-delete.json
index 64c8db7f58b00c..b1552612788fcb 100644
--- a/docs/translations/api-docs-joy/chip-delete/chip-delete.json
+++ b/docs/translations/api-docs-joy/chip-delete/chip-delete.json
@@ -6,6 +6,8 @@
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"disabled": "If true, the component is disabled. If undefined, the value inherits from the parent chip via a React context.",
"onDelete": "Callback fired when the component is not disabled and either: - Backspace, Enter or Delete is pressed. - The component is clicked.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/chip/chip.json b/docs/translations/api-docs-joy/chip/chip.json
index 2fe7f870d09f89..df6f52384d64ab 100644
--- a/docs/translations/api-docs-joy/chip/chip.json
+++ b/docs/translations/api-docs-joy/chip/chip.json
@@ -3,10 +3,13 @@
"propDescriptions": {
"children": "The content of the component.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"disabled": "If true, the component is disabled.",
"endDecorator": "Element placed after the children.",
"onClick": "Element action click handler.",
"size": "The size of the component. It accepts theme values between 'sm' and 'lg'. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"startDecorator": "Element placed before the children.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
diff --git a/docs/translations/api-docs-joy/circular-progress/circular-progress.json b/docs/translations/api-docs-joy/circular-progress/circular-progress.json
index 47d5c6e328d9b2..ec6ec12cefe71a 100644
--- a/docs/translations/api-docs-joy/circular-progress/circular-progress.json
+++ b/docs/translations/api-docs-joy/circular-progress/circular-progress.json
@@ -2,8 +2,11 @@
"componentDescription": "## ARIA\n\nIf the progress bar is describing the loading progress of a particular region of a page,\nyou should use `aria-describedby` to point to the progress bar, and set the `aria-busy`\nattribute to `true` on that region until it has finished loading.",
"propDescriptions": {
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"determinate": "The boolean to select a variant. Use indeterminate when there is no progress value.",
"size": "The size of the component. It accepts theme values between 'sm' and 'lg'. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"thickness": "The thickness of the circle.",
"value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.",
diff --git a/docs/translations/api-docs-joy/divider/divider.json b/docs/translations/api-docs-joy/divider/divider.json
index e752df8672c28e..8cc291fdb1e582 100644
--- a/docs/translations/api-docs-joy/divider/divider.json
+++ b/docs/translations/api-docs-joy/divider/divider.json
@@ -5,6 +5,8 @@
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"inset": "The styles applied to the divider to shrink or stretch the line based on the orientation.",
"orientation": "The component orientation.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": {},
diff --git a/docs/translations/api-docs-joy/form-helper-text/form-helper-text.json b/docs/translations/api-docs-joy/form-helper-text/form-helper-text.json
index efdba74c592db2..e2aa2a5d2fbef1 100644
--- a/docs/translations/api-docs-joy/form-helper-text/form-helper-text.json
+++ b/docs/translations/api-docs-joy/form-helper-text/form-helper-text.json
@@ -3,6 +3,8 @@
"propDescriptions": {
"children": "The content of the component.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": {},
diff --git a/docs/translations/api-docs-joy/icon-button/icon-button.json b/docs/translations/api-docs-joy/icon-button/icon-button.json
index b9c9b216a8e541..dcf53df1cf9f80 100644
--- a/docs/translations/api-docs-joy/icon-button/icon-button.json
+++ b/docs/translations/api-docs-joy/icon-button/icon-button.json
@@ -7,6 +7,8 @@
"disabled": "If true, the component is disabled.",
"focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/linear-progress/linear-progress.json b/docs/translations/api-docs-joy/linear-progress/linear-progress.json
index be731bea7152db..2ceb1e3e1073aa 100644
--- a/docs/translations/api-docs-joy/linear-progress/linear-progress.json
+++ b/docs/translations/api-docs-joy/linear-progress/linear-progress.json
@@ -5,6 +5,8 @@
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"determinate": "The boolean to select a variant. Use indeterminate when there is no progress value.",
"size": "The size of the component. It accepts theme values between 'sm' and 'lg'. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"thickness": "The thickness of the bar.",
"value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.",
diff --git a/docs/translations/api-docs-joy/link/link.json b/docs/translations/api-docs-joy/link/link.json
index 7aa34ab7b3f969..c398207afdc817 100644
--- a/docs/translations/api-docs-joy/link/link.json
+++ b/docs/translations/api-docs-joy/link/link.json
@@ -3,10 +3,13 @@
"propDescriptions": {
"children": "The content of the component.",
"color": "The color of the link. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"disabled": "If true, the component is disabled.",
"endDecorator": "Element placed after the children.",
"level": "Applies the theme typography styles.",
"overlay": "If true, the ::after psuedo element is added to cover the area of interaction. The parent of the overlay Link should have relative CSS position.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"startDecorator": "Element placed before the children.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"textColor": "The system color.",
diff --git a/docs/translations/api-docs-joy/list-divider/list-divider.json b/docs/translations/api-docs-joy/list-divider/list-divider.json
index b62503087cf81b..6cd045559dd2a9 100644
--- a/docs/translations/api-docs-joy/list-divider/list-divider.json
+++ b/docs/translations/api-docs-joy/list-divider/list-divider.json
@@ -5,6 +5,8 @@
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"inset": "The empty space on the side(s) of the divider in a vertical list.
For horizontal list (the nearest parent List has row prop set to true), only inset="gutter" affects the list divider.",
"orientation": "The component orientation.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": {},
diff --git a/docs/translations/api-docs-joy/list-item-button/list-item-button.json b/docs/translations/api-docs-joy/list-item-button/list-item-button.json
index 26a3222c54ce86..caa999b9906600 100644
--- a/docs/translations/api-docs-joy/list-item-button/list-item-button.json
+++ b/docs/translations/api-docs-joy/list-item-button/list-item-button.json
@@ -10,6 +10,8 @@
"focusVisibleClassName": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed.",
"orientation": "The content direction flow.",
"selected": "If true, the component is selected.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/list-item-content/list-item-content.json b/docs/translations/api-docs-joy/list-item-content/list-item-content.json
index efdba74c592db2..e2aa2a5d2fbef1 100644
--- a/docs/translations/api-docs-joy/list-item-content/list-item-content.json
+++ b/docs/translations/api-docs-joy/list-item-content/list-item-content.json
@@ -3,6 +3,8 @@
"propDescriptions": {
"children": "The content of the component.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": {},
diff --git a/docs/translations/api-docs-joy/list-item-decorator/list-item-decorator.json b/docs/translations/api-docs-joy/list-item-decorator/list-item-decorator.json
index efdba74c592db2..e2aa2a5d2fbef1 100644
--- a/docs/translations/api-docs-joy/list-item-decorator/list-item-decorator.json
+++ b/docs/translations/api-docs-joy/list-item-decorator/list-item-decorator.json
@@ -3,6 +3,8 @@
"propDescriptions": {
"children": "The content of the component.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": {},
diff --git a/docs/translations/api-docs-joy/list-item/list-item.json b/docs/translations/api-docs-joy/list-item/list-item.json
index bb0b9bb9f252a8..f0081ada05c5db 100644
--- a/docs/translations/api-docs-joy/list-item/list-item.json
+++ b/docs/translations/api-docs-joy/list-item/list-item.json
@@ -6,6 +6,8 @@
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"endAction": "The element to display at the end of ListItem.",
"nested": "If true, the component can contain NestedList.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"startAction": "The element to display at the start of ListItem.",
"sticky": "If true, the component has sticky position (with top = 0).",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
diff --git a/docs/translations/api-docs-joy/list-subheader/list-subheader.json b/docs/translations/api-docs-joy/list-subheader/list-subheader.json
index a00067597fc6c8..09ba8a6578e30d 100644
--- a/docs/translations/api-docs-joy/list-subheader/list-subheader.json
+++ b/docs/translations/api-docs-joy/list-subheader/list-subheader.json
@@ -4,6 +4,8 @@
"children": "The content of the component.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sticky": "If true, the component has sticky position (with top = 0).",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
diff --git a/docs/translations/api-docs-joy/list/list.json b/docs/translations/api-docs-joy/list/list.json
index fb26f5bdb91528..d4108863785d68 100644
--- a/docs/translations/api-docs-joy/list/list.json
+++ b/docs/translations/api-docs-joy/list/list.json
@@ -6,6 +6,8 @@
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"orientation": "The component orientation.",
"size": "The size of the component (affect other nested list* components). To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants.",
"wrap": "Only for horizontal list. If true, the list sets the flex-wrap to "wrap" and adjust margin to have gap-like behavior (will move to gap in the future)."
diff --git a/docs/translations/api-docs-joy/menu-item/menu-item.json b/docs/translations/api-docs-joy/menu-item/menu-item.json
index cb3f68f3e26763..533fc31eb6a0a0 100644
--- a/docs/translations/api-docs-joy/menu-item/menu-item.json
+++ b/docs/translations/api-docs-joy/menu-item/menu-item.json
@@ -4,6 +4,8 @@
"children": "The content of the component.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
"selected": "If true, the component is selected.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
"classDescriptions": {},
diff --git a/docs/translations/api-docs-joy/menu-list/menu-list.json b/docs/translations/api-docs-joy/menu-list/menu-list.json
index d3c169be0b535d..97c7a1d10cff30 100644
--- a/docs/translations/api-docs-joy/menu-list/menu-list.json
+++ b/docs/translations/api-docs-joy/menu-list/menu-list.json
@@ -5,6 +5,8 @@
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"size": "The size of the component (affect other nested list* components because the Menu inherits List). To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/menu/menu.json b/docs/translations/api-docs-joy/menu/menu.json
index 800aa39e4102fe..f6a965e075a582 100644
--- a/docs/translations/api-docs-joy/menu/menu.json
+++ b/docs/translations/api-docs-joy/menu/menu.json
@@ -11,6 +11,8 @@
"onClose": "Triggered when focus leaves the menu and the menu should close.",
"open": "Controls whether the menu is displayed.",
"size": "The size of the component (affect other nested list* components because the Menu inherits List). To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/modal-close/modal-close.json b/docs/translations/api-docs-joy/modal-close/modal-close.json
index 083b69ab2168aa..22048ddfabb20f 100644
--- a/docs/translations/api-docs-joy/modal-close/modal-close.json
+++ b/docs/translations/api-docs-joy/modal-close/modal-close.json
@@ -4,6 +4,8 @@
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/modal-dialog/modal-dialog.json b/docs/translations/api-docs-joy/modal-dialog/modal-dialog.json
index 91f1d836e20252..993bbad24e7df6 100644
--- a/docs/translations/api-docs-joy/modal-dialog/modal-dialog.json
+++ b/docs/translations/api-docs-joy/modal-dialog/modal-dialog.json
@@ -6,6 +6,8 @@
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"layout": "The layout of the dialog",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/modal/modal.json b/docs/translations/api-docs-joy/modal/modal.json
index 966b503f91b49f..0a6460816a18ab 100644
--- a/docs/translations/api-docs-joy/modal/modal.json
+++ b/docs/translations/api-docs-joy/modal/modal.json
@@ -2,6 +2,7 @@
"componentDescription": "",
"propDescriptions": {
"children": "A single child content element.
⚠️ Needs to be able to hold a ref.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"container": "An HTML element or function that returns one. The container will have the portal children appended to it.
By default, it uses the body of the top-level document object, so it's simply document.body most of the time.",
"disableAutoFocus": "If true, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the disableAutoFocus prop.
Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.",
"disableEnforceFocus": "If true, the modal will not prevent focus from leaving the modal while open.
Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.",
@@ -13,6 +14,8 @@
"keepMounted": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Modal.",
"onClose": "Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose.
Signature:
function(event: object, reason: string) => void
event: The event source of the callback.
reason: Can be: "escapeKeyDown", "backdropClick", "closeClick".",
"open": "If true, the component is shown.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": {},
diff --git a/docs/translations/api-docs-joy/option/option.json b/docs/translations/api-docs-joy/option/option.json
index c3f5bc69c3c806..3d27e5af81c6a1 100644
--- a/docs/translations/api-docs-joy/option/option.json
+++ b/docs/translations/api-docs-joy/option/option.json
@@ -6,6 +6,8 @@
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"disabled": "If true, the component is disabled.",
"label": "A text representation of the option's content. Used for keyboard text navigation matching.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"value": "The option value.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
diff --git a/docs/translations/api-docs-joy/radio/radio.json b/docs/translations/api-docs-joy/radio/radio.json
index 0ebeb629fa8413..8959f3e7124dc7 100644
--- a/docs/translations/api-docs-joy/radio/radio.json
+++ b/docs/translations/api-docs-joy/radio/radio.json
@@ -5,6 +5,7 @@
"checkedIcon": "The icon to display when the component is checked.",
"className": "Class name applied to the root element.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"defaultChecked": "The default checked state. Use when the component is not controlled.",
"disabled": "If true, the component is disabled.",
"disableIcon": "If true, the checked icon is removed and the selected variant is applied on the action element instead.",
@@ -15,6 +16,8 @@
"readOnly": "If true, the component is read only.",
"required": "If true, the input element is required.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"uncheckedIcon": "The icon to display when the component is not checked.",
"value": "The value of the component. The DOM API casts this to a string.",
diff --git a/docs/translations/api-docs-joy/scoped-css-baseline/scoped-css-baseline.json b/docs/translations/api-docs-joy/scoped-css-baseline/scoped-css-baseline.json
index f26bffa748a51e..b9b31fb7480e7b 100644
--- a/docs/translations/api-docs-joy/scoped-css-baseline/scoped-css-baseline.json
+++ b/docs/translations/api-docs-joy/scoped-css-baseline/scoped-css-baseline.json
@@ -4,6 +4,8 @@
"children": "You can wrap a node.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"disableColorScheme": "Disable color-scheme CSS property. For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme For browser support, check out https://caniuse.com/?search=color-scheme",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": {},
diff --git a/docs/translations/api-docs-joy/sheet/sheet.json b/docs/translations/api-docs-joy/sheet/sheet.json
index 84f10da3c8d6e1..56e166c966dc16 100644
--- a/docs/translations/api-docs-joy/sheet/sheet.json
+++ b/docs/translations/api-docs-joy/sheet/sheet.json
@@ -5,6 +5,8 @@
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"invertedColors": "If true, the children with an implicit color prop invert their colors to match the component's variant and color.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/slider/slider.json b/docs/translations/api-docs-joy/slider/slider.json
index c167556e8eee6f..78ba65ceda8f64 100644
--- a/docs/translations/api-docs-joy/slider/slider.json
+++ b/docs/translations/api-docs-joy/slider/slider.json
@@ -5,6 +5,7 @@
"aria-valuetext": "A string value that provides a user-friendly name for the current value of the slider.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"defaultValue": "The default value. Use when the component is not controlled.",
"disabled": "If true, the component is disabled.",
"disableSwap": "If true, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.",
@@ -20,6 +21,8 @@
"orientation": "The component orientation.",
"scale": "A transformation function, to change the scale of the slider.
Signature:
function(x: any) => any
",
"size": "The size of the component. It accepts theme values between 'sm' and 'lg'. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"step": "The granularity with which the slider can step through values. (A "discrete" slider.) The min prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
When step is null, the thumb can only be slid onto marks provided with the marks prop.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"tabIndex": "Tab index attribute of the hidden input element.",
diff --git a/docs/translations/api-docs-joy/svg-icon/svg-icon.json b/docs/translations/api-docs-joy/svg-icon/svg-icon.json
index cd08cfa5f584bb..a2a8554d751a3f 100644
--- a/docs/translations/api-docs-joy/svg-icon/svg-icon.json
+++ b/docs/translations/api-docs-joy/svg-icon/svg-icon.json
@@ -8,6 +8,8 @@
"htmlColor": "Applies a color attribute to the SVG element.",
"inheritViewBox": "If true, the root node will inherit the custom component's viewBox and the viewBox prop will be ignored. Useful when you want to reference a custom component and have SvgIcon pass that component's viewBox to the root node.",
"shapeRendering": "The shape-rendering attribute. The behavior of the different options is described on the MDN Web Docs. If you are having issues with blurry icons you should investigate this prop.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"titleAccess": "Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent",
"viewBox": "Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox="0 0 50 20", this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px."
diff --git a/docs/translations/api-docs-joy/switch/switch.json b/docs/translations/api-docs-joy/switch/switch.json
index 44bbc0d526737f..414baedeec5e58 100644
--- a/docs/translations/api-docs-joy/switch/switch.json
+++ b/docs/translations/api-docs-joy/switch/switch.json
@@ -3,6 +3,7 @@
"propDescriptions": {
"checked": "If true, the component is checked.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"defaultChecked": "The default checked state. Use when the component is not controlled.",
"disabled": "If true, the component is disabled.",
"endDecorator": "The element that appears at the end of the switch.",
@@ -10,6 +11,8 @@
"readOnly": "If true, the component is read only.",
"required": "If true, the input element is required.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"startDecorator": "The element that appears at the end of the switch.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
diff --git a/docs/translations/api-docs-joy/tab-list/tab-list.json b/docs/translations/api-docs-joy/tab-list/tab-list.json
index f3d7ad2d7a0b3a..f68f585d1936c2 100644
--- a/docs/translations/api-docs-joy/tab-list/tab-list.json
+++ b/docs/translations/api-docs-joy/tab-list/tab-list.json
@@ -5,6 +5,8 @@
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
},
diff --git a/docs/translations/api-docs-joy/tab-panel/tab-panel.json b/docs/translations/api-docs-joy/tab-panel/tab-panel.json
index 84d37f1f78e4e8..0bd13629ddf5d8 100644
--- a/docs/translations/api-docs-joy/tab-panel/tab-panel.json
+++ b/docs/translations/api-docs-joy/tab-panel/tab-panel.json
@@ -4,6 +4,8 @@
"children": "The content of the component.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"value": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected."
},
diff --git a/docs/translations/api-docs-joy/tab/tab.json b/docs/translations/api-docs-joy/tab/tab.json
index 4133ce606dbeb3..0a81334faa68e6 100644
--- a/docs/translations/api-docs-joy/tab/tab.json
+++ b/docs/translations/api-docs-joy/tab/tab.json
@@ -7,6 +7,8 @@
"disabled": "If true, the component is disabled.",
"onChange": "Callback invoked when new value is being set.",
"orientation": "The content direction flow.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"value": "You can provide your own value. Otherwise, we fall back to the child position index.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
diff --git a/docs/translations/api-docs-joy/table/table.json b/docs/translations/api-docs-joy/table/table.json
index e213e32ebe2e5b..17783d10e63393 100644
--- a/docs/translations/api-docs-joy/table/table.json
+++ b/docs/translations/api-docs-joy/table/table.json
@@ -8,6 +8,8 @@
"hoverRow": "If true, the table row will shade on hover.",
"noWrap": "If true, the body cells will not wrap, but instead will truncate with a text overflow ellipsis.
Note: Header cells are always truncated with overflow ellipsis.",
"size": "The size of the component. It accepts theme values between 'sm' and 'lg'. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"stickyHeader": "Set the header sticky.
⚠️ It doesn't work with IE11.",
"stripe": "The odd or even row of the table body will have subtle background color.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
diff --git a/docs/translations/api-docs-joy/tabs/tabs.json b/docs/translations/api-docs-joy/tabs/tabs.json
index 18a12a027aff38..ee52947647b401 100644
--- a/docs/translations/api-docs-joy/tabs/tabs.json
+++ b/docs/translations/api-docs-joy/tabs/tabs.json
@@ -10,6 +10,8 @@
"orientation": "The component orientation (layout flow direction).",
"selectionFollowsFocus": "If true the selected tab changes on focus. Otherwise it only changes on activation.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"value": "The value of the currently selected Tab. If you don't want any selected Tab, you can set this prop to false.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
diff --git a/docs/translations/api-docs-joy/tooltip/tooltip.json b/docs/translations/api-docs-joy/tooltip/tooltip.json
index e1513f44e07423..992421f1642475 100644
--- a/docs/translations/api-docs-joy/tooltip/tooltip.json
+++ b/docs/translations/api-docs-joy/tooltip/tooltip.json
@@ -4,6 +4,7 @@
"arrow": "If true, adds an arrow to the tooltip.",
"children": "Tooltip reference element.",
"color": "The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors.",
+ "component": "The component used for the root node. Either a string to use a HTML element or a component.",
"describeChild": "Set to true if the title acts as an accessible description. By default the title acts as an accessible label for the child.",
"direction": "Direction of the text.",
"disableFocusListener": "Do not respond to focus-visible events.",
@@ -25,6 +26,8 @@
"open": "If true, the component is shown.",
"placement": "Tooltip placement.",
"size": "The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"title": "Tooltip title. Zero-length titles string, undefined, null and false are never displayed.",
"variant": "The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants."
diff --git a/docs/translations/api-docs-joy/typography/typography.json b/docs/translations/api-docs-joy/typography/typography.json
index 10f3244d6df944..cb8f5d399d1c16 100644
--- a/docs/translations/api-docs-joy/typography/typography.json
+++ b/docs/translations/api-docs-joy/typography/typography.json
@@ -9,6 +9,8 @@
"level": "Applies the theme typography styles.",
"levelMapping": "The component maps the variant prop to a range of different HTML element types. For instance, body1 to <h6>. If you wish to change that mapping, you can provide your own. Alternatively, you can use the component prop.",
"noWrap": "If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.
Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow).",
+ "slotProps": "The props used for each slot inside.",
+ "slots": "The components used for each slot inside. See Slots API below for more details.",
"startDecorator": "Element placed before the children.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"textColor": "The system color.",
diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx
index baee37f2a32a7e..9c4c2ad6955073 100644
--- a/packages/mui-joy/src/Alert/Alert.tsx
+++ b/packages/mui-joy/src/Alert/Alert.tsx
@@ -124,6 +124,9 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
size = 'md',
startDecorator,
endDecorator,
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -137,12 +140,13 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: AlertRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
role,
@@ -152,14 +156,14 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
className: classes.startDecorator,
elementType: AlertStartDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
className: classes.endDecorator,
elementType: AlertEndDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -196,6 +200,11 @@ Alert.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
PropTypes.string,
]),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* Element placed after the children.
*/
@@ -213,6 +222,24 @@ Alert.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ endDecorator: PropTypes.elementType,
+ root: PropTypes.elementType,
+ startDecorator: PropTypes.elementType,
+ }),
/**
* Element placed before the children.
*/
diff --git a/packages/mui-joy/src/Alert/AlertProps.ts b/packages/mui-joy/src/Alert/AlertProps.ts
index c83de404dbeabe..f51c6e28ea8b86 100644
--- a/packages/mui-joy/src/Alert/AlertProps.ts
+++ b/packages/mui-joy/src/Alert/AlertProps.ts
@@ -10,17 +10,17 @@ export interface AlertSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the start decorator.
* @default 'span'
*/
- startDecorator: React.ElementType;
+ startDecorator?: React.ElementType;
/**
* The component that renders the end decorator.
* @default 'span'
*/
- endDecorator: React.ElementType;
+ endDecorator?: React.ElementType;
}
export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
index b1aa59cbd458ec..caae16ab6a653e 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
+++ b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
@@ -108,6 +108,9 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) {
objectFit = 'cover',
color: colorProp = 'neutral',
variant = 'soft',
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -124,19 +127,20 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: classes.root,
elementType: AspectRatioRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotContent, contentProps] = useSlot('content', {
className: classes.content,
elementType: AspectRatioContent,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -168,6 +172,11 @@ AspectRatio.propTypes /* remove-proptypes */ = {
* @default 'neutral'
*/
color: PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* The maximum calculated height of the element (not the CSS height).
*/
@@ -199,6 +208,22 @@ AspectRatio.propTypes /* remove-proptypes */ = {
* @default '16 / 9'
*/
ratio: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ content: PropTypes.elementType,
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts b/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts
index ab480ff9e0303b..90be05d28e0f2d 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts
+++ b/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts
@@ -10,12 +10,12 @@ export interface AspectRatioSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the content.
* @default 'div'
*/
- content: React.ElementType;
+ content?: React.ElementType;
}
export interface AspectRatioPropsColorOverrides {}
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
index 3dd22737ade04b..239fb99d5423ad 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
@@ -345,6 +345,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(
color: colorProp = 'neutral',
variant = 'outlined',
value: valueProp,
+ component,
+ slots = {},
+ slotProps = {},
...otherProps
} = props;
const other = excludeUseAutocompleteParams(otherProps);
@@ -400,6 +403,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
let selectedOptions;
@@ -446,7 +450,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
ref: rootRef,
className: [classes.root, rootStateClasses],
elementType: AutocompleteRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
getSlotProps: getRootProps,
});
@@ -454,7 +458,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
const [SlotWrapper, wrapperProps] = useSlot('wrapper', {
className: classes.wrapper,
elementType: AutocompleteWrapper,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -483,7 +487,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
},
};
},
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
autoFocus,
@@ -503,14 +507,14 @@ const Autocomplete = React.forwardRef(function Autocomplete(
const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
className: classes.startDecorator,
elementType: AutocompleteStartDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
className: classes.endDecorator,
elementType: AutocompleteEndDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -518,7 +522,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
className: classes.clearIndicator,
elementType: AutocompleteClearIndicator,
getSlotProps: getClearProps,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
getSlotOwnerState: (mergedProps) => ({
size: mergedProps.size || size,
@@ -535,7 +539,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
className: classes.popupIndicator,
elementType: AutocompletePopupIndicator,
getSlotProps: getPopupIndicatorProps,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
getSlotOwnerState: (mergedProps) => ({
size: mergedProps.size || size,
@@ -554,7 +558,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
className: classes.listbox,
elementType: PopperUnstyled as OverridableComponent>,
getSlotProps: getListboxProps,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
getSlotOwnerState: (mergedProps) => ({
size: mergedProps.size || size,
@@ -579,14 +583,14 @@ const Autocomplete = React.forwardRef(function Autocomplete(
const [SlotLoading, loadingProps] = useSlot('loading', {
className: classes.loading,
elementType: AutocompleteLoading,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotNoOptions, noOptionsProps] = useSlot('noOptions', {
className: classes.noOptions,
elementType: AutocompleteNoOptions,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
role: 'presentation',
@@ -600,7 +604,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
const [SlotLimitTag, limitTagProps] = useSlot('limitTag', {
className: classes.limitTag,
elementType: AutocompleteLimitTag,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -619,7 +623,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
const [SlotOption, baseOptionProps] = useSlot('option', {
className: classes.option,
elementType: AutocompleteOption,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
getSlotOwnerState: (mergedProps) => ({
variant: mergedProps.variant || 'plain',
@@ -1038,6 +1042,42 @@ Autocomplete.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ clearIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ limitTag: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ loading: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ noOptions: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ option: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ wrapper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ clearIndicator: PropTypes.elementType,
+ endDecorator: PropTypes.elementType,
+ input: PropTypes.elementType,
+ limitTag: PropTypes.elementType,
+ listbox: PropTypes.elementType,
+ loading: PropTypes.elementType,
+ noOptions: PropTypes.elementType,
+ option: PropTypes.elementType,
+ popupIndicator: PropTypes.elementType,
+ root: PropTypes.elementType,
+ startDecorator: PropTypes.elementType,
+ wrapper: PropTypes.elementType,
+ }),
/**
* Leading adornment for this input.
*/
diff --git a/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts b/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts
index 359724bb87acca..40bace7c318c45 100644
--- a/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts
+++ b/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts
@@ -31,62 +31,62 @@ export interface AutocompleteSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the wrapper.
* @default 'div'
*/
- wrapper: React.ElementType;
+ wrapper?: React.ElementType;
/**
* The component that renders the input.
* @default 'input'
*/
- input: React.ElementType;
+ input?: React.ElementType;
/**
* The component that renders the start decorator.
* @default 'span'
*/
- startDecorator: React.ElementType;
+ startDecorator?: React.ElementType;
/**
* The component that renders the end decorator.
* @default 'span'
*/
- endDecorator: React.ElementType;
+ endDecorator?: React.ElementType;
/**
* The component that renders the clear indicator.
* @default 'button'
*/
- clearIndicator: React.ElementType;
+ clearIndicator?: React.ElementType;
/**
* The component that renders the popup indicator.
* @default 'button'
*/
- popupIndicator: React.ElementType;
+ popupIndicator?: React.ElementType;
/**
* The component that renders the listbox.
* @default 'ul'
*/
- listbox: React.ElementType;
+ listbox?: React.ElementType;
/**
* The component that renders the option.
* @default 'li'
*/
- option: React.ElementType;
+ option?: React.ElementType;
/**
* The component that renders the loading.
* @default 'li'
*/
- loading: React.ElementType;
+ loading?: React.ElementType;
/**
* The component that renders the no-options.
* @default 'li'
*/
- noOptions: React.ElementType;
+ noOptions?: React.ElementType;
/**
* The component that renders the limit tag.
* @default 'span'
*/
- limitTag: React.ElementType;
+ limitTag?: React.ElementType;
}
export interface AutocompletePropsVariantOverrides {}
diff --git a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
index 5b32ea6726e3ae..1f0e34e7ecfc11 100644
--- a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
+++ b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
@@ -107,6 +107,8 @@ const AutocompleteListbox = React.forwardRef(function AutocompleteListbox(inProp
color: colorProp = 'neutral',
variant = 'outlined',
size = 'md',
+ slots = {},
+ slotProps = {},
...otherProps
} = props;
const { getColor } = useColorInversion(variant);
@@ -125,12 +127,13 @@ const AutocompleteListbox = React.forwardRef(function AutocompleteListbox(inProp
const other = excludePopperProps(otherProps);
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: AutocompleteListboxRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
additionalProps: {
role: 'listbox',
@@ -171,6 +174,20 @@ AutocompleteListbox.propTypes /* remove-proptypes */ = {
* @default 'md'
*/
size: PropTypes.oneOf(['sm', 'md', 'lg']),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListboxProps.ts b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListboxProps.ts
index 01d2798fe35c6e..7477fc39a575c1 100644
--- a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListboxProps.ts
+++ b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListboxProps.ts
@@ -10,7 +10,7 @@ export interface AutocompleteListboxSlots {
* The component that renders the root.
* @default 'ul'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type AutocompleteListboxSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
index d49a3c5beebbce..f15615b82b5945 100644
--- a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
+++ b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
@@ -72,6 +72,8 @@ const AutocompleteOption = React.forwardRef(function AutocompleteOption(inProps,
color: colorProp = 'neutral',
variant = 'plain',
className,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -85,12 +87,13 @@ const AutocompleteOption = React.forwardRef(function AutocompleteOption(inProps,
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: AutocompleteOptionRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
as: component,
@@ -127,6 +130,20 @@ AutocompleteOption.propTypes /* remove-proptypes */ = {
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/AutocompleteOption/AutocompleteOptionProps.ts b/packages/mui-joy/src/AutocompleteOption/AutocompleteOptionProps.ts
index f45d272a33edf9..e1e0ea089992b0 100644
--- a/packages/mui-joy/src/AutocompleteOption/AutocompleteOptionProps.ts
+++ b/packages/mui-joy/src/AutocompleteOption/AutocompleteOptionProps.ts
@@ -10,7 +10,7 @@ export interface AutocompleteOptionSlots {
* The component that renders the root.
* @default 'li'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type AutocompleteOptionSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Avatar/Avatar.tsx b/packages/mui-joy/src/Avatar/Avatar.tsx
index 16d9d8a0897f7f..2229cd64665ab6 100644
--- a/packages/mui-joy/src/Avatar/Avatar.tsx
+++ b/packages/mui-joy/src/Avatar/Avatar.tsx
@@ -162,6 +162,9 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
src,
srcSet,
children: childrenProp,
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
const variant = inProps.variant || groupContext?.variant || variantProp;
@@ -180,12 +183,13 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: classes.root,
elementType: AvatarRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -197,14 +201,14 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
},
className: classes.img,
elementType: AvatarImg,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotFallback, fallbackProps] = useSlot('fallback', {
className: classes.fallback,
elementType: AvatarFallback,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -254,6 +258,11 @@ Avatar.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
PropTypes.string,
]),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* The size of the component.
* It accepts theme values between 'sm' and 'lg'.
@@ -263,6 +272,24 @@ Avatar.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['lg', 'md', 'sm']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ fallback: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ img: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ fallback: PropTypes.elementType,
+ img: PropTypes.elementType,
+ root: PropTypes.elementType,
+ }),
/**
* The `src` attribute for the `img` element.
*/
diff --git a/packages/mui-joy/src/Avatar/AvatarProps.ts b/packages/mui-joy/src/Avatar/AvatarProps.ts
index 7b825c58e79816..19390698e97691 100644
--- a/packages/mui-joy/src/Avatar/AvatarProps.ts
+++ b/packages/mui-joy/src/Avatar/AvatarProps.ts
@@ -10,17 +10,17 @@ export interface AvatarSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the img.
* @default 'img'
*/
- img: React.ElementType;
+ img?: React.ElementType;
/**
* The component that renders the fallback.
* @default 'svg'
*/
- fallback: React.ElementType;
+ fallback?: React.ElementType;
}
export interface AvatarPropsColorOverrides {}
diff --git a/packages/mui-joy/src/AvatarGroup/AvatarGroupProps.ts b/packages/mui-joy/src/AvatarGroup/AvatarGroupProps.ts
index e4e21b44b80676..bdde3849b1341d 100644
--- a/packages/mui-joy/src/AvatarGroup/AvatarGroupProps.ts
+++ b/packages/mui-joy/src/AvatarGroup/AvatarGroupProps.ts
@@ -11,7 +11,7 @@ export interface AvatarGroupSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type AvatarGroupSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Badge/Badge.tsx b/packages/mui-joy/src/Badge/Badge.tsx
index b308640c2bc94a..acfca53931535d 100644
--- a/packages/mui-joy/src/Badge/Badge.tsx
+++ b/packages/mui-joy/src/Badge/Badge.tsx
@@ -159,6 +159,9 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
badgeContent: badgeContentProp = '',
showZero = false,
variant: variantProp = 'solid',
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -192,6 +195,7 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
const ownerState = { ...props, anchorOrigin, badgeInset, variant, invisible, color, size };
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
let displayValue =
badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
@@ -203,14 +207,14 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
ref,
className: classes.root,
elementType: BadgeRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotBadge, badgeProps] = useSlot('badge', {
className: classes.badge,
elementType: BadgeBadge,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -260,6 +264,11 @@ Badge.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
PropTypes.string,
]),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* If `true`, the badge is invisible.
* @default false
@@ -283,6 +292,22 @@ Badge.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ badge: PropTypes.elementType,
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Badge/BadgeProps.ts b/packages/mui-joy/src/Badge/BadgeProps.ts
index 65010e58014a3f..c230656f19e00f 100644
--- a/packages/mui-joy/src/Badge/BadgeProps.ts
+++ b/packages/mui-joy/src/Badge/BadgeProps.ts
@@ -10,12 +10,12 @@ export interface BadgeSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the badge.
* @default 'div'
*/
- badge: React.ElementType;
+ badge?: React.ElementType;
}
export interface BadgePropsVariantOverrides {}
diff --git a/packages/mui-joy/src/Box/BoxProps.ts b/packages/mui-joy/src/Box/BoxProps.ts
index cd59404cdf8ae7..916c9ea0e67747 100644
--- a/packages/mui-joy/src/Box/BoxProps.ts
+++ b/packages/mui-joy/src/Box/BoxProps.ts
@@ -10,7 +10,7 @@ export interface BoxSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type BoxSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
index 3c05443d672cc6..a9991916a4538d 100644
--- a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
@@ -91,7 +91,16 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(inProps, ref) {
name: 'JoyBreadcrumbs',
});
- const { children, className, size = 'md', separator = '/', ...other } = props;
+ const {
+ children,
+ className,
+ size = 'md',
+ separator = '/',
+ component,
+ slots = {},
+ slotProps = {},
+ ...other
+ } = props;
const ownerState = {
...props,
@@ -100,26 +109,27 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: BreadcrumbsRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotOl, olProps] = useSlot('ol', {
className: classes.ol,
elementType: BreadcrumbsOl,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotLi, liProps] = useSlot('li', {
className: classes.li,
elementType: BreadcrumbsLi,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -129,7 +139,7 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(inProps, ref) {
},
className: classes.separator,
elementType: BreadcrumbsSeparator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -177,6 +187,11 @@ Breadcrumbs.propTypes /* remove-proptypes */ = {
* @ignore
*/
className: PropTypes.string,
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* Custom separator node.
* @default '/'
@@ -191,6 +206,26 @@ Breadcrumbs.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ li: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ ol: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ separator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ li: PropTypes.elementType,
+ ol: PropTypes.elementType,
+ root: PropTypes.elementType,
+ separator: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Breadcrumbs/BreadcrumbsProps.ts b/packages/mui-joy/src/Breadcrumbs/BreadcrumbsProps.ts
index ad9e6dfc5920ed..53ca634401abcb 100644
--- a/packages/mui-joy/src/Breadcrumbs/BreadcrumbsProps.ts
+++ b/packages/mui-joy/src/Breadcrumbs/BreadcrumbsProps.ts
@@ -10,22 +10,22 @@ export interface BreadcrumbsSlots {
* The component that renders the root.
* @default 'nav'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the ol.
* @default 'ol'
*/
- ol: React.ElementType;
+ ol?: React.ElementType;
/**
* The component that renders the li.
* @default 'li'
*/
- li: React.ElementType;
+ li?: React.ElementType;
/**
* The component that renders the separator.
* @default 'li'
*/
- separator: React.ElementType;
+ separator?: React.ElementType;
}
export interface BreadcrumbsPropsSizeOverrides {}
diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
index a11ec5a6e6a0e1..cc1d67bc6767cb 100644
--- a/packages/mui-joy/src/Button/Button.tsx
+++ b/packages/mui-joy/src/Button/Button.tsx
@@ -181,6 +181,9 @@ const Button = React.forwardRef(function Button(inProps, ref) {
loadingPosition = 'center',
loadingIndicator: loadingIndicatorProp,
disabled,
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -226,12 +229,13 @@ const Button = React.forwardRef(function Button(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: classes.root,
elementType: ButtonRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: getRootProps,
ownerState,
});
@@ -239,14 +243,14 @@ const Button = React.forwardRef(function Button(inProps, ref) {
const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
className: classes.startDecorator,
elementType: ButtonStartDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
className: classes.endDecorator,
elementType: ButtonEndDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -255,7 +259,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
{
className: classes.loadingIndicatorCenter,
elementType: ButtonLoadingCenter,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
},
);
@@ -312,6 +316,11 @@ Button.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
PropTypes.string,
]),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* If `true`, the component is disabled.
* @default false
@@ -354,6 +363,26 @@ Button.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ loadingIndicatorCenter: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ endDecorator: PropTypes.elementType,
+ loadingIndicatorCenter: PropTypes.elementType,
+ root: PropTypes.elementType,
+ startDecorator: PropTypes.elementType,
+ }),
/**
* Element placed before the children.
*/
diff --git a/packages/mui-joy/src/Button/ButtonProps.ts b/packages/mui-joy/src/Button/ButtonProps.ts
index 347cdc5d55bbaf..2d943bc2961dc6 100644
--- a/packages/mui-joy/src/Button/ButtonProps.ts
+++ b/packages/mui-joy/src/Button/ButtonProps.ts
@@ -15,22 +15,22 @@ export interface ButtonSlots {
* The component that renders the root.
* @default 'button'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the start decorator.
* @default 'span'
*/
- startDecorator: React.ElementType;
+ startDecorator?: React.ElementType;
/**
* The component that renders the end decorator.
* @default 'span'
*/
- endDecorator: React.ElementType;
+ endDecorator?: React.ElementType;
/**
* The component that renders the loading indicator center.
* @default 'span'
*/
- loadingIndicatorCenter: React.ElementType;
+ loadingIndicatorCenter?: React.ElementType;
}
export interface ButtonPropsVariantOverrides {}
diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx
index 6166b1d5413739..ad58fcdccf8afa 100644
--- a/packages/mui-joy/src/Card/Card.tsx
+++ b/packages/mui-joy/src/Card/Card.tsx
@@ -111,6 +111,8 @@ const Card = React.forwardRef(function Card(inProps, ref) {
variant = 'plain',
children,
orientation = 'vertical',
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -126,12 +128,13 @@ const Card = React.forwardRef(function Card(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: CardRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
});
@@ -214,6 +217,20 @@ Card.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['lg', 'md', 'sm']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Card/CardProps.ts b/packages/mui-joy/src/Card/CardProps.ts
index 4feda30c7c56a5..7096ae08b0e433 100644
--- a/packages/mui-joy/src/Card/CardProps.ts
+++ b/packages/mui-joy/src/Card/CardProps.ts
@@ -10,7 +10,7 @@ export interface CardSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type CardSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/CardContent/CardContent.tsx b/packages/mui-joy/src/CardContent/CardContent.tsx
index f5bfbe24938778..c26ca0eccb7b38 100644
--- a/packages/mui-joy/src/CardContent/CardContent.tsx
+++ b/packages/mui-joy/src/CardContent/CardContent.tsx
@@ -56,7 +56,7 @@ const CardContent = React.forwardRef(function CardContent(inProps, ref) {
ref,
className: clsx(classes.root, className),
elementType: CardContentRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
});
diff --git a/packages/mui-joy/src/CardContent/CardContentProps.ts b/packages/mui-joy/src/CardContent/CardContentProps.ts
index b0738029e857a8..ad861c067a0e1a 100644
--- a/packages/mui-joy/src/CardContent/CardContentProps.ts
+++ b/packages/mui-joy/src/CardContent/CardContentProps.ts
@@ -10,7 +10,7 @@ export interface CardContentSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type CardContentSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/CardCover/CardCover.tsx b/packages/mui-joy/src/CardCover/CardCover.tsx
index 7fcdef71a1af49..350786da651dd1 100644
--- a/packages/mui-joy/src/CardCover/CardCover.tsx
+++ b/packages/mui-joy/src/CardCover/CardCover.tsx
@@ -79,7 +79,7 @@ const CardCover = React.forwardRef(function CardCover(inProps, ref) {
ref,
className: clsx(classes.root, className),
elementType: CardCoverRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
});
diff --git a/packages/mui-joy/src/CardCover/CardCoverProps.ts b/packages/mui-joy/src/CardCover/CardCoverProps.ts
index bea948be4d05ee..961e3480e7893b 100644
--- a/packages/mui-joy/src/CardCover/CardCoverProps.ts
+++ b/packages/mui-joy/src/CardCover/CardCoverProps.ts
@@ -10,7 +10,7 @@ export interface CardCoverSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type CardCoverSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
index bc65eb6b2eca63..72444dd3cf33f7 100644
--- a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
+++ b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
@@ -112,6 +112,8 @@ const CardOverflow = React.forwardRef(function CardOverflow(inProps, ref) {
children,
color: colorProp = 'neutral',
variant = 'plain',
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -126,12 +128,13 @@ const CardOverflow = React.forwardRef(function CardOverflow(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: CardOverflowRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
});
@@ -165,6 +168,20 @@ CardOverflow.propTypes /* remove-proptypes */ = {
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/CardOverflow/CardOverflowProps.ts b/packages/mui-joy/src/CardOverflow/CardOverflowProps.ts
index 1e51d6ebe84725..8a9b516f962c95 100644
--- a/packages/mui-joy/src/CardOverflow/CardOverflowProps.ts
+++ b/packages/mui-joy/src/CardOverflow/CardOverflowProps.ts
@@ -10,7 +10,7 @@ export interface CardOverflowSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type CardOverflowSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx
index 8cd687a668ca6c..1196d8a395b8a5 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.tsx
@@ -220,6 +220,9 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
color: colorProp,
variant: variantProp,
size: sizeProp = 'md',
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -279,26 +282,27 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: classes.root,
elementType: CheckboxRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotCheckbox, checkboxProps] = useSlot('checkbox', {
className: classes.checkbox,
elementType: CheckboxCheckbox,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotAction, actionProps] = useSlot('action', {
className: classes.action,
elementType: CheckboxAction,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -317,7 +321,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
},
className: classes.input,
elementType: CheckboxInput,
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: getInputProps,
ownerState,
});
@@ -328,7 +332,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
},
className: classes.label,
elementType: CheckboxLabel,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -386,6 +390,11 @@ Checkbox.propTypes /* remove-proptypes */ = {
* @default 'neutral'
*/
color: PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* The default checked state. Use when the component is not controlled.
*/
@@ -463,6 +472,28 @@ Checkbox.propTypes /* remove-proptypes */ = {
* @default 'md'
*/
size: PropTypes.oneOf(['sm', 'md', 'lg']),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ checkbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ action: PropTypes.elementType,
+ checkbox: PropTypes.elementType,
+ input: PropTypes.elementType,
+ label: PropTypes.elementType,
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Checkbox/CheckboxProps.ts b/packages/mui-joy/src/Checkbox/CheckboxProps.ts
index f6572d364753b7..b924141a5f46c0 100644
--- a/packages/mui-joy/src/Checkbox/CheckboxProps.ts
+++ b/packages/mui-joy/src/Checkbox/CheckboxProps.ts
@@ -11,27 +11,27 @@ export interface CheckboxSlots {
* The component that renders the root.
* @default 'span'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the checkbox.
* @default 'span'
*/
- checkbox: React.ElementType;
+ checkbox?: React.ElementType;
/**
* The component that renders the action.
* @default 'span'
*/
- action: React.ElementType;
+ action?: React.ElementType;
/**
* The component that renders the input.
* @default 'input'
*/
- input: React.ElementType;
+ input?: React.ElementType;
/**
* The component that renders the label.
* @default 'label'
*/
- label: React.ElementType;
+ label?: React.ElementType;
}
export interface CheckboxPropsVariantOverrides {}
diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx
index ce6ab3a909bbea..2ea1f38033b160 100644
--- a/packages/mui-joy/src/Chip/Chip.tsx
+++ b/packages/mui-joy/src/Chip/Chip.tsx
@@ -209,13 +209,15 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
children,
className,
color: colorProp = 'primary',
- slotProps = {},
onClick,
disabled = false,
size = 'md',
variant = 'solid',
startDecorator,
endDecorator,
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -244,7 +246,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
ownerState.focusVisible = focusVisible;
const classes = useUtilityClasses(ownerState);
- const externalForwardedProps = { ...other, slotProps };
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
@@ -336,6 +338,11 @@ Chip.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
PropTypes.string,
]),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* If `true`, the component is disabled.
* @default false
@@ -359,7 +366,8 @@ Chip.propTypes /* remove-proptypes */ = {
PropTypes.string,
]),
/**
- * @ignore
+ * The props used for each slot inside.
+ * @default {}
*/
slotProps: PropTypes.shape({
action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -368,6 +376,17 @@ Chip.propTypes /* remove-proptypes */ = {
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
}),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ action: PropTypes.elementType,
+ endDecorator: PropTypes.elementType,
+ label: PropTypes.elementType,
+ root: PropTypes.elementType,
+ startDecorator: PropTypes.elementType,
+ }),
/**
* Element placed before the children.
*/
diff --git a/packages/mui-joy/src/Chip/ChipProps.ts b/packages/mui-joy/src/Chip/ChipProps.ts
index 855881f15cf162..7b254b1a12175e 100644
--- a/packages/mui-joy/src/Chip/ChipProps.ts
+++ b/packages/mui-joy/src/Chip/ChipProps.ts
@@ -10,27 +10,27 @@ export interface ChipSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the label.
* @default 'span'
*/
- label: React.ElementType;
+ label?: React.ElementType;
/**
* The component that renders the action.
* @default 'button'
*/
- action: React.ElementType;
+ action?: React.ElementType;
/**
* The component that renders the start decorator.
* @default 'span'
*/
- startDecorator: React.ElementType;
+ startDecorator?: React.ElementType;
/**
* The component that renders the end decorator.
* @default 'span'
*/
- endDecorator: React.ElementType;
+ endDecorator?: React.ElementType;
}
export interface ChipPropsColorOverrides {}
diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
index 408f61717b05e4..1d2c3574ffc144 100644
--- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
+++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
@@ -82,7 +82,6 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) {
});
const {
- component,
children,
variant: variantProp,
color: colorProp,
@@ -90,6 +89,9 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) {
onKeyDown,
onDelete,
onClick,
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
const chipContext = React.useContext(ChipContext);
@@ -116,6 +118,7 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const handleClickDelete = (event: React.MouseEvent) => {
if (!disabled && onDelete) {
@@ -142,7 +145,7 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) {
ref,
elementType: ChipDeleteRoot,
getSlotProps: getRootProps,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
as: component,
@@ -197,6 +200,20 @@ ChipDelete.propTypes /* remove-proptypes */ = {
* @ignore
*/
onKeyDown: PropTypes.func,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts b/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts
index e45c62c6cbe260..9c64783e6119de 100644
--- a/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts
+++ b/packages/mui-joy/src/ChipDelete/ChipDeleteProps.ts
@@ -10,7 +10,7 @@ export interface ChipDeleteSlots {
* The component that renders the root.
* @default 'button'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type ChipDeleteSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
index b6346ca7b7c6a5..f43aebcd41306c 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
+++ b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
@@ -216,6 +216,9 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
thickness,
determinate = false,
value = determinate ? 0 : 25, // `25` is the 1/4 of the circle.
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -233,12 +236,13 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: CircularProgressRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
role: 'progressbar',
@@ -259,21 +263,21 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
const [SlotSvg, svgProps] = useSlot('svg', {
className: classes.svg,
elementType: CircularProgressSvg,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotTrack, trackProps] = useSlot('track', {
className: classes.track,
elementType: CircularProgressTrack,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotProgress, progressProps] = useSlot('progress', {
className: classes.progress,
elementType: CircularProgressProgress,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -309,6 +313,11 @@ CircularProgress.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
PropTypes.string,
]),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* The boolean to select a variant.
* Use indeterminate when there is no progress value.
@@ -324,6 +333,26 @@ CircularProgress.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ progress: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ svg: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ progress: PropTypes.elementType,
+ root: PropTypes.elementType,
+ svg: PropTypes.elementType,
+ track: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgressProps.ts b/packages/mui-joy/src/CircularProgress/CircularProgressProps.ts
index f57e7adf709b9c..f89eb9448d8102 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgressProps.ts
+++ b/packages/mui-joy/src/CircularProgress/CircularProgressProps.ts
@@ -10,22 +10,22 @@ export interface CircularProgressSlots {
* The component that renders the root.
* @default 'span'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the svg.
* @default 'svg'
*/
- svg: React.ElementType;
+ svg?: React.ElementType;
/**
* The component that renders the track.
* @default 'circle'
*/
- track: React.ElementType;
+ track?: React.ElementType;
/**
* The component that renders the progress.
* @default 'circle'
*/
- progress: React.ElementType;
+ progress?: React.ElementType;
}
export interface CircularProgressPropsColorOverrides {}
diff --git a/packages/mui-joy/src/Container/ContainerProps.ts b/packages/mui-joy/src/Container/ContainerProps.ts
index a61bf439786b38..02d4205539609d 100644
--- a/packages/mui-joy/src/Container/ContainerProps.ts
+++ b/packages/mui-joy/src/Container/ContainerProps.ts
@@ -11,7 +11,7 @@ export interface ContainerSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type ContainerSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Divider/Divider.tsx b/packages/mui-joy/src/Divider/Divider.tsx
index 38b3036cbe12fd..3b04703140a730 100644
--- a/packages/mui-joy/src/Divider/Divider.tsx
+++ b/packages/mui-joy/src/Divider/Divider.tsx
@@ -111,6 +111,8 @@ const Divider = React.forwardRef(function Divider(inProps, ref) {
inset,
orientation = 'horizontal',
role = component !== 'hr' ? 'separator' : undefined,
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -123,12 +125,13 @@ const Divider = React.forwardRef(function Divider(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: DividerRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
as: component,
@@ -179,6 +182,20 @@ Divider.propTypes /* remove-proptypes */ = {
* @ignore
*/
role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Divider/DividerProps.ts b/packages/mui-joy/src/Divider/DividerProps.ts
index f77330d6c2fca4..fe125a07bbd9bb 100644
--- a/packages/mui-joy/src/Divider/DividerProps.ts
+++ b/packages/mui-joy/src/Divider/DividerProps.ts
@@ -10,7 +10,7 @@ export interface DividerSlots {
* The component that renders the root.
* @default 'hr'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type DividerSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/FormControl/FormControlProps.ts b/packages/mui-joy/src/FormControl/FormControlProps.ts
index 182e0664eb3087..09779d8fcee4fb 100644
--- a/packages/mui-joy/src/FormControl/FormControlProps.ts
+++ b/packages/mui-joy/src/FormControl/FormControlProps.ts
@@ -10,7 +10,7 @@ export interface FormControlSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type FormControlSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/FormHelperText/FormHelperText.tsx b/packages/mui-joy/src/FormHelperText/FormHelperText.tsx
index b097e0ab9a6d1a..d034471d91978b 100644
--- a/packages/mui-joy/src/FormHelperText/FormHelperText.tsx
+++ b/packages/mui-joy/src/FormHelperText/FormHelperText.tsx
@@ -50,7 +50,7 @@ const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) {
name: 'JoyFormHelperText',
});
- const { children, component, ...other } = props;
+ const { children, component, slots = {}, slotProps = {}, ...other } = props;
const rootRef = React.useRef(null);
const handleRef = useForkRef(rootRef, ref);
const formControl = React.useContext(FormControlContext);
@@ -64,11 +64,12 @@ const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) {
}, [setHelperText]);
const classes = useUtilityClasses();
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref: handleRef,
elementType: FormHelperTextRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState: props,
additionalProps: {
as: component,
@@ -94,6 +95,20 @@ FormHelperText.propTypes /* remove-proptypes */ = {
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/FormHelperText/FormHelperTextProps.ts b/packages/mui-joy/src/FormHelperText/FormHelperTextProps.ts
index 3233fead7cf9f6..65de43b0946c64 100644
--- a/packages/mui-joy/src/FormHelperText/FormHelperTextProps.ts
+++ b/packages/mui-joy/src/FormHelperText/FormHelperTextProps.ts
@@ -10,7 +10,7 @@ export interface FormHelperTextSlots {
* The component that renders the root.
* @default 'p'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type FormHelperTextSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/FormLabel/FormLabelProps.ts b/packages/mui-joy/src/FormLabel/FormLabelProps.ts
index f087951fdc7716..0c1fda3bebac46 100644
--- a/packages/mui-joy/src/FormLabel/FormLabelProps.ts
+++ b/packages/mui-joy/src/FormLabel/FormLabelProps.ts
@@ -10,12 +10,12 @@ export interface FormLabelSlots {
* The component that renders the root.
* @default 'label'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the asterisk.
* @default 'span'
*/
- asterisk: React.ElementType;
+ asterisk?: React.ElementType;
}
export type FormLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Grid/GridProps.ts b/packages/mui-joy/src/Grid/GridProps.ts
index 8ac954ccb96c6b..dbb362f34404a1 100644
--- a/packages/mui-joy/src/Grid/GridProps.ts
+++ b/packages/mui-joy/src/Grid/GridProps.ts
@@ -11,7 +11,7 @@ export interface GridSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type GridSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
index a5bb759124086f..2c219747840f64 100644
--- a/packages/mui-joy/src/IconButton/IconButton.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -114,6 +114,8 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
color: colorProp = 'primary',
variant = 'soft',
size = 'md',
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -148,13 +150,14 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: classes.root,
elementType: IconButtonRoot,
getSlotProps: getRootProps,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
});
@@ -216,6 +219,20 @@ IconButton.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/IconButton/IconButtonProps.ts b/packages/mui-joy/src/IconButton/IconButtonProps.ts
index e958b921d618f0..0d7c888b15f88a 100644
--- a/packages/mui-joy/src/IconButton/IconButtonProps.ts
+++ b/packages/mui-joy/src/IconButton/IconButtonProps.ts
@@ -15,7 +15,7 @@ export interface IconButtonSlots {
* The component that renders the root.
* @default 'button'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type IconButtonSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
index 1aa1e8748f872b..878ebdf00998e5 100644
--- a/packages/mui-joy/src/Input/Input.tsx
+++ b/packages/mui-joy/src/Input/Input.tsx
@@ -277,6 +277,9 @@ const Input = React.forwardRef(function Input(inProps, ref) {
variant = 'outlined',
startDecorator,
endDecorator,
+ component,
+ slots = {},
+ slotProps = {},
...other
} = useForwardedInput(props, inputClasses);
@@ -309,13 +312,14 @@ const Input = React.forwardRef(function Input(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: [classes.root, rootStateClasses],
elementType: InputRoot,
getSlotProps: getRootProps,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -330,21 +334,21 @@ const Input = React.forwardRef(function Input(inProps, ref) {
elementType: InputInput,
getSlotProps: getInputProps,
internalForwardedProps: propsToForward,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
className: classes.startDecorator,
elementType: InputStartDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
className: classes.endDecorator,
elementType: InputEndDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
diff --git a/packages/mui-joy/src/Input/InputProps.ts b/packages/mui-joy/src/Input/InputProps.ts
index 0bfdb68efa8bb0..d769c6eebd6286 100644
--- a/packages/mui-joy/src/Input/InputProps.ts
+++ b/packages/mui-joy/src/Input/InputProps.ts
@@ -10,22 +10,22 @@ export interface InputSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the input.
* @default 'input'
*/
- input: React.ElementType;
+ input?: React.ElementType;
/**
* The component that renders the start decorator.
* @default 'span'
*/
- startDecorator: React.ElementType;
+ startDecorator?: React.ElementType;
/**
* The component that renders the end decorator.
* @default 'span'
*/
- endDecorator: React.ElementType;
+ endDecorator?: React.ElementType;
}
export interface InputPropsVariantOverrides {}
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
index 0ea0f68eba05ad..6047062397809d 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
+++ b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -162,6 +162,8 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
determinate = false,
value = determinate ? 0 : 25, // `25` is the 1/4 of the bar.
style,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -180,12 +182,13 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: LinearProgressRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
as: component,
@@ -248,6 +251,20 @@ LinearProgress.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* @ignore
*/
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgressProps.ts b/packages/mui-joy/src/LinearProgress/LinearProgressProps.ts
index cd055bc3f454d8..0cf6ac75ada5fa 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgressProps.ts
+++ b/packages/mui-joy/src/LinearProgress/LinearProgressProps.ts
@@ -10,7 +10,7 @@ export interface LinearProgressSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type LinearProgressSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
index 81ebc9df17fb74..a18fcda81a791a 100644
--- a/packages/mui-joy/src/Link/Link.tsx
+++ b/packages/mui-joy/src/Link/Link.tsx
@@ -204,6 +204,9 @@ const Link = React.forwardRef(function Link(inProps, ref) {
underline = 'hover',
endDecorator,
startDecorator,
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -249,6 +252,7 @@ const Link = React.forwardRef(function Link(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
additionalProps: {
@@ -258,21 +262,21 @@ const Link = React.forwardRef(function Link(inProps, ref) {
ref: handleRef,
className: classes.root,
elementType: LinkRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
className: classes.startDecorator,
elementType: StartDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
className: classes.endDecorator,
elementType: EndDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -307,6 +311,11 @@ Link.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
PropTypes.string,
]),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* If `true`, the component is disabled.
* @default false
@@ -338,6 +347,24 @@ Link.propTypes /* remove-proptypes */ = {
* @default false
*/
overlay: PropTypes.bool,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ endDecorator: PropTypes.elementType,
+ root: PropTypes.elementType,
+ startDecorator: PropTypes.elementType,
+ }),
/**
* Element placed before the children.
*/
diff --git a/packages/mui-joy/src/Link/LinkProps.ts b/packages/mui-joy/src/Link/LinkProps.ts
index b81356d8dba130..2188bd1d80954e 100644
--- a/packages/mui-joy/src/Link/LinkProps.ts
+++ b/packages/mui-joy/src/Link/LinkProps.ts
@@ -18,17 +18,17 @@ export interface LinkSlots {
* The component that renders the root.
* @default 'a'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the start decorator.
* @default 'span'
*/
- startDecorator: React.ElementType;
+ startDecorator?: React.ElementType;
/**
* The component that renders the end decorator.
* @default 'span'
*/
- endDecorator: React.ElementType;
+ endDecorator?: React.ElementType;
}
export interface LinkPropsVariantOverrides {}
diff --git a/packages/mui-joy/src/List/List.tsx b/packages/mui-joy/src/List/List.tsx
index 6f2506adbeedc5..d8efeceeaca545 100644
--- a/packages/mui-joy/src/List/List.tsx
+++ b/packages/mui-joy/src/List/List.tsx
@@ -174,6 +174,8 @@ const List = React.forwardRef(function List(inProps, ref) {
variant = 'plain',
color: colorProp = 'neutral',
role: roleProp,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -204,12 +206,13 @@ const List = React.forwardRef(function List(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: ListRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
as: component,
@@ -274,6 +277,20 @@ List.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/List/ListProps.ts b/packages/mui-joy/src/List/ListProps.ts
index e0541841ec58d5..a2805738b478ae 100644
--- a/packages/mui-joy/src/List/ListProps.ts
+++ b/packages/mui-joy/src/List/ListProps.ts
@@ -10,7 +10,7 @@ export interface ListSlots {
* The component that renders the root.
* @default 'ul'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type ListSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/ListDivider/ListDivider.tsx b/packages/mui-joy/src/ListDivider/ListDivider.tsx
index a6cff2b7a9f59e..da72ca0f259e66 100644
--- a/packages/mui-joy/src/ListDivider/ListDivider.tsx
+++ b/packages/mui-joy/src/ListDivider/ListDivider.tsx
@@ -90,6 +90,8 @@ const ListDivider = React.forwardRef(function ListDivider(inProps, ref) {
children,
inset = 'context',
orientation: orientationProp,
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -109,12 +111,13 @@ const ListDivider = React.forwardRef(function ListDivider(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: ListDividerRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
as: component,
@@ -168,6 +171,20 @@ ListDivider.propTypes /* remove-proptypes */ = {
* @ignore
*/
role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/ListDivider/ListDividerProps.ts b/packages/mui-joy/src/ListDivider/ListDividerProps.ts
index 4f156056d9d3c1..77d570bb0afa45 100644
--- a/packages/mui-joy/src/ListDivider/ListDividerProps.ts
+++ b/packages/mui-joy/src/ListDivider/ListDividerProps.ts
@@ -10,7 +10,7 @@ export interface ListDividerSlots {
* The component that renders the root.
* @default 'li'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type ListDividerSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx
index 207b2ef793a6a9..350e9f7d71adb7 100644
--- a/packages/mui-joy/src/ListItem/ListItem.tsx
+++ b/packages/mui-joy/src/ListItem/ListItem.tsx
@@ -167,6 +167,8 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
startAction,
endAction,
role: roleProp,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -205,7 +207,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
- const externalForwardedProps = { ...other, component };
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
additionalProps: {
@@ -297,6 +299,24 @@ ListItem.propTypes /* remove-proptypes */ = {
* @ignore
*/
role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ endAction: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ startAction: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ endAction: PropTypes.elementType,
+ root: PropTypes.elementType,
+ startAction: PropTypes.elementType,
+ }),
/**
* The element to display at the start of ListItem.
*/
diff --git a/packages/mui-joy/src/ListItem/ListItemProps.ts b/packages/mui-joy/src/ListItem/ListItemProps.ts
index 2b22c0eda08628..4dfaa97cecba65 100644
--- a/packages/mui-joy/src/ListItem/ListItemProps.ts
+++ b/packages/mui-joy/src/ListItem/ListItemProps.ts
@@ -10,17 +10,17 @@ export interface ListItemSlots {
* The component that renders the root.
* @default 'li'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the start action.
* @default 'div'
*/
- startAction: React.ElementType;
+ startAction?: React.ElementType;
/**
* The component that renders the end action.
* @default 'div'
*/
- endAction: React.ElementType;
+ endAction?: React.ElementType;
}
export interface ListItemPropsVariantOverrides {}
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
index 3f4a2b13ca07ee..1a38720838f94b 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
+++ b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
@@ -134,6 +134,8 @@ const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) {
selected = false,
color: colorProp = selected ? 'primary' : 'neutral',
variant = 'plain',
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -171,12 +173,13 @@ const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: ListItemButtonRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
getSlotProps: getRootProps,
});
@@ -261,6 +264,20 @@ ListItemButton.propTypes /* remove-proptypes */ = {
* @default false
*/
selected: PropTypes.bool,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts b/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts
index 5c602df4393b16..a7235e6563f77f 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts
+++ b/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts
@@ -15,7 +15,7 @@ export interface ListItemButtonSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type ListItemButtonSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/ListItemContent/ListItemContent.tsx b/packages/mui-joy/src/ListItemContent/ListItemContent.tsx
index 3f6c473034e08d..6bec864ba63217 100644
--- a/packages/mui-joy/src/ListItemContent/ListItemContent.tsx
+++ b/packages/mui-joy/src/ListItemContent/ListItemContent.tsx
@@ -40,19 +40,20 @@ const ListItemContent = React.forwardRef(function ListItemContent(inProps, ref)
name: 'JoyListItemContent',
});
- const { component, className, children, ...other } = props;
+ const { component, className, children, slots, slotProps, ...other } = props;
const ownerState = {
...props,
};
const classes = useUtilityClasses();
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: ListItemContentRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
});
@@ -77,6 +78,20 @@ ListItemContent.propTypes /* remove-proptypes */ = {
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/ListItemContent/ListItemContentProps.ts b/packages/mui-joy/src/ListItemContent/ListItemContentProps.ts
index 987ecae81dc826..ef2a72219917a5 100644
--- a/packages/mui-joy/src/ListItemContent/ListItemContentProps.ts
+++ b/packages/mui-joy/src/ListItemContent/ListItemContentProps.ts
@@ -10,7 +10,7 @@ export interface ListItemContentSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type ListItemContentSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.tsx b/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.tsx
index 7e0a195c9d7a32..f37fb0cd02629e 100644
--- a/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.tsx
+++ b/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.tsx
@@ -50,7 +50,7 @@ const ListItemDecorator = React.forwardRef(function ListItemDecorator(inProps, r
name: 'JoyListItemDecorator',
});
- const { component, className, children, ...other } = props;
+ const { component, className, children, slots, slotProps, ...other } = props;
const parentOrientation = React.useContext(ListItemButtonOrientationContext);
const ownerState = {
@@ -59,12 +59,12 @@ const ListItemDecorator = React.forwardRef(function ListItemDecorator(inProps, r
};
const classes = useUtilityClasses();
-
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: ListItemDecoratorRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
});
@@ -89,6 +89,20 @@ ListItemDecorator.propTypes /* remove-proptypes */ = {
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/ListItemDecorator/ListItemDecoratorProps.ts b/packages/mui-joy/src/ListItemDecorator/ListItemDecoratorProps.ts
index 50d903230a619d..a8624085533613 100644
--- a/packages/mui-joy/src/ListItemDecorator/ListItemDecoratorProps.ts
+++ b/packages/mui-joy/src/ListItemDecorator/ListItemDecoratorProps.ts
@@ -10,7 +10,7 @@ export interface ListItemDecoratorSlots {
* The component that renders the root.
* @default 'span'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type ListItemDecoratorSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
index eac2156e480994..9e51de50060691 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
+++ b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
@@ -79,6 +79,8 @@ const ListSubheader = React.forwardRef(function ListSubheader(inProps, ref) {
sticky = false,
variant,
color: colorProp,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -101,12 +103,13 @@ const ListSubheader = React.forwardRef(function ListSubheader(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: ListSubheaderRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
as: component,
@@ -146,6 +149,20 @@ ListSubheader.propTypes /* remove-proptypes */ = {
* @ignore
*/
id: PropTypes.string,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* If `true`, the component has sticky position (with top = 0).
* @default false
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheaderProps.ts b/packages/mui-joy/src/ListSubheader/ListSubheaderProps.ts
index 860fe8a2606118..dee702e9507178 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheaderProps.ts
+++ b/packages/mui-joy/src/ListSubheader/ListSubheaderProps.ts
@@ -10,7 +10,7 @@ export interface ListSubheaderSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type ListSubheaderSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Menu/Menu.tsx b/packages/mui-joy/src/Menu/Menu.tsx
index 3dbb3b0abcd886..1f4a030e9ddfdf 100644
--- a/packages/mui-joy/src/Menu/Menu.tsx
+++ b/packages/mui-joy/src/Menu/Menu.tsx
@@ -84,6 +84,8 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
modifiers: modifiersProp,
variant = 'outlined',
size = 'md',
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -116,11 +118,12 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [, rootProps] = useSlot('root', {
ref,
elementType: MenuRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: getListboxProps,
additionalProps: {
anchorEl,
@@ -277,6 +280,20 @@ Menu.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Menu/MenuProps.ts b/packages/mui-joy/src/Menu/MenuProps.ts
index 1d7d515342c523..5c0e0b6fbf1ade 100644
--- a/packages/mui-joy/src/Menu/MenuProps.ts
+++ b/packages/mui-joy/src/Menu/MenuProps.ts
@@ -12,7 +12,7 @@ export interface MenuSlots {
* The component that renders the root.
* @default 'ul'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type MenuSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/MenuItem/MenuItem.tsx b/packages/mui-joy/src/MenuItem/MenuItem.tsx
index d9a2ede850b51e..375cdee6af82b7 100644
--- a/packages/mui-joy/src/MenuItem/MenuItem.tsx
+++ b/packages/mui-joy/src/MenuItem/MenuItem.tsx
@@ -60,6 +60,8 @@ const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
selected = false,
color: colorProp = selected ? 'primary' : 'neutral',
variant = 'plain',
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -82,12 +84,13 @@ const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
elementType: MenuItemRoot,
getSlotProps: getRootProps,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
className: classes.root,
ownerState,
});
@@ -125,6 +128,20 @@ MenuItem.propTypes /* remove-proptypes */ = {
* @default false
*/
selected: PropTypes.bool,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
* @default 'plain'
diff --git a/packages/mui-joy/src/MenuItem/MenuItemProps.ts b/packages/mui-joy/src/MenuItem/MenuItemProps.ts
index 6dd3e53e579559..d67ec37029a28a 100644
--- a/packages/mui-joy/src/MenuItem/MenuItemProps.ts
+++ b/packages/mui-joy/src/MenuItem/MenuItemProps.ts
@@ -11,7 +11,7 @@ export interface MenuItemSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type MenuItemSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/MenuList/MenuList.tsx b/packages/mui-joy/src/MenuList/MenuList.tsx
index 7fce9715ff557c..14f6c0e01838cf 100644
--- a/packages/mui-joy/src/MenuList/MenuList.tsx
+++ b/packages/mui-joy/src/MenuList/MenuList.tsx
@@ -72,6 +72,8 @@ const MenuList = React.forwardRef(function MenuList(inProps, ref) {
size = 'md',
variant = 'outlined',
color: colorProp = 'neutral',
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -101,12 +103,13 @@ const MenuList = React.forwardRef(function MenuList(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
elementType: MenuListRoot,
getSlotProps: getListboxProps,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
className: classes.root,
});
@@ -177,6 +180,20 @@ MenuList.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/MenuList/MenuListProps.ts b/packages/mui-joy/src/MenuList/MenuListProps.ts
index 56dc886386cbcb..f50c30b6665b3a 100644
--- a/packages/mui-joy/src/MenuList/MenuListProps.ts
+++ b/packages/mui-joy/src/MenuList/MenuListProps.ts
@@ -11,7 +11,7 @@ export interface MenuListSlots {
* The component that renders the root.
* @default 'ul'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type MenuListSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Modal/Modal.tsx b/packages/mui-joy/src/Modal/Modal.tsx
index bea7c7edc0fcac..737d97e1b4eb68 100644
--- a/packages/mui-joy/src/Modal/Modal.tsx
+++ b/packages/mui-joy/src/Modal/Modal.tsx
@@ -108,6 +108,9 @@ const Modal = React.forwardRef(function ModalUnstyled(inProps, ref) {
onClose,
onKeyDown,
open,
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -199,6 +202,7 @@ const Modal = React.forwardRef(function ModalUnstyled(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const handleBackdropClick = (event: React.MouseEvent) => {
if (event.target !== event.currentTarget) {
@@ -240,7 +244,7 @@ const Modal = React.forwardRef(function ModalUnstyled(inProps, ref) {
ref: handleRef,
className: classes.root,
elementType: ModalRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -252,7 +256,7 @@ const Modal = React.forwardRef(function ModalUnstyled(inProps, ref) {
},
className: classes.backdrop,
elementType: ModalBackdrop,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -300,6 +304,11 @@ Modal.propTypes /* remove-proptypes */ = {
* A single child content element.
*/
children: elementAcceptingRef.isRequired,
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* An HTML element or function that returns one.
* The `container` will have the portal children appended to it.
@@ -378,6 +387,22 @@ Modal.propTypes /* remove-proptypes */ = {
* If `true`, the component is shown.
*/
open: PropTypes.bool.isRequired,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ backdrop: PropTypes.elementType,
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Modal/ModalProps.ts b/packages/mui-joy/src/Modal/ModalProps.ts
index 2c40f6d11900d9..5a139cf469d136 100644
--- a/packages/mui-joy/src/Modal/ModalProps.ts
+++ b/packages/mui-joy/src/Modal/ModalProps.ts
@@ -11,12 +11,12 @@ export interface ModalSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the backdrop.
* @default 'div'
*/
- backdrop: React.ElementType;
+ backdrop?: React.ElementType;
}
export type ModalSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/ModalClose/ModalClose.tsx b/packages/mui-joy/src/ModalClose/ModalClose.tsx
index 03032f0db85569..130dbcb9e7889e 100644
--- a/packages/mui-joy/src/ModalClose/ModalClose.tsx
+++ b/packages/mui-joy/src/ModalClose/ModalClose.tsx
@@ -84,6 +84,8 @@ const ModalClose = React.forwardRef(function ModalClose(inProps, ref) {
variant: variantProp = 'plain',
size: sizeProp = 'md',
onClick,
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -124,6 +126,8 @@ const ModalClose = React.forwardRef(function ModalClose(inProps, ref) {
},
...other,
component,
+ slots,
+ slotProps,
},
className: classes.root,
ownerState,
@@ -170,6 +174,20 @@ ModalClose.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/ModalClose/ModalCloseProps.ts b/packages/mui-joy/src/ModalClose/ModalCloseProps.ts
index cac74e531ed15e..916aa2b13cf015 100644
--- a/packages/mui-joy/src/ModalClose/ModalCloseProps.ts
+++ b/packages/mui-joy/src/ModalClose/ModalCloseProps.ts
@@ -10,7 +10,7 @@ export interface ModalCloseSlots {
* The component that renders the root.
* @default 'button'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type ModalCloseSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/ModalDialog/ModalDialog.tsx b/packages/mui-joy/src/ModalDialog/ModalDialog.tsx
index 8e169979b8cb61..6a5464d7ae0c06 100644
--- a/packages/mui-joy/src/ModalDialog/ModalDialog.tsx
+++ b/packages/mui-joy/src/ModalDialog/ModalDialog.tsx
@@ -135,6 +135,8 @@ const ModalDialog = React.forwardRef(function ModalDialog(inProps, ref) {
variant = 'outlined',
size = 'md',
layout = 'center',
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -150,6 +152,7 @@ const ModalDialog = React.forwardRef(function ModalDialog(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const contextValue = React.useMemo(
() => ({ variant, color: color === 'context' ? undefined : color }),
@@ -160,7 +163,7 @@ const ModalDialog = React.forwardRef(function ModalDialog(inProps, ref) {
ref,
className: clsx(classes.root, className),
elementType: ModalDialogRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
as: component,
@@ -232,6 +235,20 @@ ModalDialog.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/ModalDialog/ModalDialogProps.ts b/packages/mui-joy/src/ModalDialog/ModalDialogProps.ts
index 3cda53cd18c431..a6ba628f0c24c0 100644
--- a/packages/mui-joy/src/ModalDialog/ModalDialogProps.ts
+++ b/packages/mui-joy/src/ModalDialog/ModalDialogProps.ts
@@ -10,7 +10,7 @@ export interface ModalDialogSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type ModalDialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Option/Option.tsx b/packages/mui-joy/src/Option/Option.tsx
index 748e60d69f2238..a86245e2ef93e4 100644
--- a/packages/mui-joy/src/Option/Option.tsx
+++ b/packages/mui-joy/src/Option/Option.tsx
@@ -56,6 +56,8 @@ const Option = React.forwardRef(function Option(inProps, ref: React.ForwardedRef
label,
variant = 'plain',
color: colorProp = 'neutral',
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -83,12 +85,13 @@ const Option = React.forwardRef(function Option(inProps, ref: React.ForwardedRef
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
getSlotProps: getRootProps,
elementType: OptionRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
className: classes.root,
ownerState,
});
@@ -128,6 +131,20 @@ Option.propTypes /* remove-proptypes */ = {
* Used for keyboard text navigation matching.
*/
label: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Option/OptionProps.ts b/packages/mui-joy/src/Option/OptionProps.ts
index 8de0c2d72a9620..5a8e633954c57b 100644
--- a/packages/mui-joy/src/Option/OptionProps.ts
+++ b/packages/mui-joy/src/Option/OptionProps.ts
@@ -16,7 +16,7 @@ export interface OptionSlots {
* The component that renders the root.
* @default 'li'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type OptionSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx
index cc668414891820..d9e0acb3303833 100644
--- a/packages/mui-joy/src/Radio/Radio.tsx
+++ b/packages/mui-joy/src/Radio/Radio.tsx
@@ -255,6 +255,9 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
size: sizeProp = 'md',
uncheckedIcon,
value,
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -318,33 +321,34 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: classes.root,
elementType: RadioRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotRadio, radioProps] = useSlot('radio', {
className: classes.radio,
elementType: RadioRadio,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotIcon, iconProps] = useSlot('icon', {
className: classes.icon,
elementType: RadioIcon,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotAction, actionProps] = useSlot('action', {
className: classes.action,
elementType: RadioAction,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -360,7 +364,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
},
className: classes.input,
elementType: RadioInput,
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: () => getInputProps({ onChange: radioGroup?.onChange }),
ownerState,
});
@@ -371,7 +375,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
},
className: classes.label,
elementType: RadioLabel,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -424,6 +428,11 @@ Radio.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['danger', 'info', 'primary', 'success', 'warning']),
PropTypes.string,
]),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* The default checked state. Use when the component is not controlled.
*/
@@ -491,6 +500,30 @@ Radio.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ radio: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ action: PropTypes.elementType,
+ icon: PropTypes.elementType,
+ input: PropTypes.elementType,
+ label: PropTypes.elementType,
+ radio: PropTypes.elementType,
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Radio/RadioProps.ts b/packages/mui-joy/src/Radio/RadioProps.ts
index caa93b3fa9d2ef..a557e38166a864 100644
--- a/packages/mui-joy/src/Radio/RadioProps.ts
+++ b/packages/mui-joy/src/Radio/RadioProps.ts
@@ -11,32 +11,32 @@ export interface RadioSlots {
* The component that renders the root.
* @default 'span'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the radio.
* @default 'span'
*/
- radio: React.ElementType;
+ radio?: React.ElementType;
/**
* The component that renders the icon.
* @default 'span'
*/
- icon: React.ElementType;
+ icon?: React.ElementType;
/**
* The component that renders the action.
* @default 'span'
*/
- action: React.ElementType;
+ action?: React.ElementType;
/**
* The component that renders the input.
* @default 'input'
*/
- input: React.ElementType;
+ input?: React.ElementType;
/**
* The component that renders the label.
* @default 'label'
*/
- label: React.ElementType;
+ label?: React.ElementType;
}
export interface RadioPropsVariantOverrides {}
diff --git a/packages/mui-joy/src/RadioGroup/RadioGroupProps.ts b/packages/mui-joy/src/RadioGroup/RadioGroupProps.ts
index 6c96fb25750b8a..64edd57c6d8c8d 100644
--- a/packages/mui-joy/src/RadioGroup/RadioGroupProps.ts
+++ b/packages/mui-joy/src/RadioGroup/RadioGroupProps.ts
@@ -11,7 +11,7 @@ export interface RadioGroupSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type RadioGroupSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx
index b11c4216002767..e235a3f9fc1028 100644
--- a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx
+++ b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx
@@ -77,7 +77,14 @@ const ScopedCssBaseline = React.forwardRef(function ScopedCssBaseline(inProps, r
name: 'JoyScopedCssBaseline',
});
- const { className, component = 'div', disableColorScheme = false, ...other } = props;
+ const {
+ className,
+ component = 'div',
+ disableColorScheme = false,
+ slots = {},
+ slotProps = {},
+ ...other
+ } = props;
const ownerState = {
...props,
@@ -86,12 +93,12 @@ const ScopedCssBaseline = React.forwardRef(function ScopedCssBaseline(inProps, r
};
const classes = useUtilityClasses();
-
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: ScopedCssBaselineRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
});
@@ -123,6 +130,20 @@ ScopedCssBaseline.propTypes /* remove-proptypes */ = {
* @default false
*/
disableColorScheme: PropTypes.bool,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaselineProps.ts b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaselineProps.ts
index 57874f110fcf13..bbe65423c28041 100644
--- a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaselineProps.ts
+++ b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaselineProps.ts
@@ -9,7 +9,7 @@ export interface ScopedCssBaselineSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type ScopedCssBaselineSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
index db03f68b4bd49a..8ce2cb0cfe102d 100644
--- a/packages/mui-joy/src/Select/Select.tsx
+++ b/packages/mui-joy/src/Select/Select.tsx
@@ -354,6 +354,8 @@ const Select = React.forwardRef(function Select(
'aria-labelledby': ariaLabelledby,
id,
name,
+ slots = {},
+ slotProps = {},
...other
} = props as typeof inProps & {
// need to cast types because SelectOwnProps does not have these properties
@@ -475,6 +477,7 @@ const Select = React.forwardRef(function Select(
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, slots, slotProps };
const selectedOption = React.useMemo(() => {
return options.find((o) => value === o.value) ?? null;
@@ -484,7 +487,7 @@ const Select = React.forwardRef(function Select(
ref: handleRef,
className: classes.root,
elementType: SelectRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: (handlers) => ({
onMouseDown: (event: React.MouseEvent) => {
if (
@@ -512,7 +515,7 @@ const Select = React.forwardRef(function Select(
},
className: classes.button,
elementType: SelectButton,
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: getButtonProps,
ownerState,
});
@@ -527,7 +530,7 @@ const Select = React.forwardRef(function Select(
},
className: classes.listbox,
elementType: PopperUnstyled as OverridableComponent>,
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: getListboxProps,
ownerState: {
...ownerState,
@@ -549,21 +552,21 @@ const Select = React.forwardRef(function Select(
const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
className: classes.startDecorator,
elementType: SelectStartDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
className: classes.endDecorator,
elementType: SelectEndDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotIndicator, indicatorProps] = useSlot('indicator', {
className: classes.indicator,
elementType: SelectIndicator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
diff --git a/packages/mui-joy/src/Select/SelectProps.ts b/packages/mui-joy/src/Select/SelectProps.ts
index e16b3b5f337830..676df22c6276b5 100644
--- a/packages/mui-joy/src/Select/SelectProps.ts
+++ b/packages/mui-joy/src/Select/SelectProps.ts
@@ -20,32 +20,32 @@ export interface SelectSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the button.
* @default 'button'
*/
- button: React.ElementType;
+ button?: React.ElementType;
/**
* The component that renders the start decorator.
* @default 'span'
*/
- startDecorator: React.ElementType;
+ startDecorator?: React.ElementType;
/**
* The component that renders the end decorator.
* @default 'span'
*/
- endDecorator: React.ElementType;
+ endDecorator?: React.ElementType;
/**
* The component that renders the indicator.
* @default 'span'
*/
- indicator: React.ElementType;
+ indicator?: React.ElementType;
/**
* The component that renders the listbox.
* @default 'ul'
*/
- listbox: React.ElementType;
+ listbox?: React.ElementType;
}
export interface SelectPropsVariantOverrides {}
diff --git a/packages/mui-joy/src/Sheet/Sheet.tsx b/packages/mui-joy/src/Sheet/Sheet.tsx
index dd87fb1f5ae060..ec7ef96773f4fd 100644
--- a/packages/mui-joy/src/Sheet/Sheet.tsx
+++ b/packages/mui-joy/src/Sheet/Sheet.tsx
@@ -86,6 +86,8 @@ const Sheet = React.forwardRef(function Sheet(inProps, ref) {
component = 'div',
variant = 'plain',
invertedColors = false,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -100,12 +102,13 @@ const Sheet = React.forwardRef(function Sheet(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: SheetRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
});
@@ -148,6 +151,20 @@ Sheet.propTypes /* remove-proptypes */ = {
* @default false
*/
invertedColors: PropTypes.bool,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Sheet/SheetProps.ts b/packages/mui-joy/src/Sheet/SheetProps.ts
index 6a09323398d9d9..fc8333b604bac4 100644
--- a/packages/mui-joy/src/Sheet/SheetProps.ts
+++ b/packages/mui-joy/src/Sheet/SheetProps.ts
@@ -10,7 +10,7 @@ export interface SheetSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type SheetSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
index 44a27caa71e9d4..bab6d217b8596b 100644
--- a/packages/mui-joy/src/Slider/Slider.tsx
+++ b/packages/mui-joy/src/Slider/Slider.tsx
@@ -428,6 +428,9 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
color: colorProp = 'primary',
size = 'md',
variant = 'solid',
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion('solid');
@@ -479,12 +482,13 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: SliderRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: getRootProps,
ownerState,
});
@@ -492,7 +496,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
const [SlotRail, railProps] = useSlot('rail', {
className: classes.rail,
elementType: SliderRail,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -502,21 +506,21 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
},
className: classes.track,
elementType: SliderTrack,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotMark, markProps] = useSlot('mark', {
className: classes.mark,
elementType: SliderMark,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotMarkLabel, markLabelProps] = useSlot('markLabel', {
className: classes.markLabel,
elementType: SliderMarkLabel,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
additionalProps: {
'aria-hidden': true,
@@ -526,7 +530,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
const [SlotThumb, thumbProps] = useSlot('thumb', {
className: classes.thumb,
elementType: SliderThumb,
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: getThumbProps,
ownerState,
});
@@ -534,7 +538,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
const [SlotInput, inputProps] = useSlot('input', {
className: classes.input,
elementType: SliderInput,
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: getHiddenInputProps,
ownerState,
});
@@ -542,7 +546,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
const [SlotValueLabel, valueLabelProps] = useSlot('valueLabel', {
className: classes.valueLabel,
elementType: SliderValueLabel,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -680,6 +684,11 @@ Slider.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
PropTypes.string,
]),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* The default value. Use when the component is not controlled.
*/
@@ -789,6 +798,34 @@ Slider.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ input: PropTypes.elementType,
+ mark: PropTypes.elementType,
+ markLabel: PropTypes.elementType,
+ rail: PropTypes.elementType,
+ root: PropTypes.elementType,
+ thumb: PropTypes.elementType,
+ track: PropTypes.elementType,
+ valueLabel: PropTypes.elementType,
+ }),
/**
* The granularity with which the slider can step through values. (A "discrete" slider.)
* The `min` prop serves as the origin for the valid values.
diff --git a/packages/mui-joy/src/Slider/SliderProps.ts b/packages/mui-joy/src/Slider/SliderProps.ts
index 949d8ca2070bbe..b95c1ef2dae115 100644
--- a/packages/mui-joy/src/Slider/SliderProps.ts
+++ b/packages/mui-joy/src/Slider/SliderProps.ts
@@ -19,42 +19,42 @@ export interface SliderSlots {
* The component that renders the root.
* @default 'span'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the track.
* @default 'span'
*/
- track: React.ElementType;
+ track?: React.ElementType;
/**
* The component that renders the rail.
* @default 'span'
*/
- rail: React.ElementType;
+ rail?: React.ElementType;
/**
* The component that renders the thumb.
* @default 'span'
*/
- thumb: React.ElementType;
+ thumb?: React.ElementType;
/**
* The component that renders the mark.
* @default 'span'
*/
- mark: React.ElementType;
+ mark?: React.ElementType;
/**
* The component that renders the mark label.
* @default 'span'
*/
- markLabel: React.ElementType;
+ markLabel?: React.ElementType;
/**
* The component that renders the value label.
* @default 'span'
*/
- valueLabel: React.ElementType;
+ valueLabel?: React.ElementType;
/**
* The component that renders the input.
* @default 'input'
*/
- input: React.ElementType;
+ input?: React.ElementType;
}
export type SliderSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Stack/StackProps.ts b/packages/mui-joy/src/Stack/StackProps.ts
index cba31078bce29e..c851f231aee922 100644
--- a/packages/mui-joy/src/Stack/StackProps.ts
+++ b/packages/mui-joy/src/Stack/StackProps.ts
@@ -11,7 +11,7 @@ export interface StackSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type StackSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
index 720a9bc17a5cfe..0812de9c17cb36 100644
--- a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
+++ b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
@@ -80,6 +80,8 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
inheritViewBox = false,
titleAccess,
viewBox = '0 0 24 24',
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -94,12 +96,13 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: SvgIconRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
additionalProps: {
color: htmlColor,
@@ -183,6 +186,20 @@ SvgIcon.propTypes /* remove-proptypes */ = {
* If you are having issues with blurry icons you should investigate this prop.
*/
shapeRendering: PropTypes.string,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/SvgIcon/SvgIconProps.ts b/packages/mui-joy/src/SvgIcon/SvgIconProps.ts
index 7d04eeb6d4523a..d165e645b1336b 100644
--- a/packages/mui-joy/src/SvgIcon/SvgIconProps.ts
+++ b/packages/mui-joy/src/SvgIcon/SvgIconProps.ts
@@ -10,7 +10,7 @@ export interface SvgIconSlots {
* The component that renders the root.
* @default 'svg'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type SvgIconSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx
index db97107725e191..3077b33f865b66 100644
--- a/packages/mui-joy/src/Switch/Switch.tsx
+++ b/packages/mui-joy/src/Switch/Switch.tsx
@@ -243,6 +243,9 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
size: sizeProp = 'md',
startDecorator,
endDecorator,
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -294,12 +297,13 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: classes.root,
elementType: SwitchRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -309,7 +313,7 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
},
className: classes.startDecorator,
elementType: SwitchStartDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -319,28 +323,28 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
},
className: classes.endDecorator,
elementType: SwitchEndDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotTrack, trackProps] = useSlot('track', {
className: classes.track,
elementType: SwitchTrack,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotThumb, thumbProps] = useSlot('thumb', {
className: classes.thumb,
elementType: SwitchThumb,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotAction, actionProps] = useSlot('action', {
className: classes.action,
elementType: SwitchAction,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -351,7 +355,7 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
},
className: classes.input,
elementType: SwitchInput,
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: getInputProps,
ownerState,
});
@@ -402,6 +406,11 @@ Switch.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['danger', 'info', 'primary', 'success', 'warning']),
PropTypes.string,
]),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* The default checked state. Use when the component is not controlled.
*/
@@ -457,6 +466,32 @@ Switch.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ action: PropTypes.elementType,
+ endDecorator: PropTypes.elementType,
+ input: PropTypes.elementType,
+ root: PropTypes.elementType,
+ startDecorator: PropTypes.elementType,
+ thumb: PropTypes.elementType,
+ track: PropTypes.elementType,
+ }),
/**
* The element that appears at the end of the switch.
*/
diff --git a/packages/mui-joy/src/Switch/SwitchProps.ts b/packages/mui-joy/src/Switch/SwitchProps.ts
index 77576a82d96f2a..934536e827595f 100644
--- a/packages/mui-joy/src/Switch/SwitchProps.ts
+++ b/packages/mui-joy/src/Switch/SwitchProps.ts
@@ -18,37 +18,37 @@ export interface SwitchSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the thumb.
* @default 'span'
*/
- thumb: React.ElementType;
+ thumb?: React.ElementType;
/**
* The component that renders the action.
* @default 'div'
*/
- action: React.ElementType;
+ action?: React.ElementType;
/**
* The component that renders the input.
* @default 'input'
*/
- input: React.ElementType;
+ input?: React.ElementType;
/**
* The component that renders the track.
* @default 'span'
*/
- track: React.ElementType;
+ track?: React.ElementType;
/**
* The component that renders the start decorator.
* @default 'span'
*/
- startDecorator: React.ElementType;
+ startDecorator?: React.ElementType;
/**
* The component that renders the end decorator.
* @default 'span'
*/
- endDecorator: React.ElementType;
+ endDecorator?: React.ElementType;
}
export interface SwitchPropsVariantOverrides {}
diff --git a/packages/mui-joy/src/Tab/Tab.tsx b/packages/mui-joy/src/Tab/Tab.tsx
index 8974ea5f0ffadd..01bc8f6e8fbc96 100644
--- a/packages/mui-joy/src/Tab/Tab.tsx
+++ b/packages/mui-joy/src/Tab/Tab.tsx
@@ -84,6 +84,8 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
orientation = 'horizontal',
variant = 'plain',
color: colorProp = 'neutral',
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -121,12 +123,13 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
elementType: TabRoot,
getSlotProps: getRootProps,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
className: classes.root,
});
@@ -194,6 +197,20 @@ Tab.propTypes /* remove-proptypes */ = {
* @default 'horizontal'
*/
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Tab/TabProps.ts b/packages/mui-joy/src/Tab/TabProps.ts
index 94b5c6621bdce2..336c24bd4c61f6 100644
--- a/packages/mui-joy/src/Tab/TabProps.ts
+++ b/packages/mui-joy/src/Tab/TabProps.ts
@@ -10,7 +10,7 @@ export interface TabSlots {
* The component that renders the root.
* @default 'button'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type TabSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/TabList/TabList.tsx b/packages/mui-joy/src/TabList/TabList.tsx
index bf274fc2048ecf..65b3d5af9181ba 100644
--- a/packages/mui-joy/src/TabList/TabList.tsx
+++ b/packages/mui-joy/src/TabList/TabList.tsx
@@ -66,6 +66,8 @@ const TabList = React.forwardRef(function TabList(inProps, ref) {
variant = 'soft',
color: colorProp = 'neutral',
size: sizeProp,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -86,12 +88,13 @@ const TabList = React.forwardRef(function TabList(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
elementType: TabListRoot,
getSlotProps: getRootProps,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
className: classes.root,
});
@@ -138,6 +141,20 @@ TabList.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/TabList/TabListProps.ts b/packages/mui-joy/src/TabList/TabListProps.ts
index a9e6b2c8f72c7c..9788aeb39c5299 100644
--- a/packages/mui-joy/src/TabList/TabListProps.ts
+++ b/packages/mui-joy/src/TabList/TabListProps.ts
@@ -10,7 +10,7 @@ export interface TabListSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type TabListSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/TabPanel/TabPanel.tsx b/packages/mui-joy/src/TabPanel/TabPanel.tsx
index cc42299b036740..c3790e1c8abbbe 100644
--- a/packages/mui-joy/src/TabPanel/TabPanel.tsx
+++ b/packages/mui-joy/src/TabPanel/TabPanel.tsx
@@ -64,7 +64,7 @@ const TabPanel = React.forwardRef(function TabPanel(inProps, ref) {
const { orientation } = useTabContext() || { orientation: 'horizontal' };
const tabsSize = React.useContext(SizeTabsContext);
- const { children, value = 0, component, size: sizeProp, ...other } = props;
+ const { children, value = 0, component, size: sizeProp, slots, slotProps, ...other } = props;
const { hidden, getRootProps } = useTabPanel({ ...props, value });
@@ -78,12 +78,13 @@ const TabPanel = React.forwardRef(function TabPanel(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
elementType: TabPanelRoot,
getSlotProps: getRootProps,
- externalForwardedProps: other,
+ externalForwardedProps,
additionalProps: {
role: 'tabpanel',
ref,
@@ -117,6 +118,20 @@ TabPanel.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/TabPanel/TabPanelProps.ts b/packages/mui-joy/src/TabPanel/TabPanelProps.ts
index e084006ef25e4a..f3e9b37b9e413f 100644
--- a/packages/mui-joy/src/TabPanel/TabPanelProps.ts
+++ b/packages/mui-joy/src/TabPanel/TabPanelProps.ts
@@ -11,7 +11,7 @@ export interface TabPanelSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type TabPanelSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Table/Table.tsx b/packages/mui-joy/src/Table/Table.tsx
index 4ca1eb145e8804..f7af4f84562a6c 100644
--- a/packages/mui-joy/src/Table/Table.tsx
+++ b/packages/mui-joy/src/Table/Table.tsx
@@ -297,6 +297,8 @@ const Table = React.forwardRef(function Table(inProps, ref) {
color: colorProp = 'neutral',
stripe,
stickyHeader = false,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -316,12 +318,13 @@ const Table = React.forwardRef(function Table(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: clsx(classes.root, className),
elementType: TableRoot,
- externalForwardedProps: { ...other, component },
+ externalForwardedProps,
ownerState,
});
@@ -388,6 +391,20 @@ Table.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* Set the header sticky.
*
diff --git a/packages/mui-joy/src/Table/TableProps.ts b/packages/mui-joy/src/Table/TableProps.ts
index 1afd11e81f3df2..e09e49d0e1a99a 100644
--- a/packages/mui-joy/src/Table/TableProps.ts
+++ b/packages/mui-joy/src/Table/TableProps.ts
@@ -10,7 +10,7 @@ export interface TableSlots {
* The component that renders the root.
* @default 'table'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type TableSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Tabs/Tabs.tsx b/packages/mui-joy/src/Tabs/Tabs.tsx
index e0d985268df187..a672227b900bd4 100644
--- a/packages/mui-joy/src/Tabs/Tabs.tsx
+++ b/packages/mui-joy/src/Tabs/Tabs.tsx
@@ -78,6 +78,8 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
variant = 'plain',
color: colorProp = 'neutral',
size = 'md',
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -95,11 +97,12 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
elementType: TabsRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
additionalProps: {
ref,
as: component,
@@ -171,6 +174,20 @@ Tabs.propTypes /* remove-proptypes */ = {
PropTypes.oneOf(['sm', 'md', 'lg']),
PropTypes.string,
]),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Tabs/TabsProps.ts b/packages/mui-joy/src/Tabs/TabsProps.ts
index f08c39a7e69ac9..60d1583d93cfe9 100644
--- a/packages/mui-joy/src/Tabs/TabsProps.ts
+++ b/packages/mui-joy/src/Tabs/TabsProps.ts
@@ -11,7 +11,7 @@ export interface TabsSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
}
export type TabsSlotsAndSlotProps = CreateSlotsAndSlotProps<
diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx
index d28b53f11f7688..36e2485e09c978 100644
--- a/packages/mui-joy/src/Textarea/Textarea.tsx
+++ b/packages/mui-joy/src/Textarea/Textarea.tsx
@@ -239,6 +239,9 @@ const Textarea = React.forwardRef(function Textarea(inProps, ref) {
endDecorator,
minRows,
maxRows,
+ component,
+ slots = {},
+ slotProps = {},
...other
} = useForwardedInput(props, textareaClasses);
@@ -271,12 +274,13 @@ const Textarea = React.forwardRef(function Textarea(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
className: [classes.root, rootStateClasses],
elementType: TextareaRoot,
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: getRootProps,
ownerState,
});
@@ -293,7 +297,7 @@ const Textarea = React.forwardRef(function Textarea(inProps, ref) {
minRows,
maxRows,
},
- externalForwardedProps: other,
+ externalForwardedProps,
getSlotProps: getInputProps,
ownerState,
});
@@ -301,14 +305,14 @@ const Textarea = React.forwardRef(function Textarea(inProps, ref) {
const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
className: classes.startDecorator,
elementType: TextareaStartDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
className: classes.endDecorator,
elementType: TextareaEndDecorator,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
diff --git a/packages/mui-joy/src/Textarea/TextareaProps.ts b/packages/mui-joy/src/Textarea/TextareaProps.ts
index 189378a6f794f2..13aaf6ec7eeaa6 100644
--- a/packages/mui-joy/src/Textarea/TextareaProps.ts
+++ b/packages/mui-joy/src/Textarea/TextareaProps.ts
@@ -10,22 +10,22 @@ export interface TextareaSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the textarea.
* @default 'textarea'
*/
- textarea: React.ElementType;
+ textarea?: React.ElementType;
/**
* The component that renders the start decorator.
* @default 'div'
*/
- startDecorator: React.ElementType;
+ startDecorator?: React.ElementType;
/**
* The component that renders the end decorator.
* @default 'div'
*/
- endDecorator: React.ElementType;
+ endDecorator?: React.ElementType;
}
export interface TextareaPropsVariantOverrides {}
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
index 3bd971782821c5..ec095d3dfd2a5c 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -18,12 +18,6 @@ import ColorInversion, { useColorInversion } from '../styles/ColorInversion';
import { getTooltipUtilityClass } from './tooltipClasses';
import { TooltipProps, TooltipOwnerState, TooltipTypeMap } from './TooltipProps';
-// Create a function to prevent typescript-to-proptypes from generating `slots` and `slotProps` proptypes.
-const excludeSlotsAndSlotProps = (props: T) => {
- const { slots, slotProps, ...otherProps } = props;
- return otherProps;
-};
-
const useUtilityClasses = (ownerState: TooltipOwnerState) => {
const { arrow, variant, color, size, placement, touch } = ownerState;
@@ -248,6 +242,9 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
color: colorProp = 'neutral',
variant = 'solid',
size = 'md',
+ component,
+ slots = {},
+ slotProps = {},
...other
} = props;
const { getColor } = useColorInversion(variant);
@@ -505,7 +502,8 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
const childrenProps = {
...nameOrDescProps,
- ...excludeSlotsAndSlotProps(other),
+ ...other,
+ component,
...children.props,
className: clsx(className, children.props.className),
onTouchStart: detectTouchStart,
@@ -564,6 +562,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
additionalProps: {
@@ -592,7 +591,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
ref: null,
className: classes.root,
elementType: PopperUnstyled,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
internalForwardedProps: {
component: TooltipRoot,
@@ -603,7 +602,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
ref: setArrowRef,
className: classes.arrow,
elementType: TooltipArrow,
- externalForwardedProps: other,
+ externalForwardedProps,
ownerState,
});
@@ -673,6 +672,11 @@ Tooltip.propTypes /* remove-proptypes */ = {
* @default 'neutral'
*/
color: PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
+ /**
+ * The component used for the root node.
+ * Either a string to use a HTML element or a component.
+ */
+ component: PropTypes.elementType,
/**
* Set to `true` if the `title` acts as an accessible description.
* By default the `title` acts as an accessible label for the child.
@@ -825,6 +829,22 @@ Tooltip.propTypes /* remove-proptypes */ = {
* @default 'md'
*/
size: PropTypes.oneOf(['sm', 'md', 'lg']),
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ arrow: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ arrow: PropTypes.elementType,
+ root: PropTypes.elementType,
+ }),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Tooltip/TooltipProps.ts b/packages/mui-joy/src/Tooltip/TooltipProps.ts
index 882d75afd7461d..779983147750a0 100644
--- a/packages/mui-joy/src/Tooltip/TooltipProps.ts
+++ b/packages/mui-joy/src/Tooltip/TooltipProps.ts
@@ -11,12 +11,12 @@ export interface TooltipSlots {
* The component that renders the root.
* @default 'div'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the arrow.
* @default 'span'
*/
- arrow: React.ElementType;
+ arrow?: React.ElementType;
}
export interface TooltipPropsVariantOverrides {}
diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx
index c28693a417c1a9..003f674c11963e 100644
--- a/packages/mui-joy/src/Typography/Typography.tsx
+++ b/packages/mui-joy/src/Typography/Typography.tsx
@@ -190,6 +190,8 @@ const Typography = React.forwardRef(function Typography(inProps, ref) {
endDecorator,
startDecorator,
variant,
+ slots = {},
+ slotProps = {},
...other
} = props;
@@ -216,7 +218,7 @@ const Typography = React.forwardRef(function Typography(inProps, ref) {
};
const classes = useUtilityClasses(ownerState);
- const externalForwardedProps = { ...other, component };
+ const externalForwardedProps = { ...other, component, slots, slotProps };
const [SlotRoot, rootProps] = useSlot('root', {
ref,
@@ -319,6 +321,24 @@ Typography.propTypes /* remove-proptypes */ = {
* @default false
*/
noWrap: PropTypes.bool,
+ /**
+ * The props used for each slot inside.
+ * @default {}
+ */
+ slotProps: PropTypes.shape({
+ endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ }),
+ /**
+ * The components used for each slot inside.
+ * @default {}
+ */
+ slots: PropTypes.shape({
+ endDecorator: PropTypes.elementType,
+ root: PropTypes.elementType,
+ startDecorator: PropTypes.elementType,
+ }),
/**
* Element placed before the children.
*/
diff --git a/packages/mui-joy/src/Typography/TypographyProps.ts b/packages/mui-joy/src/Typography/TypographyProps.ts
index 2ae20a7ce3dde0..b33e98e9cdc8d3 100644
--- a/packages/mui-joy/src/Typography/TypographyProps.ts
+++ b/packages/mui-joy/src/Typography/TypographyProps.ts
@@ -18,17 +18,17 @@ export interface TypographySlots {
* The component that renders the root.
* @default 'a'
*/
- root: React.ElementType;
+ root?: React.ElementType;
/**
* The component that renders the start decorator.
* @default 'span'
*/
- startDecorator: React.ElementType;
+ startDecorator?: React.ElementType;
/**
* The component that renders the end decorator.
* @default 'span'
*/
- endDecorator: React.ElementType;
+ endDecorator?: React.ElementType;
}
export interface TypographyPropsColorOverrides {}
diff --git a/packages/mui-joy/src/utils/types.ts b/packages/mui-joy/src/utils/types.ts
index 302262fd79d47e..17b1fa2d0d7e54 100644
--- a/packages/mui-joy/src/utils/types.ts
+++ b/packages/mui-joy/src/utils/types.ts
@@ -28,7 +28,7 @@ export type CreateSlotsAndSlotProps> =
* The components used for each slot inside.
* @default {}
*/
- slots?: Partial;
+ slots?: Slots;
/**
* The props used for each slot inside.
* @default {}