@mui/base - npm Package Compare versions

Comparing version 5.0.0-beta.11 to 5.0.0-beta.12

index.d.ts

@@ -19,2 +19,3 @@ export * from './utils';
 export * from './Popper';
+export * from './Unstable_Popup';
 export * from './Portal';
@@ -21,0 +22,0 @@ export * from './Select';

index.js

 /**
- * @mui/base v5.0.0-beta.11
+ * @mui/base v5.0.0-beta.12
  *
@@ -28,2 +28,3 @@ * @license MIT
 export { Popper } from './Popper';
+export * from './Unstable_Popup';
 export { Portal } from './Portal';
@@ -30,0 +31,0 @@ export * from './Select';

legacy/index.js

 /**
- * @mui/base v5.0.0-beta.11
+ * @mui/base v5.0.0-beta.12
  *
@@ -28,2 +28,3 @@ * @license MIT
 export { Popper } from './Popper';
+export * from './Unstable_Popup';
 export { Portal } from './Portal';
@@ -30,0 +31,0 @@ export * from './Select';

legacy/Select/Select.js

@@ -29,26 +29,2 @@ 'use client';
 }
-function defaultFormValueProvider(selectedOption) {
-  if (Array.isArray(selectedOption)) {
-    if (selectedOption.length === 0) {
-      return '';
-    }
-    if (selectedOption.every(function (o) {
-      return typeof o.value === 'string' || typeof o.value === 'number' || typeof o.value === 'boolean';
-    })) {
-      return selectedOption.map(function (o) {
-        return String(o.value);
-      });
-    }
-    return JSON.stringify(selectedOption.map(function (o) {
-      return o.value;
-    }));
-  }
-  if ((selectedOption == null ? void 0 : selectedOption.value) == null) {
-    return '';
-  }
-  if (typeof selectedOption.value === 'string' || typeof selectedOption.value === 'number') {
-    return selectedOption.value;
-  }
-  return JSON.stringify(selectedOption.value);
-}
 function useUtilityClasses(ownerState) {
@@ -87,4 +63,3 @@ var active = ownerState.active,
     disabledProp = props.disabled,
-    _props$getSerializedV = props.getSerializedValue,
-    getSerializedValue = _props$getSerializedV === void 0 ? defaultFormValueProvider : _props$getSerializedV,
+    getSerializedValue = props.getSerializedValue,
     listboxId = props.listboxId,
@@ -95,2 +70,4 @@ listboxOpenProp = props.listboxOpen,
     name = props.name,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
     onChange = props.onChange,
@@ -106,3 +83,3 @@ onListboxOpenChange = props.onListboxOpenChange,
     valueProp = props.value,
-    other = _objectWithoutProperties(props, ["areOptionsEqual", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "slotProps", "slots", "value"]);
+    other = _objectWithoutProperties(props, ["areOptionsEqual", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "slotProps", "slots", "value"]);
   var renderValue = renderValueProp != null ? renderValueProp : defaultRenderValue;
@@ -127,2 +104,5 @@ var _React$useState = React.useState(false),
   var _useSelect = useSelect({
+      name: name,
+      required: required,
+      getSerializedValue: getSerializedValue,
       areOptionsEqual: areOptionsEqual,
@@ -147,2 +127,3 @@ buttonRef: handleButtonRef,
     getListboxProps = _useSelect.getListboxProps,
+    getHiddenInputProps = _useSelect.getHiddenInputProps,
     getOptionMetadata = _useSelect.getOptionMetadata,
@@ -214,7 +195,3 @@ value = _useSelect.value,
       }))
-    })), name && /*#__PURE__*/_jsx("input", {
-      type: "hidden",
-      name: name,
-      value: getSerializedValue(selectedOptionsMetadata)
-    })]
+    })), /*#__PURE__*/_jsx("input", _extends({}, getHiddenInputProps()))]
   });
