@react-aria/select 3.14.4-nightly.4555 → 3.14.4-nightly.4558

package/dist/HiddenSelect.main.js

@@ -0,0 +1,129 @@
+var $23a1e93dc7fa8653$exports = require("./useSelect.main.js");
+var $ccxQv$react = require("react");
+var $ccxQv$reactariautils = require("@react-aria/utils");
+var $ccxQv$reactariaform = require("@react-aria/form");
+var $ccxQv$reactariainteractions = require("@react-aria/interactions");
+var $ccxQv$reactariavisuallyhidden = require("@react-aria/visually-hidden");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useHiddenSelect", () => $6eae0e0872a4cdd4$export$f809e80f58e251d1);
+$parcel$export(module.exports, "HiddenSelect", () => $6eae0e0872a4cdd4$export$cbd84cdb2e668835);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+function $6eae0e0872a4cdd4$export$f809e80f58e251d1(props, state, triggerRef) {
+    let data = (0, $23a1e93dc7fa8653$exports.selectData).get(state) || {};
+    let { autoComplete: autoComplete, name: name = data.name, isDisabled: isDisabled = data.isDisabled } = props;
+    let { validationBehavior: validationBehavior, isRequired: isRequired } = data;
+    let modality = (0, $ccxQv$reactariainteractions.useInteractionModality)();
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $ccxQv$reactariavisuallyhidden.useVisuallyHidden)();
+    (0, $ccxQv$reactariautils.useFormReset)(props.selectRef, state.selectedKey, state.setSelectedKey);
+    (0, $ccxQv$reactariaform.useFormValidation)({
+        validationBehavior: validationBehavior,
+        focus: ()=>triggerRef.current.focus()
+    }, state, props.selectRef);
+    var _state_selectedKey;
+    // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
+    // In Firefox, there must be a <label> to identify the <select> whereas other browsers
+    // seem to identify it just by surrounding text.
+    // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a
+    // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>
+    // non tabbable with tabIndex={-1}.
+    //
+    // In mobile browsers, there are next/previous buttons above the software keyboard for navigating
+    // between fields in a form. These only support native form inputs that are tabbable. In order to
+    // support those, an additional hidden input is used to marshall focus to the button. It is tabbable
+    // except when the button is focused, so that shift tab works properly to go to the actual previous
+    // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes
+    // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to
+    // prevent Safari from zooming in on the input when it is focused.
+    //
+    // If the current interaction modality is null, then the user hasn't interacted with the page yet.
+    // In this case, we set the tabIndex to -1 on the input element so that automated accessibility
+    // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.
+    return {
+        containerProps: {
+            ...visuallyHiddenProps,
+            "aria-hidden": true,
+            ["data-hidden-select-ignore"]: true,
+            ["data-a11y-ignore"]: "aria-hidden-focus"
+        },
+        inputProps: {
+            type: "text",
+            tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,
+            style: {
+                fontSize: 16
+            },
+            onFocus: ()=>triggerRef.current.focus(),
+            disabled: isDisabled
+        },
+        selectProps: {
+            tabIndex: -1,
+            autoComplete: autoComplete,
+            disabled: isDisabled,
+            required: validationBehavior === "native" && isRequired,
+            name: name,
+            value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : "",
+            onChange: (e)=>state.setSelectedKey(e.target.value)
+        }
+    };
+}
+function $6eae0e0872a4cdd4$export$cbd84cdb2e668835(props) {
+    let { state: state, triggerRef: triggerRef, label: label, name: name, isDisabled: isDisabled } = props;
+    let selectRef = (0, $ccxQv$react.useRef)(null);
+    let { containerProps: containerProps, inputProps: inputProps, selectProps: selectProps } = $6eae0e0872a4cdd4$export$f809e80f58e251d1({
+        ...props,
+        selectRef: selectRef
+    }, state, triggerRef);
+    var _state_selectedKey;
+    // If used in a <form>, use a hidden input so the value can be submitted to a server.
+    // If the collection isn't too big, use a hidden <select> element for this so that browser
+    // autofill will work. Otherwise, use an <input type="hidden">.
+    if (state.collection.size <= 300) return /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("div", {
+        ...containerProps,
+        "data-testid": "hidden-select-container"
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("input", inputProps), /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("label", null, label, /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("select", {
+        ...selectProps,
+        ref: selectRef
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("option", null), [
+        ...state.collection.getKeys()
+    ].map((key)=>{
+        let item = state.collection.getItem(key);
+        if (item.type === "item") return /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("option", {
+            key: item.key,
+            value: item.key
+        }, item.textValue);
+    }))));
+    else if (name) return /*#__PURE__*/ (0, ($parcel$interopDefault($ccxQv$react))).createElement("input", {
+        type: "hidden",
+        autoComplete: selectProps.autoComplete,
+        name: name,
+        disabled: isDisabled,
+        value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ""
+    });
+    return null;
+}
+
+
+//# sourceMappingURL=HiddenSelect.main.js.map

package/dist/HiddenSelect.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA6CM,SAAS,0CAAmB,KAA8B,EAAE,KAAqB,EAAE,UAAuC;IAC/H,IAAI,OAAO,CAAA,GAAA,oCAAS,EAAE,GAAG,CAAC,UAAU,CAAC;IACrC,IAAI,gBAAC,YAAY,QAAE,OAAO,KAAK,IAAI,cAAE,aAAa,KAAK,UAAU,EAAC,GAAG;IACrE,IAAI,sBAAC,kBAAkB,cAAE,UAAU,EAAC,GAAG;IACvC,IAAI,WAAW,CAAA,GAAA,mDAAqB;IACpC,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,gDAAgB;IAE5C,CAAA,GAAA,kCAAW,EAAE,MAAM,SAAS,EAAE,MAAM,WAAW,EAAE,MAAM,cAAc;IACrE,CAAA,GAAA,sCAAgB,EAAE;4BAChB;QACA,OAAO,IAAM,WAAW,OAAO,CAAC,KAAK;IACvC,GAAG,OAAO,MAAM,SAAS;QAwCd;IAtCX,wFAAwF;IACxF,sFAAsF;IACtF,gDAAgD;IAChD,8FAA8F;IAC9F,kGAAkG;IAClG,mCAAmC;IACnC,EAAE;IACF,iGAAiG;IACjG,iGAAiG;IACjG,oGAAoG;IACpG,mGAAmG;IACnG,+FAA+F;IAC/F,+FAA+F;IAC/F,kEAAkE;IAClE,EAAE;IACF,kGAAkG;IAClG,+FAA+F;IAC/F,8FAA8F;IAC9F,OAAO;QACL,gBAAgB;YACd,GAAG,mBAAmB;YACtB,eAAe;YACf,CAAC,4BAA4B,EAAE;YAC/B,CAAC,mBAAmB,EAAE;QACxB;QACA,YAAY;YACV,MAAM;YACN,UAAU,YAAY,QAAQ,MAAM,SAAS,IAAI,MAAM,MAAM,GAAG,KAAK;YACrE,OAAO;gBAAC,UAAU;YAAE;YACpB,SAAS,IAAM,WAAW,OAAO,CAAC,KAAK;YACvC,UAAU;QACZ;QACA,aAAa;YACX,UAAU;0BACV;YACA,UAAU;YACV,UAAU,uBAAuB,YAAY;kBAC7C;YACA,OAAO,CAAA,qBAAA,MAAM,WAAW,cAAjB,gCAAA,qBAAqB;YAC5B,UAAU,CAAC,IAA4C,MAAM,cAAc,CAAC,EAAE,MAAM,CAAC,KAAK;QAC5F;IACF;AACF;AAMO,SAAS,0CAAgB,KAA2B;IACzD,IAAI,SAAC,KAAK,cAAE,UAAU,SAAE,KAAK,QAAE,IAAI,cAAE,UAAU,EAAC,GAAG;IACnD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,kBAAC,cAAc,cAAE,UAAU,eAAE,WAAW,EAAC,GAAG,0CAAgB;QAAC,GAAG,KAAK;mBAAE;IAAS,GAAG,OAAO;QAoCjF;IAlCb,qFAAqF;IACrF,0FAA0F;IAC1F,+DAA+D;IAC/D,IAAI,MAAM,UAAU,CAAC,IAAI,IAAI,KAC3B,qBACE,0DAAC;QAAK,GAAG,cAAc;QAAE,eAAY;qBACnC,0DAAC,SAAU,2BACX,0DAAC,eACE,qBACD,0DAAC;QAAQ,GAAG,WAAW;QAAE,KAAK;qBAC5B,0DAAC,iBACA;WAAI,MAAM,UAAU,CAAC,OAAO;KAAG,CAAC,GAAG,CAAC,CAAA;QACnC,IAAI,OAAO,MAAM,UAAU,CAAC,OAAO,CAAC;QACpC,IAAI,KAAK,IAAI,KAAK,QAChB,qBACE,0DAAC;YACC,KAAK,KAAK,GAAG;YACb,OAAO,KAAK,GAAG;WACd,KAAK,SAAS;IAIvB;SAKH,IAAI,MACT,qBACE,0DAAC;QACC,MAAK;QACL,cAAc,YAAY,YAAY;QACtC,MAAM;QACN,UAAU;QACV,OAAO,CAAA,qBAAA,MAAM,WAAW,cAAjB,gCAAA,qBAAqB;;IAIlC,OAAO;AACT","sources":["packages/@react-aria/select/src/HiddenSelect.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FocusableElement} from '@react-types/shared';\nimport React, {ReactNode, RefObject, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectState} from '@react-stately/select';\nimport {useFormReset} from '@react-aria/utils';\nimport {useFormValidation} from '@react-aria/form';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaHiddenSelectProps {\n  /**\n   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).\n   */\n  autoComplete?: string,\n\n  /** The text label for the select. */\n  label?: ReactNode,\n\n  /** HTML form input name. */\n  name?: string,\n\n  /** Sets the disabled state of the select and input. */\n  isDisabled?: boolean\n}\n\nexport interface HiddenSelectProps<T> extends AriaHiddenSelectProps {\n  /** State for the select. */\n  state: SelectState<T>,\n\n  /** A ref to the trigger element. */\n  triggerRef: RefObject<FocusableElement>\n}\n\nexport interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {\n  /** A ref to the hidden `<select>` element. */\n  selectRef?: RefObject<HTMLSelectElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: SelectState<T>, triggerRef: RefObject<FocusableElement>) {\n  let data = selectData.get(state) || {};\n  let {autoComplete, name = data.name, isDisabled = data.isDisabled} = props;\n  let {validationBehavior, isRequired} = data;\n  let modality = useInteractionModality();\n  let {visuallyHiddenProps} = useVisuallyHidden();\n\n  useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);\n  useFormValidation({\n    validationBehavior,\n    focus: () => triggerRef.current.focus()\n  }, state, props.selectRef);\n\n  // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n  // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n  // seem to identify it just by surrounding text.\n  // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n  // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n  // non tabbable with tabIndex={-1}.\n  //\n  // In mobile browsers, there are next/previous buttons above the software keyboard for navigating\n  // between fields in a form. These only support native form inputs that are tabbable. In order to\n  // support those, an additional hidden input is used to marshall focus to the button. It is tabbable\n  // except when the button is focused, so that shift tab works properly to go to the actual previous\n  // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes\n  // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to\n  // prevent Safari from zooming in on the input when it is focused.\n  //\n  // If the current interaction modality is null, then the user hasn't interacted with the page yet.\n  // In this case, we set the tabIndex to -1 on the input element so that automated accessibility\n  // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.\n  return {\n    containerProps: {\n      ...visuallyHiddenProps,\n      'aria-hidden': true,\n      ['data-hidden-select-ignore']: true,\n      ['data-a11y-ignore']: 'aria-hidden-focus'\n    },\n    inputProps: {\n      type: 'text',\n      tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,\n      style: {fontSize: 16},\n      onFocus: () => triggerRef.current.focus(),\n      disabled: isDisabled\n    },\n    selectProps: {\n      tabIndex: -1,\n      autoComplete,\n      disabled: isDisabled,\n      required: validationBehavior === 'native' && isRequired,\n      name,\n      value: state.selectedKey ?? '',\n      onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)\n    }\n  };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>) {\n  let {state, triggerRef, label, name, isDisabled} = props;\n  let selectRef = useRef(null);\n  let {containerProps, inputProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);\n\n  // If used in a <form>, use a hidden input so the value can be submitted to a server.\n  // If the collection isn't too big, use a hidden <select> element for this so that browser\n  // autofill will work. Otherwise, use an <input type=\"hidden\">.\n  if (state.collection.size <= 300) {\n    return (\n      <div {...containerProps} data-testid=\"hidden-select-container\">\n        <input {...inputProps} />\n        <label>\n          {label}\n          <select {...selectProps} ref={selectRef}>\n            <option />\n            {[...state.collection.getKeys()].map(key => {\n              let item = state.collection.getItem(key);\n              if (item.type === 'item') {\n                return (\n                  <option\n                    key={item.key}\n                    value={item.key}>\n                    {item.textValue}\n                  </option>\n                );\n              }\n            })}\n          </select>\n        </label>\n      </div>\n    );\n  } else if (name) {\n    return (\n      <input\n        type=\"hidden\"\n        autoComplete={selectProps.autoComplete}\n        name={name}\n        disabled={isDisabled}\n        value={state.selectedKey ?? ''} />\n    );\n  }\n\n  return null;\n}\n"],"names":[],"version":3,"file":"HiddenSelect.main.js.map"}

package/dist/HiddenSelect.mjs

@@ -0,0 +1,119 @@
+import {selectData as $58aed456727eb0f3$export$703601b7e90536f8} from "./useSelect.mjs";
+import $8BE50$react, {useRef as $8BE50$useRef} from "react";
+import {useFormReset as $8BE50$useFormReset} from "@react-aria/utils";
+import {useFormValidation as $8BE50$useFormValidation} from "@react-aria/form";
+import {useInteractionModality as $8BE50$useInteractionModality} from "@react-aria/interactions";
+import {useVisuallyHidden as $8BE50$useVisuallyHidden} from "@react-aria/visually-hidden";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
+    let data = (0, $58aed456727eb0f3$export$703601b7e90536f8).get(state) || {};
+    let { autoComplete: autoComplete, name: name = data.name, isDisabled: isDisabled = data.isDisabled } = props;
+    let { validationBehavior: validationBehavior, isRequired: isRequired } = data;
+    let modality = (0, $8BE50$useInteractionModality)();
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $8BE50$useVisuallyHidden)();
+    (0, $8BE50$useFormReset)(props.selectRef, state.selectedKey, state.setSelectedKey);
+    (0, $8BE50$useFormValidation)({
+        validationBehavior: validationBehavior,
+        focus: ()=>triggerRef.current.focus()
+    }, state, props.selectRef);
+    var _state_selectedKey;
+    // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
+    // In Firefox, there must be a <label> to identify the <select> whereas other browsers
+    // seem to identify it just by surrounding text.
+    // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a
+    // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>
+    // non tabbable with tabIndex={-1}.
+    //
+    // In mobile browsers, there are next/previous buttons above the software keyboard for navigating
+    // between fields in a form. These only support native form inputs that are tabbable. In order to
+    // support those, an additional hidden input is used to marshall focus to the button. It is tabbable
+    // except when the button is focused, so that shift tab works properly to go to the actual previous
+    // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes
+    // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to
+    // prevent Safari from zooming in on the input when it is focused.
+    //
+    // If the current interaction modality is null, then the user hasn't interacted with the page yet.
+    // In this case, we set the tabIndex to -1 on the input element so that automated accessibility
+    // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.
+    return {
+        containerProps: {
+            ...visuallyHiddenProps,
+            "aria-hidden": true,
+            ["data-hidden-select-ignore"]: true,
+            ["data-a11y-ignore"]: "aria-hidden-focus"
+        },
+        inputProps: {
+            type: "text",
+            tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,
+            style: {
+                fontSize: 16
+            },
+            onFocus: ()=>triggerRef.current.focus(),
+            disabled: isDisabled
+        },
+        selectProps: {
+            tabIndex: -1,
+            autoComplete: autoComplete,
+            disabled: isDisabled,
+            required: validationBehavior === "native" && isRequired,
+            name: name,
+            value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : "",
+            onChange: (e)=>state.setSelectedKey(e.target.value)
+        }
+    };
+}
+function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
+    let { state: state, triggerRef: triggerRef, label: label, name: name, isDisabled: isDisabled } = props;
+    let selectRef = (0, $8BE50$useRef)(null);
+    let { containerProps: containerProps, inputProps: inputProps, selectProps: selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1({
+        ...props,
+        selectRef: selectRef
+    }, state, triggerRef);
+    var _state_selectedKey;
+    // If used in a <form>, use a hidden input so the value can be submitted to a server.
+    // If the collection isn't too big, use a hidden <select> element for this so that browser
+    // autofill will work. Otherwise, use an <input type="hidden">.
+    if (state.collection.size <= 300) return /*#__PURE__*/ (0, $8BE50$react).createElement("div", {
+        ...containerProps,
+        "data-testid": "hidden-select-container"
+    }, /*#__PURE__*/ (0, $8BE50$react).createElement("input", inputProps), /*#__PURE__*/ (0, $8BE50$react).createElement("label", null, label, /*#__PURE__*/ (0, $8BE50$react).createElement("select", {
+        ...selectProps,
+        ref: selectRef
+    }, /*#__PURE__*/ (0, $8BE50$react).createElement("option", null), [
+        ...state.collection.getKeys()
+    ].map((key)=>{
+        let item = state.collection.getItem(key);
+        if (item.type === "item") return /*#__PURE__*/ (0, $8BE50$react).createElement("option", {
+            key: item.key,
+            value: item.key
+        }, item.textValue);
+    }))));
+    else if (name) return /*#__PURE__*/ (0, $8BE50$react).createElement("input", {
+        type: "hidden",
+        autoComplete: selectProps.autoComplete,
+        name: name,
+        disabled: isDisabled,
+        value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ""
+    });
+    return null;
+}
+
+
+export {$bdd25dc72710631f$export$f809e80f58e251d1 as useHiddenSelect, $bdd25dc72710631f$export$cbd84cdb2e668835 as HiddenSelect};
+//# sourceMappingURL=HiddenSelect.mjs.map

