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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/lab",
-  "version": "5.0.0-alpha.49",
+  "version": "5.0.0-alpha.53",
   "private": false,
   "author": "MUI Team",
   "description": "Laboratory for new MUI modules.",
@@ -23,9 +23,9 @@
   },
   "homepage": "https://mui.com/components/about-the-lab/",
   "peerDependencies": {
-    "@mui/material": "^5.0.0-rc.0",
+    "@mui/material": "^5.0.0",
     "@types/react": "^16.8.6 || ^17.0.0",
-    "date-fns": "^2.24.0",
+    "date-fns": "^2.25.0",
     "dayjs": "^1.10.7",
     "luxon": "^1.28.0",
     "moment": "^2.29.1",
@@ -51,12 +51,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
-    "@date-io/date-fns": "^2.10.6",
-    "@date-io/dayjs": "^2.10.6",
-    "@date-io/luxon": "^2.10.6",
-    "@date-io/moment": "^2.10.6",
-    "@mui/core": "5.0.0-alpha.49",
-    "@mui/system": "^5.0.2",
+    "@date-io/date-fns": "^2.11.0",
+    "@date-io/dayjs": "^2.11.0",
+    "@date-io/luxon": "^2.11.1",
+    "@date-io/moment": "^2.11.0",
+    "@mui/core": "5.0.0-alpha.53",
+    "@mui/system": "^5.0.6",
     "@mui/utils": "^5.0.1",
     "clsx": "^1.1.1",
     "prop-types": "^15.7.2",

package/Masonry/MasonryContext.js

@@ -1,12 +0,0 @@
-import * as React from 'react';
-/**
- * @ignore - internal component.
- */
-
-const MasonryContext = /*#__PURE__*/React.createContext({});
-
-if (process.env.NODE_ENV !== 'production') {
-  MasonryContext.displayName = 'MasonryContext';
-}
-
-export default MasonryContext;

package/MasonryItem/MasonryItem.d.ts

@@ -1,49 +0,0 @@
-import { SxProps } from '@mui/system';
-import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
-import { Theme } from '@mui/material/styles';
-import { MasonryItemClasses } from './masonryItemClasses';
-
-export interface MasonryItemTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
-    /**
-     * The content of the component, normally an `<img />` or a `<div />`. It should be only one element.
-     */
-    children: NonNullable<React.ReactElement>;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<MasonryItemClasses>;
-    /**
-     * The initial height of the component in px. This is provided for server-side rendering.
-     */
-    defaultHeight?: number;
-    /**
-     * The number of columns taken up by the component
-     * @default 1
-     */
-    columnSpan?: number;
-    /**
-     * Allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: D;
-}
-/**
- *
- * Demos:
- *
- * - [Masonry](https://mui.com/components/masonry/)
- *
- * API:
- *
- * - [MasonryItem API](https://mui.com/api/masonry-item/)
- */
-declare const MasonryItem: OverridableComponent<MasonryItemTypeMap>;
-
-export type MasonryItemProps<
-  D extends React.ElementType = MasonryItemTypeMap['defaultComponent'],
-  P = {},
-> = OverrideProps<MasonryItemTypeMap<P, D>, D>;
-
-export default MasonryItem;

package/MasonryItem/MasonryItem.js

@@ -1,196 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "columnSpan", "defaultHeight"];
-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 { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
-import { styled, useThemeProps, useTheme } from '@mui/material/styles';
-import { getMasonryItemUtilityClass } from './masonryItemClasses';
-import MasonryContext from '../Masonry/MasonryContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root']
-  };
-  return composeClasses(slots, getMasonryItemUtilityClass, classes);
-};
-
-export const style = ({
-  ownerState,
-  theme
-}) => {
-  let styles = {
-    width: '100%',
-    '& > *': _extends({
-      // all contents should have a width of 100%
-      width: '100%',
-      boxSizing: 'inherit'
-    }, ownerState.hasDefaultHeight && {
-      height: '100%'
-    }),
-    visibility: ownerState.height ? 'visible' : 'hidden',
-    gridColumnEnd: `span ${ownerState.columnSpan}`,
-    boxSizing: 'inherit'
-  };
-
-  if (Array.isArray(ownerState.spacing) || typeof ownerState.spacing === 'object') {
-    const base = {};
-    Object.keys(theme.breakpoints.values).forEach(breakpoint => {
-      if (ownerState.spacing[breakpoint] != null) {
-        base[breakpoint] = true;
-      }
-    });
-    const spacingValues = resolveBreakpointValues({
-      values: ownerState.spacing,
-      base
-    });
-    const transformer = createUnarySpacing(theme);
-
-    const styleFromPropValue = propValue => {
-      const gap = ownerState.height ? Number(getValue(transformer, propValue).replace('px', '')) : 0; // For lazy-loaded images to load properly, masonry item should take up space greater than 1px.
-      // Taking into account a row gap of 2px, rowSpan should at least be 2.
-
-      const rowSpan = ownerState.height ? Math.ceil((ownerState.height + gap) / 2) : 2;
-      return {
-        gridRowEnd: `span ${rowSpan}`,
-        paddingBottom: gap === 0 ? 0 : gap - 2
-      };
-    };
-
-    styles = _extends({}, styles, handleBreakpoints({
-      theme
-    }, spacingValues, styleFromPropValue));
-  }
-
-  return styles;
-};
-const MasonryItemRoot = styled('div', {
-  name: 'MuiMasonryItem',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    return [styles.root];
-  }
-})(style);
-const MasonryItem = /*#__PURE__*/React.forwardRef(function MasonryItem(inProps, ref) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiMasonryItem'
-  });
-  const masonryItemRef = React.useRef(null);
-  const {
-    spacing = 1
-  } = React.useContext(MasonryContext);
-
-  const {
-    children,
-    className,
-    component = 'div',
-    columnSpan = 1,
-    defaultHeight
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
-  const hasDefaultHeight = defaultHeight !== undefined;
-  const [height, setHeight] = React.useState(defaultHeight);
-
-  const ownerState = _extends({}, props, {
-    spacing,
-    hasDefaultHeight,
-    columnSpan,
-    height: height < 0 ? 0 : height // MasonryItems to which negative or zero height is passed will be hidden
-
-  });
-
-  const classes = useUtilityClasses(ownerState);
-  React.useEffect(() => {
-    // Do not create a resize observer in case of provided height masonry
-    if (hasDefaultHeight) {
-      return undefined;
-    }
-
-    if (typeof ResizeObserver === 'undefined') {
-      return undefined;
-    }
-
-    const resizeObserver = new ResizeObserver(([item]) => {
-      setHeight(item.contentRect.height);
-    });
-    resizeObserver.observe(masonryItemRef.current.firstChild);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [hasDefaultHeight]);
-  const handleRef = useForkRef(ref, masonryItemRef);
-  const theme = useTheme();
-  const styleProp = {};
-
-  if (!Array.isArray(spacing) && typeof spacing !== 'object') {
-    const gap = height ? Number(theme.spacing(spacing).replace('px', '')) : 0;
-    const rowSpan = height ? Math.ceil((height + gap) / 2) : 2;
-    styleProp.gridRowEnd = `span ${rowSpan}`;
-    styleProp.paddingBottom = gap === 0 ? 0 : gap - 2;
-  }
-
-  return /*#__PURE__*/_jsx(MasonryItemRoot, _extends({
-    as: component,
-    className: clsx(classes.root, className),
-    ref: handleRef,
-    ownerState: ownerState,
-    style: styleProp
-  }, other, {
-    children: React.Children.only(children)
-  }));
-});
-process.env.NODE_ENV !== "production" ? MasonryItem.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"     |
-  // ----------------------------------------------------------------------
-
-  /**
-   * The content of the component, normally an `<img />` or a `<div />`. It should be only one element.
-   */
-  children: PropTypes.element.isRequired,
-
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-
-  /**
-   * The number of columns taken up by the component
-   * @default 1
-   */
-  columnSpan: PropTypes.number,
-
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-
-  /**
-   * The initial height of the component in px. This is provided for server-side rendering.
-   */
-  defaultHeight: PropTypes.number,
-
-  /**
-   * Allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.object
-} : void 0;
-export default MasonryItem;

package/MasonryItem/index.d.ts

@@ -1,5 +0,0 @@
-export * from './MasonryItem';
-export { default } from './MasonryItem';
-
-export * from './masonryItemClasses';
-export { default as masonryItemClasses } from './masonryItemClasses';

package/MasonryItem/index.js

@@ -1,3 +0,0 @@
-export { default } from './MasonryItem';
-export * from './masonryItemClasses';
-export { default as masonryItemClasses } from './masonryItemClasses';

package/MasonryItem/masonryItemClasses.d.ts

@@ -1,8 +0,0 @@
-export interface MasonryItemClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export declare type MasonryItemClassKey = keyof MasonryItemClasses;
-export declare function getMasonryItemUtilityClass(slot: string): string;
-declare const masonryItemClasses: MasonryItemClasses;
-export default masonryItemClasses;

package/MasonryItem/masonryItemClasses.js

@@ -1,6 +0,0 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
-export function getMasonryItemUtilityClass(slot) {
-  return generateUtilityClass('MuiMasonryItem', slot);
-}
-const masonryItemClasses = generateUtilityClasses('MuiMasonryItem', ['root']);
-export default masonryItemClasses;

package/MasonryItem/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/MasonryItem/index.js",
-  "types": "./index.d.ts"
-}

package/legacy/Masonry/MasonryContext.js

@@ -1,12 +0,0 @@
-import * as React from 'react';
-/**
- * @ignore - internal component.
- */
-
-var MasonryContext = /*#__PURE__*/React.createContext({});
-
-if (process.env.NODE_ENV !== 'production') {
-  MasonryContext.displayName = 'MasonryContext';
-}
-
-export default MasonryContext;

