@mui/material 6.0.0-beta.5 → 6.0.0-beta.6

package/node/useAutocomplete/useAutocomplete.js

@@ -52,10 +52,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 => {
-  var _listboxRef$current$p;
-  return listboxRef.current !== null && ((_listboxRef$current$p = listboxRef.current.parentElement) == null ? void 0 : _listboxRef$current$p.contains(document.activeElement));
-};
+const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
 const MULTIPLE_DEFAULT_VALUE = [];
 function useAutocomplete(props) {
   const {
@@ -81,10 +78,7 @@ function useAutocomplete(props) {
     freeSolo = false,
     getOptionDisabled,
     getOptionKey,
-    getOptionLabel: getOptionLabelProp = option => {
-      var _option$label;
-      return (_option$label = option.label) != null ? _option$label : option;
-    },
+    getOptionLabel: getOptionLabelProp = option => option.label ?? option,
     groupBy,
     handleHomeEndKeys = !props.freeSolo,
     id: idProp,
@@ -200,14 +194,6 @@ function useAutocomplete(props) {
     resetInputValue(null, value, 'reset');
   }, [value, resetInputValue, focused, previousProps.value, freeSolo]);
   const listboxAvailable = open && filteredOptions.length > 0 && !readOnly;
-  if (process.env.NODE_ENV !== 'production') {
-    if (value !== null && !freeSolo && options.length > 0) {
-      const missingValue = (multiple ? value : [value]).filter(value2 => !options.some(option => isOptionEqualToValue(option, value2)));
-      if (missingValue.length > 0) {
-        console.warn([`MUI: The value provided to ${componentName} is invalid.`, `None of the options match with \`${missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0])}\`.`, 'You can use the `isOptionEqualToValue` prop to customize the equality test.'].join('\n'));
-      }
-    }
-  }
   const focusTag = (0, _utils.unstable_useEventCallback)(tagToFocus => {
     if (tagToFocus === -1) {
       inputRef.current.focus();
@@ -961,11 +947,10 @@ function useAutocomplete(props) {
       index,
       option
     }) => {
-      var _getOptionKey;
       const selected = (multiple ? value : [value]).some(value2 => value2 != null && isOptionEqualToValue(option, value2));
       const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
       return {
-        key: (_getOptionKey = getOptionKey == null ? void 0 : getOptionKey(option)) != null ? _getOptionKey : getOptionLabel(option),
+        key: getOptionKey?.(option) ?? getOptionLabel(option),
         tabIndex: -1,
         role: 'option',
         id: `${id}-option-${index}`,

package/node/useLazyRipple/useLazyRipple.js

@@ -69,22 +69,13 @@ class LazyRipple {
   /* Ripple API */
 
   start(...args) {
-    this.mount().then(() => {
-      var _this$ref$current;
-      return (_this$ref$current = this.ref.current) == null ? void 0 : _this$ref$current.start(...args);
-    });
+    this.mount().then(() => this.ref.current?.start(...args));
   }
   stop(...args) {
-    this.mount().then(() => {
-      var _this$ref$current2;
-      return (_this$ref$current2 = this.ref.current) == null ? void 0 : _this$ref$current2.stop(...args);
-    });
+    this.mount().then(() => this.ref.current?.stop(...args));
   }
   pulsate(...args) {
-    this.mount().then(() => {
-      var _this$ref$current3;
-      return (_this$ref$current3 = this.ref.current) == null ? void 0 : _this$ref$current3.pulsate(...args);
-    });
+    this.mount().then(() => this.ref.current?.pulsate(...args));
   }
 }
 exports.LazyRipple = LazyRipple;

package/node/utils/useSlot.js

@@ -68,7 +68,7 @@ name, parameters) {
     externalForwardedProps: name === 'root' ? other : undefined,
     externalSlotProps: resolvedComponentsProps
   });
-  const ref = (0, _useForkRef.default)(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, parameters.ref);
+  const ref = (0, _useForkRef.default)(internalRef, resolvedComponentsProps?.ref, parameters.ref);
   const slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
   const finalOwnerState = {
     ...ownerState,

package/node/version/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.preReleaseNumber = exports.preReleaseLabel = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.0.0-beta.5";
+const version = exports.version = "6.0.0-beta.6";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("0");
 const patch = exports.patch = Number("0");
 const preReleaseLabel = exports.preReleaseLabel = "beta" || null;
-const preReleaseNumber = exports.preReleaseNumber = Number("5") || null;
+const preReleaseNumber = exports.preReleaseNumber = Number("6") || null;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.0-beta.5",
+  "version": "6.0.0-beta.6",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -29,24 +29,24 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@popperjs/core": "^2.11.8",
-    "@types/react-transition-group": "^4.4.10",
+    "@types/react-transition-group": "^4.4.11",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "@mui/system": "6.0.0-beta.5",
-    "@mui/utils": "6.0.0-beta.5",
-    "@mui/types": "^7.2.14",
-    "@mui/core-downloads-tracker": "^6.0.0-beta.5"
+    "@mui/core-downloads-tracker": "^6.0.0-beta.6",
+    "@mui/system": "6.0.0-beta.6",
+    "@mui/types": "^7.2.15",
+    "@mui/utils": "6.0.0-beta.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
-    "@mui/material-pigment-css": "^6.0.0-beta.5"
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "@mui/material-pigment-css": "^6.0.0-beta.6"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -68,7 +68,7 @@
     "directory": "build"
   },
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.0.0"
   },
   "pigment-css": {
     "vite": {

package/styles/createGetSelector.d.ts

@@ -5,15 +5,17 @@ declare const _default: <T extends {
     cssVarPrefix?: string | undefined;
 }>(theme: T) => (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | {
     ':root': Record<string, any>;
-    '@media (prefers-color-scheme: dark) { :root': Record<string, any>;
+    "@media (prefers-color-scheme: dark)": {
+        ':root': Record<string, any>;
+    };
 } | {
     [x: string]: Record<string, any>;
     ':root'?: undefined;
-    '@media (prefers-color-scheme: dark) { :root'?: undefined;
+    "@media (prefers-color-scheme: dark)"?: undefined;
 } | {
     ':root': {
         [x: string]: any;
     };
-    '@media (prefers-color-scheme: dark) { :root'?: undefined;
+    "@media (prefers-color-scheme: dark)"?: undefined;
 };
 export default _default;

package/styles/createGetSelector.js

@@ -22,7 +22,9 @@ export default (theme => (colorScheme, css) => {
       if (rule === 'media') {
         return {
           ':root': css,
-          '@media (prefers-color-scheme: dark) { :root': excludedVariables
+          [`@media (prefers-color-scheme: dark)`]: {
+            ':root': excludedVariables
+          }
         };
       }
       if (rule) {
@@ -43,7 +45,11 @@ export default (theme => (colorScheme, css) => {
     }
   } else if (colorScheme) {
     if (rule === 'media') {
-      return `@media (prefers-color-scheme: ${String(colorScheme)}) { :root`;
+      return {
+        [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
+          ':root': css
+        }
+      };
     }
     if (rule) {
       return rule.replace('%s', String(colorScheme));

package/useAutocomplete/useAutocomplete.d.ts

@@ -49,7 +49,7 @@ export interface UseAutocompleteProps<
    * Temporary for Joy UI because the parent listbox is the document object
    * TODO v6: Normalize the logic and remove this param.
    */
-  unstable_isActiveElementInListbox?: (listbox: React.RefObject<HTMLElement>) => boolean;
+  unstable_isActiveElementInListbox?: (listbox: React.RefObject<HTMLElement | null>) => boolean;
   /**
    * If `true`, the portion of the selected suggestion that the user hasn't typed,
    * known as the completion string, appears inline after the input cursor in the textbox.
@@ -281,7 +281,7 @@ export interface UseAutocompleteProps<
    */
   openOnFocus?: boolean;
   /**
-   * Array of options.
+   * A list of options that will be shown in the Autocomplete.
    */
   options: ReadonlyArray<Value>;
   /**

package/useAutocomplete/useAutocomplete.js

@@ -187,14 +187,6 @@ function useAutocomplete(props) {
     resetInputValue(null, value, 'reset');
   }, [value, resetInputValue, focused, previousProps.value, freeSolo]);
   const listboxAvailable = open && filteredOptions.length > 0 && !readOnly;
-  if (process.env.NODE_ENV !== 'production') {
-    if (value !== null && !freeSolo && options.length > 0) {
-      const missingValue = (multiple ? value : [value]).filter(value2 => !options.some(option => isOptionEqualToValue(option, value2)));
-      if (missingValue.length > 0) {
-        console.warn([`MUI: The value provided to ${componentName} is invalid.`, `None of the options match with \`${missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0])}\`.`, 'You can use the `isOptionEqualToValue` prop to customize the equality test.'].join('\n'));
-      }
-    }
-  }
   const focusTag = useEventCallback(tagToFocus => {
     if (tagToFocus === -1) {
       inputRef.current.focus();

package/version/index.js

@@ -1,7 +1,7 @@
-export const version = "6.0.0-beta.5";
+export const version = "6.0.0-beta.6";
 export const major = Number("6");
 export const minor = Number("0");
 export const patch = Number("0");
 export const preReleaseLabel = "beta" || null;
-export const preReleaseNumber = Number("5") || null;
+export const preReleaseNumber = Number("6") || null;
 export default version;