@mui/lab 5.0.0-alpha.100

package/LoadingButton/LoadingButton.d.ts

@@ -0,0 +1,75 @@
+import { ExtendButton, ExtendButtonTypeMap, ButtonClasses } from '@mui/material/Button';
+import { OverrideProps } from '@mui/material/OverridableComponent';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+
+export type LoadingButtonTypeMap<
+  P = {},
+  D extends React.ElementType = 'button',
+> = ExtendButtonTypeMap<{
+  props: P & {
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ButtonClasses> & {
+      /** 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;
+    };
+    /**
+     * If `true`, the loading indicator is shown.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Element placed before the children if the button is in loading state.
+     * The node should contain an element with `role="progressbar"` with an accessible name.
+     * By default we render a `CircularProgress` that is labelled by the button itself.
+     * @default <CircularProgress color="inherit" size={16} />
+     */
+    loadingIndicator?: React.ReactNode;
+    /**
+     * The loading indicator can be positioned on the start, end, or the center of the button.
+     * @default 'center'
+     */
+    loadingPosition?: 'start' | 'end' | 'center';
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+  };
+  defaultComponent: D;
+}>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Button](https://mui.com/material-ui/react-button/)
+ *
+ * API:
+ *
+ * - [LoadingButton API](https://mui.com/material-ui/api/loading-button/)
+ * - inherits [Button API](https://mui.com/material-ui/api/button/)
+ */
+declare const LoadingButton: ExtendButton<LoadingButtonTypeMap>;
+
+export type LoadingButtonProps<
+  D extends React.ElementType = LoadingButtonTypeMap['defaultComponent'],
+  P = {},
+> = OverrideProps<LoadingButtonTypeMap<P, D>, D>;
+
+export default LoadingButton;

package/LoadingButton/LoadingButton.js

@@ -0,0 +1,236 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["children", "disabled", "id", "loading", "loadingIndicator", "loadingPosition", "variant"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { chainPropTypes } from '@mui/utils';
+import { capitalize, unstable_useId as useId } from '@mui/material/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { styled, useThemeProps } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    loading,
+    loadingPosition,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', loading && 'loading'],
+    startIcon: [loading && `startIconLoading${capitalize(loadingPosition)}`],
+    endIcon: [loading && `endIconLoading${capitalize(loadingPosition)}`],
+    loadingIndicator: ['loadingIndicator', loading && `loadingIndicator${capitalize(loadingPosition)}`]
+  };
+  const composedClasses = composeClasses(slots, getLoadingButtonUtilityClass, classes);
+  return _extends({}, classes, composedClasses);
+}; // TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
+
+
+const rootShouldForwardProp = prop => prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';
+
+const LoadingButtonRoot = styled(Button, {
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiLoadingButton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    return [styles.root, styles.startIconLoadingStart && {
+      [`& .${loadingButtonClasses.startIconLoadingStart}`]: styles.startIconLoadingStart
+    }, styles.endIconLoadingEnd && {
+      [`& .${loadingButtonClasses.endIconLoadingEnd}`]: styles.endIconLoadingEnd
+    }];
+  }
+})(({
+  ownerState,
+  theme
+}) => _extends({
+  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0
+  }
+}, ownerState.loadingPosition === 'center' && {
+  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+    duration: theme.transitions.duration.short
+  }),
+  [`&.${loadingButtonClasses.loading}`]: {
+    color: 'transparent'
+  }
+}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
+  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0,
+    marginRight: -8
+  }
+}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
+  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0,
+    marginLeft: -8
+  }
+}));
+const LoadingButtonLoadingIndicator = styled('div', {
+  name: 'MuiLoadingButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.loadingIndicator, styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  position: 'absolute',
+  visibility: 'visible',
+  display: 'flex'
+}, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
+  left: ownerState.size === 'small' ? 10 : 14
+}, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {
+  left: 6
+}, ownerState.loadingPosition === 'center' && {
+  left: '50%',
+  transform: 'translate(-50%)',
+  color: (theme.vars || theme).palette.action.disabled
+}, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
+  right: ownerState.size === 'small' ? 10 : 14
+}, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {
+  right: 6
+}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
+  position: 'relative',
+  left: -10
+}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
+  position: 'relative',
+  right: -10
+}));
+const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiLoadingButton'
+  });
+
+  const {
+    children,
+    disabled = false,
+    id: idProp,
+    loading = false,
+    loadingIndicator: loadingIndicatorProp,
+    loadingPosition = 'center',
+    variant = 'text'
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp != null ? loadingIndicatorProp : /*#__PURE__*/_jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
+
+  const ownerState = _extends({}, props, {
+    disabled,
+    loading,
+    loadingIndicator,
+    loadingPosition,
+    variant
+  });
+
+  const classes = useUtilityClasses(ownerState);
+  const loadingButtonLoadingIndicator = loading ? /*#__PURE__*/_jsx(LoadingButtonLoadingIndicator, {
+    className: classes.loadingIndicator,
+    ownerState: ownerState,
+    children: loadingIndicator
+  }) : null;
+  return /*#__PURE__*/_jsxs(LoadingButtonRoot, _extends({
+    disabled: disabled || loading,
+    id: id,
+    ref: ref
+  }, other, {
+    variant: variant,
+    classes: classes,
+    ownerState: ownerState,
+    children: [ownerState.loadingPosition === 'end' ? children : loadingButtonLoadingIndicator, ownerState.loadingPosition === 'end' ? loadingButtonLoadingIndicator : children]
+  }));
+});
+process.env.NODE_ENV !== "production" ? LoadingButton.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.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+
+  /**
+   * If `true`, the loading indicator is shown.
+   * @default false
+   */
+  loading: PropTypes.bool,
+
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default we render a `CircularProgress` that is labelled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
+
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition: chainPropTypes(PropTypes.oneOf(['start', 'end', 'center']), props => {
+    if (props.loadingPosition === 'start' && !props.startIcon) {
+      return new Error(`MUI: The loadingPosition="start" should be used in combination with startIcon.`);
+    }
+
+    if (props.loadingPosition === 'end' && !props.endIcon) {
+      return new Error(`MUI: The loadingPosition="end" should be used in combination with endIcon.`);
+    }
+
+    return null;
+  }),
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
+} : void 0;
+export default LoadingButton;

