@mui/lab 5.0.0-alpha.99 → 6.0.0-alpha.0

package/Masonry/Masonry.js

@@ -1,17 +1,18 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "columns", "spacing", "defaultColumns", "defaultHeight", "defaultSpacing"];
+const _excluded = ["children", "className", "component", "columns", "spacing", "sequential", "defaultColumns", "defaultHeight", "defaultSpacing"];
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { flushSync } from 'react-dom';
+import * as ReactDOM 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';
+import { deepmerge, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const parseToNumber = val => {
   return Number(val.replace('px', ''));
 };
@@ -21,7 +22,6 @@ const lineBreakStyle = {
   margin: 0,
   padding: 0
 };
-
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -31,7 +31,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getMasonryUtilityClass, classes);
 };
-
 export const getStyle = ({
   ownerState,
   theme
@@ -46,18 +45,16 @@ export const getStyle = ({
       boxSizing: 'border-box'
     }
   };
-  const stylesSSR = {}; // Only applicable for Server-Side Rendering
-
+  const stylesSSR = {};
+  // Only applicable for Server-Side Rendering
   if (ownerState.isSSR) {
     const orderStyleSSR = {};
     const defaultSpacing = parseToNumber(theme.spacing(ownerState.defaultSpacing));
-
     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['& > *'] = _extends({}, styles['& > *'], orderStyleSSR, {
@@ -66,23 +63,20 @@ export const getStyle = ({
     });
     return _extends({}, styles, stylesSSR);
   }
-
   const spacingValues = resolveBreakpointValues({
     values: ownerState.spacing,
     breakpoints: theme.breakpoints.values
   });
   const transformer = createUnarySpacing(theme);
-
   const spacingStyleFromPropValue = propValue => {
-    let spacing; // in case of string/number value
-
+    let spacing;
+    // in case of string/number value
     if (typeof propValue === 'string' && !Number.isNaN(Number(propValue)) || typeof propValue === 'number') {
       const themeSpacingValue = Number(propValue);
       spacing = getValue(transformer, themeSpacingValue);
     } else {
       spacing = propValue;
     }
-
     return _extends({
       margin: `calc(0px - (${spacing} / 2))`,
       '& > *': {
@@ -92,7 +86,6 @@ export const getStyle = ({
       height: typeof spacing === 'number' ? Math.ceil(ownerState.maxColumnHeight + parseToNumber(spacing)) : `calc(${ownerState.maxColumnHeight}px + ${spacing})`
     });
   };
-
   styles = deepmerge(styles, handleBreakpoints({
     theme
   }, spacingValues, spacingStyleFromPropValue));
@@ -100,7 +93,6 @@ export const getStyle = ({
     values: ownerState.columns,
     breakpoints: theme.breakpoints.values
   });
-
   const columnStyleFromPropValue = propValue => {
     const columnValue = Number(propValue);
     const width = `${(100 / columnValue).toFixed(2)}%`;
@@ -111,11 +103,11 @@ export const getStyle = ({
       }
     };
   };
-
   styles = deepmerge(styles, handleBreakpoints({
     theme
-  }, columnValues, columnStyleFromPropValue)); // configure width for responsive spacing values
+  }, columnValues, columnStyleFromPropValue));
 
+  // configure width for responsive spacing values
   if (typeof spacingValues === 'object') {
     styles = deepmerge(styles, handleBreakpoints({
       theme
@@ -132,11 +124,9 @@ export const getStyle = ({
           }
         };
       }
-
       return null;
     }));
   }
-
   return styles;
 };
 const MasonryRoot = styled('div', {
@@ -151,24 +141,22 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     props: inProps,
     name: 'MuiMasonry'
   });
-
   const {
-    children,
-    className,
-    component = 'div',
-    columns = 4,
-    spacing = 1,
-    defaultColumns,
-    defaultHeight,
-    defaultSpacing
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      children,
+      className,
+      component = 'div',
+      columns = 4,
+      spacing = 1,
+      sequential = false,
+      defaultColumns,
+      defaultHeight,
+      defaultSpacing
+    } = props,
+    other = _objectWithoutPropertiesLoose(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 = _extends({}, props, {
     spacing,
     columns,
@@ -178,94 +166,101 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     defaultSpacing,
     isSSR
   });
-
   const classes = useUtilityClasses(ownerState);
-
-  const handleResize = masonryChildren => {
+  const handleResize = React.useCallback(masonryChildren => {
     if (!masonryRef.current || !masonryChildren || masonryChildren.length === 0) {
       return;
     }
-
     const masonry = masonryRef.current;
     const masonryFirstChild = masonryRef.current.firstChild;
     const parentWidth = masonry.clientWidth;
     const firstChildWidth = masonryFirstChild.clientWidth;
-
     if (parentWidth === 0 || firstChildWidth === 0) {
       return;
     }
-
     const firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
     const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
     const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
     const currentNumberOfColumns = Math.round(parentWidth / (firstChildWidth + firstChildMarginLeft + firstChildMarginRight));
     const columnHeights = new Array(currentNumberOfColumns).fill(0);
     let skip = false;
+    let nextOrder = 1;
     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 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
-
-
+      }
+      // 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 (sequential) {
+          columnHeights[nextOrder - 1] += childHeight;
+          child.style.order = nextOrder;
+          nextOrder += 1;
+          if (nextOrder > currentNumberOfColumns) {
+            nextOrder = 1;
+          }
+        } else {
+          // 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) {
       // 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(() => {
+      ReactDOM.flushSync(() => {
         setMaxColumnHeight(Math.max(...columnHeights));
         setNumberOfLineBreaks(currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0);
       });
     }
-  };
-
-  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) {
+  }, [sequential]);
+  useEnhancedEffect(() => {
+    // IE and old browsers are not supported
+    if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
-
+    let animationFrame;
+    const resizeObserver = new ResizeObserver(() => {
+      // see https://github.com/mui/material-ui/issues/36909
+      animationFrame = requestAnimationFrame(handleResize);
+    });
     if (masonryRef.current) {
       masonryRef.current.childNodes.forEach(childNode => {
         resizeObserver.observe(childNode);
       });
     }
+    return () => {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [columns, spacing, children, handleResize]);
+  const handleRef = useForkRef(ref, masonryRef);
 
-    return () => resizeObserver ? resizeObserver.disconnect() : {};
-  }, [columns, spacing, children]);
-  const handleRef = useForkRef(ref, masonryRef); //  columns are likely to have different heights and hence can start to merge;
+  //  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__*/_jsx("span", {
     "data-class": "line-break",
     style: _extends({}, lineBreakStyle, {
@@ -281,64 +276,55 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     children: [children, lineBreaks]
   }));
 });
