@react-spectrum/picker 3.15.10 → 3.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/Picker.main.js +5 -8
  2. package/dist/Picker.main.js.map +1 -1
  3. package/dist/Picker.mjs +5 -8
  4. package/dist/Picker.module.js +5 -8
  5. package/dist/Picker.module.js.map +1 -1
  6. package/dist/types.d.ts.map +1 -1
  7. package/package.json +19 -19
  8. package/src/Picker.tsx +4 -9
package/dist/Picker.main.js CHANGED
@@ -63,7 +63,7 @@ const $902e54cfaa4270a9$export$ba25329847403e11 = /*#__PURE__*/ (0, ($parcel$int
63
63
  props = (0, $3qYcd$reactspectrumprovider.useProviderProps)(props);
64
64
  props = (0, $3qYcd$reactspectrumform.useFormProps)(props);
65
65
  let stringFormatter = (0, $3qYcd$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($b95bf71d4a256ee8$exports))), '@react-spectrum/picker');
66
- 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;
66
+ let { autoComplete: autoComplete, isDisabled: isDisabled, direction: direction = 'bottom', align: align = 'start', shouldFlip: shouldFlip = true, placeholder: placeholder = stringFormatter.format('placeholder'), isQuiet: isQuiet, labelPosition: labelPosition = 'top', menuWidth: menuWidth, autoFocus: autoFocus } = props;
67
67
  let state = (0, $3qYcd$reactstatelyselect.useSelectState)(props);
68
68
  let domRef = (0, $3qYcd$reactspectrumutils.useDOMRef)(ref);
69
69
  let popoverRef = (0, $3qYcd$react.useRef)(null);
