@mui/material 5.15.4 → 5.15.6

package/node/SpeedDial/SpeedDial.js

@@ -13,6 +13,7 @@ var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = require("@mui/base/composeClasses");
+var _utils = require("@mui/utils");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
@@ -51,15 +52,6 @@ function getOrientation(direction) {
   }
   return undefined;
 }
-function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
-}
 const dialRadius = 32;
 const spacingActions = 16;
 const SpeedDialRoot = (0, _styled.default)('div', {
@@ -247,7 +239,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
       const actionStep = key === nextItemArrowKeyCurrent ? 1 : -1;
 
       // stay within array indices
-      const nextAction = clamp(focusedAction.current + actionStep, 0, actions.current.length - 1);
+      const nextAction = (0, _utils.clamp)(focusedAction.current + actionStep, 0, actions.current.length - 1);
       actions.current[nextAction].focus();
       focusedAction.current = nextAction;
       nextItemArrowKey.current = nextItemArrowKeyCurrent;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.4
+ * @mui/material v5.15.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styles/createTheme.js

@@ -40,7 +40,21 @@ Please use another name.` : (0, _formatMuiErrorMessage2.default)(18));
     shadows: _shadows.default.slice(),
     typography: (0, _createTypography.default)(palette, typographyInput),
     transitions: (0, _createTransitions.default)(transitionsInput),
-    zIndex: (0, _extends2.default)({}, _zIndex.default)
+    zIndex: (0, _extends2.default)({}, _zIndex.default),
+    applyDarkStyles(css) {
+      if (this.vars) {
+        // If CssVarsProvider is used as a provider,
+        // returns ':where([data-mui-color-scheme="light|dark"]) &'
+        const selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
+        return {
+          [selector]: css
+        };
+      }
+      if (this.palette.mode === 'dark') {
+        return css;
+      }
+      return {};
+    }
   });
   muiTheme = (0, _utils.deepmerge)(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), muiTheme);

package/node/utils/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/utils/useSlot.js

@@ -0,0 +1,88 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSlot;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _utils = require("@mui/utils");
+var _utils2 = require("@mui/base/utils");
+const _excluded = ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"],
+  _excluded2 = ["component", "slots", "slotProps"],
+  _excluded3 = ["component"];
+/**
+ * An internal function to create a Material UI slot.
+ *
+ * This is an advanced version of Base UI `useSlotProps` because Material UI allows leaf component to be customized via `component` prop
+ * while Base UI does not need to support leaf component customization.
+ *
+ * @param {string} name: name of the slot
+ * @param {object} parameters
+ * @returns {[Slot, slotProps]} The slot's React component and the slot's props
+ *
+ * Note: the returned slot's props
+ * - will never contain `component` prop.
+ * - might contain `as` prop.
+ */
+function useSlot(
+/**
+ * The slot's name. All Material UI components should have `root` slot.
+ *
+ * If the name is `root`, the logic behaves differently from other slots,
+ * e.g. the `externalForwardedProps` are spread to `root` slot but not other slots.
+ */
+name, parameters) {
+  const {
+      className,
+      elementType: initialElementType,
+      ownerState,
+      externalForwardedProps,
+      getSlotOwnerState,
+      internalForwardedProps
+    } = parameters,
+    useSlotPropsParams = (0, _objectWithoutPropertiesLoose2.default)(parameters, _excluded);
+  const {
+      component: rootComponent,
+      slots = {
+        [name]: undefined
+      },
+      slotProps = {
+        [name]: undefined
+      }
+    } = externalForwardedProps,
+    other = (0, _objectWithoutPropertiesLoose2.default)(externalForwardedProps, _excluded2);
+  const elementType = slots[name] || initialElementType;
+
+  // `slotProps[name]` can be a callback that receives the component's ownerState.
+  // `resolvedComponentsProps` is always a plain object.
+  const resolvedComponentsProps = (0, _utils2.resolveComponentProps)(slotProps[name], ownerState);
+  const _mergeSlotProps = (0, _utils2.mergeSlotProps)((0, _extends2.default)({
+      className
+    }, useSlotPropsParams, {
+      externalForwardedProps: name === 'root' ? other : undefined,
+      externalSlotProps: resolvedComponentsProps
+    })),
+    {
+      props: {
+        component: slotComponent
+      },
+      internalRef
+    } = _mergeSlotProps,
+    mergedProps = (0, _objectWithoutPropertiesLoose2.default)(_mergeSlotProps.props, _excluded3);
+  const ref = (0, _utils.unstable_useForkRef)(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, parameters.ref);
+  const slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
+  const finalOwnerState = (0, _extends2.default)({}, ownerState, slotOwnerState);
+  const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
+  const props = (0, _utils2.appendOwnerState)(elementType, (0, _extends2.default)({}, name === 'root' && !rootComponent && !slots[name] && internalForwardedProps, name !== 'root' && !slots[name] && internalForwardedProps, mergedProps, LeafComponent && {
+    as: LeafComponent
+  }, {
+    ref
+  }), finalOwnerState);
+  Object.keys(slotOwnerState).forEach(propName => {
+    delete props[propName];
+  });
+  return [elementType, props];
+}

package/node/zero-styled/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "styled", {
+  enumerable: true,
+  get: function () {
+    return _styled.default;
+  }
+});
+var _styled = _interopRequireDefault(require("../styles/styled"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.15.4",
+  "version": "5.15.6",
   "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.",
@@ -27,18 +27,18 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.7",
+    "@babel/runtime": "^7.23.8",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.0",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/base": "5.0.0-beta.31",
-    "@mui/utils": "^5.15.4",
+    "@mui/base": "5.0.0-beta.33",
+    "@mui/core-downloads-tracker": "^5.15.6",
+    "@mui/system": "^5.15.6",
     "@mui/types": "^7.2.13",
-    "@mui/system": "^5.15.4",
-    "@mui/core-downloads-tracker": "^5.15.4"
+    "@mui/utils": "^5.15.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/createTheme.d.ts

@@ -45,6 +45,7 @@ export interface Theme extends BaseTheme {
   components?: Components<BaseTheme>;
   unstable_sx: (props: SxProps<Theme>) => CSSObject;
   unstable_sxConfig: SxConfig;
+  applyDarkStyles: (css: CSSObject) => CSSObject;
 }
 
 /**

package/styles/createTheme.js

@@ -32,7 +32,21 @@ Please use another name.` : _formatMuiErrorMessage(18));
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends({}, zIndex)
+    zIndex: _extends({}, zIndex),
+    applyDarkStyles(css) {
+      if (this.vars) {
+        // If CssVarsProvider is used as a provider,
+        // returns ':where([data-mui-color-scheme="light|dark"]) &'
+        const selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
+        return {
+          [selector]: css
+        };
+      }
+      if (this.palette.mode === 'dark') {
+        return css;
+      }
+      return {};
+    }
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);