@react-spectrum/picker 3.14.6-nightly.4649 → 3.14.6-nightly.4656

package/dist/Picker.main.js

@@ -76,7 +76,7 @@ function $902e54cfaa4270a9$var$Picker(props, ref) {
     // We create the listbox layout in Picker and pass it to ListBoxBase below
     // so that the layout information can be cached even while the listbox is not mounted.
     // We also use the layout as the keyboard delegate for type to select.
-    let layout = (0, $3qYcd$reactspectrumlistbox.useListBoxLayout)(state, isLoadingMore);
+    let layout = (0, $3qYcd$reactspectrumlistbox.useListBoxLayout)(state);
     let { labelProps: labelProps, triggerProps: triggerProps, valueProps: valueProps, menuProps: menuProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $3qYcd$reactariaselect.useSelect)({
         ...props,
         'aria-describedby': isLoadingInitial ? progressCircleId : undefined,
@@ -102,6 +102,7 @@ function $902e54cfaa4270a9$var$Picker(props, ref) {
             maxHeight: 'inherit'
         },
         isLoading: props.isLoading,
+        showLoadingSpinner: isLoadingMore,
         onLoadMore: props.onLoadMore
     });
     // Measure the width of the button to inform the width of the menu (below).

package/dist/Picker.main.js.map

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

package/dist/Picker.mjs

@@ -70,7 +70,7 @@ function $51664a9007a3c6f9$var$Picker(props, ref) {
     // We create the listbox layout in Picker and pass it to ListBoxBase below
     // so that the layout information can be cached even while the listbox is not mounted.
     // We also use the layout as the keyboard delegate for type to select.
-    let layout = (0, $6hDYZ$useListBoxLayout)(state, isLoadingMore);
+    let layout = (0, $6hDYZ$useListBoxLayout)(state);
     let { labelProps: labelProps, triggerProps: triggerProps, valueProps: valueProps, menuProps: menuProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $6hDYZ$useSelect)({
         ...props,
         'aria-describedby': isLoadingInitial ? progressCircleId : undefined,
@@ -96,6 +96,7 @@ function $51664a9007a3c6f9$var$Picker(props, ref) {
             maxHeight: 'inherit'
         },
         isLoading: props.isLoading,
+        showLoadingSpinner: isLoadingMore,
         onLoadMore: props.onLoadMore
     });
     // Measure the width of the button to inform the width of the menu (below).

package/dist/Picker.module.js

@@ -70,7 +70,7 @@ function $51664a9007a3c6f9$var$Picker(props, ref) {
     // We create the listbox layout in Picker and pass it to ListBoxBase below
     // so that the layout information can be cached even while the listbox is not mounted.
     // We also use the layout as the keyboard delegate for type to select.
-    let layout = (0, $6hDYZ$useListBoxLayout)(state, isLoadingMore);
+    let layout = (0, $6hDYZ$useListBoxLayout)(state);
     let { labelProps: labelProps, triggerProps: triggerProps, valueProps: valueProps, menuProps: menuProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = (0, $6hDYZ$useSelect)({
         ...props,
         'aria-describedby': isLoadingInitial ? progressCircleId : undefined,
@@ -96,6 +96,7 @@ function $51664a9007a3c6f9$var$Picker(props, ref) {
             maxHeight: 'inherit'
         },
         isLoading: props.isLoading,
+        showLoadingSpinner: isLoadingMore,
         onLoadMore: props.onLoadMore
     });
     // Measure the width of the button to inform the width of the menu (below).

package/dist/Picker.module.js.map

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

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;AA+PA;;GAEG;AAGH,OAAA,MAAM;UAAiF,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;ACrPhI,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"}
+{"mappings":";;;AAgQA;;GAEG;AAGH,OAAA,MAAM;UAAiF,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;ACtPhI,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

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/picker",
-  "version": "3.14.6-nightly.4649+02f242f41",
+  "version": "3.14.6-nightly.4656+0c17289de",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,27 +36,27 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/i18n": "3.0.0-nightly.2937+02f242f41",
-    "@react-aria/interactions": "3.0.0-nightly.2937+02f242f41",
-    "@react-aria/select": "3.14.6-nightly.4649+02f242f41",
-    "@react-aria/utils": "3.0.0-nightly.2937+02f242f41",
-    "@react-spectrum/button": "3.0.0-nightly.2937+02f242f41",
-    "@react-spectrum/form": "3.0.0-nightly.2937+02f242f41",
-    "@react-spectrum/label": "3.16.7-nightly.4649+02f242f41",
-    "@react-spectrum/listbox": "3.12.10-nightly.4649+02f242f41",
-    "@react-spectrum/overlays": "3.0.0-nightly.2937+02f242f41",
-    "@react-spectrum/progress": "3.0.0-nightly.2937+02f242f41",
-    "@react-spectrum/text": "3.5.6-nightly.4649+02f242f41",
-    "@react-spectrum/utils": "3.0.0-nightly.2937+02f242f41",
-    "@react-stately/collections": "3.0.0-nightly.2937+02f242f41",
-    "@react-stately/select": "3.6.5-nightly.4649+02f242f41",
-    "@react-types/select": "3.9.5-nightly.4649+02f242f41",
-    "@react-types/shared": "3.0.0-nightly.2937+02f242f41",
-    "@spectrum-icons/ui": "3.0.0-nightly.2937+02f242f41",
+    "@react-aria/i18n": "3.0.0-nightly.2944+0c17289de",
+    "@react-aria/interactions": "3.0.0-nightly.2944+0c17289de",
+    "@react-aria/select": "3.14.6-nightly.4656+0c17289de",
+    "@react-aria/utils": "3.0.0-nightly.2944+0c17289de",
+    "@react-spectrum/button": "3.0.0-nightly.2944+0c17289de",
+    "@react-spectrum/form": "3.0.0-nightly.2944+0c17289de",
+    "@react-spectrum/label": "3.16.7-nightly.4656+0c17289de",
+    "@react-spectrum/listbox": "3.12.10-nightly.4656+0c17289de",
+    "@react-spectrum/overlays": "3.0.0-nightly.2944+0c17289de",
+    "@react-spectrum/progress": "3.0.0-nightly.2944+0c17289de",
+    "@react-spectrum/text": "3.5.6-nightly.4656+0c17289de",
+    "@react-spectrum/utils": "3.0.0-nightly.2944+0c17289de",
+    "@react-stately/collections": "3.0.0-nightly.2944+0c17289de",
+    "@react-stately/select": "3.6.5-nightly.4656+0c17289de",
+    "@react-types/select": "3.9.5-nightly.4656+0c17289de",
+    "@react-types/shared": "3.0.0-nightly.2944+0c17289de",
+    "@spectrum-icons/ui": "3.0.0-nightly.2944+0c17289de",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.2937+02f242f41"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.2944+0c17289de"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.1.4",
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "02f242f41f0347b3f11e50b019c197127b7d0a08"
+  "gitHead": "0c17289de18041e6f8b99df26a5a3ca922cc5145"
 }

package/src/Picker.tsx

@@ -76,7 +76,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
   // We create the listbox layout in Picker and pass it to ListBoxBase below
   // so that the layout information can be cached even while the listbox is not mounted.
   // We also use the layout as the keyboard delegate for type to select.
-  let layout = useListBoxLayout(state, isLoadingMore);
+  let layout = useListBoxLayout(state);
   let {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSelect({
     ...props,
     'aria-describedby': (isLoadingInitial ? progressCircleId : undefined),
@@ -101,6 +101,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
       // Set max height: inherit so Tray scrolling works
       UNSAFE_style={{maxHeight: 'inherit'}}
       isLoading={props.isLoading}
+      showLoadingSpinner={isLoadingMore}
       onLoadMore={props.onLoadMore} />
   );