@sanity/ui 3.0.0-static.4 → 3.0.0-static.40

package/src/core/components/autocomplete/autocomplete.tsx

@@ -0,0 +1,690 @@
+import {ChevronDownIcon} from '@sanity/icons'
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {Radius, Space} from '@sanity/ui/theme'
+import {
+  type ChangeEvent,
+  cloneElement,
+  type ElementType,
+  type FocusEvent,
+  type ForwardedRef,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react'
+
+import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
+import {_raf} from '../../helpers/animation'
+import {_hasFocus, focusFirstDescendant} from '../../helpers/focus'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import {Box, type BoxOwnProps} from '../../primitives/box/box'
+import {Button} from '../../primitives/button/button'
+import {Popover, type PopoverProps} from '../../primitives/popover/popover'
+import {Selectable} from '../../primitives/selectable/selectable'
+import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
+import {Stack} from '../../primitives/stack/stack'
+import {Text} from '../../primitives/text/text'
+import {TextInput, type TextInputOwnProps} from '../../primitives/textInput/textInput'
+import type {ComponentType, Props} from '../../types'
+import {AutocompleteOption} from './autocompleteOption'
+import {autocompleteReducer} from './autocompleteReducer'
+import {
+  AUTOCOMPLETE_LISTBOX_IGNORE_KEYS,
+  AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS,
+  AUTOCOMPLETE_POPOVER_PLACEMENT,
+} from './constants'
+import type {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'
+
+/** @public */
+export const DEFAULT_AUTOCOMPLETE_ELEMENT = 'input'
+
+/** @public */
+export type AutocompleteOwnProps<O extends BaseAutocompleteOption = BaseAutocompleteOption> =
+  TextInputOwnProps & {
+    border?: boolean
+    customValidity?: string
+    filterOption?: (query: string, option: O) => boolean
+    icon?: ElementType | ReactNode
+    /** @beta */
+    listBox?: BoxOwnProps
+    loading?: boolean
+    onChange?: (value: string) => void
+    onQueryChange?: (query: string | null) => void
+    onSelect?: (value: string) => void
+    /** @beta */
+    openButton?: boolean | AutocompleteOpenButtonProps
+    /** @beta */
+    openOnFocus?: boolean
+    /** The options to render. */
+    options?: O[]
+    padding?: ResponsiveProp<Space>
+    popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
+    prefix?: ReactNode
+    radius?: Radius | Radius[]
+    /** @beta */
+    relatedElements?: HTMLElement[]
+    /** The callback function for rendering each option. */
+    renderOption?: (option: O) => React.JSX.Element
+    /** @beta */
+    renderPopover?: (
+      props: {
+        content: React.JSX.Element | null
+        hidden: boolean
+        inputElement: HTMLInputElement | null
+        onMouseEnter: () => void
+        onMouseLeave: () => void
+      },
+      ref: ForwardedRef<HTMLDivElement>,
+    ) => ReactNode
+    renderValue?: (value: string, option?: O) => string
+    suffix?: ReactNode
+    value?: string
+  }
+
+/** @public */
+export type AutocompleteElementType = 'input' | ComponentType
+
+/** @public */
+export type AutocompleteProps<
+  E extends AutocompleteElementType = AutocompleteElementType,
+  O extends BaseAutocompleteOption = BaseAutocompleteOption,
+> = Props<AutocompleteOwnProps<O>, E>
+
+const DEFAULT_RENDER_VALUE = (value: string, option?: BaseAutocompleteOption) =>
+  option ? option.value : value
+
+const DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>
+  option.value.toLowerCase().indexOf(query.toLowerCase()) > -1
+
+/**
+ * The Autocomplete component is typically used for search components.
+ * It consists of a text input for writing a query, and properties for rendering suggestions.
+ *
+ * @public
+ */
+export function Autocomplete<
+  E extends AutocompleteElementType = typeof DEFAULT_AUTOCOMPLETE_ELEMENT,
+  O extends BaseAutocompleteOption = BaseAutocompleteOption,
+>(props: AutocompleteProps<E, O>): React.JSX.Element {
+  const {
+    as = DEFAULT_AUTOCOMPLETE_ELEMENT,
+    border = true,
+    customValidity,
+    disabled,
+    filterOption: filterOptionProp,
+    fontSize = 2,
+    icon,
+    id,
+    listBox = EMPTY_RECORD,
+    loading,
+    onBlur,
+    onChange,
+    onFocus,
+    onQueryChange,
+    onSelect,
+    openButton,
+    openOnFocus,
+    options: optionsProp,
+    padding: paddingProp = 3,
+    popover = EMPTY_RECORD,
+    prefix,
+    radius = 2,
+    readOnly,
+    ref: forwardedRef,
+    relatedElements,
+    renderOption: renderOptionProp,
+    renderPopover,
+    renderValue = DEFAULT_RENDER_VALUE,
+    suffix,
+    value: valueProp,
+    ...rest
+  } = props as AutocompleteProps<typeof DEFAULT_AUTOCOMPLETE_ELEMENT, O>
+
+  const [state, dispatch] = useReducer(autocompleteReducer, {
+    activeValue: valueProp || null,
+    focused: false,
+    listFocused: false,
+    query: null,
+    value: valueProp || null,
+  })
+
+  const {activeValue, focused, listFocused, query, value} = state
+
+  const defaultRenderOption = useCallback(
+    ({value}: BaseAutocompleteOption) => (
+      <Selectable as="button" padding={paddingProp} radius={2}>
+        <Text size={fontSize} textOverflow="ellipsis">
+          {value}
+        </Text>
+      </Selectable>
+    ),
+    [fontSize, paddingProp],
+  )
+
+  const renderOption =
+    typeof renderOptionProp === 'function' ? renderOptionProp : defaultRenderOption
+
+  const filterOption =
+    typeof filterOptionProp === 'function' ? filterOptionProp : DEFAULT_FILTER_OPTION
+
+  // Element refs
+  const rootElementRef = useRef<HTMLDivElement | null>(null)
+  const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
+  const inputElementRef = useRef<HTMLInputElement | null>(null)
+  const listBoxElementRef = useRef<HTMLUListElement | null>(null)
+
+  // Value refs
+  const listFocusedRef = useRef(false)
+  const valueRef = useRef(value)
+  const valuePropRef = useRef(valueProp)
+  const popoverMouseWithinRef = useRef(false)
+
+  // Forward ref to parent
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    forwardedRef,
+    () => inputElementRef.current,
+  )
+
+  const listBoxId = `${id}-listbox`
+  const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
+  const padding = useResponsiveProp(paddingProp)
+  const currentOption = useMemo(
+    () => (value !== null ? options.find((o) => o.value === value) : undefined),
+    [options, value],
+  )
+  const filteredOptions = useMemo(
+    () => options.filter((option) => (query ? filterOption(query, option) : true)),
+    [filterOption, options, query],
+  )
+  const filteredOptionsLen = filteredOptions.length
+  const activeItemId = activeValue ? `${id}-option-${activeValue}` : undefined
+  const expanded = (query !== null && loading) || (focused && query !== null)
+
+  const handleRootBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      setTimeout(() => {
+        // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
+        // closes the results in certain situations):
+        // - Do not handle blur if the mouse is within the popover
+        if (popoverMouseWithinRef.current) {
+          return
+        }
+
+        const elements: HTMLElement[] = (relatedElements || []).concat(
+          rootElementRef.current ? [rootElementRef.current] : [],
+          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],
+        )
+
+        let focusInside = false
+
+        if (document.activeElement) {
+          for (const e of elements) {
+            if (e === document.activeElement || e.contains(document.activeElement)) {
+              focusInside = true
+              break
+            }
+          }
+        }
+
+        if (focusInside === false) {
+          dispatch({type: 'root/blur'})
+          popoverMouseWithinRef.current = false
+          if (onQueryChange) onQueryChange(null)
+          if (onBlur) onBlur(event)
+        }
+      }, 0)
+    },
+    [onBlur, onQueryChange, relatedElements],
+  )
+
+  const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {
+    const listBoxElement = listBoxElementRef.current
+    const focusedElement = event.target instanceof HTMLElement ? event.target : null
+    const listFocused = listBoxElement?.contains(focusedElement) || false
+
+    if (listFocused !== listFocusedRef.current) {
+      listFocusedRef.current = listFocused
+
+      dispatch({type: 'root/setListFocused', listFocused})
+    }
+  }, [])
+
+  const handleOptionSelect = useCallback(
+    (v: string) => {
+      dispatch({type: 'value/change', value: v})
+
+      popoverMouseWithinRef.current = false
+
+      if (onSelect) onSelect(v)
+
+      valueRef.current = v
+
+      if (onChange) onChange(v)
+      if (onQueryChange) onQueryChange(null)
+
+      inputElementRef.current?.focus()
+    },
+    [onChange, onSelect, onQueryChange],
+  )
+
+  const handleRootKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+
+        if (!filteredOptionsLen) return
+
+        const activeOption = filteredOptions.find((o) => o.value === activeValue)
+        const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1
+        const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]
+
+        if (nextActiveOption) {
+          dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})
+        }
+
+        return
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+
+        if (!filteredOptionsLen) return
+
+        const activeOption = filteredOptions.find((o) => o.value === activeValue)
+        const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1
+        const nextActiveOption =
+          filteredOptions[
+            activeIndex === -1
+              ? filteredOptionsLen - 1
+              : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen
+          ]
+
+        if (nextActiveOption) {
+          dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})
+        }
+
+        return
+      }
+
+      if (event.key === 'Escape') {
+        dispatch({type: 'root/escape'})
+        popoverMouseWithinRef.current = false
+        if (onQueryChange) onQueryChange(null)
+        inputElementRef.current?.focus()
+
+        return
+      }
+
+      const target = event.target as Node
+      const listEl = listBoxElementRef.current
+
+      if (
+        (listEl === target || listEl?.contains(target)) &&
+        !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)
+      ) {
+        inputElementRef.current?.focus()
+
+        return
+      }
+    },
+    [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],
+  )
+
+  const handleInputChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const nextQuery = event.currentTarget.value
+
+      dispatch({type: 'input/change', query: nextQuery})
+
+      if (onQueryChange) onQueryChange(nextQuery)
+    },
+    [onQueryChange],
+  )
+
+  const dispatchOpen = useCallback(() => {
+    dispatch({
+      type: 'root/open',
+      query: value ? renderValue(value, currentOption) : '',
+    })
+  }, [currentOption, renderValue, value])
+
+  const handleInputFocus = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (!focused) {
+        dispatch({type: 'input/focus'})
+
+        if (onFocus) onFocus(event)
+        if (openOnFocus) dispatchOpen()
+      }
+    },
+    [focused, onFocus, openOnFocus, dispatchOpen],
+  )
+
+  const handlePopoverMouseEnter = useCallback(() => {
+    popoverMouseWithinRef.current = true
+  }, [])
+
+  const handlePopoverMouseLeave = useCallback(() => {
+    popoverMouseWithinRef.current = false
+  }, [])
+
+  const handleClearButtonClick = useCallback(() => {
+    dispatch({type: 'root/clear'})
+    valueRef.current = ''
+    if (onChange) onChange('')
+    if (onQueryChange) onQueryChange(null)
+    inputElementRef.current?.focus()
+  }, [onChange, onQueryChange])
+
+  const handleClearButtonFocus = useCallback(() => {
+    dispatch({type: 'input/focus'})
+  }, [])
+
+  // Change the value when `value` prop changes
+  useEffect(() => {
+    // If `valueProp` changed
+    if (valueProp !== valuePropRef.current) {
+      valuePropRef.current = valueProp
+
+      if (valueProp !== undefined) {
+        dispatch({type: 'value/change', value: valueProp})
+        valueRef.current = valueProp
+      }
+
+      return
+    }
+
+    // If `valueProp` is not equal to `value`
+    if (valueProp !== valueRef.current) {
+      valueRef.current = valueProp || null
+
+      dispatch({type: 'value/change', value: valueProp || null})
+    }
+  }, [valueProp])
+
+  // Reset active item when closing
+  useEffect(() => {
+    if (!focused && valueRef.current) {
+      dispatch({type: 'root/setActiveValue', value: valueRef.current})
+    }
+  }, [focused])
+
+  // Focus the selected item
+  useEffect(() => {
+    const listElement = listBoxElementRef.current
+
+    if (!listElement) return
+
+    const activeOption = filteredOptions.find((o) => o.value === activeValue)
+
+    if (activeOption) {
+      const activeIndex = filteredOptions.indexOf(activeOption)
+      const activeItemElement = listElement.childNodes[activeIndex] as HTMLLIElement | undefined
+
+      if (activeItemElement) {
+        if (_hasFocus(activeItemElement)) {
+          // already focused
+          return
+        }
+
+        focusFirstDescendant(activeItemElement)
+      }
+    }
+  }, [activeValue, filteredOptions])
+
+  const clearButton = useMemo(() => {
+    if (!loading && !disabled && value) {
+      return {
+        'aria-label': 'Clear',
+        'onFocus': handleClearButtonFocus,
+      }
+    }
+
+    return undefined
+  }, [disabled, handleClearButtonFocus, loading, value])
+
+  const openButtonBoxPadding = useMemo(() => {
+    const result = Object.fromEntries(
+      Object.entries(padding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 1]
+        if (value === 2) return [key, 1]
+
+        return [key, (value as Space) - 2]
+      }),
+    ) as ResponsiveProp<Space>
+
+    return result
+  }, [padding])
+
+  const openButtonPadding = useMemo(
+    () => Object.values(padding).map((v) => Math.max((v as Space) - 1, 0)) as ResponsiveProp<Space>,
+    [padding],
+  )
+
+  const openButtonProps: AutocompleteOpenButtonProps = useMemo(
+    () => (typeof openButton === 'object' ? openButton : EMPTY_RECORD),
+    [openButton],
+  )
+
+  const handleOpenClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      dispatchOpen()
+
+      if (openButtonProps.onClick) openButtonProps.onClick(event)
+
+      _raf(() => inputElementRef.current?.focus())
+    },
+    [openButtonProps, dispatchOpen],
+  )
+
+  const openButtonNode = useMemo(
+    () =>
+      !disabled && !readOnly && openButton ? (
+        <Box aria-hidden={expanded} padding={openButtonBoxPadding}>
+          <Button
+            aria-label="Open"
+            disabled={expanded}
+            display="block"
+            fontSize={fontSize}
+            icon={ChevronDownIcon}
+            mode="bleed"
+            padding={openButtonPadding}
+            {...openButtonProps}
+            onClick={handleOpenClick}
+          />
+        </Box>
+      ) : undefined,
+    [
+      disabled,
+      expanded,
+      fontSize,
+      handleOpenClick,
+      openButton,
+      openButtonBoxPadding,
+      openButtonPadding,
+      openButtonProps,
+      readOnly,
+    ],
+  )
+
+  const inputValue = useMemo(() => {
+    if (query === null) {
+      if (value !== null) {
+        return renderValue(value, currentOption)
+      }
+
+      return ''
+    }
+
+    return query
+  }, [currentOption, query, renderValue, value])
+
+  const input = (
+    <TextInput
+      {...rest}
+      aria-activedescendant={activeItemId}
+      aria-autocomplete="list"
+      aria-expanded={expanded}
+      aria-owns={listBoxId}
+      autoCapitalize="off"
+      autoComplete="off"
+      autoCorrect="off"
+      as={as}
+      border={border}
+      clearButton={clearButton}
+      customValidity={customValidity}
+      disabled={disabled}
+      fontSize={fontSize}
+      icon={icon}
+      iconRight={loading && AnimatedSpinnerIcon}
+      id={id}
+      inputMode="search"
+      onChange={handleInputChange}
+      onClear={handleClearButtonClick}
+      onFocus={handleInputFocus}
+      padding={padding}
+      prefix={prefix}
+      radius={radius}
+      readOnly={readOnly}
+      ref={inputElementRef}
+      role="combobox"
+      spellCheck={false}
+      suffix={suffix || openButtonNode}
+      value={inputValue}
+    />
+  )
+
+  const handleListBoxKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      // If the focus is currently in the list, move focus to the input element
+      if (event.key === 'Tab') {
+        if (listFocused) inputElementRef.current?.focus()
+      }
+    },
+    [listFocused],
+  )
+
+  const content = useMemo(() => {
+    if (filteredOptions.length === 0) return null
+
+    return (
+      <Box
+        data-ui="AutoComplete__results"
+        onKeyDown={handleListBoxKeyDown}
+        padding={1}
+        {...listBox}
+        tabIndex={-1}
+      >
+        <Stack
+          as="ul"
+          aria-multiselectable={false}
+          data-ui="AutoComplete__resultsList"
+          gap={1}
+          id={listBoxId}
+          ref={listBoxElementRef}
+          role="listbox"
+        >
+          {filteredOptions.map((option) => {
+            const active =
+              activeValue !== null ? option.value === activeValue : currentOption === option
+
+            return (
+              <AutocompleteOption
+                id={`${id}-option-${option.value}`}
+                key={option.value}
+                onSelect={handleOptionSelect}
+                selected={active}
+                value={option.value}
+              >
+                {cloneElement(renderOption(option), {
+                  disabled: loading,
+                  selected: active,
+                  tabIndex: listFocused && active ? 0 : -1,
+                })}
+              </AutocompleteOption>
+            )
+          })}
+        </Stack>
+      </Box>
+    )
+  }, [
+    activeValue,
+    currentOption,
+    filteredOptions,
+    handleOptionSelect,
+    handleListBoxKeyDown,
+    id,
+    listBox,
+    listBoxId,
+    listFocused,
+    loading,
+    renderOption,
+  ])
+
+  const results = useMemo(() => {
+    if (renderPopover) {
+      return renderPopover(
+        {
+          content,
+          hidden: !expanded,
+          inputElement: inputElementRef.current,
+          onMouseEnter: handlePopoverMouseEnter,
+          onMouseLeave: handlePopoverMouseLeave,
+        },
+        resultsPopoverElementRef,
+      )
+    }
+
+    if (filteredOptionsLen === 0) {
+      return null
+    }
+
+    return (
+      <Popover
+        arrow={false}
+        constrainSize
+        content={content}
+        fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}
+        matchReferenceWidth
+        onMouseEnter={handlePopoverMouseEnter}
+        onMouseLeave={handlePopoverMouseLeave}
+        open={expanded}
+        overflow="auto"
+        placement={AUTOCOMPLETE_POPOVER_PLACEMENT}
+        portal
+        radius={3}
+        ref={resultsPopoverElementRef}
+        referenceElement={inputElementRef.current}
+        {...popover}
+      />
+    )
+  }, [
+    content,
+    expanded,
+    filteredOptionsLen,
+    handlePopoverMouseEnter,
+    handlePopoverMouseLeave,
+    popover,
+    renderPopover,
+  ])
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      data-ui="Autocomplete"
+      onBlur={handleRootBlur}
+      onFocus={handleRootFocus}
+      onKeyDown={handleRootKeyDown}
+      ref={rootElementRef}
+    >
+      {input}
+      {results}
+    </div>
+  )
+}