@mui/base - npm Package Compare versions

Comparing version 5.0.0-beta.21 to 5.0.0-beta.22

ClickAwayListener/index.js

@@ -1,3 +0,1 @@
-'use client';
-
 export * from './ClickAwayListener';

Dropdown/index.js

@@ -1,4 +0,2 @@
-'use client';
-
 export * from './Dropdown';
 export * from './Dropdown.types';

FocusTrap/index.js

@@ -1,4 +0,2 @@
-'use client';
-
 export { FocusTrap } from './FocusTrap';
 export * from './FocusTrap.types';

FormControl/index.js

@@ -1,3 +0,1 @@
-'use client';
-
 export { FormControl } from './FormControl';
@@ -4,0 +2,0 @@ export { FormControlContext } from './FormControlContext';

index.js

 /**
- * @mui/base v5.0.0-beta.21
+ * @mui/base v5.0.0-beta.22
  *
@@ -4,0 +4,0 @@ * @license MIT

legacy/ClickAwayListener/index.js

@@ -1,3 +0,1 @@
-'use client';
-
 export * from './ClickAwayListener';

legacy/Dropdown/index.js

@@ -1,4 +0,2 @@
-'use client';
-
 export * from './Dropdown';
 export * from './Dropdown.types';

legacy/FocusTrap/index.js

@@ -1,4 +0,2 @@
-'use client';
-
 export { FocusTrap } from './FocusTrap';
 export * from './FocusTrap.types';

legacy/FormControl/index.js

@@ -1,3 +0,1 @@
-'use client';
-
 export { FormControl } from './FormControl';
@@ -4,0 +2,0 @@ export { FormControlContext } from './FormControlContext';

legacy/index.js

 /**
- * @mui/base v5.0.0-beta.21
+ * @mui/base v5.0.0-beta.22
  *
@@ -4,0 +4,0 @@ * @license MIT

legacy/Modal/index.js

@@ -1,5 +0,3 @@
-'use client';
-
 export { Modal } from './Modal';
 export * from './Modal.types';
 export * from './modalClasses';

legacy/Select/Select.js

@@ -57,2 +57,3 @@ 'use client';
   var areOptionsEqual = props.areOptionsEqual,
+    autoComplete = props.autoComplete,
     autoFocus = props.autoFocus,
@@ -83,3 +84,3 @@ children = props.children,
     valueProp = props.value,
-    other = _objectWithoutProperties(props, ["areOptionsEqual", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "placeholder", "slotProps", "slots", "value"]);
+    other = _objectWithoutProperties(props, ["areOptionsEqual", "autoComplete", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "placeholder", "slotProps", "slots", "value"]);
   var renderValue = renderValueProp != null ? renderValueProp : defaultRenderValue;
@@ -198,3 +199,5 @@ var _React$useState = React.useState(false),
       }))
-    })), /*#__PURE__*/_jsx("input", _extends({}, getHiddenInputProps()))]
+    })), /*#__PURE__*/_jsx("input", _extends({}, getHiddenInputProps(), {
+      autoComplete: autoComplete
+    }))]
   });
@@ -216,2 +219,8 @@ });
   /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoComplete: PropTypes.string,
+  /**
    * If `true`, the select element is focused during the first mount
@@ -218,0 +227,0 @@ * @default false

legacy/Snackbar/Snackbar.js

@@ -25,2 +25,3 @@ 'use client';
  * - [Snackbar](https://mui.com/base-ui/react-snackbar/)
+ * - [Snackbar](https://mui.com/joy-ui/react-snackbar/)
  * - [Snackbar](https://mui.com/material-ui/react-snackbar/)
@@ -27,0 +28,0 @@ *

legacy/useList/listActions.types.js

@@ -9,3 +9,4 @@ export var ListActionTypes = {
   resetHighlight: 'list:resetHighlight',
-  textNavigation: 'list:textNavigation'
+  textNavigation: 'list:textNavigation',
+  clearSelection: 'list:clearSelection'
 };
@@ -12,0 +13,0 @@

legacy/useList/listReducer.js

@@ -153,3 +153,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 }
-function handleItemSelection(item, state, context) {
+
+/**
+ * Handles item selection in a list.
+ *
+ * @param item - The item to be selected.
+ * @param state - The current state of the list.
+ * @param context - The context of the list action.
+ * @returns The new state of the list after the item has been selected, or the original state if the item is disabled.
+ */
+export function handleItemSelection(item, state, context) {
   var itemComparer = context.itemComparer,
@@ -313,2 +322,8 @@ isItemDisabled = context.isItemDisabled,
 }
