@mui/material 9.0.0-alpha.3 → 9.0.0-alpha.4

package/useAutocomplete/useAutocomplete.js

@@ -64,6 +64,7 @@ const defaultFilterOptions = createFilterOptions();
 // Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
 const pageSize = 5;
 const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
+const defaultIsOptionEqualToValue = (option, value) => option === value;
 const MULTIPLE_DEFAULT_VALUE = [];
 function getInputValue(value, multiple, getOptionLabel, renderValue) {
   if (multiple || value == null || renderValue) {
@@ -102,7 +103,7 @@ function useAutocomplete(props) {
     id: idProp,
     includeInputInList = false,
     inputValue: inputValueProp,
-    isOptionEqualToValue = (option, value) => option === value,
+    isOptionEqualToValue = defaultIsOptionEqualToValue,
     multiple = false,
     onChange,
     onClose,
@@ -180,8 +181,30 @@ function useAutocomplete(props) {
   const [inputPristine, setInputPristine] = React.useState(true);
   const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);
   const popupOpen = open && !readOnly;
+  const selectedValues = React.useMemo(() => {
+    if (multiple) {
+      return value;
+    }
+    if (value != null) {
+      return [value];
+    }
+    return [];
+  }, [multiple, value]);
+  const selectedValuesSet = React.useMemo(() => {
+    // Fast path for the default strict equality comparator to avoid O(n^2) option checks.
+    if (isOptionEqualToValue !== defaultIsOptionEqualToValue || selectedValues.length === 0) {
+      return null;
+    }
+    return new Set(selectedValues);
+  }, [isOptionEqualToValue, selectedValues]);
+  const isOptionSelected = React.useCallback(option => {
+    if (selectedValuesSet) {
+      return selectedValuesSet.has(option);
+    }
+    return selectedValues.some(value2 => value2 != null && isOptionEqualToValue(option, value2));
+  }, [isOptionEqualToValue, selectedValues, selectedValuesSet]);
   const filteredOptions = popupOpen ? filterOptions(options.filter(option => {
-    if (filterSelectedOptions && (multiple ? value : [value]).some(value2 => value2 !== null && isOptionEqualToValue(option, value2))) {
+    if (filterSelectedOptions && isOptionSelected(option)) {
       return false;
     }
     return true;
@@ -214,9 +237,7 @@ function useAutocomplete(props) {
     if (itemToFocus === -1) {
       inputRef.current.focus();
     } else {
-      // Using `data-tag-index` for deprecated `renderTags`. Remove when `renderTags` is gone.
-      const indexType = renderValue ? 'data-item-index' : 'data-tag-index';
-      anchorEl.querySelector(`[${indexType}="${itemToFocus}"]`).focus();
+      anchorEl.querySelector(`[data-item-index="${itemToFocus}"]`).focus();
     }
   });
 
@@ -587,10 +608,7 @@ function useAutocomplete(props) {
       if (direction === 'next' && nextFocus === value.length || direction === 'previous' && nextFocus === -1) {
         return -1;
       }
-
-      // Using `data-tag-index` for deprecated `renderTags`. Remove when `renderTags` is removed.
-      const indexType = renderValue ? 'data-item-index' : 'data-tag-index';
-      const option = anchorEl.querySelector(`[${indexType}="${nextFocus}"]`);
+      const option = anchorEl.querySelector(`[data-item-index="${nextFocus}"]`);
 
       // Same logic as MenuList.js
       if (!option || !option.hasAttribute('tabindex') || option.disabled || option.getAttribute('aria-disabled') === 'true') {
@@ -1047,11 +1065,7 @@ function useAutocomplete(props) {
       ...(multiple && {
         key: index
       }),
-      ...(renderValue ? {
-        'data-item-index': index
-      } : {
-        'data-tag-index': index
-      }),
+      'data-item-index': index,
       tabIndex: -1,
       ...(!readOnly && {
         onDelete: multiple ? handleItemDelete(index) : handleSingleItemDelete
@@ -1062,17 +1076,6 @@ function useAutocomplete(props) {
       type: 'button',
       onClick: handlePopupIndicator
     }),
-    // deprecated
-    getTagProps: ({
-      index
-    }) => ({
-      key: index,
-      'data-tag-index': index,
-      tabIndex: -1,
-      ...(!readOnly && {
-        onDelete: handleItemDelete(index)
-      })
-    }),
     getListboxProps: () => ({
       role: 'listbox',
       id: `${id}-listbox`,
@@ -1088,7 +1091,7 @@ function useAutocomplete(props) {
       index,
       option
     }) => {
-      const selected = (multiple ? value : [value]).some(value2 => value2 != null && isOptionEqualToValue(option, value2));
+      const selected = isOptionSelected(option);
       const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
       return {
         key: getOptionKey?.(option) ?? getOptionLabel(option),
@@ -1113,8 +1116,6 @@ function useAutocomplete(props) {
     anchorEl,
     setAnchorEl,
     focusedItem,
-    // deprecated
-    focusedTag: focusedItem,
     groupedOptions
   };
 }

package/useAutocomplete/useAutocomplete.mjs

@@ -56,6 +56,7 @@ const defaultFilterOptions = createFilterOptions();
 // Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
 const pageSize = 5;
 const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
+const defaultIsOptionEqualToValue = (option, value) => option === value;
 const MULTIPLE_DEFAULT_VALUE = [];
 function getInputValue(value, multiple, getOptionLabel, renderValue) {
   if (multiple || value == null || renderValue) {
@@ -94,7 +95,7 @@ function useAutocomplete(props) {
     id: idProp,
     includeInputInList = false,
     inputValue: inputValueProp,
-    isOptionEqualToValue = (option, value) => option === value,
+    isOptionEqualToValue = defaultIsOptionEqualToValue,
     multiple = false,
     onChange,
     onClose,
@@ -172,8 +173,30 @@ function useAutocomplete(props) {
   const [inputPristine, setInputPristine] = React.useState(true);
   const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);
   const popupOpen = open && !readOnly;
+  const selectedValues = React.useMemo(() => {
+    if (multiple) {
+      return value;
+    }
+    if (value != null) {
+      return [value];
+    }
+    return [];
+  }, [multiple, value]);
+  const selectedValuesSet = React.useMemo(() => {
+    // Fast path for the default strict equality comparator to avoid O(n^2) option checks.
+    if (isOptionEqualToValue !== defaultIsOptionEqualToValue || selectedValues.length === 0) {
+      return null;
+    }
+    return new Set(selectedValues);
+  }, [isOptionEqualToValue, selectedValues]);
+  const isOptionSelected = React.useCallback(option => {
+    if (selectedValuesSet) {
+      return selectedValuesSet.has(option);
+    }
+    return selectedValues.some(value2 => value2 != null && isOptionEqualToValue(option, value2));
+  }, [isOptionEqualToValue, selectedValues, selectedValuesSet]);
   const filteredOptions = popupOpen ? filterOptions(options.filter(option => {
-    if (filterSelectedOptions && (multiple ? value : [value]).some(value2 => value2 !== null && isOptionEqualToValue(option, value2))) {
+    if (filterSelectedOptions && isOptionSelected(option)) {
       return false;
     }
     return true;
@@ -206,9 +229,7 @@ function useAutocomplete(props) {
     if (itemToFocus === -1) {
       inputRef.current.focus();
     } else {
-      // Using `data-tag-index` for deprecated `renderTags`. Remove when `renderTags` is gone.
-      const indexType = renderValue ? 'data-item-index' : 'data-tag-index';
-      anchorEl.querySelector(`[${indexType}="${itemToFocus}"]`).focus();
+      anchorEl.querySelector(`[data-item-index="${itemToFocus}"]`).focus();
     }
   });
 
@@ -579,10 +600,7 @@ function useAutocomplete(props) {
       if (direction === 'next' && nextFocus === value.length || direction === 'previous' && nextFocus === -1) {
         return -1;
       }
-
-      // Using `data-tag-index` for deprecated `renderTags`. Remove when `renderTags` is removed.
-      const indexType = renderValue ? 'data-item-index' : 'data-tag-index';
-      const option = anchorEl.querySelector(`[${indexType}="${nextFocus}"]`);
+      const option = anchorEl.querySelector(`[data-item-index="${nextFocus}"]`);
 
       // Same logic as MenuList.js
       if (!option || !option.hasAttribute('tabindex') || option.disabled || option.getAttribute('aria-disabled') === 'true') {
@@ -1039,11 +1057,7 @@ function useAutocomplete(props) {
       ...(multiple && {
         key: index
       }),
-      ...(renderValue ? {
-        'data-item-index': index
-      } : {
-        'data-tag-index': index
-      }),
+      'data-item-index': index,
       tabIndex: -1,
       ...(!readOnly && {
         onDelete: multiple ? handleItemDelete(index) : handleSingleItemDelete
@@ -1054,17 +1068,6 @@ function useAutocomplete(props) {
       type: 'button',
       onClick: handlePopupIndicator
     }),
-    // deprecated
-    getTagProps: ({
-      index
-    }) => ({
-      key: index,
-      'data-tag-index': index,
-      tabIndex: -1,
-      ...(!readOnly && {
-        onDelete: handleItemDelete(index)
-      })
-    }),
     getListboxProps: () => ({
       role: 'listbox',
       id: `${id}-listbox`,
@@ -1080,7 +1083,7 @@ function useAutocomplete(props) {
       index,
       option
     }) => {
-      const selected = (multiple ? value : [value]).some(value2 => value2 != null && isOptionEqualToValue(option, value2));
+      const selected = isOptionSelected(option);
       const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
       return {
         key: getOptionKey?.(option) ?? getOptionLabel(option),
@@ -1105,8 +1108,6 @@ function useAutocomplete(props) {
     anchorEl,
     setAnchorEl,
     focusedItem,
-    // deprecated
-    focusedTag: focusedItem,
     groupedOptions
   };
 }

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "9.0.0-alpha.3";
+const version = exports.version = "9.0.0-alpha.4";
 const major = exports.major = Number("9");
 const minor = exports.minor = Number("0");
 const patch = exports.patch = Number("0");
-const prerelease = exports.prerelease = "alpha.3";
+const prerelease = exports.prerelease = "alpha.4";
 var _default = exports.default = version;

package/version/index.mjs

@@ -1,6 +1,6 @@
-export const version = "9.0.0-alpha.3";
+export const version = "9.0.0-alpha.4";
 export const major = Number("9");
 export const minor = Number("0");
 export const patch = Number("0");
-export const prerelease = "alpha.3";
+export const prerelease = "alpha.4";
 export default version;

package/GridLegacy/GridLegacy.d.mts

@@ -1,160 +0,0 @@
-import * as React from 'react';
-import { ResponsiveStyleValue, SxProps, SystemProps, Breakpoint, BreakpointOverrides } from '@mui/system';
-import { IfEquals } from '@mui/types';
-import { Theme } from "../styles/index.mjs";
-import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.mjs";
-import { GridLegacyClasses } from "./gridLegacyClasses.mjs";
-export type GridLegacyDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export type GridLegacySpacing = number | string;
-export type GridLegacyWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-export type GridLegacySize = 'auto' | number;
-export interface RegularBreakpoints {
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  lg?: boolean | GridLegacySize | undefined;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `md` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  md?: boolean | GridLegacySize | undefined;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  sm?: boolean | GridLegacySize | undefined;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  xl?: boolean | GridLegacySize | undefined;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for all the screen sizes with the lowest priority.
-   * @default false
-   */
-  xs?: boolean | GridLegacySize | undefined;
-}
-type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridLegacySize>>;
-interface BreakpointOverridesEmpty {}
-type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, RegularBreakpoints, CustomBreakpoints>;
-export interface GridLegacyOwnProps extends SystemProps<Theme>, Breakpoints {
-  /**
-   * The content of the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<GridLegacyClasses> | undefined;
-  /**
-   * The number of columns.
-   * @default 12
-   */
-  columns?: ResponsiveStyleValue<number> | undefined;
-  /**
-   * Defines the horizontal space between the type `item` components.
-   * It overrides the value of the `spacing` prop.
-   */
-  columnSpacing?: ResponsiveStyleValue<GridLegacySpacing> | undefined;
-  /**
-   * If `true`, the component will have the flex *container* behavior.
-   * You should be wrapping *items* with a *container*.
-   * @default false
-   */
-  container?: boolean | undefined;
-  /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
-   * @default 'row'
-   */
-  direction?: ResponsiveStyleValue<GridLegacyDirection> | undefined;
-  /**
-   * If `true`, the component will have the flex *item* behavior.
-   * You should be wrapping *items* with a *container*.
-   * @default false
-   */
-  item?: boolean | undefined;
-  /**
-   * Defines the vertical space between the type `item` components.
-   * It overrides the value of the `spacing` prop.
-   */
-  rowSpacing?: ResponsiveStyleValue<GridLegacySpacing> | undefined;
-  /**
-   * Defines the space between the type `item` components.
-   * It can only be used on a type `container` component.
-   * @default 0
-   */
-  spacing?: ResponsiveStyleValue<GridLegacySpacing> | undefined;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme> | undefined;
-  /**
-   * Defines the `flex-wrap` style property.
-   * It's applied for all screen sizes.
-   * @default 'wrap'
-   */
-  wrap?: GridLegacyWrap | undefined;
-  /**
-   * If `true`, it sets `min-width: 0` on the item.
-   * Refer to the limitations section of the documentation to better understand the use case.
-   * @default false
-   */
-  zeroMinWidth?: boolean | undefined;
-}
-
-/**
- * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead.
- */
-export interface GridLegacyTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
-  props: AdditionalProps & GridLegacyOwnProps;
-  defaultComponent: RootComponent;
-}
-
-/**
- *
- * Demos:
- *
- * - [GridLegacy](https://next.mui.com/material-ui/react-grid-legacy/)
- *
- * API:
- *
- * - [GridLegacy API](https://next.mui.com/material-ui/api/grid-legacy/)
- *
- * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead.
- */
-declare const GridLegacy: OverridableComponent<GridLegacyTypeMap>;
-
-/**
- * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead.
- */
-export type GridLegacyProps<RootComponent extends React.ElementType = GridLegacyTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<GridLegacyTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType | undefined;
-};
-export default GridLegacy;

package/GridLegacy/GridLegacy.d.ts

@@ -1,160 +0,0 @@
-import * as React from 'react';
-import { ResponsiveStyleValue, SxProps, SystemProps, Breakpoint, BreakpointOverrides } from '@mui/system';
-import { IfEquals } from '@mui/types';
-import { Theme } from "../styles/index.js";
-import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
-import { GridLegacyClasses } from "./gridLegacyClasses.js";
-export type GridLegacyDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export type GridLegacySpacing = number | string;
-export type GridLegacyWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-export type GridLegacySize = 'auto' | number;
-export interface RegularBreakpoints {
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  lg?: boolean | GridLegacySize | undefined;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `md` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  md?: boolean | GridLegacySize | undefined;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  sm?: boolean | GridLegacySize | undefined;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  xl?: boolean | GridLegacySize | undefined;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for all the screen sizes with the lowest priority.
-   * @default false
-   */
-  xs?: boolean | GridLegacySize | undefined;
-}
-type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridLegacySize>>;
-interface BreakpointOverridesEmpty {}
-type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, RegularBreakpoints, CustomBreakpoints>;
-export interface GridLegacyOwnProps extends SystemProps<Theme>, Breakpoints {
-  /**
-   * The content of the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<GridLegacyClasses> | undefined;
-  /**
-   * The number of columns.
-   * @default 12
-   */
-  columns?: ResponsiveStyleValue<number> | undefined;
-  /**
-   * Defines the horizontal space between the type `item` components.
-   * It overrides the value of the `spacing` prop.
-   */
-  columnSpacing?: ResponsiveStyleValue<GridLegacySpacing> | undefined;
-  /**
-   * If `true`, the component will have the flex *container* behavior.
-   * You should be wrapping *items* with a *container*.
-   * @default false
-   */
-  container?: boolean | undefined;
-  /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
-   * @default 'row'
-   */
-  direction?: ResponsiveStyleValue<GridLegacyDirection> | undefined;
-  /**
-   * If `true`, the component will have the flex *item* behavior.
-   * You should be wrapping *items* with a *container*.
-   * @default false
-   */
-  item?: boolean | undefined;
-  /**
-   * Defines the vertical space between the type `item` components.
-   * It overrides the value of the `spacing` prop.
-   */
-  rowSpacing?: ResponsiveStyleValue<GridLegacySpacing> | undefined;
-  /**
-   * Defines the space between the type `item` components.
-   * It can only be used on a type `container` component.
-   * @default 0
-   */
-  spacing?: ResponsiveStyleValue<GridLegacySpacing> | undefined;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme> | undefined;
-  /**
-   * Defines the `flex-wrap` style property.
-   * It's applied for all screen sizes.
-   * @default 'wrap'
-   */
-  wrap?: GridLegacyWrap | undefined;
-  /**
-   * If `true`, it sets `min-width: 0` on the item.
-   * Refer to the limitations section of the documentation to better understand the use case.
-   * @default false
-   */
-  zeroMinWidth?: boolean | undefined;
-}
-
-/**
- * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead.
- */
-export interface GridLegacyTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
-  props: AdditionalProps & GridLegacyOwnProps;
-  defaultComponent: RootComponent;
-}
-
-/**
- *
- * Demos:
- *
- * - [GridLegacy](https://next.mui.com/material-ui/react-grid-legacy/)
- *
- * API:
- *
- * - [GridLegacy API](https://next.mui.com/material-ui/api/grid-legacy/)
- *
- * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead.
- */
-declare const GridLegacy: OverridableComponent<GridLegacyTypeMap>;
-
-/**
- * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead.
- */
-export type GridLegacyProps<RootComponent extends React.ElementType = GridLegacyTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<GridLegacyTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType | undefined;
-};
-export default GridLegacy;