-process.env.NODE_ENV !== "production" ? Masonry.propTypes
-/* remove-proptypes */
-= {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-
+process.env.NODE_ENV !== "production" ? Masonry.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */
-  children: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .node.isRequired,
-
+  children: PropTypes /* @typescript-to-proptypes-ignore */.node.isRequired,
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * Number of columns.
    * @default 4
    */
   columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-
   /**
    * The default number of columns of the component. This is provided for server-side rendering.
    */
   defaultColumns: PropTypes.number,
-
   /**
    * The default height of the component in px. This is provided for server-side rendering.
    */
   defaultHeight: PropTypes.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.number,
-
+  /**
+   * Allows using sequential order rather than adding to shortest column
+   * @default false
+   */
+  sequential: PropTypes.bool,
   /**
    * Defines the space between children. It is a factor of the theme's spacing.
    * @default 1
    */
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
-
   /**
    * Allows defining system overrides as well as additional CSS styles.
    */

package/Masonry/masonryClasses.d.ts

@@ -2,7 +2,7 @@ export interface MasonryClasses {
     /** Styles applied to the root element. */
     root: string;
 }
-export declare type MasonryClassKey = keyof MasonryClasses;
+export type MasonryClassKey = keyof MasonryClasses;
 export declare function getMasonryUtilityClass(slot: string): string;
 declare const masonryClasses: MasonryClasses;
 export default masonryClasses;

package/Masonry/masonryClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getMasonryUtilityClass(slot) {
   return generateUtilityClass('MuiMasonry', slot);
 }

package/MobileDatePicker/MobileDatePicker.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-declare type MobileDatePickerComponent = (<TDate>(props: MobileDatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type MobileDatePickerComponent = (<TDate>(props: MobileDatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };
 /**
+ * @deprecated The MobileDatePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
  * @ignore - do not document.
  */
 declare const MobileDatePicker: MobileDatePickerComponent;
 export default MobileDatePicker;
-export declare type MobileDatePickerProps<TDate> = Record<any, any>;
+export type MobileDatePickerProps<TDate> = Record<any, any>;

package/MobileDatePicker/MobileDatePicker.js

@@ -1,15 +1,16 @@
+'use client';
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 let warnedOnce = false;
-
 const warn = () => {
   if (!warnedOnce) {
     console.warn(['MUI: The MobileDatePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`.', '', "You should use `import { MobileDatePicker } from '@mui/x-date-pickers'`", "or `import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker'`", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\n'));
     warnedOnce = true;
   }
 };
-
 /**
+ * @deprecated The MobileDatePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
  * @ignore - do not document.
  */
 const MobileDatePicker = /*#__PURE__*/React.forwardRef(function DeprecatedMobileDatePicker(props, ref) {

package/MobileDateRangePicker/MobileDateRangePicker.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-declare type MobileDateRangePickerComponent = (<TDate>(props: MobileDateRangePickerProps & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type MobileDateRangePickerComponent = (<TDate>(props: MobileDateRangePickerProps & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };
 /**
+ * @deprecated The MobileDateRangePicker component was moved from `@mui/lab` to `@mui/x-date-pickers-pro`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
  * @ignore - do not document.
  */
 declare const MobileDateRangePicker: MobileDateRangePickerComponent;
 export default MobileDateRangePicker;
-export declare type MobileDateRangePickerProps = Record<any, any>;
+export type MobileDateRangePickerProps = Record<any, any>;

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -1,15 +1,14 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 let warnedOnce = false;
-
 const warn = () => {
   if (!warnedOnce) {
     console.warn(['MUI: The MobileDateRangePicker component was moved from `@mui/lab` to `@mui/x-date-pickers-pro`', '', "You should use `import { MobileDateRangePicker } from '@mui/x-date-pickers-pro'`", "or `import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker'`", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\n'));
     warnedOnce = true;
   }
 };
-
 /**
+ * @deprecated The MobileDateRangePicker component was moved from `@mui/lab` to `@mui/x-date-pickers-pro`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
  * @ignore - do not document.
  */
 const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function DeprecatedMobileDateRangePicker() {

package/MobileDateTimePicker/MobileDateTimePicker.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-declare type MobileDateTimePickerComponent = (<TDate>(props: MobileDateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type MobileDateTimePickerComponent = (<TDate>(props: MobileDateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };
 /**
+ * @deprecated The MobileDateTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
  * @ignore - do not document.
  */
 declare const MobileDateTimePicker: MobileDateTimePickerComponent;
 export default MobileDateTimePicker;
-export declare type MobileDateTimePickerProps<TDate> = Record<any, any>;
+export type MobileDateTimePickerProps<TDate> = Record<any, any>;

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -1,15 +1,16 @@
+'use client';
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 let warnedOnce = false;
-
 const warn = () => {
   if (!warnedOnce) {
     console.warn(['MUI: The MobileDateTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`.', '', "You should use `import { MobileDateTimePicker } from '@mui/x-date-pickers'`", "or `import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker'`", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\n'));
     warnedOnce = true;
   }
 };
-
 /**
+ * @deprecated The MobileDateTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
  * @ignore - do not document.
  */
 const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function DeprecatedMobileDateTimePicker() {

package/MobileTimePicker/MobileTimePicker.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-declare type MobileTimePickerComponent = (<TDate>(props: MobileTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type MobileTimePickerComponent = (<TDate>(props: MobileTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };
 /**
+ * @deprecated The MobileTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
  * @ignore - do not document.
  */
 declare const MobileTimePicker: MobileTimePickerComponent;
 export default MobileTimePicker;
-export declare type MobileTimePickerProps<TDate> = Record<any, any>;
+export type MobileTimePickerProps<TDate> = Record<any, any>;

package/MobileTimePicker/MobileTimePicker.js

@@ -1,15 +1,16 @@
+'use client';
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 let warnedOnce = false;
-
 const warn = () => {
   if (!warnedOnce) {
     console.warn(['MUI: The MobileTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`.', '', "You should use `import { MobileTimePicker } from '@mui/x-date-pickers'`", "or `import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker'`", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\n'));
     warnedOnce = true;
   }
 };
-
 /**
+ * @deprecated The MobileTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
  * @ignore - do not document.
  */
 const MobileTimePicker = /*#__PURE__*/React.forwardRef(function DeprecatedMobileTimePicker() {

package/MonthPicker/MonthPicker.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
-declare type MonthPickerComponent = (<TDate>(props: MonthPickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type MonthPickerComponent = (<TDate>(props: MonthPickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };
 /**
+ * @deprecated The MonthPicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
  * @ignore - do not document.
  */
 declare const MonthPicker: MonthPickerComponent;
 export default MonthPicker;
 export declare const monthPickerClasses: {};
 export declare const getMonthPickerUtilityClass: (slot: string) => string;
-export declare type MonthPickerProps<TDate> = Record<any, any>;
-export declare type MonthPickerClassKey = any;
+export type MonthPickerProps<TDate> = Record<any, any>;
+export type MonthPickerClassKey = any;

package/MonthPicker/MonthPicker.js

@@ -1,15 +1,16 @@
+'use client';
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 let warnedOnce = false;
-
 const warn = () => {
   if (!warnedOnce) {
     console.warn(['MUI: The MonthPicker component was moved from `@mui/lab` to `@mui/x-date-pickers`.', '', "You should use `import { MonthPicker } from '@mui/x-date-pickers'`", "or `import { MonthPicker } from '@mui/x-date-pickers/MonthPicker'`", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\n'));
     warnedOnce = true;
   }
 };
-
 /**
+ * @deprecated The MonthPicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
  * @ignore - do not document.
  */
 const MonthPicker = /*#__PURE__*/React.forwardRef(function DeprecatedMonthPicker() {

package/Pagination/Pagination.js

@@ -1,18 +1,19 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Pagination from '@mui/material/Pagination';
 import { jsx as _jsx } from "react/jsx-runtime";
 let warnedOnce = false;
+
 /**
  * @ignore - do not document.
  */
-
 export default /*#__PURE__*/React.forwardRef(function DeprecatedPagination(props, ref) {
   if (!warnedOnce) {
     console.warn(['MUI: The Pagination component was moved from the lab to the core.', '', "You should use `import { Pagination } from '@mui/material'`", "or `import Pagination from '@mui/material/Pagination'`"].join('\n'));
     warnedOnce = true;
   }
-
   return /*#__PURE__*/_jsx(Pagination, _extends({
     ref: ref
   }, props));

package/Pagination/usePagination.js

@@ -1 +1,3 @@
+'use client';
+
 export { default } from '@mui/material/usePagination';

package/PaginationItem/PaginationItem.js

@@ -1,18 +1,19 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PaginationItem from '@mui/material/PaginationItem';
 import { jsx as _jsx } from "react/jsx-runtime";
 let warnedOnce = false;
+
 /**
  * @ignore - do not document.
  */
-
 export default /*#__PURE__*/React.forwardRef(function DeprecatedPaginationItem(props, ref) {
   if (!warnedOnce) {
     console.warn(['MUI: The PaginationItem component was moved from the lab to the core.', '', "You should use `import { PaginationItem } from '@mui/material'`", "or `import PaginationItem from '@mui/material/PaginationItem'`"].join('\n'));
     warnedOnce = true;
   }
-
   return /*#__PURE__*/_jsx(PaginationItem, _extends({
     ref: ref
   }, props));

package/PickersDay/PickersDay.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
-declare type PickersDayComponent = (<TDate>(props: PickersDayProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type PickersDayComponent = (<TDate>(props: PickersDayProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };
 /**
+ * @deprecated The PickersDay component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
  * @ignore - do not document.
  */
 declare const PickersDay: PickersDayComponent;
 export default PickersDay;
 export declare const pickersDayClasses: {};
 export declare const getPickersDayUtilityClass: (slot: string) => string;
-export declare type PickersDayProps<TDate> = Record<any, any>;
-export declare type PickersDayClassKey = any;
+export type PickersDayProps<TDate> = Record<any, any>;
+export type PickersDayClassKey = any;