@mui/material 6.1.9 → 6.2.0

package/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;
 }
@@ -290,20 +293,65 @@ function useSlider(parameters) {
     }
   };
   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 +373,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);
   };
@@ -601,6 +650,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 +685,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/Tabs/ScrollbarSize.js

@@ -56,8 +56,8 @@ function ScrollbarSize(props) {
   }, [onChange]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: styles,
-    ref: nodeRef,
-    ...other
+    ...other,
+    ref: nodeRef
   });
 }
 process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.9
+ * @mui/material v6.2.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styles/createThemeWithVars.js

@@ -32,7 +32,7 @@ function setColor(obj, key, defaultValue) {
   }
 }
 function toRgb(color) {
-  if (!color || !color.startsWith('hsl')) {
+  if (typeof color !== 'string' || !color.startsWith('hsl')) {
     return color;
   }
   return (0, _colorManipulator.hslToRgb)(color);
@@ -325,7 +325,7 @@ function createThemeWithVars(options = {}, ...args) {
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', (0, _colorManipulator.private_safeColorChannel)(toRgb(colors.main)));

package/node/utils/useSlot.js

@@ -37,7 +37,6 @@ name, parameters) {
     elementType: initialElementType,
     ownerState,
     externalForwardedProps,
-    getSlotOwnerState,
     internalForwardedProps,
     ...useSlotPropsParams
   } = parameters;
@@ -69,11 +68,6 @@ name, parameters) {
     externalSlotProps: resolvedComponentsProps
   });
   const ref = (0, _useForkRef.default)(internalRef, resolvedComponentsProps?.ref, parameters.ref);
-  const slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
-  const finalOwnerState = {
-    ...ownerState,
-    ...slotOwnerState
-  };
   const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
   const props = (0, _appendOwnerState.default)(elementType, {
     ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
@@ -83,9 +77,6 @@ name, parameters) {
       as: LeafComponent
     }),
     ref
-  }, finalOwnerState);
-  Object.keys(slotOwnerState).forEach(propName => {
-    delete props[propName];
-  });
+  }, ownerState);
   return [elementType, props];
 }

package/node/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.1.9";
+const version = exports.version = "6.2.0";
 const major = exports.major = Number("6");
-const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("9");
+const minor = exports.minor = Number("2");
+const patch = exports.patch = Number("0");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.1.9",
+  "version": "6.2.0",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -33,12 +33,12 @@
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "react-is": "^18.3.1",
+    "react-is": "^19.0.0",
     "react-transition-group": "^4.4.5",
-    "@mui/types": "^7.2.19",
-    "@mui/system": "^6.1.9",
-    "@mui/utils": "^6.1.9",
-    "@mui/core-downloads-tracker": "^6.1.9"
+    "@mui/system": "^6.2.0",
+    "@mui/utils": "^6.2.0",
+    "@mui/core-downloads-tracker": "^6.2.0",
+    "@mui/types": "^7.2.19"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -46,7 +46,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^6.1.9"
+    "@mui/material-pigment-css": "^6.2.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/createThemeWithVars.js

@@ -23,7 +23,7 @@ function setColor(obj, key, defaultValue) {
   }
 }
 function toRgb(color) {
-  if (!color || !color.startsWith('hsl')) {
+  if (typeof color !== 'string' || !color.startsWith('hsl')) {
     return color;
   }
   return hslToRgb(color);
@@ -315,7 +315,7 @@ export default function createThemeWithVars(options = {}, ...args) {
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));

package/useLazyRipple/useLazyRipple.d.ts

@@ -10,7 +10,7 @@ type ControlledPromise<T = unknown> = Promise<T> & {
  */
 export declare class LazyRipple {
     /** React ref to the ripple instance */
-    ref: React.MutableRefObject<TouchRippleActions | null>;
+    ref: React.RefObject<TouchRippleActions | null>;
     /** If the ripple component should be mounted */
     shouldMount: boolean;
     /** Promise that resolves when the ripple component is mounted */

package/utils/memoTheme.d.ts

@@ -3,5 +3,5 @@ declare const memoTheme: (styleFn: (props: {
     theme: Theme;
 }) => import("@mui/styled-engine").CSSInterpolation) => (props: {
     theme: Theme;
-}) => string | number | boolean | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").Keyframes | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ArrayCSSInterpolation | null;
+}) => string | number | boolean | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").Keyframes | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").ArrayCSSInterpolation | null;
 export default memoTheme;

package/utils/useSlot.d.ts

@@ -65,13 +65,6 @@ name: T, parameters: (T extends 'root' ? {
     externalForwardedProps: ExternalForwardedProps;
     getSlotProps?: (other: EventHandlers) => WithCommonProps<SlotProps>;
     additionalProps?: WithCommonProps<AdditionalProps>;
-    /**
-     * For overriding the component's ownerState for the slot.
-     * This is required for some components that need styling via `ownerState`.
-     *
-     * It is a function because `slotProps.{slot}` can be a function which has to be resolved first.
-     */
-    getSlotOwnerState?: (mergedProps: AdditionalProps & SlotProps & ExternalSlotProps & ExtractComponentProps<Exclude<Exclude<ExternalForwardedProps['slotProps'], undefined>[T], undefined>>) => SlotOwnerState;
     /**
      * props forward to `T` only if the `slotProps.*.component` is not provided.
      * e.g. Autocomplete's listbox uses Popper + StyledComponent

package/utils/useSlot.js

@@ -31,7 +31,6 @@ name, parameters) {
     elementType: initialElementType,
     ownerState,
     externalForwardedProps,
-    getSlotOwnerState,
     internalForwardedProps,
     ...useSlotPropsParams
   } = parameters;
@@ -63,11 +62,6 @@ name, parameters) {
     externalSlotProps: resolvedComponentsProps
   });
   const ref = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.ref);
-  const slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
-  const finalOwnerState = {
-    ...ownerState,
-    ...slotOwnerState
-  };
   const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
   const props = appendOwnerState(elementType, {
     ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
@@ -77,9 +71,6 @@ name, parameters) {
       as: LeafComponent
     }),
     ref
-  }, finalOwnerState);
-  Object.keys(slotOwnerState).forEach(propName => {
-    delete props[propName];
-  });
+  }, ownerState);
   return [elementType, props];
 }

package/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.9";
+export const version = "6.2.0";
 export const major = Number("6");
-export const minor = Number("1");
-export const patch = Number("9");
+export const minor = Number("2");
+export const patch = Number("0");
 export const prerelease = undefined;
 export default version;