@mui/material 6.3.1 → 6.4.1

package/modern/Link/getTextDecoration.js

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

package/modern/RadioGroup/RadioGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

package/modern/Select/Select.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import deepmerge from '@mui/utils/deepmerge';
+import composeClasses from '@mui/utils/composeClasses';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import SelectInput from "./SelectInput.js";
 import formControlState from "../FormControl/formControlState.js";
@@ -17,12 +18,20 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useForkRef from "../utils/useForkRef.js";
 import { styled } from "../zero-styled/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
+import { getSelectUtilityClasses } from "./selectClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
-  return classes;
+  const slots = {
+    root: ['root']
+  };
+  const composedClasses = composeClasses(slots, getSelectUtilityClasses, classes);
+  return {
+    ...classes,
+    ...composedClasses
+  };
 };
 const styledRootConfig = {
   name: 'MuiSelect',

package/modern/Select/SelectInput.js

@@ -443,7 +443,7 @@ 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",

package/modern/Slider/useSlider.js

@@ -188,6 +188,8 @@ export 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] = useControlled({
     controlled: valueProp,
     default: defaultValue ?? min,
@@ -208,6 +210,7 @@ export function useSlider(parameters) {
         name
       }
     });
+    lastChangedValue.current = value;
     onChange(clonedEvent, value, thumbIndex);
   });
   const range = Array.isArray(valueDerived);
