@pantoia/ui 0.2.0 → 0.4.0

package/combobox/index.tsx

@@ -1,155 +1,24 @@
 'use client'
 
-import { Check, ChevronDown, X } from 'lucide-react'
-import { Popover as PopoverPrimitive } from 'radix-ui'
-import {
-  createContext,
-  use,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-  type ComponentProps,
-  type InputHTMLAttributes,
-  type KeyboardEvent as ReactKeyboardEvent,
-  type ReactNode,
-} from 'react'
+import { Combobox as ComboboxPrimitive, type ComboboxFilter, type ComboboxFilterOptions } from '@base-ui/react/combobox'
+import { isValidElement, type ComponentProps, type ReactNode } from 'react'
 
 import { tv } from '../tv'
 
-interface ComboboxContext {
-  id: string
-  value: string | undefined
-  open: boolean
-  active: string | undefined
-  search: string
-  setSearch: (search: string) => void
-  setNotify: (notify: ((search: string) => void) | undefined) => void
-  setOpen: (open: boolean) => void
-  pick: (value: string) => void
-  move: (step: number) => void
-  setActive: (value: string | undefined) => void
-  itemId: (value: string) => string
-  count: number
-  ignoreFilter: boolean
-  see: (visible: boolean) => () => void
-}
-
-const USABLE = '[role="option"]:not([data-disabled])'
-
-const Context = createContext<ComboboxContext | null>(null)
-
-const useCombobox = () => {
-  const ctx = use(Context)
-  if (!ctx) throw new Error('Combobox 부품은 Combobox 안에서만 선다')
-  return ctx
-}
-
-export interface ComboboxProps {
-  value?: string
-  defaultValue?: string
-  onValueChange?: (value: string) => void
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  ignoreFilter?: boolean
+export type ComboboxProps<Value = string, Item = Value> = Omit<ComboboxPrimitive.Root.Props<Value, false, Item>, 'className'> & {
   className?: string
-  children?: ReactNode
 }
 
-export function Combobox({
-  value,
-  defaultValue,
-  onValueChange,
-  open,
-  defaultOpen = false,
-  onOpenChange,
-  ignoreFilter = true,
+export function Combobox<Value = string, Item = Value>({
+  openOnInputClick = false,
   className,
   children,
-}: ComboboxProps) {
-  const id = useId()
-  const [ownValue, setOwnValue] = useState(defaultValue)
-  const [ownOpen, setOwnOpen] = useState(defaultOpen)
-  const [active, setActive] = useState<string | undefined>(undefined)
-  const [search, setSearch] = useState('')
-  const [count, setCount] = useState(0)
-  const [seen, setSeen] = useState(false)
-  const notifyRef = useRef<((search: string) => void) | undefined>(undefined)
-
-  const isOpen = open ?? ownOpen
-  const current = value ?? ownValue
-
-  if (seen !== isOpen) {
-    setSeen(isOpen)
-    if (!isOpen) setActive(undefined)
-  }
-
-  const setOpen = (next: boolean) => {
-    if (open === undefined) setOwnOpen(next)
-    onOpenChange?.(next)
-  }
-
-  const setNotify = (next: ((search: string) => void) | undefined) => {
-    notifyRef.current = next
-  }
-
-  const changeSearch = (next: string) => {
-    setSearch(next)
-    notifyRef.current?.(next)
-  }
-
-  const pick = (next: string) => {
-    if (value === undefined) setOwnValue(next)
-    onValueChange?.(next)
-    changeSearch(next)
-    setOpen(false)
-  }
-
-  const see = (visible: boolean) => {
-    if (!visible) return () => {}
-    setCount(n => n + 1)
-    return () => setCount(n => n - 1)
-  }
-
-  const move = (step: number) => {
-    const list = document.getElementById(`${id}-list`)
-    if (!list) return
-
-    const usable = [...list.querySelectorAll<HTMLElement>(USABLE)].map(el => el.dataset.value!)
-    if (usable.length === 0) return
-
-    const at = active === undefined ? -1 : usable.indexOf(active)
-    const next = at === -1
-      ? (step > 0 ? 0 : usable.length - 1)
-      : (at + step + usable.length) % usable.length
-
-    setActive(usable[next])
-  }
-
+  ...rest
+}: ComboboxProps<Value, Item>) {
   return (
-    <Context value={{
-      id,
-      value: current,
-      open: isOpen,
-      active,
-      search,
-      setSearch: changeSearch,
-      setNotify,
-      setOpen,
-      pick,
-      see,
-      move,
-      setActive,
-      itemId: (item: string) => `${id}-${item}`,
-      count,
-      ignoreFilter,
-    }}
-    >
-      <PopoverPrimitive.Root open={isOpen} onOpenChange={setOpen}>
-        <div className={className}>{children}</div>
-      </PopoverPrimitive.Root>
-    </Context>
+    <ComboboxPrimitive.Root<Value, false, Item> {...rest} openOnInputClick={openOnInputClick}>
+      <div className={className}>{children}</div>
+    </ComboboxPrimitive.Root>
   )
 }
 
@@ -164,7 +33,7 @@ export const comboboxAnchor = tv({
   variants: {
     surface: {
       bare: 'ring-1 ring-inset ring-line-strong',
-      well: 'bg-background-well',
+      well: 'bg-bg-well',
     },
     size: { sm: 'h-8', md: 'h-9', lg: 'h-10 [&_input]:text-t16' },
   },
@@ -172,238 +41,166 @@ export const comboboxAnchor = tv({
   defaultVariants: { surface: 'bare', size: 'md' },
 })
 
-export interface ComboboxAnchorProps {
+export type ComboboxAnchorProps = Omit<ComponentProps<typeof ComboboxPrimitive.InputGroup>, 'className'> & {
   surface?: 'bare' | 'well'
   size?: 'sm' | 'md' | 'lg'
   className?: string
-  children?: ReactNode
 }
 
-export function ComboboxAnchor({ surface, size, className, children }: ComboboxAnchorProps) {
-  return (
-    <PopoverPrimitive.Anchor className={comboboxAnchor({ surface, size, className })}>
-      {children}
-    </PopoverPrimitive.Anchor>
-  )
+export function ComboboxAnchor({ surface, size, className, ...rest }: ComboboxAnchorProps) {
+  return <ComboboxPrimitive.InputGroup {...rest} className={comboboxAnchor({ surface, size, className })} />
 }
 
-export interface ComboboxInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
-  value?: string
-  onValueChange?: (value: string) => void
+export type ComboboxInputProps = Omit<ComponentProps<typeof ComboboxPrimitive.Input>, 'className'> & {
+  className?: string
 }
 
 const comboboxInput = tv({
-  base: 'text-value text-foreground placeholder:text-foreground-placeholder'
+  base: 'text-value text-fg placeholder:text-fg-placeholder'
     + ' w-full min-w-0 bg-transparent outline-none'
-    + ' disabled:text-foreground-disabled disabled:cursor-not-allowed',
+    + ' disabled:text-fg-disabled disabled:cursor-not-allowed',
 })
 
-export function ComboboxInput({ value, onValueChange, className, ...rest }: ComboboxInputProps) {
-  const ctx = useCombobox()
-  const text = value ?? ctx.search
-  const { setNotify } = ctx
-
-  useEffect(() => {
-    setNotify(onValueChange)
-    return () => setNotify(undefined)
-  })
-
-  const change = (next: string) => {
-    ctx.setSearch(next)
-    if (!ctx.open) ctx.setOpen(true)
-  }
-
-  const onKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-      e.preventDefault()
-      if (!ctx.open) ctx.setOpen(true)
-      else ctx.move(e.key === 'ArrowDown' ? 1 : -1)
-      return
-    }
-
-    if (e.key === 'Enter' && ctx.open && ctx.active !== undefined) {
-      e.preventDefault()
-      ctx.pick(ctx.active)
-      return
-    }
-
-    if (e.key === 'Escape' && ctx.open) {
-      e.preventDefault()
-      ctx.setOpen(false)
-    }
-  }
-
-  return (
-    <input
-      {...rest}
-      role="combobox"
-      aria-expanded={ctx.open}
-      aria-controls={ctx.open ? `${ctx.id}-list` : undefined}
-      aria-autocomplete="list"
-      aria-activedescendant={ctx.active === undefined ? undefined : ctx.itemId(ctx.active)}
-      value={text}
-      onChange={e => change(e.target.value)}
-      onKeyDown={onKeyDown}
-      className={comboboxInput({ className })}
-    />
-  )
+export function ComboboxInput({ className, ...rest }: ComboboxInputProps) {
+  return <ComboboxPrimitive.Input {...rest} className={comboboxInput({ className })} />
 }
 
 const comboboxTrigger = tv({
-  base: 'text-foreground-subtle grid size-5 shrink-0 place-items-center rounded-r8'
-    + ' transition-state press-shrink hover:text-foreground'
+  base: 'text-fg-subtle grid size-5 shrink-0 place-items-center rounded-r8'
+    + ' transition-state press-shrink hover:text-fg'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2'
     + ' focus-visible:outline-line-focus-ring',
 })
 
-export function ComboboxTrigger({ label = '목록 열기', disabled, className }: {
+export type ComboboxTriggerProps = Omit<ComponentProps<typeof ComboboxPrimitive.Trigger>, 'className'> & {
   label?: string
-  disabled?: boolean
   className?: string
-}) {
-  const ctx = useCombobox()
+}
 
+export function ComboboxTrigger({ label = '목록 열기', className, children, ...rest }: ComboboxTriggerProps) {
   return (
-    <button
-      type="button"
-      tabIndex={-1}
-      aria-label={label}
-      disabled={disabled}
-      data-state={ctx.open ? 'open' : 'closed'}
-      onClick={() => ctx.setOpen(!ctx.open)}
-      className={comboboxTrigger({ className })}
-    >
-      <ChevronDown
-        className="size-4 transition-transform open:rotate-180 motion-reduce:transition-none"
-      />
-    </button>
+    <ComboboxPrimitive.Trigger aria-label={label} {...rest} className={comboboxTrigger({ className })}>
+      {children ?? (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4 transition-transform in-data-popup-open:rotate-180 motion-reduce:transition-none">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      )}
+    </ComboboxPrimitive.Trigger>
   )
 }
 
 const comboboxCancel = tv({
-  base: 'text-foreground-subtle grid size-5 shrink-0 place-items-center rounded-full'
-    + ' transition-state press-shrink hover:text-foreground'
+  base: 'text-fg-subtle grid size-5 shrink-0 place-items-center rounded-full'
+    + ' transition-state press-shrink hover:text-fg'
     + ' focus-visible:outline-2 focus-visible:outline-offset-2'
     + ' focus-visible:outline-line-focus-ring',
 })
 
-export function ComboboxCancel({ label = '지우기', className }: { label?: string, className?: string }) {
-  const ctx = useCombobox()
+export type ComboboxCancelProps = Omit<ComponentProps<typeof ComboboxPrimitive.Clear>, 'className'> & {
+  label?: string
+  className?: string
+}
 
+export function ComboboxCancel({ label = '지우기', keepMounted = true, className, children, ...rest }: ComboboxCancelProps) {
   return (
-    <button
-      type="button"
-      tabIndex={-1}
-      aria-label={label}
-      onClick={() => ctx.setSearch('')}
-      className={comboboxCancel({ className })}
-    >
-      <X className="size-4" />
-    </button>
+    <ComboboxPrimitive.Clear aria-label={label} keepMounted={keepMounted} {...rest} className={comboboxCancel({ className })}>
+      {children ?? (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      )}
+    </ComboboxPrimitive.Clear>
   )
 }
 
-export type ComboboxContentProps =
-  Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'align' | 'sideOffset' | 'onOpenAutoFocus'>
+export type ComboboxContentProps = Omit<ComponentProps<typeof ComboboxPrimitive.Popup>, 'className' | 'children'> & {
+  className?: string
+  children?: ComboboxPrimitive.List.Props['children'] | ComboboxPrimitive.List.Props['children'][]
+}
 
 const comboboxContent = tv({
-  base: 'float text-foreground rounded-float z-overlay'
-    + ' w-(--radix-popover-trigger-width)'
+  base: 'float text-fg rounded-r12 z-overlay'
+    + ' w-(--anchor-width)'
     + ' open:animate-enter closed:animate-exit',
 })
 
-export function ComboboxContent({ className, children, ...rest }: ComboboxContentProps) {
-  const label = rest['aria-label']
+const isEmpty = (child: unknown) => isValidElement(child) && child.type === ComboboxEmpty
+
+export function ComboboxContent({ 'aria-label': label, className, children, ...rest }: ComboboxContentProps) {
+  const nodes = Array.isArray(children) ? children : [children]
+  const empty = nodes.filter(isEmpty) as ReactNode[]
+  const list = nodes.filter(node => !isEmpty(node))
 
   return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        {...rest}
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
         align="start"
         sideOffset={4}
-        onOpenAutoFocus={e => e.preventDefault()}
-        className={comboboxContent({ className })}
+        className="z-overlay min-w-max will-change-transform"
       >
-        <ComboboxViewport label={label} className="max-h-72">
-          {children}
-        </ComboboxViewport>
-      </PopoverPrimitive.Content>
-    </PopoverPrimitive.Portal>
+        <ComboboxPrimitive.Popup {...rest} className={comboboxContent({ className })}>
+          {empty}
+          <ComboboxViewport aria-label={label} className="max-h-72">
+            {list.length === 1 ? list[0] : list as ReactNode[]}
+          </ComboboxViewport>
+        </ComboboxPrimitive.Popup>
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
   )
 }
 
-const comboboxViewport = tv({ base: 'flex flex-col gap-px overflow-y-auto p-1' })
+const comboboxViewport = tv({ base: 'flex flex-col gap-px overflow-y-auto p-1 data-empty:p-0' })
 
-export function ComboboxViewport({ label, className, children }: {
-  label?: string
+export type ComboboxViewportProps = Omit<ComponentProps<typeof ComboboxPrimitive.List>, 'className'> & {
   className?: string
-  children?: ReactNode
-}) {
-  const ctx = useCombobox()
+}
 
-  return (
-    <div
-      id={`${ctx.id}-list`}
-      role={ctx.count > 0 ? 'listbox' : undefined}
-      aria-label={ctx.count > 0 ? label : undefined}
-      className={comboboxViewport({ className })}
-    >
-      {children}
-    </div>
-  )
+export function ComboboxViewport({ className, ...rest }: ComboboxViewportProps) {
+  return <ComboboxPrimitive.List {...rest} className={comboboxViewport({ className })} />
 }
 
-export interface ComboboxItemProps {
-  value: string
-  textValue?: string
-  disabled?: boolean
+export type ComboboxCollectionProps = ComboboxPrimitive.Collection.Props
+
+export function ComboboxCollection(props: ComboboxCollectionProps) {
+  return <ComboboxPrimitive.Collection {...props} />
+}
+
+export type ComboboxItemProps = Omit<ComponentProps<typeof ComboboxPrimitive.Item>, 'className'> & {
   className?: string
-  children?: ReactNode
 }
 
 const comboboxItem = tv({
   base: 'flex min-h-9 cursor-default items-center justify-between gap-stack'
     + ' shrink-0 rounded-r8 px-2 py-1 transition-state'
     + ' data-highlighted:bg-bg-neutral-hover data-highlighted:outline-none'
-    + ' data-disabled:text-foreground-disabled data-disabled:pointer-events-none',
+    + ' data-disabled:text-fg-disabled data-disabled:pointer-events-none',
 })
 
-export function ComboboxItem({ value, textValue, disabled = false, className, children }: ComboboxItemProps) {
-  const ctx = useCombobox()
-  const shown = ctx.ignoreFilter || contains(textValue ?? value, ctx.search)
-
-  useEffect(() => ctx.see(shown), [ctx, shown])
-
-  if (!shown) return null
-
+export function ComboboxItem({ className, children, ...rest }: ComboboxItemProps) {
   return (
-    <div
-      id={ctx.itemId(value)}
-      role="option"
-      data-value={value}
-      aria-selected={ctx.value === value}
-      data-highlighted={ctx.active === value ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
-      onPointerMove={() => !disabled && ctx.setActive(value)}
-      onClick={() => !disabled && ctx.pick(value)}
-      className={comboboxItem({ className })}
-    >
+    <ComboboxPrimitive.Item {...rest} className={comboboxItem({ className })}>
       <span className="flex min-w-0 flex-col gap-0.5">
         {children}
       </span>
 
-      {ctx.value === value && (
-        <span className="text-foreground-muted flex shrink-0">
-          <Check className="size-4" />
-        </span>
-      )}
-    </div>
+      <ComboboxPrimitive.ItemIndicator className="text-fg-muted flex shrink-0">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+          <path d="M20 6 9 17l-5-5" />
+        </svg>
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
   )
 }
 
-const comboboxItemText = tv({ base: 'text-label text-foreground' })
+export interface ComboboxItemTextProps {
+  className?: string
+  children?: ReactNode
+}
+
+const comboboxItemText = tv({ base: 'text-label text-fg' })
 
-export function ComboboxItemText({ className, children }: { className?: string, children?: ReactNode }) {
+export function ComboboxItemText({ className, children }: ComboboxItemTextProps) {
   return (
     <span className={comboboxItemText({ className })}>
       {children}
@@ -411,9 +208,14 @@ export function ComboboxItemText({ className, children }: { className?: string,
   )
 }
 
-const comboboxItemDescription = tv({ base: 'text-caption text-foreground-subtle' })
+export interface ComboboxItemDescriptionProps {
+  className?: string
+  children?: ReactNode
+}
+
+const comboboxItemDescription = tv({ base: 'text-caption text-fg-subtle' })
 
-export function ComboboxItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
+export function ComboboxItemDescription({ className, children }: ComboboxItemDescriptionProps) {
   return (
     <span className={comboboxItemDescription({ className })}>
       {children}
@@ -421,44 +223,52 @@ export function ComboboxItemDescription({ className, children }: { className?: s
   )
 }
 
-const comboboxGroup = tv({ base: 'flex flex-col gap-px' })
-
-export function ComboboxGroup({ label, className, children }: {
+export type ComboboxGroupProps = Omit<ComponentProps<typeof ComboboxPrimitive.Group>, 'className'> & {
   label?: string
   className?: string
-  children?: ReactNode
-}) {
+}
+
+const comboboxGroup = tv({ base: 'flex flex-col gap-px' })
+
+export function ComboboxGroup({ label, className, children, ...rest }: ComboboxGroupProps) {
   return (
-    <div role="group" className={comboboxGroup({ className })}>
+    <ComboboxPrimitive.Group {...rest} className={comboboxGroup({ className })}>
       {label && (
-        <span className="text-caption text-foreground-subtle px-2 pb-1 pt-2">
+        <ComboboxPrimitive.GroupLabel className="text-caption text-fg-subtle px-2 pb-1 pt-2">
           {label}
-        </span>
+        </ComboboxPrimitive.GroupLabel>
       )}
       {children}
-    </div>
+    </ComboboxPrimitive.Group>
   )
 }
 
-const comboboxEmpty = tv({ base: 'text-caption text-foreground-subtle px-2 py-3 text-center' })
+export type ComboboxEmptyProps = Omit<ComponentProps<typeof ComboboxPrimitive.Empty>, 'className'> & {
+  className?: string
+}
 
-export function ComboboxEmpty({ className, children }: { className?: string, children?: ReactNode }) {
-  const ctx = useCombobox()
-  if (ctx.count > 0) return null
+const comboboxEmpty = tv({ base: 'text-caption text-fg-subtle m-1 px-2 py-3 text-center' })
 
+export function ComboboxEmpty({ className, children, ...rest }: ComboboxEmptyProps) {
   return (
-    <div role="presentation" className={comboboxEmpty({ className })}>
-      {children}
-    </div>
+    <ComboboxPrimitive.Empty {...rest}>
+      <div className={comboboxEmpty({ className })}>
+        {children}
+      </div>
+    </ComboboxPrimitive.Empty>
   )
 }
 
+export type ComboboxSeparatorProps = Omit<ComponentProps<typeof ComboboxPrimitive.Separator>, 'className'> & {
+  className?: string
+}
+
 const comboboxSeparator = tv({ base: 'bg-line -mx-1 my-1 h-px' })
 
-export function ComboboxSeparator({ className }: { className?: string }) {
-  return <div className={comboboxSeparator({ className })} />
+export function ComboboxSeparator({ className, ...rest }: ComboboxSeparatorProps) {
+  return <ComboboxPrimitive.Separator {...rest} className={comboboxSeparator({ className })} />
 }
 
-export function contains(text: string, search: string) {
-  return text.normalize('NFC').toLocaleLowerCase().includes(search.normalize('NFC').toLocaleLowerCase())
+export function useComboboxFilter(options?: ComboboxFilterOptions): ComboboxFilter {
+  return ComboboxPrimitive.useFilter(options)
 }