@choice-ui/command 0.0.3

package/src/components/command-divider.tsx

@@ -0,0 +1,30 @@
+import { tcx } from "@choice-ui/shared"
+import { forwardRef, HTMLProps } from "react"
+import { useCommand, useCommandState } from "../hooks"
+import { commandTv } from "../tv"
+
+export interface CommandDividerProps extends HTMLProps<HTMLDivElement> {
+  /** 是否始终渲染此分隔符。当禁用自动过滤功能时特别有用。 */
+  alwaysRender?: boolean
+}
+
+export const CommandDivider = forwardRef<HTMLDivElement, CommandDividerProps>(
+  ({ className, alwaysRender, ...props }, forwardedRef) => {
+    const context = useCommand()
+    const render = useCommandState((state) => !state.search)
+    const tv = commandTv({ variant: context.variant })
+
+    if (!alwaysRender && !render) return null
+
+    return (
+      <div
+        ref={forwardedRef}
+        {...props}
+        className={tcx(tv.divider({ className }))}
+        role="separator"
+      />
+    )
+  },
+)
+
+CommandDivider.displayName = "CommandDivider"

package/src/components/command-empty.tsx

@@ -0,0 +1,30 @@
+import { tcx } from "@choice-ui/shared"
+import { forwardRef, HTMLProps } from "react"
+import { useCommand, useCommandState } from "../hooks"
+import { commandEmptyTv } from "../tv"
+
+export interface CommandEmptyProps extends HTMLProps<HTMLDivElement> {
+  className?: string
+}
+
+export const CommandEmpty = forwardRef<HTMLDivElement, CommandEmptyProps>(
+  ({ className, ...props }, forwardedRef) => {
+    const context = useCommand()
+    const render = useCommandState((state) => state.filtered.count === 0)
+
+    const tv = commandEmptyTv({ variant: context.variant })
+
+    if (!render) return null
+
+    return (
+      <div
+        ref={forwardedRef}
+        {...props}
+        className={tcx(tv.root({ className }))}
+        role="presentation"
+      />
+    )
+  },
+)
+
+CommandEmpty.displayName = "CommandEmpty"

package/src/components/command-footer.tsx

@@ -0,0 +1,22 @@
+import { tcx } from "@choice-ui/shared"
+import { forwardRef, HTMLProps } from "react"
+import { useCommand } from "../hooks/use-command"
+import { commandFooterTv } from "../tv"
+
+export const CommandFooter = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const context = useCommand()
+
+    const tv = commandFooterTv({ variant: context.variant })
+
+    return (
+      <div
+        ref={ref}
+        className={tcx(tv.root({ className }))}
+        {...props}
+      />
+    )
+  },
+)
+
+CommandFooter.displayName = "CommandFooter"

package/src/components/command-group.tsx

@@ -0,0 +1,76 @@
+import { tcx } from "@choice-ui/shared"
+import React, { forwardRef, HTMLProps, useEffect, useId, useMemo, useRef } from "react"
+import { GroupContext, useCommand, useCommandState, useValue } from "../hooks"
+import { commandGroupTv } from "../tv"
+
+export interface CommandGroupProps extends HTMLProps<HTMLDivElement> {
+  forceMount?: boolean
+  heading?: React.ReactNode
+  value?: string
+}
+
+export const CommandGroup = forwardRef<HTMLDivElement, CommandGroupProps>((props, forwardedRef) => {
+  const { className, heading, children, forceMount, value, ...rest } = props
+  const id = useId()
+  const ref = useRef<HTMLDivElement | null>(null)
+  const headingRef = useRef<HTMLDivElement | null>(null)
+  const headingId = React.useId()
+  const context = useCommand()
+
+  const render = useCommandState((state) =>
+    forceMount
+      ? true
+      : context.filter() === false
+        ? true
+        : !state.search
+          ? true
+          : state.filtered.groups.has(id),
+  )
+
+  // 注册group
+  useEffect(() => {
+    return context.group(id)
+  }, [context, id])
+
+  const valueDeps = useMemo(() => [value, heading, headingRef], [value, heading])
+  useValue(id, ref, valueDeps)
+
+  const contextValue = useMemo(() => ({ id, forceMount }), [id, forceMount])
+
+  const tv = commandGroupTv({ variant: context.variant })
+
+  if (!render) return null
+
+  return (
+    <div
+      ref={(el) => {
+        ref.current = el
+        if (typeof forwardedRef === "function") forwardedRef(el)
+        else if (forwardedRef) forwardedRef.current = el
+      }}
+      {...rest}
+      className={tcx(tv.root({ className }))}
+      role="presentation"
+      data-value={value}
+    >
+      {heading && (
+        <div
+          ref={headingRef}
+          className={tcx(tv.heading())}
+          aria-hidden
+          id={headingId}
+        >
+          {heading}
+        </div>
+      )}
+      <div
+        role="group"
+        aria-labelledby={heading ? headingId : undefined}
+      >
+        <GroupContext.Provider value={contextValue}>{children}</GroupContext.Provider>
+      </div>
+    </div>
+  )
+})
+
+CommandGroup.displayName = "CommandGroup"