package/dist/HiddenSelect.module.js

@@ -0,0 +1,119 @@
+import {selectData as $58aed456727eb0f3$export$703601b7e90536f8} from "./useSelect.module.js";
+import $8BE50$react, {useRef as $8BE50$useRef} from "react";
+import {useFormReset as $8BE50$useFormReset} from "@react-aria/utils";
+import {useFormValidation as $8BE50$useFormValidation} from "@react-aria/form";
+import {useInteractionModality as $8BE50$useInteractionModality} from "@react-aria/interactions";
+import {useVisuallyHidden as $8BE50$useVisuallyHidden} from "@react-aria/visually-hidden";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
+    let data = (0, $58aed456727eb0f3$export$703601b7e90536f8).get(state) || {};
+    let { autoComplete: autoComplete, name: name = data.name, isDisabled: isDisabled = data.isDisabled } = props;
+    let { validationBehavior: validationBehavior, isRequired: isRequired } = data;
+    let modality = (0, $8BE50$useInteractionModality)();
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $8BE50$useVisuallyHidden)();
+    (0, $8BE50$useFormReset)(props.selectRef, state.selectedKey, state.setSelectedKey);
+    (0, $8BE50$useFormValidation)({
+        validationBehavior: validationBehavior,
+        focus: ()=>triggerRef.current.focus()
+    }, state, props.selectRef);
+    var _state_selectedKey;
+    // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
+    // In Firefox, there must be a <label> to identify the <select> whereas other browsers
+    // seem to identify it just by surrounding text.
+    // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a
+    // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>
+    // non tabbable with tabIndex={-1}.
+    //
+    // In mobile browsers, there are next/previous buttons above the software keyboard for navigating
+    // between fields in a form. These only support native form inputs that are tabbable. In order to
+    // support those, an additional hidden input is used to marshall focus to the button. It is tabbable
+    // except when the button is focused, so that shift tab works properly to go to the actual previous
+    // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes
+    // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to
+    // prevent Safari from zooming in on the input when it is focused.
+    //
+    // If the current interaction modality is null, then the user hasn't interacted with the page yet.
+    // In this case, we set the tabIndex to -1 on the input element so that automated accessibility
+    // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.
+    return {
+        containerProps: {
+            ...visuallyHiddenProps,
+            "aria-hidden": true,
+            ["data-hidden-select-ignore"]: true,
+            ["data-a11y-ignore"]: "aria-hidden-focus"
+        },
+        inputProps: {
+            type: "text",
+            tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,
+            style: {
+                fontSize: 16
+            },
+            onFocus: ()=>triggerRef.current.focus(),
+            disabled: isDisabled
+        },
+        selectProps: {
+            tabIndex: -1,
+            autoComplete: autoComplete,
+            disabled: isDisabled,
+            required: validationBehavior === "native" && isRequired,
+            name: name,
+            value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : "",
+            onChange: (e)=>state.setSelectedKey(e.target.value)
+        }
+    };
+}
+function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
+    let { state: state, triggerRef: triggerRef, label: label, name: name, isDisabled: isDisabled } = props;
+    let selectRef = (0, $8BE50$useRef)(null);
+    let { containerProps: containerProps, inputProps: inputProps, selectProps: selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1({
+        ...props,
+        selectRef: selectRef
+    }, state, triggerRef);
+    var _state_selectedKey;
+    // If used in a <form>, use a hidden input so the value can be submitted to a server.
+    // If the collection isn't too big, use a hidden <select> element for this so that browser
+    // autofill will work. Otherwise, use an <input type="hidden">.
+    if (state.collection.size <= 300) return /*#__PURE__*/ (0, $8BE50$react).createElement("div", {
+        ...containerProps,
+        "data-testid": "hidden-select-container"
+    }, /*#__PURE__*/ (0, $8BE50$react).createElement("input", inputProps), /*#__PURE__*/ (0, $8BE50$react).createElement("label", null, label, /*#__PURE__*/ (0, $8BE50$react).createElement("select", {
+        ...selectProps,
+        ref: selectRef
+    }, /*#__PURE__*/ (0, $8BE50$react).createElement("option", null), [
+        ...state.collection.getKeys()
+    ].map((key)=>{
+        let item = state.collection.getItem(key);
+        if (item.type === "item") return /*#__PURE__*/ (0, $8BE50$react).createElement("option", {
+            key: item.key,
+            value: item.key
+        }, item.textValue);
+    }))));
+    else if (name) return /*#__PURE__*/ (0, $8BE50$react).createElement("input", {
+        type: "hidden",
+        autoComplete: selectProps.autoComplete,
+        name: name,
+        disabled: isDisabled,
+        value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ""
+    });
+    return null;
+}
+
+
+export {$bdd25dc72710631f$export$f809e80f58e251d1 as useHiddenSelect, $bdd25dc72710631f$export$cbd84cdb2e668835 as HiddenSelect};
+//# sourceMappingURL=HiddenSelect.module.js.map