@@ -311,2 +288,7 @@ });
   /**
+   * If `true`, the Select cannot be empty when submitting form.
+   * @default false
+   */
+  required: PropTypes.bool,
+  /**
    * The props used for each slot inside the Input.
@@ -313,0 +295,0 @@ * @default {}

legacy/unstable_useModal/ModalManager.js

@@ -83,3 +83,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
     } else {
-      // Improve Gatsby support
+      // Support html overflow-y: auto for scroll stability between pages
       // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
@@ -86,0 +86,0 @@ var parent = container.parentElement;

legacy/useSelect/useSelect.js

@@ -13,2 +13,34 @@ 'use client';
 import { combineHooksSlotProps } from '../utils/combineHooksSlotProps';
+// visually hidden style based on https://webaim.org/techniques/css/invisiblecontent/
+var visuallyHiddenStyle = {
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  left: '50%',
+  bottom: 0 // to display the native browser validation error at the bottom of the Select.
+};
+
+var noop = function noop() {};
+function defaultFormValueProvider(selectedOption) {
+  if (Array.isArray(selectedOption)) {
+    if (selectedOption.length === 0) {
+      return '';
+    }
+    return JSON.stringify(selectedOption.map(function (o) {
+      return o.value;
+    }));
+  }
+  if ((selectedOption == null ? void 0 : selectedOption.value) == null) {
+    return '';
+  }
+  if (typeof selectedOption.value === 'string' || typeof selectedOption.value === 'number') {
+    return selectedOption.value;
+  }
+  return JSON.stringify(selectedOption.value);
+}
 function preventDefault(event) {
@@ -40,2 +72,4 @@ event.preventDefault();
     multiple = _props$multiple === void 0 ? false : _props$multiple,
+    name = props.name,
+    required = props.required,
     onChange = props.onChange,
@@ -48,2 +82,4 @@ onHighlightChange = props.onHighlightChange,
     getOptionAsString = _props$getOptionAsStr === void 0 ? defaultOptionStringifier : _props$getOptionAsStr,
+    _props$getSerializedV = props.getSerializedValue,
+    getSerializedValue = _props$getSerializedV === void 0 ? defaultFormValueProvider : _props$getSerializedV,
     valueProp = props.value;
@@ -265,2 +301,25 @@ var buttonRef = React.useRef(null);
   }
+  var selectedOptionsMetadata;
+  if (multiple) {
+    selectedOptionsMetadata = selectValue.map(function (v) {
+      return getOptionMetadata(v);
+    }).filter(function (o) {
+      return o !== undefined;
+    });
+  } else {
+    var _getOptionMetadata;
+    selectedOptionsMetadata = (_getOptionMetadata = getOptionMetadata(selectValue)) != null ? _getOptionMetadata : null;
+  }
+  var getHiddenInputProps = function getHiddenInputProps() {
+    var otherHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return _extends({
+      name: name,
+      tabIndex: -1,
+      'aria-hidden': true,
+      required: required ? true : undefined,
+      value: getSerializedValue(selectedOptionsMetadata),
+      onChange: noop,
+      style: visuallyHiddenStyle
+    }, otherHandlers);
+  };
   return {
@@ -274,2 +333,3 @@ buttonActive: buttonActive,
     getButtonProps: getButtonProps,
+    getHiddenInputProps: getHiddenInputProps,
     getListboxProps: getListboxProps,
@@ -276,0 +336,0 @@ getOptionMetadata: getOptionMetadata,

modern/index.js

 /**
- * @mui/base v5.0.0-beta.11
+ * @mui/base v5.0.0-beta.12
  *
@@ -28,2 +28,3 @@ * @license MIT
 export { Popper } from './Popper';
+export * from './Unstable_Popup';
 export { Portal } from './Portal';
@@ -30,0 +31,0 @@ export * from './Select';

modern/Select/Select.js

@@ -5,3 +5,3 @@ 'use client';
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["areOptionsEqual", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "slotProps", "slots", "value"];
+const _excluded = ["areOptionsEqual", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "slotProps", "slots", "value"];
 import * as React from 'react';
@@ -28,20 +28,2 @@ import PropTypes from 'prop-types';
 }
-function defaultFormValueProvider(selectedOption) {
-  if (Array.isArray(selectedOption)) {
-    if (selectedOption.length === 0) {
-      return '';
-    }
-    if (selectedOption.every(o => typeof o.value === 'string' || typeof o.value === 'number' || typeof o.value === 'boolean')) {
-      return selectedOption.map(o => String(o.value));
-    }
-    return JSON.stringify(selectedOption.map(o => o.value));
-  }
-  if (selectedOption?.value == null) {
-    return '';
-  }
-  if (typeof selectedOption.value === 'string' || typeof selectedOption.value === 'number') {
-    return selectedOption.value;
-  }
-  return JSON.stringify(selectedOption.value);
-}
 function useUtilityClasses(ownerState) {
@@ -81,3 +63,3 @@ const {
       disabled: disabledProp,
-      getSerializedValue = defaultFormValueProvider,
+      getSerializedValue,
       listboxId,
@@ -87,2 +69,3 @@ listboxOpen: listboxOpenProp,
       name,
+      required = false,
       onChange,
@@ -120,2 +103,3 @@ onListboxOpenChange,
     getListboxProps,
+    getHiddenInputProps,
     getOptionMetadata,
@@ -125,2 +109,5 @@ value,
   } = useSelect({
+    name,
+    required,
+    getSerializedValue,
     areOptionsEqual,
@@ -197,7 +184,3 @@ buttonRef: handleButtonRef,
       }))
-    })), name && /*#__PURE__*/_jsx("input", {
-      type: "hidden",
-      name: name,
-      value: getSerializedValue(selectedOptionsMetadata)
-    })]
+    })), /*#__PURE__*/_jsx("input", _extends({}, getHiddenInputProps()))]
   });