package/src/components/command-input.tsx

@@ -0,0 +1,66 @@
+import { tcx } from "@choice-ui/shared"
+import { Input, type InputProps } from "@choice-ui/input"
+import { forwardRef, ReactNode, useEffect } from "react"
+import { useEventCallback } from "usehooks-ts"
+import { useCommand, useCommandState } from "../hooks"
+import { commandInputTv } from "../tv"
+
+export interface CommandInputProps extends Omit<InputProps, "value" | "onChange" | "type"> {
+  onChange?: (search: string) => void
+  prefixElement?: ReactNode
+  suffixElement?: ReactNode
+  value?: string
+}
+
+export const CommandInput = forwardRef<HTMLInputElement, CommandInputProps>((props, ref) => {
+  const { className, onChange, value, prefixElement, suffixElement, ...rest } = props
+  const isControlled = value != null
+  const store = useCommand().store
+  const search = useCommandState((state) => state.search)
+  const selectedItemId = useCommandState((state) => state.selectedItemId)
+  const context = useCommand()
+
+  useEffect(() => {
+    if (value != null) {
+      store.setState("search", value)
+    }
+  }, [value, store])
+
+  const handleChange = useEventCallback((value: string) => {
+    if (!isControlled) {
+      store.setState("search", value)
+    }
+    onChange?.(value)
+  })
+
+  const tv = commandInputTv({ size: context.size })
+
+  return (
+    <div className={tcx(tv.root({ className }))}>
+      {prefixElement}
+      <Input
+        ref={ref}
+        {...rest}
+        className={tcx(tv.input({ className }))}
+        variant={props.variant || context.variant}
+        data-command-input=""
+        autoComplete="off"
+        autoCorrect="off"
+        spellCheck={false}
+        aria-autocomplete="list"
+        role="combobox"
+        aria-expanded={true}
+        aria-controls={context.listId}
+        aria-labelledby={context.labelId}
+        aria-activedescendant={selectedItemId}
+        id={context.inputId}
+        type="text"
+        value={isControlled ? value : search}
+        onChange={handleChange}
+      />
+      {suffixElement}
+    </div>
+  )
+})
+
+CommandInput.displayName = "CommandInput"

package/src/components/command-item.tsx

