banhaten 0.1.1 → 0.1.2

package/registry/components/autocomplete.tsx

@@ -0,0 +1,637 @@
+"use client"
+
+import * as React from "react"
+import { SearchIcon } from "lucide-react"
+
+import { Input, type InputSize, type InputVariant, type InputVisualState } from "./input"
+import {
+  SelectHelperText,
+  SelectLabel,
+  SelectMenu,
+  SelectMenuItem,
+  SelectRoot,
+  type SelectItemType,
+} from "./select"
+import { Tag, type TagSize } from "./tag"
+
+import { cn } from "@/lib/utils"
+
+type AutocompleteSelectionMode = "single" | "multiple"
+type AutocompleteValue = string | string[] | undefined
+
+type AutocompleteOption = {
+  addonText?: React.ReactNode
+  disabled?: boolean
+  itemType?: SelectItemType
+  keywords?: string[]
+  label: React.ReactNode
+  media?: React.ReactNode | false
+  value: string
+}
+
+type AutocompleteFilter = (
+  options: AutocompleteOption[],
+  inputValue: string
+) => AutocompleteOption[]
+
+type AutocompleteInputProps = Omit<
+  React.ComponentProps<"input">,
+  | "className"
+  | "defaultValue"
+  | "dir"
+  | "disabled"
+  | "id"
+  | "size"
+  | "value"
+>
+
+type AutocompleteProps = Omit<
+  React.ComponentProps<"div">,
+  "defaultValue" | "dir" | "onChange"
+> & {
+  clearInputOnSelect?: boolean
+  defaultInputValue?: string
+  defaultOpen?: boolean
+  defaultValue?: string | string[]
+  dir?: "ltr" | "rtl" | "auto"
+  disabled?: boolean
+  emptyText?: React.ReactNode
+  errorMessage?: React.ReactNode
+  filterOptions?: AutocompleteFilter
+  hasHelperText?: boolean
+  hasInformationIcon?: boolean
+  hasLabel?: boolean
+  helperText?: React.ReactNode
+  inputClassName?: string
+  inputId?: string
+  inputProps?: AutocompleteInputProps
+  inputValue?: string
+  isOptional?: boolean
+  isRequired?: boolean
+  label?: React.ReactNode
+  menuClassName?: string
+  name?: string
+  onInputValueChange?: (value: string) => void
+  onOpenChange?: (open: boolean) => void
+  onValueChange?: (
+    value: AutocompleteValue,
+    option: AutocompleteOption | AutocompleteOption[] | null
+  ) => void
+  open?: boolean
+  optionalText?: React.ReactNode
+  options: AutocompleteOption[]
+  placeholder?: string
+  selectionMode?: AutocompleteSelectionMode
+  size?: InputSize
+  state?: InputVisualState
+  tagListClassName?: string
+  tagSize?: TagSize
+  variant?: InputVariant
+  value?: string | string[]
+}
+
+const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
+  function Autocomplete(
+    {
+      className,
+      clearInputOnSelect,
+      defaultInputValue,
+      defaultOpen = false,
+      defaultValue,
+      dir,
+      disabled = false,
+      emptyText = "No results found",
+      errorMessage,
+      filterOptions = defaultFilterOptions,
+      hasHelperText,
+      hasInformationIcon = false,
+      hasLabel,
+      helperText,
+      inputClassName,
+      inputId,
+      inputProps,
+      inputValue,
+      isOptional = false,
+      isRequired = false,
+      label,
+      menuClassName,
+      name,
+      onInputValueChange,
+      onOpenChange,
+      onBlur: onRootBlur,
+      onValueChange,
+      open,
+      optionalText,
+      options,
+      placeholder,
+      selectionMode = "single",
+      size = "lg",
+      state,
+      tagListClassName,
+      tagSize,
+      value,
+      variant = "default",
+      ...props
+    },
+    ref
+  ) {
+    const generatedInputId = React.useId()
+    const generatedListboxId = React.useId()
+    const resolvedInputId = inputId || generatedInputId
+    const listboxId = `${resolvedInputId}-${generatedListboxId}-listbox`
+    const rootRef = React.useRef<HTMLDivElement | null>(null)
+    const isMultiple = selectionMode === "multiple"
+    const isValueControlled = value !== undefined
+    const isInputControlled = inputValue !== undefined
+    const isOpenControlled = open !== undefined
+    const [uncontrolledValue, setUncontrolledValue] =
+      React.useState<AutocompleteValue>(defaultValue)
+    const [uncontrolledInputValue, setUncontrolledInputValue] =
+      React.useState(
+        defaultInputValue ??
+          getInitialInputValue(defaultValue, selectionMode, options)
+      )
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+    const [activeIndex, setActiveIndex] = React.useState(-1)
+
+    const selectedValue = isValueControlled ? value : uncontrolledValue
+    const selectedValues = normalizeSelectedValues(selectedValue, isMultiple)
+    const query = isInputControlled ? inputValue : uncontrolledInputValue
+    const isDisabled = disabled || state === "disabled"
+    const isError = state === "error" && !isDisabled
+    const selectedOptions = React.useMemo(
+      () => getSelectedOptions(options, selectedValues),
+      [options, selectedValues]
+    )
+    const filteredOptions = React.useMemo(
+      () => filterOptions(options, query),
+      [filterOptions, options, query]
+    )
+    const hasSelection = selectedValues.length > 0
+    const visualState: InputVisualState = isDisabled
+      ? "disabled"
+      : isError
+        ? "error"
+        : state ?? (hasSelection || query ? "filled" : "default")
+    const shouldRenderLabel = hasLabel ?? hasRenderableContent(label)
+    const helperContent = isError ? errorMessage : helperText
+    const shouldRenderHelper =
+      hasHelperText ?? hasRenderableContent(helperContent)
+    const menuOpen =
+      !isDisabled &&
+      (isOpenControlled ? Boolean(open) : uncontrolledOpen) &&
+      (filteredOptions.length > 0 || hasRenderableContent(emptyText))
+    const activeOption = filteredOptions[activeIndex]
+    const activeOptionId =
+      menuOpen && activeOption ? getOptionId(listboxId, activeIndex) : undefined
+    const resolvedTagSize =
+      tagSize ?? (size === "md" ? ("xs" as const) : ("md" as const))
+    const clearOnSelect = clearInputOnSelect ?? isMultiple
+
+    React.useEffect(() => {
+      if (!menuOpen) {
+        setActiveIndex(-1)
+        return
+      }
+
+      setActiveIndex((currentIndex) => {
+        if (currentIndex >= 0 && !filteredOptions[currentIndex]?.disabled) {
+          return currentIndex
+        }
+
+        return getFirstEnabledIndex(filteredOptions)
+      })
+    }, [filteredOptions, menuOpen])
+
+    function setRootRef(node: HTMLDivElement | null) {
+      rootRef.current = node
+
+      if (typeof ref === "function") {
+        ref(node)
+      } else if (ref) {
+        ref.current = node
+      }
+    }
+
+    function setMenuOpen(nextOpen: boolean) {
+      if (!isOpenControlled) {
+        setUncontrolledOpen(nextOpen)
+      }
+
+      onOpenChange?.(nextOpen)
+    }
+
+    function setQuery(nextQuery: string) {
+      if (!isInputControlled) {
+        setUncontrolledInputValue(nextQuery)
+      }
+
+      onInputValueChange?.(nextQuery)
+    }
+
+    function setSelectedValue(
+      nextValue: AutocompleteValue,
+      option: AutocompleteOption | AutocompleteOption[] | null
+    ) {
+      if (!isValueControlled) {
+        setUncontrolledValue(nextValue)
+      }
+
+      onValueChange?.(nextValue, option)
+    }
+
+    function selectOption(option: AutocompleteOption) {
+      if (option.disabled) return
+
+      if (isMultiple) {
+        const nextValues = selectedValues.includes(option.value)
+          ? selectedValues.filter((item) => item !== option.value)
+          : [...selectedValues, option.value]
+
+        setSelectedValue(nextValues, getSelectedOptions(options, nextValues))
+        setQuery(clearOnSelect ? "" : query)
+        setMenuOpen(true)
+        return
+      }
+
+      setSelectedValue(option.value, option)
+      setQuery(clearOnSelect ? "" : getOptionText(option))
+      setMenuOpen(false)
+    }
+
+    function removeSelectedValue(valueToRemove: string) {
+      const nextValues = selectedValues.filter((item) => item !== valueToRemove)
+      setSelectedValue(
+        isMultiple ? nextValues : nextValues[0],
+        getSelectedOptions(options, nextValues)
+      )
+    }
+
+    function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+      inputProps?.onChange?.(event)
+      if (event.defaultPrevented) return
+
+      setQuery(event.currentTarget.value)
+      setMenuOpen(true)
+    }
+
+    function handleInputFocus(event: React.FocusEvent<HTMLInputElement>) {
+      inputProps?.onFocus?.(event)
+      if (!event.defaultPrevented) setMenuOpen(true)
+    }
+
+    function handleRootBlur(event: React.FocusEvent<HTMLDivElement>) {
+      onRootBlur?.(event)
+      if (event.defaultPrevented) return
+
+      if (
+        event.relatedTarget instanceof Node &&
+        event.currentTarget.contains(event.relatedTarget)
+      ) {
+        return
+      }
+
+      setMenuOpen(false)
+    }
+
+    function handleInputClick(event: React.MouseEvent<HTMLInputElement>) {
+      inputProps?.onClick?.(event)
+      if (!event.defaultPrevented) setMenuOpen(true)
+    }
+
+    function handleInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+      inputProps?.onKeyDown?.(event)
+      if (event.defaultPrevented) return
+
+      if (event.key === "ArrowDown") {
+        event.preventDefault()
+        setMenuOpen(true)
+        setActiveIndex((currentIndex) =>
+          getNextEnabledIndex(filteredOptions, currentIndex, 1)
+        )
+        return
+      }
+
+      if (event.key === "ArrowUp") {
+        event.preventDefault()
+        setMenuOpen(true)
+        setActiveIndex((currentIndex) =>
+          getNextEnabledIndex(filteredOptions, currentIndex, -1)
+        )
+        return
+      }
+
+      if (event.key === "Home" && menuOpen) {
+        event.preventDefault()
+        setActiveIndex(getFirstEnabledIndex(filteredOptions))
+        return
+      }
+
+      if (event.key === "End" && menuOpen) {
+        event.preventDefault()
+        setActiveIndex(getLastEnabledIndex(filteredOptions))
+        return
+      }
+
+      if (event.key === "Enter" && menuOpen && activeOption) {
+        event.preventDefault()
+        selectOption(activeOption)
+        return
+      }
+
+      if (event.key === "Escape") {
+        setMenuOpen(false)
+        return
+      }
+
+      if (
+        event.key === "Backspace" &&
+        isMultiple &&
+        query.length === 0 &&
+        selectedValues.length > 0
+      ) {
+        removeSelectedValue(selectedValues[selectedValues.length - 1])
+      }
+    }
+
+    return (
+      <SelectRoot
+        data-selection-mode={selectionMode}
+        data-slot="autocomplete-root"
+        data-state={visualState}
+        data-variant={variant}
+        dir={dir}
+        ref={setRootRef}
+        className={cn(
+          "[--bh-select-width:var(--bh-input-width)] [--bh-select-menu-width:var(--bh-select-width)]",
+          className
+        )}
+        {...props}
+        onBlur={handleRootBlur}
+      >
+        {shouldRenderLabel ? (
+          <SelectLabel
+            hasInformationIcon={hasInformationIcon}
+            htmlFor={resolvedInputId}
+            isOptional={isOptional}
+            isRequired={isRequired}
+            optionalText={optionalText}
+          >
+            {label}
+          </SelectLabel>
+        ) : null}
+
+        {isMultiple && selectedOptions.length > 0 ? (
+          <div
+            data-slot="autocomplete-tags"
+            className={cn(
+              "flex min-w-0 flex-wrap gap-[var(--bh-space-xs-4)]",
+              tagListClassName
+            )}
+          >
+            {selectedOptions.map((option) => (
+              <Tag
+                closeLabel={formatRemoveLabel(option)}
+                disabled={isDisabled}
+                key={option.value}
+                showCloseButton
+                size={resolvedTagSize}
+                onClose={() => removeSelectedValue(option.value)}
+              >
+                {option.label}
+              </Tag>
+            ))}
+          </div>
+        ) : null}
+
+        <div data-slot="autocomplete-control" className="relative w-full">
+          <Input
+            aria-activedescendant={activeOptionId}
+            aria-autocomplete="list"
+            aria-controls={menuOpen ? listboxId : undefined}
+            aria-describedby={shouldRenderHelper ? `${resolvedInputId}-helper` : undefined}
+            aria-expanded={menuOpen}
+            aria-haspopup="listbox"
+            aria-invalid={isError || undefined}
+            disabled={isDisabled}
+            hasHelperText={false}
+            hasInformationIcon={false}
+            hasLabel={false}
+            id={resolvedInputId}
+            kind="default"
+            leadingIcon={
+              <SearchIcon
+                aria-hidden="true"
+                className="size-[var(--bh-input-icon-size)]"
+                focusable="false"
+                strokeWidth={2.25}
+              />
+            }
+            placeholder={placeholder}
+            role="combobox"
+            size={size}
+            state={visualState}
+            value={query}
+            variant={variant}
+            className={cn("[--bh-input-width:100%]", inputClassName)}
+            {...inputProps}
+            onChange={handleInputChange}
+            onClick={handleInputClick}
+            onFocus={handleInputFocus}
+            onKeyDown={handleInputKeyDown}
+          />
+
+          {menuOpen ? (
+            <SelectMenu
+              aria-multiselectable={isMultiple || undefined}
+              id={listboxId}
+              className={cn(
+                "absolute start-0 top-[calc(100%+var(--bh-select-menu-offset))] z-[var(--bh-z-popover)] max-h-[var(--bh-autocomplete-menu-max-height,var(--bh-space-18xl-320))] overflow-y-auto",
+                menuClassName
+              )}
+            >
+              {filteredOptions.length > 0 ? (
+                filteredOptions.map((option, index) => (
+                  <SelectMenuItem
+                    aria-selected={selectedValues.includes(option.value)}
+                    data-active={activeIndex === index ? "true" : undefined}
+                    disabled={option.disabled}
+                    id={getOptionId(listboxId, index)}
+                    itemType={option.itemType}
+                    key={option.value}
+                    label={option.label}
+                    media={option.media}
+                    addonText={option.addonText}
+                    selected={selectedValues.includes(option.value)}
+                    selectionType="default"
+                    value={option.value}
+                    className={cn(
+                      activeIndex === index &&
+                        "[&>[data-slot=select-menu-item-content]]:bg-[var(--bh-select-item-hover-bg)]"
+                    )}
+                    onClick={() => selectOption(option)}
+                    onMouseDown={(event) => event.preventDefault()}
+                    onMouseEnter={() => {
+                      if (!option.disabled) setActiveIndex(index)
+                    }}
+                  />
+                ))
+              ) : (
+                <div
+                  data-slot="autocomplete-empty"
+                  role="status"
+                  className="px-[var(--bh-select-item-padding-x)] py-[var(--bh-space-md-8)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+                >
+                  <span dir="auto">{emptyText}</span>
+                </div>
+              )}
+            </SelectMenu>
+          ) : null}
+        </div>
+
+        {shouldRenderHelper ? (
+          <SelectHelperText
+            id={`${resolvedInputId}-helper`}
+            type={isError ? "error" : "default"}
+          >
+            {helperContent}
+          </SelectHelperText>
+        ) : null}
+
+        {name
+          ? selectedValues.map((selectedItem) => (
+              <input
+                key={selectedItem}
+                name={name}
+                type="hidden"
+                value={selectedItem}
+              />
+            ))
+          : null}
+      </SelectRoot>
+    )
+  }
+)
+
+function defaultFilterOptions(
+  options: AutocompleteOption[],
+  inputValue: string
+) {
+  const normalizedInput = inputValue.trim().toLocaleLowerCase()
+
+  if (!normalizedInput) return options
+
+  return options.filter((option) =>
+    getSearchText(option).toLocaleLowerCase().includes(normalizedInput)
+  )
+}
+
+function getSearchText(option: AutocompleteOption) {
+  return [getOptionText(option), option.value, ...(option.keywords || [])]
+    .filter(Boolean)
+    .join(" ")
+}
+
+function getOptionText(option: AutocompleteOption) {
+  if (
+    typeof option.label === "string" ||
+    typeof option.label === "number" ||
+    typeof option.label === "bigint"
+  ) {
+    return String(option.label)
+  }
+
+  return option.value
+}
+
+function normalizeSelectedValues(
+  value: AutocompleteValue,
+  multiple: boolean
+) {
+  if (Array.isArray(value)) return value
+  if (!value) return []
+
+  return multiple ? [value] : [value]
+}
+
+function getSelectedOptions(
+  options: AutocompleteOption[],
+  values: string[]
+) {
+  const selectedValues = new Set(values)
+  return options.filter((option) => selectedValues.has(option.value))
+}
+
+function getInitialInputValue(
+  defaultValue: string | string[] | undefined,
+  selectionMode: AutocompleteSelectionMode,
+  options: AutocompleteOption[]
+) {
+  if (selectionMode === "multiple" || Array.isArray(defaultValue) || !defaultValue) {
+    return ""
+  }
+
+  const option = options.find((item) => item.value === defaultValue)
+  return option ? getOptionText(option) : ""
+}
+
+function hasRenderableContent(content: React.ReactNode) {
+  return (
+    content !== undefined &&
+    content !== null &&
+    content !== false &&
+    content !== ""
+  )
+}
+
+function getEnabledIndexes(options: AutocompleteOption[]) {
+  return options
+    .map((option, index) => (option.disabled ? -1 : index))
+    .filter((index) => index >= 0)
+}
+
+function getFirstEnabledIndex(options: AutocompleteOption[]) {
+  return getEnabledIndexes(options)[0] ?? -1
+}
+
+function getLastEnabledIndex(options: AutocompleteOption[]) {
+  const enabledIndexes = getEnabledIndexes(options)
+  return enabledIndexes[enabledIndexes.length - 1] ?? -1
+}
+
+function getNextEnabledIndex(
+  options: AutocompleteOption[],
+  currentIndex: number,
+  offset: 1 | -1
+) {
+  const enabledIndexes = getEnabledIndexes(options)
+  if (enabledIndexes.length === 0) return -1
+
+  const currentPosition = enabledIndexes.indexOf(currentIndex)
+  if (currentPosition === -1) {
+    return offset > 0
+      ? enabledIndexes[0]
+      : enabledIndexes[enabledIndexes.length - 1]
+  }
+
+  const nextPosition =
+    (currentPosition + offset + enabledIndexes.length) % enabledIndexes.length
+  return enabledIndexes[nextPosition]
+}
+
+function getOptionId(listboxId: string, index: number) {
+  return `${listboxId}-option-${index}`
+}
+
+function formatRemoveLabel(option: AutocompleteOption) {
+  const optionText = getOptionText(option)
+  return optionText ? `Remove ${optionText}` : "Remove option"
+}
+
+export { Autocomplete, defaultFilterOptions }
+export type {
+  AutocompleteFilter,
+  AutocompleteOption,
+  AutocompleteProps,
+  AutocompleteSelectionMode,
+}