@mui/material 6.1.10 → 6.2.1

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/TextField/TextField.js

@@ -407,6 +407,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   SelectProps: _propTypes.default.object,
   /**
    * The size of the component.
+   * @default 'medium'
    */
   size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.string]),
   /**

package/node/index.js

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

package/node/usePagination/usePagination.js

@@ -101,7 +101,7 @@ function usePagination(props = {}) {
       page: item,
       selected: item === page,
       disabled,
-      'aria-current': item === page ? 'true' : undefined
+      'aria-current': item === page ? 'page' : undefined
     } : {
       onClick: event => {
         handleClick(event, buttonPage(item));

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.10";
+const version = exports.version = "6.2.1";
 const major = exports.major = Number("6");
-const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("10");
+const minor = exports.minor = Number("2");
+const patch = exports.patch = Number("1");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.1.10",
+  "version": "6.2.1",
   "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.",
@@ -29,16 +29,16 @@
   "dependencies": {
     "@babel/runtime": "^7.26.0",
     "@popperjs/core": "^2.11.8",
-    "@types/react-transition-group": "^4.4.11",
+    "@types/react-transition-group": "^4.4.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/system": "^6.1.10",
-    "@mui/types": "^7.2.19",
-    "@mui/core-downloads-tracker": "^6.1.10",
-    "@mui/utils": "^6.1.10"
+    "@mui/core-downloads-tracker": "^6.2.1",
+    "@mui/utils": "^6.2.1",
+    "@mui/types": "^7.2.20",
+    "@mui/system": "^6.2.1"
   },
   "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.10"
+    "@mui/material-pigment-css": "^6.2.1"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/useThemeProps.d.ts

@@ -11,6 +11,33 @@ export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
   ? Props
   : {};
 
+/**
+ * Merges input `props` with the `defaultProps` for a component that were defined in the theme.
+ *
+ * The `defaultProps` are defined in the theme under `theme.components[componentName].defaultProps`.
+ *
+ * @example
+ *
+ * ```tsx
+ * const createTheme = () => ({
+ *   components: {
+ *     MuiStat: {
+ *       defaultProps: {
+ *         variant: 'outlined',
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * function Stat(props) {
+ *   const themeProps = useThemeProps({ props, name: 'MuiStat' });
+ *   return <div {...themeProps} />;
+ * }
+ * ```
+ *
+ * @param params.props The input props
+ * @param params.name The name of the component as defined in the theme
+ */
 export default function useThemeProps<
   Theme extends ThemeWithProps,
   Props,

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/usePagination/usePagination.js

@@ -95,7 +95,7 @@ export default function usePagination(props = {}) {
       page: item,
       selected: item === page,
       disabled,
-      'aria-current': item === page ? 'true' : undefined
+      'aria-current': item === page ? 'page' : undefined
     } : {
       onClick: event => {
         handleClick(event, buttonPage(item));

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/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.10";
+export const version = "6.2.1";
 export const major = Number("6");
-export const minor = Number("1");
-export const patch = Number("10");
+export const minor = Number("2");
+export const patch = Number("1");
 export const prerelease = undefined;
 export default version;