@mui/lab 5.0.0-alpha.51 → 5.0.0-alpha.55

package/node/LoadingButton/LoadingButton.js

@@ -19,7 +19,7 @@ var _utils = require("@mui/utils");
 
 var _utils2 = require("@mui/material/utils");
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _styles = require("@mui/material/styles");
 
@@ -31,7 +31,7 @@ var _loadingButtonClasses = _interopRequireWildcard(require("./loadingButtonClas
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "disabled", "loading", "loadingIndicator", "loadingPosition"];
+const _excluded = ["children", "disabled", "loading", "loadingIndicator", "loadingPosition", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -49,7 +49,7 @@ const useUtilityClasses = ownerState => {
     endIcon: [loading && `endIconLoading${(0, _utils2.capitalize)(loadingPosition)}`],
     loadingIndicator: ['loadingIndicator', loading && `loadingIndicator${(0, _utils2.capitalize)(loadingPosition)}`]
   };
-  const composedClasses = (0, _core.unstable_composeClasses)(slots, _loadingButtonClasses.getLoadingButtonUtilityClass, classes);
+  const composedClasses = (0, _base.unstable_composeClasses)(slots, _loadingButtonClasses.getLoadingButtonUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 }; // TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
 
@@ -84,6 +84,22 @@ const LoadingButtonRoot = (0, _styles.styled)(_Button.default, {
   [`&.${_loadingButtonClasses.default.loading}`]: {
     color: 'transparent'
   }
+}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
+  [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0,
+    marginRight: -8
+  }
+}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
+  [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0,
+    marginLeft: -8
+  }
 }));
 const LoadingButtonLoadingIndicator = (0, _styles.styled)('div', {
   name: 'MuiLoadingButton',
@@ -101,14 +117,24 @@ const LoadingButtonLoadingIndicator = (0, _styles.styled)('div', {
   position: 'absolute',
   visibility: 'visible',
   display: 'flex'
-}, ownerState.loadingPosition === 'start' && {
+}, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
   left: 14
+}, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {
+  left: 6
 }, ownerState.loadingPosition === 'center' && {
   left: '50%',
   transform: 'translate(-50%)',
   color: theme.palette.action.disabled
-}, ownerState.loadingPosition === 'end' && {
+}, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
   right: 14
+}, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {
+  right: 6
+}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
+  position: 'relative',
+  left: -10
+}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
+  position: 'relative',
+  right: -10
 }));
 const LoadingIndicator = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
   color: "inherit",
@@ -124,27 +150,38 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inPro
     disabled = false,
     loading = false,
     loadingIndicator = LoadingIndicator,
-    loadingPosition = 'center'
+    loadingPosition = 'center',
+    variant = 'text'
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = (0, _extends2.default)({}, props, {
     disabled,
     loading,
     loadingIndicator,
-    loadingPosition
+    loadingPosition,
+    variant
   });
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LoadingButtonRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingButtonRoot, (0, _extends2.default)({
     disabled: disabled || loading,
     ref: ref
   }, other, {
+    variant: variant,
     classes: classes,
     ownerState: ownerState,
-    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingButtonLoadingIndicator, {
-      className: classes.loadingIndicator,
-      ownerState: ownerState,
-      children: loadingIndicator
-    }), children]
+    children: ownerState.loadingPosition === 'end' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [children, loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingButtonLoadingIndicator, {
+        className: classes.loadingIndicator,
+        ownerState: ownerState,
+        children: loadingIndicator
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingButtonLoadingIndicator, {
+        className: classes.loadingIndicator,
+        ownerState: ownerState,
+        children: loadingIndicator
+      }), children]
+    })
   }));
 });
 process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
@@ -202,7 +239,13 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
+
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: _propTypes.default.oneOf(['contained', 'outlined', 'text'])
 } : void 0;
 var _default = LoadingButton;
 exports.default = _default;

