@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/ComboBox.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["/*\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  ComboBoxStateContext\n} from 'react-aria-components/ComboBox';\nimport {\n  ListBoxSection as AriaListBoxSection,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxLoadMoreItem,\n  ListBoxProps,\n  ListBoxSectionProps,\n  ListStateContext\n} from 'react-aria-components/ListBox';\nimport {PopoverProps as AriaPopoverProps, Placement} from 'react-aria-components/Popover';\nimport {\n  AsyncLoadable,\n  GlobalDOMAttributes,\n  HelpTextProps,\n  LoadingState,\n  SingleSelection,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {BaseCollection, CollectionNode} from 'react-aria/private/collections/BaseCollection';\nimport {baseColor, centerPadding, focusRing, space, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonRenderProps} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {checkmark, description, icon, iconCenterWrapper, label, sectionHeading} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection} from 'react-aria/Collection';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  control,\n  controlBorderRadius,\n  controlFont,\n  controlSize,\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  CSSProperties,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  Ref,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {createFocusableRef} from './useDOMRef';\nimport {createLeafComponent} from 'react-aria/CollectionBuilder';\nimport {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};\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';\nimport {InputContext, InputProps} from 'react-aria-components/Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListLayout} from 'react-stately/useVirtualizerState';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {Node} from '@react-types/shared';\nimport {Popover} from './Popover';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {TextFieldRef} from './TextField';\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 ComboboxStyleProps {\n  /**\n   * The size of the Combobox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The prefix to display in the ComboBox. A non-interactive element that appears before the input.\n   */\n  prefix?: ReactNode;\n}\nexport interface ComboBoxProps<T>\n  extends\n    Omit<\n      AriaComboBoxProps<T>,\n      | 'children'\n      | 'style'\n      | 'className'\n      | 'render'\n      | 'defaultFilter'\n      | 'allowsEmptyCollection'\n      | 'selectionMode'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'onSelectionChange'\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | keyof GlobalDOMAttributes\n    >,\n    Omit<SingleSelection, 'disallowEmptySelection'>,\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  /**\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  /**\n   * The current loading state of the ComboBox. Determines whether or not the progress circle should\n   * be shown.\n   */\n  loadingState?: LoadingState;\n}\n\nexport const ComboBoxContext =\n  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  {\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: ['. checkmark icon label       .', '. .         .    description .'],\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: 'transform'\n  },\n  getAllowedOverrides()\n);\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\n * limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T>(\n  props: ComboBoxProps<T>,\n  ref: Ref<TextFieldRef>\n) {\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={\n        UNSAFE_className +\n        style(field(), getAllowedOverrides())(\n          {\n            isInForm: !!formContext,\n            labelPosition,\n            size\n          },\n          props.styles\n        )\n      }>\n      {({isDisabled, isOpen, isRequired, isInvalid}) => (\n        <ComboboxInner\n          {...props}\n          isDisabled={isDisabled}\n          isOpen={isOpen}\n          isRequired={isRequired}\n          isInvalid={isInvalid}\n          ref={ref}\n        />\n      )}\n    </AriaComboBox>\n  );\n});\n\nexport interface ComboBoxItemProps\n  extends\n    Omit<\n      ListBoxItemProps,\n      | 'children'\n      | 'style'\n      | 'className'\n      | 'render'\n      | 'onClick'\n      | 'onKeyDown'\n      | 'onKeyUp'\n      | keyof GlobalDOMAttributes\n    >,\n    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={\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        return (\n          <>\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: {size: avatarSize[size], styles: avatar}\n                    }\n                  }\n                ],\n                [\n                  TextContext,\n                  {\n                    slots: {\n                      label: {styles: label({size})},\n                      description: {styles: description({...renderProps, size})}\n                    }\n                  }\n                ]\n              ]}>\n              {!isLink && !props.onAction && (\n                <CheckmarkIcon\n                  size={checkmarkIconSize[size]}\n                  className={checkmark({...renderProps, size})}\n                />\n              )}\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 Omit<\n  ListBoxSectionProps<T>,\n  'style' | 'className' | 'render' | keyof GlobalDOMAttributes\n> {}\nexport function ComboBoxSection<T>(props: ComboBoxSectionProps<T>): ReactNode {\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection {...props}>{props.children}</AriaListBoxSection>\n      <Divider size={size} />\n    </>\n  );\n}\n\nconst ComboboxInner = forwardRef(function ComboboxInner(\n  props: ComboBoxProps<any> & {isOpen: boolean},\n  ref: ForwardedRef<TextFieldRef | null>\n) {\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 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  {\n    /* Logic copied from S1 */\n  }\n  let showFieldSpinner = useMemo(\n    () => showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'),\n    [showLoading, isOpen, menuTrigger, loadingState]\n  );\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      />\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          prefix={props.prefix}\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            paddingEnd: 'calc(self(height, self(minHeight)) * 3 / 16 - self(borderEndWidth, 2px))'\n          })({size})}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider\n                value={{\n                  ...ctx,\n                  ref: mergeRefs((ctx as any)?.ref, inputRef)\n                }}>\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          )}\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 =>\n              inputButton({\n                ...renderProps,\n                size,\n                isOpen\n              })\n            }>\n            <ChevronIcon size={size} 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          offset={menuOffset}\n          placement={`${direction} ${align}` as Placement}\n          shouldFlip={shouldFlip}\n          UNSAFE_style={\n            {\n              '--trigger-width': menuWidth ? menuWidth + 'px' : undefined\n            } as CSSProperties\n          }\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                [\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              <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'\n                        ? stringFormatter.format('table.loading')\n                        : 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(\n    collection: BaseCollection<any>,\n    newCollection: BaseCollection<any>\n  ): 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(\n  SeparatorNode,\n  function Divider(\n    {size}: {size?: 'S' | 'M' | 'L' | 'XL'},\n    ref: ForwardedRef<HTMLDivElement>,\n    node: Node<unknown>\n  ) {\n    let listState = useContext(ListStateContext)!;\n\n    let nextNode = node.nextKey != null && listState.collection.getItem(node.nextKey);\n    if (\n      node.prevKey == null ||\n      !nextNode ||\n      nextNode.type === 'separator' ||\n      (nextNode.type === 'loader' && nextNode.nextKey == null)\n    ) {\n      return null;\n    }\n\n    return (\n      <div className={separatorWrapper({size})}>\n        <div ref={ref} className={dividerStyle} />\n      </div>\n    );\n  }\n);\n"],"names":[],"version":3,"file":"ComboBox.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqJM,MAAM,0DACX,CAAA,GAAA,oBAAY,EAA2D;AAEzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCN,MAAM;AASN,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;AAcN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDJ,IAAI;;;;;;;;;;;;;;;;;;;;;;AAeX,MAAM;;;;;;;;;;;;;;;AAcN,MAAM;AAUN,MAAM;AAMC,MAAM,4CAAqB;IAChC,GAAG;QACD,QAAQ;QACR,OAAO;IACT;IACA,GAAG;QACD,QAAQ;QACR,OAAO;IACT;IACA,GAAG;QACD,QAAQ;QACR,OAAO;IACT;IACA,IAAI;QACF,QAAQ;QACR,OAAO;IACT;AACF;AAEA,IAAI,8DAA0B,CAAA,GAAA,oBAAY,EAAkC;IAAC,MAAM;AAAG;AAM/E,MAAM,4CAAyB,AAAd,WAAW,GAAI,CAAA,GAAA,iBAAS,EAAqB,SAAS,SAC5E,MAAuB,EACvB,GAAsB;IAEtB,CAAC,QAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,QAAO,KAAK;IAEnD,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,SAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,QACF,OAAO,oBACP,gBAAgB,yBAChB,mBAAmB,kBACnB,YAAY,EACZ,GAAG,eACJ,GAAG;IAEJ,qBACE,gBAAC,CAAA,GAAA,eAAW;QACT,GAAG,aAAa;QACjB,qBAAqB;QACrB,OAAO;QACP,WACE,mBACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UACE;YACE,UAAU,CAAC,CAAC;2BACZ;kBACA;QACF,GACA,OAAM,MAAM;kBAGf,CAAC,cAAC,UAAU,UAAE,MAAM,cAAE,UAAU,aAAE,SAAS,EAAC,iBAC3C,gBAAC;gBACE,GAAG,MAAK;gBACT,YAAY;gBACZ,QAAQ;gBACR,YAAY;gBACZ,WAAW;gBACX,KAAK;;;AAKf;AAmBA,MAAM,mCAAa;IACjB,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAEA,MAAM,0CAAoB;IACxB,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAEO,SAAS,0CAAa,KAAwB;IACnD,IAAI,MAAM,CAAA,GAAA,aAAK,EAAE;IACjB,IAAI,SAAS,MAAM,IAAI,IAAI;IAC3B,IAAI,QAAC,IAAI,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IACxB,qBACE,gBAAC,CAAA,GAAA,kBAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,WACE,MAAM,SAAS,IACd,CAAA,OAAO,MAAM,QAAQ,KAAK,WAAY,MAAM,QAAQ,GAAc,SAAQ;QAE7E,OAAO,CAAA,GAAA,yCAAS,EAAE,KAAK,MAAM,YAAY;QACzC,WAAW,CAAA,cACT,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAY;gBAAC,GAAG,WAAW;sBAAE;wBAAM;YAAM,GAAG,MAAM,MAAM;kBAE1F,CAAA;YACC,IAAI,YAAC,QAAQ,EAAC,GAAG;YACjB,qBACE;0BACE,cAAA,iBAAC,CAAA,GAAA,eAAO;oBACN,QAAQ;wBACN;4BACE,CAAA,GAAA,yCAAU;4BACV;gCACE,OAAO;oCACL,MAAM;wCACJ,QAAQ,CAAA,GAAA,yCAAa,EAAE;4CAAC,MAAM;4CAAQ,QAAQ,CAAA,GAAA,yCAAgB;wCAAC;wCAC/D,QAAQ,CAAA,GAAA,yCAAG;oCACb;gCACF;4BACF;yBACD;wBACD;4BACE,CAAA,GAAA,yCAAY;4BACZ;gCACE,OAAO;oCACL,QAAQ;wCAAC,MAAM,gCAAU,CAAC,KAAK;wCAAE,QAAQ;oCAAM;gCACjD;4BACF;yBACD;wBACD;4BACE,CAAA,GAAA,yCAAU;4BACV;gCACE,OAAO;oCACL,OAAO;wCAAC,QAAQ,CAAA,GAAA,yCAAI,EAAE;kDAAC;wCAAI;oCAAE;oCAC7B,aAAa;wCAAC,QAAQ,CAAA,GAAA,yCAAU,EAAE;4CAAC,GAAG,WAAW;kDAAE;wCAAI;oCAAE;gCAC3D;4BACF;yBACD;qBACF;;wBACA,CAAC,UAAU,CAAC,MAAM,QAAQ,kBACzB,gBAAC,CAAA,GAAA,wCAAY;4BACX,MAAM,uCAAiB,CAAC,KAAK;4BAC7B,WAAW,CAAA,GAAA,wCAAQ,EAAE;gCAAC,GAAG,WAAW;sCAAE;4BAAI;;wBAG7C,OAAO,aAAa,yBAAW,gBAAC,CAAA,GAAA,yCAAG;4BAAE,MAAK;sCAAS;6BAAmB;;;;QAI/E;;AAGN;AAMO,SAAS,0CAAmB,KAA8B;IAC/D,IAAI,QAAC,IAAI,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IACxB,qBACE;;0BACE,gBAAC,CAAA,GAAA,qBAAiB;gBAAG,GAAG,KAAK;0BAAG,MAAM,QAAQ;;0BAC9C,gBAAC;gBAAQ,MAAM;;;;AAGrB;AAEA,MAAM,oDAAgB,CAAA,GAAA,iBAAS,EAAE,SAAS,cACxC,MAA6C,EAC7C,GAAsC;IAEtC,IAAI,aACF,YAAY,iBACZ,QAAQ,qBACR,aAAa,iBACb,SAAS,SACT,KAAK,EACL,aAAa,kBAAkB,gBAC/B,YAAY,YACZ,QAAQ,gBACR,YAAY,SACZ,KAAK,QACL,OAAO,oBACP,gBAAgB,mBAChB,aAAa,6BACb,kBAAkB,gBAClB,YAAY,cACZ,UAAU,UACV,MAAM,cACN,UAAU,aACV,SAAS,eACT,WAAW,cACX,UAAU,EACX,GAAG;IAEJ,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IACxC,IAAI,SAAS,CAAA,GAAA,aAAK,EAAkB;IACpC,IAAI,YAAY,CAAA,GAAA,aAAK,EAAqB;IAC1C,sCAAsC;IACtC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,yCAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,uEAAuE;IACvE,IAAI;IACJ,IAAI,SAAS,KACX,aAAa;SACR,IAAI,SAAS,KAClB,aAAa;SACR,IAAI,SAAS,KAClB,aAAa;SAEb,aAAa;IAGf,IAAI,QAAQ,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2BAAmB;IAC1C,IAAI,UAAU,CAAA,GAAA,aAAK,EAAwC;IAC3D,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAE;IAC7C,IAAI,uBAAuB,iBAAiB,aAAa,iBAAiB;IAI1E,IAAI,mBAAmB,CAAA,GAAA,cAAM,EAC3B,IAAM,eAAgB,CAAA,UAAU,gBAAgB,YAAY,iBAAiB,SAAQ,GACrF;QAAC;QAAa;QAAQ;QAAa;KAAa;IAElD,IAAI,YAAY,CAAA,GAAA,gBAAQ,EAAE;QAAC;KAAiB;IAE5C,IAAI,aAAa,OAAO;IACxB,IAAI,iBAAiB,CAAA,GAAA,aAAK,EAAE;IAC5B,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,wBAAwB,CAAC,aAAa;YACxC,IAAI,QAAQ,OAAO,KAAK,MACtB,QAAQ,OAAO,GAAG,WAAW;gBAC3B,eAAe;YACjB,GAAG;YAGL,2EAA2E;YAC3E,IAAI,eAAe,eAAe,OAAO,EAAE;gBACzC,aAAa,QAAQ,OAAO;gBAC5B,QAAQ,OAAO,GAAG,WAAW;oBAC3B,eAAe;gBACjB,GAAG;YACL;QACF,OAAO,IAAI,CAAC,sBAAsB;YAChC,kFAAkF;YAClF,eAAe;YACf,IAAI,QAAQ,OAAO,EACjB,aAAa,QAAQ,OAAO;YAE9B,QAAQ,OAAO,GAAG;QACpB;QAEA,eAAe,OAAO,GAAG;IAC3B,GAAG;QAAC;QAAsB;QAAa;KAAW;IAElD,CAAA,GAAA,gBAAQ,EAAE;QACR,OAAO;YACL,IAAI,QAAQ,OAAO,EACjB,aAAa,QAAQ,OAAO;YAE9B,QAAQ,OAAO,GAAG;QACpB;IACF,GAAG,EAAE;IAEL,IAAI;IACJ,IAAI,qCACF,gBAAC,CAAA,GAAA,0BAAkB;QACjB,sDAAsD;QACtD,WAAW,iBAAiB;QAC5B,YAAY;QACZ,WAAW;kBACX,cAAA,gBAAC,CAAA,GAAA,yCAAa;YACZ,eAAe;YACf,MAAK;YACL,QAAQ,2CAAqB;sBAAC;YAAI;YAClC,+BAA+B;YAC/B,cAAY,gBAAgB,MAAM,CAAC;;;IAKzC,IAAI,OAAO,aAAa,YACtB,yBACE;;0BACE,gBAAC,CAAA,GAAA,iBAAS;gBAAE,OAAO,SAAS;gBAAc,cAAc,OAAM,YAAY;0BACvE;;YAEF;;;SAIL,oHAAoH;IACpH,kFAAkF;IAClF,yBACE;;YACG;YACA;;;IAIP,IAAI,QAAQ,CAAA,GAAA,yCAAO;IAEnB,qBACE;kBACE,cAAA,iBAAC,8CAAwB,QAAQ;YAAC,OAAO;sBAAC;YAAI;;8BAC5C,gBAAC,CAAA,GAAA,yCAAS;oBACR,YAAY;oBACZ,YAAY;oBACZ,MAAM;oBACN,eAAe;oBACf,YAAY;oBACZ,oBAAoB;oBACpB,gBAAgB,OAAM,cAAc;8BACnC;;8BAEH,iBAAC,CAAA,GAAA,yCAAS;oBACR,QAAQ,OAAM,MAAM;oBACpB,MAAK;oBACL,YAAY;oBACZ,WAAW;oBACX,MAAM;oBACN,QAAQ;;;;;;;;;;;;;;;;;;;;;;;sBAML;8BAAC;oBAAI;;sCACR,gBAAC,CAAA,GAAA,mBAAW,EAAE,QAAQ;sCACnB,CAAA,oBACC,gBAAC,CAAA,GAAA,mBAAW,EAAE,QAAQ;oCACpB,OAAO;wCACL,GAAG,GAAG;wCACN,KAAK,CAAA,GAAA,gBAAQ,EAAG,KAAa,KAAK;oCACpC;8CACA,cAAA,gBAAC,CAAA,GAAA,yCAAI;wCAAE,oBAAkB;;;;wBAI9B,2BAAa,gBAAC,CAAA,GAAA,yCAAa;4BAAE,YAAY;;wBACzC,kCACC,gBAAC,CAAA,GAAA,yCAAa;4BACZ,IAAI;4BACJ,eAAe;4BACf,MAAK;4BACL,QAAQ,2CAAqB;sCAAC;gCAAM,SAAS;4BAAI;4BACjD,cAAY,gBAAgB,MAAM,CAAC;;sCAGvC,gBAAC,CAAA,GAAA,aAAK;4BACJ,KAAK;4BACL,4DAA4D;4BAC5D,aAAa;4BACb,WAAW;4BACX,OAAO,CAAA,cAAe,CAAA,GAAA,yCAAS,EAAE,WAAW;4BAC5C,WAAW,CAAA,cACT,kCAAY;oCACV,GAAG,WAAW;0CACd;4CACA;gCACF;sCAEF,cAAA,gBAAC,CAAA,GAAA,wCAAU;gCAAE,MAAM;gCAAM,WAAW;;;;;8BAGxC,gBAAC,CAAA,GAAA,yCAAO;oBACN,MAAM;oBACN,YAAY;oBACZ,WAAW;oBACX,aAAa;8BACZ;;8BAEH,gBAAC,CAAA,GAAA,yCAAM;oBACL,SAAS;oBACT,QAAQ;oBACR,WAAW,GAAG,UAAU,CAAC,EAAE,OAAO;oBAClC,YAAY;oBACZ,cACE;wBACE,mBAAmB,YAAY,YAAY,OAAO;oBACpD;oBAEF,SAAQ;oBACR,MAAM;8BAIN,cAAA,gBAAC;wBACC,SAAS;kCAIT,cAAA,gBAAC,CAAA,GAAA,eAAO;4BACN,QAAQ;gCACN;oCAAC,CAAA,GAAA,yCAAY;oCAAG;wCAAC,QAAQ,0CAAc;kDAAC;wCAAI;oCAAE;iCAAE;gCAChD;oCACE,CAAA,GAAA,yCAAa;oCACb;wCACE,aAAa;wCACb,MAAM;wCACN,QAAQ,CAAA,GAAA,yCAAa;oCACvB;iCACD;gCACD;oCACE,CAAA,GAAA,yCAAU;oCACV;wCACE,OAAO;4CACL,aAAa;gDACX,QAAQ,CAAA,GAAA,yCAAU,EAAE;0DAAC;oDAAM,WAAW;oDAAO,YAAY;gDAAK;4CAChE;wCACF;oCACF;iCACD;6BACF;sCACD,cAAA,gBAAC,CAAA,GAAA,kBAAU;gCACT,QAAQ,CAAA,GAAA,iBAAS;gCACjB,eAAe;oCACb,oBAAoB;oCACpB,SAAS;oCACT,wBAAwB;oCACxB,cAAc,yCAAkB,CAAC,KAAK,CAAC,MAAM;gCAC/C;0CACA,cAAA,gBAAC,CAAA,GAAA,cAAM;oCACL,cAAc,OAAM,YAAY;oCAChC,kBAAkB,kBAChB,gBAAC;4CAAK,WAAW,qCAAe;sDAAC;4CAAI;sDAClC,iBAAiB,YACd,gBAAgB,MAAM,CAAC,mBACvB,gBAAgB,MAAM,CAAC;;oCAG/B,OAAO;oCACP,WAAW,0CAAQ;8CAAC;oCAAI;8CACvB;;;;;;;;;AASnB;AAEA,MAAM,4CAAsB,CAAA,GAAA,qBAAa;;aACvB,OAAO;;IAEvB,OACE,UAA+B,EAC/B,aAAkC,EACN;QAC5B,IAAI,WAAW,cAAc,OAAO,CAAC,IAAI,CAAC,OAAO;QACjD,IAAI,YAAY,SAAS,IAAI,KAAK,aAAa;YAC7C,IAAI,QAAQ,IAAI,CAAC,KAAK;YACtB,cAAc,cAAc,CAAC,OAAO;YACpC,OAAO;QACT;QAEA,OAAO;IACT;AACF;AAEO,MAAM,4CAAU,WAAW,GAAG,CAAA,GAAA,0BAAkB,EACrD,qCACA,SAAS,QACP,QAAC,IAAI,EAAkC,EACvC,GAAiC,EACjC,IAAmB;IAEnB,IAAI,YAAY,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uBAAe;IAE1C,IAAI,WAAW,KAAK,OAAO,IAAI,QAAQ,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,OAAO;IAChF,IACE,KAAK,OAAO,IAAI,QAChB,CAAC,YACD,SAAS,IAAI,KAAK,eACjB,SAAS,IAAI,KAAK,YAAY,SAAS,OAAO,IAAI,MAEnD,OAAO;IAGT,qBACE,gBAAC;QAAI,WAAW,uCAAiB;kBAAC;QAAI;kBACpC,cAAA,gBAAC;YAAI,KAAK;YAAK,WAAW;;;AAGhC","sources":["packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["/*\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  ComboBoxStateContext\n} from 'react-aria-components/ComboBox';\nimport {\n  ListBoxSection as AriaListBoxSection,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxLoadMoreItem,\n  ListBoxProps,\n  ListBoxSectionProps,\n  ListStateContext\n} from 'react-aria-components/ListBox';\nimport {PopoverProps as AriaPopoverProps, Placement} from 'react-aria-components/Popover';\nimport {\n  AsyncLoadable,\n  GlobalDOMAttributes,\n  HelpTextProps,\n  LoadingState,\n  SingleSelection,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {BaseCollection, CollectionNode} from 'react-aria/private/collections/BaseCollection';\nimport {baseColor, centerPadding, focusRing, space, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonRenderProps} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {checkmark, description, icon, iconCenterWrapper, label, sectionHeading} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection} from 'react-aria/Collection';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  control,\n  controlBorderRadius,\n  controlFont,\n  controlSize,\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  CSSProperties,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  Ref,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {createFocusableRef} from './useDOMRef';\nimport {createLeafComponent} from 'react-aria/CollectionBuilder';\nimport {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};\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';\nimport {InputContext, InputProps} from 'react-aria-components/Input';\nimport intlMessages from '../intl/*.json';\nimport {ListLayout} from 'react-stately/useVirtualizerState';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {Node} from '@react-types/shared';\nimport {Popover} from './Popover';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {TextFieldRef} from './TextField';\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 ComboboxStyleProps {\n  /**\n   * The size of the Combobox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The prefix to display in the ComboBox. A non-interactive element that appears before the input.\n   */\n  prefix?: ReactNode;\n}\nexport interface ComboBoxProps<T>\n  extends\n    Omit<\n      AriaComboBoxProps<T>,\n      | 'children'\n      | 'style'\n      | 'className'\n      | 'render'\n      | 'defaultFilter'\n      | 'allowsEmptyCollection'\n      | 'selectionMode'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'onSelectionChange'\n      | 'value'\n      | 'defaultValue'\n      | 'onChange'\n      | keyof GlobalDOMAttributes\n    >,\n    Omit<SingleSelection, 'disallowEmptySelection'>,\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  /**\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  /**\n   * The current loading state of the ComboBox. Determines whether or not the progress circle should\n   * be shown.\n   */\n  loadingState?: LoadingState;\n}\n\nexport const ComboBoxContext =\n  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  {\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: ['. checkmark icon label       .', '. .         .    description .'],\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: 'transform'\n  },\n  getAllowedOverrides()\n);\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\n * limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T>(\n  props: ComboBoxProps<T>,\n  ref: Ref<TextFieldRef>\n) {\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={\n        UNSAFE_className +\n        style(field(), getAllowedOverrides())(\n          {\n            isInForm: !!formContext,\n            labelPosition,\n            size\n          },\n          props.styles\n        )\n      }>\n      {({isDisabled, isOpen, isRequired, isInvalid}) => (\n        <ComboboxInner\n          {...props}\n          isDisabled={isDisabled}\n          isOpen={isOpen}\n          isRequired={isRequired}\n          isInvalid={isInvalid}\n          ref={ref}\n        />\n      )}\n    </AriaComboBox>\n  );\n});\n\nexport interface ComboBoxItemProps\n  extends\n    Omit<\n      ListBoxItemProps,\n      | 'children'\n      | 'style'\n      | 'className'\n      | 'render'\n      | 'onClick'\n      | 'onKeyDown'\n      | 'onKeyUp'\n      | keyof GlobalDOMAttributes\n    >,\n    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={\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        return (\n          <>\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: {size: avatarSize[size], styles: avatar}\n                    }\n                  }\n                ],\n                [\n                  TextContext,\n                  {\n                    slots: {\n                      label: {styles: label({size})},\n                      description: {styles: description({...renderProps, size})}\n                    }\n                  }\n                ]\n              ]}>\n              {!isLink && !props.onAction && (\n                <CheckmarkIcon\n                  size={checkmarkIconSize[size]}\n                  className={checkmark({...renderProps, size})}\n                />\n              )}\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 Omit<\n  ListBoxSectionProps<T>,\n  'style' | 'className' | 'render' | keyof GlobalDOMAttributes\n> {}\nexport function ComboBoxSection<T>(props: ComboBoxSectionProps<T>): ReactNode {\n  let {size} = useContext(InternalComboboxContext);\n  return (\n    <>\n      <AriaListBoxSection {...props}>{props.children}</AriaListBoxSection>\n      <Divider size={size} />\n    </>\n  );\n}\n\nconst ComboboxInner = forwardRef(function ComboboxInner(\n  props: ComboBoxProps<any> & {isOpen: boolean},\n  ref: ForwardedRef<TextFieldRef | null>\n) {\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 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  {\n    /* Logic copied from S1 */\n  }\n  let showFieldSpinner = useMemo(\n    () => showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'),\n    [showLoading, isOpen, menuTrigger, loadingState]\n  );\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      />\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          prefix={props.prefix}\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            paddingEnd: 'calc(self(height, self(minHeight)) * 3 / 16 - self(borderEndWidth, 2px))'\n          })({size})}>\n          <InputContext.Consumer>\n            {ctx => (\n              <InputContext.Provider\n                value={{\n                  ...ctx,\n                  ref: mergeRefs((ctx as any)?.ref, inputRef)\n                }}>\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          )}\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 =>\n              inputButton({\n                ...renderProps,\n                size,\n                isOpen\n              })\n            }>\n            <ChevronIcon size={size} 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          offset={menuOffset}\n          placement={`${direction} ${align}` as Placement}\n          shouldFlip={shouldFlip}\n          UNSAFE_style={\n            {\n              '--trigger-width': menuWidth ? menuWidth + 'px' : undefined\n            } as CSSProperties\n          }\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                [\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              <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'\n                        ? stringFormatter.format('table.loading')\n                        : 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(\n    collection: BaseCollection<any>,\n    newCollection: BaseCollection<any>\n  ): 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(\n  SeparatorNode,\n  function Divider(\n    {size}: {size?: 'S' | 'M' | 'L' | 'XL'},\n    ref: ForwardedRef<HTMLDivElement>,\n    node: Node<unknown>\n  ) {\n    let listState = useContext(ListStateContext)!;\n\n    let nextNode = node.nextKey != null && listState.collection.getItem(node.nextKey);\n    if (\n      node.prevKey == null ||\n      !nextNode ||\n      nextNode.type === 'separator' ||\n      (nextNode.type === 'loader' && nextNode.nextKey == null)\n    ) {\n      return null;\n    }\n\n    return (\n      <div className={separatorWrapper({size})}>\n        <div ref={ref} className={dividerStyle} />\n      </div>\n    );\n  }\n);\n"],"names":[],"version":3,"file":"ComboBox.mjs.map"}

package/dist/private/ContextualHelp.cjs

@@ -50,8 +50,8 @@ $parcel$export(module.exports, "ContextualHelp", () => $bab829476f85a155$export$
 
 
 
-const $bab829476f85a155$var$wrappingDiv = " NOBje7c131 ZOBje7c131 Th131 Qh131 Sh131 Rh131 _oa131 Fb131";
-const $bab829476f85a155$var$headingStyles = " uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-e131 vx131 xe131 _xa131 xX0cczbd131 _xX0cczba131 xfe131 _xfa131 xfX0cczbd131 _xfX0cczba131 _Fd131 _FnuYUweb131 po131 Jy131 Gv131 Iy131 Hy131";
+const $bab829476f85a155$var$wrappingDiv = " NOBje7c151 ZOBje7c151 Th151 Qh151 Sh151 Rh151 _oa151 Fb151";
+const $bab829476f85a155$var$headingStyles = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-e151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 po151 Jy151 Gv151 Iy151 Hy151";
 function $bab829476f85a155$export$218201d297fb4e0d(props) {
     let { children: children, ...popoverProps } = props;
     let titleId = (0, $44GE8$reactariauseId.useId)();
@@ -63,7 +63,7 @@ function $bab829476f85a155$export$218201d297fb4e0d(props) {
         children: /*#__PURE__*/ (0, $44GE8$reactjsxruntime.jsx)("div", {
             className: $bab829476f85a155$var$wrappingDiv,
             children: /*#__PURE__*/ (0, $44GE8$reactjsxruntime.jsx)("div", {
-                className: (0, $308b180f49d82d28$exports.mergeStyles)((0, $0f4636c7093b9233$exports.dialogInner), " od131 nd131 kd131 jd131 Jnqb3Ob131 Gnqb3Ob131 Inqb3Ob131 Hnqb3Ob131 TjCFGYc131 Qh131 Sh131 Rh131 -T_-Th131"),
+                className: (0, $308b180f49d82d28$exports.mergeStyles)((0, $0f4636c7093b9233$exports.dialogInner), " od151 nd151 kd151 jd151 Jnqb3Ob151 Gnqb3Ob151 Inqb3Ob151 Hnqb3Ob151 TjCFGYc151 Qh151 Sh151 Rh151 -T_-Th151"),
                 children: /*#__PURE__*/ (0, $44GE8$reactjsxruntime.jsx)((0, $44GE8$reactariacomponentsslots.Provider), {
                     values: [
                         [
@@ -101,13 +101,13 @@ function $bab829476f85a155$export$218201d297fb4e0d(props) {
                         [
                             (0, $6367bc87eb7d24ad$exports.ContentContext),
                             {
-                                styles: " uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-c131 vx131 xb131 _xa131 _Fb131 _FnuYUwec131 pt131"
+                                styles: " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pt151"
                             }
                         ],
                         [
                             (0, $6367bc87eb7d24ad$exports.FooterContext),
                             {
-                                styles: " uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-c131 vx131 xb131 _xa131 _Fb131 _FnuYUwec131 pt131 JC131"
+                                styles: " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pt151 JC151"
                             }
                         ]
                     ],

package/dist/private/ContextualHelp.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM;AAQN,MAAM;AAUC,SAAS,0CAAsB,KAAiC;IACrE,IAAI,YAAC,QAAQ,EAAE,GAAG,cAAa,GAAG;IAClC,IAAI,UAAU,CAAA,GAAA,2BAAI;IAElB,qBACE,gCAAC,CAAA,GAAA,iCAAM;QAAE,SAAQ;QAAO,SAAS;QAAC,mBAAiB;QAAU,GAAG,YAAY;kBAC1E,cAAA,gCAAC;YAAI,WAAW;sBACd,cAAA,gCAAC;gBACC,WAAW,CAAA,GAAA,qCAAU,EACnB,CAAA,GAAA,qCAAU;0BAGZ,cAAA,gCAAC,CAAA,GAAA,wCAAO;oBACN,QAAQ;wBACN;4BACE,CAAA,GAAA,0CAAU;4BACV;gCACE,OAAO;oCACL,CAAC,CAAA,GAAA,4CAAW,EAAE,EAAE,CAAC;gCACnB;4BACF;yBACD;wBACD,6CAA6C;wBAC7C;4BAAC,CAAA,GAAA,qCAAkB;4BAAG;yBAAK;wBAC3B;4BACE,CAAA,GAAA,wCAAa;4BACb;gCACE,QAAQ;gCACR,OAAO;oCACL,oFAAoF;oCACpF,iEAAiE;oCACjE,mEAAmE;oCACnE,CAAC,CAAA,GAAA,4CAAW,EAAE,EAAE;wCAAC,QAAQ;oCAAa;oCACtC,OAAO;wCAAC,IAAI;wCAAS,QAAQ;wCAAe,OAAO;oCAAC;gCACtD;4BACF;yBACD;wBACD;4BACE,CAAA,GAAA,wCAAa;4BACb;gCACE,MAAM;4BAGR;yBACD;wBACD;4BACE,CAAA,GAAA,uCAAY;4BACZ;gCACE,MAAM;4BAIR;yBACD;qBACF;8BACA;;;;;AAMb;AAqCO,MAAM,0DACX,CAAA,GAAA,0BAAY,EACV;AAOG,MAAM,0DAAiB,CAAA,GAAA,uBAAS,EAAE,SAAS,eAChD,KAA0B,EAC1B,GAAoC;IAEpC,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,oBACX,mBAAmB,SACnB,OAAO,mBACP,WAAW,UACX,MAAM,gBACN,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,+CAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,SAAS;IAC9D,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAC/C,UAAU,CAAC,aAAa,GAAG,MAAM,QACjC;IAEJ,IAAI,cAAc,CAAA,GAAA,6CAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iCAAC,CAAA,GAAA,uCAAY;QAAE,QAAQ;QAAQ,aAAa;QAAa,cAAc;;0BACrE,gCAAC,CAAA,GAAA,sCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,qCAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gCAAC,CAAA,GAAA,iCAAO,uBAAO,gCAAC,CAAA,GAAA,iCAAO;;0BAE/C,gCAAC;gBACC,WAAW;gBACX,YAAY;gBACZ,kBAAkB;gBAClB,QAAQ;gBACR,aAAa;0BACZ;;;;AAIT","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {\n  ContentContext,\n  FooterContext,\n  HeadingContext,\n  TextContext as SpectrumTextContext\n} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\n// @ts-ignore\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {TextContext} from 'react-aria-components/Text';\nimport {useId} from 'react-aria/useId';\nimport {useLabels} from 'react-aria/private/utils/useLabels';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpPopoverProps extends PopoverDialogProps {\n  /**\n   * The children of the contextual help popover. Supports Heading, Content, and Footer elements.\n   */\n  children: ReactNode;\n}\n\nconst wrappingDiv = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: 'border-box',\n  height: 'full'\n});\n\nconst headingStyles = style({\n  font: 'heading-xs',\n  margin: 0,\n  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n});\n\n// TODO: docs to come after release, for now this is just mentioned in unavaiable menu docs\n/**\n * A popover with contextual help styling that supports Heading, Content, and Footer.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps) {\n  let {children, ...popoverProps} = props;\n  let titleId = useId();\n\n  return (\n    <Popover padding=\"none\" hideArrow aria-labelledby={titleId} {...popoverProps}>\n      <div className={wrappingDiv}>\n        <div\n          className={mergeStyles(\n            dialogInner,\n            style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24})\n          )}>\n          <Provider\n            values={[\n              [\n                TextContext,\n                {\n                  slots: {\n                    [DEFAULT_SLOT]: {}\n                  }\n                }\n              ],\n              // Make sure to clear context from above Menu\n              [SpectrumTextContext, null],\n              [\n                HeadingContext,\n                {\n                  styles: headingStyles,\n                  slots: {\n                    // needed so combobox/picker does not need to provide slot=\"title\" to their provided\n                    // ContextualHelp (they get the aria-labelled by from the button)\n                    // otherwise, use the heading if available aka unavaiable menu item\n                    [DEFAULT_SLOT]: {styles: headingStyles},\n                    title: {id: titleId, styles: headingStyles, level: 2}\n                  }\n                }\n              ],\n              [\n                ContentContext,\n                {\n                  styles: style({\n                    font: 'body-sm'\n                  })\n                }\n              ],\n              [\n                FooterContext,\n                {\n                  styles: style({\n                    font: 'body-sm',\n                    marginTop: 16\n                  })\n                }\n              ]\n            ]}>\n            {children}\n          </Provider>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport interface ContextualHelpStyleProps {\n  /**\n   * Indicates whether contents are informative or provides helpful guidance.\n   *\n   * @default 'help'\n   */\n  variant?: 'info' | 'help';\n}\nexport interface ContextualHelpProps\n  extends\n    Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n    Pick<\n      PopoverDialogProps,\n      'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'\n    >,\n    ContextualHelpStyleProps,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /**\n   * The placement of the popover with respect to the action button.\n   *\n   * @default 'bottom start'\n   */\n  placement?: Placement;\n  /** Contents of the Contextual Help popover. */\n  children: ReactNode;\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S';\n}\n\nexport const ContextualHelpContext =\n  createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a\n * total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(\n  props: ContextualHelpProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    containerPadding = 8,\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label']\n    ? labelProps['aria-label'] + ' ' + label\n    : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger isOpen={isOpen} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <ContextualHelpPopover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        containerPadding={containerPadding}\n        offset={8}\n        crossOffset={crossOffset}>\n        {children}\n      </ContextualHelpPopover>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM;AAQN,MAAM;AAUC,SAAS,0CAAsB,KAAiC;IACrE,IAAI,YAAC,QAAQ,EAAE,GAAG,cAAa,GAAG;IAClC,IAAI,UAAU,CAAA,GAAA,2BAAI;IAElB,qBACE,gCAAC,CAAA,GAAA,iCAAM;QAAE,SAAQ;QAAO,SAAS;QAAC,mBAAiB;QAAU,GAAG,YAAY;kBAC1E,cAAA,gCAAC;YAAI,WAAW;sBACd,cAAA,gCAAC;gBACC,WAAW,CAAA,GAAA,qCAAU,EACnB,CAAA,GAAA,qCAAU;0BAGZ,cAAA,gCAAC,CAAA,GAAA,wCAAO;oBACN,QAAQ;wBACN;4BACE,CAAA,GAAA,0CAAU;4BACV;gCACE,OAAO;oCACL,CAAC,CAAA,GAAA,4CAAW,EAAE,EAAE,CAAC;gCACnB;4BACF;yBACD;wBACD,6CAA6C;wBAC7C;4BAAC,CAAA,GAAA,qCAAkB;4BAAG;yBAAK;wBAC3B;4BACE,CAAA,GAAA,wCAAa;4BACb;gCACE,QAAQ;gCACR,OAAO;oCACL,oFAAoF;oCACpF,iEAAiE;oCACjE,mEAAmE;oCACnE,CAAC,CAAA,GAAA,4CAAW,EAAE,EAAE;wCAAC,QAAQ;oCAAa;oCACtC,OAAO;wCAAC,IAAI;wCAAS,QAAQ;wCAAe,OAAO;oCAAC;gCACtD;4BACF;yBACD;wBACD;4BACE,CAAA,GAAA,wCAAa;4BACb;gCACE,MAAM;4BAGR;yBACD;wBACD;4BACE,CAAA,GAAA,uCAAY;4BACZ;gCACE,MAAM;4BAIR;yBACD;qBACF;8BACA;;;;;AAMb;AAqCO,MAAM,0DACX,CAAA,GAAA,0BAAY,EACV;AAOG,MAAM,0DAAiB,CAAA,GAAA,uBAAS,EAAE,SAAS,eAChD,KAA0B,EAC1B,GAAoC;IAEpC,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,eACR,WAAW,oBACX,mBAAmB,SACnB,OAAO,mBACP,WAAW,UACX,MAAM,gBACN,YAAY,aACZ,YAAY,4BACZ,UAAU,oBACV,gBAAgB,gBAChB,YAAY,UACZ,MAAM,WACN,UAAU,QACX,GAAG;IAEJ,4EAA4E;IAC5E,2EAA2E;IAC3E,8BAA8B;IAC9B,IAAI,aAAa,CAAA,GAAA,+CAAQ,EAAE;IAC3B,IAAI,QAAQ,gBAAgB,MAAM,CAAC,CAAC,eAAe,EAAE,SAAS;IAC9D,UAAU,CAAC,aAAa,GAAG,UAAU,CAAC,aAAa,GAC/C,UAAU,CAAC,aAAa,GAAG,MAAM,QACjC;IAEJ,IAAI,cAAc,CAAA,GAAA,6CAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IAExD,qBACE,iCAAC,CAAA,GAAA,uCAAY;QAAE,QAAQ;QAAQ,aAAa;QAAa,cAAc;;0BACrE,gCAAC,CAAA,GAAA,sCAAW;gBACV,MAAM;gBACN,KAAK;gBACL,MAAM;gBACL,GAAG,CAAA,GAAA,qCAAS,EAAE,aAAa,WAAW;gBACvC,cAAc;gBACd,kBAAkB;gBAClB,QAAQ;gBACR,OAAO;0BACN,YAAY,uBAAS,gCAAC,CAAA,GAAA,iCAAO,uBAAO,gCAAC,CAAA,GAAA,iCAAO;;0BAE/C,gCAAC;gBACC,WAAW;gBACX,YAAY;gBACZ,kBAAkB;gBAClB,QAAQ;gBACR,aAAa;0BACZ;;;;AAIT","sources":["packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {\n  ContentContext,\n  FooterContext,\n  HeadingContext,\n  TextContext as SpectrumTextContext\n} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {TextContext} from 'react-aria-components/Text';\nimport {useId} from 'react-aria/useId';\nimport {useLabels} from 'react-aria/private/utils/useLabels';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpPopoverProps extends Omit<PopoverDialogProps, 'isNonModal'> {\n  /**\n   * The children of the contextual help popover. Supports Heading, Content, and Footer elements.\n   */\n  children: ReactNode;\n}\n\nconst wrappingDiv = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: 'border-box',\n  height: 'full'\n});\n\nconst headingStyles = style({\n  font: 'heading-xs',\n  margin: 0,\n  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n});\n\n// TODO: docs to come after release, for now this is just mentioned in unavaiable menu docs\n/**\n * A popover with contextual help styling that supports Heading, Content, and Footer.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps) {\n  let {children, ...popoverProps} = props;\n  let titleId = useId();\n\n  return (\n    <Popover padding=\"none\" hideArrow aria-labelledby={titleId} {...popoverProps}>\n      <div className={wrappingDiv}>\n        <div\n          className={mergeStyles(\n            dialogInner,\n            style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24})\n          )}>\n          <Provider\n            values={[\n              [\n                TextContext,\n                {\n                  slots: {\n                    [DEFAULT_SLOT]: {}\n                  }\n                }\n              ],\n              // Make sure to clear context from above Menu\n              [SpectrumTextContext, null],\n              [\n                HeadingContext,\n                {\n                  styles: headingStyles,\n                  slots: {\n                    // needed so combobox/picker does not need to provide slot=\"title\" to their provided\n                    // ContextualHelp (they get the aria-labelled by from the button)\n                    // otherwise, use the heading if available aka unavaiable menu item\n                    [DEFAULT_SLOT]: {styles: headingStyles},\n                    title: {id: titleId, styles: headingStyles, level: 2}\n                  }\n                }\n              ],\n              [\n                ContentContext,\n                {\n                  styles: style({\n                    font: 'body-sm'\n                  })\n                }\n              ],\n              [\n                FooterContext,\n                {\n                  styles: style({\n                    font: 'body-sm',\n                    marginTop: 16\n                  })\n                }\n              ]\n            ]}>\n            {children}\n          </Provider>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport interface ContextualHelpStyleProps {\n  /**\n   * Indicates whether contents are informative or provides helpful guidance.\n   *\n   * @default 'help'\n   */\n  variant?: 'info' | 'help';\n}\nexport interface ContextualHelpProps\n  extends\n    Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n    Pick<\n      PopoverDialogProps,\n      'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'\n    >,\n    ContextualHelpStyleProps,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /**\n   * The placement of the popover with respect to the action button.\n   *\n   * @default 'bottom start'\n   */\n  placement?: Placement;\n  /** Contents of the Contextual Help popover. */\n  children: ReactNode;\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S';\n}\n\nexport const ContextualHelpContext =\n  createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a\n * total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(\n  props: ContextualHelpProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    containerPadding = 8,\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label']\n    ? labelProps['aria-label'] + ' ' + label\n    : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger isOpen={isOpen} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <ContextualHelpPopover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        containerPadding={containerPadding}\n        offset={8}\n        crossOffset={crossOffset}>\n        {children}\n      </ContextualHelpPopover>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.cjs.map"}

package/dist/private/ContextualHelp.css

@@ -1,217 +1,217 @@
 @layer _.a {
-  .NOBje7c131 {
+  .NOBje7c151 {
     min-width: calc(16.75rem * var(--s2-scale));
   }
 
-  .ZOBje7c131 {
+  .ZOBje7c151 {
     width: calc(16.75rem * var(--s2-scale));
   }
 
-  .Th131 {
+  .Th151 {
     padding-top: 24px;
   }
 
-  ._oa131 {
+  ._oa151 {
     box-sizing: border-box;
   }
 
-  .Fb131 {
+  .Fb151 {
     height: 100%;
   }
 
-  .-_6BNtrc-e131 {
+  .-_6BNtrc-e151 {
     --fs: pow(1.125, 2);
   }
 
-  .xe131 {
+  .xe151 {
     font-weight: 800;
   }
 
-  ._Fd131 {
+  ._Fd151 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .po131 {
+  .po151 {
     color: light-dark(#131313, #f2f2f2);
   }
 
-  .Jy131 {
+  .Jy151 {
     margin-top: 0;
   }
 
-  .Gv131 {
+  .Gv151 {
     margin-bottom: .5rem;
   }
 
-  .Iy131 {
+  .Iy151 {
     margin-inline-start: 0;
   }
 
-  .Hy131 {
+  .Hy151 {
     margin-inline-end: 0;
   }
 
-  .od131 {
+  .od151 {
     border-start-start-radius: 0;
   }
 
-  .nd131 {
+  .nd151 {
     border-start-end-radius: 0;
   }
 
-  .kd131 {
+  .kd151 {
     border-end-start-radius: 0;
   }
 
-  .jd131 {
+  .jd151 {
     border-end-end-radius: 0;
   }
 
-  .Jnqb3Ob131 {
+  .Jnqb3Ob151 {
     margin-top: calc(var(--T) * -1);
   }
 
-  .Gnqb3Ob131 {
+  .Gnqb3Ob151 {
     margin-bottom: calc(var(--T) * -1);
   }
 
-  .Inqb3Ob131 {
+  .Inqb3Ob151 {
     margin-inline-start: calc(var(--T) * -1);
   }
 
-  .Hnqb3Ob131 {
+  .Hnqb3Ob151 {
     margin-inline-end: calc(var(--T) * -1);
   }
 
-  .TjCFGYc131 {
+  .TjCFGYc151 {
     padding-top: var(--T);
   }
 
-  .Qh131 {
+  .Qh151 {
     padding-bottom: 24px;
   }
 
-  .Sh131 {
+  .Sh151 {
     padding-inline-start: 24px;
   }
 
-  .Rh131 {
+  .Rh151 {
     padding-inline-end: 24px;
   }
 
-  .-T_-Th131 {
+  .-T_-Th151 {
     --T: 24px;
   }
 
-  .uk131 {
+  .uk151 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-c131 {
+  .-_6BNtrc-c151 {
     --fs: pow(1.125, 0);
   }
 
-  .vx131 {
+  .vx151 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb131 {
+  .xb151 {
     font-weight: 400;
   }
 
-  ._xa131 {
+  ._xa151 {
     font-synthesis-weight: none;
   }
 
-  ._Fb131 {
+  ._Fb151 {
     line-height: 1.5;
   }
 
-  .pt131 {
+  .pt151 {
     color: light-dark(#292929, #dbdbdb);
   }
 
-  .JC131 {
+  .JC151 {
     margin-top: 1rem;
   }
 }
 
 @layer _.b {
-  .xX0cczbd131:is(:lang(ja), :lang(ko), :lang(zh)) {
+  .xX0cczbd151:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-weight: 700;
   }
 
-  ._xX0cczba131:is(:lang(ja), :lang(ko), :lang(zh)) {
+  ._xX0cczba151:is(:lang(ja), :lang(ko), :lang(zh)) {
     font-synthesis-weight: none;
   }
 
-  ._FnuYUweb131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb151:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 
-  .ucJ9TBTb131:lang(ar) {
+  .ucJ9TBTb151:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUwec131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUwec151:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.7;
   }
 }
 
 @layer _.c {
-  .xfe131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfe151:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 800;
   }
 
-  ._xfa131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfa151:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .ud3Euai131:lang(he) {
+  .ud3Euai151:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .xfX0cczbd131:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  .xfX0cczbd151:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-weight: 700;
   }
 
-  ._xfX0cczba131:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._xfX0cczba151:is(:lang(ja), :lang(ko), :lang(zh)):is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     font-synthesis-weight: none;
   }
 
-  .uea131:lang(ja) {
+  .uea151:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb131:lang(ko) {
+  .ugb151:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd131:lang(zh) {
+  .uhd151:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje131:lang(zh-hant) {
+  .uje151:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl131:lang(zh-HK) {
+  .u2NhKxcl151:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic131:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic151:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }

package/dist/private/ContextualHelp.css.map

@@ -1 +1 @@
-{"mappings":"ACoCoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsCc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA1DJ;EAAA;;;;EAAA;;;;EAAA;;;;EA0DI;;;;EAAA;;;;;AA1DJ;EAAA;;;;EAAA;;;;EAkDI;;;;;AAlDJ;EAAA;;;;EAAA;;;;EAkDI;;;;;AAlDJ;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["019fb1fcc3c1598d","packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["@import \"3578337ca657fa78\";\n@import \"a023844b8de14349\";\n@import \"3be9de50ea21a4ea\";\n@import \"5266771b1d67e2fb\";\n@import \"ccaa61f08a335ea7\";\n","import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {\n  ContentContext,\n  FooterContext,\n  HeadingContext,\n  TextContext as SpectrumTextContext\n} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\n// @ts-ignore\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {TextContext} from 'react-aria-components/Text';\nimport {useId} from 'react-aria/useId';\nimport {useLabels} from 'react-aria/private/utils/useLabels';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpPopoverProps extends PopoverDialogProps {\n  /**\n   * The children of the contextual help popover. Supports Heading, Content, and Footer elements.\n   */\n  children: ReactNode;\n}\n\nconst wrappingDiv = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: 'border-box',\n  height: 'full'\n});\n\nconst headingStyles = style({\n  font: 'heading-xs',\n  margin: 0,\n  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n});\n\n// TODO: docs to come after release, for now this is just mentioned in unavaiable menu docs\n/**\n * A popover with contextual help styling that supports Heading, Content, and Footer.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps) {\n  let {children, ...popoverProps} = props;\n  let titleId = useId();\n\n  return (\n    <Popover padding=\"none\" hideArrow aria-labelledby={titleId} {...popoverProps}>\n      <div className={wrappingDiv}>\n        <div\n          className={mergeStyles(\n            dialogInner,\n            style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24})\n          )}>\n          <Provider\n            values={[\n              [\n                TextContext,\n                {\n                  slots: {\n                    [DEFAULT_SLOT]: {}\n                  }\n                }\n              ],\n              // Make sure to clear context from above Menu\n              [SpectrumTextContext, null],\n              [\n                HeadingContext,\n                {\n                  styles: headingStyles,\n                  slots: {\n                    // needed so combobox/picker does not need to provide slot=\"title\" to their provided\n                    // ContextualHelp (they get the aria-labelled by from the button)\n                    // otherwise, use the heading if available aka unavaiable menu item\n                    [DEFAULT_SLOT]: {styles: headingStyles},\n                    title: {id: titleId, styles: headingStyles, level: 2}\n                  }\n                }\n              ],\n              [\n                ContentContext,\n                {\n                  styles: style({\n                    font: 'body-sm'\n                  })\n                }\n              ],\n              [\n                FooterContext,\n                {\n                  styles: style({\n                    font: 'body-sm',\n                    marginTop: 16\n                  })\n                }\n              ]\n            ]}>\n            {children}\n          </Provider>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport interface ContextualHelpStyleProps {\n  /**\n   * Indicates whether contents are informative or provides helpful guidance.\n   *\n   * @default 'help'\n   */\n  variant?: 'info' | 'help';\n}\nexport interface ContextualHelpProps\n  extends\n    Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n    Pick<\n      PopoverDialogProps,\n      'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'\n    >,\n    ContextualHelpStyleProps,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /**\n   * The placement of the popover with respect to the action button.\n   *\n   * @default 'bottom start'\n   */\n  placement?: Placement;\n  /** Contents of the Contextual Help popover. */\n  children: ReactNode;\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S';\n}\n\nexport const ContextualHelpContext =\n  createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a\n * total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(\n  props: ContextualHelpProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    containerPadding = 8,\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label']\n    ? labelProps['aria-label'] + ' ' + label\n    : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger isOpen={isOpen} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <ContextualHelpPopover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        containerPadding={containerPadding}\n        offset={8}\n        crossOffset={crossOffset}>\n        {children}\n      </ContextualHelpPopover>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}
+{"mappings":"ACmCoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsCc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA1DJ;EAAA;;;;EAAA;;;;EAAA;;;;EA0DI;;;;EAAA;;;;;AA1DJ;EAAA;;;;EAAA;;;;EAkDI;;;;;AAlDJ;EAAA;;;;EAAA;;;;EAkDI;;;;;AAlDJ;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["019fb1fcc3c1598d","packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["@import \"3578337ca657fa78\";\n@import \"a023844b8de14349\";\n@import \"3be9de50ea21a4ea\";\n@import \"5266771b1d67e2fb\";\n@import \"ccaa61f08a335ea7\";\n","import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {\n  ContentContext,\n  FooterContext,\n  HeadingContext,\n  TextContext as SpectrumTextContext\n} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeStyles} from '../style/runtime';\nimport {Placement} from 'react-aria-components/Popover';\nimport {Popover, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with {type: 'macro'};\nimport {TextContext} from 'react-aria-components/Text';\nimport {useId} from 'react-aria/useId';\nimport {useLabels} from 'react-aria/private/utils/useLabels';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpPopoverProps extends Omit<PopoverDialogProps, 'isNonModal'> {\n  /**\n   * The children of the contextual help popover. Supports Heading, Content, and Footer elements.\n   */\n  children: ReactNode;\n}\n\nconst wrappingDiv = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: 'border-box',\n  height: 'full'\n});\n\nconst headingStyles = style({\n  font: 'heading-xs',\n  margin: 0,\n  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n});\n\n// TODO: docs to come after release, for now this is just mentioned in unavaiable menu docs\n/**\n * A popover with contextual help styling that supports Heading, Content, and Footer.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps) {\n  let {children, ...popoverProps} = props;\n  let titleId = useId();\n\n  return (\n    <Popover padding=\"none\" hideArrow aria-labelledby={titleId} {...popoverProps}>\n      <div className={wrappingDiv}>\n        <div\n          className={mergeStyles(\n            dialogInner,\n            style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24})\n          )}>\n          <Provider\n            values={[\n              [\n                TextContext,\n                {\n                  slots: {\n                    [DEFAULT_SLOT]: {}\n                  }\n                }\n              ],\n              // Make sure to clear context from above Menu\n              [SpectrumTextContext, null],\n              [\n                HeadingContext,\n                {\n                  styles: headingStyles,\n                  slots: {\n                    // needed so combobox/picker does not need to provide slot=\"title\" to their provided\n                    // ContextualHelp (they get the aria-labelled by from the button)\n                    // otherwise, use the heading if available aka unavaiable menu item\n                    [DEFAULT_SLOT]: {styles: headingStyles},\n                    title: {id: titleId, styles: headingStyles, level: 2}\n                  }\n                }\n              ],\n              [\n                ContentContext,\n                {\n                  styles: style({\n                    font: 'body-sm'\n                  })\n                }\n              ],\n              [\n                FooterContext,\n                {\n                  styles: style({\n                    font: 'body-sm',\n                    marginTop: 16\n                  })\n                }\n              ]\n            ]}>\n            {children}\n          </Provider>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport interface ContextualHelpStyleProps {\n  /**\n   * Indicates whether contents are informative or provides helpful guidance.\n   *\n   * @default 'help'\n   */\n  variant?: 'info' | 'help';\n}\nexport interface ContextualHelpProps\n  extends\n    Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n    Pick<\n      PopoverDialogProps,\n      'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'\n    >,\n    ContextualHelpStyleProps,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /**\n   * The placement of the popover with respect to the action button.\n   *\n   * @default 'bottom start'\n   */\n  placement?: Placement;\n  /** Contents of the Contextual Help popover. */\n  children: ReactNode;\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'XS'\n   */\n  size?: 'XS' | 'S';\n}\n\nexport const ContextualHelpContext =\n  createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(\n    null\n  );\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a\n * total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(\n  props: ContextualHelpProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n  let {\n    children,\n    defaultOpen,\n    containerPadding = 8,\n    size = 'XS',\n    crossOffset,\n    isOpen,\n    onOpenChange,\n    placement = 'bottom start',\n    shouldFlip,\n    UNSAFE_className,\n    UNSAFE_style,\n    styles,\n    variant = 'help'\n  } = props;\n\n  // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n  // manually set the aria-label after useLabels() to keep the order of label\n  // then ContextualHelp variant\n  let labelProps = useLabels(props);\n  let label = stringFormatter.format(`contextualhelp.${variant}`);\n  labelProps['aria-label'] = labelProps['aria-label']\n    ? labelProps['aria-label'] + ' ' + label\n    : label;\n\n  let buttonProps = filterDOMProps(props, {labelable: true});\n\n  return (\n    <DialogTrigger isOpen={isOpen} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <ActionButton\n        slot={null}\n        ref={ref}\n        size={size}\n        {...mergeProps(buttonProps, labelProps)}\n        UNSAFE_style={UNSAFE_style}\n        UNSAFE_className={UNSAFE_className}\n        styles={styles}\n        isQuiet>\n        {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n      </ActionButton>\n      <ContextualHelpPopover\n        placement={placement}\n        shouldFlip={shouldFlip}\n        containerPadding={containerPadding}\n        offset={8}\n        crossOffset={crossOffset}>\n        {children}\n      </ContextualHelpPopover>\n    </DialogTrigger>\n  );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}

package/dist/private/ContextualHelp.mjs

@@ -42,8 +42,8 @@ function $parcel$interopDefault(a) {
 
 
 
-const $8e176595bc49ca3f$var$wrappingDiv = " NOBje7c131 ZOBje7c131 Th131 Qh131 Sh131 Rh131 _oa131 Fb131";
-const $8e176595bc49ca3f$var$headingStyles = " uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-e131 vx131 xe131 _xa131 xX0cczbd131 _xX0cczba131 xfe131 _xfa131 xfX0cczbd131 _xfX0cczba131 _Fd131 _FnuYUweb131 po131 Jy131 Gv131 Iy131 Hy131";
+const $8e176595bc49ca3f$var$wrappingDiv = " NOBje7c151 ZOBje7c151 Th151 Qh151 Sh151 Rh151 _oa151 Fb151";
+const $8e176595bc49ca3f$var$headingStyles = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-e151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 po151 Jy151 Gv151 Iy151 Hy151";
 function $8e176595bc49ca3f$export$218201d297fb4e0d(props) {
     let { children: children, ...popoverProps } = props;
     let titleId = (0, $bcd4U$useId)();
@@ -55,7 +55,7 @@ function $8e176595bc49ca3f$export$218201d297fb4e0d(props) {
         children: /*#__PURE__*/ (0, $bcd4U$jsx)("div", {
             className: $8e176595bc49ca3f$var$wrappingDiv,
             children: /*#__PURE__*/ (0, $bcd4U$jsx)("div", {
-                className: (0, $feb886035e0d4633$export$e618dc39ac9ad607)((0, $9bbc115952dac5a6$export$6af31f836f9aa6f2), " od131 nd131 kd131 jd131 Jnqb3Ob131 Gnqb3Ob131 Inqb3Ob131 Hnqb3Ob131 TjCFGYc131 Qh131 Sh131 Rh131 -T_-Th131"),
+                className: (0, $feb886035e0d4633$export$e618dc39ac9ad607)((0, $9bbc115952dac5a6$export$6af31f836f9aa6f2), " od151 nd151 kd151 jd151 Jnqb3Ob151 Gnqb3Ob151 Inqb3Ob151 Hnqb3Ob151 TjCFGYc151 Qh151 Sh151 Rh151 -T_-Th151"),
                 children: /*#__PURE__*/ (0, $bcd4U$jsx)((0, $bcd4U$Provider), {
                     values: [
                         [
@@ -93,13 +93,13 @@ function $8e176595bc49ca3f$export$218201d297fb4e0d(props) {
                         [
                             (0, $8e847109a6ab556d$export$1cbdd774077931b4),
                             {
-                                styles: " uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-c131 vx131 xb131 _xa131 _Fb131 _FnuYUwec131 pt131"
+                                styles: " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pt151"
                             }
                         ],
                         [
                             (0, $8e847109a6ab556d$export$5630640b68817ed6),
                             {
-                                styles: " uk131 ucJ9TBTb131 ud3Euai131 uea131 ugb131 uhd131 uje131 u2NhKxcl131 uic131 -_6BNtrc-c131 vx131 xb131 _xa131 _Fb131 _FnuYUwec131 pt131 JC131"
+                                styles: " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pt151 JC151"
                             }
                         ]
                     ],