@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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

212

increased by1.92%

Dependency changes

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

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

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

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

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

• Updated@babel/runtime@^7.22.10

• Updated@mui/utils@^5.14.6