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

package/LoadingButton/loadingButtonClasses.d.ts

@@ -1,22 +1,22 @@
-export interface LoadingButtonClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `loading={true}`. */
-    loading: string;
-    /** Styles applied to the loadingIndicator element. */
-    loadingIndicator: string;
-    /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */
-    loadingIndicatorCenter: string;
-    /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */
-    loadingIndicatorStart: string;
-    /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */
-    loadingIndicatorEnd: string;
-    /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */
-    endIconLoadingEnd: string;
-    /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
-    startIconLoadingStart: string;
-}
-export declare type LoadingButtonClassKey = keyof LoadingButtonClasses;
-export declare function getLoadingButtonUtilityClass(slot: string): string;
-declare const loadingButtonClasses: LoadingButtonClasses;
-export default loadingButtonClasses;
+export interface LoadingButtonClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `loading={true}`. */
+    loading: string;
+    /** Styles applied to the loadingIndicator element. */
+    loadingIndicator: string;
+    /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */
+    loadingIndicatorCenter: string;
+    /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */
+    loadingIndicatorStart: string;
+    /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */
+    loadingIndicatorEnd: string;
+    /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */
+    endIconLoadingEnd: string;
+    /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
+    startIconLoadingStart: string;
+}
+export declare type LoadingButtonClassKey = keyof LoadingButtonClasses;
+export declare function getLoadingButtonUtilityClass(slot: string): string;
+declare const loadingButtonClasses: LoadingButtonClasses;
+export default loadingButtonClasses;

package/LocalizationProvider/LocalizationProvider.d.ts

@@ -1,35 +1,35 @@
-import * as React from 'react';
-import { DateIOFormats, IUtils } from '@date-io/core/IUtils';
-export declare type MuiPickersAdapter<TDate> = IUtils<TDate>;
-export interface MuiPickersAdapterContextValue<TDate> {
-    defaultDates: {
-        minDate: TDate;
-        maxDate: TDate;
-    };
-    utils: MuiPickersAdapter<TDate>;
-}
-export declare const MuiPickersAdapterContext: React.Context<MuiPickersAdapterContextValue<unknown> | null>;
-export interface LocalizationProviderProps {
-    children?: React.ReactNode;
-    /** DateIO adapter class function */
-    dateAdapter: new (...args: any) => MuiPickersAdapter<unknown>;
-    /** Formats that are used for any child pickers */
-    dateFormats?: Partial<DateIOFormats>;
-    /**
-     * Date library instance you are using, if it has some global overrides
-     * ```jsx
-     * dateLibInstance={momentTimeZone}
-     * ```
-     */
-    dateLibInstance?: any;
-    /** Locale for the date library you are using */
-    locale?: string | object;
-}
-/**
- * @ignore - do not document.
- */
-declare function LocalizationProvider(props: LocalizationProviderProps): JSX.Element;
-declare namespace LocalizationProvider {
-    var propTypes: any;
-}
-export default LocalizationProvider;
+import * as React from 'react';
+import { DateIOFormats, IUtils } from '@date-io/core/IUtils';
+export declare type MuiPickersAdapter<TDate> = IUtils<TDate>;
+export interface MuiPickersAdapterContextValue<TDate> {
+    defaultDates: {
+        minDate: TDate;
+        maxDate: TDate;
+    };
+    utils: MuiPickersAdapter<TDate>;
+}
+export declare const MuiPickersAdapterContext: React.Context<MuiPickersAdapterContextValue<unknown> | null>;
+export interface LocalizationProviderProps {
+    children?: React.ReactNode;
+    /** DateIO adapter class function */
+    dateAdapter: new (...args: any) => MuiPickersAdapter<unknown>;
+    /** Formats that are used for any child pickers */
+    dateFormats?: Partial<DateIOFormats>;
+    /**
+     * Date library instance you are using, if it has some global overrides
+     * ```jsx
+     * dateLibInstance={momentTimeZone}
+     * ```
+     */
+    dateLibInstance?: any;
+    /** Locale for the date library you are using */
+    locale?: string | object;
+}
+/**
+ * @ignore - do not document.
+ */
+declare function LocalizationProvider(props: LocalizationProviderProps): JSX.Element;
+declare namespace LocalizationProvider {
+    var propTypes: any;
+}
+export default LocalizationProvider;

package/LocalizationProvider/index.d.ts

@@ -1,2 +1,2 @@
-export * from './LocalizationProvider';
-export { default } from './LocalizationProvider';
+export * from './LocalizationProvider';
+export { default } from './LocalizationProvider';

