@sitecore/sc-contenthub-blok 0.0.36 → 0.0.38

package/node_modules/@mui/material/node/IconButton/IconButton.js

@@ -12,12 +12,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _utils = require("@mui/material/utils");
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+var _CircularProgress = _interopRequireDefault(require("../CircularProgress"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _iconButtonClasses = _interopRequireWildcard(require("./iconButtonClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,10 +29,13 @@ const useUtilityClasses = ownerState => {
     disabled,
     color,
     edge,
-    size
+    size,
+    loading
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', color !== 'default' && `color${(0, _capitalize.default)(color)}`, edge && `edge${(0, _capitalize.default)(edge)}`, `size${(0, _capitalize.default)(size)}`]
+    root: ['root', loading && 'loading', disabled && 'disabled', color !== 'default' && `color${(0, _capitalize.default)(color)}`, edge && `edge${(0, _capitalize.default)(edge)}`, `size${(0, _capitalize.default)(size)}`],
+    loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper']
   };
   return (0, _composeClasses.default)(slots, _iconButtonClasses.getIconButtonUtilityClass, classes);
 };
@@ -41,7 +46,7 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.color !== 'default' && styles[`color${(0, _capitalize.default)(ownerState.color)}`], ownerState.edge && styles[`edge${(0, _capitalize.default)(ownerState.edge)}`], styles[`size${(0, _capitalize.default)(ownerState.size)}`]];
+    return [styles.root, ownerState.loading && styles.loading, ownerState.color !== 'default' && styles[`color${(0, _capitalize.default)(ownerState.color)}`], ownerState.edge && styles[`edge${(0, _capitalize.default)(ownerState.edge)}`], styles[`size${(0, _capitalize.default)(ownerState.size)}`]];
   }
 })((0, _memoTheme.default)(({
   theme
@@ -144,8 +149,34 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   [`&.${_iconButtonClasses.default.disabled}`]: {
     backgroundColor: 'transparent',
     color: (theme.vars || theme).palette.action.disabled
+  },
+  [`&.${_iconButtonClasses.default.loading}`]: {
+    color: 'transparent'
   }
 })));
+const IconButtonLoadingIndicator = (0, _zeroStyled.styled)('span', {
+  name: 'MuiIconButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  color: (theme.vars || theme).palette.action.disabled,
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }]
+}));
 
 /**
  * Refer to the [Icons](/material-ui/icons/) section of the documentation
@@ -164,26 +195,51 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     disabled = false,
     disableFocusRipple = false,
     size = 'medium',
+    id: idProp,
+    loading = null,
+    loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
+  const id = (0, _utils.unstable_useId)(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
     ...props,
     edge,
     color,
     disabled,
     disableFocusRipple,
+    loading,
+    loadingIndicator,
     size
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonRoot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(IconButtonRoot, {
+    id: id,
     className: (0, _clsx.default)(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
-    disabled: disabled,
+    disabled: disabled || loading,
     ref: ref,
     ...other,
     ownerState: ownerState,
-    children: children
+    children: [typeof loading === 'boolean' &&
+    /*#__PURE__*/
+    // use plain HTML span to minimize the runtime overhead
+    (0, _jsxRuntime.jsx)("span", {
+      className: classes.loadingWrapper,
+      style: {
+        display: 'contents'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonLoadingIndicator, {
+        className: classes.loadingIndicator,
+        ownerState: ownerState,
+        children: loading && loadingIndicator
+      })
+    }), children]
   });
 });
 process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes */ = {
@@ -242,6 +298,23 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes
    * @default false
    */
   edge: _propTypes.default.oneOf(['end', 'start', false]),
+  /**
+   * @ignore
+   */
+  id: _propTypes.default.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: _propTypes.default.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: _propTypes.default.node,
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.

package/node_modules/@mui/material/node/IconButton/iconButtonClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getIconButtonUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiIconButton', slot);
 }
-const iconButtonClasses = (0, _generateUtilityClasses.default)('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+const iconButtonClasses = (0, _generateUtilityClasses.default)('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator', 'loadingWrapper']);
 var _default = exports.default = iconButtonClasses;

package/node_modules/@mui/material/node/Input/Input.js

@@ -364,7 +364,5 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
    */
   value: _propTypes.default.any
 } : void 0;
-if (Input) {
-  Input.muiName = 'Input';
-}
+Input.muiName = 'Input';
 var _default = exports.default = Input;

package/node_modules/@mui/material/node/LinearProgress/LinearProgress.js

@@ -91,8 +91,8 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `color${(0, _capitalize.default)(color)}`, variant],
     dashed: ['dashed', `dashedColor${(0, _capitalize.default)(color)}`],
