@react-spectrum/picker 3.14.4-nightly.4552 → 3.14.4-nightly.4558

package/dist/Picker.main.js

@@ -0,0 +1,238 @@
+var $b95bf71d4a256ee8$exports = require("./intlStrings.main.js");
+require("./vars.7b6f8dc5.css");
+var $b39b306bfc9a5551$exports = require("./dropdown_vars_css.main.js");
+var $3qYcd$spectrumiconsuiAlertMedium = require("@spectrum-icons/ui/AlertMedium");
+var $3qYcd$spectrumiconsuiChevronDownMedium = require("@spectrum-icons/ui/ChevronDownMedium");
+var $3qYcd$reactspectrumutils = require("@react-spectrum/utils");
+var $3qYcd$reactspectrumlabel = require("@react-spectrum/label");
+var $3qYcd$reactspectrumbutton = require("@react-spectrum/button");
+var $3qYcd$reactariaselect = require("@react-aria/select");
+var $3qYcd$reactspectrumlistbox = require("@react-spectrum/listbox");
+var $3qYcd$reactariautils = require("@react-aria/utils");
+var $3qYcd$reactspectrumoverlays = require("@react-spectrum/overlays");
+var $3qYcd$reactariainteractions = require("@react-aria/interactions");
+var $3qYcd$reactspectrumprogress = require("@react-spectrum/progress");
+var $3qYcd$react = require("react");
+var $3qYcd$reactspectrumtext = require("@react-spectrum/text");
+var $3qYcd$reactspectrumform = require("@react-spectrum/form");
+var $3qYcd$reactariai18n = require("@react-aria/i18n");
+var $3qYcd$reactspectrumprovider = require("@react-spectrum/provider");
+var $3qYcd$reactstatelyselect = require("@react-stately/select");
+
+
+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, "Picker", () => $902e54cfaa4270a9$export$ba25329847403e11);
+/*
+ * 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 $902e54cfaa4270a9$var$Picker(props, ref) {
+    props = (0, $3qYcd$reactspectrumutils.useSlotProps)(props, "picker");
+    props = (0, $3qYcd$reactspectrumprovider.useProviderProps)(props);
+    props = (0, $3qYcd$reactspectrumform.useFormProps)(props);
+    let stringFormatter = (0, $3qYcd$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($b95bf71d4a256ee8$exports))), "@react-spectrum/picker");
+    let { autoComplete: autoComplete, isDisabled: isDisabled, direction: direction = "bottom", align: align = "start", shouldFlip: shouldFlip = true, placeholder: placeholder = stringFormatter.format("placeholder"), isQuiet: isQuiet, label: label, labelPosition: labelPosition = "top", menuWidth: menuWidth, name: name, autoFocus: autoFocus } = props;
+    let state = (0, $3qYcd$reactstatelyselect.useSelectState)(props);
+    let domRef = (0, $3qYcd$reactspectrumutils.useDOMRef)(ref);
+    let popoverRef = (0, $3qYcd$react.useRef)();
+    let triggerRef = (0, $3qYcd$react.useRef)();
+    let unwrappedTriggerRef = (0, $3qYcd$reactspectrumutils.useUnwrapDOMRef)(triggerRef);
+    let listboxRef = (0, $3qYcd$react.useRef)();
+    let isLoadingInitial = props.isLoading && state.collection.size === 0;
+    let isLoadingMore = props.isLoading && state.collection.size > 0;
+    let progressCircleId = (0, $3qYcd$reactariautils.useId)();
+    // We create the listbox layout in Picker and pass it to ListBoxBase below
+    // so that the layout information can be cached even while the listbox is not mounted.
+    // We also use the layout as the keyboard delegate for type to select.
+    let layout = (0, $3qYcd$reactspectrumlistbox.useListBoxLayout)(state, isLoadingMore);
+    let { labelProps: labelProps, triggerProps: triggerProps, valueProps: valueProps, menuProps: menuProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $3qYcd$reactariaselect.useSelect)({
+        ...props,
+        "aria-describedby": isLoadingInitial ? progressCircleId : undefined,
+        keyboardDelegate: layout
+    }, state, unwrappedTriggerRef);
+    let isMobile = (0, $3qYcd$reactspectrumutils.useIsMobileDevice)();
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $3qYcd$reactariainteractions.useHover)({
+        isDisabled: isDisabled
+    });
+    // On small screen devices, the listbox is rendered in a tray, otherwise a popover.
+    let listbox = /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, $3qYcd$reactspectrumlistbox.ListBoxBase), {
+        ...menuProps,
+        ref: listboxRef,
+        disallowEmptySelection: true,
+        autoFocus: state.focusStrategy || true,
+        shouldSelectOnPressUp: true,
+        focusOnPointerEnter: true,
+        layout: layout,
+        state: state,
+        width: isMobile ? "100%" : undefined,
+        // Set max height: inherit so Tray scrolling works
+        UNSAFE_style: {
+            maxHeight: "inherit"
+        },
+        isLoading: props.isLoading,
+        onLoadMore: props.onLoadMore
+    });
+    // Measure the width of the button to inform the width of the menu (below).
+    let [buttonWidth, setButtonWidth] = (0, $3qYcd$react.useState)(null);
+    let { scale: scale } = (0, $3qYcd$reactspectrumprovider.useProvider)();
+    let onResize = (0, $3qYcd$react.useCallback)(()=>{
+        if (!isMobile && unwrappedTriggerRef.current) {
+            let width = unwrappedTriggerRef.current.offsetWidth;
+            setButtonWidth(width);
+        }
+    }, [
+        unwrappedTriggerRef,
+        setButtonWidth,
+        isMobile
+    ]);
+    (0, $3qYcd$reactariautils.useResizeObserver)({
+        ref: unwrappedTriggerRef,
+        onResize: onResize
+    });
+    (0, $3qYcd$reactariautils.useLayoutEffect)(onResize, [
+        scale,
+        state.selectedKey,
+        onResize
+    ]);
+    let overlay;
+    if (isMobile) overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, $3qYcd$reactspectrumoverlays.Tray), {
+        state: state
+    }, listbox);
+    else {
+        // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.
+        // Always have a minimum width of the button width. When quiet, there is an extra offset to add.
+        // Not using style props for this because they don't support `calc`.
+        let width = isQuiet ? null : buttonWidth;
+        let style = {
+            width: menuWidth ? (0, $3qYcd$reactspectrumutils.dimensionValue)(menuWidth) : width,
+            minWidth: isQuiet ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : buttonWidth
+        };
+        overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, $3qYcd$reactspectrumoverlays.Popover), {
+            UNSAFE_style: style,
+            UNSAFE_className: (0, $3qYcd$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b39b306bfc9a5551$exports))), "spectrum-Dropdown-popover", {
+                "spectrum-Dropdown-popover--quiet": isQuiet
+            }),
+            ref: popoverRef,
+            placement: `${direction} ${align}`,
+            shouldFlip: shouldFlip,
+            hideArrow: true,
+            state: state,
+            triggerRef: unwrappedTriggerRef,
+            scrollRef: listboxRef
+        }, listbox);
+    }
+    let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;
+    if (typeof contents === "string") contents = /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, $3qYcd$reactspectrumtext.Text), null, contents);
+    let picker = /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement("div", {
+        className: (0, $3qYcd$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b39b306bfc9a5551$exports))), "spectrum-Dropdown", {
+            "is-invalid": isInvalid && !isDisabled,
+            "is-disabled": isDisabled,
+            "spectrum-Dropdown--quiet": isQuiet
+        })
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, $3qYcd$reactariaselect.HiddenSelect), {
+        autoComplete: autoComplete,
+        isDisabled: isDisabled,
+        state: state,
+        triggerRef: unwrappedTriggerRef,
+        label: label,
+        name: name
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, $3qYcd$reactariainteractions.PressResponder), (0, $3qYcd$reactariautils.mergeProps)(hoverProps, triggerProps), /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, $3qYcd$reactspectrumbutton.FieldButton), {
+        ref: triggerRef,
+        isActive: state.isOpen,
+        isQuiet: isQuiet,
+        isDisabled: isDisabled,
+        isInvalid: isInvalid,
+        autoFocus: autoFocus,
+        UNSAFE_className: (0, $3qYcd$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b39b306bfc9a5551$exports))), "spectrum-Dropdown-trigger", {
+            "is-hovered": isHovered
+        })
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, $3qYcd$reactspectrumutils.SlotProvider), {
+        slots: {
+            icon: {
+                UNSAFE_className: (0, $3qYcd$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b39b306bfc9a5551$exports))), "spectrum-Icon"),
+                size: "S"
+            },
+            avatar: {
+                UNSAFE_className: (0, $3qYcd$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b39b306bfc9a5551$exports))), "spectrum-Dropdown-avatar"),
+                size: "avatar-size-100"
+            },
+            text: {
+                ...valueProps,
+                UNSAFE_className: (0, $3qYcd$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b39b306bfc9a5551$exports))), "spectrum-Dropdown-label", {
+                    "is-placeholder": !state.selectedItem
+                })
+            },
+            description: {
+                isHidden: true
+            }
+        }
+    }, contents), isLoadingInitial && /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, $3qYcd$reactspectrumprogress.ProgressCircle), {
+        id: progressCircleId,
+        isIndeterminate: true,
+        size: "S",
+        "aria-label": stringFormatter.format("loading"),
+        UNSAFE_className: (0, $3qYcd$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b39b306bfc9a5551$exports))), "spectrum-Dropdown-progressCircle")
+    }), isInvalid && !isLoadingInitial && !isDisabled && /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, ($parcel$interopDefault($3qYcd$spectrumiconsuiAlertMedium))), {
+        UNSAFE_className: (0, $3qYcd$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b39b306bfc9a5551$exports))), "spectrum-Dropdown-invalidIcon")
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, ($parcel$interopDefault($3qYcd$spectrumiconsuiChevronDownMedium))), {
+        UNSAFE_className: (0, $3qYcd$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b39b306bfc9a5551$exports))), "spectrum-Dropdown-chevron")
+    }))), state.collection.size === 0 ? null : overlay);
+    let wrapperClassName = (0, $3qYcd$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b39b306bfc9a5551$exports))), "spectrum-Field", {
+        "spectrum-Dropdown-fieldWrapper--quiet": isQuiet,
+        "spectrum-Dropdown-fieldWrapper--positionSide": labelPosition === "side"
+    });
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, $3qYcd$reactspectrumlabel.Field), {
+        ...props,
+        ref: domRef,
+        wrapperClassName: wrapperClassName,
+        labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails,
+        showErrorIcon: false,
+        includeNecessityIndicatorInAccessibilityName: true,
+        elementType: "span"
+    }, picker);
+}
+/**
+ * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
+ */ // forwardRef doesn't support generic parameters, so cast the result to the correct type
+// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+const $902e54cfaa4270a9$export$ba25329847403e11 = /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).forwardRef($902e54cfaa4270a9$var$Picker);
+
+
+//# sourceMappingURL=Picker.main.js.map