package/node/LoadingButton/loadingButtonClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getLoadingButtonUtilityClass = getLoadingButtonUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getLoadingButtonUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiLoadingButton', slot);
+  return (0, _base.generateUtilityClass)('MuiLoadingButton', slot);
 }
 
-const loadingButtonClasses = (0, _core.generateUtilityClasses)('MuiLoadingButton', ['root', 'loading', 'loadingIndicator', 'loadingIndicatorCenter', 'loadingIndicatorStart', 'loadingIndicatorEnd', 'endIconLoadingEnd', 'startIconLoadingStart']);
+const loadingButtonClasses = (0, _base.generateUtilityClasses)('MuiLoadingButton', ['root', 'loading', 'loadingIndicator', 'loadingIndicatorCenter', 'loadingIndicatorStart', 'loadingIndicatorEnd', 'endIconLoadingEnd', 'startIconLoadingStart']);
 var _default = loadingButtonClasses;
 exports.default = _default;

package/node/Masonry/Masonry.js

@@ -5,38 +5,42 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.style = exports.default = void 0;
+exports.parseToNumber = exports.getStyle = exports.default = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _base = require("@mui/base");
 
-var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
 
 var _system = require("@mui/system");
 
 var _utils = require("@mui/utils");
 
-var _core = require("@mui/core");
+var _clsx = _interopRequireDefault(require("clsx"));
 
-var _styles = require("@mui/material/styles");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _masonryClasses = require("./masonryClasses");
+var React = _interopRequireWildcard(require("react"));
 
-var _MasonryContext = _interopRequireDefault(require("./MasonryContext"));
+var _masonryClasses = require("./masonryClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "className", "component", "columns", "spacing"];
+const _excluded = ["children", "className", "component", "columns", "spacing", "defaultColumns", "defaultHeight", "defaultSpacing"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const parseToNumber = val => {
+  return Number(val.replace('px', ''));
+};
+
+exports.parseToNumber = parseToNumber;
+
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -44,119 +48,272 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _core.unstable_composeClasses)(slots, _masonryClasses.getMasonryUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _masonryClasses.getMasonryUtilityClass, classes);
 };
 