package/legacy/MasonryItem/MasonryItem.js

@@ -1,201 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _extends from "@babel/runtime/helpers/esm/extends";
-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 { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
-import { styled, useThemeProps, useTheme } from '@mui/material/styles';
-import { getMasonryItemUtilityClass } from './masonryItemClasses';
-import MasonryContext from '../Masonry/MasonryContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  var slots = {
-    root: ['root']
-  };
-  return composeClasses(slots, getMasonryItemUtilityClass, classes);
-};
-
-export var style = function style(_ref) {
-  var ownerState = _ref.ownerState,
-      theme = _ref.theme;
-  var styles = {
-    width: '100%',
-    '& > *': _extends({
-      // all contents should have a width of 100%
-      width: '100%',
-      boxSizing: 'inherit'
-    }, ownerState.hasDefaultHeight && {
-      height: '100%'
-    }),
-    visibility: ownerState.height ? 'visible' : 'hidden',
-    gridColumnEnd: "span ".concat(ownerState.columnSpan),
-    boxSizing: 'inherit'
-  };
-
-  if (Array.isArray(ownerState.spacing) || _typeof(ownerState.spacing) === 'object') {
-    var base = {};
-    Object.keys(theme.breakpoints.values).forEach(function (breakpoint) {
-      if (ownerState.spacing[breakpoint] != null) {
-        base[breakpoint] = true;
-      }
-    });
-    var spacingValues = resolveBreakpointValues({
-      values: ownerState.spacing,
-      base: base
-    });
-    var transformer = createUnarySpacing(theme);
-
-    var styleFromPropValue = function styleFromPropValue(propValue) {
-      var gap = ownerState.height ? Number(getValue(transformer, propValue).replace('px', '')) : 0; // For lazy-loaded images to load properly, masonry item should take up space greater than 1px.
-      // Taking into account a row gap of 2px, rowSpan should at least be 2.
-
-      var rowSpan = ownerState.height ? Math.ceil((ownerState.height + gap) / 2) : 2;
-      return {
-        gridRowEnd: "span ".concat(rowSpan),
-        paddingBottom: gap === 0 ? 0 : gap - 2
-      };
-    };
-
-    styles = _extends({}, styles, handleBreakpoints({
-      theme: theme
-    }, spacingValues, styleFromPropValue));
-  }
-
-  return styles;
-};
-var MasonryItemRoot = styled('div', {
-  name: 'MuiMasonryItem',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(props, styles) {
-    return [styles.root];
-  }
-})(style);
-var MasonryItem = /*#__PURE__*/React.forwardRef(function MasonryItem(inProps, ref) {
-  var props = useThemeProps({
-    props: inProps,
-    name: 'MuiMasonryItem'
-  });
-  var masonryItemRef = React.useRef(null);
-
-  var _React$useContext = React.useContext(MasonryContext),
-      _React$useContext$spa = _React$useContext.spacing,
-      spacing = _React$useContext$spa === void 0 ? 1 : _React$useContext$spa;
-
-  var children = props.children,
-      className = props.className,
-      _props$component = props.component,
-      component = _props$component === void 0 ? 'div' : _props$component,
-      _props$columnSpan = props.columnSpan,
-      columnSpan = _props$columnSpan === void 0 ? 1 : _props$columnSpan,
-      defaultHeight = props.defaultHeight,
-      other = _objectWithoutProperties(props, ["children", "className", "component", "columnSpan", "defaultHeight"]);
-
-  var hasDefaultHeight = defaultHeight !== undefined;
-
-  var _React$useState = React.useState(defaultHeight),
-      height = _React$useState[0],
-      setHeight = _React$useState[1];
-
-  var ownerState = _extends({}, props, {
-    spacing: spacing,
-    hasDefaultHeight: hasDefaultHeight,
-    columnSpan: columnSpan,
-    height: height < 0 ? 0 : height // MasonryItems to which negative or zero height is passed will be hidden
-
-  });
-
-  var classes = useUtilityClasses(ownerState);
-  React.useEffect(function () {
-    // Do not create a resize observer in case of provided height masonry
-    if (hasDefaultHeight) {
-      return undefined;
-    }
-
-    if (typeof ResizeObserver === 'undefined') {
-      return undefined;
-    }
-
-    var resizeObserver = new ResizeObserver(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 1),
-          item = _ref3[0];
-
-      setHeight(item.contentRect.height);
-    });
-    resizeObserver.observe(masonryItemRef.current.firstChild);
-    return function () {
-      resizeObserver.disconnect();
-    };
-  }, [hasDefaultHeight]);
-  var handleRef = useForkRef(ref, masonryItemRef);
-  var theme = useTheme();
-  var styleProp = {};
-
-  if (!Array.isArray(spacing) && _typeof(spacing) !== 'object') {
-    var gap = height ? Number(theme.spacing(spacing).replace('px', '')) : 0;
-    var rowSpan = height ? Math.ceil((height + gap) / 2) : 2;
-    styleProp.gridRowEnd = "span ".concat(rowSpan);
-    styleProp.paddingBottom = gap === 0 ? 0 : gap - 2;
-  }
-
-  return /*#__PURE__*/_jsx(MasonryItemRoot, _extends({
-    as: component,
-    className: clsx(classes.root, className),
-    ref: handleRef,
-    ownerState: ownerState,
-    style: styleProp
-  }, other, {
-    children: React.Children.only(children)
-  }));
-});
-process.env.NODE_ENV !== "production" ? MasonryItem.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"     |
-  // ----------------------------------------------------------------------
-
-  /**
-   * The content of the component, normally an `<img />` or a `<div />`. It should be only one element.
-   */
-  children: PropTypes.element.isRequired,
-
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-
-  /**
-   * The number of columns taken up by the component
-   * @default 1
-   */
-  columnSpan: PropTypes.number,
-
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-
-  /**
-   * The initial height of the component in px. This is provided for server-side rendering.
-   */
-  defaultHeight: PropTypes.number,
-
-  /**
-   * Allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.object
-} : void 0;
-export default MasonryItem;

package/legacy/MasonryItem/index.js

@@ -1,3 +0,0 @@
-export { default } from './MasonryItem';
-export * from './masonryItemClasses';
-export { default as masonryItemClasses } from './masonryItemClasses';

package/legacy/MasonryItem/masonryItemClasses.js

@@ -1,6 +0,0 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
-export function getMasonryItemUtilityClass(slot) {
-  return generateUtilityClass('MuiMasonryItem', slot);
-}
-var masonryItemClasses = generateUtilityClasses('MuiMasonryItem', ['root']);
-export default masonryItemClasses;

package/modern/Masonry/MasonryContext.js

@@ -1,12 +0,0 @@
-import * as React from 'react';
-/**
- * @ignore - internal component.
- */
-
-const MasonryContext = /*#__PURE__*/React.createContext({});
-
-if (process.env.NODE_ENV !== 'production') {
-  MasonryContext.displayName = 'MasonryContext';
-}
-
-export default MasonryContext;