@choice-ui/command 0.0.3 → 0.0.4

package/src/components/command-item.tsx

@@ -1,165 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

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

@@ -1,140 +0,0 @@
-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

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

package/src/hooks/index.ts

@@ -1,10 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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