-const style = ({
+const getStyle = ({
   ownerState,
   theme
 }) => {
   let styles = {
-    display: 'grid',
-    gridAutoRows: 0,
-    padding: 0,
-    overflow: 'auto',
     width: '100%',
-    rowGap: 2,
-    boxSizing: 'border-box'
+    display: 'flex',
+    flexFlow: 'column wrap',
+    alignContent: 'space-between',
+    boxSizing: 'border-box',
+    '& > *': {
+      boxSizing: 'border-box'
+    }
   };
-  const base = {};
-  Object.keys(theme.breakpoints.values).forEach(breakpoint => {
-    if (ownerState.spacing[breakpoint] != null) {
-      base[breakpoint] = true;
+  const stylesSSR = {};
+
+  if (ownerState.isSSR) {
+    const orderStyleSSR = {};
+    const defaultSpacing = Number(theme.spacing(ownerState.defaultSpacing).replace('px', ''));
+
+    for (let i = 1; i <= ownerState.defaultColumns; i += 1) {
+      orderStyleSSR[`&:nth-of-type(${ownerState.defaultColumns}n+${i % ownerState.defaultColumns})`] = {
+        order: i
+      };
     }
-  });
+
+    stylesSSR.height = ownerState.defaultHeight;
+    stylesSSR.margin = -(defaultSpacing / 2);
+    stylesSSR['& > *'] = (0, _extends2.default)({}, styles['& > *'], orderStyleSSR, {
+      margin: defaultSpacing / 2,
+      width: `calc(${(100 / ownerState.defaultColumns).toFixed(2)}% - ${defaultSpacing}px)`
+    });
+    return (0, _extends2.default)({}, styles, stylesSSR);
+  }
+
   const spacingValues = (0, _system.unstable_resolveBreakpointValues)({
     values: ownerState.spacing,
-    base
+    breakpoints: theme.breakpoints.values
   });
   const transformer = (0, _system.createUnarySpacing)(theme);
 
   const spacingStyleFromPropValue = propValue => {
-    return {
-      columnGap: (0, _system.getValue)(transformer, propValue)
-    };
+    const themeSpacingValue = Number(propValue);
+    const spacing = Number((0, _system.getValue)(transformer, themeSpacingValue).replace('px', ''));
+    return (0, _extends2.default)({
+      margin: -(spacing / 2),
+      '& > *': {
+        margin: spacing / 2
+      }
+    }, ownerState.maxColumnHeight && {
+      height: Math.ceil(ownerState.maxColumnHeight + spacing)
+    });
   };
 
-  styles = (0, _extends2.default)({}, styles, (0, _system.handleBreakpoints)({
+  styles = (0, _utils.deepmerge)(styles, (0, _system.handleBreakpoints)({
     theme
   }, spacingValues, spacingStyleFromPropValue));
   const columnValues = (0, _system.unstable_resolveBreakpointValues)({
     values: ownerState.columns,
-    base
+    breakpoints: theme.breakpoints.values
   });
 
   const columnStyleFromPropValue = propValue => {
+    const columnValue = Number(propValue);
+    const width = `${(100 / columnValue).toFixed(2)}%`;
+    const spacing = typeof spacingValues !== 'object' ? (0, _system.getValue)(transformer, Number(spacingValues)) : '0px';
     return {
-      gridTemplateColumns: `repeat(${propValue}, 1fr)`
+      '& > *': {
+        width: `calc(${width} - ${spacing})`
+      }
     };
   };
 
   styles = (0, _utils.deepmerge)(styles, (0, _system.handleBreakpoints)({
     theme
-  }, columnValues, columnStyleFromPropValue));
+  }, columnValues, columnStyleFromPropValue)); // configure width for responsive spacing values
+
+  if (typeof spacingValues === 'object') {
+    styles = (0, _utils.deepmerge)(styles, (0, _system.handleBreakpoints)({
+      theme
+    }, spacingValues, (propValue, breakpoint) => {
+      if (breakpoint) {
+        const themeSpacingValue = Number(propValue);
+        const lastBreakpoint = Object.keys(columnValues).pop();
+        const spacing = (0, _system.getValue)(transformer, themeSpacingValue);
+        const column = typeof columnValues === 'object' ? columnValues[breakpoint] || columnValues[lastBreakpoint] : columnValues;
+        const width = `${(100 / column).toFixed(2)}%`;
+        return {
+          '& > *': {
+            width: `calc(${width} - ${spacing})`
+          }
+        };
+      }
+
+      return null;
+    }));
+  }
+
   return styles;
 };
 
-exports.style = style;
+exports.getStyle = getStyle;
 const MasonryRoot = (0, _styles.styled)('div', {
   name: 'MuiMasonry',
   slot: 'Root',
   overridesResolver: (props, styles) => {
     return [styles.root];
   }
-})(style);
+})(getStyle);
 const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiMasonry'
   });