@@ -77,7 +77,7 @@ const $902e54cfaa4270a9$export$ba25329847403e11 = /*#__PURE__*/ (0, ($parcel$int
77
77
  // so that the layout information can be cached even while the listbox is not mounted.
78
78
  // We also use the layout as the keyboard delegate for type to select.
79
79
  let layout = (0, $3qYcd$reactspectrumlistbox.useListBoxLayout)();
80
- let { labelProps: labelProps, triggerProps: triggerProps, valueProps: valueProps, menuProps: menuProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $3qYcd$reactariaselect.useSelect)({
80
+ let { labelProps: labelProps, triggerProps: triggerProps, valueProps: valueProps, menuProps: menuProps, hiddenSelectProps: hiddenSelectProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $3qYcd$reactariaselect.useSelect)({
81
81
  ...props,
82
82
  'aria-describedby': isLoadingInitial ? progressCircleId : undefined
83
83
  }, state, unwrappedTriggerRef);
@@ -150,7 +150,8 @@ const $902e54cfaa4270a9$export$ba25329847403e11 = /*#__PURE__*/ (0, ($parcel$int
150
150
  hideArrow: true,
151
151
  state: state,
152
152
  triggerRef: unwrappedTriggerRef,
153
- scrollRef: listboxRef
153
+ scrollRef: listboxRef,
154
+ shouldContainFocus: true
154
155
  }, listbox);
155
156
  }
156
157
  let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;
@@ -163,11 +164,7 @@ const $902e54cfaa4270a9$export$ba25329847403e11 = /*#__PURE__*/ (0, ($parcel$int
163
164
  })
164
165
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($3qYcd$react))).createElement((0, $3qYcd$reactariaselect.HiddenSelect), {
165
166
  autoComplete: autoComplete,
166
- isDisabled: isDisabled,
167
- state: state,
168
- triggerRef: unwrappedTriggerRef,
169
- label: label,
170
- name: name
167
+ ...hiddenSelectProps
171
168
  }), /*#__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), {
172
169
  ref: triggerRef,
173
170
  isActive: state.isOpen,
package/dist/Picker.main.js.map CHANGED
@@ -1 +1 @@
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\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\nexport const Picker = React.forwardRef(function 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>>(null);\n let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n let listboxRef = useRef(null);\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();\n let {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSelect({\n ...props,\n 'aria-describedby': (isLoadingInitial ? progressCircleId : undefined)\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 showLoadingSpinner={isLoadingMore}\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<number | undefined>(undefined);\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 ? undefined : 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}) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Picker.main.js.map"}
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\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\nexport const Picker = React.forwardRef(function 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 labelPosition = 'top' as LabelPosition,\n menuWidth,\n autoFocus\n } = props;\n\n let state = useSelectState(props);\n let domRef = useDOMRef(ref);\n\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n let listboxRef = useRef(null);\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();\n let {labelProps, triggerProps, valueProps, menuProps, hiddenSelectProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSelect({\n ...props,\n 'aria-describedby': (isLoadingInitial ? progressCircleId : undefined)\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 showLoadingSpinner={isLoadingMore}\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<number | undefined>(undefined);\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 ? undefined : 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 shouldContainFocus>\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 {...hiddenSelectProps} />\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}) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Picker.main.js.map"}
package/dist/Picker.mjs CHANGED
@@ -57,7 +57,7 @@ const $51664a9007a3c6f9$export$ba25329847403e11 = /*#__PURE__*/ (0, $6hDYZ$react
57
57
  props = (0, $6hDYZ$useProviderProps)(props);
58
58
  props = (0, $6hDYZ$useFormProps)(props);
59
59
  let stringFormatter = (0, $6hDYZ$useLocalizedStringFormatter)((0, ($parcel$interopDefault($6hDYZ$intlStringsmodulejs))), '@react-spectrum/picker');
60
- 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;
60
+ let { autoComplete: autoComplete, isDisabled: isDisabled, direction: direction = 'bottom', align: align = 'start', shouldFlip: shouldFlip = true, placeholder: placeholder = stringFormatter.format('placeholder'), isQuiet: isQuiet, labelPosition: labelPosition = 'top', menuWidth: menuWidth, autoFocus: autoFocus } = props;
61
61
  let state = (0, $6hDYZ$useSelectState)(props);
62
62
  let domRef = (0, $6hDYZ$useDOMRef)(ref);
63
63
  let popoverRef = (0, $6hDYZ$useRef)(null);
@@ -71,7 +71,7 @@ const $51664a9007a3c6f9$export$ba25329847403e11 = /*#__PURE__*/ (0, $6hDYZ$react
71
71
  // so that the layout information can be cached even while the listbox is not mounted.
72
72
  // We also use the layout as the keyboard delegate for type to select.
73
73
  let layout = (0, $6hDYZ$useListBoxLayout)();
74
- let { labelProps: labelProps, triggerProps: triggerProps, valueProps: valueProps, menuProps: menuProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $6hDYZ$useSelect)({
74
+ let { labelProps: labelProps, triggerProps: triggerProps, valueProps: valueProps, menuProps: menuProps, hiddenSelectProps: hiddenSelectProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $6hDYZ$useSelect)({
75
75
  ...props,
76
76
  'aria-describedby': isLoadingInitial ? progressCircleId : undefined
77
77
  }, state, unwrappedTriggerRef);
@@ -144,7 +144,8 @@ const $51664a9007a3c6f9$export$ba25329847403e11 = /*#__PURE__*/ (0, $6hDYZ$react
144
144
  hideArrow: true,
145
145
  state: state,
146
146
  triggerRef: unwrappedTriggerRef,
147
- scrollRef: listboxRef
147
+ scrollRef: listboxRef,
148
+ shouldContainFocus: true
148
149
  }, listbox);
149
150
  }
150
151
  let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;
@@ -157,11 +158,7 @@ const $51664a9007a3c6f9$export$ba25329847403e11 = /*#__PURE__*/ (0, $6hDYZ$react
157
158
  })
158
159
  }, /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$HiddenSelect), {
159
160
  autoComplete: autoComplete,
160
- isDisabled: isDisabled,
161
- state: state,
162
- triggerRef: unwrappedTriggerRef,
163
- label: label,
164
- name: name
161
+ ...hiddenSelectProps
165
162
  }), /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$PressResponder), (0, $6hDYZ$mergeProps)(hoverProps, triggerProps), /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$FieldButton), {
166
163
  ref: triggerRef,
167
164
  isActive: state.isOpen,
package/dist/Picker.module.js CHANGED
@@ -57,7 +57,7 @@ const $51664a9007a3c6f9$export$ba25329847403e11 = /*#__PURE__*/ (0, $6hDYZ$react
57
57
  props = (0, $6hDYZ$useProviderProps)(props);
58
58
  props = (0, $6hDYZ$useFormProps)(props);
59
59
  let stringFormatter = (0, $6hDYZ$useLocalizedStringFormatter)((0, ($parcel$interopDefault($6hDYZ$intlStringsmodulejs))), '@react-spectrum/picker');
60
- 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;
60
+ let { autoComplete: autoComplete, isDisabled: isDisabled, direction: direction = 'bottom', align: align = 'start', shouldFlip: shouldFlip = true, placeholder: placeholder = stringFormatter.format('placeholder'), isQuiet: isQuiet, labelPosition: labelPosition = 'top', menuWidth: menuWidth, autoFocus: autoFocus } = props;
61
61
  let state = (0, $6hDYZ$useSelectState)(props);
62
62
  let domRef = (0, $6hDYZ$useDOMRef)(ref);
63
63
  let popoverRef = (0, $6hDYZ$useRef)(null);
@@ -71,7 +71,7 @@ const $51664a9007a3c6f9$export$ba25329847403e11 = /*#__PURE__*/ (0, $6hDYZ$react
71
71
  // so that the layout information can be cached even while the listbox is not mounted.
72
72
  // We also use the layout as the keyboard delegate for type to select.
73
73
  let layout = (0, $6hDYZ$useListBoxLayout)();
74
- let { labelProps: labelProps, triggerProps: triggerProps, valueProps: valueProps, menuProps: menuProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $6hDYZ$useSelect)({
74
+ let { labelProps: labelProps, triggerProps: triggerProps, valueProps: valueProps, menuProps: menuProps, hiddenSelectProps: hiddenSelectProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $6hDYZ$useSelect)({
75
75
  ...props,
76
76
  'aria-describedby': isLoadingInitial ? progressCircleId : undefined
77
77
  }, state, unwrappedTriggerRef);
@@ -144,7 +144,8 @@ const $51664a9007a3c6f9$export$ba25329847403e11 = /*#__PURE__*/ (0, $6hDYZ$react
144
144
  hideArrow: true,
145
145
  state: state,
146
146
  triggerRef: unwrappedTriggerRef,
147
- scrollRef: listboxRef
147
+ scrollRef: listboxRef,
148
+ shouldContainFocus: true
148
149
  }, listbox);
149
150
  }
150
151
  let contents = state.selectedItem ? state.selectedItem.rendered : placeholder;
@@ -157,11 +158,7 @@ const $51664a9007a3c6f9$export$ba25329847403e11 = /*#__PURE__*/ (0, $6hDYZ$react
157
158
  })
158
159
  }, /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$HiddenSelect), {
159
160
  autoComplete: autoComplete,
160
- isDisabled: isDisabled,
161
- state: state,
162
- triggerRef: unwrappedTriggerRef,
163
- label: label,
164
- name: name
161
+ ...hiddenSelectProps
165
162
  }), /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$PressResponder), (0, $6hDYZ$mergeProps)(hoverProps, triggerProps), /*#__PURE__*/ (0, $6hDYZ$react).createElement((0, $6hDYZ$FieldButton), {
166
163
  ref: triggerRef,
167
164
  isActive: state.isOpen,
package/dist/Picker.module.js.map CHANGED
@@ -1 +1 @@
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\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\nexport const Picker = React.forwardRef(function 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>>(null);\n let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n let listboxRef = useRef(null);\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();\n let {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSelect({\n ...props,\n 'aria-describedby': (isLoadingInitial ? progressCircleId : undefined)\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 showLoadingSpinner={isLoadingMore}\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<number | undefined>(undefined);\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 ? undefined : 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}) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Picker.module.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;AAsCM,MAAM,0DAAS,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,OAAyB,KAA6B,EAAE,GAA2B;IACjI,QAAQ,CAAA,GAAA,mBAAW,EAAE,OAAO;IAC5B,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACrB,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,gBACF,YAAY,cACZ,UAAU,aACV,YAAY,iBACZ,QAAQ,qBACR,aAAa,mBACb,cAAc,gBAAgB,MAAM,CAAC,yBACrC,OAAO,iBACP,gBAAgB,kBAChB,SAAS,aACT,SAAS,EACV,GAAG;IAEJ,IAAI,QAAQ,CAAA,GAAA,qBAAa,EAAE;IAC3B,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,aAAa,CAAA,GAAA,aAAK,EAA+B;IACrD,IAAI,aAAa,CAAA,GAAA,aAAK,EAAkC;IACxD,IAAI,sBAAsB,CAAA,GAAA,sBAAc,EAAE;IAC1C,IAAI,aAAa,CAAA,GAAA,aAAK,EAAE;IAExB,IAAI,mBAAmB,MAAM,SAAS,IAAI,MAAM,UAAU,CAAC,IAAI,KAAK;IACpE,IAAI,gBAAgB,MAAM,SAAS,IAAI,MAAM,UAAU,CAAC,IAAI,GAAG;IAC/D,IAAI,mBAAmB,CAAA,GAAA,YAAI;IAE3B,0EAA0E;IAC1E,sFAAsF;IACtF,sEAAsE;IACtE,IAAI,SAAS,CAAA,GAAA,uBAAe;IAC5B,IAAI,cAAC,UAAU,gBAAE,YAAY,cAAE,UAAU,aAAE,SAAS,qBAAE,iBAAiB,oBAAE,gBAAgB,qBAAE,iBAAiB,aAAE,SAAS,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,gBAAQ,EAAE;QACxK,GAAG,KAAK;QACR,oBAAqB,mBAAmB,mBAAmB;IAC7D,GAAG,OAAO;IAEV,IAAI,WAAW,CAAA,GAAA,wBAAgB;IAC/B,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;oBAAC;IAAU;IAElD,mFAAmF;IACnF,IAAI,wBACF,gCAAC,CAAA,GAAA,kBAAU;QACR,GAAG,SAAS;QACb,KAAK;QACL,wBAAA;QACA,WAAW,MAAM,aAAa,IAAI;QAClC,uBAAA;QACA,qBAAA;QACA,QAAQ;QACR,OAAO;QACP,OAAO,WAAW,SAAS;QAC3B,kDAAkD;QAClD,cAAc;YAAC,WAAW;QAAS;QACnC,WAAW,MAAM,SAAS;QAC1B,oBAAoB;QACpB,YAAY,MAAM,UAAU;;IAGhC,2EAA2E;IAC3E,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAsB;IACjE,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,kBAAU;IAExB,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE;QACzB,IAAI,CAAC,YAAY,oBAAoB,OAAO,EAAE;YAC5C,IAAI,QAAQ,oBAAoB,OAAO,CAAC,WAAW;YACnD,eAAe;QACjB;IACF,GAAG;QAAC;QAAqB;QAAgB;KAAS;IAElD,CAAA,GAAA,wBAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,CAAA,GAAA,sBAAc,EAAE,UAAU;QAAC;QAAO,MAAM,WAAW;QAAE;KAAS;IAE9D,IAAI;IACJ,IAAI,UACF,wBACE,gCAAC,CAAA,GAAA,WAAG;QAAE,OAAO;OACV;SAGA;QACL,0HAA0H;QAC1H,gGAAgG;QAChG,oEAAoE;QACpE,IAAI,QAAQ,UAAU,YAAY;QAClC,IAAI,QAAQ;YACV,OAAO,YAAY,CAAA,GAAA,qBAAa,EAAE,aAAa;YAC/C,UAAU,UAAU,CAAC,KAAK,EAAE,YAAY,qDAAqD,CAAC,GAAG;QACnG;QAEA,wBACE,gCAAC,CAAA,GAAA,cAAM;YACL,cAAc;YACd,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0DAAK,GAAG,6BAA6B;gBAAC,oCAAoC;YAAO;YAC9G,KAAK;YACL,WAAW,GAAG,UAAU,CAAC,EAAE,OAAO;YAClC,YAAY;YACZ,WAAA;YACA,OAAO;YACP,YAAY;YACZ,WAAW;YACX,oBAAA;WACC;IAGP;IAEA,IAAI,WAAW,MAAM,YAAY,GAAG,MAAM,YAAY,CAAC,QAAQ,GAAG;IAClE,IAAI,OAAO,aAAa,UACtB,yBAAW,gCAAC,CAAA,GAAA,WAAG,SAAG;IAGpB,IAAI,uBACF,gCAAC;QACC,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,0DAAK,GACL,qBACA;YACE,cAAc,aAAa,CAAC;YAC5B,eAAe;YACf,4BAA4B;QAC9B;qBAGJ,gCAAC,CAAA,GAAA,mBAAW;QACV,cAAc;QACb,GAAG,iBAAiB;sBACvB,gCAAC,CAAA,GAAA,qBAAa,GAAM,CAAA,GAAA,iBAAS,EAAE,YAAY,6BACzC,gCAAC,CAAA,GAAA,kBAAU;QACT,KAAK;QACL,UAAU,MAAM,MAAM;QACtB,SAAS;QACT,YAAY;QACZ,WAAW;QACX,WAAW;QACX,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0DAAK,GAAG,6BAA6B;YAAC,cAAc;QAAS;qBAC1F,gCAAC,CAAA,GAAA,mBAAW;QACV,OAAO;YACL,MAAM;gBAAC,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0DAAK,GAAG;gBAAkB,MAAM;YAAG;YACvE,QAAQ;gBAAC,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0DAAK,GAAG;gBAA6B,MAAM;YAAiB;YAClG,MAAM;gBACJ,GAAG,UAAU;gBACb,kBAAkB,CAAA,GAAA,iBAAS,EACzB,CAAA,GAAA,0DAAK,GACL,2BACA;oBAAC,kBAAkB,CAAC,MAAM,YAAY;gBAAA;YAE1C;YACA,aAAa;gBACX,UAAU;YACZ;QACF;OACC,WAEF,kCACC,gCAAC,CAAA,GAAA,qBAAa;QACZ,IAAI;QACJ,iBAAA;QACA,MAAK;QACL,cAAY,gBAAgB,MAAM,CAAC;QACnC,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0DAAK,GAAG;QAExC,aAAa,CAAC,oBAAoB,CAAC,4BAClC,gCAAC,CAAA,GAAA,iCAAU;QAAE,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0DAAK,GAAG;sBAEpD,gCAAC,CAAA,GAAA,uCAAgB;QAAE,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0DAAK,GAAG;UAG3D,MAAM,UAAU,CAAC,IAAI,KAAK,IAAI,OAAO;IAI1C,IAAI,mBAAmB,CAAA,GAAA,iBAAS,EAC9B,CAAA,GAAA,0DAAK,GACL,kBACA;QACE,yCAAyC;QACzC,gDAAgD,kBAAkB;IACpE;IAGF,qBACE,gCAAC,CAAA,GAAA,YAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,kBAAkB;QAClB,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,WAAW;QACX,kBAAkB;QAClB,mBAAmB;QACnB,eAAe;QACf,8CAAA;QACA,aAAY;OACX;AAGP","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\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\nexport const Picker = React.forwardRef(function 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 labelPosition = 'top' as LabelPosition,\n menuWidth,\n autoFocus\n } = props;\n\n let state = useSelectState(props);\n let domRef = useDOMRef(ref);\n\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n let listboxRef = useRef(null);\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();\n let {labelProps, triggerProps, valueProps, menuProps, hiddenSelectProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSelect({\n ...props,\n 'aria-describedby': (isLoadingInitial ? progressCircleId : undefined)\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 showLoadingSpinner={isLoadingMore}\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<number | undefined>(undefined);\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 ? undefined : 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 shouldContainFocus>\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 {...hiddenSelectProps} />\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}) as <T>(props: SpectrumPickerProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Picker.module.js.map"}
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;AA2CA;;GAEG;AAGH,OAAO,MAAM,QAkNP,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACnP1F,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACzD,YAAY,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-spectrum/picker/src/packages/@react-spectrum/picker/src/Picker.tsx","packages/@react-spectrum/picker/src/packages/@react-spectrum/picker/src/index.ts","packages/@react-spectrum/picker/src/index.ts"],"sourcesContent":[null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport {Picker} from './Picker';\nexport {Item, Section} from '@react-stately/collections';\nexport type {SpectrumPickerProps} from '@react-types/select';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;AA2CA;;GAEG;AAGH,OAAO,MAAM,QA6MP,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;AC9O1F,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACzD,YAAY,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-spectrum/picker/src/packages/@react-spectrum/picker/src/Picker.tsx","packages/@react-spectrum/picker/src/packages/@react-spectrum/picker/src/index.ts","packages/@react-spectrum/picker/src/index.ts"],"sourcesContent":[null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport {Picker} from './Picker';\nexport {Item, Section} from '@react-stately/collections';\nexport type {SpectrumPickerProps} from '@react-types/select';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/picker",
3
- "version": "3.15.10",
3
+ "version": "3.16.0",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -40,23 +40,23 @@
40
40
  "url": "https://github.com/adobe/react-spectrum"
41
41
  },
42
42
  "dependencies": {
43
- "@react-aria/i18n": "^3.12.10",
44
- "@react-aria/interactions": "^3.25.2",
45
- "@react-aria/select": "^3.15.6",
46
- "@react-aria/utils": "^3.29.1",
47
- "@react-spectrum/button": "^3.16.15",
48
- "@react-spectrum/form": "^3.7.16",
49
- "@react-spectrum/label": "^3.16.16",
50
- "@react-spectrum/listbox": "^3.15.2",
51
- "@react-spectrum/overlays": "^5.7.6",
52
- "@react-spectrum/progress": "^3.7.17",
53
- "@react-spectrum/text": "^3.5.16",
54
- "@react-spectrum/utils": "^3.12.6",
55
- "@react-stately/collections": "^3.12.5",
56
- "@react-stately/select": "^3.6.14",
57
- "@react-types/select": "^3.9.13",
58
- "@react-types/shared": "^3.30.0",
59
- "@spectrum-icons/ui": "^3.6.17",
43
+ "@react-aria/i18n": "^3.12.11",
44
+ "@react-aria/interactions": "^3.25.4",
45
+ "@react-aria/select": "^3.16.0",
46
+ "@react-aria/utils": "^3.30.0",
47
+ "@react-spectrum/button": "^3.17.0",
48
+ "@react-spectrum/form": "^3.7.17",
49
+ "@react-spectrum/label": "^3.16.17",
50
+ "@react-spectrum/listbox": "^3.15.4",
51
+ "@react-spectrum/overlays": "^5.8.0",
52
+ "@react-spectrum/progress": "^3.7.18",
53
+ "@react-spectrum/text": "^3.5.18",
54
+ "@react-spectrum/utils": "^3.12.7",
55
+ "@react-stately/collections": "^3.12.6",
56
+ "@react-stately/select": "^3.7.0",
57
+ "@react-types/select": "^3.10.0",
58
+ "@react-types/shared": "^3.31.0",
59
+ "@spectrum-icons/ui": "^3.6.18",
60
60
  "@swc/helpers": "^0.5.0"
61
61
  },
62
62
  "devDependencies": {
@@ -70,5 +70,5 @@
70
70
  "publishConfig": {
71
71
  "access": "public"
72
72
  },
73
- "gitHead": "265b4d7f107905ee1c6e87a8af1613ab440a6849"
73
+ "gitHead": "8b9348ff255e018b2dd9b27e2a45507cadfa1d35"
74
74
  }
package/src/Picker.tsx CHANGED
@@ -59,10 +59,8 @@ export const Picker = React.forwardRef(function Picker<T extends object>(props:
59
59
  shouldFlip = true,
60
60
  placeholder = stringFormatter.format('placeholder'),
61
61
  isQuiet,
62
- label,
63
62
  labelPosition = 'top' as LabelPosition,
64
63
  menuWidth,
65
- name,
66
64
  autoFocus
67
65
  } = props;
68
66
 
@@ -82,7 +80,7 @@ export const Picker = React.forwardRef(function Picker<T extends object>(props:
82
80
  // so that the layout information can be cached even while the listbox is not mounted.
83
81
  // We also use the layout as the keyboard delegate for type to select.
84
82
  let layout = useListBoxLayout();
85
- let {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSelect({
83
+ let {labelProps, triggerProps, valueProps, menuProps, hiddenSelectProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSelect({
86
84
  ...props,
87
85
  'aria-describedby': (isLoadingInitial ? progressCircleId : undefined)
88
86
  }, state, unwrappedTriggerRef);
@@ -154,7 +152,8 @@ export const Picker = React.forwardRef(function Picker<T extends object>(props:
154
152
  hideArrow
155
153
  state={state}
156
154
  triggerRef={unwrappedTriggerRef}
157
- scrollRef={listboxRef}>
155
+ scrollRef={listboxRef}
156
+ shouldContainFocus>
158
157
  {listbox}
159
158
  </Popover>
160
159
  );
@@ -180,11 +179,7 @@ export const Picker = React.forwardRef(function Picker<T extends object>(props:
180
179
  }>
181
180
  <HiddenSelect
182
181
  autoComplete={autoComplete}
183
- isDisabled={isDisabled}
184
- state={state}
185
- triggerRef={unwrappedTriggerRef}
186
- label={label}
187
- name={name} />
182
+ {...hiddenSelectProps} />
188
183
  <PressResponder {...mergeProps(hoverProps, triggerProps)}>
189
184
  <FieldButton
190
185
  ref={triggerRef}