package/Masonry/Masonry.d.ts

@@ -6,7 +6,7 @@ import { MasonryClasses } from './masonryClasses';
 export interface MasonryTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P & {
     /**
-     * The content of the component. It's recommended to be `<MasonryItem />`s.
+     * The content of the component.
      */
     children: NonNullable<React.ReactNode>;
     /**
@@ -18,6 +18,18 @@ export interface MasonryTypeMap<P = {}, D extends React.ElementType = 'div'> {
      * @default 4
      */
     columns?: ResponsiveStyleValue<number | string>;
+    /**
+     * The default number of columns of the component. This is provided for server-side rendering.
+     */
+    defaultColumns?: number;
+    /**
+     * The default height of the component in px. This is provided for server-side rendering.
+     */
+    defaultHeight?: 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?: number;
     /**
      * Defines the space between children. It is a factor of the theme's spacing.
      * @default 1

package/Masonry/Masonry.js

@@ -1,16 +1,16 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "columns", "spacing"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { createUnarySpacing, getValue, handleBreakpoints, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
-import { deepmerge, unstable_useForkRef as useForkRef } from '@mui/utils';
+const _excluded = ["children", "className", "component", "columns", "spacing", "defaultColumns", "defaultHeight", "defaultSpacing"];
 import { unstable_composeClasses as composeClasses } from '@mui/core';
 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 clsx from 'clsx';
+import PropTypes from 'prop-types';
+import * as React from 'react';
 import { getMasonryUtilityClass } from './masonryClasses';
-import MasonryContext from './MasonryContext';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
   const {
@@ -20,56 +20,146 @@ 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 style = ({
+export 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['& > *'] = _extends({}, styles['& > *'], orderStyleSSR, {
+      margin: defaultSpacing / 2,
+      width: `calc(${(100 / ownerState.defaultColumns).toFixed(2)}% - ${defaultSpacing}px)`
+    });
+    return _extends({}, styles, stylesSSR);
+  }
+
+  const spacingBreakpointsBase = computeBreakpointsBase(theme.breakpoints, ownerState.spacing);
   const spacingValues = resolveBreakpointValues({
-    values: ownerState.spacing,
-    base
+    values: validatePropValues(spacingBreakpointsBase, ownerState.spacing),
+    base: spacingBreakpointsBase
   });
   const transformer = createUnarySpacing(theme);
 
   const spacingStyleFromPropValue = propValue => {
-    return {
-      columnGap: getValue(transformer, propValue)
-    };
+    const themeSpacingValue = Number(propValue);
+    const spacing = Number(getValue(transformer, themeSpacingValue).replace('px', ''));
+    return _extends({
+      margin: -(spacing / 2),
+      '& > *': {
+        margin: spacing / 2
+      }
+    }, ownerState.maxColumnHeight && {
+      height: Math.ceil(ownerState.maxColumnHeight + spacing)
+    });
   };
 
-  styles = _extends({}, styles, handleBreakpoints({
+  styles = deepmerge(styles, handleBreakpoints({
     theme
   }, spacingValues, spacingStyleFromPropValue));
+  const columnBreakpointsBase = computeBreakpointsBase(theme.breakpoints, ownerState.columns);
   const columnValues = resolveBreakpointValues({
-    values: ownerState.columns,
-    base
+    values: validatePropValues(columnBreakpointsBase, ownerState.columns),
+    base: columnBreakpointsBase
   });
 
   const columnStyleFromPropValue = propValue => {
+    const columnValue = Number(propValue);
+    const width = `${(100 / columnValue).toFixed(2)}%`;
+    const spacing = typeof spacingValues !== 'object' ? getValue(transformer, Number(spacingValues)) : '0px';
     return {
-      gridTemplateColumns: `repeat(${propValue}, 1fr)`
+      '& > *': {
+        width: `calc(${width} - ${spacing})`
+      }
     };
   };
 
   styles = deepmerge(styles, handleBreakpoints({
     theme
-  }, columnValues, columnStyleFromPropValue));
+  }, columnValues, columnStyleFromPropValue)); // configure width for responsive spacing values
+
+  if (typeof spacingValues === 'object') {
+    styles = deepmerge(styles, handleBreakpoints({
+      theme
+    }, spacingValues, (propValue, breakpoint) => {
+      if (breakpoint) {
+        const themeSpacingValue = Number(propValue);
+        const lastBreakpoint = Object.keys(columnValues).pop();
+        const spacing = 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;
 };
 const MasonryRoot = styled('div', {
@@ -78,61 +168,143 @@ const MasonryRoot = styled('div', {
   overridesResolver: (props, styles) => {
     return [styles.root];
   }
-})(style);
+})(getStyle);
 const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
   const props = 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 = _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
+    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
+    const handleResize = () => {
+      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', ''));
 
-        didWarn = true;
+      if (parentWidth === 0 || childWidth === 0) {
+        return;
       }
-    };
 
+      const currentNumberOfColumns = Math.round(parentWidth / (childWidth + firstChildMarginLeft + firstChildMarginRight));
+      const columnHeights = new Array(currentNumberOfColumns).fill(0);
+      let skip = false;
+      masonryRef.current.childNodes.forEach(child => {
+        if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
+          return;
+        }
+
+        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 childHeight = child.clientHeight ? Math.ceil(child.clientHeight) + 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);
+      }
+    }; // IE and old browsers are not supported
+
+
+    if (typeof ResizeObserver === 'undefined') {
+      return null;
+    }
+
+    const resizeObserver = new ResizeObserver(handleResize);
     const container = masonryRef.current;
-    container.addEventListener('scroll', handleScroll);
+
+    if (container) {
+      // 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 () => {
-      container.removeEventListener('scroll', handleScroll);
+      resizeObserver.disconnect();
     };
-  }, []);
+  }, [columns, spacing]);
   const handleRef = useForkRef(ref, masonryRef);
-  return /*#__PURE__*/_jsx(MasonryContext.Provider, {
-    value: contextValue,
-    children: /*#__PURE__*/_jsx(MasonryRoot, _extends({
-      as: component,
-      className: clsx(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__*/_jsx("span", {
+    "data-class": "line-break",
+    style: _extends({}, lineBreakStyle, {
+      order: index + 1
+    })
+  }, index));
+  return /*#__PURE__*/_jsxs(MasonryRoot, _extends({
+    as: component,
+    className: clsx(classes.root, className),
+    ref: handleRef,
+    ownerState: ownerState
+  }, other, {
+    children: [children, lineBreaks]
+  }));
 });
 process.env.NODE_ENV !== "production" ? Masonry.propTypes
 /* remove-proptypes */
@@ -143,7 +315,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
   /* @typescript-to-proptypes-ignore */
@@ -171,6 +343,21 @@ process.env.NODE_ENV !== "production" ? Masonry.propTypes
    */
   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,
+
   /**
    * Defines the space between children. It is a factor of the theme's spacing.
    * @default 1
@@ -180,6 +367,6 @@ process.env.NODE_ENV !== "production" ? Masonry.propTypes
   /**
    * Allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 } : void 0;
 export default Masonry;

package/Masonry/masonryClasses.d.ts

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

package/MobileDatePicker/MobileDatePicker.d.ts

@@ -1,20 +1,20 @@
-import * as React from 'react';
-import { BaseDatePickerProps } from '../DatePicker/shared';
-import { MobileWrapperProps } from '../internal/pickers/wrappers/MobileWrapper';
-export interface MobileDatePickerProps<TDate = unknown> extends BaseDatePickerProps<TDate>, MobileWrapperProps {
-}
-declare type MobileDatePickerComponent = (<TDate>(props: MobileDatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
-    propTypes?: any;
-};
-/**
- *
- * Demos:
- *
- * - [Date Picker](https://mui.com/components/date-picker/)
- *
- * API:
- *
- * - [MobileDatePicker API](https://mui.com/api/mobile-date-picker/)
- */
-declare const MobileDatePicker: MobileDatePickerComponent;
-export default MobileDatePicker;
+import * as React from 'react';
+import { BaseDatePickerProps } from '../DatePicker/shared';
+import { MobileWrapperProps } from '../internal/pickers/wrappers/MobileWrapper';
+export interface MobileDatePickerProps<TDate = unknown> extends BaseDatePickerProps<TDate>, MobileWrapperProps {
+}
+declare type MobileDatePickerComponent = (<TDate>(props: MobileDatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+    propTypes?: any;
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Date Picker](https://mui.com/components/date-picker/)
+ *
+ * API:
+ *
+ * - [MobileDatePicker API](https://mui.com/api/mobile-date-picker/)
+ */
+declare const MobileDatePicker: MobileDatePickerComponent;
+export default MobileDatePicker;

package/MobileDatePicker/index.d.ts

@@ -1,2 +1,2 @@
-export * from './MobileDatePicker';
-export { default } from './MobileDatePicker';
+export * from './MobileDatePicker';
+export { default } from './MobileDatePicker';