-  const masonryRef = React.useRef();
   const {
     children,
     className,
     component = 'div',
     columns = 4,
-    spacing = 1
+    spacing = 1,
+    defaultColumns,
+    defaultHeight,
+    defaultSpacing
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const masonryRef = React.useRef();
+  const [maxColumnHeight, setMaxColumnHeight] = React.useState();
+  const isSSR = !maxColumnHeight && defaultHeight && defaultColumns !== undefined && defaultSpacing !== undefined;
+  const [numberOfLineBreaks, setNumberOfLineBreaks] = React.useState(isSSR ? defaultColumns - 1 : 0);
   const ownerState = (0, _extends2.default)({}, props, {
     spacing,
-    columns
+    columns,
+    maxColumnHeight,
+    defaultColumns,
+    defaultHeight,
+    defaultSpacing,
+    isSSR
   });
   const classes = useUtilityClasses(ownerState);
-  const contextValue = React.useMemo(() => ({
-    spacing
-  }), [spacing]);
-  let didWarn = false;
-  React.useEffect(() => {
-    // scroller always appears when masonry's height goes beyond 2,000px on Chrome
-    const handleScroll = () => {
-      if (masonryRef.current.clientHeight === 1998 && !didWarn) {
-        console.warn(['MUI: The Masonry can have the maximum height of 2,000px on Chrome browser.', 'Items that go beyond this height fail to be rendered on Chrome browser.', 'You can find more in this open issue: https://github.com/mui-org/material-ui/issues/27934'].join('\n')); // eslint-disable-next-line react-hooks/exhaustive-deps
 
-        didWarn = true;
+  const handleResize = elements => {
+    if (!elements) {
+      return;
+    }
+
+    let masonry;
+    let masonryFirstChild;
+    let parentWidth;
+    let childWidth;
+
+    if (elements[0].target.className.includes(classes.root)) {
+      var _elements$, _masonryFirstChild, _masonryFirstChild$co, _masonryFirstChild2;
+
+      masonry = elements[0].target;
+      parentWidth = elements[0].contentRect.width;
+      masonryFirstChild = ((_elements$ = elements[1]) == null ? void 0 : _elements$.target) || masonry.firstChild;
+      childWidth = ((_masonryFirstChild = masonryFirstChild) == null ? void 0 : (_masonryFirstChild$co = _masonryFirstChild.contentRect) == null ? void 0 : _masonryFirstChild$co.width) || ((_masonryFirstChild2 = masonryFirstChild) == null ? void 0 : _masonryFirstChild2.clientWidth) || 0;
+    } else {
+      var _elements$2, _masonry$contentRect;
+
+      masonryFirstChild = elements[0].target;
+      childWidth = elements[0].contentRect.width;
+      masonry = ((_elements$2 = elements[1]) == null ? void 0 : _elements$2.target) || masonryFirstChild.parentElement;
+      parentWidth = ((_masonry$contentRect = masonry.contentRect) == null ? void 0 : _masonry$contentRect.width) || masonry.clientWidth;
+    }
+
+    if (parentWidth === 0 || childWidth === 0 || !masonry || !masonryFirstChild) {
+      return;
+    }
+
+    const firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
+    const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
+    const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
+    const currentNumberOfColumns = Math.round(parentWidth / (childWidth + firstChildMarginLeft + firstChildMarginRight));
+    const columnHeights = new Array(currentNumberOfColumns).fill(0);
+    let skip = false;
+    masonry.childNodes.forEach(child => {
+      if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
+        return;
       }
-    };
+
+      const childComputedStyle = window.getComputedStyle(child);
+      const childMarginTop = parseToNumber(childComputedStyle.marginTop);
+      const childMarginBottom = parseToNumber(childComputedStyle.marginBottom); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
+
+      const childHeight = parseToNumber(childComputedStyle.height) ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom : 0;
+
+      if (childHeight === 0) {
+        skip = true;
+        return;
+      } // if there is a nested image that isn't rendered yet, masonry's height shouldn't be computed yet
+
+
+      for (let i = 0; i < child.childNodes.length; i += 1) {
+        const nestedChild = child.childNodes[i];
+
+        if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
+          skip = true;
+          break;
+        }
+      }
+
+      if (!skip) {
+        // find the current shortest column (where the current item will be placed)
+        const currentMinColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
+        columnHeights[currentMinColumnIndex] += childHeight;
+        const order = currentMinColumnIndex + 1;
+        child.style.order = order;
+      }
+    });
+
+    if (!skip) {
+      setMaxColumnHeight(Math.max(...columnHeights));
+      const numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
+      setNumberOfLineBreaks(numOfLineBreaks);
+    }
+  };
+
+  const observer = React.useRef(typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(handleResize));
+  React.useEffect(() => {
+    const resizeObserver = observer.current; // IE and old browsers are not supported
+
+    if (resizeObserver === undefined) {
+      return undefined;
+    }
 
     const container = masonryRef.current;
-    container.addEventListener('scroll', handleScroll);
-    return () => {
-      container.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
+
+    if (container && resizeObserver) {
+      // only the masonry container and its first child are observed for resizing;
+      // this might cause unforeseen problems in some use cases;
+      resizeObserver.observe(container);
+
+      if (container.firstChild) {
+        resizeObserver.observe(container.firstChild);
+      }
+    }
+
+    return () => resizeObserver ? resizeObserver.disconnect() : {};
+  }, [columns, spacing, children]);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, masonryRef);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MasonryContext.default.Provider, {
-    value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MasonryRoot, (0, _extends2.default)({
-      as: component,
-      className: (0, _clsx.default)(classes.root, className),
-      ref: handleRef,
-      ownerState: ownerState
-    }, other, {
-      children: children
-    }))
-  });
+  const lineBreakStyle = {
+    flexBasis: '100%',
+    width: 0,
+    margin: 0,
+    padding: 0
+  }; //  columns are likely to have different heights and hence can start to merge;
+  //  a line break at the end of each column prevents columns from merging
+
+  const lineBreaks = new Array(numberOfLineBreaks).fill('').map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    "data-class": "line-break",
+    style: (0, _extends2.default)({}, lineBreakStyle, {
+      order: index + 1
+    })
+  }, index));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MasonryRoot, (0, _extends2.default)({
+    as: component,
+    className: (0, _clsx.default)(classes.root, className),
+    ref: handleRef,
+    ownerState: ownerState
+  }, other, {
+    children: [children, lineBreaks]
+  }));
 });
 process.env.NODE_ENV !== "production" ? Masonry.propTypes
 /* remove-proptypes */