package/dist/Picker.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/picker/src/Picker.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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {\n  classNames,\n  dimensionValue,\n  SlotProvider,\n  useDOMRef,\n  useIsMobileDevice,\n  useSlotProps,\n  useUnwrapDOMRef\n} from '@react-spectrum/utils';\nimport {DOMRef, DOMRefValue, FocusableRefValue, LabelPosition} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {HiddenSelect, useSelect} from '@react-aria/select';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';\nimport {mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {Popover, Tray} from '@react-spectrum/overlays';\nimport {PressResponder, useHover} from '@react-aria/interactions';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ReactElement, useCallback, useRef, useState} from 'react';\nimport {SpectrumPickerProps} from '@react-types/select';\nimport styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\nimport {useSelectState} from '@react-stately/select';\n\nfunction Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTMLDivElement>) {\n  props = useSlotProps(props, 'picker');\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/picker');\n  let {\n    autoComplete,\n    isDisabled,\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    placeholder = stringFormatter.format('placeholder'),\n    isQuiet,\n    label,\n    labelPosition = 'top' as LabelPosition,\n    menuWidth,\n    name,\n    autoFocus\n  } = props;\n\n  let state = useSelectState(props);\n  let domRef = useDOMRef(ref);\n\n  let popoverRef = useRef<DOMRefValue<HTMLDivElement>>();\n  let triggerRef = useRef<FocusableRefValue<HTMLElement>>();\n  let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n  let listboxRef = useRef();\n\n  let isLoadingInitial = props.isLoading && state.collection.size === 0;\n  let isLoadingMore = props.isLoading && state.collection.size > 0;\n  let progressCircleId = useId();\n\n  // We create the listbox layout in Picker and pass it to ListBoxBase below\n  // so that the layout information can be cached even while the listbox is not mounted.\n  // We also use the layout as the keyboard delegate for type to select.\n  let layout = useListBoxLayout(state, isLoadingMore);\n  let {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSelect({\n    ...props,\n    'aria-describedby': (isLoadingInitial ? progressCircleId : undefined),\n    keyboardDelegate: layout\n  }, state, unwrappedTriggerRef);\n\n  let isMobile = useIsMobileDevice();\n  let {hoverProps, isHovered} = useHover({isDisabled});\n\n  // On small screen devices, the listbox is rendered in a tray, otherwise a popover.\n  let listbox = (\n    <ListBoxBase\n      {...menuProps}\n      ref={listboxRef}\n      disallowEmptySelection\n      autoFocus={state.focusStrategy || true}\n      shouldSelectOnPressUp\n      focusOnPointerEnter\n      layout={layout}\n      state={state}\n      width={isMobile ? '100%' : undefined}\n      // Set max height: inherit so Tray scrolling works\n      UNSAFE_style={{maxHeight: 'inherit'}}\n      isLoading={props.isLoading}\n      onLoadMore={props.onLoadMore} />\n  );\n\n  // Measure the width of the button to inform the width of the menu (below).\n  let [buttonWidth, setButtonWidth] = useState(null);\n  let {scale} = useProvider();\n\n  let onResize = useCallback(() => {\n    if (!isMobile && unwrappedTriggerRef.current) {\n      let width = unwrappedTriggerRef.current.offsetWidth;\n      setButtonWidth(width);\n    }\n  }, [unwrappedTriggerRef, setButtonWidth, isMobile]);\n\n  useResizeObserver({\n    ref: unwrappedTriggerRef,\n    onResize: onResize\n  });\n\n  useLayoutEffect(onResize, [scale, state.selectedKey, onResize]);\n\n  let overlay;\n  if (isMobile) {\n    overlay = (\n      <Tray state={state}>\n        {listbox}\n      </Tray>\n    );\n  } else {\n    // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.\n    // Always have a minimum width of the button width. When quiet, there is an extra offset to add.\n    // Not using style props for this because they don't support `calc`.\n    let width = isQuiet ? null : buttonWidth;\n    let style = {\n      width: menuWidth ? dimensionValue(menuWidth) : width,\n      minWidth: isQuiet ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : buttonWidth\n    };\n\n    overlay = (\n      <Popover\n        UNSAFE_style={style}\n        UNSAFE_className={classNames(styles, 'spectrum-Dropdown-popover', {'spectrum-Dropdown-popover--quiet': isQuiet})}\n        ref={popoverRef}\n        placement={`${direction} ${align}`}\n        shouldFlip={shouldFlip}\n        hideArrow\n        state={state}\n        triggerRef={unwrappedTriggerRef}\n        scrollRef={listboxRef}>\n        {listbox}\n      </Popover>\n    );\n  }\n\n  let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;\n  if (typeof contents === 'string') {\n    contents = <Text>{contents}</Text>;\n  }\n\n  let picker = (\n    <div\n      className={\n        classNames(\n          styles,\n          'spectrum-Dropdown',\n          {\n            'is-invalid': isInvalid && !isDisabled,\n            'is-disabled': isDisabled,\n            'spectrum-Dropdown--quiet': isQuiet\n          }\n        )\n      }>\n      <HiddenSelect\n        autoComplete={autoComplete}\n        isDisabled={isDisabled}\n        state={state}\n        triggerRef={unwrappedTriggerRef}\n        label={label}\n        name={name} />\n      <PressResponder {...mergeProps(hoverProps, triggerProps)}>\n        <FieldButton\n          ref={triggerRef}\n          isActive={state.isOpen}\n          isQuiet={isQuiet}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          autoFocus={autoFocus}\n          UNSAFE_className={classNames(styles, 'spectrum-Dropdown-trigger', {'is-hovered': isHovered})}>\n          <SlotProvider\n            slots={{\n              icon: {UNSAFE_className: classNames(styles, 'spectrum-Icon'), size: 'S'},\n              avatar: {UNSAFE_className: classNames(styles, 'spectrum-Dropdown-avatar'), size: 'avatar-size-100'},\n              text: {\n                ...valueProps,\n                UNSAFE_className: classNames(\n                  styles,\n                  'spectrum-Dropdown-label',\n                  {'is-placeholder': !state.selectedItem}\n                )\n              },\n              description: {\n                isHidden: true\n              }\n            }}>\n            {contents}\n          </SlotProvider>\n          {isLoadingInitial &&\n            <ProgressCircle\n              id={progressCircleId}\n              isIndeterminate\n              size=\"S\"\n              aria-label={stringFormatter.format('loading')}\n              UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')} />\n          }\n          {isInvalid && !isLoadingInitial && !isDisabled &&\n            <AlertMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-invalidIcon')} />\n          }\n          <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n        </FieldButton>\n      </PressResponder>\n      {state.collection.size === 0 ? null : overlay}\n    </div>\n  );\n\n  let wrapperClassName = classNames(\n    styles,\n    'spectrum-Field',\n    {\n      'spectrum-Dropdown-fieldWrapper--quiet': isQuiet,\n      'spectrum-Dropdown-fieldWrapper--positionSide': labelPosition === 'side'\n    }\n  );\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      wrapperClassName={wrapperClassName}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      showErrorIcon={false}\n      includeNecessityIndicatorInAccessibilityName\n      elementType=\"span\">\n      {picker}\n    </Field>\n  );\n}\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Picker = React.forwardRef(Picker) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Picker as Picker};\n"],"names":[],"version":3,"file":"Picker.main.js.map"}

