@react-spectrum/s2 0.11.1 → 0.12.0

package/dist/ComboBox.css.map

@@ -1 +1 @@
-{"mappings":"AC4GoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCD;;;;EAAA;;;;EAAA;;;;EASU;;;;EAAA;;;;EAAA;;;;EASA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcN;;;;EAAA;;;;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYI;;;;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;;;;EAoDE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqDe;;;;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;;;;EAyPlB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0DA;;;;EAAA;;;;;AApiBE;EA+FC;;;;EAYI;;;;EAAA;;;;EAAA;;;;EAsIW;;;;;AAjPhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA2GK;;;;IAiFJ;;;;;;AAjIQ;EAAA;IAAA;;;;;;AAcN;EAsBF;;;;EAYI;;;;;AAlCF;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAiaL;EAAA;IAAA","sources":["13beeca66baffd35","packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["@import \"434b6dc809c84a70\";\n@import \"9807be49da09aafb\";\n@import \"affe2b90434aec6a\";\n@import \"96ebc07fe89537d3\";\n@import \"85ea669da1afabc2\";\n@import \"8168af80eec66ed5\";\n@import \"14203b4128acdfd2\";\n@import \"82b080edec7141b0\";\n@import \"507e1180fa9ffff0\";\n@import \"12f905ef6005085b\";\n@import \"82c0b597a48d07ec\";\n@import \"37bf4c12c54c2fbe\";\n@import \"fb17d87a01335bc9\";\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  ComboBox as AriaComboBox,\n  ComboBoxProps as AriaComboBoxProps,\n  ListBoxSection as AriaListBoxSection,\n  PopoverProps as AriaPopoverProps,\n  Button,\n  ButtonRenderProps,\n  Collection,\n  ComboBoxStateContext,\n  ContextValue,\n  InputContext,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxLoadMoreItem,\n  ListBoxProps,\n  ListLayout,\n  ListStateContext,\n  Provider,\n  SectionProps,\n  Virtualizer\n} from 'react-aria-components';\nimport {AsyncLoadable, GlobalDOMAttributes, HelpTextProps, LoadingState, SpectrumLabelableProps} from '@react-types/shared';\nimport {BaseCollection, CollectionNode, createLeafComponent} from '@react-aria/collections';\nimport {baseColor, edgeToText, focusRing, space, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, control, controlBorderRadius, controlFont, controlSize, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\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 {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeRefs, useResizeObserver, useSlotId} from '@react-aria/utils';\nimport {Node} from 'react-stately';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useScale} from './utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ComboboxStyleProps {\n  /**\n   * The size of the Combobox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection' | keyof GlobalDOMAttributes>,\n  ComboboxStyleProps,\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 ComboBox.\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    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n    menuWidth?: number,\n    /** The current loading state of the ComboBox. Determines whether or not the progress circle should be shown. */\n    loadingState?: LoadingState\n}\n\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({\n  ...controlBorderRadius('sm'),\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: 'ButtonFace'\n  }\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\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  marginStart: {\n    isInput: 'text-to-visual'\n  }\n});\n\nconst emptyStateText = style({\n  height: {\n    size: {\n      S: 24,\n      M: 32,\n      L: 40,\n      XL: 48\n    }\n  },\n  font: {\n    size: {\n      S: 'ui-sm',\n      M: 'ui',\n      L: 'ui-lg',\n      XL: 'ui-xl'\n    }\n  },\n  display: 'flex',\n  alignItems: 'center',\n  paddingStart: 'edge-to-text'\n});\n\nexport let listbox = style<{size: 'S' | 'M' | 'L' | 'XL'}>({\n  width: 'full',\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  // TODO: Might help with horizontal scrolling happening on Windows, will need to check somehow. Otherwise, revert back to overflow: auto\n  overflowY: 'auto',\n  overflowX: 'hidden',\n  fontFamily: 'sans',\n  fontSize: controlFont(),\n  outlineStyle: 'none'\n});\n\nexport let listboxItem = style({\n  ...focusRing(),\n  ...control({shape: 'default', wrap: true, icon: true}),\n  columnGap: 0,\n  paddingX: 0,\n  paddingBottom: '--labelPadding',\n  backgroundColor: {\n    default: 'transparent',\n    isFocused: baseColor('gray-100').isFocusVisible\n  },\n  color: {\n    default: baseColor('neutral'),\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  position: 'relative',\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       .',\n    '. .         .    description .'\n  ],\n  gridTemplateColumns: {\n    size: {\n      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(24)],\n      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(32)],\n      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(40)],\n      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(48)]\n    }\n  },\n  gridTemplateRows: {\n    // min-content prevents second row from 'auto'ing to a size larger then 0 when empty\n    default: 'auto minmax(0, min-content)',\n    ':has([slot=description])': 'auto auto'\n  },\n  rowGap: {\n    ':has([slot=description])': space(1)\n  },\n  alignItems: 'baseline',\n  minHeight: controlSize(),\n  height: 'min',\n  textDecoration: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  transition: 'default'\n}, getAllowedOverrides());\n\nexport let listboxHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({\n  color: 'neutral',\n  boxSizing: 'border-box',\n  minHeight: controlSize(),\n  paddingY: centerPadding(),\n  marginX: {\n    size: {\n      S: `[${edgeToText(24)}]`,\n      M: `[${edgeToText(32)}]`,\n      L: `[${edgeToText(40)}]`,\n      XL: `[${edgeToText(48)}]`\n    }\n  }\n});\n\nconst separatorWrapper = style({\n  display: 'flex',\n  marginX: {\n    size: {\n      S: `[${edgeToText(24)}]`,\n      M: `[${edgeToText(32)}]`,\n      L: `[${edgeToText(40)}]`,\n      XL: `[${edgeToText(48)}]`\n    }\n  },\n  height: 12,\n  alignItems: 'center'\n});\n\nconst dividerStyle = style({\n  backgroundColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  borderRadius: 'full',\n  height: '[2px]',\n  width: 'full'\n});\n\n// Not from any design, just following the sizing of the existing rows\nexport const LOADER_ROW_HEIGHTS = {\n  S: {\n    medium: 24,\n    large: 30\n  },\n  M: {\n    medium: 32,\n    large: 40\n  },\n  L: {\n    medium: 40,\n    large: 50\n  },\n  XL: {\n    medium: 48,\n    large: 60\n  }\n};\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    size = 'M',\n    labelPosition = 'top',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...comboBoxProps\n  } = props;\n\n  return (\n    <AriaComboBox\n      {...comboBoxProps}\n      allowsEmptyCollection\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isRequired, isInvalid}) => (\n        <ComboboxInner {...props} isDisabled={isDisabled} isOpen={isOpen} isRequired={isRequired} isInvalid={isInvalid} ref={ref} />\n      )}\n    </AriaComboBox>\n  );\n});\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, 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 ComboBoxItem(props: ComboBoxItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + listboxItem({...renderProps, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        return (\n          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})}\n                  }\n                }]\n              ]}>\n              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </Provider>\n          </>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends Omit<SectionProps<T>, keyof GlobalDOMAttributes> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider size={size} />\n    </>\n  );\n}\n\nconst ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any> & {isOpen: boolean}, ref: ForwardedRef<TextFieldRef | null>) {\n  let {\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    menuWidth,\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    children,\n    defaultItems,\n    items,\n    size = 'M',\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator,\n    loadingState,\n    isDisabled,\n    isOpen,\n    isRequired,\n    isInvalid,\n    menuTrigger,\n    onLoadMore\n  } = props;\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let buttonRef = useRef<HTMLButtonElement>(null);\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\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 triggerRef = useRef<HTMLDivElement>(null);\n    // Make menu width match input + button\n  let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n  let onResize = useCallback(() => {\n    if (triggerRef.current) {\n      let inputRect = triggerRef.current.getBoundingClientRect();\n      let minX = inputRect.left;\n      let maxX = inputRect.right;\n      setTriggerWidth((maxX - minX) + 'px');\n    }\n  }, [triggerRef, setTriggerWidth]);\n\n  useResizeObserver({\n    ref: triggerRef,\n    onResize: onResize\n  });\n\n  let state = useContext(ComboBoxStateContext);\n  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let [showLoading, setShowLoading] = useState(false);\n  let isLoadingOrFiltering = loadingState === 'loading' || loadingState === 'filtering';\n  {/* Logic copied from S1 */}\n  let showFieldSpinner = useMemo(() => showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'), [showLoading, isOpen, menuTrigger, loadingState]);\n  let spinnerId = useSlotId([showFieldSpinner]);\n\n  let inputValue = state?.inputValue;\n  let lastInputValue = useRef(inputValue);\n  useEffect(() => {\n    if (isLoadingOrFiltering && !showLoading) {\n      if (timeout.current === null) {\n        timeout.current = setTimeout(() => {\n          setShowLoading(true);\n        }, 500);\n      }\n\n      // If user is typing, clear the timer and restart since it is a new request\n      if (inputValue !== lastInputValue.current) {\n        clearTimeout(timeout.current);\n        timeout.current = setTimeout(() => {\n          setShowLoading(true);\n        }, 500);\n      }\n    } else if (!isLoadingOrFiltering) {\n      // If loading is no longer happening, clear any timers and hide the loading circle\n      setShowLoading(false);\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n      timeout.current = null;\n    }\n\n    lastInputValue.current = inputValue;\n  }, [isLoadingOrFiltering, showLoading, inputValue]);\n\n  useEffect(() => {\n    return () => {\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n      timeout.current = null;\n    };\n  }, []);\n\n  let renderer;\n  let listBoxLoadingCircle = (\n    <ListBoxLoadMoreItem\n      // Only show the spinner in the list when loading more\n      isLoading={loadingState === 'loadingMore'}\n      onLoadMore={onLoadMore}\n      className={loadingWrapperStyles}>\n      <ProgressCircle\n        isIndeterminate\n        size=\"S\"\n        styles={progressCircleStyles({size})}\n        // Same loading string as table\n        aria-label={stringFormatter.format('table.loadingMore')} />\n    </ListBoxLoadMoreItem>\n  );\n\n  if (typeof children === 'function') {\n    renderer = (\n      <>\n        <Collection items={items ?? defaultItems} dependencies={props.dependencies}>\n          {children}\n        </Collection>\n        {listBoxLoadingCircle}\n      </>\n    );\n  } else {\n    // TODO: is there a case where the user might provide items to the Combobox but doesn't provide a function renderer?\n    // Same case for other components that have this logic (TableView/CardView/Picker)\n    renderer = (\n      <>\n        {children}\n        {listBoxLoadingCircle}\n      </>\n    );\n  }\n  let scale = useScale();\n\n  return (\n    <>\n      <InternalComboboxContext.Provider value={{size}}>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={isRequired}\n          size={size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup\n          ref={triggerRef}\n          role=\"presentation\"\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          size={size}\n          styles={style({\n            ...fieldInput(),\n            paddingStart: 'edge-to-text',\n            // better way to do this one? it's not actually half, they are\n            // [9, 4], [12, 6], [15, 8], [18, 8]\n            // also noticed that our measurement is including the border, making the padding too much\n            paddingEnd: 'calc(self(height, self(minHeight)) * 3 / 16)'\n          })({size})}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                <Input aria-describedby={spinnerId} />\n              </InputContext.Provider>\n            )}\n          </InputContext.Consumer>\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n          {showFieldSpinner && (\n            <ProgressCircle\n              id={spinnerId}\n              isIndeterminate\n              size=\"S\"\n              styles={progressCircleStyles({size, isInput: true})}\n              aria-label={stringFormatter.format('table.loading')} />\n          )}\n          <Button\n            ref={buttonRef}\n            // Prevent press scale from sticking while ComboBox is open.\n            // @ts-ignore\n            isPressed={false}\n            style={renderProps => pressScale(buttonRef)(renderProps)}\n            className={renderProps => inputButton({\n              ...renderProps,\n              size,\n              isOpen\n            })}>\n            <ChevronIcon\n              size={size}\n              className={iconStyles} />\n          </Button>\n        </FieldGroup>\n        <HelpText\n          size={size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={descriptionMessage}>\n          {errorMessage}\n        </HelpText>\n        <PopoverBase\n          hideArrow\n          triggerRef={triggerRef}\n          offset={menuOffset}\n          placement={`${direction} ${align}` as Placement}\n          shouldFlip={shouldFlip}\n          UNSAFE_style={{\n            width: menuWidth ? `${menuWidth}px` : undefined,\n            // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n            '--trigger-width': `calc(${triggerWidth} - 2px)`\n          } as CSSProperties}\n          styles={style({\n            minWidth: '--trigger-width',\n            width: '--trigger-width'\n          })}>\n          <Provider\n            values={[\n              [HeaderContext, {styles: listboxHeader({size})}],\n              [HeadingContext, {\n                // @ts-ignore\n                role: 'presentation',\n                styles: sectionHeading\n              }],\n              [TextContext, {\n                slots: {\n                  'description': {styles: description({size})}\n                }\n              }]\n            ]}>\n            <Virtualizer\n              layout={ListLayout}\n              layoutOptions={{\n                estimatedRowHeight: 32,\n                padding: 8,\n                estimatedHeadingHeight: 50,\n                loaderHeight: LOADER_ROW_HEIGHTS[size][scale]\n              }}>\n              <ListBox\n                dependencies={props.dependencies}\n                renderEmptyState={() => (\n                  <span className={emptyStateText({size})}>\n                    {loadingState === 'loading' ? stringFormatter.format('table.loading') : stringFormatter.format('combobox.noResults')}\n                  </span>\n                )}\n                items={items}\n                className={listbox({size})}>\n                {renderer}\n              </ListBox>\n            </Virtualizer>\n          </Provider>\n        </PopoverBase>\n      </InternalComboboxContext.Provider>\n    </>\n  );\n});\n\nclass SeparatorNode extends CollectionNode<any> {\n  static readonly type = 'separator';\n\n  filter(collection: BaseCollection<any>, newCollection: BaseCollection<any>): CollectionNode<any> | null {\n    let prevItem = newCollection.getItem(this.prevKey!);\n    if (prevItem && prevItem.type !== 'separator') {\n      let clone = this.clone();\n      newCollection.addDescendants(clone, collection);\n      return clone;\n    }\n\n    return null;\n  }\n}\n\nexport const Divider = /*#__PURE__*/ createLeafComponent(SeparatorNode, function Divider({size}: {size?: 'S' | 'M' | 'L' | 'XL'}, ref: ForwardedRef<HTMLDivElement>, node: Node<unknown>) {\n  let listState = useContext(ListStateContext)!;\n\n  let nextNode = node.nextKey != null && listState.collection.getItem(node.nextKey);\n  if (node.prevKey == null || !nextNode || nextNode.type === 'separator' || (nextNode.type === 'loader' && nextNode.nextKey == null)) {\n    return null;\n  }\n\n  return (\n    <div className={separatorWrapper({size})}>\n      <div ref={ref} className={dividerStyle} />\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ComboBox.css.map"}
+{"mappings":"AC+GoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCD;;;;EAAA;;;;EAAA;;;;EASU;;;;EAAA;;;;EAAA;;;;EASA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcN;;;;EAAA;;;;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYI;;;;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;;;;EAoDE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgDqB;;;;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;;;;EAqQlB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyDA;;;;EAAA;;;;EAKK;;;;EAAA;;;;EAAA;;;;;AAzjBH;EA+FC;;;;EAYI;;;;EAAA;;;;EAAA;;;;EA2IW;;;;;AAtPhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA2GK;;;;IAiFJ;;;;;;AAjIQ;EAAA;IAAA;;;;IA2Id;;;;;;AA7HQ;EAsBF;;;;EAYI;;;;;AAlCF;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAkbL;EAAA;IAAA","sources":["13beeca66baffd35","packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["@import \"434b6dc809c84a70\";\n@import \"9807be49da09aafb\";\n@import \"affe2b90434aec6a\";\n@import \"96ebc07fe89537d3\";\n@import \"85ea669da1afabc2\";\n@import \"8168af80eec66ed5\";\n@import \"14203b4128acdfd2\";\n@import \"82b080edec7141b0\";\n@import \"507e1180fa9ffff0\";\n@import \"12f905ef6005085b\";\n@import \"82c0b597a48d07ec\";\n@import \"37bf4c12c54c2fbe\";\n@import \"fb17d87a01335bc9\";\n@import \"3bae6fac1e4833be\";\n@import \"0f8f22acb39cf5c5\";\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  ComboBox as AriaComboBox,\n  ComboBoxProps as AriaComboBoxProps,\n  ListBoxSection as AriaListBoxSection,\n  PopoverProps as AriaPopoverProps,\n  Button,\n  ButtonRenderProps,\n  Collection,\n  ComboBoxStateContext,\n  ContextValue,\n  InputContext,\n  InputProps,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxLoadMoreItem,\n  ListBoxProps,\n  ListLayout,\n  ListStateContext,\n  Provider,\n  SectionProps,\n  Virtualizer\n} from 'react-aria-components';\nimport {AsyncLoadable, GlobalDOMAttributes, HelpTextProps, LoadingState, SpectrumLabelableProps} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {BaseCollection, CollectionNode, createLeafComponent} from '@react-aria/collections';\nimport {baseColor, edgeToText, focusRing, space, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, control, controlBorderRadius, controlFont, controlSize, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\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 {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeRefs, useResizeObserver, useSlotId} from '@react-aria/utils';\nimport {Node} from 'react-stately';\nimport {Placement} from 'react-aria';\nimport {Popover} from './Popover';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useScale} from './utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ComboboxStyleProps {\n  /**\n   * The size of the Combobox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection' | keyof GlobalDOMAttributes>,\n  ComboboxStyleProps,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps,\n  Pick<ListBoxProps<T>, 'items' | 'dependencies'>,\n  Pick<AriaPopoverProps, 'shouldFlip'>,\n  Pick<AsyncLoadable, 'onLoadMore'>,\n  Pick<InputProps, 'placeholder'>  {\n    /** The contents of the collection. */\n    children: ReactNode | ((item: T) => ReactNode),\n    /**\n     * Direction the menu will render relative to the ComboBox.\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    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n    menuWidth?: number,\n    /** The current loading state of the ComboBox. Determines whether or not the progress circle should be shown. */\n    loadingState?: LoadingState\n}\n\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({\n  ...controlBorderRadius('sm'),\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  alignItems: 'center',\n  justifyContent: 'center',\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: 'ButtonFace'\n  }\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: 90,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\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  marginStart: {\n    isInput: 'text-to-visual'\n  }\n});\n\nconst emptyStateText = style({\n  height: {\n    size: {\n      S: 24,\n      M: 32,\n      L: 40,\n      XL: 48\n    }\n  },\n  font: {\n    size: {\n      S: 'ui-sm',\n      M: 'ui',\n      L: 'ui-lg',\n      XL: 'ui-xl'\n    }\n  },\n  display: 'flex',\n  alignItems: 'center',\n  paddingStart: 'edge-to-text'\n});\n\nexport let listbox = style<{size: 'S' | 'M' | 'L' | 'XL'}>({\n  width: 'full',\n  boxSizing: 'border-box',\n  maxHeight: '[inherit]',\n  // TODO: Might help with horizontal scrolling happening on Windows, will need to check somehow. Otherwise, revert back to overflow: auto\n  overflowY: 'auto',\n  overflowX: 'hidden',\n  fontFamily: 'sans',\n  fontSize: controlFont(),\n  outlineStyle: 'none'\n});\n\nexport let listboxItem = style({\n  ...focusRing(),\n  ...control({shape: 'default', wrap: true, icon: true}),\n  columnGap: 0,\n  paddingX: 0,\n  paddingBottom: '--labelPadding',\n  backgroundColor: {\n    default: 'transparent',\n    isFocused: baseColor('gray-100').isFocusVisible\n  },\n  color: {\n    default: baseColor('neutral'),\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  position: 'relative',\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       .',\n    '. .         .    description .'\n  ],\n  gridTemplateColumns: {\n    size: {\n      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(24)],\n      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(32)],\n      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(40)],\n      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(48)]\n    }\n  },\n  gridTemplateRows: {\n    // min-content prevents second row from 'auto'ing to a size larger then 0 when empty\n    default: 'auto minmax(0, min-content)',\n    ':has([slot=description])': 'auto auto'\n  },\n  rowGap: {\n    ':has([slot=description])': space(1)\n  },\n  alignItems: 'baseline',\n  minHeight: controlSize(),\n  height: 'min',\n  textDecoration: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  transition: 'default'\n}, getAllowedOverrides());\n\nexport let listboxHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({\n  color: 'neutral',\n  boxSizing: 'border-box',\n  minHeight: controlSize(),\n  paddingY: centerPadding(),\n  marginX: {\n    size: {\n      S: `[${edgeToText(24)}]`,\n      M: `[${edgeToText(32)}]`,\n      L: `[${edgeToText(40)}]`,\n      XL: `[${edgeToText(48)}]`\n    }\n  }\n});\n\nconst separatorWrapper = style({\n  display: 'flex',\n  marginX: {\n    size: {\n      S: `[${edgeToText(24)}]`,\n      M: `[${edgeToText(32)}]`,\n      L: `[${edgeToText(40)}]`,\n      XL: `[${edgeToText(48)}]`\n    }\n  },\n  height: 12,\n  alignItems: 'center'\n});\n\nconst dividerStyle = style({\n  backgroundColor: {\n    default: 'gray-200',\n    forcedColors: 'ButtonBorder'\n  },\n  borderRadius: 'full',\n  height: '[2px]',\n  width: 'full'\n});\n\nconst avatar = style({\n  gridArea: 'icon',\n  marginEnd: 'text-to-visual'\n});\n\n// Not from any design, just following the sizing of the existing rows\nexport const LOADER_ROW_HEIGHTS = {\n  S: {\n    medium: 24,\n    large: 30\n  },\n  M: {\n    medium: 32,\n    large: 40\n  },\n  L: {\n    medium: 40,\n    large: 50\n  },\n  XL: {\n    medium: 48,\n    large: 60\n  }\n};\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    size = 'M',\n    labelPosition = 'top',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...comboBoxProps\n  } = props;\n\n  return (\n    <AriaComboBox\n      {...comboBoxProps}\n      allowsEmptyCollection\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {({isDisabled, isOpen, isRequired, isInvalid}) => (\n        <ComboboxInner {...props} isDisabled={isDisabled} isOpen={isOpen} isRequired={isRequired} isInvalid={isInvalid} ref={ref} />\n      )}\n    </AriaComboBox>\n  );\n});\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {\n  children: ReactNode\n}\n\nconst avatarSize = {\n  S: 16,\n  M: 20,\n  L: 22,\n  XL: 26\n} as const;\n\nconst checkmarkIconSize = {\n  S: 'XS',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport function ComboBoxItem(props: ComboBoxItemProps): ReactNode {\n  let ref = useRef(null);\n  let isLink = props.href != null;\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <ListBoxItem\n      {...props}\n      ref={ref}\n      textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n      style={pressScale(ref, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + listboxItem({...renderProps, size, isLink}, props.styles)}>\n      {(renderProps) => {\n        let {children} = props;\n        return (\n          <>\n            <Provider\n              values={[\n                [IconContext, {\n                  slots: {\n                    icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n                  }\n                }],\n                [AvatarContext, {\n                  slots: {\n                    avatar: {size: avatarSize[size], styles: avatar}\n                  }\n                }],\n                [TextContext, {\n                  slots: {\n                    label: {styles: label({size})},\n                    description: {styles: description({...renderProps, size})}\n                  }\n                }]\n              ]}>\n              {!isLink && !props.onAction && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            </Provider>\n          </>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends Omit<SectionProps<T>, keyof GlobalDOMAttributes> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection\n        {...props}>\n        {props.children}\n      </AriaListBoxSection>\n      <Divider size={size} />\n    </>\n  );\n}\n\nconst ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any> & {isOpen: boolean}, ref: ForwardedRef<TextFieldRef | null>) {\n  let {\n    direction = 'bottom',\n    align = 'start',\n    shouldFlip = true,\n    menuWidth,\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    children,\n    defaultItems,\n    items,\n    size = 'M',\n    labelPosition = 'top',\n    labelAlign = 'start',\n    necessityIndicator,\n    loadingState,\n    isDisabled,\n    isOpen,\n    isRequired,\n    isInvalid,\n    menuTrigger,\n    onLoadMore\n  } = props;\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let inputRef = useRef<HTMLInputElement>(null);\n  let domRef = useRef<HTMLDivElement>(null);\n  let buttonRef = useRef<HTMLButtonElement>(null);\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\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 triggerRef = useRef<HTMLDivElement>(null);\n  // Make menu width match input + button\n  let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n  let onResize = useCallback(() => {\n    if (triggerRef.current) {\n      let inputRect = triggerRef.current.getBoundingClientRect();\n      let minX = inputRect.left;\n      let maxX = inputRect.right;\n      setTriggerWidth((maxX - minX) + 'px');\n    }\n  }, [triggerRef, setTriggerWidth]);\n\n  useResizeObserver({\n    ref: triggerRef,\n    onResize: onResize\n  });\n\n  let state = useContext(ComboBoxStateContext);\n  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let [showLoading, setShowLoading] = useState(false);\n  let isLoadingOrFiltering = loadingState === 'loading' || loadingState === 'filtering';\n  {/* Logic copied from S1 */}\n  let showFieldSpinner = useMemo(() => showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'), [showLoading, isOpen, menuTrigger, loadingState]);\n  let spinnerId = useSlotId([showFieldSpinner]);\n\n  let inputValue = state?.inputValue;\n  let lastInputValue = useRef(inputValue);\n  useEffect(() => {\n    if (isLoadingOrFiltering && !showLoading) {\n      if (timeout.current === null) {\n        timeout.current = setTimeout(() => {\n          setShowLoading(true);\n        }, 500);\n      }\n\n      // If user is typing, clear the timer and restart since it is a new request\n      if (inputValue !== lastInputValue.current) {\n        clearTimeout(timeout.current);\n        timeout.current = setTimeout(() => {\n          setShowLoading(true);\n        }, 500);\n      }\n    } else if (!isLoadingOrFiltering) {\n      // If loading is no longer happening, clear any timers and hide the loading circle\n      setShowLoading(false);\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n      timeout.current = null;\n    }\n\n    lastInputValue.current = inputValue;\n  }, [isLoadingOrFiltering, showLoading, inputValue]);\n\n  useEffect(() => {\n    return () => {\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n      timeout.current = null;\n    };\n  }, []);\n\n  let renderer;\n  let listBoxLoadingCircle = (\n    <ListBoxLoadMoreItem\n      // Only show the spinner in the list when loading more\n      isLoading={loadingState === 'loadingMore'}\n      onLoadMore={onLoadMore}\n      className={loadingWrapperStyles}>\n      <ProgressCircle\n        isIndeterminate\n        size=\"S\"\n        styles={progressCircleStyles({size})}\n        // Same loading string as table\n        aria-label={stringFormatter.format('table.loadingMore')} />\n    </ListBoxLoadMoreItem>\n  );\n\n  if (typeof children === 'function') {\n    renderer = (\n      <>\n        <Collection items={items ?? defaultItems} dependencies={props.dependencies}>\n          {children}\n        </Collection>\n        {listBoxLoadingCircle}\n      </>\n    );\n  } else {\n    // TODO: is there a case where the user might provide items to the Combobox but doesn't provide a function renderer?\n    // Same case for other components that have this logic (TableView/CardView/Picker)\n    renderer = (\n      <>\n        {children}\n        {listBoxLoadingCircle}\n      </>\n    );\n  }\n  let scale = useScale();\n\n  return (\n    <>\n      <InternalComboboxContext.Provider value={{size}}>\n        <FieldLabel\n          isDisabled={isDisabled}\n          isRequired={isRequired}\n          size={size}\n          labelPosition={labelPosition}\n          labelAlign={labelAlign}\n          necessityIndicator={necessityIndicator}\n          contextualHelp={props.contextualHelp}>\n          {label}\n        </FieldLabel>\n        <FieldGroup\n          ref={triggerRef}\n          role=\"presentation\"\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          size={size}\n          styles={style({\n            ...fieldInput(),\n            paddingStart: 'edge-to-text',\n            // better way to do this one? it's not actually half, they are\n            // [9, 4], [12, 6], [15, 8], [18, 8]\n            // also noticed that our measurement is including the border, making the padding too much\n            paddingEnd: 'calc(self(height, self(minHeight)) * 3 / 16)'\n          })({size})}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                <Input aria-describedby={spinnerId} />\n              </InputContext.Provider>\n            )}\n          </InputContext.Consumer>\n          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n          {showFieldSpinner && (\n            <ProgressCircle\n              id={spinnerId}\n              isIndeterminate\n              size=\"S\"\n              styles={progressCircleStyles({size, isInput: true})}\n              aria-label={stringFormatter.format('table.loading')} />\n          )}\n          <Button\n            ref={buttonRef}\n            // Prevent press scale from sticking while ComboBox is open.\n            // @ts-ignore\n            isPressed={false}\n            style={renderProps => pressScale(buttonRef)(renderProps)}\n            className={renderProps => inputButton({\n              ...renderProps,\n              size,\n              isOpen\n            })}>\n            <ChevronIcon\n              size={size}\n              className={iconStyles} />\n          </Button>\n        </FieldGroup>\n        <HelpText\n          size={size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={descriptionMessage}>\n          {errorMessage}\n        </HelpText>\n        <Popover\n          hideArrow\n          triggerRef={triggerRef}\n          offset={menuOffset}\n          placement={`${direction} ${align}` as Placement}\n          shouldFlip={shouldFlip}\n          UNSAFE_style={{\n            '--trigger-width': (menuWidth ? menuWidth + 'px' : triggerWidth)\n          } as CSSProperties}\n          padding=\"none\"\n          styles={style({\n            minWidth: '--trigger-width',\n            width: '--trigger-width'\n          })}>\n          <div\n            className={style({\n              display: 'flex',\n              size: 'full'\n            })}>\n            <Provider\n              values={[\n                [HeaderContext, {styles: listboxHeader({size})}],\n                [HeadingContext, {\n                  // @ts-ignore\n                  role: 'presentation',\n                  styles: sectionHeading\n                }],\n                [TextContext, {\n                  slots: {\n                    'description': {styles: description({size})}\n                  }\n                }]\n              ]}>\n              <Virtualizer\n                layout={ListLayout}\n                layoutOptions={{\n                  estimatedRowHeight: 32,\n                  padding: 8,\n                  estimatedHeadingHeight: 50,\n                  loaderHeight: LOADER_ROW_HEIGHTS[size][scale]\n                }}>\n                <ListBox\n                  dependencies={props.dependencies}\n                  renderEmptyState={() => (\n                    <span className={emptyStateText({size})}>\n                      {loadingState === 'loading' ? stringFormatter.format('table.loading') : stringFormatter.format('combobox.noResults')}\n                    </span>\n                  )}\n                  items={items}\n                  className={listbox({size})}>\n                  {renderer}\n                </ListBox>\n              </Virtualizer>\n            </Provider>\n          </div>\n        </Popover>\n      </InternalComboboxContext.Provider>\n    </>\n  );\n});\n\nclass SeparatorNode extends CollectionNode<any> {\n  static readonly type = 'separator';\n\n  filter(collection: BaseCollection<any>, newCollection: BaseCollection<any>): CollectionNode<any> | null {\n    let prevItem = newCollection.getItem(this.prevKey!);\n    if (prevItem && prevItem.type !== 'separator') {\n      let clone = this.clone();\n      newCollection.addDescendants(clone, collection);\n      return clone;\n    }\n\n    return null;\n  }\n}\n\nexport const Divider = /*#__PURE__*/ createLeafComponent(SeparatorNode, function Divider({size}: {size?: 'S' | 'M' | 'L' | 'XL'}, ref: ForwardedRef<HTMLDivElement>, node: Node<unknown>) {\n  let listState = useContext(ListStateContext)!;\n\n  let nextNode = node.nextKey != null && listState.collection.getItem(node.nextKey);\n  if (node.prevKey == null || !nextNode || nextNode.type === 'separator' || (nextNode.type === 'loader' && nextNode.nextKey == null)) {\n    return null;\n  }\n\n  return (\n    <div className={separatorWrapper({size})}>\n      <div ref={ref} className={dividerStyle} />\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ComboBox.css.map"}