@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/components/autocomplete/autocomplete.tsx

@@ -1,714 +0,0 @@
-import {ChevronDownIcon} from '@sanity/icons'
-import {
-  ChangeEvent,
-  ElementType,
-  FocusEvent,
-  HTMLProps,
-  KeyboardEvent,
-  MouseEvent,
-  ReactElement,
-  ReactNode,
-  Ref,
-  cloneElement,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-} from 'react'
-import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
-import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useArrayProp, useForwardedRef} from '../../hooks'
-import {
-  Box,
-  BoxProps,
-  Button,
-  Card,
-  Popover,
-  PopoverProps,
-  Stack,
-  Text,
-  TextInput,
-} from '../../primitives'
-import {Radius} from '../../types'
-import {AnimatedSpinnerIcon, ListBox, Root} from './autocomplete.styles'
-import {AutocompleteOption} from './autocompleteOption'
-import {autocompleteReducer} from './autocompleteReducer'
-import {
-  AUTOCOMPLETE_LISTBOX_IGNORE_KEYS,
-  AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS,
-  AUTOCOMPLETE_POPOVER_PLACEMENT,
-} from './constants'
-import {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'
-
-/**
- * @public
- */
-export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {
-  border?: boolean
-  customValidity?: string
-  filterOption?: (query: string, option: Option) => boolean
-  fontSize?: number | number[]
-  icon?: ElementType | ReactNode
-  id: string
-  /** @beta */
-  listBox?: BoxProps
-  loading?: boolean
-  onChange?: (value: string) => void
-  onQueryChange?: (query: string | null) => void
-  onSelect?: (value: string) => void
-  /** @beta */
-  openButton?: boolean | AutocompleteOpenButtonProps
-  options?: Option[]
-  padding?: number | number[]
-  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
-    Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
-  prefix?: ReactNode
-  radius?: Radius | Radius[]
-  /** @beta */
-  relatedElements?: HTMLElement[]
-  renderOption?: (option: Option) => ReactElement
-  /** @beta */
-  renderPopover?: (
-    props: {
-      content: ReactElement | null
-      hidden: boolean
-      inputElement: HTMLInputElement | null
-      onMouseEnter: () => void
-      onMouseLeave: () => void
-    },
-    ref: Ref<HTMLDivElement>,
-  ) => ReactNode
-  renderValue?: (value: string, option?: Option) => string
-  suffix?: ReactNode
-  value?: string
-}
-
-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
-
-const InnerAutocomplete = forwardRef(function InnerAutocomplete<
-  Option extends BaseAutocompleteOption,
->(
-  props: AutocompleteProps<Option> &
-    Omit<
-      HTMLProps<HTMLInputElement>,
-      | 'aria-activedescendant'
-      | 'aria-autocomplete'
-      | 'aria-expanded'
-      | 'aria-owns'
-      | 'as'
-      | 'autoCapitalize'
-      | 'autoComplete'
-      | 'autoCorrect'
-      | 'id'
-      | 'inputMode'
-      | 'onChange'
-      | 'onSelect'
-      | 'prefix'
-      | 'ref'
-      | 'role'
-      | 'spellCheck'
-      | 'type'
-      | 'value'
-    >,
-  ref: Ref<HTMLInputElement>,
-) {
-  const {
-    border = true,
-    customValidity,
-    disabled,
-    filterOption: filterOptionProp,
-    fontSize = 2,
-    icon,
-    id,
-    listBox = EMPTY_RECORD,
-    loading,
-    onBlur,
-    onChange,
-    onFocus,
-    onQueryChange,
-    onSelect,
-    openButton,
-    options: optionsProp,
-    padding: paddingProp = 3,
-    popover = EMPTY_RECORD,
-    prefix,
-    radius = 3,
-    readOnly,
-    relatedElements,
-    renderOption: renderOptionProp,
-    renderPopover,
-    renderValue = DEFAULT_RENDER_VALUE,
-    suffix,
-    value: valueProp,
-    ...restProps
-  } = props
-
-  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) => (
-      <Card data-as="button" padding={paddingProp} radius={2} tone="inherit">
-        <Text size={fontSize} textOverflow="ellipsis">
-          {value}
-        </Text>
-      </Card>
-    ),
-    [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<HTMLDivElement | null>(null)
-
-  // Value refs
-  const listFocusedRef = useRef(false)
-  const valueRef = useRef(value)
-  const valuePropRef = useRef(valueProp)
-  const popoverMouseWithinRef = useRef(false)
-
-  const forwardedRef = useForwardedRef(ref)
-
-  const listBoxId = `${id}-listbox`
-  const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
-  const padding = useArrayProp(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 handleInputFocus = useCallback(
-    (event: FocusEvent<HTMLInputElement>) => {
-      if (!focused) {
-        dispatch({type: 'input/focus'})
-
-        if (onFocus) onFocus(event)
-      }
-    },
-    [focused, onFocus],
-  )
-
-  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 setRef = useCallback(
-    (el: HTMLInputElement | null) => {
-      inputElementRef.current = el
-      forwardedRef.current = el
-    },
-    [forwardedRef],
-  )
-
-  const clearButton = useMemo(() => {
-    if (!loading && !disabled && value) {
-      return {
-        'aria-label': 'Clear',
-        onFocus: handleClearButtonFocus,
-      }
-    }
-
-    return undefined
-  }, [disabled, handleClearButtonFocus, loading, value])
-
-  const openButtonBoxPadding = useMemo(
-    () =>
-      padding.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 1
-        if (v === 2) return 1
-
-        return v - 2
-      }),
-    [padding],
-  )
-  const openButtonPadding = useMemo(() => padding.map((v) => Math.max(v - 1, 0)), [padding])
-  const openButtonProps: AutocompleteOpenButtonProps = useMemo(
-    () => (typeof openButton === 'object' ? openButton : EMPTY_RECORD),
-    [openButton],
-  )
-
-  const handleOpenClick = useCallback(
-    (event: MouseEvent<HTMLButtonElement>) => {
-      dispatch({
-        type: 'root/open',
-        query: value ? renderValue(value, currentOption) : '',
-      })
-
-      if (openButtonProps.onClick) openButtonProps.onClick(event)
-
-      _raf(() => inputElementRef.current?.focus())
-    },
-    [currentOption, openButtonProps, renderValue, value],
-  )
-
-  const openButtonNode = useMemo(
-    () =>
-      !disabled && !readOnly && openButton ? (
-        <Box aria-hidden={expanded} padding={openButtonBoxPadding}>
-          <Button
-            aria-label="Open"
-            disabled={expanded}
-            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
-      {...restProps}
-      aria-activedescendant={activeItemId}
-      aria-autocomplete="list"
-      aria-expanded={expanded}
-      aria-owns={listBoxId}
-      autoCapitalize="off"
-      autoComplete="off"
-      autoCorrect="off"
-      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={setRef}
-      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 (
-      <ListBox
-        data-ui="AutoComplete__results"
-        onKeyDown={handleListBoxKeyDown}
-        padding={1}
-        {...listBox}
-        tabIndex={-1}
-      >
-        <Stack
-          as="ul"
-          aria-multiselectable={false}
-          data-ui="AutoComplete__resultsList"
-          id={listBoxId}
-          ref={listBoxElementRef}
-          role="listbox"
-          space={1}
-        >
-          {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>
-      </ListBox>
-    )
-  }, [
-    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={radius}
-        ref={resultsPopoverElementRef}
-        referenceElement={inputElementRef.current}
-        {...popover}
-      />
-    )
-  }, [
-    content,
-    expanded,
-    filteredOptionsLen,
-    handlePopoverMouseEnter,
-    handlePopoverMouseLeave,
-    popover,
-    radius,
-    renderPopover,
-  ])
-
-  return (
-    <Root
-      data-ui="Autocomplete"
-      onBlur={handleRootBlur}
-      onFocus={handleRootFocus}
-      onKeyDown={handleRootKeyDown}
-      ref={rootElementRef}
-    >
-      {input}
-      {results}
-    </Root>
-  )
-})
-
-/**
- * @public
- */
-export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocompleteOption>(
-  props: AutocompleteProps<Option> &
-    Omit<
-      HTMLProps<HTMLInputElement>,
-      | 'aria-activedescendant'
-      | 'aria-autocomplete'
-      | 'aria-expanded'
-      | 'aria-owns'
-      | 'as'
-      | 'autoCapitalize'
-      | 'autoComplete'
-      | 'autoCorrect'
-      | 'id'
-      | 'inputMode'
-      | 'onChange'
-      | 'onSelect'
-      | 'prefix'
-      | 'ref'
-      | 'role'
-      | 'spellCheck'
-      | 'type'
-      | 'value'
-    > & {
-      ref?: Ref<HTMLInputElement>
-    },
-) => ReactElement