package/dist/Picker.mjs

@@ -0,0 +1,233 @@
+import $6hDYZ$intlStringsmodulejs from "./intlStrings.mjs";
+import "./vars.7b6f8dc5.css";
+import $6hDYZ$dropdown_vars_cssmodulejs from "./dropdown_vars_css.mjs";
+import $6hDYZ$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
+import $6hDYZ$spectrumiconsuiChevronDownMedium from "@spectrum-icons/ui/ChevronDownMedium";
+import {useSlotProps as $6hDYZ$useSlotProps, useDOMRef as $6hDYZ$useDOMRef, useUnwrapDOMRef as $6hDYZ$useUnwrapDOMRef, useIsMobileDevice as $6hDYZ$useIsMobileDevice, dimensionValue as $6hDYZ$dimensionValue, classNames as $6hDYZ$classNames, SlotProvider as $6hDYZ$SlotProvider} from "@react-spectrum/utils";
+import {Field as $6hDYZ$Field} from "@react-spectrum/label";
+import {FieldButton as $6hDYZ$FieldButton} from "@react-spectrum/button";
+import {useSelect as $6hDYZ$useSelect, HiddenSelect as $6hDYZ$HiddenSelect} from "@react-aria/select";
+import {useListBoxLayout as $6hDYZ$useListBoxLayout, ListBoxBase as $6hDYZ$ListBoxBase} from "@react-spectrum/listbox";
+import {useId as $6hDYZ$useId, useResizeObserver as $6hDYZ$useResizeObserver, useLayoutEffect as $6hDYZ$useLayoutEffect, mergeProps as $6hDYZ$mergeProps} from "@react-aria/utils";
+import {Tray as $6hDYZ$Tray, Popover as $6hDYZ$Popover} from "@react-spectrum/overlays";
+import {useHover as $6hDYZ$useHover, PressResponder as $6hDYZ$PressResponder} from "@react-aria/interactions";
+import {ProgressCircle as $6hDYZ$ProgressCircle} from "@react-spectrum/progress";
+import $6hDYZ$react, {useRef as $6hDYZ$useRef, useState as $6hDYZ$useState, useCallback as $6hDYZ$useCallback} from "react";
+import {Text as $6hDYZ$Text} from "@react-spectrum/text";
+import {useFormProps as $6hDYZ$useFormProps} from "@react-spectrum/form";
+import {useLocalizedStringFormatter as $6hDYZ$useLocalizedStringFormatter} from "@react-aria/i18n";
+import {useProviderProps as $6hDYZ$useProviderProps, useProvider as $6hDYZ$useProvider} from "@react-spectrum/provider";
+import {useSelectState as $6hDYZ$useSelectState} from "@react-stately/select";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * 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 $51664a9007a3c6f9$var$Picker(props, ref) {
+    props = (0, $6hDYZ$useSlotProps)(props, "picker");
+    props = (0, $6hDYZ$useProviderProps)(props);
+    props = (0, $6hDYZ$useFormProps)(props);
+    let stringFormatter = (0, $6hDYZ$useLocalizedStringFormatter)((0, ($parcel$interopDefault($6hDYZ$intlStringsmodulejs))), "@react-spectrum/picker");
+    let { autoComplete: autoComplete, isDisabled: isDisabled, direction: direction = "bottom", align: align = "start", shouldFlip: shouldFlip = true, placeholder: placeholder = stringFormatter.format("placeholder"), isQuiet: isQuiet, label: label, labelPosition: labelPosition = "top", menuWidth: menuWidth, name: name, autoFocus: autoFocus } = props;
+    let state = (0, $6hDYZ$useSelectState)(props);
+    let domRef = (0, $6hDYZ$useDOMRef)(ref);
+    let popoverRef = (0, $6hDYZ$useRef)();
+    let triggerRef = (0, $6hDYZ$useRef)();
+    let unwrappedTriggerRef = (0, $6hDYZ$useUnwrapDOMRef)(triggerRef);
+    let listboxRef = (0, $6hDYZ$useRef)();
+    let isLoadingInitial = props.isLoading && state.collection.size === 0;
+    let isLoadingMore = props.isLoading && state.collection.size > 0;
+    let progressCircleId = (0, $6hDYZ$useId)();
+    // We create the listbox layout in Picker and pass it to ListBoxBase below
+    // so that the layout information can be cached even while the listbox is not mounted.
+    // We also use the layout as the keyboard delegate for type to select.
+    let layout = (0, $6hDYZ$useListBoxLayout)(state, isLoadingMore);
+    let { labelProps: labelProps, triggerProps: triggerProps, valueProps: valueProps, menuProps: menuProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $6hDYZ$useSelect)({
+        ...props,
+        "aria-describedby": isLoadingInitial ? progressCircleId : undefined,
+        keyboardDelegate: layout
+    }, state, unwrappedTriggerRef);
+    let isMobile = (0, $6hDYZ$useIsMobileDevice)();
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $6hDYZ$useHover)({
+        isDisabled: isDisabled
+    });
+    // On small screen devices, the listbox is rendered in a tray, otherwise a popover.
+    let listbox = /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$ListBoxBase), {
+        ...menuProps,
+        ref: listboxRef,
+        disallowEmptySelection: true,
+        autoFocus: state.focusStrategy || true,
+        shouldSelectOnPressUp: true,
+        focusOnPointerEnter: true,
+        layout: layout,
+        state: state,
+        width: isMobile ? "100%" : undefined,
+        // Set max height: inherit so Tray scrolling works
+        UNSAFE_style: {
+            maxHeight: "inherit"
+        },
+        isLoading: props.isLoading,
+        onLoadMore: props.onLoadMore
+    });
+    // Measure the width of the button to inform the width of the menu (below).
+    let [buttonWidth, setButtonWidth] = (0, $6hDYZ$useState)(null);
+    let { scale: scale } = (0, $6hDYZ$useProvider)();
+    let onResize = (0, $6hDYZ$useCallback)(()=>{
+        if (!isMobile && unwrappedTriggerRef.current) {
+            let width = unwrappedTriggerRef.current.offsetWidth;
+            setButtonWidth(width);
+        }
+    }, [
+        unwrappedTriggerRef,
+        setButtonWidth,
+        isMobile
+    ]);
+    (0, $6hDYZ$useResizeObserver)({
+        ref: unwrappedTriggerRef,
+        onResize: onResize
+    });
+    (0, $6hDYZ$useLayoutEffect)(onResize, [
+        scale,
+        state.selectedKey,
+        onResize
+    ]);
+    let overlay;
+    if (isMobile) overlay = /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$Tray), {
+        state: state
+    }, listbox);
+    else {
+        // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.
+        // Always have a minimum width of the button width. When quiet, there is an extra offset to add.
+        // Not using style props for this because they don't support `calc`.
+        let width = isQuiet ? null : buttonWidth;
+        let style = {
+            width: menuWidth ? (0, $6hDYZ$dimensionValue)(menuWidth) : width,
+            minWidth: isQuiet ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : buttonWidth
+        };
+        overlay = /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$Popover), {
+            UNSAFE_style: style,
+            UNSAFE_className: (0, $6hDYZ$classNames)((0, ($parcel$interopDefault($6hDYZ$dropdown_vars_cssmodulejs))), "spectrum-Dropdown-popover", {
+                "spectrum-Dropdown-popover--quiet": isQuiet
+            }),
+            ref: popoverRef,
+            placement: `${direction} ${align}`,
+            shouldFlip: shouldFlip,
+            hideArrow: true,
+            state: state,
+            triggerRef: unwrappedTriggerRef,
+            scrollRef: listboxRef
+        }, listbox);
+    }
+    let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;
+    if (typeof contents === "string") contents = /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$Text), null, contents);
+    let picker = /*#__PURE__*/ (0, $6hDYZ$react).createElement("div", {
+        className: (0, $6hDYZ$classNames)((0, ($parcel$interopDefault($6hDYZ$dropdown_vars_cssmodulejs))), "spectrum-Dropdown", {
+            "is-invalid": isInvalid && !isDisabled,
+            "is-disabled": isDisabled,
+            "spectrum-Dropdown--quiet": isQuiet
+        })
+    }, /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$HiddenSelect), {
+        autoComplete: autoComplete,
+        isDisabled: isDisabled,
+        state: state,
+        triggerRef: unwrappedTriggerRef,
+        label: label,
+        name: name
+    }), /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$PressResponder), (0, $6hDYZ$mergeProps)(hoverProps, triggerProps), /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$FieldButton), {
+        ref: triggerRef,
+        isActive: state.isOpen,
+        isQuiet: isQuiet,
+        isDisabled: isDisabled,
+        isInvalid: isInvalid,
+        autoFocus: autoFocus,
+        UNSAFE_className: (0, $6hDYZ$classNames)((0, ($parcel$interopDefault($6hDYZ$dropdown_vars_cssmodulejs))), "spectrum-Dropdown-trigger", {
+            "is-hovered": isHovered
+        })
+    }, /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$SlotProvider), {
+        slots: {
+            icon: {
+                UNSAFE_className: (0, $6hDYZ$classNames)((0, ($parcel$interopDefault($6hDYZ$dropdown_vars_cssmodulejs))), "spectrum-Icon"),
+                size: "S"
+            },
+            avatar: {
+                UNSAFE_className: (0, $6hDYZ$classNames)((0, ($parcel$interopDefault($6hDYZ$dropdown_vars_cssmodulejs))), "spectrum-Dropdown-avatar"),
+                size: "avatar-size-100"
+            },
+            text: {
+                ...valueProps,
+                UNSAFE_className: (0, $6hDYZ$classNames)((0, ($parcel$interopDefault($6hDYZ$dropdown_vars_cssmodulejs))), "spectrum-Dropdown-label", {
+                    "is-placeholder": !state.selectedItem
+                })
+            },
+            description: {
+                isHidden: true
+            }
+        }
+    }, contents), isLoadingInitial && /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$ProgressCircle), {
+        id: progressCircleId,
+        isIndeterminate: true,
+        size: "S",
+        "aria-label": stringFormatter.format("loading"),
+        UNSAFE_className: (0, $6hDYZ$classNames)((0, ($parcel$interopDefault($6hDYZ$dropdown_vars_cssmodulejs))), "spectrum-Dropdown-progressCircle")
+    }), isInvalid && !isLoadingInitial && !isDisabled && /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$spectrumiconsuiAlertMedium), {
+        UNSAFE_className: (0, $6hDYZ$classNames)((0, ($parcel$interopDefault($6hDYZ$dropdown_vars_cssmodulejs))), "spectrum-Dropdown-invalidIcon")
+    }), /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$spectrumiconsuiChevronDownMedium), {
+        UNSAFE_className: (0, $6hDYZ$classNames)((0, ($parcel$interopDefault($6hDYZ$dropdown_vars_cssmodulejs))), "spectrum-Dropdown-chevron")
+    }))), state.collection.size === 0 ? null : overlay);
+    let wrapperClassName = (0, $6hDYZ$classNames)((0, ($parcel$interopDefault($6hDYZ$dropdown_vars_cssmodulejs))), "spectrum-Field", {
+        "spectrum-Dropdown-fieldWrapper--quiet": isQuiet,
+        "spectrum-Dropdown-fieldWrapper--positionSide": labelPosition === "side"
+    });
+    return /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$Field), {
+        ...props,
+        ref: domRef,
+        wrapperClassName: wrapperClassName,
+        labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails,
+        showErrorIcon: false,
+        includeNecessityIndicatorInAccessibilityName: true,
+        elementType: "span"
+    }, picker);
+}
+/**
+ * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
+ */ // forwardRef doesn't support generic parameters, so cast the result to the correct type
+// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+const $51664a9007a3c6f9$export$ba25329847403e11 = /*#__PURE__*/ (0, $6hDYZ$react).forwardRef($51664a9007a3c6f9$var$Picker);
+
+
+export {$51664a9007a3c6f9$export$ba25329847403e11 as Picker};
+//# sourceMappingURL=Picker.mjs.map