[SliderUnstyled] Use useSlotProps (#33132)

mui · Jun 24, 2022 · c016a75 · c016a75
1 parent a7c6ef1
commit c016a75
Show file tree

Hide file tree

Showing 14 changed files with 588 additions and 404 deletions.
diff --git a/docs/pages/base/api/slider-unstyled.json b/docs/pages/base/api/slider-unstyled.json
@@ -15,7 +15,7 @@
     "componentsProps": {
       "type": {
         "name": "shape",
-        "description": "{ input?: object, mark?: object, markLabel?: object, rail?: object, root?: object, thumb?: object, track?: object, valueLabel?: { children?: element, className?: string, components?: { Root?: elementType }, open?: bool, style?: object, value?: number, valueLabelDisplay?: 'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on' } }"
+        "description": "{ input?: func<br>&#124;&nbsp;object, mark?: func<br>&#124;&nbsp;object, markLabel?: func<br>&#124;&nbsp;object, rail?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, thumb?: func<br>&#124;&nbsp;object, track?: func<br>&#124;&nbsp;object, valueLabel?: func<br>&#124;&nbsp;{ children?: element, className?: string, components?: { Root?: elementType }, open?: bool, style?: object, value?: number, valueLabelDisplay?: 'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on' } }"
       },
       "default": "{}"
     },

diff --git a/docs/pages/material-ui/api/slider.json b/docs/pages/material-ui/api/slider.json
@@ -21,7 +21,7 @@
     "componentsProps": {
       "type": {
         "name": "shape",
-        "description": "{ input?: object, mark?: object, markLabel?: object, rail?: object, root?: object, thumb?: object, track?: object, valueLabel?: { children?: element, className?: string, components?: { Root?: elementType }, open?: bool, style?: object, value?: number, valueLabelDisplay?: 'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on' } }"
+        "description": "{ input?: func<br>&#124;&nbsp;object, mark?: func<br>&#124;&nbsp;object, markLabel?: func<br>&#124;&nbsp;object, rail?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, thumb?: func<br>&#124;&nbsp;object, track?: func<br>&#124;&nbsp;object, valueLabel?: func<br>&#124;&nbsp;{ children?: element, className?: string, components?: { Root?: elementType }, open?: bool, style?: object, value?: number, valueLabelDisplay?: 'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on' } }"
       },
       "default": "{}"
     },

diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js
@@ -2,12 +2,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
-import appendOwnerState from '../utils/appendOwnerState';
 import isHostComponent from '../utils/isHostComponent';
 import composeClasses from '../composeClasses';
 import { getSliderUtilityClass } from './sliderUnstyledClasses';
 import SliderValueLabelUnstyled from './SliderValueLabelUnstyled';
 import useSlider, { valueToPercent } from './useSlider';
+import useSlotProps from '../utils/useSlotProps';
 
 const Identity = (x) => x;
 
@@ -59,7 +59,6 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
     name,
     onChange,
     onChangeCommitted,
-    onMouseDown,
     orientation = 'horizontal',
     scale = Identity,
     step = 1,
@@ -101,7 +100,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
     active,
     axis,
     range,
-    focusVisible,
+    focusedThumbIndex,
     dragging,
     marks,
     values,
@@ -111,50 +110,84 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
 
   ownerState.marked = marks.length > 0 && marks.some((mark) => mark.label);
   ownerState.dragging = dragging;
+  ownerState.focusedThumbIndex = focusedThumbIndex;
+
+  const classes = useUtilityClasses(ownerState);
 
   const Root = component ?? components.Root ?? 'span';
-  const rootProps = appendOwnerState(Root, { ...other, ...componentsProps.root }, ownerState);
+  const rootProps = useSlotProps({
+    elementType: Root,
+    getSlotProps: getRootProps,
+    externalSlotProps: componentsProps.root,
+    externalForwardedProps: other,
+    ownerState,
+    className: [classes.root, className],
+  });
 
   const Rail = components.Rail ?? 'span';
-  const railProps = appendOwnerState(Rail, componentsProps.rail, ownerState);
+  const railProps = useSlotProps({
+    elementType: Rail,
+    externalSlotProps: componentsProps.rail,
+    ownerState,
+    className: classes.rail,
+  });
 
   const Track = components.Track ?? 'span';
-  const trackProps = appendOwnerState(Track, componentsProps.track, ownerState);
-  const trackStyle = {
-    ...axisProps[axis].offset(trackOffset),
-    ...axisProps[axis].leap(trackLeap),
-  };
+  const trackProps = useSlotProps({
+    elementType: Track,
+    externalSlotProps: componentsProps.track,
+    additionalProps: {
+      style: {
+        ...axisProps[axis].offset(trackOffset),
+        ...axisProps[axis].leap(trackLeap),
+      },
+    },
+    ownerState,
+    className: classes.track,
+  });
 
   const Thumb = components.Thumb ?? 'span';
-  const thumbProps = appendOwnerState(Thumb, componentsProps.thumb, ownerState);
+  const thumbProps = useSlotProps({
+    elementType: Thumb,
+    getSlotProps: getThumbProps,
+    externalSlotProps: componentsProps.thumb,
+    ownerState,
+  });
 
   const ValueLabel = components.ValueLabel ?? SliderValueLabelUnstyled;
-  const valueLabelProps = appendOwnerState(ValueLabel, componentsProps.valueLabel, ownerState);
+  const valueLabelProps = useSlotProps({
+    elementType: ValueLabel,
+    externalSlotProps: componentsProps.valueLabel,
+    ownerState,
+  });
 
   const Mark = components.Mark ?? 'span';
-  const markProps = appendOwnerState(Mark, componentsProps.mark, ownerState);
+  const markProps = useSlotProps({
+    elementType: Mark,
+    externalSlotProps: componentsProps.mark,
+    ownerState,
+    className: classes.mark,
+  });
 
   const MarkLabel = components.MarkLabel ?? 'span';
-  const markLabelProps = appendOwnerState(MarkLabel, componentsProps.markLabel, ownerState);
+  const markLabelProps = useSlotProps({
+    elementType: MarkLabel,
+    externalSlotProps: componentsProps.markLabel,
+    ownerState,
+  });
 
   const Input = components.Input || 'input';
-  const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
-  const hiddenInputProps = getHiddenInputProps();
-
-  const classes = useUtilityClasses(ownerState);
+  const inputProps = useSlotProps({
+    elementType: Input,
+    getSlotProps: getHiddenInputProps,
+    externalSlotProps: componentsProps.input,
+    ownerState,
+  });
 
   return (
-    <Root
-      {...rootProps}
-      {...getRootProps({ onMouseDown })}
-      className={clsx(classes.root, rootProps.className, className)}
-    >
-      <Rail {...railProps} className={clsx(classes.rail, railProps.className)} />
-      <Track
-        {...trackProps}
-        className={clsx(classes.track, trackProps.className)}
-        style={{ ...trackStyle, ...trackProps.style }}
-      />
+    <Root {...rootProps}>
+      <Rail {...railProps} />
+      <Track {...trackProps} />
       {marks
         .filter((mark) => mark.value >= min && mark.value <= max)
         .map((mark, index) => {
@@ -185,7 +218,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
                   markActive,
                 })}
                 style={{ ...style, ...markProps.style }}
-                className={clsx(classes.mark, markProps.className, {
+                className={clsx(markProps.className, {
                   [classes.markActive]: markActive,
                 })}
               />
@@ -233,11 +266,11 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
             >
               <Thumb
                 data-index={index}
+                data-focusvisible={focusedThumbIndex === index}
                 {...thumbProps}
-                {...getThumbProps()}
                 className={clsx(classes.thumb, thumbProps.className, {
                   [classes.active]: active === index,
-                  [classes.focusVisible]: focusVisible === index,
+                  [classes.focusVisible]: focusedThumbIndex === index,
                 })}
                 style={{
                   ...style,
@@ -246,22 +279,14 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
                 }}
               >
                 <Input
-                  {...hiddenInputProps}
                   data-index={index}
                   aria-label={getAriaLabel ? getAriaLabel(index) : ariaLabel}
                   aria-valuenow={scale(value)}
                   aria-valuetext={
                     getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext
                   }
                   value={values[index]}
-                  {...(!isHostComponent(Input) && {
-                    ownerState: { ...ownerState, ...inputProps.ownerState },
-                  })}
                   {...inputProps}
-                  style={{
-                    ...hiddenInputProps.style,
-                    ...inputProps.style,
-                  }}
                 />
               </Thumb>
             </ValueLabelComponent>
@@ -346,24 +371,27 @@ SliderUnstyled.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    input: PropTypes.object,
-    mark: PropTypes.object,
-    markLabel: PropTypes.object,
-    rail: PropTypes.object,
-    root: PropTypes.object,
-    thumb: PropTypes.object,
-    track: PropTypes.object,
-    valueLabel: PropTypes.shape({
-      children: PropTypes.element,
-      className: PropTypes.string,
-      components: PropTypes.shape({
-        Root: PropTypes.elementType,
+    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.shape({
+        children: PropTypes.element,
+        className: PropTypes.string,
+        components: PropTypes.shape({
+          Root: PropTypes.elementType,
+        }),
+        open: PropTypes.bool,
+        style: PropTypes.object,
+        value: PropTypes.number,
+        valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
       }),
-      open: PropTypes.bool,
-      style: PropTypes.object,
-      value: PropTypes.number,
-      valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
-    }),
+    ]),
   }),
   /**
    * The default value. Use when the component is not controlled.
@@ -447,10 +475,6 @@ SliderUnstyled.propTypes /* remove-proptypes */ = {
    * @param {number | number[]} value The new value.
    */
   onChangeCommitted: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onMouseDown: PropTypes.func,
   /**
    * The component orientation.
    * @default 'horizontal'

diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.spec.tsx b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.spec.tsx
@@ -38,7 +38,7 @@ const Thumb = React.forwardRef(function Thumb(
   props: SliderUnstyledThumbSlotProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const { 'data-index': index, ownerState, ...other } = props;
+  const { 'data-index': index, 'data-focusvisible': focusVisible, ownerState, ...other } = props;
   return <div data-track={ownerState.track} {...other} ref={ref} />;
 });