package/LoadingButton/index.d.ts

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

package/LoadingButton/index.js

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

package/LoadingButton/loadingButtonClasses.d.ts

@@ -0,0 +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;

package/LoadingButton/loadingButtonClasses.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getLoadingButtonUtilityClass(slot) {
+  return generateUtilityClass('MuiLoadingButton', slot);
+}
+const loadingButtonClasses = generateUtilityClasses('MuiLoadingButton', ['root', 'loading', 'loadingIndicator', 'loadingIndicatorCenter', 'loadingIndicatorStart', 'loadingIndicatorEnd', 'endIconLoadingEnd', 'startIconLoadingStart']);
+export default loadingButtonClasses;

package/LoadingButton/package.json

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

package/LocalizationProvider/LocalizationProvider.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare type LocalizationProviderComponent = ((props: LocalizationProviderProps & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+    propTypes?: any;
+};
+/**
+ * @ignore - do not document.
+ */
+declare const LocalizationProvider: LocalizationProviderComponent;
+export default LocalizationProvider;
+export declare type LocalizationProviderProps = Record<any, any>;

package/LocalizationProvider/LocalizationProvider.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+let warnedOnce = false;
+
+const warn = () => {
+  if (!warnedOnce) {
+    console.warn(['MUI: The LocalizationProvider component was moved from `@mui/lab` to `@mui/x-date-pickers`.', '', "You should use `import { LocalizationProvider } from '@mui/x-date-pickers'`", "or `import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'`", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\n'));
+    warnedOnce = true;
+  }
+};
+
+/**
+ * @ignore - do not document.
+ */
+const LocalizationProvider = /*#__PURE__*/React.forwardRef(function DeprecatedLocalizationProvider() {
+  warn();
+  return null;
+});
+export default LocalizationProvider;

package/LocalizationProvider/index.d.ts

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

package/LocalizationProvider/index.js

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

package/LocalizationProvider/package.json

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

package/Masonry/Masonry.d.ts

@@ -0,0 +1,62 @@
+import { ResponsiveStyleValue, SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
+import { Theme } from '@mui/material/styles';
+import { MasonryClasses } from './masonryClasses';
+
+export interface MasonryTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
+    /**
+     * The content of the component.
+     */
+    children: NonNullable<React.ReactNode>;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<MasonryClasses>;
+    /**
+     * Number of columns.
+     * @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
+     */
+    spacing?: ResponsiveStyleValue<number | string>;
+    /**
+     * Allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+  };
+  defaultComponent: D;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Masonry](https://mui.com/material-ui/react-masonry/)
+ *
+ * API:
+ *
+ * - [Masonry API](https://mui.com/material-ui/api/masonry/)
+ */
+declare const Masonry: OverridableComponent<MasonryTypeMap>;
+
+export type MasonryProps<
+  D extends React.ElementType = MasonryTypeMap['defaultComponent'],
+  P = {},
+> = OverrideProps<MasonryTypeMap<P, D>, D>;
+
+export default Masonry;