v6.x slots

packages/rescript-mui-material/src/components/Accordion.res

@@ -13,6 +13,43 @@ type classes = {
   region?: string,
 }
 
+type slots = {
+  /**
+    * The component that renders the root.
+    * @default Paper
+    */
+  root?: OverridableComponent.t<Paper.props>,
+  /**
+    * The component that renders the heading.
+    * @default 'h3'
+    */
+  heading?: OverridableComponent.t<JsxDOM.domProps>,
+  /**
+    * The component that renders the transition.
+    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+    * @default Collapse
+    */
+  transition?: OverridableComponent.t<Transition.props>,
+}
+
+type slotProps = {
+  /**
+    * Props forwarded to the root slot.
+    * By default, the avaible props are based on the Paper element.
+    */
+  root?: Paper.props,
+  /**
+    * Props forwarded to the heading slot.
+    * By default, the avaible props are based on the h3 element.
+    */
+  heading?: JsxDOM.domProps,
+  /**
+    * Props forwarded to the transition slot.
+    * By default, the avaible props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component.
+    */
+  transition?: Transition.props,
+}
+
 type props = {
   ...Paper.publicProps,
   /**
@@ -50,16 +87,28 @@ type props = {
     * @param {boolean} expanded The `expanded` state of the accordion.
     */
   onChange?: (ReactEvent.Form.t, bool) => unit,
+  /**
+    * The components used for each slot inside.
+    * @default {}
+    */
+  slots?: slots,
+  /**
+    * The props used for each slot inside.
+    * @default {}
+    */
+  slotProps?: slotProps,
   /**
     * The component used for the transition.
     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+    * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
     * @default Collapse
     */
   @as("TransitionComponent")
   transitionComponent?: React.component<Transition.props>,
   /**
     * Props applied to the transition element.
     * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+    * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
     */
   @as("TransitionProps")
   transitionProps?: Transition.props,

packages/rescript-mui-material/src/components/AccordionSummary.res

@@ -17,6 +17,42 @@ type classes = {
   expandIconWrapper?: string,
 }
 
+type slots = {
+  /**
+    * The component that renders the root slot.
+    * @default ButtonBase
+    */
+  root?: OverridableComponent.t<ButtonBase.props>,
+  /**
+    * The component that renders the content slot.
+    * @default div
+    */
+  content?: OverridableComponent.t<JsxDOM.domProps>,
+  /**
+    * The component that renders the expand icon wrapper slot.
+    * @default div
+    */
+  expandIconWrapper?: OverridableComponent.t<JsxDOM.domProps>,
+}
+
+type slotProps = {
+  /**
+    * Props forwarded to the root slot.
+    * By default, the avaible props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
+    */
+  root?: ButtonBase.props,
+  /**
+    * Props forwarded to the content slot.
+    * By default, the avaible props are based on a div element.
+    */
+  content?: JsxDOM.domProps,
+  /**
+    * Props forwarded to the expand icon wrapper slot.
+    * By default, the avaible props are based on a div element.
+    */
+  expandIconWrapper?: JsxDOM.domProps,
+}
+
 type props = {
   ...ButtonBase.publicPropsWithOnClick,
   /**
@@ -32,6 +68,16 @@ type props = {
     * The icon to display as the expand indicator.
     */
   expandIcon?: React.element,
+  /**
+    * The components used for each slot inside.
+    * @default {}
+    */
+  slots?: slots,
+  /**
+    * The props used for each slot inside.
+    * @default {}
+    */
+  slotProps?: slotProps,
   /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */

packages/rescript-mui-material/src/components/Alert.res

@@ -54,11 +54,19 @@ type color =
   | String(string)
 
 type slots = {
-  closeButton?: React.element,
-  closeIcon?: React.element,
+  root?: OverridableComponent.t<Paper.props>,
+  icon?: OverridableComponent.t<JsxDOM.domProps>,
+  message?: OverridableComponent.t<JsxDOM.domProps>,
+  action?: OverridableComponent.t<JsxDOM.domProps>,
+  closeButton?: OverridableComponent.t<IconButton.props>,
+  closeIcon?: OverridableComponent.t<SvgIcon.props>,
 }
 
 type slotProps = {
+  root?: Paper.props,
+  icon?: JsxDOM.domProps,
+  message?: JsxDOM.domProps,
+  action?: JsxDOM.domProps,
   closeButton?: IconButton.props,
   closeIcon?: SvgIcon.props,
 }

packages/rescript-mui-material/src/components/Autocomplete.res

@@ -165,8 +165,16 @@ external renderInputParamsToTextFieldProps: renderInputParams<'a, 'inputRef> =>
   'inputRef,
 > = "%identity"
 
+type slots = {
+  listbox?: OverridableComponent.t<JsxDOM.domProps>,
+  paper?: OverridableComponent.t<Paper.props>,
+  popper?: OverridableComponent.t<Popper.props>,
+}
+
 type slotProps = {
+  chip?: React.element,
   clearIndicator?: IconButton.props,
+  listbox?: JsxDOM.domProps,
   paper?: Paper.props,
   popper?: Popper.props,
   popupIndicator?: IconButton.props,
@@ -520,6 +528,11 @@ type autocompleteProps<'value, 'inputRef> = {
     * @default 'medium'
     */
   size?: size,
+  /**
+    * The components used for each slot inside.
+    * @default {}
+    */
+  slots?: slots,
   /**
     * The props used for each slot inside.
     * @default {}

packages/rescript-mui-material/src/components/Avatar.res

@@ -27,6 +27,21 @@ type imgProps = {
   // React.ImgHTMLAttributes<HTMLImageElement>
 }
 
+type slots = {
+  /**
+    * The component that renders the img slot.
+    * @default 'img'
+    */
+  img?: OverridableComponent.t<JsxDOM.domProps>,
+}
+
+type slotProps = {
+  /**
+    * Props forwarded to the img slot.
+    */
+  img?: JsxDOM.domProps,
+}
+
 type props = {
   ...CommonProps.t,
   /**
@@ -51,8 +66,20 @@ type props = {
   /**
     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
     * It can be used to listen for the loading error event.
+    * @deprecated Use `slotProps.img` instead. This prop will be removed in v7.
     */
   imgProps?: imgProps,
+  /**
+    * The components used for each slot inside.
+    * @default {}
+    */
+  slots?: slots,
+  /**
+    * The extra props for the slot components.
+    * You can override the existing props or add new ones.
+    * @default {}
+    */
+  slotProps?: slotProps,
   /**
     * The `sizes` attribute for the `img` element.
     */

packages/rescript-mui-material/src/components/AvatarGroup.res

@@ -18,7 +18,13 @@ type variant =
   | @as("square") Square
   | String(string)
 
-type slotProps = {additionalAvatar: Avatar.props}
+type slots = {
+  surplus?: OverridableComponent.t<Avatar.props>,
+}
+
+type slotProps = {
+  surplus?: Avatar.props,
+}
 
 type props = {
   ...CommonProps.t,
@@ -49,6 +55,12 @@ type props = {
     * @default {}
     */
   slotProps?: slotProps,
+  /**
+    * Custom renderer of extraAvatars
+    * @param {number} surplus number of extra avatars
+    * @returns {React.element} custom element to display
+    */
+  renderSurplus?: int => React.element,
   /**
     * Spacing between avatars.
     * @default 'medium'

packages/rescript-mui-material/src/components/Backdrop.res

@@ -5,9 +5,15 @@ type classes = {
   invisible?: string,
 }
 
-type slots = {@as("Root") root?: React.element}
+type slots = {
+  root?: OverridableComponent.t<JsxDOM.domProps>,
+  transition?: OverridableComponent.t<Transition.props>,
+}
 
-type slotProps = {root?: unknown}
+type slotProps = {
+  root?: JsxDOM.domProps,
+  transition?: Transition.props,
+}
 
 type props = {
   ...Fade.publicProps,

packages/rescript-mui-material/src/components/Badge.res

@@ -82,23 +82,21 @@ type color =
   | String(string)
 
 type slotProps = {
-  root?: unknown,
-  badge?: unknown,
+  root?: JsxDOM.domProps,
+  badge?: JsxDOM.domProps,
 }
 
 type badgeSlots = {
   /**
    * The component that renders the root.
    * @default 'span'
    */
-  @as("Root")
-  root?: React.element,
+  root?: OverridableComponent.t<JsxDOM.domProps>,
   /**
    * The component that renders the badge.
    * @default 'span'
    */
-  @as("Badge")
-  badge?: React.element,
+  badge?: OverridableComponent.t<JsxDOM.domProps>,
 }
 
 type overlap =

packages/rescript-mui-material/src/components/BottomNavigationAction.res

@@ -9,6 +9,30 @@ type classes = {
   label?: string,
 }
 
+type slots = {
+  /**
+    * The component that renders the root slot.
+    * @default ButtonBase
+    */
+  root?: OverridableComponent.t<ButtonBase.props>,
+  /**
+    * The component that renders the label slot.
+    * @default 'span'
+    */
+  label?: OverridableComponent.t<JsxDOM.domProps>,
+}
+
+type slotProps = {
+  /**
+    * Props forwarded to the root slot.
+    */
+  root?: ButtonBase.props,
+  /**
+    * Props forwarded to the label slot.
+    */
+  label?: JsxDOM.domProps,
+}
+
 type props<'value> = {
   ...ButtonBase.publicPropsWithOnClick,
   /**
@@ -37,6 +61,17 @@ type props<'value> = {
     * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
     */
   showLabel?: bool,
+  /**
+    * The components used for each slot inside.
+    * @default {}
+    */
+  slots?: slots,
+  /**
+    * The extra props for the slot components.
+    * You can override the existing props or add new ones.
+    * @default {}
+    */
+  slotProps?: slotProps,
   /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */

packages/rescript-mui-material/src/components/Breadcrumbs.res

@@ -9,7 +9,10 @@ type classes = {
   separator?: string,
 }
 
-type slots = {@as("CollapsedIcon") collapsedIcon?: React.element}
+type slots = {
+  @as("CollapsedIcon")
+  collapsedIcon?: OverridableComponent.t<SvgIcon.props>,
+}
 
 type slotProps = {
   /**