@mui/material 6.0.0-alpha.12 → 6.0.0-alpha.13

package/node/Modal/Modal.js

@@ -11,7 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
-var _utils = require("@mui/base/utils");
 var _unstable_useModal = require("@mui/base/unstable_useModal");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Unstable_TrapFocus = _interopRequireDefault(require("../Unstable_TrapFocus"));
@@ -20,6 +19,8 @@ var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 var _modalClasses = require("./modalClasses");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -86,7 +87,6 @@ const ModalBackdrop = (0, _zeroStyled.styled)(_Backdrop.default, {
  * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
  */
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     name: 'MuiModal',
     props: inProps
@@ -115,8 +115,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     onTransitionEnter,
     onTransitionExited,
     open,
-    slotProps,
-    slots,
+    slotProps = {},
+    slots = {},
     // eslint-disable-next-line react/prop-types
     theme,
     ...other
@@ -164,25 +164,31 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onEnter = onEnter;
     childProps.onExited = onExited;
   }
-  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
-  const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
-  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
-  const rootProps = (0, _utils.useSlotProps)({
-    elementType: RootSlot,
-    externalSlotProps: rootSlotProps,
-    externalForwardedProps: other,
+  const externalForwardedProps = {
+    slots: {
+      root: components.Root,
+      backdrop: components.Backdrop,
+      ...slots
+    },
+    slotProps: {
+      ...componentsProps,
+      ...slotProps
+    }
+  };
+  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    elementType: ModalRoot,
+    externalForwardedProps,
     getSlotProps: getRootProps,
     additionalProps: {
       ref,
       as: component
     },
     ownerState,
-    className: (0, _clsx.default)(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
+    className: (0, _clsx.default)(className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
   });
-  const backdropProps = (0, _utils.useSlotProps)({
-    elementType: BackdropSlot,
-    externalSlotProps: backdropSlotProps,
+  const [BackdropSlot, backdropProps] = (0, _useSlot.default)('backdrop', {
+    elementType: BackdropComponent,
+    externalForwardedProps,
     additionalProps: BackdropProps,
     getSlotProps: otherHandlers => {
       return getBackdropProps({
@@ -197,9 +203,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         }
       });
     },
-    className: (0, _clsx.default)(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop),
+    className: (0, _clsx.default)(BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop),
     ownerState
   });
+  const backdropRef = (0, _utils.useForkRef)(BackdropProps == null ? void 0 : BackdropProps.ref, backdropProps.ref);
   if (!keepMounted && !open && (!hasTransition || exited)) {
     return null;
   }
@@ -209,8 +216,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disablePortal: disablePortal,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
       ...rootProps,
+      ...other,
       children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropSlot, {
-        ...backdropProps
+        ...backdropProps,
+        ref: backdropRef
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, {
         disableEnforceFocus: disableEnforceFocus,
         disableAutoFocus: disableAutoFocus,

package/node/PigmentContainer/PigmentContainer.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Container = _interopRequireDefault(require("@pigment-css/react/Container"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// @ts-ignore
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    fixed,
+    disableGutters,
+    maxWidth
+  } = ownerState;
+  const slots = {
+    root: ['root', maxWidth && `maxWidth${(0, _capitalize.default)(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
+  };
+  return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)('MuiContainer', slot), classes);
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Container](https://next.mui.com/material-ui/react-container/)
+ *
+ * API:
+ *
+ * - [PigmentContainer API](https://next.mui.com/material-ui/api/pigment-container/)
+ */
+const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer({
+  className,
+  disableGutters = false,
+  fixed = false,
+  maxWidth = 'lg',
+  ...props
+}, ref) {
+  const ownerState = {
+    ...props,
+    disableGutters,
+    fixed,
+    maxWidth
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
+    className: (0, _clsx.default)(classes.root, className),
+    disableGutters: disableGutters,
+    fixed: fixed,
+    maxWidth: maxWidth,
+    ...props,
+    // @ts-ignore
+    ref: ref
+  });
+});
+process.env.NODE_ENV !== "production" ? PigmentContainer.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: _propTypes.default.bool,
+  /**
+   * Set the max-width to match the min-width of the current breakpoint.
+   * This is useful if you'd prefer to design for a fixed set of sizes
+   * instead of trying to accommodate a fully fluid viewport.
+   * It's fluid by default.
+   * @default false
+   */
+  fixed: _propTypes.default.bool,
+  /**
+   * Determine the max-width of the container.
+   * The container width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'lg'
+   */
+  maxWidth: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
+var _default = exports.default = PigmentContainer;

package/node/PigmentContainer/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  containerClasses: true
+};
+Object.defineProperty(exports, "containerClasses", {
+  enumerable: true,
+  get: function () {
+    return _containerClasses.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _PigmentContainer.default;
+  }
+});
+var _PigmentContainer = _interopRequireWildcard(require("./PigmentContainer"));
+Object.keys(_PigmentContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PigmentContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PigmentContainer[key];
+    }
+  });
+});
+var _containerClasses = _interopRequireDefault(require("../Container/containerClasses"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/PigmentGrid/PigmentGrid.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Grid = _interopRequireDefault(require("@pigment-css/react/Grid"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _gridGenerator = require("@mui/system/Unstable_Grid/gridGenerator");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// @ts-ignore
+
+const useUtilityClasses = ownerState => {
+  const {
+    container,
+    direction,
+    size,
+    spacing
+  } = ownerState;
+  let gridSize = {};
+  if (size) {
+    if (Array.isArray(size)) {
+      size.forEach((value, index) => {
+        gridSize = {
+          ...gridSize,
+          [index]: value
+        };
+      });
+    }
+    if (typeof size === 'object') {
+      gridSize = size;
+    }
+  }
+  const slots = {
+    root: ['root', container && 'container', ...(0, _gridGenerator.generateDirectionClasses)(direction), ...(0, _gridGenerator.generateSizeClassNames)(gridSize), ...(container ? (0, _gridGenerator.generateSpacingClassNames)(spacing) : [])]
+  };
+  return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)('MuiGrid2', slot), {});
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
+ *
+ * API:
+ *
+ * - [PigmentGrid API](https://next.mui.com/material-ui/api/pigment-grid/)
+ */
+const PigmentGrid = /*#__PURE__*/React.forwardRef(function PigmentGrid(props, ref) {
+  const {
+    className,
+    ...other
+  } = props;
+  const classes = useUtilityClasses(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+    ref: ref,
+    className: (0, _clsx.default)(classes.root, className),
+    ...other
+  });
+});
+process.env.NODE_ENV !== "production" ? PigmentGrid.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: _propTypes.default.node,
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number, _propTypes.default.object]),
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container: _propTypes.default.bool,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['column', 'column-reverse', 'row', 'row-reverse']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column', 'column-reverse', 'row', 'row-reverse'])), _propTypes.default.object]),
+  /**
+   * Defines the offset of the grid.
+   */
+  offset: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number, _propTypes.default.object]),
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
+  /**
+   * Defines the column size of the grid.
+   */
+  size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number, _propTypes.default.object]),
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
+  /**
+   * @ignore
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * @internal
+   * The level of the grid starts from `0`
+   * and increases when the grid nests inside another grid regardless of container or item.
+   *
+   * ```js
+   * <Grid> // level 0
+   *   <Grid> // level 1
+   *     <Grid> // level 2
+   *   <Grid> // level 1
+   * ```
+   *
+   * Only consecutive grid is considered nesting.
+   * A grid container will start at `0` if there are non-Grid element above it.
+   *
+   * ```js
+   * <Grid> // level 0
+   *   <div>
+   *     <Grid> // level 0
+   *       <Grid> // level 1
+   * ```
+   */
+  unstable_level: _propTypes.default.number,
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap: _propTypes.default.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
+} : void 0;
+
+// @ts-ignore internal logic for nested grid
+PigmentGrid.muiName = 'Grid';
+var _default = exports.default = PigmentGrid;

package/node/PigmentGrid/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  grid2Classes: true
+};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _PigmentGrid.default;
+  }
+});
+Object.defineProperty(exports, "grid2Classes", {
+  enumerable: true,
+  get: function () {
+    return _grid2Classes.default;
+  }
+});
+var _PigmentGrid = _interopRequireWildcard(require("./PigmentGrid"));
+Object.keys(_PigmentGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PigmentGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PigmentGrid[key];
+    }
+  });
+});
+var _grid2Classes = _interopRequireDefault(require("../Unstable_Grid2/grid2Classes"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }