@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/Picker.css.map

@@ -1 +1 @@
-{"mappings":"ACgLoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqBI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcF;;;;EAWD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EASA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyGrB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmEgB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWK;;;;EAAA;;;;EAAA;;;;EAsLT;IAAA;;;;;EA6DkB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAziBlB;EAAA;;;;EAuDF;;;;EAiLV;;;;;AAxOY;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA0CG;;;;;;AA1CH;EAAA;IAAA;;;;IAiHL;;;;;;AAjHK;EAAA;IAAA","sources":["552e27cf637b06d3","packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["@import \"3ea1b03e909704b0\";\n@import \"ee9bbd6fcdd43977\";\n@import \"6c757f8583900bce\";\n@import \"5664d1276ba33182\";\n@import \"4581fd7ca88158d4\";\n@import \"6f2c83ecc9c1c922\";\n@import \"5f2bbc1985161dbd\";\n@import \"19b2c692b4947046\";\n@import \"4d3d8008ddb5ca39\";\n@import \"6c5e73b19354c1ee\";\n@import \"eae58a365603e38b\";\n@import \"8aeb4bd053a60a3a\";\n@import \"296761196dee6293\";\n@import \"58903387d5789cd7\";\n@import \"b97622c285951455\";\n","/*\n * Copyright 2024 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 {\n  ListBoxSection as AriaListBoxSection,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxLoadMoreItem,\n  ListBoxProps,\n  ListBoxSectionProps\n} from 'react-aria-components/ListBox';\nimport {PopoverProps as AriaPopoverProps} from 'react-aria-components/Popover';\nimport {\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  SelectRenderProps as AriaSelectRenderProps,\n  SelectStateContext,\n  SelectValue\n} from 'react-aria-components/Select';\nimport {\n  AsyncLoadable,\n  FocusableRef,\n  FocusableRefValue,\n  GlobalDOMAttributes,\n  HelpTextProps,\n  LoadingState,\n  PressEvent,\n  RefObject,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles as checkboxIconStyles} from './Checkbox';\nimport {Button, ButtonRenderProps} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {\n  checkbox,\n  checkmark,\n  description,\n  icon,\n  iconCenterWrapper,\n  label,\n  sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection} from 'react-aria/Collection';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {\n  control,\n  controlBorderRadius,\n  controlFont,\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createHideableComponent} from 'react-aria/private/collections/Hidden';\nimport {createShadowTreeWalker} from 'react-aria/private/utils/shadowdom/ShadowTreeWalker';\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {Divider, listbox, listboxHeader, listboxItem, LOADER_ROW_HEIGHTS} from './ComboBox';\nimport {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};\nimport {FieldErrorIcon, FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {getOwnerDocument} from 'react-aria/private/utils/domHelpers';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport {isFocusable} from 'react-aria/private/utils/isFocusable';\nimport {ListLayout} from 'react-stately/useVirtualizerState';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\nimport {Popover} from './Popover';\n// @ts-ignore\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport React, {\n  createContext,\n  forwardRef,\n  ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {useFocusableRef} from './useDOMRef';\nimport {useGlobalListeners} from 'react-aria/private/utils/useGlobalListeners';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useScale} from './utils';\nimport {useSlotId} from 'react-aria/private/utils/useId';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nimport {Virtualizer} from 'react-aria-components/Virtualizer';\n\nexport interface PickerStyleProps {\n  /**\n   * The size of the Picker.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /**\n   * Whether the picker should be displayed with a quiet style.\n   */\n  isQuiet?: boolean;\n}\n\ntype SelectionMode = 'single' | 'multiple';\nexport interface PickerProps<T, M extends SelectionMode = 'single'>\n  extends\n    Omit<\n      AriaSelectProps<T, M>,\n      | 'children'\n      | 'style'\n      | 'className'\n      | 'render'\n      | 'allowsEmptyCollection'\n      | keyof GlobalDOMAttributes\n    >,\n    PickerStyleProps,\n    StyleProps,\n    SpectrumLabelableProps,\n    HelpTextProps,\n    Pick<ListBoxProps<T>, 'items' | 'dependencies'>,\n    Pick<AriaPopoverProps, 'shouldFlip'>,\n    Pick<AsyncLoadable, 'onLoadMore'> {\n  /** The contents of the collection. */\n  children: ReactNode | ((item: T) => ReactNode);\n  /**\n   * Direction the menu will render relative to the Picker.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top';\n  /**\n   * Alignment of the menu relative to the input target.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end';\n  /**\n   * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the\n   * dropdown is always equal to the trigger's width.\n   */\n  menuWidth?: number;\n  /** The current loading state of the Picker. */\n  loadingState?: LoadingState;\n  /**\n   * Custom renderer for the picker value. Allows one to provide a custom element to render selected\n   * items.\n   *\n   * @note The returned ReactNode should not have interactable elements as it will break accessibility.\n   */\n  renderValue?: (selectedItems: T[]) => ReactNode;\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext =\n  createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n  ...focusRing(),\n  ...control({shape: 'default', icon: true}),\n  ...fieldInput(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    isQuiet: 'none'\n  },\n  position: 'relative',\n  textAlign: 'start',\n  borderStyle: {\n    default: 'none',\n    forcedColors: 'solid'\n  },\n  borderColor: {\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  },\n  transition: 'default',\n  paddingX: {\n    default: 'edge-to-text',\n    isQuiet: 0\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    isQuiet: 'transparent'\n  },\n  color: {\n    default: baseColor('neutral'),\n    isDisabled: 'disabled'\n  },\n  maxWidth: {\n    isQuiet: 'max'\n  },\n  disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n  width: 'full',\n  // Use pixels since we are emulating a border.\n  height: '[2px]',\n  position: 'absolute',\n  bottom: 0,\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'blue-800',\n    forcedColors: 'Highlight'\n  }\n});\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  width: 'full',\n  gridTemplateColumns: {\n    size: {\n      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n    }\n  },\n  boxSizing: 'border-box',\n  maxHeight: 'inherit',\n  overflow: 'auto',\n  padding: 8,\n  fontFamily: 'sans',\n  fontSize: controlFont(),\n  gridAutoRows: 'min-content'\n});\n\nconst invalidBorder = style({\n  ...controlBorderRadius(),\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  pointerEvents: 'none',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: baseColor('negative'),\n  transition: 'default'\n});\n\nconst valueStyles = style({\n  flexGrow: {\n    default: 1,\n    isQuiet: 0\n  },\n  truncate: true,\n  display: 'flex',\n  alignItems: 'center',\n  height: '100%'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  color: {\n    isLoading: 'disabled'\n  }\n});\n\nconst avatar = style({\n  gridArea: 'icon',\n  marginEnd: 'text-to-visual'\n});\n\nconst loadingWrapperStyles = style({\n  gridColumnStart: '1',\n  gridColumnEnd: '-1',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginY: 8\n});\n\nconst progressCircleStyles = style({\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 22,\n      XL: 26\n    }\n  }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is\n * limited.\n */\nexport const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<\n  T,\n  M extends SelectionMode = 'single'\n>(props: PickerProps<T, M>, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n  let domRef = useFocusableRef(ref);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    menuWidth,\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    children,\n    items,\n    size = 'M',\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    placeholder = stringFormatter.format('picker.placeholder'),\n    isQuiet,\n    loadingState,\n    renderValue,\n    onLoadMore,\n    ...pickerProps\n  } = props;\n\n  // Better way to encode this into a style? need to account for flipping\n  let menuOffset: number;\n  if (size === 'S') {\n    menuOffset = 6;\n  } else if (size === 'M') {\n    menuOffset = 6;\n  } else if (size === 'L') {\n    menuOffset = 7;\n  } else {\n    menuOffset = 8;\n  }\n\n  let renderer;\n  let showButtonSpinner = useMemo(() => loadingState === 'loading', [loadingState]);\n  let spinnerId = useSlotId([showButtonSpinner]);\n\n  let listBoxLoadingCircle = (\n    <ListBoxLoadMoreItem\n      className={loadingWrapperStyles}\n      isLoading={loadingState === 'loadingMore'}\n      onLoadMore={onLoadMore}>\n      <PickerProgressCircle size={size} aria-label={stringFormatter.format('table.loadingMore')} />\n    </ListBoxLoadMoreItem>\n  );\n\n  if (typeof children === 'function' && items) {\n    renderer = (\n      <>\n        <Collection items={items} dependencies={props.dependencies}>\n          {children}\n        </Collection>\n        {listBoxLoadingCircle}\n      </>\n    );\n  } else {\n    renderer = (\n      <>\n        {children}\n        {listBoxLoadingCircle}\n      </>\n    );\n  }\n  let scale = useScale();\n  let {direction: dir} = useLocale();\n  let RTLFlipOffset = dir === 'rtl' ? -1 : 1;\n\n  return (\n    <AriaSelect\n      {...pickerProps}\n      aria-describedby={spinnerId}\n      placeholder={placeholder}\n      style={UNSAFE_style}\n      className={\n        UNSAFE_className +\n        style(field(), getAllowedOverrides())(\n          {\n            isInForm: !!formContext,\n            labelPosition,\n            size\n          },\n          props.styles\n        )\n      }>\n      {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n        <>\n          <InternalPickerContext.Provider value={{size}}>\n            <FieldLabel\n              includeNecessityIndicatorInAccessibilityName\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              isQuiet={isQuiet}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <PickerButton\n              loadingState={loadingState}\n              renderValue={renderValue}\n              isOpen={isOpen}\n              isQuiet={isQuiet}\n              isFocusVisible={isFocusVisible}\n              size={size}\n              isInvalid={isInvalid}\n              isDisabled={isDisabled}\n              buttonRef={domRef}\n              loadingCircle={\n                <PickerProgressCircle\n                  id={spinnerId}\n                  size={size}\n                  aria-label={stringFormatter.format('table.loading')}\n                />\n              }\n            />\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <Virtualizer\n              layout={ListLayout}\n              layoutOptions={{\n                estimatedRowHeight: 32,\n                estimatedHeadingHeight: 50,\n                padding: 8,\n                loaderHeight: LOADER_ROW_HEIGHTS[size][scale]\n              }}>\n              <Popover\n                hideArrow\n                padding=\"none\"\n                offset={menuOffset}\n                crossOffset={isQuiet ? RTLFlipOffset * -12 : undefined}\n                placement={`${direction} ${align}` as Placement}\n                shouldFlip={shouldFlip}\n                UNSAFE_style={{\n                  width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n                }}\n                styles={style({\n                  minWidth: {\n                    default: '--trigger-width',\n                    isQuiet: 192\n                  },\n                  width: {\n                    default: '--trigger-width',\n                    isQuiet: '[calc(var(--trigger-width) - 24)]'\n                  }\n                })(props)}>\n                <div\n                  className={style({\n                    display: 'flex',\n                    size: 'full'\n                  })}>\n                  <Provider\n                    values={[\n                      [HeaderContext, {styles: listboxHeader({size})}],\n                      [\n                        HeadingContext,\n                        {\n                          // @ts-ignore\n                          role: 'presentation',\n                          styles: sectionHeading\n                        }\n                      ],\n                      [\n                        TextContext,\n                        {\n                          slots: {\n                            description: {\n                              styles: description({size, isFocused: false, isDisabled: false})\n                            }\n                          }\n                        }\n                      ]\n                    ]}>\n                    <ListBox\n                      dependencies={props.dependencies}\n                      items={items}\n                      className={listbox({size})}>\n                      {renderer}\n                    </ListBox>\n                  </Provider>\n                </div>\n              </Popover>\n            </Virtualizer>\n          </InternalPickerContext.Provider>\n        </>\n      )}\n    </AriaSelect>\n  );\n});\n\nfunction PickerProgressCircle(props) {\n  let {id, size, 'aria-label': ariaLabel} = props;\n  return (\n    <ProgressCircle\n      id={id}\n      isIndeterminate\n      size=\"S\"\n      aria-label={ariaLabel}\n      styles={progressCircleStyles({size})}\n    />\n  );\n}\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 22,\n  XL: 26\n} as const;\n\n// https://w3c.github.io/aria/#widget_roles\nlet INTERACTIVE_ARIA_ROLES = new Set([\n  'application',\n  'button',\n  'checkbox',\n  'combobox',\n  'gridcell',\n  'link',\n  'menuitem',\n  'menuitemcheckbox',\n  'menuitemradio',\n  'option',\n  'radio',\n  'searchbox',\n  'separator',\n  'slider',\n  'spinbutton',\n  'switch',\n  'tab',\n  'textbox',\n  'treeitem'\n]);\n\ninterface PickerButtonInnerProps<T>\n  extends\n    PickerStyleProps,\n    Omit<AriaSelectRenderProps, 'isRequired' | 'isFocused'>,\n    Pick<PickerProps<T>, 'loadingState' | 'renderValue'> {\n  loadingCircle: ReactNode;\n  buttonRef: RefObject<HTMLButtonElement | null>;\n}\n\n// Needs to be hidable component or otherwise the PressResponder throws a warning when rendered in the fake DOM and tries to register\nconst PickerButton = createHideableComponent(function PickerButton<T>(\n  props: PickerButtonInnerProps<T>\n) {\n  let {\n    isOpen,\n    isQuiet,\n    isFocusVisible,\n    size,\n    isInvalid,\n    isDisabled,\n    loadingState,\n    loadingCircle,\n    buttonRef,\n    renderValue\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let renderValueRef = useRef(null);\n\n  let state = useContext(SelectStateContext)!;\n  useEffect(() => {\n    if (process.env.NODE_ENV === 'production' || !renderValue) {\n      return;\n    }\n\n    if (!renderValueRef.current) {\n      return;\n    }\n\n    let doc = getOwnerDocument(renderValueRef.current);\n    let walker = createShadowTreeWalker(doc, renderValueRef.current, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        let role = node.getAttribute('role');\n        let interactive = isFocusable(node) || (role != null && INTERACTIVE_ARIA_ROLES.has(role));\n        return interactive ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n      }\n    });\n    let next = walker.nextNode();\n    if (next) {\n      console.warn(\"Picker's value should not have interactive children for accessibility.\");\n    }\n  }, [state.selectedItems, renderValue]);\n\n  // For mouse interactions, pickers open on press start. When the popover underlay appears\n  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n  // to occur. We override this by listening for pointerup on the document ourselves.\n  let [isPressed, setPressed] = useState(false);\n  let {addGlobalListener} = useGlobalListeners();\n  let onPressStart = (e: PressEvent) => {\n    if (e.pointerType !== 'mouse') {\n      return;\n    }\n    setPressed(true);\n    addGlobalListener(\n      document,\n      'pointerup',\n      () => {\n        setPressed(false);\n      },\n      {once: true, capture: true}\n    );\n  };\n\n  return (\n    <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n      <Button\n        ref={buttonRef}\n        style={renderProps => pressScale(buttonRef)(renderProps)}\n        // Prevent press scale from sticking while Picker is open.\n        // @ts-ignore\n        isPressed={false}\n        className={renderProps =>\n          inputButton({\n            ...renderProps,\n            size: size,\n            isOpen,\n            isQuiet\n          })\n        }>\n        {renderProps => (\n          <>\n            <SelectValue\n              className={\n                valueStyles({isQuiet}) +\n                (renderValue\n                  ? ''\n                  : ' ' +\n                    css(\n                      '&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}'\n                    ))\n              }>\n              {({selectedItems, defaultChildren}) => {\n                const selectedValues = selectedItems.filter((item): item is T => item != null);\n                const defaultRenderedValue =\n                  selectedItems.length <= 1 ? (\n                    defaultChildren\n                  ) : (\n                    <Text slot=\"label\">\n                      {stringFormatter.format('picker.selectedCount', {\n                        count: selectedItems.length\n                      })}\n                    </Text>\n                  );\n                const renderedValue =\n                  selectedItems.length > 0 && renderValue\n                    ? renderValue(selectedValues)\n                    : defaultRenderedValue;\n\n                return (\n                  <Provider\n                    values={[\n                      [\n                        IconContext,\n                        {\n                          slots: {\n                            icon: {\n                              render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n                              styles: icon\n                            }\n                          }\n                        }\n                      ],\n                      [\n                        AvatarContext,\n                        {\n                          slots: {\n                            avatar: {\n                              size: avatarSize[size ?? 'M'],\n                              styles: avatar\n                            }\n                          }\n                        }\n                      ],\n                      [\n                        TextContext,\n                        {\n                          slots: {\n                            description: {},\n                            [DEFAULT_SLOT]: {\n                              styles: style({\n                                display: 'block',\n                                flexGrow: 1,\n                                truncate: true\n                              }),\n                              // @ts-ignore\n                              'data-slot': 'label'\n                            },\n                            label: {\n                              styles: style({\n                                display: 'block',\n                                flexGrow: 1,\n                                truncate: true\n                              }),\n                              // @ts-ignore not technically necessary, but good for consistency\n                              'data-slot': 'label'\n                            }\n                          }\n                        }\n                      ],\n                      [InsideSelectValueContext, true]\n                    ]}>\n                    {renderValue ? (\n                      <div ref={renderValueRef} style={{display: 'contents'}}>\n                        {renderedValue}\n                      </div>\n                    ) : (\n                      renderedValue\n                    )}\n                  </Provider>\n                );\n              }}\n            </SelectValue>\n            {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n            {loadingState === 'loading' && !isOpen && loadingCircle}\n            <ChevronIcon\n              size={size}\n              className={iconStyles({isLoading: loadingState === 'loading'})}\n            />\n            {isFocusVisible && isQuiet && <span className={quietFocusLine} />}\n            {isInvalid && !isDisabled && !isQuiet && (\n              // @ts-ignore known limitation detecting functions from the theme\n              <div className={invalidBorder({...renderProps, size})} />\n            )}\n          </>\n        )}\n      </Button>\n    </PressResponder>\n  );\n});\n\nexport interface PickerItemProps\n  extends\n    Omit<\n      ListBoxItemProps,\n      'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes\n    >,\n    StyleProps {\n  children: ReactNode;\n}\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalPickerContext);\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      textValue={\n        props.textValue ||\n        (typeof props.children === 'string' ? (props.children as string) : undefined)\n      }\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') + listboxItem({...renderProps, size, isLink}, props.styles)\n      }>\n      {renderProps => {\n        let {children} = props;\n        let checkboxRenderProps = {\n          ...renderProps,\n          size,\n          isFocused: false,\n          isFocusVisible: false,\n          isIndeterminate: false,\n          isReadOnly: false,\n          isInvalid: false,\n          isRequired: false\n        };\n        return (\n          <DefaultProvider\n            context={IconContext}\n            value={{\n              slots: {\n                icon: {\n                  render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n                  styles: icon\n                }\n              }\n            }}>\n            <DefaultProvider\n              context={AvatarContext}\n              value={{\n                slots: {\n                  avatar: {size: avatarSize[size], styles: avatar}\n                }\n              }}>\n              <DefaultProvider\n                context={TextContext}\n                value={{\n                  slots: {\n                    [DEFAULT_SLOT]: {styles: label({size})},\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})}\n                  }\n                }}>\n                {renderProps.selectionMode === 'single' && !isLink && (\n                  <CheckmarkIcon\n                    size={checkmarkIconSize[size]}\n                    className={checkmark({...renderProps, size})}\n                  />\n                )}\n                {renderProps.selectionMode === 'multiple' && !isLink && (\n                  <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n                    <CheckmarkIcon size={size} className={checkboxIconStyles} />\n                  </div>\n                )}\n                {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n              </DefaultProvider>\n            </DefaultProvider>\n          </DefaultProvider>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({\n  context,\n  value,\n  children\n}: {\n  context: React.Context<any>;\n  value: any;\n  children: any;\n}) {\n  let inSelectValue = useContext(InsideSelectValueContext);\n  if (inSelectValue) {\n    return children;\n  }\n\n  return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T> extends Omit<\n  ListBoxSectionProps<T>,\n  'style' | 'className' | 'render' | keyof GlobalDOMAttributes\n> {}\nexport function PickerSection<T>(props: PickerSectionProps<T>): ReactNode {\n  let {size} = useContext(InternalPickerContext);\n  return (\n    <>\n      <AriaListBoxSection {...props}>{props.children}</AriaListBoxSection>\n      <Divider size={size} />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Picker.css.map"}
+{"mappings":"AC+KoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqBI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcF;;;;EAWD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EASA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyGrB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmEgB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWK;;;;EAAA;;;;EAAA;;;;EAsLT;IAAA;;;;;EA6DkB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAziBlB;EAAA;;;;EAuDF;;;;EAiLV;;;;;AAxOY;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA0CG;;;;;;AA1CH;EAAA;IAAA;;;;IAiHL;;;;;;AAjHK;EAAA;IAAA","sources":["552e27cf637b06d3","packages/@react-spectrum/s2/src/Picker.tsx"],"sourcesContent":["@import \"3ea1b03e909704b0\";\n@import \"ee9bbd6fcdd43977\";\n@import \"6c757f8583900bce\";\n@import \"5664d1276ba33182\";\n@import \"4581fd7ca88158d4\";\n@import \"6f2c83ecc9c1c922\";\n@import \"5f2bbc1985161dbd\";\n@import \"19b2c692b4947046\";\n@import \"4d3d8008ddb5ca39\";\n@import \"6c5e73b19354c1ee\";\n@import \"eae58a365603e38b\";\n@import \"8aeb4bd053a60a3a\";\n@import \"296761196dee6293\";\n@import \"58903387d5789cd7\";\n@import \"b97622c285951455\";\n","/*\n * Copyright 2024 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 {\n  ListBoxSection as AriaListBoxSection,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxLoadMoreItem,\n  ListBoxProps,\n  ListBoxSectionProps\n} from 'react-aria-components/ListBox';\nimport {PopoverProps as AriaPopoverProps} from 'react-aria-components/Popover';\nimport {\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  SelectRenderProps as AriaSelectRenderProps,\n  SelectStateContext,\n  SelectValue\n} from 'react-aria-components/Select';\nimport {\n  AsyncLoadable,\n  FocusableRef,\n  FocusableRefValue,\n  GlobalDOMAttributes,\n  HelpTextProps,\n  LoadingState,\n  PressEvent,\n  RefObject,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles as checkboxIconStyles} from './Checkbox';\nimport {Button, ButtonRenderProps} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {\n  checkbox,\n  checkmark,\n  description,\n  icon,\n  iconCenterWrapper,\n  label,\n  sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection} from 'react-aria/Collection';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {\n  control,\n  controlBorderRadius,\n  controlFont,\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createHideableComponent} from 'react-aria/private/collections/Hidden';\nimport {createShadowTreeWalker} from 'react-aria/private/utils/shadowdom/ShadowTreeWalker';\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {Divider, listbox, listboxHeader, listboxItem, LOADER_ROW_HEIGHTS} from './ComboBox';\nimport {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};\nimport {FieldErrorIcon, FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {getOwnerDocument} from 'react-aria/private/utils/domHelpers';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport {isFocusable} from 'react-aria/private/utils/isFocusable';\nimport {ListLayout} from 'react-stately/useVirtualizerState';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\nimport {Popover} from './Popover';\nimport {PressResponder} from 'react-aria/private/interactions/PressResponder';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport React, {\n  createContext,\n  forwardRef,\n  ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {useFocusableRef} from './useDOMRef';\nimport {useGlobalListeners} from 'react-aria/private/utils/useGlobalListeners';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useScale} from './utils';\nimport {useSlotId} from 'react-aria/private/utils/useId';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nimport {Virtualizer} from 'react-aria-components/Virtualizer';\n\nexport interface PickerStyleProps {\n  /**\n   * The size of the Picker.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /**\n   * Whether the picker should be displayed with a quiet style.\n   */\n  isQuiet?: boolean;\n}\n\ntype SelectionMode = 'single' | 'multiple';\nexport interface PickerProps<T, M extends SelectionMode = 'single'>\n  extends\n    Omit<\n      AriaSelectProps<T, M>,\n      | 'children'\n      | 'style'\n      | 'className'\n      | 'render'\n      | 'allowsEmptyCollection'\n      | keyof GlobalDOMAttributes\n    >,\n    PickerStyleProps,\n    StyleProps,\n    SpectrumLabelableProps,\n    HelpTextProps,\n    Pick<ListBoxProps<T>, 'items' | 'dependencies'>,\n    Pick<AriaPopoverProps, 'shouldFlip'>,\n    Pick<AsyncLoadable, 'onLoadMore'> {\n  /** The contents of the collection. */\n  children: ReactNode | ((item: T) => ReactNode);\n  /**\n   * Direction the menu will render relative to the Picker.\n   *\n   * @default 'bottom'\n   */\n  direction?: 'bottom' | 'top';\n  /**\n   * Alignment of the menu relative to the input target.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end';\n  /**\n   * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the\n   * dropdown is always equal to the trigger's width.\n   */\n  menuWidth?: number;\n  /** The current loading state of the Picker. */\n  loadingState?: LoadingState;\n  /**\n   * Custom renderer for the picker value. Allows one to provide a custom element to render selected\n   * items.\n   *\n   * @note The returned ReactNode should not have interactable elements as it will break accessibility.\n   */\n  renderValue?: (selectedItems: T[]) => ReactNode;\n}\n\ninterface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}\n\nexport const PickerContext =\n  createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\nconst inputButton = style<PickerButtonProps | AriaSelectRenderProps>({\n  ...focusRing(),\n  ...control({shape: 'default', icon: true}),\n  ...fieldInput(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    isQuiet: 'none'\n  },\n  position: 'relative',\n  textAlign: 'start',\n  borderStyle: {\n    default: 'none',\n    forcedColors: 'solid'\n  },\n  borderColor: {\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  },\n  transition: 'default',\n  paddingX: {\n    default: 'edge-to-text',\n    isQuiet: 0\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    isQuiet: 'transparent'\n  },\n  color: {\n    default: baseColor('neutral'),\n    isDisabled: 'disabled'\n  },\n  maxWidth: {\n    isQuiet: 'max'\n  },\n  disableTapHighlight: true\n});\n\nconst quietFocusLine = style({\n  width: 'full',\n  // Use pixels since we are emulating a border.\n  height: '[2px]',\n  position: 'absolute',\n  bottom: 0,\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'blue-800',\n    forcedColors: 'Highlight'\n  }\n});\n\nexport let menu = style({\n  outlineStyle: 'none',\n  display: 'grid',\n  width: 'full',\n  gridTemplateColumns: {\n    size: {\n      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],\n      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],\n      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]\n    }\n  },\n  boxSizing: 'border-box',\n  maxHeight: 'inherit',\n  overflow: 'auto',\n  padding: 8,\n  fontFamily: 'sans',\n  fontSize: controlFont(),\n  gridAutoRows: 'min-content'\n});\n\nconst invalidBorder = style({\n  ...controlBorderRadius(),\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  pointerEvents: 'none',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: baseColor('negative'),\n  transition: 'default'\n});\n\nconst valueStyles = style({\n  flexGrow: {\n    default: 1,\n    isQuiet: 0\n  },\n  truncate: true,\n  display: 'flex',\n  alignItems: 'center',\n  height: '100%'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  color: {\n    isLoading: 'disabled'\n  }\n});\n\nconst avatar = style({\n  gridArea: 'icon',\n  marginEnd: 'text-to-visual'\n});\n\nconst loadingWrapperStyles = style({\n  gridColumnStart: '1',\n  gridColumnEnd: '-1',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginY: 8\n});\n\nconst progressCircleStyles = style({\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 22,\n      XL: 26\n    }\n  }\n});\n\nlet InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\nlet InsideSelectValueContext = createContext(false);\n\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is\n * limited.\n */\nexport const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<\n  T,\n  M extends SelectionMode = 'single'\n>(props: PickerProps<T, M>, ref: FocusableRef<HTMLButtonElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n  let domRef = useFocusableRef(ref);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    menuWidth,\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    children,\n    items,\n    size = 'M',\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    placeholder = stringFormatter.format('picker.placeholder'),\n    isQuiet,\n    loadingState,\n    renderValue,\n    onLoadMore,\n    ...pickerProps\n  } = props;\n\n  // Better way to encode this into a style? need to account for flipping\n  let menuOffset: number;\n  if (size === 'S') {\n    menuOffset = 6;\n  } else if (size === 'M') {\n    menuOffset = 6;\n  } else if (size === 'L') {\n    menuOffset = 7;\n  } else {\n    menuOffset = 8;\n  }\n\n  let renderer;\n  let showButtonSpinner = useMemo(() => loadingState === 'loading', [loadingState]);\n  let spinnerId = useSlotId([showButtonSpinner]);\n\n  let listBoxLoadingCircle = (\n    <ListBoxLoadMoreItem\n      className={loadingWrapperStyles}\n      isLoading={loadingState === 'loadingMore'}\n      onLoadMore={onLoadMore}>\n      <PickerProgressCircle size={size} aria-label={stringFormatter.format('table.loadingMore')} />\n    </ListBoxLoadMoreItem>\n  );\n\n  if (typeof children === 'function' && items) {\n    renderer = (\n      <>\n        <Collection items={items} dependencies={props.dependencies}>\n          {children}\n        </Collection>\n        {listBoxLoadingCircle}\n      </>\n    );\n  } else {\n    renderer = (\n      <>\n        {children}\n        {listBoxLoadingCircle}\n      </>\n    );\n  }\n  let scale = useScale();\n  let {direction: dir} = useLocale();\n  let RTLFlipOffset = dir === 'rtl' ? -1 : 1;\n\n  return (\n    <AriaSelect\n      {...pickerProps}\n      aria-describedby={spinnerId}\n      placeholder={placeholder}\n      style={UNSAFE_style}\n      className={\n        UNSAFE_className +\n        style(field(), getAllowedOverrides())(\n          {\n            isInForm: !!formContext,\n            labelPosition,\n            size\n          },\n          props.styles\n        )\n      }>\n      {({isDisabled, isOpen, isFocusVisible, isInvalid, isRequired}) => (\n        <>\n          <InternalPickerContext.Provider value={{size}}>\n            <FieldLabel\n              includeNecessityIndicatorInAccessibilityName\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              isQuiet={isQuiet}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={props.contextualHelp}>\n              {label}\n            </FieldLabel>\n            <PickerButton\n              loadingState={loadingState}\n              renderValue={renderValue}\n              isOpen={isOpen}\n              isQuiet={isQuiet}\n              isFocusVisible={isFocusVisible}\n              size={size}\n              isInvalid={isInvalid}\n              isDisabled={isDisabled}\n              buttonRef={domRef}\n              loadingCircle={\n                <PickerProgressCircle\n                  id={spinnerId}\n                  size={size}\n                  aria-label={stringFormatter.format('table.loading')}\n                />\n              }\n            />\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n            <Virtualizer\n              layout={ListLayout}\n              layoutOptions={{\n                estimatedRowHeight: 32,\n                estimatedHeadingHeight: 50,\n                padding: 8,\n                loaderHeight: LOADER_ROW_HEIGHTS[size][scale]\n              }}>\n              <Popover\n                hideArrow\n                padding=\"none\"\n                offset={menuOffset}\n                crossOffset={isQuiet ? RTLFlipOffset * -12 : undefined}\n                placement={`${direction} ${align}` as Placement}\n                shouldFlip={shouldFlip}\n                UNSAFE_style={{\n                  width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined\n                }}\n                styles={style({\n                  minWidth: {\n                    default: '--trigger-width',\n                    isQuiet: 192\n                  },\n                  width: {\n                    default: '--trigger-width',\n                    isQuiet: '[calc(var(--trigger-width) - 24)]'\n                  }\n                })(props)}>\n                <div\n                  className={style({\n                    display: 'flex',\n                    size: 'full'\n                  })}>\n                  <Provider\n                    values={[\n                      [HeaderContext, {styles: listboxHeader({size})}],\n                      [\n                        HeadingContext,\n                        {\n                          // @ts-ignore\n                          role: 'presentation',\n                          styles: sectionHeading\n                        }\n                      ],\n                      [\n                        TextContext,\n                        {\n                          slots: {\n                            description: {\n                              styles: description({size, isFocused: false, isDisabled: false})\n                            }\n                          }\n                        }\n                      ]\n                    ]}>\n                    <ListBox\n                      dependencies={props.dependencies}\n                      items={items}\n                      className={listbox({size})}>\n                      {renderer}\n                    </ListBox>\n                  </Provider>\n                </div>\n              </Popover>\n            </Virtualizer>\n          </InternalPickerContext.Provider>\n        </>\n      )}\n    </AriaSelect>\n  );\n});\n\nfunction PickerProgressCircle(props) {\n  let {id, size, 'aria-label': ariaLabel} = props;\n  return (\n    <ProgressCircle\n      id={id}\n      isIndeterminate\n      size=\"S\"\n      aria-label={ariaLabel}\n      styles={progressCircleStyles({size})}\n    />\n  );\n}\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 22,\n  XL: 26\n} as const;\n\n// https://w3c.github.io/aria/#widget_roles\nlet INTERACTIVE_ARIA_ROLES = new Set([\n  'application',\n  'button',\n  'checkbox',\n  'combobox',\n  'gridcell',\n  'link',\n  'menuitem',\n  'menuitemcheckbox',\n  'menuitemradio',\n  'option',\n  'radio',\n  'searchbox',\n  'separator',\n  'slider',\n  'spinbutton',\n  'switch',\n  'tab',\n  'textbox',\n  'treeitem'\n]);\n\ninterface PickerButtonInnerProps<T>\n  extends\n    PickerStyleProps,\n    Omit<AriaSelectRenderProps, 'isRequired' | 'isFocused'>,\n    Pick<PickerProps<T>, 'loadingState' | 'renderValue'> {\n  loadingCircle: ReactNode;\n  buttonRef: RefObject<HTMLButtonElement | null>;\n}\n\n// Needs to be hidable component or otherwise the PressResponder throws a warning when rendered in the fake DOM and tries to register\nconst PickerButton = createHideableComponent(function PickerButton<T>(\n  props: PickerButtonInnerProps<T>\n) {\n  let {\n    isOpen,\n    isQuiet,\n    isFocusVisible,\n    size,\n    isInvalid,\n    isDisabled,\n    loadingState,\n    loadingCircle,\n    buttonRef,\n    renderValue\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let renderValueRef = useRef(null);\n\n  let state = useContext(SelectStateContext)!;\n  useEffect(() => {\n    if (process.env.NODE_ENV === 'production' || !renderValue) {\n      return;\n    }\n\n    if (!renderValueRef.current) {\n      return;\n    }\n\n    let doc = getOwnerDocument(renderValueRef.current);\n    let walker = createShadowTreeWalker(doc, renderValueRef.current, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        let role = node.getAttribute('role');\n        let interactive = isFocusable(node) || (role != null && INTERACTIVE_ARIA_ROLES.has(role));\n        return interactive ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n      }\n    });\n    let next = walker.nextNode();\n    if (next) {\n      console.warn(\"Picker's value should not have interactive children for accessibility.\");\n    }\n  }, [state.selectedItems, renderValue]);\n\n  // For mouse interactions, pickers open on press start. When the popover underlay appears\n  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling\n  // to occur. We override this by listening for pointerup on the document ourselves.\n  let [isPressed, setPressed] = useState(false);\n  let {addGlobalListener} = useGlobalListeners();\n  let onPressStart = (e: PressEvent) => {\n    if (e.pointerType !== 'mouse') {\n      return;\n    }\n    setPressed(true);\n    addGlobalListener(\n      document,\n      'pointerup',\n      () => {\n        setPressed(false);\n      },\n      {once: true, capture: true}\n    );\n  };\n\n  return (\n    <PressResponder onPressStart={onPressStart} isPressed={isPressed}>\n      <Button\n        ref={buttonRef}\n        style={renderProps => pressScale(buttonRef)(renderProps)}\n        // Prevent press scale from sticking while Picker is open.\n        // @ts-ignore\n        isPressed={false}\n        className={renderProps =>\n          inputButton({\n            ...renderProps,\n            size: size,\n            isOpen,\n            isQuiet\n          })\n        }>\n        {renderProps => (\n          <>\n            <SelectValue\n              className={\n                valueStyles({isQuiet}) +\n                (renderValue\n                  ? ''\n                  : ' ' +\n                    css(\n                      '&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}'\n                    ))\n              }>\n              {({selectedItems, defaultChildren}) => {\n                const selectedValues = selectedItems.filter((item): item is T => item != null);\n                const defaultRenderedValue =\n                  selectedItems.length <= 1 ? (\n                    defaultChildren\n                  ) : (\n                    <Text slot=\"label\">\n                      {stringFormatter.format('picker.selectedCount', {\n                        count: selectedItems.length\n                      })}\n                    </Text>\n                  );\n                const renderedValue =\n                  selectedItems.length > 0 && renderValue\n                    ? renderValue(selectedValues)\n                    : defaultRenderedValue;\n\n                return (\n                  <Provider\n                    values={[\n                      [\n                        IconContext,\n                        {\n                          slots: {\n                            icon: {\n                              render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n                              styles: icon\n                            }\n                          }\n                        }\n                      ],\n                      [\n                        AvatarContext,\n                        {\n                          slots: {\n                            avatar: {\n                              size: avatarSize[size ?? 'M'],\n                              styles: avatar\n                            }\n                          }\n                        }\n                      ],\n                      [\n                        TextContext,\n                        {\n                          slots: {\n                            description: {},\n                            [DEFAULT_SLOT]: {\n                              styles: style({\n                                display: 'block',\n                                flexGrow: 1,\n                                truncate: true\n                              }),\n                              // @ts-ignore\n                              'data-slot': 'label'\n                            },\n                            label: {\n                              styles: style({\n                                display: 'block',\n                                flexGrow: 1,\n                                truncate: true\n                              }),\n                              // @ts-ignore not technically necessary, but good for consistency\n                              'data-slot': 'label'\n                            }\n                          }\n                        }\n                      ],\n                      [InsideSelectValueContext, true]\n                    ]}>\n                    {renderValue ? (\n                      <div ref={renderValueRef} style={{display: 'contents'}}>\n                        {renderedValue}\n                      </div>\n                    ) : (\n                      renderedValue\n                    )}\n                  </Provider>\n                );\n              }}\n            </SelectValue>\n            {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n            {loadingState === 'loading' && !isOpen && loadingCircle}\n            <ChevronIcon\n              size={size}\n              className={iconStyles({isLoading: loadingState === 'loading'})}\n            />\n            {isFocusVisible && isQuiet && <span className={quietFocusLine} />}\n            {isInvalid && !isDisabled && !isQuiet && (\n              // @ts-ignore known limitation detecting functions from the theme\n              <div className={invalidBorder({...renderProps, size})} />\n            )}\n          </>\n        )}\n      </Button>\n    </PressResponder>\n  );\n});\n\nexport interface PickerItemProps\n  extends\n    Omit<\n      ListBoxItemProps,\n      'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes\n    >,\n    StyleProps {\n  children: ReactNode;\n}\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport function PickerItem(props: PickerItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalPickerContext);\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      textValue={\n        props.textValue ||\n        (typeof props.children === 'string' ? (props.children as string) : undefined)\n      }\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') + listboxItem({...renderProps, size, isLink}, props.styles)\n      }>\n      {renderProps => {\n        let {children} = props;\n        let checkboxRenderProps = {\n          ...renderProps,\n          size,\n          isFocused: false,\n          isFocusVisible: false,\n          isIndeterminate: false,\n          isReadOnly: false,\n          isInvalid: false,\n          isRequired: false\n        };\n        return (\n          <DefaultProvider\n            context={IconContext}\n            value={{\n              slots: {\n                icon: {\n                  render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n                  styles: icon\n                }\n              }\n            }}>\n            <DefaultProvider\n              context={AvatarContext}\n              value={{\n                slots: {\n                  avatar: {size: avatarSize[size], styles: avatar}\n                }\n              }}>\n              <DefaultProvider\n                context={TextContext}\n                value={{\n                  slots: {\n                    [DEFAULT_SLOT]: {styles: label({size})},\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})}\n                  }\n                }}>\n                {renderProps.selectionMode === 'single' && !isLink && (\n                  <CheckmarkIcon\n                    size={checkmarkIconSize[size]}\n                    className={checkmark({...renderProps, size})}\n                  />\n                )}\n                {renderProps.selectionMode === 'multiple' && !isLink && (\n                  <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>\n                    <CheckmarkIcon size={size} className={checkboxIconStyles} />\n                  </div>\n                )}\n                {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n              </DefaultProvider>\n            </DefaultProvider>\n          </DefaultProvider>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({\n  context,\n  value,\n  children\n}: {\n  context: React.Context<any>;\n  value: any;\n  children: any;\n}) {\n  let inSelectValue = useContext(InsideSelectValueContext);\n  if (inSelectValue) {\n    return children;\n  }\n\n  return <context.Provider value={value}>{children}</context.Provider>;\n}\n\nexport interface PickerSectionProps<T> extends Omit<\n  ListBoxSectionProps<T>,\n  'style' | 'className' | 'render' | keyof GlobalDOMAttributes\n> {}\nexport function PickerSection<T>(props: PickerSectionProps<T>): ReactNode {\n  let {size} = useContext(InternalPickerContext);\n  return (\n    <>\n      <AriaListBoxSection {...props}>{props.children}</AriaListBoxSection>\n      <Divider size={size} />\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Picker.css.map"}