package/dist/HiddenSelect.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA6CM,SAAS,0CAAmB,KAA8B,EAAE,KAAqB,EAAE,UAAuC;IAC/H,IAAI,OAAO,CAAA,GAAA,yCAAS,EAAE,GAAG,CAAC,UAAU,CAAC;IACrC,IAAI,gBAAC,YAAY,QAAE,OAAO,KAAK,IAAI,cAAE,aAAa,KAAK,UAAU,EAAC,GAAG;IACrE,IAAI,sBAAC,kBAAkB,cAAE,UAAU,EAAC,GAAG;IACvC,IAAI,WAAW,CAAA,GAAA,6BAAqB;IACpC,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,wBAAgB;IAE5C,CAAA,GAAA,mBAAW,EAAE,MAAM,SAAS,EAAE,MAAM,WAAW,EAAE,MAAM,cAAc;IACrE,CAAA,GAAA,wBAAgB,EAAE;4BAChB;QACA,OAAO,IAAM,WAAW,OAAO,CAAC,KAAK;IACvC,GAAG,OAAO,MAAM,SAAS;QAwCd;IAtCX,wFAAwF;IACxF,sFAAsF;IACtF,gDAAgD;IAChD,8FAA8F;IAC9F,kGAAkG;IAClG,mCAAmC;IACnC,EAAE;IACF,iGAAiG;IACjG,iGAAiG;IACjG,oGAAoG;IACpG,mGAAmG;IACnG,+FAA+F;IAC/F,+FAA+F;IAC/F,kEAAkE;IAClE,EAAE;IACF,kGAAkG;IAClG,+FAA+F;IAC/F,8FAA8F;IAC9F,OAAO;QACL,gBAAgB;YACd,GAAG,mBAAmB;YACtB,eAAe;YACf,CAAC,4BAA4B,EAAE;YAC/B,CAAC,mBAAmB,EAAE;QACxB;QACA,YAAY;YACV,MAAM;YACN,UAAU,YAAY,QAAQ,MAAM,SAAS,IAAI,MAAM,MAAM,GAAG,KAAK;YACrE,OAAO;gBAAC,UAAU;YAAE;YACpB,SAAS,IAAM,WAAW,OAAO,CAAC,KAAK;YACvC,UAAU;QACZ;QACA,aAAa;YACX,UAAU;0BACV;YACA,UAAU;YACV,UAAU,uBAAuB,YAAY;kBAC7C;YACA,OAAO,CAAA,qBAAA,MAAM,WAAW,cAAjB,gCAAA,qBAAqB;YAC5B,UAAU,CAAC,IAA4C,MAAM,cAAc,CAAC,EAAE,MAAM,CAAC,KAAK;QAC5F;IACF;AACF;AAMO,SAAS,0CAAgB,KAA2B;IACzD,IAAI,SAAC,KAAK,cAAE,UAAU,SAAE,KAAK,QAAE,IAAI,cAAE,UAAU,EAAC,GAAG;IACnD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,kBAAC,cAAc,cAAE,UAAU,eAAE,WAAW,EAAC,GAAG,0CAAgB;QAAC,GAAG,KAAK;mBAAE;IAAS,GAAG,OAAO;QAoCjF;IAlCb,qFAAqF;IACrF,0FAA0F;IAC1F,+DAA+D;IAC/D,IAAI,MAAM,UAAU,CAAC,IAAI,IAAI,KAC3B,qBACE,gCAAC;QAAK,GAAG,cAAc;QAAE,eAAY;qBACnC,gCAAC,SAAU,2BACX,gCAAC,eACE,qBACD,gCAAC;QAAQ,GAAG,WAAW;QAAE,KAAK;qBAC5B,gCAAC,iBACA;WAAI,MAAM,UAAU,CAAC,OAAO;KAAG,CAAC,GAAG,CAAC,CAAA;QACnC,IAAI,OAAO,MAAM,UAAU,CAAC,OAAO,CAAC;QACpC,IAAI,KAAK,IAAI,KAAK,QAChB,qBACE,gCAAC;YACC,KAAK,KAAK,GAAG;YACb,OAAO,KAAK,GAAG;WACd,KAAK,SAAS;IAIvB;SAKH,IAAI,MACT,qBACE,gCAAC;QACC,MAAK;QACL,cAAc,YAAY,YAAY;QACtC,MAAM;QACN,UAAU;QACV,OAAO,CAAA,qBAAA,MAAM,WAAW,cAAjB,gCAAA,qBAAqB;;IAIlC,OAAO;AACT","sources":["packages/@react-aria/select/src/HiddenSelect.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FocusableElement} from '@react-types/shared';\nimport React, {ReactNode, RefObject, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectState} from '@react-stately/select';\nimport {useFormReset} from '@react-aria/utils';\nimport {useFormValidation} from '@react-aria/form';\nimport {useInteractionModality} from '@react-aria/interactions';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport interface AriaHiddenSelectProps {\n  /**\n   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).\n   */\n  autoComplete?: string,\n\n  /** The text label for the select. */\n  label?: ReactNode,\n\n  /** HTML form input name. */\n  name?: string,\n\n  /** Sets the disabled state of the select and input. */\n  isDisabled?: boolean\n}\n\nexport interface HiddenSelectProps<T> extends AriaHiddenSelectProps {\n  /** State for the select. */\n  state: SelectState<T>,\n\n  /** A ref to the trigger element. */\n  triggerRef: RefObject<FocusableElement>\n}\n\nexport interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {\n  /** A ref to the hidden `<select>` element. */\n  selectRef?: RefObject<HTMLSelectElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: SelectState<T>, triggerRef: RefObject<FocusableElement>) {\n  let data = selectData.get(state) || {};\n  let {autoComplete, name = data.name, isDisabled = data.isDisabled} = props;\n  let {validationBehavior, isRequired} = data;\n  let modality = useInteractionModality();\n  let {visuallyHiddenProps} = useVisuallyHidden();\n\n  useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);\n  useFormValidation({\n    validationBehavior,\n    focus: () => triggerRef.current.focus()\n  }, state, props.selectRef);\n\n  // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n  // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n  // seem to identify it just by surrounding text.\n  // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n  // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n  // non tabbable with tabIndex={-1}.\n  //\n  // In mobile browsers, there are next/previous buttons above the software keyboard for navigating\n  // between fields in a form. These only support native form inputs that are tabbable. In order to\n  // support those, an additional hidden input is used to marshall focus to the button. It is tabbable\n  // except when the button is focused, so that shift tab works properly to go to the actual previous\n  // input in the form. Using the <select> for this also works, but Safari on iOS briefly flashes\n  // the native menu on focus, so this isn't ideal. A font-size of 16px or greater is required to\n  // prevent Safari from zooming in on the input when it is focused.\n  //\n  // If the current interaction modality is null, then the user hasn't interacted with the page yet.\n  // In this case, we set the tabIndex to -1 on the input element so that automated accessibility\n  // checkers don't throw false-positives about focusable elements inside an aria-hidden parent.\n  return {\n    containerProps: {\n      ...visuallyHiddenProps,\n      'aria-hidden': true,\n      ['data-hidden-select-ignore']: true,\n      ['data-a11y-ignore']: 'aria-hidden-focus'\n    },\n    inputProps: {\n      type: 'text',\n      tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,\n      style: {fontSize: 16},\n      onFocus: () => triggerRef.current.focus(),\n      disabled: isDisabled\n    },\n    selectProps: {\n      tabIndex: -1,\n      autoComplete,\n      disabled: isDisabled,\n      required: validationBehavior === 'native' && isRequired,\n      name,\n      value: state.selectedKey ?? '',\n      onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)\n    }\n  };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>) {\n  let {state, triggerRef, label, name, isDisabled} = props;\n  let selectRef = useRef(null);\n  let {containerProps, inputProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);\n\n  // If used in a <form>, use a hidden input so the value can be submitted to a server.\n  // If the collection isn't too big, use a hidden <select> element for this so that browser\n  // autofill will work. Otherwise, use an <input type=\"hidden\">.\n  if (state.collection.size <= 300) {\n    return (\n      <div {...containerProps} data-testid=\"hidden-select-container\">\n        <input {...inputProps} />\n        <label>\n          {label}\n          <select {...selectProps} ref={selectRef}>\n            <option />\n            {[...state.collection.getKeys()].map(key => {\n              let item = state.collection.getItem(key);\n              if (item.type === 'item') {\n                return (\n                  <option\n                    key={item.key}\n                    value={item.key}>\n                    {item.textValue}\n                  </option>\n                );\n              }\n            })}\n          </select>\n        </label>\n      </div>\n    );\n  } else if (name) {\n    return (\n      <input\n        type=\"hidden\"\n        autoComplete={selectProps.autoComplete}\n        name={name}\n        disabled={isDisabled}\n        value={state.selectedKey ?? ''} />\n    );\n  }\n\n  return null;\n}\n"],"names":[],"version":3,"file":"HiddenSelect.module.js.map"}