@mui/material 6.0.0-alpha.12 → 6.0.0-alpha.13

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.13
+
+<!-- generated comparing v6.0.0-alpha.12..next -->
+
+_Jun 27, 2024_
+
+A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Added layout components for Pigment CSS integration (#42693) @siriwatknp
+
+### `@mui/material@6.0.0-alpha.13`
+
+- [Autocomplete] Fix more React 18.3 key spread warnings in demos (#42639) @wbt
+- [Container][Grid][Stack][Hidden] Export Pigment CSS layout components (#42693) @siriwatknp
+- [Text Field] when click password visibility button, text caret position change to very front. (#42595) @appleSimple
+- [Modal] migrate useSlotProps to useSLot (#42150) @sai6855
+
+### `@mui/styles@6.0.0-alpha.13`
+
+- [withStyles] Expect React defaultProps warning in test (#42752) @aarongarciah
+
+### Docs
+
+- Fix link in CONTRIBUTING.md (#42755) @Janpot
+- Add documentation on migrating JSS's alternative, array-based syntax to syntax supported by Emotion (#42053) @cjl750
+- Fix type error in virtualized table demo (#42757) @aarongarciah
+- Add first batch of v6 migration (#42242) @siriwatknp
+- Fix quotes on font-family dedeclaration in the Landing Page template theme (#42748) @joetats
+
+### Core
+
+- [code-infra] Refactor eslint `import/no-cycle` rule (#42705) @LukasTy
+- [core] Target direct version for prerelease (#42768) @siriwatknp
+- [test] Remove enzyme (#42706) @aarongarciah
+- [test] Remove createMount test util (#42703) @aarongarciah
+- [website] Add Ale to team (#42764) @alelthomas
+
+All contributors of this release in alphabetical order: @aarongarciah, @alelthomas, @appleSimple, @cjl750, @Janpot, @joetats, @LukasTy, @sai6855, @siriwatknp, @wbt
+
 ## v6.0.0-alpha.12
 
 <!-- generated comparing v6.0.0-alpha.11..next -->

package/Hidden/hiddenCssClasses.d.ts

@@ -0,0 +1,3 @@
+export declare function getHiddenCssUtilityClass(slot: string): string;
+declare const hiddenCssClasses: Record<"root" | "xlDown" | "xlUp" | "onlyXl" | "lgDown" | "lgUp" | "onlyLg" | "mdDown" | "mdUp" | "onlyMd" | "smDown" | "smUp" | "onlySm" | "xsDown" | "xsUp" | "onlyXs", string>;
+export default hiddenCssClasses;

package/Modal/Modal.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
-import { useSlotProps } from '@mui/base/utils';
 import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
 import composeClasses from '@mui/utils/composeClasses';
 import FocusTrap from '../Unstable_TrapFocus';
@@ -14,6 +13,8 @@ import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import Backdrop from '../Backdrop';
 import { getModalUtilityClass } from './modalClasses';
+import useSlot from '../utils/useSlot';
+import { useForkRef } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -106,8 +107,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     onTransitionEnter,
     onTransitionExited,
     open,
-    slotProps,
-    slots,
+    slotProps = {},
+    slots = {},
     // eslint-disable-next-line react/prop-types
     theme,
     ...other
@@ -155,25 +156,31 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onEnter = onEnter;
     childProps.onExited = onExited;
   }
-  const RootSlot = slots?.root ?? components.Root ?? ModalRoot;
-  const BackdropSlot = slots?.backdrop ?? components.Backdrop ?? BackdropComponent;
-  const rootSlotProps = slotProps?.root ?? componentsProps.root;
-  const backdropSlotProps = slotProps?.backdrop ?? componentsProps.backdrop;
-  const rootProps = useSlotProps({
-    elementType: RootSlot,
-    externalSlotProps: rootSlotProps,
-    externalForwardedProps: other,
+  const externalForwardedProps = {
+    slots: {
+      root: components.Root,
+      backdrop: components.Backdrop,
+      ...slots
+    },
+    slotProps: {
+      ...componentsProps,
+      ...slotProps
+    }
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: ModalRoot,
+    externalForwardedProps,
     getSlotProps: getRootProps,
     additionalProps: {
       ref,
       as: component
     },
     ownerState,
-    className: clsx(className, rootSlotProps?.className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
+    className: clsx(className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
   });
-  const backdropProps = useSlotProps({
-    elementType: BackdropSlot,
-    externalSlotProps: backdropSlotProps,
+  const [BackdropSlot, backdropProps] = useSlot('backdrop', {
+    elementType: BackdropComponent,
+    externalForwardedProps,
     additionalProps: BackdropProps,
     getSlotProps: otherHandlers => {
       return getBackdropProps({
@@ -188,9 +195,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         }
       });
     },
-    className: clsx(backdropSlotProps?.className, BackdropProps?.className, classes?.backdrop),
+    className: clsx(BackdropProps?.className, classes?.backdrop),
     ownerState
   });
+  const backdropRef = useForkRef(BackdropProps?.ref, backdropProps.ref);
   if (!keepMounted && !open && (!hasTransition || exited)) {
     return null;
   }
@@ -200,8 +208,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disablePortal: disablePortal,
     children: /*#__PURE__*/_jsxs(RootSlot, {
       ...rootProps,
+      ...other,
       children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropSlot, {
-        ...backdropProps
+        ...backdropProps,
+        ref: backdropRef
       }) : null, /*#__PURE__*/_jsx(FocusTrap, {
         disableEnforceFocus: disableEnforceFocus,
         disableAutoFocus: disableAutoFocus,

package/PigmentContainer/PigmentContainer.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { SxProps, Breakpoint } from '@mui/system';
+import { Theme } from '../styles';
+import { ContainerClasses } from '../Container/containerClasses';
+export interface PigmentContainerOwnProps {
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ContainerClasses>;
+    /**
+     * If `true`, the left and right padding is removed.
+     * @default false
+     */
+    disableGutters?: boolean;
+    /**
+     * Set the max-width to match the min-width of the current breakpoint.
+     * This is useful if you'd prefer to design for a fixed set of sizes
+     * instead of trying to accommodate a fully fluid viewport.
+     * It's fluid by default.
+     * @default false
+     */
+    fixed?: boolean;
+    /**
+     * Determine the max-width of the container.
+     * The container width grows with the size of the screen.
+     * Set to `false` to disable `maxWidth`.
+     * @default 'lg'
+     */
+    maxWidth?: Breakpoint | false;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+}
+export interface PigmentContainerTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+    props: AdditionalProps & PigmentContainerOwnProps;
+    defaultComponent: RootComponent;
+}
+export type PigmentContainerProps<RootComponent extends React.ElementType = PigmentContainerTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<PigmentContainerTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+    component?: React.ElementType;
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Container](https://next.mui.com/material-ui/react-container/)
+ *
+ * API:
+ *
+ * - [PigmentContainer API](https://next.mui.com/material-ui/api/pigment-container/)
+ */
+declare const PigmentContainer: OverridableComponent<PigmentContainerTypeMap<{}, "div">>;
+export default PigmentContainer;

package/PigmentContainer/PigmentContainer.js

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+// @ts-ignore
+import Container from '@pigment-css/react/Container';
+import capitalize from '@mui/utils/capitalize';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    fixed,
+    disableGutters,
+    maxWidth
+  } = ownerState;
+  const slots = {
+    root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
+  };
+  return composeClasses(slots, slot => generateUtilityClass('MuiContainer', slot), classes);
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Container](https://next.mui.com/material-ui/react-container/)
+ *
+ * API:
+ *
+ * - [PigmentContainer API](https://next.mui.com/material-ui/api/pigment-container/)
+ */
+const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer({
+  className,
+  disableGutters = false,
+  fixed = false,
+  maxWidth = 'lg',
+  ...props
+}, ref) {
+  const ownerState = {
+    ...props,
+    disableGutters,
+    fixed,
+    maxWidth
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(Container, {
+    className: clsx(classes.root, className),
+    disableGutters: disableGutters,
+    fixed: fixed,
+    maxWidth: maxWidth,
+    ...props,
+    // @ts-ignore
+    ref: ref
+  });
+});
+process.env.NODE_ENV !== "production" ? PigmentContainer.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: PropTypes.bool,
+  /**
+   * Set the max-width to match the min-width of the current breakpoint.
+   * This is useful if you'd prefer to design for a fixed set of sizes
+   * instead of trying to accommodate a fully fluid viewport.
+   * It's fluid by default.
+   * @default false
+   */
+  fixed: PropTypes.bool,
+  /**
+   * Determine the max-width of the container.
+   * The container width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'lg'
+   */
+  maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),
+  /**
+   * 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])
+} : void 0;
+export default PigmentContainer;

package/PigmentContainer/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './PigmentContainer';
+export * from './PigmentContainer';
+export { default as containerClasses } from '../Container/containerClasses';

package/PigmentContainer/index.js

@@ -0,0 +1,3 @@
+export { default } from './PigmentContainer';
+export * from './PigmentContainer';
+export { default as containerClasses } from '../Container/containerClasses';

package/PigmentContainer/package.json

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

package/PigmentGrid/PigmentGrid.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { SxProps } from '@mui/system';
+import { Breakpoint, Theme } from '../styles';
+type ResponsiveStyleValue<T> = T | Array<T | null> | {
+    [key in Breakpoint]?: T | null;
+};
+export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridSpacing = number | string;
+export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type GridSize = 'auto' | 'grow' | number;
+export interface GridBaseProps {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The number of columns.
+     * @default 12
+     */
+    columns?: ResponsiveStyleValue<number>;
+    /**
+     * Defines the horizontal space between the type `item` components.
+     * It overrides the value of the `spacing` prop.
+     */
+    columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+    /**
+     * If `true`, the component will have the flex *container* behavior.
+     * You should be wrapping *items* with a *container*.
+     * @default false
+     */
+    container?: boolean;
+    /**
+     * Defines the `flex-direction` style property.
+     * It is applied for all screen sizes.
+     * @default 'row'
+     */
+    direction?: ResponsiveStyleValue<GridDirection>;
+    /**
+     * Defines the offset of the grid.
+     */
+    offset?: ResponsiveStyleValue<number> | undefined;
+    /**
+     * @internal
+     * The level of the grid starts from `0`
+     * and increases when the grid nests inside another grid regardless of container or item.
+     *
+     * ```js
+     * <Grid> // level 0
+     *   <Grid> // level 1
+     *     <Grid> // level 2
+     *   <Grid> // level 1
+     * ```
+     *
+     * Only consecutive grid is considered nesting.
+     * A grid container will start at `0` if there are non-Grid element above it.
+     *
+     * ```js
+     * <Grid> // level 0
+     *   <div>
+     *     <Grid> // level 0
+     *       <Grid> // level 1
+     * ```
+     */
+    unstable_level?: number;
+    /**
+     * Defines the vertical space between the type `item` components.
+     * It overrides the value of the `spacing` prop.
+     */
+    rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+    /**
+     * Defines the space between the type `item` components.
+     * It can only be used on a type `container` component.
+     * @default 0
+     */
+    spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
+    /**
+     * Defines the column size of the grid.
+     */
+    size?: ResponsiveStyleValue<GridSize> | undefined;
+    /**
+     * Defines the `flex-wrap` style property.
+     * It's applied for all screen sizes.
+     * @default 'wrap'
+     */
+    wrap?: GridWrap;
+}
+export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+    props: AdditionalProps & GridBaseProps & {
+        sx?: SxProps<Theme>;
+    };
+    defaultComponent: DefaultComponent;
+}
+export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
+    component?: React.ElementType;
+}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+/**
+ *
+ * Demos:
+ *
+ * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
+ *
+ * API:
+ *
+ * - [PigmentGrid API](https://next.mui.com/material-ui/api/pigment-grid/)
+ */
+declare const PigmentGrid: OverridableComponent<GridTypeMap<{}, "div">>;
+export default PigmentGrid;

package/PigmentGrid/PigmentGrid.js

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+// @ts-ignore
+import Grid from '@pigment-css/react/Grid';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { generateDirectionClasses, generateSizeClassNames, generateSpacingClassNames } from '@mui/system/Unstable_Grid/gridGenerator';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    container,
+    direction,
+    size,
+    spacing
+  } = ownerState;
+  let gridSize = {};
+  if (size) {
+    if (Array.isArray(size)) {
+      size.forEach((value, index) => {
+        gridSize = {
+          ...gridSize,
+          [index]: value
+        };
+      });
+    }
+    if (typeof size === 'object') {
+      gridSize = size;
+    }
+  }
+  const slots = {
+    root: ['root', container && 'container', ...generateDirectionClasses(direction), ...generateSizeClassNames(gridSize), ...(container ? generateSpacingClassNames(spacing) : [])]
+  };
+  return composeClasses(slots, slot => generateUtilityClass('MuiGrid2', slot), {});
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
+ *
+ * API:
+ *
+ * - [PigmentGrid API](https://next.mui.com/material-ui/api/pigment-grid/)
+ */
+const PigmentGrid = /*#__PURE__*/React.forwardRef(function PigmentGrid(props, ref) {
+  const {
+    className,
+    ...other
+  } = props;
+  const classes = useUtilityClasses(props);
+  return /*#__PURE__*/_jsx(Grid, {
+    ref: ref,
+    className: clsx(classes.root, className),
+    ...other
+  });
+});
+process.env.NODE_ENV !== "production" ? PigmentGrid.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container: PropTypes.bool,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse']), PropTypes.arrayOf(PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse'])), PropTypes.object]),
+  /**
+   * Defines the offset of the grid.
+   */
+  offset: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * Defines the column size of the grid.
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * @internal
+   * The level of the grid starts from `0`
+   * and increases when the grid nests inside another grid regardless of container or item.
+   *
+   * ```js
+   * <Grid> // level 0
+   *   <Grid> // level 1
+   *     <Grid> // level 2
+   *   <Grid> // level 1
+   * ```
+   *
+   * Only consecutive grid is considered nesting.
+   * A grid container will start at `0` if there are non-Grid element above it.
+   *
+   * ```js
+   * <Grid> // level 0
+   *   <div>
+   *     <Grid> // level 0
+   *       <Grid> // level 1
+   * ```
+   */
+  unstable_level: PropTypes.number,
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
+} : void 0;
+
+// @ts-ignore internal logic for nested grid
+PigmentGrid.muiName = 'Grid';
+export default PigmentGrid;

package/PigmentGrid/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './PigmentGrid';
+export * from './PigmentGrid';
+export { default as grid2Classes } from '../Unstable_Grid2/grid2Classes';

package/PigmentGrid/index.js

@@ -0,0 +1,3 @@
+export { default } from './PigmentGrid';
+export * from './PigmentGrid';
+export { default as grid2Classes } from '../Unstable_Grid2/grid2Classes';

package/PigmentGrid/package.json

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