@@ -0,0 +1,165 @@
+import { tcx } from "@choice-ui/shared"
+import { Kbd, type KbdKey } from "@choice-ui/kbd"
+import React, { forwardRef, HTMLProps, ReactNode, useEffect, useMemo, useRef } from "react"
+import { useEventCallback } from "usehooks-ts"
+import { GroupContext, useCommand, useCommandState, useValue } from "../hooks"
+import { commandItemTv } from "../tv"
+import { SELECT_EVENT } from "../utils"
+
+export interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSelect"> {
+  disabled?: boolean
+  forceMount?: boolean
+  keywords?: string[]
+  onSelect?: (value: string) => void
+  prefixElement?: ReactNode
+  shortcut?: {
+    keys?: ReactNode
+    modifier?: KbdKey | KbdKey[] | undefined
+  }
+  suffixElement?: ReactNode
+  value?: string
+}
+
+export const CommandItem = forwardRef<HTMLDivElement, CommandItemProps>((props, forwardedRef) => {
+  const {
+    className,
+    disabled,
+    forceMount,
+    keywords,
+    onSelect,
+    value,
+    children,
+    prefixElement,
+    suffixElement,
+    shortcut,
+    ...rest
+  } = props
+
+  const ref = useRef<HTMLDivElement | null>(null)
+  const id = React.useId()
+  const context = useCommand()
+  const groupContext = React.useContext(GroupContext)
+
+  const propsRef = useRef({
+    disabled,
+    forceMount: forceMount ?? groupContext?.forceMount,
+    keywords,
+    onSelect,
+    value,
+  })
+
+  propsRef.current = {
+    disabled,
+    forceMount: forceMount ?? groupContext?.forceMount,
+    keywords,
+    onSelect,
+    value,
+  }
+
+  // 注册item
+  useEffect(() => {
+    if (!propsRef.current.forceMount) {
+      return context.item(id, groupContext?.id)
+    }
+  }, [context, groupContext?.id, id])
+
+  const valueDeps = useMemo(() => [value, children, ref], [value, children])
+  const stableKeywords = useMemo(() => keywords || [], [keywords])
+  const valueRef = useValue(id, ref, valueDeps, stableKeywords)
+
+  const store = context.store
+
+  const selected = useCommandState((state) =>
+    Boolean(state.value && state.value === valueRef?.current),
+  )
+
+  const render = useCommandState((state) =>
+    propsRef.current.forceMount
+      ? true
+      : context.filter() === false
+        ? true
+        : !state.search
+          ? true
+          : (state.filtered.items.get(id) ?? 0) > 0,
+  )
+
+  // 处理选择事件，当用户点击或按下Enter键时触发onSelect回调
+  useEffect(() => {
+    const element = ref.current
+    if (!element || disabled) return
+
+    const handleSelect = () => {
+      select()
+      propsRef.current.onSelect?.(valueRef.current || "")
+    }
+
+    element.addEventListener(SELECT_EVENT, handleSelect)
+    return () => element.removeEventListener(SELECT_EVENT, handleSelect)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [render, disabled, valueRef])
+
+  const select = () => {
+    store.setState("value", valueRef.current || "", true)
+  }
+
+  const hasValidShortcut = shortcut && (shortcut.modifier || shortcut.keys)
+
+  const handlePointerMove = useEventCallback(() => {
+    if (disabled || context.getDisablePointerSelection()) return
+    select()
+  })
+
+  const handleClick = useEventCallback(() => {
+    if (disabled) return
+    propsRef.current.onSelect?.(valueRef.current || "")
+  })
+
+  const tv = commandItemTv({
+    selected,
+    disabled,
+    size: context.size,
+    hasPrefix: !!prefixElement,
+    hasSuffix: !!suffixElement,
+    variant: context.variant,
+  })
+
+  if (!render) return null
+
+  return (
+    <div
+      ref={(el) => {
+        ref.current = el
+        if (typeof forwardedRef === "function") forwardedRef(el)
+        else if (forwardedRef) forwardedRef.current = el
+      }}
+      {...rest}
+      id={id}
+      className={tcx(tv.root({ className }))}
+      role="option"
+      aria-disabled={disabled}
+      aria-selected={selected || undefined}
+      data-disabled={disabled}
+      data-selected={selected}
+      data-value={valueRef.current}
+      onPointerMove={handlePointerMove}
+      onClick={handleClick}
+    >
+      {prefixElement && <div className={tv.icon()}>{prefixElement}</div>}
+
+      {children}
+
+      {hasValidShortcut && (
+        <Kbd
+          className={tv.shortcut()}
+          keys={shortcut!.modifier}
+        >
+          {shortcut!.keys}
+        </Kbd>
+      )}
+
+      {suffixElement && <div className={tv.icon()}>{suffixElement}</div>}
+    </div>
+  )
+})
+
+CommandItem.displayName = "CommandItem"

package/src/components/command-list.tsx

@@ -0,0 +1,77 @@
+import { tcx } from "@choice-ui/shared"
+import { ScrollArea, type ScrollAreaProps } from "@choice-ui/scroll-area"
+import { forwardRef, useEffect, useRef } from "react"
+import { useCommand, useCommandState } from "../hooks"
+import { commandListTv } from "../tv"
+
+export interface CommandListProps extends ScrollAreaProps {
+  children: React.ReactNode
+  className?: string
+  label?: string
+}
+
+export const CommandList = forwardRef<HTMLDivElement, CommandListProps>((props, forwardedRef) => {
+  const { children, className, label = "Suggestions", hoverBoundary = "none", ...rest } = props
+  const ref = useRef<HTMLDivElement | null>(null)
+  const height = useRef<HTMLDivElement | null>(null)
+  const selectedItemId = useCommandState((state) => state.selectedItemId)
+  const context = useCommand()
+
+  useEffect(() => {
+    if (height.current && ref.current) {
+      const el = height.current
+      const wrapper = ref.current
+      let animationFrame: number
+      const observer = new ResizeObserver(() => {
+        animationFrame = requestAnimationFrame(() => {
+          const height = el.offsetHeight
+          wrapper.style.setProperty(`--cmdk-list-height`, height.toFixed(1) + "px")
+        })
+      })
+      observer.observe(el)
+      return () => {
+        cancelAnimationFrame(animationFrame)
+        observer.unobserve(el)
+      }
+    }
+  }, [])
+
+  const tv = commandListTv()
+
+  return (
+    <ScrollArea
+      variant={context.variant}
+      hoverBoundary={hoverBoundary}
+      {...rest}
+    >
+      <ScrollArea.Viewport
+        ref={(el) => {
+          ref.current = el
+          if (typeof forwardedRef === "function") forwardedRef(el)
+          else if (forwardedRef) forwardedRef.current = el
+        }}
+        {...rest}
+        className={tcx(tv.root({ className }))}
+        role="listbox"
+        tabIndex={-1}
+        aria-activedescendant={selectedItemId}
+        aria-label={label}
+        id={context.listId}
+      >
+        <ScrollArea.Content
+          className={tcx(tv.content())}
+          ref={(el) => {
+            height.current = el
+            if (context.listInnerRef) {
+              context.listInnerRef.current = el
+            }
+          }}
+        >
+          {children}
+        </ScrollArea.Content>
+      </ScrollArea.Viewport>
+    </ScrollArea>
+  )
+})
+
+CommandList.displayName = "CommandList"

package/src/components/command-loading.tsx

@@ -0,0 +1,30 @@
+import { tcx } from "@choice-ui/shared"
+import React, { forwardRef } from "react"
+import { commandLoadingTv } from "../tv"
+
+export interface CommandLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string
+  progress?: number
+}
+
+export const CommandLoading = forwardRef<HTMLDivElement, CommandLoadingProps>((props, ref) => {
+  const { className, children, label = "Loading...", progress, ...rest } = props
+  const tv = commandLoadingTv()
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={tcx(tv.root({ className }))}
+      role="progressbar"
+      aria-valuenow={progress}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={label}
+    >
+      <div aria-hidden>{children}</div>
+    </div>
+  )
+})
+
+CommandLoading.displayName = "CommandLoading"