+function handleClearSelection(state, context) {
+  return _extends({}, state, {
+    selectedValues: [],
+    highlightedValue: moveHighlight(null, 'reset', context)
+  });
+}
 export function listReducer(state, action) {
@@ -330,2 +345,4 @@ var type = action.type,
       return handleResetHighlight(state, context);
+    case ListActionTypes.clearSelection:
+      return handleClearSelection(state, context);
     default:
@@ -332,0 +349,0 @@ return state;

legacy/useSelect/selectReducer.js

 import _extends from "@babel/runtime/helpers/esm/extends";
-import { moveHighlight, listReducer, ListActionTypes } from '../useList';
+import { moveHighlight, listReducer, ListActionTypes, handleItemSelection } from '../useList';
 import { SelectActionTypes } from './useSelect.types';
@@ -15,2 +15,5 @@ export function selectReducer(state, action) {
   }
+  if (action.type === SelectActionTypes.browserAutoFill) {
+    return handleItemSelection(action.item, state, action.context);
+  }
   var newState = listReducer(state, action);
@@ -17,0 +20,0 @@ switch (action.type) {

legacy/useSelect/useSelect.js

@@ -8,3 +8,3 @@ 'use client';
 import { SelectActionTypes } from './useSelect.types';
-import { useList } from '../useList';
+import { ListActionTypes, useList } from '../useList';
 import { defaultOptionStringifier } from './defaultOptionStringifier';
@@ -29,3 +29,2 @@ import { useCompoundParent } from '../utils/useCompound';
 
-var noop = function noop() {};
 function defaultFormValueProvider(selectedOption) {
@@ -313,4 +312,28 @@ if (Array.isArray(selectedOption)) {
   }
+  var createHandleHiddenInputChange = function createHandleHiddenInputChange(externalEventHandlers) {
+    return function (event) {
+      var _externalEventHandler2;
+      externalEventHandlers == null || (_externalEventHandler2 = externalEventHandlers.onChange) == null || _externalEventHandler2.call(externalEventHandlers, event);
+      if (event.defaultMuiPrevented) {
+        return;
+      }
+      var option = options.get(event.target.value);
+
+      // support autofill
+      if (event.target.value === '') {
+        dispatch({
+          type: ListActionTypes.clearSelection
+        });
+      } else if (option !== undefined) {
+        dispatch({
+          type: SelectActionTypes.browserAutoFill,
+          item: option.value,
+          event: event
+        });
+      }
+    };
+  };
   var getHiddenInputProps = function getHiddenInputProps() {
     var externalProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var externalEventHandlers = extractEventHandlers(externalProps);
     return _extends({
@@ -322,5 +345,6 @@ name: name,
       value: getSerializedValue(selectedOptionsMetadata),
-      onChange: noop,
       style: visuallyHiddenStyle
-    }, externalProps);
+    }, externalProps, {
+      onChange: createHandleHiddenInputChange(externalEventHandlers)
+    });
   };
@@ -327,0 +351,0 @@ return {

legacy/useSelect/useSelect.types.js

 export var SelectActionTypes = {
-  buttonClick: 'buttonClick'
+  buttonClick: 'buttonClick',
+  browserAutoFill: 'browserAutoFill'
 };

legacy/utils/mergeSlotProps.js

@@ -27,3 +27,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     // so we can simply merge all the props without having to worry about extracting event handlers.
-    var _joinedClasses = clsx(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className);
+    var _joinedClasses = clsx(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
     var _mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
@@ -30,0 +30,0 @@ var _props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);

Modal/index.js

@@ -1,5 +0,3 @@
-'use client';
-
 export { Modal } from './Modal';
 export * from './Modal.types';
 export * from './modalClasses';

modern/ClickAwayListener/index.js

@@ -1,3 +0,1 @@
-'use client';
-
 export * from './ClickAwayListener';

modern/Dropdown/index.js

@@ -1,4 +0,2 @@
-'use client';
-
 export * from './Dropdown';
 export * from './Dropdown.types';

modern/FocusTrap/index.js

@@ -1,4 +0,2 @@
-'use client';
-
 export { FocusTrap } from './FocusTrap';
 export * from './FocusTrap.types';

modern/FormControl/index.js

@@ -1,3 +0,1 @@
-'use client';
-
 export { FormControl } from './FormControl';
@@ -4,0 +2,0 @@ export { FormControlContext } from './FormControlContext';

modern/index.js

 /**
- * @mui/base v5.0.0-beta.21
+ * @mui/base v5.0.0-beta.22
  *
@@ -4,0 +4,0 @@ * @license MIT

modern/Modal/index.js

@@ -1,5 +0,3 @@
-'use client';
-
 export { Modal } from './Modal';
 export * from './Modal.types';
 export * from './modalClasses';

modern/Select/Select.js

@@ -6,3 +6,3 @@ 'use client';
 var _span;
-const _excluded = ["areOptionsEqual", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "placeholder", "slotProps", "slots", "value"];
+const _excluded = ["areOptionsEqual", "autoComplete", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "placeholder", "slotProps", "slots", "value"];
 import * as React from 'react';
@@ -58,2 +58,3 @@ import PropTypes from 'prop-types';
       areOptionsEqual,
+      autoComplete,
       autoFocus,
@@ -187,3 +188,5 @@ children,
       }))
-    })), /*#__PURE__*/_jsx("input", _extends({}, getHiddenInputProps()))]
+    })), /*#__PURE__*/_jsx("input", _extends({}, getHiddenInputProps(), {
+      autoComplete: autoComplete
+    }))]
   });
