@react-spectrum/s2/dist/ComboBox.mjs.map

Spectrum 2 UI components in React

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