@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/Slider/Slider.js

@@ -1,25 +1,24 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "shiftStep", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
-import { isHostComponent, useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import { useSlider, valueToPercent } from '@mui/base/useSlider';
 import { alpha, lighten, darken } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
-import { styled, createUseThemeProps } from '../zero-styled';
-import slotShouldForwardProp from '../styles/slotShouldForwardProp';
-import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
-import capitalize from '../utils/capitalize';
-import BaseSliderValueLabel from './SliderValueLabel';
-import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { useSlider, valueToPercent } from "./useSlider.js";
+import isHostComponent from "../utils/isHostComponent.js";
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import slotShouldForwardProp from "../styles/slotShouldForwardProp.js";
+import shouldSpreadAdditionalProps from "../utils/shouldSpreadAdditionalProps.js";
+import capitalize from "../utils/capitalize.js";
+import BaseSliderValueLabel from "./SliderValueLabel.js";
+import sliderClasses, { getSliderUtilityClass } from "./sliderClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiSlider');
 function Identity(x) {
   return x;
 }
@@ -32,7 +31,7 @@ export const SliderRoot = styled('span', {
     } = props;
     return [styles.root, styles[`color${capitalize(ownerState.color)}`], ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   borderRadius: 12,
@@ -55,7 +54,7 @@ export const SliderRoot = styled('span', {
       transition: 'none'
     }
   },
-  variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
+  variants: [...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color
     },
@@ -123,7 +122,7 @@ export const SliderRoot = styled('span', {
       marginRight: 44
     }
   }]
-}));
+})));
 export const SliderRail = styled('span', {
   name: 'MuiSlider',
   slot: 'Rail',
@@ -167,7 +166,7 @@ export const SliderTrack = styled('span', {
   name: 'MuiSlider',
   slot: 'Track',
   overridesResolver: (props, styles) => styles.track
-})(({
+})(memoTheme(({
   theme
 }) => {
   return {
@@ -211,25 +210,29 @@ export const SliderTrack = styled('span', {
       style: {
         display: 'none'
       }
-    }, ...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
+    }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
       props: {
         color,
         track: 'inverted'
       },
-      style: _extends({}, theme.vars ? {
-        backgroundColor: theme.vars.palette.Slider[`${color}Track`],
-        borderColor: theme.vars.palette.Slider[`${color}Track`]
-      } : _extends({
-        backgroundColor: lighten(theme.palette[color].main, 0.62),
-        borderColor: lighten(theme.palette[color].main, 0.62)
-      }, theme.applyStyles('dark', {
-        backgroundColor: darken(theme.palette[color].main, 0.5)
-      }), theme.applyStyles('dark', {
-        borderColor: darken(theme.palette[color].main, 0.5)
-      })))
+      style: {
+        ...(theme.vars ? {
+          backgroundColor: theme.vars.palette.Slider[`${color}Track`],
+          borderColor: theme.vars.palette.Slider[`${color}Track`]
+        } : {
+          backgroundColor: lighten(theme.palette[color].main, 0.62),
+          borderColor: lighten(theme.palette[color].main, 0.62),
+          ...theme.applyStyles('dark', {
+            backgroundColor: darken(theme.palette[color].main, 0.5)
+          }),
+          ...theme.applyStyles('dark', {
+            borderColor: darken(theme.palette[color].main, 0.5)
+          })
+        })
+      }
     }))]
   };
-});
+}));
 export const SliderThumb = styled('span', {
   name: 'MuiSlider',
   slot: 'Thumb',
@@ -239,7 +242,7 @@ export const SliderThumb = styled('span', {
     } = props;
     return [styles.thumb, styles[`thumbColor${capitalize(ownerState.color)}`], ownerState.size !== 'medium' && styles[`thumbSize${capitalize(ownerState.size)}`]];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   position: 'absolute',
@@ -306,38 +309,41 @@ export const SliderThumb = styled('span', {
       left: '50%',
       transform: 'translate(-50%, 50%)'
     }
-  }, ...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color
     },
     style: {
-      [`&:hover, &.${sliderClasses.focusVisible}`]: _extends({}, theme.vars ? {
-        boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
-      } : {
-        boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
-      }, {
+      [`&:hover, &.${sliderClasses.focusVisible}`]: {
+        ...(theme.vars ? {
+          boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
+        } : {
+          boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
+        }),
         '@media (hover: none)': {
           boxShadow: 'none'
         }
-      }),
-      [`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
-        boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
-      } : {
-        boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
-      })
+      },
+      [`&.${sliderClasses.active}`]: {
+        ...(theme.vars ? {
+          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
+        } : {
+          boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
+        })
+      }
     }
   }))]
-}));
+})));
 export const SliderValueLabel = styled(BaseSliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
-})(({
+})(memoTheme(({
   theme
-}) => _extends({
+}) => ({
   zIndex: 1,
-  whiteSpace: 'nowrap'
-}, theme.typography.body2, {
+  whiteSpace: 'nowrap',
+  ...theme.typography.body2,
   fontWeight: 500,
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
@@ -412,7 +418,7 @@ export const SliderValueLabel = styled(BaseSliderValueLabel, {
       right: '20px'
     }
   }]
-}));
+})));
 export const SliderMark = styled('span', {
   name: 'MuiSlider',
   slot: 'Mark',
@@ -423,7 +429,7 @@ export const SliderMark = styled('span', {
     } = props;
     return [styles.mark, markActive && styles.markActive];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   position: 'absolute',
@@ -456,15 +462,16 @@ export const SliderMark = styled('span', {
       opacity: 0.8
     }
   }]
-}));
+})));
 export const SliderMarkLabel = styled('span', {
   name: 'MuiSlider',
   slot: 'MarkLabel',
   shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'markLabelActive',
   overridesResolver: (props, styles) => styles.markLabel
-})(({
+})(memoTheme(({
   theme
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   color: (theme.vars || theme).palette.text.secondary,
   position: 'absolute',
   whiteSpace: 'nowrap',
@@ -498,7 +505,7 @@ export const SliderMarkLabel = styled('span', {
       color: (theme.vars || theme).palette.text.primary
     }
   }]
-}));
+})));
 const useUtilityClasses = ownerState => {
   const {
     disabled,
@@ -530,42 +537,48 @@ const Forward = ({
   children
 }) => children;
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inputProps,
     name: 'MuiSlider'
   });
   const isRtl = useRtl();
   const {
-      'aria-label': ariaLabel,
-      'aria-valuetext': ariaValuetext,
-      'aria-labelledby': ariaLabelledby,
-      // eslint-disable-next-line react/prop-types
-      component = 'span',
-      components = {},
-      componentsProps = {},
-      color = 'primary',
-      classes: classesProp,
-      className,
-      disableSwap = false,
-      disabled = false,
-      getAriaLabel,
-      getAriaValueText,
-      marks: marksProp = false,
-      max = 100,
-      min = 0,
-      orientation = 'horizontal',
-      shiftStep = 10,
-      size = 'medium',
-      step = 1,
-      scale = Identity,
-      slotProps,
-      slots,
-      track = 'normal',
-      valueLabelDisplay = 'off',
-      valueLabelFormat = Identity
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    'aria-label': ariaLabel,
+    'aria-valuetext': ariaValuetext,
+    'aria-labelledby': ariaLabelledby,
+    // eslint-disable-next-line react/prop-types
+    component = 'span',
+    components = {},
+    componentsProps = {},
+    color = 'primary',
+    classes: classesProp,
+    className,
+    disableSwap = false,
+    disabled = false,
+    getAriaLabel,
+    getAriaValueText,
+    marks: marksProp = false,
+    max = 100,
+    min = 0,
+    name,
+    onChange,
+    onChangeCommitted,
+    orientation = 'horizontal',
+    shiftStep = 10,
+    size = 'medium',
+    step = 1,
+    scale = Identity,
+    slotProps,
+    slots,
+    tabIndex,
+    track = 'normal',
+    value: valueProp,
+    valueLabelDisplay = 'off',
+    valueLabelFormat = Identity,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     isRtl,
     max,
     min,
@@ -582,7 +595,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     track,
     valueLabelDisplay,
     valueLabelFormat
-  });
+  };
   const {
     axisProps,
     getRootProps,
@@ -599,9 +612,10 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     trackOffset,
     trackLeap,
     getThumbStyle
-  } = useSlider(_extends({}, ownerState, {
+  } = useSlider({
+    ...ownerState,
     rootRef: ref
-  }));
+  });
   ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
   ownerState.dragging = dragging;
   ownerState.focusedThumbIndex = focusedThumbIndex;
@@ -629,10 +643,15 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     getSlotProps: getRootProps,
     externalSlotProps: rootSlotProps,
     externalForwardedProps: other,
-    additionalProps: _extends({}, shouldSpreadAdditionalProps(RootSlot) && {
-      as: component
-    }),
-    ownerState: _extends({}, ownerState, rootSlotProps?.ownerState),
+    additionalProps: {
+      ...(shouldSpreadAdditionalProps(RootSlot) && {
+        as: component
+      })
+    },
+    ownerState: {
+      ...ownerState,
+      ...rootSlotProps?.ownerState
+    },
     className: [classes.root, className]
   });
   const railProps = useSlotProps({
@@ -645,22 +664,34 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     elementType: TrackSlot,
     externalSlotProps: trackSlotProps,
     additionalProps: {
-      style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+      style: {
+        ...axisProps[axis].offset(trackOffset),
+        ...axisProps[axis].leap(trackLeap)
+      }
+    },
+    ownerState: {
+      ...ownerState,
+      ...trackSlotProps?.ownerState
     },
-    ownerState: _extends({}, ownerState, trackSlotProps?.ownerState),
     className: classes.track
   });
   const thumbProps = useSlotProps({
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: _extends({}, ownerState, thumbSlotProps?.ownerState),
+    ownerState: {
+      ...ownerState,
+      ...thumbSlotProps?.ownerState
+    },
     className: classes.thumb
   });
   const valueLabelProps = useSlotProps({
     elementType: ValueLabelSlot,
     externalSlotProps: valueLabelSlotProps,
-    ownerState: _extends({}, ownerState, valueLabelSlotProps?.ownerState),
+    ownerState: {
+      ...ownerState,
+      ...valueLabelSlotProps?.ownerState
+    },
     className: classes.valueLabel
   });
   const markProps = useSlotProps({
@@ -681,34 +712,47 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     externalSlotProps: inputSlotProps,
     ownerState
   });
-  return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
-    children: [/*#__PURE__*/_jsx(RailSlot, _extends({}, railProps)), /*#__PURE__*/_jsx(TrackSlot, _extends({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
+    children: [/*#__PURE__*/_jsx(RailSlot, {
+      ...railProps
+    }), /*#__PURE__*/_jsx(TrackSlot, {
+      ...trackProps
+    }), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
       const percent = valueToPercent(mark.value, min, max);
       const style = axisProps[axis].offset(percent);
       let markActive;
       if (track === false) {
-        markActive = values.indexOf(mark.value) !== -1;
+        markActive = values.includes(mark.value);
       } else {
         markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
       }
       return /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(MarkSlot, _extends({
-          "data-index": index
-        }, markProps, !isHostComponent(MarkSlot) && {
-          markActive
-        }, {
-          style: _extends({}, style, markProps.style),
+        children: [/*#__PURE__*/_jsx(MarkSlot, {
+          "data-index": index,
+          ...markProps,
+          ...(!isHostComponent(MarkSlot) && {
+            markActive
+          }),
+          style: {
+            ...style,
+            ...markProps.style
+          },
           className: clsx(markProps.className, markActive && classes.markActive)
-        })), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, _extends({
+        }), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, {
           "aria-hidden": true,
-          "data-index": index
-        }, markLabelProps, !isHostComponent(MarkLabelSlot) && {
-          markLabelActive: markActive
-        }, {
-          style: _extends({}, style, markLabelProps.style),
+          "data-index": index,
+          ...markLabelProps,
+          ...(!isHostComponent(MarkLabelSlot) && {
+            markLabelActive: markActive
+          }),
+          style: {
+            ...style,
+            ...markLabelProps.style
+          },
           className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
           children: mark.label
-        })) : null]
+        }) : null]
       }, index);
     }), values.map((value, index) => {
       const percent = valueToPercent(value, min, max);
@@ -717,32 +761,39 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       return (
         /*#__PURE__*/
         /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
-        _jsx(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
-          valueLabelFormat,
-          valueLabelDisplay,
-          value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
-          index,
-          open: open === index || active === index || valueLabelDisplay === 'on',
-          disabled
-        }, valueLabelProps, {
-          children: /*#__PURE__*/_jsx(ThumbSlot, _extends({
-            "data-index": index
-          }, thumbProps, {
+        _jsx(ValueLabelComponent, {
+          ...(!isHostComponent(ValueLabelComponent) && {
+            valueLabelFormat,
+            valueLabelDisplay,
+            value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
+            index,
+            open: open === index || active === index || valueLabelDisplay === 'on',
+            disabled
+          }),
+          ...valueLabelProps,
+          children: /*#__PURE__*/_jsx(ThumbSlot, {
+            "data-index": index,
+            ...thumbProps,
             className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
-            style: _extends({}, style, getThumbStyle(index), thumbProps.style),
-            children: /*#__PURE__*/_jsx(InputSlot, _extends({
+            style: {
+              ...style,
+              ...getThumbStyle(index),
+              ...thumbProps.style
+            },
+            children: /*#__PURE__*/_jsx(InputSlot, {
               "data-index": index,
               "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
               "aria-valuenow": scale(value),
               "aria-labelledby": ariaLabelledby,
               "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
-              value: values[index]
-            }, inputSliderProps))
-          }))
-        }), index)
+              value: values[index],
+              ...inputSliderProps
+            })
+          })
+        }, index)
       );
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -795,7 +846,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -813,7 +864,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

package/Slider/SliderValueLabel.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import sliderClasses from './sliderClasses';
+import sliderClasses from "./sliderClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useValueLabelClasses = props => {
   const {

package/Slider/SliderValueLabel.types.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export interface SliderValueLabelProps {
-    children?: React.ReactElement;
+    children?: React.ReactElement<any>;
     className?: string;
     style?: React.CSSProperties;
     /**

package/Slider/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-export { default } from './Slider';
-export * from './Slider';
-export { default as sliderClasses } from './sliderClasses';
-export * from './sliderClasses';
+export { default } from "./Slider.js";
+export * from "./Slider.js";
+export { default as sliderClasses } from "./sliderClasses.js";
+export * from "./sliderClasses.js";

package/Slider/useSlider.d.ts

@@ -0,0 +1,14 @@
+import { UseSliderParameters, UseSliderReturnValue } from './useSlider.types';
+export declare function valueToPercent(value: number, min: number, max: number): number;
+export declare const Identity: (x: any) => any;
+/**
+ *
+ * Demos:
+ *
+ * - [Slider](https://mui.com/base-ui/react-slider/#hook)
+ *
+ * API:
+ *
+ * - [useSlider API](https://mui.com/base-ui/react-slider/hooks-api/#use-slider)
+ */
+export declare function useSlider(parameters: UseSliderParameters): UseSliderReturnValue;