@@ -205,2 +208,8 @@ });
   /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoComplete: PropTypes.string,
+  /**
    * If `true`, the select element is focused during the first mount
@@ -207,0 +216,0 @@ * @default false

modern/Snackbar/Snackbar.js

@@ -26,2 +26,3 @@ 'use client';
  * - [Snackbar](https://mui.com/base-ui/react-snackbar/)
+ * - [Snackbar](https://mui.com/joy-ui/react-snackbar/)
  * - [Snackbar](https://mui.com/material-ui/react-snackbar/)
@@ -28,0 +29,0 @@ *

modern/useList/listActions.types.js

@@ -9,3 +9,4 @@ export const ListActionTypes = {
   resetHighlight: 'list:resetHighlight',
-  textNavigation: 'list:textNavigation'
+  textNavigation: 'list:textNavigation',
+  clearSelection: 'list:clearSelection'
 };
@@ -12,0 +13,0 @@

modern/useList/listReducer.js

@@ -147,3 +147,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 }
-function handleItemSelection(item, state, context) {
+
+/**
+ * Handles item selection in a list.
+ *
+ * @param item - The item to be selected.
+ * @param state - The current state of the list.
+ * @param context - The context of the list action.
+ * @returns The new state of the list after the item has been selected, or the original state if the item is disabled.
+ */
+export function handleItemSelection(item, state, context) {
   const {
@@ -306,2 +315,8 @@ itemComparer,
 }
+function handleClearSelection(state, context) {
+  return _extends({}, state, {
+    selectedValues: [],
+    highlightedValue: moveHighlight(null, 'reset', context)
+  });
+}
 export function listReducer(state, action) {
@@ -325,2 +340,4 @@ const {
       return handleResetHighlight(state, context);
+    case ListActionTypes.clearSelection:
+      return handleClearSelection(state, context);
     default:
@@ -327,0 +344,0 @@ return state;

modern/useSelect/selectReducer.js

 import _extends from "@babel/runtime/helpers/esm/extends";
-import { moveHighlight, listReducer, ListActionTypes } from '../useList';
+import { moveHighlight, listReducer, ListActionTypes, handleItemSelection } from '../useList';
 import { SelectActionTypes } from './useSelect.types';
@@ -20,2 +20,5 @@ export function selectReducer(state, action) {
   }
+  if (action.type === SelectActionTypes.browserAutoFill) {
+    return handleItemSelection(action.item, state, action.context);
+  }
   const newState = listReducer(state, action);
@@ -22,0 +25,0 @@ switch (action.type) {

modern/useSelect/useSelect.js

@@ -8,3 +8,3 @@ 'use client';
 import { SelectActionTypes } from './useSelect.types';
-import { useList } from '../useList';
+import { ListActionTypes, useList } from '../useList';
 import { defaultOptionStringifier } from './defaultOptionStringifier';
@@ -29,3 +29,2 @@ import { useCompoundParent } from '../utils/useCompound';
 
-const noop = () => {};
 function defaultFormValueProvider(selectedOption) {
@@ -277,3 +276,24 @@ if (Array.isArray(selectedOption)) {
   }
+  const createHandleHiddenInputChange = externalEventHandlers => event => {
+    externalEventHandlers?.onChange?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    const option = options.get(event.target.value);
+
+    // support autofill
+    if (event.target.value === '') {
+      dispatch({
+        type: ListActionTypes.clearSelection
+      });
+    } else if (option !== undefined) {
+      dispatch({
+        type: SelectActionTypes.browserAutoFill,
+        item: option.value,
+        event
+      });
+    }
+  };
   const getHiddenInputProps = (externalProps = {}) => {
+    const externalEventHandlers = extractEventHandlers(externalProps);
     return _extends({
@@ -285,5 +305,6 @@ name,
       value: getSerializedValue(selectedOptionsMetadata),
-      onChange: noop,
       style: visuallyHiddenStyle
-    }, externalProps);
+    }, externalProps, {
+      onChange: createHandleHiddenInputChange(externalEventHandlers)
+    });
   };
@@ -290,0 +311,0 @@ return {

modern/useSelect/useSelect.types.js

 export const SelectActionTypes = {
-  buttonClick: 'buttonClick'
+  buttonClick: 'buttonClick',
+  browserAutoFill: 'browserAutoFill'
 };

modern/utils/mergeSlotProps.js

@@ -29,3 +29,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     // so we can simply merge all the props without having to worry about extracting event handlers.
-    const joinedClasses = clsx(externalForwardedProps?.className, externalSlotProps?.className, className, additionalProps?.className);
+    const joinedClasses = clsx(additionalProps?.className, className, externalForwardedProps?.className, externalSlotProps?.className);
     const mergedStyle = _extends({}, additionalProps?.style, externalForwardedProps?.style, externalSlotProps?.style);
@@ -32,0 +32,0 @@ const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);

node/ClickAwayListener/index.js

 "use strict";
-'use client';
 
@@ -4,0 +3,0 @@ Object.defineProperty(exports, "__esModule", {

node/Dropdown/index.js

 "use strict";
-'use client';
 
@@ -4,0 +3,0 @@ Object.defineProperty(exports, "__esModule", {

node/FocusTrap/index.js

 "use strict";
-'use client';
 
@@ -4,0 +3,0 @@ Object.defineProperty(exports, "__esModule", {

node/FormControl/index.js

 "use strict";
-'use client';
 
@@ -4,0 +3,0 @@ Object.defineProperty(exports, "__esModule", {

node/index.js

 /**
- * @mui/base v5.0.0-beta.21
+ * @mui/base v5.0.0-beta.22
  *
@@ -4,0 +4,0 @@ * @license MIT

node/Modal/index.js

 "use strict";
-'use client';
 
@@ -4,0 +3,0 @@ Object.defineProperty(exports, "__esModule", {

node/Select/Select.js

@@ -24,3 +24,3 @@ "use strict";
 var _span;
-const _excluded = ["areOptionsEqual", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "placeholder", "slotProps", "slots", "value"];
+const _excluded = ["areOptionsEqual", "autoComplete", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "placeholder", "slotProps", "slots", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -67,2 +67,3 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
       areOptionsEqual,
+      autoComplete,
       autoFocus,
@@ -197,3 +198,5 @@ children,
       }))
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _extends2.default)({}, getHiddenInputProps()))]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _extends2.default)({}, getHiddenInputProps(), {
+      autoComplete: autoComplete
+    }))]
   });
@@ -215,2 +218,8 @@ });
   /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoComplete: _propTypes.default.string,
+  /**
    * If `true`, the select element is focused during the first mount
@@ -217,0 +226,0 @@ * @default false

node/Snackbar/Snackbar.js

@@ -34,2 +34,3 @@ "use strict";
  * - [Snackbar](https://mui.com/base-ui/react-snackbar/)
+ * - [Snackbar](https://mui.com/joy-ui/react-snackbar/)
  * - [Snackbar](https://mui.com/material-ui/react-snackbar/)
@@ -36,0 +37,0 @@ *

node/useList/listActions.types.js

@@ -15,3 +15,4 @@ "use strict";
   resetHighlight: 'list:resetHighlight',
-  textNavigation: 'list:textNavigation'
+  textNavigation: 'list:textNavigation',
+  clearSelection: 'list:clearSelection'
 };
@@ -18,0 +19,0 @@

node/useList/listReducer.js

@@ -7,2 +7,3 @@ "use strict";
 });
+exports.handleItemSelection = handleItemSelection;
 exports.listReducer = listReducer;
@@ -158,2 +159,11 @@ exports.moveHighlight = moveHighlight;
 }
+
+/**
+ * Handles item selection in a list.
+ *
+ * @param item - The item to be selected.
+ * @param state - The current state of the list.
+ * @param context - The context of the list action.
+ * @returns The new state of the list after the item has been selected, or the original state if the item is disabled.
+ */
 function handleItemSelection(item, state, context) {
@@ -320,2 +330,8 @@ const {
 }
+function handleClearSelection(state, context) {
+  return (0, _extends2.default)({}, state, {
+    selectedValues: [],
+    highlightedValue: moveHighlight(null, 'reset', context)
+  });
+}
 function listReducer(state, action) {
@@ -339,2 +355,4 @@ const {
       return handleResetHighlight(state, context);
+    case _listActions.ListActionTypes.clearSelection:
+      return handleClearSelection(state, context);
     default:
@@ -341,0 +359,0 @@ return state;

node/useSelect/selectReducer.js

@@ -28,2 +28,5 @@ "use strict";
   }
+  if (action.type === _useSelect.SelectActionTypes.browserAutoFill) {
+    return (0, _useList.handleItemSelection)(action.item, state, action.context);
+  }
   const newState = (0, _useList.listReducer)(state, action);
@@ -30,0 +33,0 @@ switch (action.type) {

node/useSelect/useSelect.js

@@ -36,3 +36,2 @@ "use strict";
 
-const noop = () => {};
 function defaultFormValueProvider(selectedOption) {
@@ -296,3 +295,25 @@ if (Array.isArray(selectedOption)) {
   }
+  const createHandleHiddenInputChange = externalEventHandlers => event => {
+    var _externalEventHandler2;
+    externalEventHandlers == null || (_externalEventHandler2 = externalEventHandlers.onChange) == null || _externalEventHandler2.call(externalEventHandlers, event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    const option = options.get(event.target.value);
+
+    // support autofill
+    if (event.target.value === '') {
+      dispatch({
+        type: _useList.ListActionTypes.clearSelection
+      });
+    } else if (option !== undefined) {
+      dispatch({
+        type: _useSelect.SelectActionTypes.browserAutoFill,
+        item: option.value,
+        event
+      });
+    }
+  };
   const getHiddenInputProps = (externalProps = {}) => {
+    const externalEventHandlers = (0, _extractEventHandlers.extractEventHandlers)(externalProps);
     return (0, _extends2.default)({
@@ -304,5 +325,6 @@ name,
       value: getSerializedValue(selectedOptionsMetadata),
-      onChange: noop,
       style: visuallyHiddenStyle
-    }, externalProps);
+    }, externalProps, {
+      onChange: createHandleHiddenInputChange(externalEventHandlers)
+    });
   };
@@ -309,0 +331,0 @@ return {

node/useSelect/useSelect.types.js

@@ -8,3 +8,4 @@ "use strict";
 const SelectActionTypes = exports.SelectActionTypes = {
-  buttonClick: 'buttonClick'
+  buttonClick: 'buttonClick',
+  browserAutoFill: 'browserAutoFill'
 };

node/utils/mergeSlotProps.js

@@ -36,3 +36,3 @@ "use strict";
     // so we can simply merge all the props without having to worry about extracting event handlers.
-    const joinedClasses = (0, _clsx.default)(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className);
+    const joinedClasses = (0, _clsx.default)(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
     const mergedStyle = (0, _extends2.default)({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
@@ -39,0 +39,0 @@ const props = (0, _extends2.default)({}, additionalProps, externalForwardedProps, externalSlotProps);

package.json

 {
   "name": "@mui/base",
-  "version": "5.0.0-beta.21",
+  "version": "5.0.0-beta.22",
   "private": false,
@@ -32,4 +32,4 @@ "author": "MUI Team",
     "@floating-ui/react-dom": "^2.0.2",
-    "@mui/types": "^7.2.7",
-    "@mui/utils": "^5.14.15",
+    "@mui/types": "^7.2.8",
+    "@mui/utils": "^5.14.16",
     "@popperjs/core": "^2.11.8",
@@ -36,0 +36,0 @@ "clsx": "^2.0.0",

Select/Select.js

@@ -6,3 +6,3 @@ 'use client';
 var _span;
-const _excluded = ["areOptionsEqual", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "placeholder", "slotProps", "slots", "value"];
+const _excluded = ["areOptionsEqual", "autoComplete", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "placeholder", "slotProps", "slots", "value"];
 import * as React from 'react';
@@ -60,2 +60,3 @@ import PropTypes from 'prop-types';
       areOptionsEqual,
+      autoComplete,
       autoFocus,
@@ -190,3 +191,5 @@ children,
       }))
-    })), /*#__PURE__*/_jsx("input", _extends({}, getHiddenInputProps()))]
+    })), /*#__PURE__*/_jsx("input", _extends({}, getHiddenInputProps(), {
+      autoComplete: autoComplete
+    }))]
   });
@@ -208,2 +211,8 @@ });
   /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoComplete: PropTypes.string,
+  /**
    * If `true`, the select element is focused during the first mount
@@ -210,0 +219,0 @@ * @default false

Select/Select.types.d.ts

@@ -23,2 +23,8 @@ import * as React from 'react';
     /**
+     * This prop helps users to fill forms faster, especially on mobile devices.
+     * The name can be confusing, as it's more like an autofill.
+     * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+     */
+    autoComplete?: string;
+    /**
      * If `true`, the select element is focused during the first mount
@@ -25,0 +31,0 @@ * @default false

Snackbar/Snackbar.d.ts

@@ -8,2 +8,3 @@ import { SnackbarTypeMap } from './Snackbar.types';
  * - [Snackbar](https://mui.com/base-ui/react-snackbar/)
+ * - [Snackbar](https://mui.com/joy-ui/react-snackbar/)
  * - [Snackbar](https://mui.com/material-ui/react-snackbar/)
@@ -10,0 +11,0 @@ *

Snackbar/Snackbar.js

@@ -26,2 +26,3 @@ 'use client';
  * - [Snackbar](https://mui.com/base-ui/react-snackbar/)
+ * - [Snackbar](https://mui.com/joy-ui/react-snackbar/)
  * - [Snackbar](https://mui.com/material-ui/react-snackbar/)
@@ -28,0 +29,0 @@ *

useList/listActions.types.d.ts

@@ -11,2 +11,3 @@ /// <reference types="react" />
     readonly textNavigation: "list:textNavigation";
+    readonly clearSelection: "list:clearSelection";
 };
@@ -51,6 +52,9 @@ interface ItemClickAction<ItemValue> {
 }
+interface ClearSelectionAction {
+    type: typeof ListActionTypes.clearSelection;
+}
 /**
  * A union of all standard actions that can be dispatched to the list reducer.
  */
-export type ListAction<ItemValue> = BlurAction | FocusAction | ItemClickAction<ItemValue> | ItemHoverAction<ItemValue> | ItemsChangeAction<ItemValue> | KeyDownAction | ResetHighlightAction | TextNavigationAction;
+export type ListAction<ItemValue> = BlurAction | FocusAction | ItemClickAction<ItemValue> | ItemHoverAction<ItemValue> | ItemsChangeAction<ItemValue> | KeyDownAction | ResetHighlightAction | TextNavigationAction | ClearSelectionAction;
 export {};

useList/listActions.types.js

@@ -9,3 +9,4 @@ export const ListActionTypes = {
   resetHighlight: 'list:resetHighlight',
-  textNavigation: 'list:textNavigation'
+  textNavigation: 'list:textNavigation',
+  clearSelection: 'list:clearSelection'
 };
@@ -12,0 +13,0 @@

useList/listReducer.d.ts

@@ -23,4 +23,13 @@ import { ListState, ListReducerAction, ListActionContext, SelectionMode } from './useList.types';
 export declare function toggleSelection<ItemValue>(item: ItemValue, selectedValues: ItemValue[], selectionMode: SelectionMode, itemComparer: (item1: ItemValue, item2: ItemValue) => boolean): ItemValue[];
+/**
+ * Handles item selection in a list.
+ *
+ * @param item - The item to be selected.
+ * @param state - The current state of the list.
+ * @param context - The context of the list action.
+ * @returns The new state of the list after the item has been selected, or the original state if the item is disabled.
+ */
+export declare function handleItemSelection<ItemValue, State extends ListState<ItemValue>>(item: ItemValue, state: State, context: ListActionContext<ItemValue>): State;
 export declare function listReducer<ItemValue, State extends ListState<ItemValue>>(state: State, action: ListReducerAction<ItemValue> & {
     context: ListActionContext<ItemValue>;
 }): State;

useList/listReducer.js

@@ -148,3 +148,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 }
-function handleItemSelection(item, state, context) {
+
+/**
+ * Handles item selection in a list.
+ *
+ * @param item - The item to be selected.
+ * @param state - The current state of the list.
+ * @param context - The context of the list action.
+ * @returns The new state of the list after the item has been selected, or the original state if the item is disabled.
+ */
+export function handleItemSelection(item, state, context) {
   const {
@@ -310,2 +319,8 @@ itemComparer,
 }
+function handleClearSelection(state, context) {
+  return _extends({}, state, {
+    selectedValues: [],
+    highlightedValue: moveHighlight(null, 'reset', context)
+  });
+}
 export function listReducer(state, action) {
@@ -329,2 +344,4 @@ const {
       return handleResetHighlight(state, context);
+    case ListActionTypes.clearSelection:
+      return handleClearSelection(state, context);
     default:
@@ -331,0 +348,0 @@ return state;

useSelect/selectReducer.d.ts

 import { ListAction, ListActionContext } from '../useList';
 import { ActionWithContext } from '../utils/useControllableReducer.types';
 import { SelectAction, SelectInternalState } from './useSelect.types';
-export declare function selectReducer<OptionValue>(state: SelectInternalState<OptionValue>, action: ActionWithContext<ListAction<OptionValue> | SelectAction, ListActionContext<OptionValue>>): SelectInternalState<OptionValue>;
+export declare function selectReducer<OptionValue>(state: SelectInternalState<OptionValue>, action: ActionWithContext<ListAction<OptionValue> | SelectAction<OptionValue>, ListActionContext<OptionValue>>): SelectInternalState<OptionValue>;

useSelect/selectReducer.js

 import _extends from "@babel/runtime/helpers/esm/extends";
-import { moveHighlight, listReducer, ListActionTypes } from '../useList';
+import { moveHighlight, listReducer, ListActionTypes, handleItemSelection } from '../useList';
 import { SelectActionTypes } from './useSelect.types';
@@ -21,2 +21,5 @@ export function selectReducer(state, action) {
   }
+  if (action.type === SelectActionTypes.browserAutoFill) {
+    return handleItemSelection(action.item, state, action.context);
+  }
   const newState = listReducer(state, action);
@@ -23,0 +26,0 @@ switch (action.type) {

useSelect/useSelect.js

@@ -8,3 +8,3 @@ 'use client';
 import { SelectActionTypes } from './useSelect.types';
-import { useList } from '../useList';
+import { ListActionTypes, useList } from '../useList';
 import { defaultOptionStringifier } from './defaultOptionStringifier';
@@ -29,3 +29,2 @@ import { useCompoundParent } from '../utils/useCompound';
 
-const noop = () => {};
 function defaultFormValueProvider(selectedOption) {
@@ -289,3 +288,25 @@ if (Array.isArray(selectedOption)) {
   }
+  const createHandleHiddenInputChange = externalEventHandlers => event => {
+    var _externalEventHandler2;
+    externalEventHandlers == null || (_externalEventHandler2 = externalEventHandlers.onChange) == null || _externalEventHandler2.call(externalEventHandlers, event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    const option = options.get(event.target.value);
+
+    // support autofill
+    if (event.target.value === '') {
+      dispatch({
+        type: ListActionTypes.clearSelection
+      });
+    } else if (option !== undefined) {
+      dispatch({
+        type: SelectActionTypes.browserAutoFill,
+        item: option.value,
+        event
+      });
+    }
+  };
   const getHiddenInputProps = (externalProps = {}) => {
+    const externalEventHandlers = extractEventHandlers(externalProps);
     return _extends({
@@ -297,5 +318,6 @@ name,
       value: getSerializedValue(selectedOptionsMetadata),
-      onChange: noop,
       style: visuallyHiddenStyle
-    }, externalProps);
+    }, externalProps, {
+      onChange: createHandleHiddenInputChange(externalEventHandlers)
+    });
   };
@@ -302,0 +324,0 @@ return {

useSelect/useSelect.types.d.ts

@@ -116,3 +116,6 @@ import * as React from 'react';
 };
-export type UseSelectHiddenInputSlotProps<TOther = {}> = React.InputHTMLAttributes<HTMLInputElement> & TOther;
+interface UseSelectHiddenInputSlotEventHandlers {
+    onChange: MuiCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
+}
+export type UseSelectHiddenInputSlotProps<TOther = {}> = UseSelectHiddenInputSlotEventHandlers & React.InputHTMLAttributes<HTMLInputElement> & TOther;
 interface UseSelectListboxSlotEventHandlers {
@@ -148,3 +151,3 @@ onMouseDown: React.MouseEventHandler;
      */
-    dispatch: (action: ListAction<Value> | SelectAction) => void;
+    dispatch: (action: ListAction<Value> | SelectAction<Value>) => void;
     /**
@@ -202,2 +205,3 @@ * Resolver for the button slot's props.
     readonly buttonClick: "buttonClick";
+    readonly browserAutoFill: "browserAutoFill";
 };
@@ -208,3 +212,8 @@ export interface ButtonClickAction {
 }
-export type SelectAction = ButtonClickAction;
+export interface BrowserAutofillAction<OptionValue> {
+    type: typeof SelectActionTypes.browserAutoFill;
+    item: OptionValue;
+    event: React.ChangeEvent;
+}
+export type SelectAction<OptionValue> = ButtonClickAction | BrowserAutofillAction<OptionValue>;
 export interface SelectInternalState<OptionValue> extends ListState<OptionValue> {
@@ -211,0 +220,0 @@ open: boolean;

useSelect/useSelect.types.js

 export const SelectActionTypes = {
-  buttonClick: 'buttonClick'
+  buttonClick: 'buttonClick',
+  browserAutoFill: 'browserAutoFill'
 };

utils/mergeSlotProps.js

@@ -29,3 +29,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     // so we can simply merge all the props without having to worry about extracting event handlers.
-    const joinedClasses = clsx(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className);
+    const joinedClasses = clsx(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
     const mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
@@ -32,0 +32,0 @@ const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);

No alert changes

Improved metrics

Total package byte prevSize

2811084

increased by0.47%

Lines of code

56674

increased by0.39%

Dependency changes

• Updated@mui/types@^7.2.8

• Updated@mui/utils@^5.14.16