@mui/lab 6.0.0-beta.22 → 6.0.0-beta.24

package/CHANGELOG.md

@@ -1,5 +1,96 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.1
+
+<!-- generated comparing v6.4.0..master -->
+
+_Jan 21, 2025_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@6.4.1`
+
+- [ButtonBase] Export types used in ButtonBase props (#43530) @Janpot
+- [Dialog] Add slots and slotProps (#44792) @sai6855
+- [Drawer] Deprecate composed classes (#44870) @yash49
+- [IconButton] Set default loading to `null` (#45057) @siriwatknp
+- [ListItem] Add codemod for deprecated props (#45022) @sai6855
+- [Modal] Add migration guide and codemod for deprecated props (#45021) @sai6855
+- [TextField] Fix filled state to be synced with autofill (#44135) @DiegoAndai
+
+### `@mui/system@6.4.1`
+
+- Fix dark mode flicker using `useEnhancedEffect` (#44812) @siriwatknp
+
+### `@mui/utils@6.4.1`
+
+- Do not deep merge React component (#45058) @siriwatknp
+
+### Docs
+
+- Fix typo (#45070) @Fullchee
+- Improve Toolpad templates section (#44914) @bharatkashyap
+- Fix expand / collapse icons orientation (#44989) @zanivan
+- Rename "Base UI" to "MUI Base" in all text (#45060) @mj12albert
+- Add @mui/base deprecation callout (#45030) @mj12albert
+- Update @mui/base deprecation message (#45064) @mj12albert
+
+### Core
+
+- [code-infra] Add "use client" directive to files with React APIs (#45036) @Janpot
+- [docs] 301 redirect `/base-ui` to `base-ui.com` (#45061) @mj12albert
+
+All contributors of this release in alphabetical order: @bharatkashyap, @DiegoAndai, @Fullchee, @Janpot, @mj12albert, @sai6855, @siriwatknp, @yash49, @zanivan
+
+## 6.4.0
+
+<!-- generated comparing v6.3.1..master -->
+
+_Jan 13, 2025_
+
+A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
+
+- Added [`loading` prop](https://mui.com/material-ui/react-button/#loading-2) to the `Button` and `IconButton` components (#44637) @siriwatknp
+
+### `@mui/material@6.4.0`
+
+- [Alert] complete `slots` and `slotProps` (#44971) @siriwatknp
+- [Autocomplete] Sync runtime and TS types for key in grouped options (#44862) @aarongarciah
+- [Button] Add `loading` prop (#44637) @siriwatknp
+- [CardHeader] Deprecate `*TypographyProps` and complete `slots`, `slotProps` (#44729) @siriwatknp
+- [CircularProgress] Improve indeterminate animation to be symmetric and smooth (#44934) @yashdev16
+- [LinearProgress] Deprecate composed classes (#44933) @headironc
+- [Link] Fix error for using custom palette with underline (#44927) @siriwatknp
+- [Select] Do not set `aria-controls` when closed (#44919) @siddhantantil39
+- [Select] Add missing root class (#44928) @sai6855
+- [Slider] Set onChangeCommitted to receive the last argument passed to onChange (#44795) @good-jinu
+- Add `mergeSlotProps` for extending components (#44809) @siriwatknp
+- Update `mergeSlotProps` to merge `style` (#44959) @siriwatknp
+- Fix slots typing for Tooltip and StepLabel (#44985) @siriwatknp
+- Remove unnecessary blank lines (#44980) @sai6855
+
+### Docs
+
+- [docs] Fix Dashboard sidenav sroll (#44876) @oliviertassinari
+- [docs] Fix broken anchor link to w3.org (c51af8e) @oliviertassinari
+- [docs] Add details on complementary Menu components (#44957) @samuelsycamore
+- [docs] Remove misleading messaging on MD3 support (#44953) @mnajdova
+- [docs] Fix code copy button obscuring on small screen sizes (#44861) @ZeeshanTamboli
+- [docs] Remove more instances of Adobe XD (#44956) @samuelsycamore
+- [docs] Remove Adobe XD chips, links, and mentions (#44909) @samuelsycamore
+- [docs] Fix incorrect rendering in Typography docs (#44937) @iaziz11
+
+### Core
+
+- [core] Remove redundant screenshots (#44877) @oliviertassinari
+- [core] Remove Suspense and clock mocking from regressions and e2e tests (#44935) @DiegoAndai
+- [code-infra] Allow react@18 on `@mui/internal-test-utils` (#45023) @LukasTy
+- [code-infra] Stabilize flaky pigment progressbar tests (#44969) @Janpot
+- [example] Update the CDN example to adapt React 19. (#44979) @IceOfSummer
+- [figma] Clarify that Material UI Sync plugin is experimental (#44975) @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @DiegoAndai, @good-jinu, @headironc, @iaziz11, @IceOfSummer, @Janpot, @LukasTy, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siddhantantil39, @siriwatknp, @yashdev16, @ZeeshanTamboli
+
 ## 6.3.1
 
 <!-- generated comparing v6.3.0..master -->

package/LoadingButton/LoadingButton.d.ts

@@ -1,80 +1,2 @@
-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 interface LoadingButtonOwnProps {
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<ButtonClasses> & {
-    /** Styles applied to the root element. */
-    root?: string;
-    /** Styles applied to the span element that wraps the children. */
-    label?: 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 and the button becomes disabled.
-   * @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>;
-}
-
-export type LoadingButtonTypeMap<
-  AdditionalProps = {},
-  RootComponent extends React.ElementType = 'button',
-> = ExtendButtonTypeMap<{
-  props: AdditionalProps & LoadingButtonOwnProps;
-  defaultComponent: RootComponent;
-}>;
-
-/**
- *
- * Demos:
- *
- * - [Button Group](https://mui.com/material-ui/react-button-group/)
- * - [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<
-  RootComponent extends React.ElementType = LoadingButtonTypeMap['defaultComponent'],
-  AdditionalProps = {},
-> = OverrideProps<LoadingButtonTypeMap<AdditionalProps, RootComponent>, RootComponent>;
-
-export default LoadingButton;
+export { default } from '@mui/material/Button';
+export * from '@mui/material/Button';

package/LoadingButton/LoadingButton.js

@@ -1,312 +1,23 @@
 'use client';
 
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import { chainPropTypes } from '@mui/utils';
-import { capitalize, unstable_useId as useId, unstable_memoTheme as memoTheme } from '@mui/material/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { useDefaultProps } from '@mui/material/DefaultPropsProvider';
 import Button from '@mui/material/Button';
-import { ButtonGroupContext } from '@mui/material/ButtonGroup';
-import CircularProgress from '@mui/material/CircularProgress';
-import resolveProps from '@mui/utils/resolveProps';
-import { styled } from "../zero-styled/index.js";
-import loadingButtonClasses, { getLoadingButtonUtilityClass } from "./loadingButtonClasses.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    loading,
-    loadingPosition,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root', loading && 'loading'],
-    label: ['label'],
-    startIcon: [loading && `startIconLoading${capitalize(loadingPosition)}`],
-    endIcon: [loading && `endIconLoading${capitalize(loadingPosition)}`],
-    loadingIndicator: ['loadingIndicator', loading && `loadingIndicator${capitalize(loadingPosition)}`]
-  };
-  const composedClasses = composeClasses(slots, getLoadingButtonUtilityClass, classes);
-  return {
-    ...classes,
-    // forward the outlined, color, etc. classes to Button
-    ...composedClasses
-  };
+import { jsx as _jsx } from "react/jsx-runtime";
+let warnedOnce = false;
+const warn = () => {
+  if (!warnedOnce) {
+    console.warn(['MUI: The LoadingButton component functionality is now part of the Button component from Material UI.', '', "You should use `import Button from '@mui/material/Button'`", "or `import { Button } from '@mui/material'`"].join('\n'));
+    warnedOnce = true;
+  }
 };
 
-// TODO use `import rootShouldForwardProp from '../styles/rootShouldForwardProp';` 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
-    }];
-  }
-})(memoTheme(({
-  theme
-}) => ({
-  display: 'inline-flex',
-  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
-    transition: theme.transitions.create(['opacity'], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0
-  },
-  variants: [{
-    props: {
-      loadingPosition: 'center'
-    },
-    style: {
-      transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-        duration: theme.transitions.duration.short
-      }),
-      [`&.${loadingButtonClasses.loading}`]: {
-        color: 'transparent'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
-    style: {
-      [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
-        transition: theme.transitions.create(['opacity'], {
-          duration: theme.transitions.duration.short
-        }),
-        opacity: 0,
-        marginRight: -8
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
-    style: {
-      [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
-        transition: theme.transitions.create(['opacity'], {
-          duration: theme.transitions.duration.short
-        }),
-        opacity: 0,
-        marginLeft: -8
-      }
-    }
-  }]
-})));
-const LoadingButtonLoadingIndicator = styled('span', {
-  name: 'MuiLoadingButton',
-  slot: 'LoadingIndicator',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.loadingIndicator, styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`]];
-  }
-})(memoTheme(({
-  theme
-}) => ({
-  position: 'absolute',
-  visibility: 'visible',
-  display: 'flex',
-  variants: [{
-    props: {
-      loadingPosition: 'start',
-      size: 'small'
-    },
-    style: {
-      left: 10
-    }
-  }, {
-    props: ({
-      loadingPosition,
-      ownerState
-    }) => loadingPosition === 'start' && ownerState.size !== 'small',
-    style: {
-      left: 14
-    }
-  }, {
-    props: {
-      variant: 'text',
-      loadingPosition: 'start'
-    },
-    style: {
-      left: 6
-    }
-  }, {
-    props: {
-      loadingPosition: 'center'
-    },
-    style: {
-      left: '50%',
-      transform: 'translate(-50%)',
-      color: (theme.vars || theme).palette.action.disabled
-    }
-  }, {
-    props: {
-      loadingPosition: 'end',
-      size: 'small'
-    },
-    style: {
-      right: 10
-    }
-  }, {
-    props: ({
-      loadingPosition,
-      ownerState
-    }) => loadingPosition === 'end' && ownerState.size !== 'small',
-    style: {
-      right: 14
-    }
-  }, {
-    props: {
-      variant: 'text',
-      loadingPosition: 'end'
-    },
-    style: {
-      right: 6
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
-    style: {
-      position: 'relative',
-      left: -10
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
-    style: {
-      position: 'relative',
-      right: -10
-    }
-  }]
-})));
-const LoadingButtonLabel = styled('span', {
-  name: 'MuiLoadingButton',
-  slot: 'Label',
-  overridesResolver: (props, styles) => {
-    return [styles.label];
-  }
-})({
-  display: 'inherit',
-  alignItems: 'inherit',
-  justifyContent: 'inherit'
-});
-const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
-  const contextProps = React.useContext(ButtonGroupContext);
-  const resolvedProps = resolveProps(contextProps, inProps);
-  const props = useDefaultProps({
-    props: resolvedProps,
-    name: 'MuiLoadingButton'
-  });
-  const {
-    children,
-    disabled = false,
-    id: idProp,
-    loading = false,
-    loadingIndicator: loadingIndicatorProp,
-    loadingPosition = 'center',
-    variant = 'text',
-    ...other
-  } = props;
-  const id = useId(idProp);
-  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
-    "aria-labelledby": id,
-    color: "inherit",
-    size: 16
-  });
-  const ownerState = {
-    ...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, {
-    disabled: disabled || loading,
-    id: id,
+/**
+ * @ignore - do not document.
+ */
+export default /*#__PURE__*/React.forwardRef(function DeprecatedLoadingButton(props, ref) {
+  warn();
+  return /*#__PURE__*/_jsx(Button, {
     ref: ref,
-    ...other,
-    variant: variant,
-    classes: classes,
-    ownerState: ownerState,
-    children: [ownerState.loadingPosition === 'end' ? /*#__PURE__*/_jsx(LoadingButtonLabel, {
-      className: classes.label,
-      children: children
-    }) : loadingButtonLoadingIndicator, ownerState.loadingPosition === 'end' ? loadingButtonLoadingIndicator : /*#__PURE__*/_jsx(LoadingButtonLabel, {
-      className: classes.label,
-      children: children
-    })]
+    ...props
   });
-});
-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 `pnpm 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 and the button becomes disabled.
-   * @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

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

package/LoadingButton/index.js

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

package/Timeline/TimelineContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 /**

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/lab v6.0.0-beta.22
+ * @mui/lab v6.0.0-beta.24
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the