@@ -279,7 +282,7 @@ export function useSlider(parameters) {
       handleChange(event, newValue, index);
     }
     if (onChangeCommitted) {
-      onChangeCommitted(event, newValue);
+      onChangeCommitted(event, lastChangedValue.current ?? newValue);
     }
   };
   const createHandleHiddenInputKeyDown = otherHandlers => event => {
@@ -484,7 +487,7 @@ export function useSlider(parameters) {
       setOpen(-1);
     }
     if (onChangeCommitted) {
-      onChangeCommitted(nativeEvent, newValue);
+      onChangeCommitted(nativeEvent, lastChangedValue.current ?? newValue);
     }
     touchId.current = undefined;
 

package/modern/Step/StepContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * Provides information about the current step in Stepper.

package/modern/Stepper/StepperContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * Provides information about the current step in Stepper.

package/modern/Table/Tablelvl2Context.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 /**

package/modern/ToggleButtonGroup/ToggleButtonGroupButtonContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

package/modern/ToggleButtonGroup/ToggleButtonGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

package/modern/index.js

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

package/modern/utils/index.js

@@ -18,6 +18,7 @@ export { default as unsupportedProp } from "./unsupportedProp.js";
 export { default as useControlled } from "./useControlled.js";
 export { default as useEventCallback } from "./useEventCallback.js";
 export { default as useForkRef } from "./useForkRef.js";
+export { default as mergeSlotProps } from "./mergeSlotProps.js";
 // TODO: remove this export once ClassNameGenerator is stable
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_ClassNameGenerator = {

package/modern/utils/mergeSlotProps.js

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+export default function mergeSlotProps(externalSlotProps, defaultSlotProps) {
+  if (!externalSlotProps) {
+    return defaultSlotProps;
+  }
+  if (typeof externalSlotProps === 'function' || typeof defaultSlotProps === 'function') {
+    return ownerState => {
+      const defaultSlotPropsValue = typeof defaultSlotProps === 'function' ? defaultSlotProps(ownerState) : defaultSlotProps;
+      const externalSlotPropsValue = typeof externalSlotProps === 'function' ? externalSlotProps({
+        ...ownerState,
+        ...defaultSlotPropsValue
+      }) : externalSlotProps;
+      const className = clsx(ownerState?.className, defaultSlotPropsValue?.className, externalSlotPropsValue?.className);
+      return {
+        ...defaultSlotPropsValue,
+        ...externalSlotPropsValue,
+        ...(!!className && {
+          className
+        }),
+        ...(defaultSlotPropsValue?.style && externalSlotPropsValue?.style && {
+          style: {
+            ...defaultSlotPropsValue.style,
+            ...externalSlotPropsValue.style
+          }
+        })
+      };
+    };
+  }
+  const className = clsx(defaultSlotProps?.className, externalSlotProps?.className);
+  return {
+    ...defaultSlotProps,
+    ...externalSlotProps,
+    ...(!!className && {
+      className
+    }),
+    ...(defaultSlotProps?.style && externalSlotProps?.style && {
+      style: {
+        ...defaultSlotProps.style,
+        ...externalSlotProps.style
+      }
+    })
+  };
+}

package/modern/utils/useSlot.js

@@ -32,6 +32,7 @@ name, parameters) {
     ownerState,
     externalForwardedProps,
     internalForwardedProps,
+    shouldForwardComponentProp = false,
     ...useSlotPropsParams
   } = parameters;
   const {
@@ -67,9 +68,12 @@ name, parameters) {
     ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
     ...(name !== 'root' && !slots[name] && internalForwardedProps),
     ...mergedProps,
-    ...(LeafComponent && {
+    ...(LeafComponent && !shouldForwardComponentProp && {
       as: LeafComponent
     }),
+    ...(LeafComponent && shouldForwardComponentProp && {
+      component: LeafComponent
+    }),
     ref
   }, ownerState);
   return [elementType, props];

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.3.1";
+export const version = "6.4.1";
 export const major = Number("6");
-export const minor = Number("3");
+export const minor = Number("4");
 export const patch = Number("1");
 export const prerelease = undefined;
 export default version;

package/node/Alert/Alert.js

@@ -194,6 +194,39 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
       ...slotProps
     }
   };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    ref,
+    shouldForwardComponentProp: true,
+    className: (0, _clsx.default)(classes.root, className),
+    elementType: AlertRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      role,
+      elevation: 0
+    }
+  });
+  const [IconSlot, iconSlotProps] = (0, _useSlot.default)('icon', {
+    className: classes.icon,
+    elementType: AlertIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [MessageSlot, messageSlotProps] = (0, _useSlot.default)('message', {
+    className: classes.message,
+    elementType: AlertMessage,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ActionSlot, actionSlotProps] = (0, _useSlot.default)('action', {
+    className: classes.action,
+    elementType: AlertAction,
+    externalForwardedProps,
+    ownerState
+  });
   const [CloseButtonSlot, closeButtonProps] = (0, _useSlot.default)('closeButton', {
     elementType: _IconButton.default,
     externalForwardedProps,
@@ -204,28 +237,19 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AlertRoot, {
-    role: role,
-    elevation: 0,
-    ownerState: ownerState,
-    className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
-    ...other,
-    children: [icon !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertIcon, {
-      ownerState: ownerState,
-      className: classes.icon,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootSlotProps,
+    children: [icon !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSlot, {
+      ...iconSlotProps,
       children: icon || iconMapping[severity] || defaultIconMapping[severity]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertMessage, {
-      ownerState: ownerState,
-      className: classes.message,
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageSlot, {
+      ...messageSlotProps,
       children: children
-    }), action != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertAction, {
-      ownerState: ownerState,
-      className: classes.action,
+    }), action != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionSlot, {
+      ...actionSlotProps,
       children: action
-    }) : null, action == null && onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertAction, {
-      ownerState: ownerState,
-      className: classes.action,
+    }) : null, action == null && onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionSlot, {
+      ...actionSlotProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButtonSlot, {
         size: "small",
         "aria-label": closeText,
@@ -337,16 +361,24 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
    * @default {}
    */
   slotProps: _propTypes.default.shape({
+    action: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     closeButton: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-    closeIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+    closeIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    message: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: _propTypes.default.shape({
+    action: _propTypes.default.elementType,
     closeButton: _propTypes.default.elementType,
-    closeIcon: _propTypes.default.elementType
+    closeIcon: _propTypes.default.elementType,
+    icon: _propTypes.default.elementType,
+    message: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.