@@ -167,7 +324,7 @@ process.env.NODE_ENV !== "production" ? Masonry.propTypes
   // ----------------------------------------------------------------------
 
   /**
-   * The content of the component. It's recommended to be `<MasonryItem />`s.
+   * The content of the component.
    */
   children: _propTypes.default
   /* @typescript-to-proptypes-ignore */
@@ -195,6 +352,21 @@ process.env.NODE_ENV !== "production" ? Masonry.propTypes
    */
   component: _propTypes.default.elementType,
 
+  /**
+   * The default number of columns of the component. This is provided for server-side rendering.
+   */
+  defaultColumns: _propTypes.default.number,
+
+  /**
+   * The default height of the component in px. This is provided for server-side rendering.
+   */
+  defaultHeight: _propTypes.default.number,
+
+  /**
+   * The default spacing of the component. Like `spacing`, it is a factor of the theme's spacing. This is provided for server-side rendering.
+   */
+  defaultSpacing: _propTypes.default.number,
+
   /**
    * Defines the space between children. It is a factor of the theme's spacing.
    * @default 1
@@ -204,7 +376,7 @@ process.env.NODE_ENV !== "production" ? Masonry.propTypes
   /**
    * Allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = Masonry;
 exports.default = _default;

package/node/Masonry/masonryClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getMasonryUtilityClass = getMasonryUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getMasonryUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiMasonry', slot);
+  return (0, _base.generateUtilityClass)('MuiMasonry', slot);
 }
 
-const masonryClasses = (0, _core.generateUtilityClasses)('MuiMasonry', ['root']);
+const masonryClasses = (0, _base.generateUtilityClasses)('MuiMasonry', ['root']);
 var _default = masonryClasses;
 exports.default = _default;

package/node/MobileDatePicker/MobileDatePicker.js

@@ -177,6 +177,7 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: _propTypes.default.bool,
 
@@ -358,6 +359,7 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: _propTypes.default.bool,
 

package/node/MobileDateRangePicker/MobileDateRangePicker.js

@@ -220,6 +220,7 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: _propTypes.default.bool,
 
@@ -400,6 +401,7 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: _propTypes.default.bool,
 

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -194,6 +194,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: _propTypes.default.bool,
 
@@ -427,6 +428,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: _propTypes.default.bool,