@@ -294,2 +277,7 @@ });
   /**
+   * If `true`, the Select cannot be empty when submitting form.
+   * @default false
+   */
+  required: PropTypes.bool,
+  /**
    * The props used for each slot inside the Input.
@@ -296,0 +284,0 @@ * @default {}

modern/unstable_useModal/ModalManager.js

@@ -80,3 +80,3 @@ import { unstable_ownerWindow as ownerWindow, unstable_ownerDocument as ownerDocument, unstable_getScrollbarSize as getScrollbarSize } from '@mui/utils';
     } else {
-      // Improve Gatsby support
+      // Support html overflow-y: auto for scroll stability between pages
       // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
@@ -83,0 +83,0 @@ const parent = container.parentElement;

modern/useSelect/useSelect.js

@@ -13,2 +13,32 @@ 'use client';
 import { combineHooksSlotProps } from '../utils/combineHooksSlotProps';
+// visually hidden style based on https://webaim.org/techniques/css/invisiblecontent/
+const visuallyHiddenStyle = {
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  left: '50%',
+  bottom: 0 // to display the native browser validation error at the bottom of the Select.
+};
+
+const noop = () => {};
+function defaultFormValueProvider(selectedOption) {
+  if (Array.isArray(selectedOption)) {
+    if (selectedOption.length === 0) {
+      return '';
+    }
+    return JSON.stringify(selectedOption.map(o => o.value));
+  }
+  if (selectedOption?.value == null) {
+    return '';
+  }
+  if (typeof selectedOption.value === 'string' || typeof selectedOption.value === 'number') {
+    return selectedOption.value;
+  }
+  return JSON.stringify(selectedOption.value);
+}
 function preventDefault(event) {
@@ -38,2 +68,4 @@ event.preventDefault();
     multiple = false,
+    name,
+    required,
     onChange,
@@ -45,2 +77,3 @@ onHighlightChange,
     getOptionAsString = defaultOptionStringifier,
+    getSerializedValue = defaultFormValueProvider,
     value: valueProp
@@ -237,2 +270,17 @@ } = props;
   }
+  let selectedOptionsMetadata;
+  if (multiple) {
+    selectedOptionsMetadata = selectValue.map(v => getOptionMetadata(v)).filter(o => o !== undefined);
+  } else {
+    selectedOptionsMetadata = getOptionMetadata(selectValue) ?? null;
+  }
+  const getHiddenInputProps = (otherHandlers = {}) => _extends({
+    name,
+    tabIndex: -1,
+    'aria-hidden': true,
+    required: required ? true : undefined,
+    value: getSerializedValue(selectedOptionsMetadata),
+    onChange: noop,
+    style: visuallyHiddenStyle
+  }, otherHandlers);
   return {
@@ -246,2 +294,3 @@ buttonActive,
     getButtonProps,
+    getHiddenInputProps,
     getListboxProps,
@@ -248,0 +297,0 @@ getOptionMetadata,

node/index.js

 /**
- * @mui/base v5.0.0-beta.11
+ * @mui/base v5.0.0-beta.12
  *
@@ -233,2 +233,14 @@ * @license MIT
 var _Popper = require("./Popper");
+var _Unstable_Popup = require("./Unstable_Popup");
+Object.keys(_Unstable_Popup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Unstable_Popup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Unstable_Popup[key];
+    }
+  });
+});
 var _Portal = require("./Portal");
@@ -235,0 +247,0 @@ var _Select = require("./Select");

node/Select/Select.js

@@ -23,3 +23,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["areOptionsEqual", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "slotProps", "slots", "value"];
+const _excluded = ["areOptionsEqual", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "slotProps", "slots", "value"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -36,20 +36,2 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 }
-function defaultFormValueProvider(selectedOption) {
-  if (Array.isArray(selectedOption)) {
-    if (selectedOption.length === 0) {
-      return '';
-    }
-    if (selectedOption.every(o => typeof o.value === 'string' || typeof o.value === 'number' || typeof o.value === 'boolean')) {
-      return selectedOption.map(o => String(o.value));
-    }
-    return JSON.stringify(selectedOption.map(o => o.value));
-  }
-  if ((selectedOption == null ? void 0 : selectedOption.value) == null) {
-    return '';
-  }
-  if (typeof selectedOption.value === 'string' || typeof selectedOption.value === 'number') {
-    return selectedOption.value;
-  }
-  return JSON.stringify(selectedOption.value);
-}
 function useUtilityClasses(ownerState) {
@@ -90,3 +72,3 @@ const {
       disabled: disabledProp,
-      getSerializedValue = defaultFormValueProvider,
+      getSerializedValue,
       listboxId,
@@ -96,2 +78,3 @@ listboxOpen: listboxOpenProp,
       name,
+      required = false,
       onChange,
@@ -129,2 +112,3 @@ onListboxOpenChange,
     getListboxProps,
+    getHiddenInputProps,
     getOptionMetadata,
@@ -134,2 +118,5 @@ value,
   } = (0, _useSelect.useSelect)({
+    name,
+    required,
+    getSerializedValue,
     areOptionsEqual,
@@ -207,7 +194,3 @@ buttonRef: handleButtonRef,
       }))
-    })), name && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      type: "hidden",
-      name: name,
-      value: getSerializedValue(selectedOptionsMetadata)
-    })]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _extends2.default)({}, getHiddenInputProps()))]
   });
@@ -305,2 +288,7 @@ });
   /**
+   * If `true`, the Select cannot be empty when submitting form.
+   * @default false
+   */
+  required: _propTypes.default.bool,
+  /**
    * The props used for each slot inside the Input.
@@ -307,0 +295,0 @@ * @default {}

node/unstable_useModal/ModalManager.js

@@ -87,3 +87,3 @@ "use strict";
     } else {
-      // Improve Gatsby support
+      // Support html overflow-y: auto for scroll stability between pages
       // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
@@ -90,0 +90,0 @@ const parent = container.parentElement;

node/useSelect/useSelect.js

@@ -21,2 +21,32 @@ "use strict";
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// visually hidden style based on https://webaim.org/techniques/css/invisiblecontent/
+const visuallyHiddenStyle = {
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  left: '50%',
+  bottom: 0 // to display the native browser validation error at the bottom of the Select.
+};
+
+const noop = () => {};
+function defaultFormValueProvider(selectedOption) {
+  if (Array.isArray(selectedOption)) {
+    if (selectedOption.length === 0) {
+      return '';
+    }
+    return JSON.stringify(selectedOption.map(o => o.value));
+  }
+  if ((selectedOption == null ? void 0 : selectedOption.value) == null) {
+    return '';
+  }
+  if (typeof selectedOption.value === 'string' || typeof selectedOption.value === 'number') {
+    return selectedOption.value;
+  }
+  return JSON.stringify(selectedOption.value);
+}
 function preventDefault(event) {
@@ -46,2 +76,4 @@ event.preventDefault();
     multiple = false,
+    name,
+    required,
     onChange,
@@ -53,2 +85,3 @@ onHighlightChange,
     getOptionAsString = _defaultOptionStringifier.defaultOptionStringifier,
+    getSerializedValue = defaultFormValueProvider,
     value: valueProp
@@ -256,2 +289,18 @@ } = props;
   }
+  let selectedOptionsMetadata;
+  if (multiple) {
+    selectedOptionsMetadata = selectValue.map(v => getOptionMetadata(v)).filter(o => o !== undefined);
+  } else {
+    var _getOptionMetadata;
+    selectedOptionsMetadata = (_getOptionMetadata = getOptionMetadata(selectValue)) != null ? _getOptionMetadata : null;
+  }
+  const getHiddenInputProps = (otherHandlers = {}) => (0, _extends2.default)({
+    name,
+    tabIndex: -1,
+    'aria-hidden': true,
+    required: required ? true : undefined,
+    value: getSerializedValue(selectedOptionsMetadata),
+    onChange: noop,
+    style: visuallyHiddenStyle
+  }, otherHandlers);
   return {
@@ -265,2 +314,3 @@ buttonActive,
     getButtonProps,
+    getHiddenInputProps,
     getListboxProps,
@@ -267,0 +317,0 @@ getOptionMetadata,

package.json

 {
   "name": "@mui/base",
-  "version": "5.0.0-beta.11",
+  "version": "5.0.0-beta.12",
   "private": false,
@@ -40,6 +40,7 @@ "author": "MUI Team",
   "dependencies": {
-    "@babel/runtime": "^7.22.6",
+    "@babel/runtime": "^7.22.10",
     "@emotion/is-prop-valid": "^1.2.1",
+    "@floating-ui/react-dom": "^2.0.1",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.14.5",
+    "@mui/utils": "^5.14.6",
     "@popperjs/core": "^2.11.8",
@@ -46,0 +47,0 @@ "clsx": "^2.0.0",

Select/Select.js

@@ -5,3 +5,3 @@ 'use client';
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["areOptionsEqual", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "slotProps", "slots", "value"];
+const _excluded = ["areOptionsEqual", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "slotProps", "slots", "value"];
 import * as React from 'react';
@@ -29,20 +29,2 @@ import PropTypes from 'prop-types';
 }
-function defaultFormValueProvider(selectedOption) {
-  if (Array.isArray(selectedOption)) {
-    if (selectedOption.length === 0) {
-      return '';
-    }
-    if (selectedOption.every(o => typeof o.value === 'string' || typeof o.value === 'number' || typeof o.value === 'boolean')) {
-      return selectedOption.map(o => String(o.value));
-    }
-    return JSON.stringify(selectedOption.map(o => o.value));
-  }
-  if ((selectedOption == null ? void 0 : selectedOption.value) == null) {
-    return '';
-  }
-  if (typeof selectedOption.value === 'string' || typeof selectedOption.value === 'number') {
-    return selectedOption.value;
-  }
-  return JSON.stringify(selectedOption.value);
-}
 function useUtilityClasses(ownerState) {
@@ -83,3 +65,3 @@ const {
       disabled: disabledProp,
-      getSerializedValue = defaultFormValueProvider,
+      getSerializedValue,
       listboxId,
@@ -89,2 +71,3 @@ listboxOpen: listboxOpenProp,
       name,
+      required = false,
       onChange,
@@ -122,2 +105,3 @@ onListboxOpenChange,
     getListboxProps,
+    getHiddenInputProps,
     getOptionMetadata,
@@ -127,2 +111,5 @@ value,
   } = useSelect({
+    name,
+    required,
+    getSerializedValue,
     areOptionsEqual,
@@ -200,7 +187,3 @@ buttonRef: handleButtonRef,
       }))
-    })), name && /*#__PURE__*/_jsx("input", {
-      type: "hidden",
-      name: name,
-      value: getSerializedValue(selectedOptionsMetadata)
-    })]
+    })), /*#__PURE__*/_jsx("input", _extends({}, getHiddenInputProps()))]
   });