package/src/components/command-tabs.tsx

@@ -0,0 +1,20 @@
+import { Tabs, type TabsProps } from "@choice-ui/tabs"
+import { forwardRef } from "react"
+import { useCommand } from "../hooks/use-command"
+import { commandTabsTv } from "../tv"
+
+export const CommandTabs = forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
+  const context = useCommand()
+  const tv = commandTabsTv()
+
+  return (
+    <Tabs
+      ref={ref}
+      variant={props.variant || context.variant}
+      className={tv.tabs()}
+      {...props}
+    />
+  )
+})
+
+CommandTabs.displayName = "CommandTabs"

package/src/components/command-value.tsx

@@ -0,0 +1,23 @@
+import { tcx } from "@choice-ui/shared"
+import { forwardRef, HTMLProps } from "react"
+import { useCommand } from "../hooks"
+import { commandItemTv } from "../tv"
+
+export const CommandValue = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>((props, ref) => {
+  const { className, children, ...rest } = props
+  const context = useCommand()
+
+  const tv = commandItemTv({ size: context.size })
+
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className={tcx(tv.value({ className }))}
+    >
+      {children}
+    </div>
+  )
+})
+
+CommandValue.displayName = "CommandValue"

package/src/components/index.ts

@@ -0,0 +1,10 @@
+export * from "./command-empty"
+export * from "./command-footer"
+export * from "./command-group"
+export * from "./command-input"
+export * from "./command-item"
+export * from "./command-list"
+export * from "./command-loading"
+export * from "./command-divider"
+export * from "./command-value"
+export * from "./command-tabs"

package/src/context/command-context.ts

@@ -0,0 +1,5 @@
+import { createContext } from "react"
+import type { Context, Store } from "../types"
+
+export const CommandContext = createContext<Context | undefined>(undefined)
+export const StoreContext = createContext<Store | undefined>(undefined)