-    bar1: ['bar', `barColor${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
-    bar2: ['bar', variant !== 'buffer' && `barColor${(0, _capitalize.default)(color)}`, variant === 'buffer' && `color${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
+    bar1: ['bar', 'bar1', `barColor${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
+    bar2: ['bar', 'bar2', variant !== 'buffer' && `barColor${(0, _capitalize.default)(color)}`, variant === 'buffer' && `color${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
   };
   return (0, _composeClasses.default)(slots, _linearProgressClasses.getLinearProgressUtilityClass, classes);
 };
@@ -210,7 +210,7 @@ const LinearProgressBar1 = (0, _zeroStyled.styled)('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
+    return [styles.bar, styles.bar1, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
   }
 })((0, _memoTheme.default)(({
   theme
@@ -274,7 +274,7 @@ const LinearProgressBar2 = (0, _zeroStyled.styled)('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
+    return [styles.bar, styles.bar2, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
 })((0, _memoTheme.default)(({
   theme

package/node_modules/@mui/material/node/LinearProgress/linearProgressClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getLinearProgressUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiLinearProgress', slot);
 }
-const linearProgressClasses = (0, _generateUtilityClasses.default)('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
+const linearProgressClasses = (0, _generateUtilityClasses.default)('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'bar1', 'bar2', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
 var _default = exports.default = linearProgressClasses;

package/node_modules/@mui/material/node/Link/getTextDecoration.js

@@ -11,8 +11,9 @@ const getTextDecoration = ({
   ownerState
 }) => {
   const transformedColor = ownerState.color;
-  const color = (0, _style.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
-  const channelColor = (0, _style.getPath)(theme, `palette.${transformedColor}Channel`);
+  // check the `main` color first for a custom palette, then fallback to the color itself
+  const color = (0, _style.getPath)(theme, `palette.${transformedColor}.main`, false) || (0, _style.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = (0, _style.getPath)(theme, `palette.${transformedColor}.mainChannel`) || (0, _style.getPath)(theme, `palette.${transformedColor}Channel`);
   if ('vars' in theme && channelColor) {
     return `rgba(${channelColor} / 0.4)`;
   }

package/node_modules/@mui/material/node/ListItemText/ListItemText.js

@@ -16,6 +16,7 @@ var _ListContext = _interopRequireDefault(require("../List/ListContext"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _listItemTextClasses = _interopRequireWildcard(require("./listItemTextClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -87,6 +88,8 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     primaryTypographyProps,
     secondary: secondaryProp,
     secondaryTypographyProps,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const {
@@ -103,21 +106,39 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     dense
   };
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      primary: primaryTypographyProps,
+      secondary: secondaryTypographyProps,
+      ...slotProps
+    }
+  };
+  const [PrimarySlot, primarySlotProps] = (0, _useSlot.default)('primary', {
+    className: classes.primary,
+    elementType: _Typography.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const [SecondarySlot, secondarySlotProps] = (0, _useSlot.default)('secondary', {
+    className: classes.secondary,
+    elementType: _Typography.default,
+    externalForwardedProps,
+    ownerState
+  });
   if (primary != null && primary.type !== _Typography.default && !disableTypography) {
-    primary = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    primary = /*#__PURE__*/(0, _jsxRuntime.jsx)(PrimarySlot, {
       variant: dense ? 'body2' : 'body1',
-      className: classes.primary,
-      component: primaryTypographyProps?.variant ? undefined : 'span',
-      ...primaryTypographyProps,
+      component: primarySlotProps?.variant ? undefined : 'span',
+      ...primarySlotProps,
       children: primary
     });
   }
   if (secondary != null && secondary.type !== _Typography.default && !disableTypography) {
-    secondary = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    secondary = /*#__PURE__*/(0, _jsxRuntime.jsx)(SecondarySlot, {
       variant: "body2",
-      className: classes.secondary,
       color: "textSecondary",
-      ...secondaryTypographyProps,
+      ...secondarySlotProps,
       children: secondary
     });
   }
@@ -167,6 +188,7 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
   /**
    * These props will be forwarded to the primary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.primary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   primaryTypographyProps: _propTypes.default.object,
   /**
@@ -176,8 +198,25 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
   /**
    * These props will be forwarded to the secondary typography component
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.secondary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   secondaryTypographyProps: _propTypes.default.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    primary: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    secondary: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    primary: _propTypes.default.elementType,
+    secondary: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node_modules/@mui/material/node/OutlinedInput/OutlinedInput.js

@@ -413,7 +413,5 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    */
   value: _propTypes.default.any
 } : void 0;
-if (OutlinedInput) {
-  OutlinedInput.muiName = 'Input';
-}
+OutlinedInput.muiName = 'Input';
 var _default = exports.default = OutlinedInput;

package/node_modules/@mui/material/node/PigmentGrid/PigmentGrid.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Grid = _interopRequireDefault(require("@mui/material-pigment-css/Grid"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
-var _gridGenerator = require("@mui/system/Grid/gridGenerator");
+var _Grid2 = require("@mui/system/Grid");
 var _jsxRuntime = require("react/jsx-runtime");
 // @ts-ignore
 
@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
     }
   }
   const slots = {
-    root: ['root', container && 'container', ...(0, _gridGenerator.generateDirectionClasses)(direction), ...(0, _gridGenerator.generateSizeClassNames)(gridSize), ...(container ? (0, _gridGenerator.generateSpacingClassNames)(spacing) : [])]
+    root: ['root', container && 'container', ...(0, _Grid2.unstable_generateDirectionClasses)(direction), ...(0, _Grid2.unstable_generateSizeClassNames)(gridSize), ...(container ? (0, _Grid2.unstable_generateSpacingClassNames)(spacing) : [])]
   };
   return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)('MuiGrid2', slot), {});
 };

package/node_modules/@mui/material/node/RadioGroup/RadioGroupContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/node_modules/@mui/material/node/Select/Select.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _SelectInput = _interopRequireDefault(require("./SelectInput"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
@@ -24,12 +25,20 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _zeroStyled = require("../zero-styled");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _selectClasses = require("./selectClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
-  return classes;
+  const slots = {
+    root: ['root']
+  };
+  const composedClasses = (0, _composeClasses.default)(slots, _selectClasses.getSelectUtilityClasses, classes);
+  return {
+    ...classes,
+    ...composedClasses
+  };
 };
 const styledRootConfig = {
   name: 'MuiSelect',

package/node_modules/@mui/material/node/Select/SelectInput.js

@@ -140,6 +140,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     open: openProp,
     readOnly,
     renderValue,
+    required,
     SelectDisplayProps = {},
     tabIndex: tabIndexProp,
     // catching `type` from Input which makes no sense for SelectInput
@@ -449,13 +450,15 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       ref: handleDisplayRef,
       tabIndex: tabIndex,
       role: "combobox",
-      "aria-controls": listboxId,
+      "aria-controls": open ? listboxId : undefined,
       "aria-disabled": disabled ? 'true' : undefined,
       "aria-expanded": open ? 'true' : 'false',
       "aria-haspopup": "listbox",
       "aria-label": ariaLabel,
       "aria-labelledby": [labelId, buttonId].filter(Boolean).join(' ') || undefined,
       "aria-describedby": ariaDescribedby,
+      "aria-required": required ? 'true' : undefined,
+      "aria-invalid": error ? 'true' : undefined,
       onKeyDown: handleKeyDown,
       onMouseDown: disabled || readOnly ? null : handleMouseDown,
       onBlur: handleBlur,
@@ -483,6 +486,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       disabled: disabled,
       className: classes.nativeInput,
       autoFocus: autoFocus,
+      required: required,
       ...other,
       ownerState: ownerState
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectIcon, {
@@ -648,6 +652,10 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    * @returns {ReactNode}
    */
   renderValue: _propTypes.default.func,
+  /**
+   * If `true`, the component is required.
+   */
+  required: _propTypes.default.bool,
   /**
    * Props applied to the clickable div element.
    */

package/node_modules/@mui/material/node/Slide/Slide.js

@@ -224,7 +224,10 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     in: inProp,
     timeout: timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         ref: handleRef,
         style: {
@@ -232,7 +235,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
           ...style,
           ...children.props.style
         },
-        ...childProps
+        ...restChildProps
       });
     }
   });

package/node_modules/@mui/material/node/Slider/useSlider.js

@@ -14,6 +14,9 @@ var _utils = require("@mui/utils");
 var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
 var _areArraysEqual = _interopRequireDefault(require("../utils/areArraysEqual"));
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
+function getNewValue(currentValue, step, direction, min, max) {
+  return direction === 1 ? Math.min(currentValue + step, max) : Math.max(currentValue - step, min);
+}
 function asc(a, b) {
   return a - b;
 }
@@ -195,6 +198,8 @@ function useSlider(parameters) {
   const [open, setOpen] = React.useState(-1);
   const [dragging, setDragging] = React.useState(false);
   const moveCount = React.useRef(0);
+  // lastChangedValue is updated whenever onChange is triggered.
+  const lastChangedValue = React.useRef(null);
   const [valueDerived, setValueState] = (0, _utils.unstable_useControlled)({
     controlled: valueProp,
     default: defaultValue ?? min,
@@ -215,6 +220,7 @@ function useSlider(parameters) {
         name
       }
     });
+    lastChangedValue.current = value;
     onChange(clonedEvent, value, thumbIndex);
   });
   const range = Array.isArray(valueDerived);
@@ -286,24 +292,69 @@ function useSlider(parameters) {
       handleChange(event, newValue, index);
     }
     if (onChangeCommitted) {
-      onChangeCommitted(event, newValue);
+      onChangeCommitted(event, lastChangedValue.current ?? newValue);
     }
   };
   const createHandleHiddenInputKeyDown = otherHandlers => event => {
-    // The Shift + Up/Down keyboard shortcuts for moving the slider makes sense to be supported
-    // only if the step is defined. If the step is null, this means tha the marks are used for specifying the valid values.
-    if (step !== null) {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'PageUp', 'PageDown', 'Home', 'End'].includes(event.key)) {
+      event.preventDefault();
       const index = Number(event.currentTarget.getAttribute('data-index'));
       const value = values[index];
       let newValue = null;
-      if ((event.key === 'ArrowLeft' || event.key === 'ArrowDown') && event.shiftKey || event.key === 'PageDown') {
-        newValue = Math.max(value - shiftStep, min);
-      } else if ((event.key === 'ArrowRight' || event.key === 'ArrowUp') && event.shiftKey || event.key === 'PageUp') {
-        newValue = Math.min(value + shiftStep, max);
+      // Keys actions that change the value by more than the most granular `step`
+      // value are only applied if the step not `null`.
+      // When step is `null`, the `marks` prop is used instead to define valid values.
+      if (step != null) {
+        const stepSize = event.shiftKey ? shiftStep : step;
+        switch (event.key) {
+          case 'ArrowUp':
+            newValue = getNewValue(value, stepSize, 1, min, max);
+            break;
+          case 'ArrowRight':
+            newValue = getNewValue(value, stepSize, isRtl ? -1 : 1, min, max);
+            break;
+          case 'ArrowDown':
+            newValue = getNewValue(value, stepSize, -1, min, max);
+            break;
+          case 'ArrowLeft':
+            newValue = getNewValue(value, stepSize, isRtl ? 1 : -1, min, max);
+            break;
+          case 'PageUp':
+            newValue = getNewValue(value, shiftStep, 1, min, max);
+            break;
+          case 'PageDown':
+            newValue = getNewValue(value, shiftStep, -1, min, max);
+            break;
+          case 'Home':
+            newValue = min;
+            break;
+          case 'End':
+            newValue = max;
+            break;
+          default:
+            break;
+        }
+      } else if (marks) {
+        const maxMarksValue = marksValues[marksValues.length - 1];
+        const currentMarkIndex = marksValues.indexOf(value);
+        const decrementKeys = [isRtl ? 'ArrowRight' : 'ArrowLeft', 'ArrowDown', 'PageDown', 'Home'];
+        const incrementKeys = [isRtl ? 'ArrowLeft' : 'ArrowRight', 'ArrowUp', 'PageUp', 'End'];
+        if (decrementKeys.includes(event.key)) {
+          if (currentMarkIndex === 0) {
+            newValue = marksValues[0];
+          } else {
+            newValue = marksValues[currentMarkIndex - 1];
+          }
+        } else if (incrementKeys.includes(event.key)) {
+          if (currentMarkIndex === marksValues.length - 1) {
+            newValue = maxMarksValue;
+          } else {
+            newValue = marksValues[currentMarkIndex + 1];
+          }
+        }
       }
-      if (newValue !== null) {
+      if (newValue != null) {
         changeValue(event, newValue);
-        event.preventDefault();
       }
     }
     otherHandlers?.onKeyDown?.(event);
@@ -325,6 +376,7 @@ function useSlider(parameters) {
   }
   const createHandleHiddenInputChange = otherHandlers => event => {
     otherHandlers.onChange?.(event);
+    // this handles value change by Pointer or Touch events
     // @ts-ignore
     changeValue(event, event.target.valueAsNumber);
   };
@@ -445,7 +497,7 @@ function useSlider(parameters) {
       setOpen(-1);
     }
     if (onChangeCommitted) {
-      onChangeCommitted(nativeEvent, newValue);
+      onChangeCommitted(nativeEvent, lastChangedValue.current ?? newValue);
     }
     touchId.current = undefined;
 
@@ -601,6 +653,10 @@ function useSlider(parameters) {
       pointerEvents: active !== -1 && active !== index ? 'none' : undefined
     };
   };
+  let cssWritingMode;
+  if (orientation === 'vertical') {
+    cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr';
+  }
   const getHiddenInputProps = (externalProps = {}) => {
     const externalHandlers = (0, _extractEventHandlers.default)(externalProps);
     const ownEventHandlers = {
@@ -632,7 +688,8 @@ function useSlider(parameters) {
         direction: isRtl ? 'rtl' : 'ltr',
         // So that VoiceOver's focus indicator matches the thumb's dimensions
         width: '100%',
-        height: '100%'
+        height: '100%',
+        writingMode: cssWritingMode
       }
     };
   };

package/node_modules/@mui/material/node/Step/StepContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {