@choice-ui/command 0.0.3

package/src/context/create-command-context.ts

@@ -0,0 +1,140 @@
+import React from "react"
+import { commandScore } from "../command-score"
+import type { CommandProps, Context, State, Store } from "../types"
+
+interface CreateCommandContextOptions {
+  allGroups: React.MutableRefObject<Map<string, Set<string>>>
+  allItems: React.MutableRefObject<Set<string>>
+  filterItems: () => void
+  ids: React.MutableRefObject<Map<string, { keywords?: string[]; value: string }>>
+  inputId: string
+  label?: string
+  labelId: string
+  listId: string
+  listInnerRef: React.MutableRefObject<HTMLDivElement | null>
+  propsRef: React.MutableRefObject<CommandProps>
+  schedule: (id: string | number, cb: () => void) => void
+  selectFirstItem: () => void
+  size?: "default" | "large"
+  sort: () => void
+  state: React.MutableRefObject<State>
+  store: Store
+  variant?: "default" | "dark"
+}
+
+export function createCommandContext(options: CreateCommandContextOptions): Context {
+  const {
+    allGroups,
+    allItems,
+    filterItems,
+    ids,
+    inputId,
+    label,
+    labelId,
+    listId,
+    listInnerRef,
+    propsRef,
+    schedule,
+    selectFirstItem,
+    size,
+    sort,
+    state,
+    store,
+    variant,
+  } = options
+
+  function score(value: string, keywords?: string[]) {
+    const filter =
+      propsRef.current?.filter ??
+      ((value: string, search: string, keywords?: string[]) =>
+        commandScore(value, search, keywords))
+    return value ? filter(value, state.current.search, keywords) : 0
+  }
+
+  return {
+    // Keep id → {value, keywords} mapping up-to-date
+    value: (id, value, keywords) => {
+      if (value !== ids.current.get(id)?.value) {
+        ids.current.set(id, { value: value || "", keywords })
+        state.current.filtered.items.set(id, score(value || "", keywords))
+        schedule(2, () => {
+          sort()
+          store.emit()
+        })
+      }
+    },
+    // Track item lifecycle (mount, unmount)
+    item: (id, groupId) => {
+      allItems.current.add(id)
+
+      // Track this item within the group
+      if (groupId) {
+        if (!allGroups.current.has(groupId)) {
+          allGroups.current.set(groupId, new Set([id]))
+        } else {
+          allGroups.current.get(groupId)?.add(id)
+        }
+      }
+
+      // Batch this, multiple items can mount in one pass
+      // and we should not be filtering/sorting/emitting each time
+      schedule(3, () => {
+        filterItems()
+        sort()
+
+        // Could be initial mount, select the first item if none already selected
+        if (!state.current.value) {
+          selectFirstItem()
+        }
+
+        store.emit()
+      })
+
+      return () => {
+        ids.current.delete(id)
+        allItems.current.delete(id)
+        state.current.filtered.items.delete(id)
+
+        // Batch this, multiple items could be removed in one pass
+        schedule(4, () => {
+          filterItems()
+
+          // The item removed have been the selected one,
+          // so selection should be moved to the first
+          const ITEM_SELECTOR = `[role="option"]`
+          const selectedItem = listInnerRef.current?.querySelector(
+            `${ITEM_SELECTOR}[aria-selected="true"]`,
+          )
+          if (selectedItem?.getAttribute("id") === id) selectFirstItem()
+
+          store.emit()
+        })
+      }
+    },
+    // Track group lifecycle (mount, unmount)
+    group: (id) => {
+      if (!allGroups.current.has(id)) {
+        allGroups.current.set(id, new Set())
+      }
+
+      return () => {
+        ids.current.delete(id)
+        allGroups.current.delete(id)
+      }
+    },
+    filter: () => {
+      return propsRef.current.shouldFilter !== false
+    },
+    label: label || propsRef.current["aria-label"],
+    getDisablePointerSelection: () => {
+      return propsRef.current.disablePointerSelection ?? false
+    },
+    listId,
+    inputId,
+    labelId,
+    listInnerRef,
+    store,
+    size,
+    variant,
+  }
+}

package/src/context/index.ts

@@ -0,0 +1,2 @@
+export { CommandContext, StoreContext } from "./command-context"
+export { createCommandContext } from "./create-command-context"

package/src/hooks/index.ts

@@ -0,0 +1,10 @@
+export * from "./use-as-ref"
+export * from "./use-command"
+export * from "./use-command-state"
+export * from "./use-schedule-layout-effect"
+export * from "./use-value"
+
+import React from "react"
+import { Group } from "../types"
+
+export const GroupContext = React.createContext<Group | undefined>(undefined)

package/src/hooks/use-as-ref.ts

@@ -0,0 +1,12 @@
+import React, { useRef } from "react"
+import { useIsomorphicLayoutEffect } from "usehooks-ts"
+
+export function useAsRef<T>(data: T): React.MutableRefObject<T> {
+  const ref = useRef<T>(data)
+
+  useIsomorphicLayoutEffect(() => {
+    ref.current = data
+  })
+
+  return ref
+}

package/src/hooks/use-command-state.ts

@@ -0,0 +1,18 @@
+import React from "react"
+import { State } from "../types"
+import { StoreContext } from "../context"
+
+export const useStore = () => {
+  const store = React.useContext(StoreContext)
+  if (!store) {
+    throw new Error("useStore must be used within a Command component")
+  }
+  return store
+}
+
+/** Run a selector against the store state. */
+export function useCommandState<T>(selector: (state: State) => T): T {
+  const store = useStore()
+  const cb = () => selector(store.snapshot())
+  return React.useSyncExternalStore(store.subscribe, cb, cb)
+}

package/src/hooks/use-command.ts

@@ -0,0 +1,10 @@
+import React from "react"
+import { CommandContext } from "../context"
+
+export const useCommand = () => {
+  const context = React.useContext(CommandContext)
+  if (!context) {
+    throw new Error("useCommand must be used within a Command component")
+  }
+  return context
+}

package/src/hooks/use-schedule-layout-effect.ts

@@ -0,0 +1,19 @@
+import { useCallback, useState } from "react"
+import { useIsomorphicLayoutEffect } from "usehooks-ts"
+import { useLazyRef } from "@choice-ui/shared"
+
+/** 在下一个 layout effect 周期内以命令式方式运行函数。 */
+export const useScheduleLayoutEffect = () => {
+  const [updateCount, setUpdateCount] = useState(0)
+  const fns = useLazyRef(() => new Map<string | number, () => void>())
+
+  useIsomorphicLayoutEffect(() => {
+    fns.current.forEach((f) => f())
+    fns.current = new Map()
+  }, [updateCount])
+
+  return useCallback((id: string | number, cb: () => void) => {
+    fns.current.set(id, cb)
+    setUpdateCount((prev) => prev + 1)
+  }, [])
+}

package/src/hooks/use-value.ts

@@ -0,0 +1,39 @@
+import React, { useRef } from "react"
+import { VALUE_ATTR, useLayoutEffect } from "../utils"
+import { useCommand } from "./use-command"
+
+export function useValue(
+  id: string,
+  ref: React.RefObject<HTMLElement>,
+  deps: (string | React.ReactNode | React.RefObject<HTMLElement>)[],
+  aliases: string[] = [],
+) {
+  const valueRef = useRef<string>()
+  const context = useCommand()
+
+  useLayoutEffect(() => {
+    const value = (() => {
+      for (const part of deps) {
+        if (typeof part === "string") {
+          return part.trim()
+        }
+
+        if (typeof part === "object" && part && "current" in part) {
+          if (part.current) {
+            return part.current.textContent?.trim()
+          }
+          return valueRef.current
+        }
+      }
+      return undefined // 关键：和原始实现一致，找不到值时返回undefined
+    })()
+
+    const keywords = aliases.map((alias) => alias.trim())
+
+    context.value(id, value || "", keywords)
+    ref.current?.setAttribute(VALUE_ATTR, value || "")
+    valueRef.current = value
+  }) // 和原始实现一致：故意不使用依赖数组
+
+  return valueRef
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+export { Command as CommandRoot, defaultFilter } from "./command"
+export { useCommandState } from "./hooks"
+
+import { Command as CommandRoot } from "./command"
+import { TabItem } from "@choice-ui/tabs"
+import {
+  CommandDivider,
+  CommandEmpty,
+  CommandFooter,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandLoading,
+  CommandTabs,
+  CommandValue,
+} from "./components"
+
+export const Command = Object.assign(CommandRoot, {
+  Empty: CommandEmpty,
+  Footer: CommandFooter,
+  Group: CommandGroup,
+  Input: CommandInput,
+  Item: CommandItem,
+  List: CommandList,
+  Loading: CommandLoading,
+  Divider: CommandDivider,
+  Value: CommandValue,
+  Tabs: CommandTabs,
+  TabItem: TabItem,
+})

package/src/store/index.ts

@@ -0,0 +1 @@
+// Store is now created inline in command.tsx, following original cmdk pattern

package/src/tv.ts

@@ -0,0 +1,248 @@
+import { tcv } from "@choice-ui/shared"
+
+export const commandTv = tcv({
+  slots: {
+    root: "flex h-full w-full flex-col overflow-hidden",
+    divider: "my-2 h-px",
+  },
+  variants: {
+    variant: {
+      default: {
+        root: "bg-default-background text-default-foreground",
+        divider: "bg-default-boundary",
+      },
+      dark: {
+        root: "bg-menu-background text-white",
+        divider: "bg-menu-boundary",
+      },
+    },
+  },
+})
+
+export const commandInputTv = tcv({
+  slots: {
+    root: "m-2 flex items-center",
+    input: "w-full rounded-lg",
+  },
+  variants: {
+    size: {
+      default: {
+        input: "text-body-medium h-8 px-2",
+      },
+      large: {
+        input: "leading-lg tracking-lg h-10 px-4 text-body-large",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+export const commandListTv = tcv({
+  slots: {
+    root: "px-2 pb-2",
+    content: "flex flex-col",
+  },
+})
+
+export const commandGroupTv = tcv({
+  slots: {
+    root: "flex flex-col gap-1 not-first:mt-4",
+    heading: "text-body-medium px-2",
+  },
+  variants: {
+    variant: {
+      default: {
+        heading: "text-secondary-foreground",
+      },
+      dark: {
+        heading: "text-white/50",
+      },
+    },
+  },
+})
+
+export const commandItemTv = tcv({
+  slots: {
+    root: ["group/item relative flex items-center rounded-lg select-none", "focus:outline-none"],
+    icon: "flex flex-shrink-0 items-center justify-center rounded-md",
+    value: "flex-1 truncate",
+    shortcut: "text-secondary-foreground",
+  },
+  variants: {
+    variant: {
+      default: {},
+      dark: {
+        root: "text-white",
+      },
+    },
+    size: {
+      default: {
+        root: "text-body-medium min-h-8 p-1",
+        icon: "h-6 min-w-6",
+      },
+      large: {
+        root: "leading-lg tracking-lg min-h-10 p-2 text-body-large",
+        icon: "h-6 min-w-6",
+      },
+    },
+    hasPrefix: {
+      true: "",
+      false: "",
+    },
+    hasSuffix: {
+      true: "",
+      false: "",
+    },
+    selected: {
+      true: {},
+      false: {},
+    },
+    disabled: {
+      true: {
+        root: "pointer-events-none",
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      hasPrefix: true,
+      size: "default",
+      class: {
+        root: "gap-1 pl-1",
+      },
+    },
+    {
+      hasPrefix: false,
+      size: "default",
+      class: {
+        root: "pl-2",
+      },
+    },
+    {
+      hasSuffix: true,
+      size: "default",
+      class: {
+        root: "gap-1 pr-1",
+      },
+    },
+    {
+      hasSuffix: false,
+      size: "default",
+      class: {
+        root: "pr-2",
+      },
+    },
+    // large
+    {
+      hasPrefix: true,
+      size: "large",
+      class: {
+        root: "gap-2 pl-2",
+      },
+    },
+    {
+      hasPrefix: false,
+      size: "large",
+      class: {
+        root: "pl-4",
+      },
+    },
+    {
+      hasSuffix: true,
+      size: "large",
+      class: {
+        root: "gap-2 pr-2",
+      },
+    },
+    {
+      hasSuffix: false,
+      size: "large",
+      class: {
+        root: "pr-4",
+      },
+    },
+    {
+      variant: "default",
+      selected: true,
+      class: {
+        root: "bg-secondary-background",
+      },
+    },
+    {
+      variant: "dark",
+      selected: true,
+      class: {
+        root: "bg-gray-700",
+      },
+    },
+    {
+      variant: "default",
+      disabled: true,
+      class: {
+        root: "text-secondary-foreground",
+      },
+    },
+    {
+      variant: "dark",
+      disabled: true,
+      class: {
+        root: "text-white/50",
+      },
+    },
+  ],
+  defaultVariants: {
+    size: "default",
+    hasPrefix: false,
+    hasSuffix: false,
+    variant: "default",
+  },
+})
+
+export const commandFooterTv = tcv({
+  slots: {
+    root: "flex h-10 items-center justify-between border-t px-2",
+  },
+  variants: {
+    variant: {
+      default: {
+        root: "border-default-boundary",
+      },
+      dark: {
+        root: "border-menu-boundary",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+export const commandTabsTv = tcv({
+  slots: {
+    tabs: "mx-2 mb-2",
+  },
+})
+
+export const commandEmptyTv = tcv({
+  slots: {
+    root: "py-6 text-center",
+  },
+  variants: {
+    variant: {
+      default: {
+        root: "text-secondary-foreground",
+      },
+      dark: {
+        root: "text-white/50",
+      },
+    },
+  },
+})
+
+export const commandLoadingTv = tcv({
+  slots: {
+    root: "flex items-center justify-center py-6 text-center",
+  },
+})

package/src/types.ts

@@ -0,0 +1,84 @@
+import React from "react"
+
+export type CommandFilter = (value: string, search: string, keywords?: string[]) => number
+
+export interface CommandProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /**
+   * Optional default item value when it is initially rendered.
+   */
+  defaultValue?: string
+  /**
+   * Optionally set to `true` to disable selection via pointer events.
+   */
+  disablePointerSelection?: boolean
+  /**
+   * Custom filter function for whether each command menu item should matches the given search query.
+   * It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
+   * By default, uses the `command-score` library.
+   */
+  filter?: CommandFilter
+  /**
+   * Accessible label for this command menu. Not shown visibly.
+   */
+  label?: string
+  /**
+   * Optionally set to `true` to turn on looping around when using the arrow keys.
+   */
+  loop?: boolean
+  /**
+   * Event handler called when the selected item of the menu changes.
+   */
+  onChange?: (value: string) => void
+  /**
+   * Optionally set to `false` to turn off the automatic filtering and sorting.
+   * If `false`, you must conditionally render valid items based on the search query yourself.
+   */
+  shouldFilter?: boolean
+  size?: "default" | "large"
+  /**
+   * Optional controlled state of the selected command menu item.
+   */
+  value?: string
+  variant?: "default" | "dark"
+  /**
+   * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
+   */
+  vimBindings?: boolean
+}
+
+export type Context = {
+  filter: () => boolean
+  getDisablePointerSelection: () => boolean
+  group: (id: string) => () => void
+  inputId: string
+  item: (id: string, groupId?: string) => () => void
+  label?: string
+  labelId: string
+  // Ids
+  listId: string
+  // Refs
+  listInnerRef: React.MutableRefObject<HTMLDivElement | null>
+  size?: "default" | "large"
+  store: Store
+  value: (id: string, value?: string, keywords?: string[]) => void
+  variant?: "default" | "dark"
+}
+
+export type State = {
+  filtered: { count: number; groups: Set<string>; items: Map<string, number> }
+  search: string
+  selectedItemId?: string
+  value: string
+}
+
+export type Store = {
+  emit: () => void
+  setState: <K extends keyof State>(key: K, value: State[K], opts?: unknown) => void
+  snapshot: () => State
+  subscribe: (callback: () => void) => () => void
+}
+
+export type Group = {
+  forceMount?: boolean
+  id: string
+}

package/src/utils/constants.ts

@@ -0,0 +1,7 @@
+export const GROUP_SELECTOR = `[role="presentation"]`
+export const GROUP_ITEMS_SELECTOR = `[role="group"]`
+export const GROUP_HEADING_SELECTOR = `[aria-hidden="true"]`
+export const ITEM_SELECTOR = `[role="option"]`
+export const VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`
+export const SELECT_EVENT = `cmdk-item-select`
+export const VALUE_ATTR = `data-value`

package/src/utils/dom.ts

@@ -0,0 +1,19 @@
+export function findNextSibling(el: Element, selector: string): Element | null {
+  let sibling = el.nextElementSibling
+
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.nextElementSibling
+  }
+  return null
+}
+
+export function findPreviousSibling(el: Element, selector: string): Element | null {
+  let sibling = el.previousElementSibling
+
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.previousElementSibling
+  }
+  return null
+}

package/src/utils/helpers.ts

@@ -0,0 +1,45 @@
+import React from "react"
+
+export const useLayoutEffect =
+  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect
+
+export function renderChildren(children: React.ReactElement): React.ReactNode {
+  const childrenType = children.type
+
+  // The children is a function component or class component
+  if (typeof childrenType === "function") {
+    // Try to call as function component first
+    try {
+      return (childrenType as React.FunctionComponent)(children.props)
+    } catch {
+      // If it fails, it might be a class component, return the original element
+      return children
+    }
+  }
+
+  // The children is a component with `forwardRef`
+  if (typeof childrenType === "object" && childrenType !== null && "render" in childrenType) {
+    const forwardRefComponent = childrenType as {
+      render: (props: unknown, ref: unknown) => React.ReactNode
+    }
+    return forwardRefComponent.render(children.props, null)
+  }
+
+  // It's a string, boolean, etc.
+  return children
+}
+
+export function SlottableWithNestedChildren(
+  { asChild, children }: { asChild?: boolean; children?: React.ReactNode },
+  render: (child: React.ReactNode) => JSX.Element,
+) {
+  if (asChild && React.isValidElement(children)) {
+    const renderedChild = renderChildren(children)
+    if (React.isValidElement(renderedChild)) {
+      const childProps = children.props
+      // Use a safer approach that avoids ref type issues
+      return React.cloneElement(renderedChild, {}, render(childProps.children))
+    }
+  }
+  return render(children)
+}