@mui/lab 5.0.0-alpha.53 → 5.0.0-alpha.54

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 ### [Versions](https://mui.com/versions/)
 
+## 5.1.0
+
+<!-- generated comparing v5.0.6..master -->
+
+_Nov 8, 2021_
+
+A big thanks to the 33 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎉 Support custom elements under `ButtonGroup` (#28645) @ZeeshanTamboli
+- 🛠 Add support for arrays in the `sx` prop (#29297) @siriwatknp
+- And many more 🐛 bug fixes and 📚 improvements.
+
+### `@mui/material@5.1.0`
+
+- &#8203;<!-- 68 -->[Autocomplete] Fix `hiddenLabel` prop of `TextField variant={filled}` inside Autocomplete (#29234) @jatinsandilya
+- &#8203;<!-- 67 -->[Box] Support generateClassName and defaultClassName (#29347) @siriwatknp
+- &#8203;<!-- 66 -->[ButtonGroup] Fix variant outlined always has primary color borders on hover (#29487) @ZeeshanTamboli
+- &#8203;<!-- 65 -->[ButtonGroup] Support different elements under ButtonGroup (#28645) @ZeeshanTamboli
+- &#8203;<!-- 62 -->[CssBaseline] Add `enableColorScheme` prop so enable using `color-scheme` property to deal with dark mode (#29454) @alexfauquette
+- &#8203;<!-- 29 -->[FormControlLabel] Narrow the label type (#29324) @michaldudak
+- &#8203;<!-- 28 -->[Grid] Fix usage when columns > 12 (#29196) @tanay123456789
+- &#8203;<!-- 27 -->[InputBase] Do not repeat the same classname (#29353) @hbjORbj
+- &#8203;<!-- 30 -->[InputBase] Remove WebkitAppearance from search type (#29383) @nicbarajas
+- &#8203;<!-- 25 -->[ListItem] Add missing exports (#29571) @robcaldecott
+- &#8203;<!-- 22 -->[Pagination] Allow customization of icons (#29336) @mbeltramin
+- &#8203;<!-- 11 -->[TextField] Fix bootstrap, normalize.css, sanitize.css conflicts (#28674) @ChrisClaude
+- &#8203;<!-- 10 -->[TextField] Fix invisible wrap within notched inputs (#29088) @DASPRiD
+- &#8203;<!-- 09 -->[Tooltip] `open` prop in `componentsProps.popper` can be optional (#29370) @ZeeshanTamboli
+- &#8203;<!-- 08 -->[Tooltip] Fix `className` not getting applied from PopperProps (#29023) @ZeeshanTamboli
+- &#8203;<!-- 07 -->[useRadioGroup] Convert to TypeScript (#29326) @eps1lon
+
+### `@mui/system@5.1.0`
+
+- &#8203;<!-- 21 -->[system] Introduce `mode` to CssVarsProvider (#29418) @siriwatknp
+- &#8203;<!-- 20 -->[system] Improve breakpoints resolver function (#29300) @hbjORbj
+- &#8203;<!-- 19 -->[system] Add array support for `sx` prop (#29297) @siriwatknp
+
+### `@mui/codemod@5.1.0`
+
+- &#8203;<!-- 64 -->[codemod] Add codemod parser flag (#29059) (#29229) @ElonVolo
+
+### `@mui/lab@5.0.0-alpha.54`
+
+- &#8203;<!-- 52 -->[DatePicker] Fix disabled/readOnly for view components (#28815) @adamfitzgibbon
+- &#8203;<!-- 24 -->[Masonry] Fix crash on unmount when using React 18 (#29358) @eps1lon
+- &#8203;<!-- 23 -->[Masonry] Improve height computation and detect changes in `children` (#29351) @hbjORbj
+
+### `@mui/joy@5.0.0-alpha.0`
+
+- &#8203;<!-- 28 -->[Joy] Update default theme (#29478) @siriwatknp
+- &#8203;<!-- 26 -->[Joy] Export CssVarsProvider with default theme (#29150) @siriwatknp
+- &#8203;<!-- 25 -->[Joy] Remove `private` to leverage CodeSandbox (#29280) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 51 -->[docs] Add differences between styled and sx (#28685) @eric-burel
+- &#8203;<!-- 50 -->[docs] Track usage of dark mode in Google Analytics (#29419) @oliviertassinari
+- &#8203;<!-- 49 -->[docs] Remove create-mui-theme as it is no longer working (#29472) @IPJT
+- &#8203;<!-- 48 -->[docs] Fix warnings in AppSearch (#29459) @eps1lon
+- &#8203;<!-- 47 -->[docs] Add framework example for ClassNameGenerator (#29453) @siriwatknp
+- &#8203;<!-- 46 -->[docs] Fix layout shift when scrolling (#29436) @oliviertassinari
+- &#8203;<!-- 45 -->[docs] Fix layout-shift on id='main-content' (#29425) @oliviertassinari
+- &#8203;<!-- 44 -->[docs] Remove usage of `process.browser` (#29438) @oliviertassinari
+- &#8203;<!-- 43 -->[docs] Add instruction on how to use the child selector API with emotion (#29350) @mnajdova
+- &#8203;<!-- 42 -->[docs] Fix small typos (#29424) @oliviertassinari
+- &#8203;<!-- 41 -->[docs] Fix TOC highlighting logic (#29435) @oliviertassinari
+- &#8203;<!-- 40 -->[docs] Fix about page flags (#29314) @mbrookes
+- &#8203;<!-- 39 -->[docs] Fix Box JS docs (#29282) @Pablion
+- &#8203;<!-- 38 -->[docs] Update storybook section in migration to v5 docs (#28800) @siriwatknp
+- &#8203;<!-- 37 -->[docs] Document how to enable color on dark mode (#29340) @Wimukti
+- &#8203;<!-- 36 -->[docs] Display search functionality in all viewports (#28819) @eps1lon
+- &#8203;<!-- 35 -->[docs] Query heading for ToC on demand (#29204) @eps1lon
+- &#8203;<!-- 34 -->[docs] Add next.js styled-component guide and update links to example (#29118) @Jareechang
+- &#8203;<!-- 33 -->[docs] Fix overriding `MuiTextField`'s default props in the migration guide (#29174) @tm1000
+- &#8203;<!-- 32 -->[docs] Fix "clickable" and "deletable" typos (#28702) @jacklaurencegaray
+- &#8203;<!-- 31 -->[docs] Update migration-v4 docs for wrong import path (#29042) @busches
+- &#8203;<!-- 30 -->[docs] Add GitHub icon change to "Migration from v4 to v5" guide (#29182) @dan-mba
+- &#8203;<!-- 06 -->[website] Benny Joo joining MUI (#29499) @mnajdova
+- &#8203;<!-- 05 -->[website] Update the `Print export` feature info on the pricing page (#29484) @DanailH
+- &#8203;<!-- 04 -->[website] Improve the dev rel role description (#29477) @oliviertassinari
+- &#8203;<!-- 03 -->[website] Add customers section on Design Kits and Templates marketing pages (#29168) @danilo-leal
+- &#8203;<!-- 02 -->[website] Improvements to the /core product page @danilo-leal
+- &#8203;<!-- 01 -->[website] Fix typo on the About Page (#29286) @gssakash
+
+### Core
+
+- &#8203;<!-- 63 -->[core] Handle RecordType and FieldType in generatePropDescription.ts (#29467) @flaviendelangle
+- &#8203;<!-- 61 -->[core] Convert a named color to lowercase (#29465) @ainatenhi
+- &#8203;<!-- 60 -->[core] Allow to reuse functions from `docs:api` (#28828) @m4theushw
+- &#8203;<!-- 59 -->[core] Commit new nextjs 12 tsconfig (#29458) @eps1lon
+- &#8203;<!-- 58 -->[core] Settle on MUI X for the official name (#29420) @oliviertassinari
+- &#8203;<!-- 57 -->[core] Add mui as a npm keyword (#29427) @oliviertassinari
+- &#8203;<!-- 56 -->[core] Fix issue template redirection (#29432) @oliviertassinari
+- &#8203;<!-- 55 -->[core] Remove unecessary destructuration (#29354) @oliviertassinari
+- &#8203;<!-- 54 -->[core] Use cross-env to set env variables in material-icons scripts (#29327) @michaldudak
+- &#8203;<!-- 53 -->[core] Don't bump peer dependency ranges on dependency updates (#29303) @eps1lon
+- &#8203;<!-- 18 -->[test] Fix browser tests (#29505) @eps1lon
+- &#8203;<!-- 69 -->[test] Fix missing act warnings in latest React 18 alpha (#29357) @eps1lon
+- &#8203;<!-- 17 -->[test] Replace `createClientRender` with new `createRenderer` API (#29471) @eps1lon
+- &#8203;<!-- 16 -->[test] Fix possible "missing act" warning (#29463) @eps1lon
+- &#8203;<!-- 15 -->[test] Remove render#baseElement (#29462) @eps1lon
+- &#8203;<!-- 14 -->[test] Expose `AbortController` on global (#29360) @eps1lon
+- &#8203;<!-- 13 -->[test] Add internal test for uniqe `name` in `Rating` (#29329) @eps1lon
+- &#8203;<!-- 12 -->[test] Fix browser tests (#29305) @eps1lon
+
+All contributors of this release in alphabetical order: @adamfitzgibbon, @ainatenhi, @alexfauquette, @busches, @ChrisClaude, @dan-mba, @DanailH, @danilo-leal, @DASPRiD, @ElonVolo, @eps1lon, @eric-burel, @flaviendelangle, @gssakash, @hbjORbj, @IPJT, @jacklaurencegaray, @Jareechang, @jatinsandilya, @m4theushw, @mbeltramin, @mbrookes, @michaldudak, @mnajdova, @nicbarajas, @oliviertassinari, @Pablion, @robcaldecott, @siriwatknp, @tanay123456789, @tm1000, @Wimukti, @ZeeshanTamboli
+
 ## 5.0.6
 
 <!-- generated comparing v5.0.5..master -->

package/CalendarPicker/CalendarPicker.d.ts

@@ -18,6 +18,11 @@ export interface CalendarPickerProps<TDate> extends ExportedCalendarProps<TDate>
      * Default calendar month displayed when `value={null}`.
      */
     defaultCalendarMonth?: TDate;
+    /**
+     * If `true`, the picker and text field are disabled.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * @default false
      */
@@ -51,6 +56,11 @@ export interface CalendarPickerProps<TDate> extends ExportedCalendarProps<TDate>
      * @default 'day'
      */
     openTo?: CalendarPickerView;
+    /**
+     * Make picker read only.
+     * @default false
+     */
+    readOnly?: boolean;
     /**
      * Disable heavy animations.
      * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)

package/CalendarPicker/CalendarPicker.js

@@ -230,6 +230,12 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes
    */
   defaultCalendarMonth: PropTypes.any,
 
+  /**
+   * If `true`, the picker and text field are disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+
   /**
    * @default false
    */
@@ -278,6 +284,12 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes
    */
   openTo: PropTypes.oneOf(['day', 'month', 'year']),
 
+  /**
+   * Make picker read only.
+   * @default false
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Disable heavy animations.
    * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)

package/CalendarPicker/PickersCalendar.d.ts

@@ -29,11 +29,13 @@ export interface PickersCalendarProps<TDate> extends ExportedCalendarProps<TDate
     className?: string;
     currentMonth: TDate;
     date: TDate | [TDate | null, TDate | null] | null;
+    disabled?: boolean;
     focusedDay: TDate | null;
     isDateDisabled: (day: TDate) => boolean;
     isMonthSwitchingAnimating: boolean;
     onFocusedDayChange: (newFocusedDay: TDate) => void;
     onMonthSwitchingAnimationEnd: () => void;
+    readOnly?: boolean;
     reduceAnimations: boolean;
     slideDirection: SlideDirection;
     TransitionProps?: Partial<SlideTransitionProps>;

package/CalendarPicker/PickersCalendar.js

@@ -70,6 +70,7 @@ function PickersCalendar(props) {
     className,
     currentMonth,
     date,
+    disabled,
     disableHighlightToday,
     focusedDay,
     isDateDisabled,
@@ -77,6 +78,7 @@ function PickersCalendar(props) {
     loading,
     onChange,
     onMonthSwitchingAnimationEnd,
+    readOnly,
     reduceAnimations,
     renderDay,
     renderLoading = () => _span || (_span = /*#__PURE__*/_jsx("span", {
@@ -89,10 +91,14 @@ function PickersCalendar(props) {
   const now = useNow();
   const utils = useUtils();
   const handleDaySelect = React.useCallback((day, isFinish = 'finish') => {
-    // TODO possibly buggy line figure out and add tests
+    if (readOnly) {
+      return;
+    } // TODO possibly buggy line figure out and add tests
+
+
     const finalDate = Array.isArray(date) ? day : utils.mergeDateAndTime(day, date || now);
     onChange(finalDate, isFinish);
-  }, [date, now, onChange, utils]);
+  }, [date, now, onChange, readOnly, utils]);
   const currentMonthNumber = utils.getMonth(currentMonth);
   const selectedDates = (Array.isArray(date) ? date : [date]).filter(Boolean).map(selectedDateItem => selectedDateItem && utils.startOfDay(selectedDateItem)); // need a new ref whenever the `key` of the transition changes: https://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef.
 
@@ -126,7 +132,7 @@ function PickersCalendar(props) {
               key: day == null ? void 0 : day.toString(),
               day,
               isAnimating: isMonthSwitchingAnimating,
-              disabled: isDateDisabled(day),
+              disabled: disabled || isDateDisabled(day),
               allowSameDateSelection,
               autoFocus: autoFocus && focusedDay !== null && utils.isSameDay(day, focusedDay),
               today: utils.isSameDay(day, now),

package/CalendarPicker/PickersCalendarHeader.d.ts

@@ -25,6 +25,7 @@ export interface PickersCalendarHeaderProps<TDate> extends ExportedArrowSwitcher
         switchViewButton?: React.ComponentPropsWithRef<typeof IconButton> & PickersCalendarHeaderComponentsPropsOverides;
     };
     currentMonth: TDate;
+    disabled?: boolean;
     views: readonly CalendarPickerView[];
     /**
      * Get aria-label text for switching between views button.

package/CalendarPicker/PickersCalendarHeader.js

@@ -74,6 +74,7 @@ function PickersCalendarHeader(props) {
     components = {},
     componentsProps = {},
     currentMonth: month,
+    disabled,
     disableFuture,
     disablePast,
     getViewSwitchingButtonText = getSwitchingViewAriaText,
@@ -95,16 +96,16 @@ function PickersCalendarHeader(props) {
   const selectPreviousMonth = () => onMonthChange(utils.getPreviousMonth(month), 'right');
 
   const isNextMonthDisabled = useNextMonthDisabled(month, {
-    disableFuture,
+    disableFuture: disableFuture || disabled,
     maxDate
   });
   const isPreviousMonthDisabled = usePreviousMonthDisabled(month, {
-    disablePast,
+    disablePast: disablePast || disabled,
     minDate
   });
 
   const handleToggleView = () => {
-    if (views.length === 1 || !onViewChange) {
+    if (views.length === 1 || !onViewChange || disabled) {
       return;
     }
 
@@ -145,7 +146,7 @@ function PickersCalendarHeader(props) {
           ownerState: ownerState,
           children: utils.format(month, 'year')
         })
-      }), views.length > 1 && /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewButton, _extends({
+      }), views.length > 1 && !disabled && /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewButton, _extends({
         size: "small",
         as: components.SwitchViewButton,
         "aria-label": getViewSwitchingButtonText(currentView)

package/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -144,6 +144,6 @@ process.env.NODE_ENV !== "production" ? CalendarPickerSkeleton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default CalendarPickerSkeleton;

package/DatePicker/DatePicker.js

@@ -155,6 +155,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -346,6 +347,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/DateRangePicker/DateRangePicker.js

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

package/DateRangePickerDay/DateRangePickerDay.js

@@ -228,7 +228,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDay.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 /**
  *

package/DateTimePicker/DateTimePicker.js

@@ -172,6 +172,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -415,6 +416,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/DesktopDatePicker/DesktopDatePicker.js

@@ -134,6 +134,7 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -319,6 +320,7 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -181,6 +181,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -365,6 +366,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -149,6 +149,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -386,6 +387,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/LICENSE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2014 Call-Em-All
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+The MIT License (MIT)
+
+Copyright (c) 2014 Call-Em-All
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LoadingButton/LoadingButton.js

@@ -213,6 +213,6 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default LoadingButton;

package/Masonry/Masonry.js

@@ -11,6 +11,9 @@ import * as React from 'react';
 import { getMasonryUtilityClass } from './masonryClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const parseToNumber = val => {
+  return Number(val.replace('px', ''));
+};
 
 const useUtilityClasses = ownerState => {
   const {
@@ -20,44 +23,6 @@ const useUtilityClasses = ownerState => {
     root: ['root']
   };
   return composeClasses(slots, getMasonryUtilityClass, classes);
-}; // compute base for responsive values; e.g.,
-// [1,2,3] => {xs: true, sm: true, md: true}
-// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
-
-
-const computeBreakpointsBase = (breakpoints, prop) => {
-  const base = {};
-
-  if (Array.isArray(prop)) {
-    Object.keys(breakpoints.values).forEach((breakpoint, i, arr) => {
-      if (i < arr.length) {
-        base[breakpoint] = true;
-      }
-    });
-  } else {
-    Object.keys(breakpoints.values).forEach(breakpoint => {
-      if (prop[breakpoint] != null) {
-        base[breakpoint] = true;
-      }
-    });
-  }
-
-  return base;
-}; // if prop is an array, convert to object; e.g.,
-// (base: {xs: true, sm: true, md: true}, prop: [1,2,3]) => {xs: 1, sm: 2, md: 3}
-
-
-const validatePropValues = (base, prop) => {
-  const values = {};
-
-  if (Array.isArray(prop)) {
-    Object.keys(base).forEach((breakpoint, i) => {
-      values[breakpoint] = prop[i];
-    });
-    return values;
-  }
-
-  return prop;
 };
 
 export const getStyle = ({
@@ -95,10 +60,9 @@ export const getStyle = ({
     return _extends({}, styles, stylesSSR);
   }
 
-  const spacingBreakpointsBase = computeBreakpointsBase(theme.breakpoints, ownerState.spacing);
   const spacingValues = resolveBreakpointValues({
-    values: validatePropValues(spacingBreakpointsBase, ownerState.spacing),
-    base: spacingBreakpointsBase
+    values: ownerState.spacing,
+    breakpoints: theme.breakpoints.values
   });
   const transformer = createUnarySpacing(theme);
 
@@ -118,10 +82,9 @@ export const getStyle = ({
   styles = deepmerge(styles, handleBreakpoints({
     theme
   }, spacingValues, spacingStyleFromPropValue));
-  const columnBreakpointsBase = computeBreakpointsBase(theme.breakpoints, ownerState.columns);
   const columnValues = resolveBreakpointValues({
-    values: validatePropValues(columnBreakpointsBase, ownerState.columns),
-    base: columnBreakpointsBase
+    values: ownerState.columns,
+    breakpoints: theme.breakpoints.values
   });
 
   const columnStyleFromPropValue = propValue => {
@@ -208,8 +171,8 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
       const parentWidth = masonryRef.current.clientWidth;
       const childWidth = masonryRef.current.firstChild.clientWidth;
       const firstChildComputedStyle = window.getComputedStyle(masonryRef.current.firstChild);
-      const firstChildMarginLeft = Number(firstChildComputedStyle.marginLeft.replace('px', ''));
-      const firstChildMarginRight = Number(firstChildComputedStyle.marginRight.replace('px', ''));
+      const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
+      const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
 
       if (parentWidth === 0 || childWidth === 0) {
         return;
@@ -224,10 +187,10 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
         }
 
         const childComputedStyle = window.getComputedStyle(child);
-        const childMarginTop = Number(childComputedStyle.marginTop.replace('px', ''));
-        const childMarginBottom = Number(childComputedStyle.marginBottom.replace('px', '')); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
+        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 = child.clientHeight ? Math.ceil(child.clientHeight) + childMarginTop + childMarginBottom : 0;
+        const childHeight = parseToNumber(childComputedStyle.height) ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom : 0;
 
         if (childHeight === 0) {
           skip = true;
@@ -262,7 +225,7 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
 
 
     if (typeof ResizeObserver === 'undefined') {
-      return null;
+      return undefined;
     }
 
     const resizeObserver = new ResizeObserver(handleResize);
@@ -281,7 +244,7 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     return () => {
       resizeObserver.disconnect();
     };
-  }, [columns, spacing]);
+  }, [columns, spacing, children]);
   const handleRef = useForkRef(ref, masonryRef);
   const lineBreakStyle = {
     flexBasis: '100%',
@@ -367,6 +330,6 @@ process.env.NODE_ENV !== "production" ? Masonry.propTypes
   /**
    * Allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Masonry;

package/MobileDatePicker/MobileDatePicker.js

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

package/MobileDateRangePicker/MobileDateRangePicker.js

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

package/MobileDateTimePicker/MobileDateTimePicker.js

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

package/MonthPicker/MonthPicker.d.ts

@@ -16,6 +16,8 @@ export interface MonthPickerProps<TDate> {
     };
     /** Date value for the MonthPicker */
     date: TDate | null;
+    /** If `true` picker is disabled */
+    disabled?: boolean;
     /** If `true` past days are disabled. */
     disablePast?: boolean | null;
     /** If `true` future days are disabled. */
@@ -27,6 +29,8 @@ export interface MonthPickerProps<TDate> {
     /** Callback fired on date change. */
     onChange: PickerOnChangeFn<TDate>;
     onMonthChange?: (date: TDate) => void | Promise<void>;
+    /** If `true` picker is readonly */
+    readOnly?: boolean;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */