@react-spectrum/picker 3.15.3 → 3.15.4

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 (9) hide show
  1. package/dist/Picker.main.js +5 -5
  2. package/dist/Picker.main.js.map +1 -1
  3. package/dist/Picker.mjs +5 -5
  4. package/dist/Picker.module.js +5 -5
  5. package/dist/Picker.module.js.map +1 -1
  6. package/dist/dropdown_vars_css.main.js.map +1 -1
  7. package/dist/dropdown_vars_css.module.js.map +1 -1
  8. package/package.json +21 -21
  9. package/src/Picker.tsx +5 -5
package/dist/Picker.main.js CHANGED
@@ -66,10 +66,10 @@ function $902e54cfaa4270a9$var$Picker(props, ref) {
66
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;
67
67
  let state = (0, $3qYcd$reactstatelyselect.useSelectState)(props);
68
68
  let domRef = (0, $3qYcd$reactspectrumutils.useDOMRef)(ref);
69
- let popoverRef = (0, $3qYcd$react.useRef)(undefined);
70
- let triggerRef = (0, $3qYcd$react.useRef)(undefined);
69
+ let popoverRef = (0, $3qYcd$react.useRef)(null);
70
+ let triggerRef = (0, $3qYcd$react.useRef)(null);
71
71
  let unwrappedTriggerRef = (0, $3qYcd$reactspectrumutils.useUnwrapDOMRef)(triggerRef);
72
- let listboxRef = (0, $3qYcd$react.useRef)(undefined);
72
+ let listboxRef = (0, $3qYcd$react.useRef)(null);
73
73
  let isLoadingInitial = props.isLoading && state.collection.size === 0;
74
74
  let isLoadingMore = props.isLoading && state.collection.size > 0;
75
75
  let progressCircleId = (0, $3qYcd$reactariautils.useId)();
@@ -105,7 +105,7 @@ function $902e54cfaa4270a9$var$Picker(props, ref) {
105
105
  onLoadMore: props.onLoadMore
106
106
  });
107
107
  // Measure the width of the button to inform the width of the menu (below).
108
- let [buttonWidth, setButtonWidth] = (0, $3qYcd$react.useState)(null);
108
+ let [buttonWidth, setButtonWidth] = (0, $3qYcd$react.useState)(undefined);
109
109
  let { scale: scale } = (0, $3qYcd$reactspectrumprovider.useProvider)();
110
110
  let onResize = (0, $3qYcd$react.useCallback)(()=>{
111
111
  if (!isMobile && unwrappedTriggerRef.current) {
@@ -134,7 +134,7 @@ function $902e54cfaa4270a9$var$Picker(props, ref) {
134
134
  // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.
135
135
  // Always have a minimum width of the button width. When quiet, there is an extra offset to add.
136
136
  // Not using style props for this because they don't support `calc`.
137
- let width = isQuiet ? null : buttonWidth;
137
+ let width = isQuiet ? undefined : buttonWidth;
138
138
  let style = {
139
139
  width: menuWidth ? (0, $3qYcd$reactspectrumutils.dimensionValue)(menuWidth) : width,
140
140
  minWidth: isQuiet ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : buttonWidth
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\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>>(undefined);\n let triggerRef = useRef<FocusableRefValue<HTMLElement>>(undefined);\n let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n let listboxRef = useRef(undefined);\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(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"}
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>>(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}\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 CHANGED
@@ -60,10 +60,10 @@ function $51664a9007a3c6f9$var$Picker(props, ref) {
60
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;
61
61
  let state = (0, $6hDYZ$useSelectState)(props);
62
62
  let domRef = (0, $6hDYZ$useDOMRef)(ref);
63
- let popoverRef = (0, $6hDYZ$useRef)(undefined);
64
- let triggerRef = (0, $6hDYZ$useRef)(undefined);
63
+ let popoverRef = (0, $6hDYZ$useRef)(null);
64
+ let triggerRef = (0, $6hDYZ$useRef)(null);
65
65
  let unwrappedTriggerRef = (0, $6hDYZ$useUnwrapDOMRef)(triggerRef);
66
- let listboxRef = (0, $6hDYZ$useRef)(undefined);
66
+ let listboxRef = (0, $6hDYZ$useRef)(null);
67
67
  let isLoadingInitial = props.isLoading && state.collection.size === 0;
68
68
  let isLoadingMore = props.isLoading && state.collection.size > 0;
69
69
  let progressCircleId = (0, $6hDYZ$useId)();
@@ -99,7 +99,7 @@ function $51664a9007a3c6f9$var$Picker(props, ref) {
99
99
  onLoadMore: props.onLoadMore
100
100
  });
101
101
  // Measure the width of the button to inform the width of the menu (below).
102
- let [buttonWidth, setButtonWidth] = (0, $6hDYZ$useState)(null);
102
+ let [buttonWidth, setButtonWidth] = (0, $6hDYZ$useState)(undefined);
103
103
  let { scale: scale } = (0, $6hDYZ$useProvider)();
104
104
  let onResize = (0, $6hDYZ$useCallback)(()=>{
105
105
  if (!isMobile && unwrappedTriggerRef.current) {
@@ -128,7 +128,7 @@ function $51664a9007a3c6f9$var$Picker(props, ref) {
128
128
  // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.
129
129
  // Always have a minimum width of the button width. When quiet, there is an extra offset to add.
130
130
  // Not using style props for this because they don't support `calc`.
131
- let width = isQuiet ? null : buttonWidth;
131
+ let width = isQuiet ? undefined : buttonWidth;
132
132
  let style = {
133
133
  width: menuWidth ? (0, $6hDYZ$dimensionValue)(menuWidth) : width,
134
134
  minWidth: isQuiet ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : buttonWidth
package/dist/Picker.module.js CHANGED
@@ -60,10 +60,10 @@ function $51664a9007a3c6f9$var$Picker(props, ref) {
60
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;
61
61
  let state = (0, $6hDYZ$useSelectState)(props);
62
62
  let domRef = (0, $6hDYZ$useDOMRef)(ref);
63
- let popoverRef = (0, $6hDYZ$useRef)(undefined);
64
- let triggerRef = (0, $6hDYZ$useRef)(undefined);
63
+ let popoverRef = (0, $6hDYZ$useRef)(null);
64
+ let triggerRef = (0, $6hDYZ$useRef)(null);
65
65
  let unwrappedTriggerRef = (0, $6hDYZ$useUnwrapDOMRef)(triggerRef);
66
- let listboxRef = (0, $6hDYZ$useRef)(undefined);
66
+ let listboxRef = (0, $6hDYZ$useRef)(null);
67
67
  let isLoadingInitial = props.isLoading && state.collection.size === 0;
68
68
  let isLoadingMore = props.isLoading && state.collection.size > 0;
69
69
  let progressCircleId = (0, $6hDYZ$useId)();
@@ -99,7 +99,7 @@ function $51664a9007a3c6f9$var$Picker(props, ref) {
99
99
  onLoadMore: props.onLoadMore
100
100
  });
101
101
  // Measure the width of the button to inform the width of the menu (below).
102
- let [buttonWidth, setButtonWidth] = (0, $6hDYZ$useState)(null);
102
+ let [buttonWidth, setButtonWidth] = (0, $6hDYZ$useState)(undefined);
103
103
  let { scale: scale } = (0, $6hDYZ$useProvider)();
104
104
  let onResize = (0, $6hDYZ$useCallback)(()=>{
105
105
  if (!isMobile && unwrappedTriggerRef.current) {
@@ -128,7 +128,7 @@ function $51664a9007a3c6f9$var$Picker(props, ref) {
128
128
  // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.
129
129
  // Always have a minimum width of the button width. When quiet, there is an extra offset to add.
130
130
  // Not using style props for this because they don't support `calc`.
131
- let width = isQuiet ? null : buttonWidth;
131
+ let width = isQuiet ? undefined : buttonWidth;
132
132
  let style = {
133
133
  width: menuWidth ? (0, $6hDYZ$dimensionValue)(menuWidth) : width,
134
134
  minWidth: isQuiet ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : buttonWidth
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\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>>(undefined);\n let triggerRef = useRef<FocusableRefValue<HTMLElement>>(undefined);\n let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);\n let listboxRef = useRef(undefined);\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(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.module.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\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>>(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}\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.module.js.map"}
package/dist/dropdown_vars_css.main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAtBA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAAsC,CAAC,wBAAwB,CAAC;AAChE,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAiE,CAAC,mDAAmD,CAAC;AACtH,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAAkD,CAAC,oCAAoC,CAAC;AACxF,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAuC,CAAC,0BAA0B,EAAE,0CAA0C,CAAC;AAC/G,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAkC,CAAC,oBAAoB,CAAC","sources":["packages/@adobe/spectrum-css-temp/components/dropdown/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"dropdown_vars_css.main.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAtBA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAAsC,CAAC,wBAAwB,CAAC;AAChE,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAiE,CAAC,mDAAmD,CAAC;AACtH,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAAkD,CAAC,oCAAoC,CAAC;AACxF,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAuC,CAAC,0BAA0B,EAAE,2CAA2C;AAC/G,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAkC,CAAC,oBAAoB,CAAC","sources":["packages/@adobe/spectrum-css-temp/components/dropdown/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"dropdown_vars_css.main.js.map"}
package/dist/dropdown_vars_css.module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAtBA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAAsC,CAAC,wBAAwB,CAAC;AAChE,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAiE,CAAC,mDAAmD,CAAC;AACtH,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAAkD,CAAC,oCAAoC,CAAC;AACxF,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAuC,CAAC,0BAA0B,EAAE,0CAA0C,CAAC;AAC/G,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAkC,CAAC,oBAAoB,CAAC","sources":["packages/@adobe/spectrum-css-temp/components/dropdown/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"dropdown_vars_css.module.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAtBA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAAsC,CAAC,wBAAwB,CAAC;AAChE,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAiE,CAAC,mDAAmD,CAAC;AACtH,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAAkD,CAAC,oCAAoC,CAAC;AACxF,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAuC,CAAC,0BAA0B,EAAE,2CAA2C;AAC/G,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAkC,CAAC,oBAAoB,CAAC","sources":["packages/@adobe/spectrum-css-temp/components/dropdown/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"dropdown_vars_css.module.js.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/picker",
3
- "version": "3.15.3",
3
+ "version": "3.15.4",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -36,23 +36,23 @@
36
36
  "url": "https://github.com/adobe/react-spectrum"
37
37
  },
38
38
  "dependencies": {
39
- "@react-aria/i18n": "^3.12.3",
40
- "@react-aria/interactions": "^3.22.4",
41
- "@react-aria/select": "^3.14.11",
42
- "@react-aria/utils": "^3.25.3",
43
- "@react-spectrum/button": "^3.16.8",
44
- "@react-spectrum/form": "^3.7.9",
45
- "@react-spectrum/label": "^3.16.9",
46
- "@react-spectrum/listbox": "^3.13.3",
47
- "@react-spectrum/overlays": "^5.6.5",
48
- "@react-spectrum/progress": "^3.7.10",
49
- "@react-spectrum/text": "^3.5.9",
50
- "@react-spectrum/utils": "^3.11.11",
51
- "@react-stately/collections": "^3.11.0",
52
- "@react-stately/select": "^3.6.8",
53
- "@react-types/select": "^3.9.7",
54
- "@react-types/shared": "^3.25.0",
55
- "@spectrum-icons/ui": "^3.6.10",
39
+ "@react-aria/i18n": "^3.12.4",
40
+ "@react-aria/interactions": "^3.22.5",
41
+ "@react-aria/select": "^3.15.0",
42
+ "@react-aria/utils": "^3.26.0",
43
+ "@react-spectrum/button": "^3.16.9",
44
+ "@react-spectrum/form": "^3.7.10",
45
+ "@react-spectrum/label": "^3.16.10",
46
+ "@react-spectrum/listbox": "^3.14.0",
47
+ "@react-spectrum/overlays": "^5.7.0",
48
+ "@react-spectrum/progress": "^3.7.11",
49
+ "@react-spectrum/text": "^3.5.10",
50
+ "@react-spectrum/utils": "^3.12.0",
51
+ "@react-stately/collections": "^3.12.0",
52
+ "@react-stately/select": "^3.6.9",
53
+ "@react-types/select": "^3.9.8",
54
+ "@react-types/shared": "^3.26.0",
55
+ "@spectrum-icons/ui": "^3.6.11",
56
56
  "@swc/helpers": "^0.5.0"
57
57
  },
58
58
  "devDependencies": {
@@ -60,11 +60,11 @@
60
60
  },
61
61
  "peerDependencies": {
62
62
  "@react-spectrum/provider": "^3.1.4",
63
- "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
64
- "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
63
+ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
64
+ "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
65
65
  },
66
66
  "publishConfig": {
67
67
  "access": "public"
68
68
  },
69
- "gitHead": "8e0a28d188cdbdbd2b32296fa034b1b02ddde229"
69
+ "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
70
70
  }
package/src/Picker.tsx CHANGED
@@ -64,10 +64,10 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
64
64
  let state = useSelectState(props);
65
65
  let domRef = useDOMRef(ref);
66
66
 
67
- let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);
68
- let triggerRef = useRef<FocusableRefValue<HTMLElement>>(undefined);
67
+ let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);
68
+ let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);
69
69
  let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);
70
- let listboxRef = useRef(undefined);
70
+ let listboxRef = useRef(null);
71
71
 
72
72
  let isLoadingInitial = props.isLoading && state.collection.size === 0;
73
73
  let isLoadingMore = props.isLoading && state.collection.size > 0;
@@ -105,7 +105,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
105
105
  );
106
106
 
107
107
  // Measure the width of the button to inform the width of the menu (below).
108
- let [buttonWidth, setButtonWidth] = useState(null);
108
+ let [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined);
109
109
  let {scale} = useProvider();
110
110
 
111
111
  let onResize = useCallback(() => {
@@ -133,7 +133,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
133
133
  // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.
134
134
  // Always have a minimum width of the button width. When quiet, there is an extra offset to add.
135
135
  // Not using style props for this because they don't support `calc`.
136
- let width = isQuiet ? null : buttonWidth;
136
+ let width = isQuiet ? undefined : buttonWidth;
137
137
  let style = {
138
138
  width: menuWidth ? dimensionValue(menuWidth) : width,
139
139
  minWidth: isQuiet ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : buttonWidth