@@ -297,2 +280,7 @@ });
   /**
+   * If `true`, the Select cannot be empty when submitting form.
+   * @default false
+   */
+  required: PropTypes.bool,
+  /**
    * The props used for each slot inside the Input.
@@ -299,0 +287,0 @@ * @default {}

Select/Select.types.d.ts

@@ -101,2 +101,7 @@ import * as React from 'react';
     /**
+     * If `true`, the Select cannot be empty when submitting form.
+     * @default false
+     */
+    required?: boolean;
+    /**
      * The components used for each slot inside the Select.
@@ -103,0 +108,0 @@ * Either a string to use a HTML element or a component.

unstable_useModal/ModalManager.js

@@ -80,3 +80,3 @@ import { unstable_ownerWindow as ownerWindow, unstable_ownerDocument as ownerDocument, unstable_getScrollbarSize as getScrollbarSize } from '@mui/utils';
     } else {
-      // Improve Gatsby support
+      // Support html overflow-y: auto for scroll stability between pages
       // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
@@ -83,0 +83,0 @@ const parent = container.parentElement;

useInput/useInput.types.d.ts

@@ -18,7 +18,7 @@ import * as React from 'react';
     error?: boolean;
-    onBlur?: React.FocusEventHandler;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     onClick?: React.MouseEventHandler;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    onFocus?: React.FocusEventHandler;
-    inputRef?: React.Ref<HTMLInputElement>;
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
     /**
@@ -38,7 +38,7 @@ * If `true`, the `input` element is required.
     defaultValue: string | number | readonly string[] | undefined;
-    ref: React.RefCallback<HTMLInputElement> | null;
+    ref: React.RefCallback<HTMLInputElement | HTMLTextAreaElement> | null;
     value: string | number | readonly string[] | undefined;
-    onBlur: React.FocusEventHandler;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
-    onFocus: React.FocusEventHandler;
+    onBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onFocus: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     required: boolean;
@@ -77,3 +77,3 @@ disabled: boolean;
     getRootProps: <TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseInputRootSlotProps<TOther>;
-    inputRef: React.RefCallback<HTMLInputElement> | null;
+    inputRef: React.RefCallback<HTMLInputElement | HTMLTextAreaElement> | null;
     /**
@@ -80,0 +80,0 @@ * If `true`, the `input` will indicate that it's required.

useSelect/useSelect.js

@@ -13,2 +13,32 @@ 'use client';
 import { combineHooksSlotProps } from '../utils/combineHooksSlotProps';
+// visually hidden style based on https://webaim.org/techniques/css/invisiblecontent/
+const visuallyHiddenStyle = {
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  left: '50%',
+  bottom: 0 // to display the native browser validation error at the bottom of the Select.
+};
+
+const noop = () => {};
+function defaultFormValueProvider(selectedOption) {
+  if (Array.isArray(selectedOption)) {
+    if (selectedOption.length === 0) {
+      return '';
+    }
+    return JSON.stringify(selectedOption.map(o => o.value));
+  }
+  if ((selectedOption == null ? void 0 : selectedOption.value) == null) {
+    return '';
+  }
+  if (typeof selectedOption.value === 'string' || typeof selectedOption.value === 'number') {
+    return selectedOption.value;
+  }
+  return JSON.stringify(selectedOption.value);
+}
 function preventDefault(event) {
@@ -38,2 +68,4 @@ event.preventDefault();
     multiple = false,
+    name,
+    required,
     onChange,
@@ -45,2 +77,3 @@ onHighlightChange,
     getOptionAsString = defaultOptionStringifier,
+    getSerializedValue = defaultFormValueProvider,
     value: valueProp
@@ -248,2 +281,18 @@ } = props;
   }
+  let selectedOptionsMetadata;
+  if (multiple) {
+    selectedOptionsMetadata = selectValue.map(v => getOptionMetadata(v)).filter(o => o !== undefined);
+  } else {
+    var _getOptionMetadata;
+    selectedOptionsMetadata = (_getOptionMetadata = getOptionMetadata(selectValue)) != null ? _getOptionMetadata : null;
+  }
+  const getHiddenInputProps = (otherHandlers = {}) => _extends({
+    name,
+    tabIndex: -1,
+    'aria-hidden': true,
+    required: required ? true : undefined,
+    value: getSerializedValue(selectedOptionsMetadata),
+    onChange: noop,
+    style: visuallyHiddenStyle
+  }, otherHandlers);
   return {
@@ -257,2 +306,3 @@ buttonActive,
     getButtonProps,
+    getHiddenInputProps,
     getListboxProps,
@@ -259,0 +309,0 @@ getOptionMetadata,

useSelect/useSelect.types.d.ts

@@ -57,2 +57,12 @@ import * as React from 'react';
     /**
+     * The `name` attribute of the hidden input element.
+     * This is useful when the select is embedded in a form and you want to access the selected value in the form data.
+     */
+    name?: string;
+    /**
+     * If `true`, the select embedded in a form must have a selected value.
+     * Otherwise, the form submission will fail.
+     */
+    required?: boolean;
+    /**
      * Callback fired when an option is selected.
@@ -80,2 +90,8 @@ */
     /**
+     * A function to convert the currently selected value to a string.
+     * Used to set a value of a hidden input associated with the select,
+     * so that the selected value can be posted with a form.
+     */
+    getSerializedValue?: (option: SelectValue<SelectOption<OptionValue>, Multiple>) => React.InputHTMLAttributes<HTMLInputElement>['value'];
+    /**
      * A function used to convert the option label to a string.
@@ -103,2 +119,3 @@ * This is useful when labels are elements and need to be converted to plain text
 };
+export type UseSelectHiddenInputSlotProps<TOther = {}> = React.InputHTMLAttributes<HTMLInputElement> & TOther;
 interface UseSelectListboxSlotEventHandlers {
@@ -142,2 +159,7 @@ onMouseDown: React.MouseEventHandler;
     /**
+     * Resolver for the hidden input slot's props.
+     * @returns HTML input attributes that should be spread on the hidden input slot
+     */
+    getHiddenInputProps: <OtherHandlers extends EventHandlers = {}>(otherHandlers?: OtherHandlers) => UseSelectHiddenInputSlotProps<OtherHandlers>;
+    /**
      * Resolver for the listbox slot's props.
@@ -144,0 +166,0 @@ * @param otherHandlers event handlers for the listbox slot

No alert changes

Improved metrics

Total package byte prevSize

2763199

increased by2.14%

Number of package files

1148

increased by1.86%

Lines of code

56314

increased by2.51%

Worsened metrics

Dependency count

12

increased by9.09%

Number of low supply chain risk alerts

223

increased by2.29%

Dependency changes

• + Added@floating-ui/react-dom@^2.0.1

• + Added@floating-ui/core@1.6.4(transitive)

• + Added@floating-ui/dom@1.6.7(transitive)

• + Added@floating-ui/react-dom@2.1.1(transitive)

• + Added@floating-ui/utils@0.2.4(transitive)

• Updated@babel/runtime@^7.22.10

• Updated@mui/utils@^5.14.6