@mui/lab 5.0.0-alpha.86 → 5.0.0-alpha.87

package/TimelineSeparator/timelineSeparatorClasses.d.ts

@@ -1,8 +1,8 @@
-export interface TimelineSeparatorClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export declare type TimelineSeparatorClassKey = keyof TimelineSeparatorClasses;
-export declare function getTimelineSeparatorUtilityClass(slot: string): string;
-declare const timelineSeparatorClasses: TimelineSeparatorClasses;
-export default timelineSeparatorClasses;
+export interface TimelineSeparatorClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare type TimelineSeparatorClassKey = keyof TimelineSeparatorClasses;
+export declare function getTimelineSeparatorUtilityClass(slot: string): string;
+declare const timelineSeparatorClasses: TimelineSeparatorClasses;
+export default timelineSeparatorClasses;

package/TreeItem/treeItemClasses.d.ts

@@ -1,24 +1,24 @@
-export interface TreeItemClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the transition component. */
-    group: string;
-    /** Styles applied to the content element. */
-    content: string;
-    /** State class applied to the content element when expanded. */
-    expanded: string;
-    /** State class applied to the content element when selected. */
-    selected: string;
-    /** State class applied to the content element when focused. */
-    focused: string;
-    /** State class applied to the element when disabled. */
-    disabled: string;
-    /** Styles applied to the tree node icon. */
-    iconContainer: string;
-    /** Styles applied to the label element. */
-    label: string;
-}
-export declare type TreeItemClassKey = keyof TreeItemClasses;
-export declare function getTreeItemUtilityClass(slot: string): string;
-declare const treeItemClasses: TreeItemClasses;
-export default treeItemClasses;
+export interface TreeItemClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the transition component. */
+    group: string;
+    /** Styles applied to the content element. */
+    content: string;
+    /** State class applied to the content element when expanded. */
+    expanded: string;
+    /** State class applied to the content element when selected. */
+    selected: string;
+    /** State class applied to the content element when focused. */
+    focused: string;
+    /** State class applied to the element when disabled. */
+    disabled: string;
+    /** Styles applied to the tree node icon. */
+    iconContainer: string;
+    /** Styles applied to the label element. */
+    label: string;
+}
+export declare type TreeItemClassKey = keyof TreeItemClasses;
+export declare function getTreeItemUtilityClass(slot: string): string;
+declare const treeItemClasses: TreeItemClasses;
+export default treeItemClasses;

package/TreeView/treeViewClasses.d.ts

@@ -1,8 +1,8 @@
-export interface TreeViewClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export declare type TreeViewClassKey = keyof TreeViewClasses;
-export declare function getTreeViewUtilityClass(slot: string): string;
-declare const treeViewClasses: TreeViewClasses;
-export default treeViewClasses;
+export interface TreeViewClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare type TreeViewClassKey = keyof TreeViewClasses;
+export declare function getTreeViewUtilityClass(slot: string): string;
+declare const treeViewClasses: TreeViewClasses;
+export default treeViewClasses;

package/YearPicker/YearPicker.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { YearPickerProps } from '@mui/x-date-pickers/YearPicker';
-declare type YearPickerComponent = (<TDate>(props: YearPickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
-    propTypes?: any;
-};
-/**
- * @ignore - do not document.
- */
-declare const YearPicker: YearPickerComponent;
-export default YearPicker;
+import * as React from 'react';
+import { YearPickerProps } from '@mui/x-date-pickers/YearPicker';
+declare type YearPickerComponent = (<TDate>(props: YearPickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+    propTypes?: any;
+};
+/**
+ * @ignore - do not document.
+ */
+declare const YearPicker: YearPickerComponent;
+export default YearPicker;

package/YearPicker/index.d.ts

@@ -1,2 +1,2 @@
-export { YearPicker as default, yearPickerClasses, getYearPickerUtilityClass, } from '@mui/x-date-pickers/YearPicker';
-export type { YearPickerProps, YearPickerClasses, YearPickerClassKey, } from '@mui/x-date-pickers/YearPicker';
+export { YearPicker as default, yearPickerClasses, getYearPickerUtilityClass, } from '@mui/x-date-pickers/YearPicker';
+export type { YearPickerProps, YearPickerClasses, YearPickerClassKey, } from '@mui/x-date-pickers/YearPicker';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-alpha.86
+/** @license MUI v5.0.0-alpha.87
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internal/svg-icons/ArrowDropDown.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/ArrowLeft.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/ArrowRight.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/Calendar.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/Clock.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/DateRange.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/Pen.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/Time.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/legacy/Masonry/Masonry.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { flushSync } from 'react-dom';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { createUnarySpacing, getValue, handleBreakpoints, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
 import { deepmerge, unstable_useForkRef as useForkRef } from '@mui/utils';
@@ -235,9 +236,13 @@ var Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     });
 
     if (!skip) {
-      setMaxColumnHeight(Math.max.apply(Math, _toConsumableArray(columnHeights)));
-      var numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
-      setNumberOfLineBreaks(numOfLineBreaks);
+      // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+      // Related issue - https://github.com/facebook/react/issues/24331
+      flushSync(function () {
+        setMaxColumnHeight(Math.max.apply(Math, _toConsumableArray(columnHeights)));
+        setNumberOfLineBreaks(currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0);
+      });
     }
   };
 

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-alpha.86
+/** @license MUI v5.0.0-alpha.87
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/Masonry/Masonry.js

@@ -2,6 +2,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["children", "className", "component", "columns", "spacing", "defaultColumns", "defaultHeight", "defaultSpacing"];
 import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { flushSync } from 'react-dom';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { createUnarySpacing, getValue, handleBreakpoints, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
 import { deepmerge, unstable_useForkRef as useForkRef } from '@mui/utils';
@@ -229,9 +230,13 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     });
 
     if (!skip) {
-      setMaxColumnHeight(Math.max(...columnHeights));
-      const numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
-      setNumberOfLineBreaks(numOfLineBreaks);
+      // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+      // Related issue - https://github.com/facebook/react/issues/24331
+      flushSync(() => {
+        setMaxColumnHeight(Math.max(...columnHeights));
+        setNumberOfLineBreaks(currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0);
+      });
     }
   };
 

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-alpha.86
+/** @license MUI v5.0.0-alpha.87
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/Masonry/Masonry.js

@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _base = require("@mui/base");
 
+var _reactDom = require("react-dom");
+
 var _styles = require("@mui/material/styles");
 
 var _system = require("@mui/system");
@@ -253,9 +255,13 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     });
 
     if (!skip) {
-      setMaxColumnHeight(Math.max(...columnHeights));
-      const numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
-      setNumberOfLineBreaks(numOfLineBreaks);
+      // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+      // Related issue - https://github.com/facebook/react/issues/24331
+      (0, _reactDom.flushSync)(() => {
+        setMaxColumnHeight(Math.max(...columnHeights));
+        setNumberOfLineBreaks(currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0);
+      });
     }
   };
 

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-alpha.86
+/** @license MUI v5.0.0-alpha.87
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/lab",
-  "version": "5.0.0-alpha.86",
+  "version": "5.0.0-alpha.87",
   "private": false,
   "author": "MUI Team",
   "description": "Laboratory for new MUI modules.",
@@ -64,8 +64,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.85",
-    "@mui/system": "^5.8.4",
+    "@mui/base": "5.0.0-alpha.86",
+    "@mui/system": "^5.8.5",
     "@mui/utils": "^5.8.4",
     "@mui/x-date-pickers": "5.0.0-alpha.1",
     "clsx": "^1.1.1",