@choice-ui/command 0.0.3 → 0.0.5

package/dist/index.js

@@ -1,15 +1,69 @@
 import { tcv, useLazyRef, tcx } from '@choice-ui/shared';
-import React4, { createContext, forwardRef, useId, useRef, useMemo, useCallback, useEffect, useState } from 'react';
+import React, { createContext, forwardRef, useId, useRef, useMemo, useCallback, memo, useEffect, useState } from 'react';
 import { useIsomorphicLayoutEffect, useEventCallback } from 'usehooks-ts';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Tabs, TabItem } from '@choice-ui/tabs';
-import { Input } from '@choice-ui/input';
+import { TextField } from '@choice-ui/text-field';
 import { Kbd } from '@choice-ui/kbd';
 import { ScrollArea } from '@choice-ui/scroll-area';
 
 // src/command.tsx
+var CommandContext = createContext(void 0);
+var StoreContext = createContext(void 0);
+
+// src/utils/constants.ts
+var GROUP_SELECTOR = `[role="presentation"]`;
+var GROUP_ITEMS_SELECTOR = `[role="group"]`;
+var GROUP_HEADING_SELECTOR = `[aria-hidden="true"]`;
+var ITEM_SELECTOR = `[role="option"]`;
+var VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"]):not([data-hidden="true"])`;
+var SELECT_EVENT = `cmdk-item-select`;
+var VALUE_ATTR = `data-value`;
+
+// src/utils/dom.ts
+function findNextSibling(el, selector) {
+  let sibling = el.nextElementSibling;
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling;
+    sibling = sibling.nextElementSibling;
+  }
+  return null;
+}
+function findPreviousSibling(el, selector) {
+  let sibling = el.previousElementSibling;
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling;
+    sibling = sibling.previousElementSibling;
+  }
+  return null;
+}
+function renderChildren(children) {
+  const childrenType = children.type;
+  if (typeof childrenType === "function") {
+    try {
+      return childrenType(children.props);
+    } catch {
+      return children;
+    }
+  }
+  if (typeof childrenType === "object" && childrenType !== null && "render" in childrenType) {
+    const forwardRefComponent = childrenType;
+    return forwardRefComponent.render(children.props, null);
+  }
+  return children;
+}
+function SlottableWithNestedChildren({ asChild, children }, render) {
+  if (asChild && React.isValidElement(children)) {
+    const renderedChild = renderChildren(children);
+    if (React.isValidElement(renderedChild)) {
+      const childProps = children.props;
+      return React.cloneElement(renderedChild, {}, render(childProps.children));
+    }
+  }
+  return render(children);
+}
 
-// src/command-score.ts
+// src/utils/command-score.ts
 var SCORE_CONTINUE_MATCH = 1;
 var SCORE_SPACE_WORD_JUMP = 0.9;
 var SCORE_NON_SPACE_WORD_JUMP = 0.8;
@@ -110,8 +164,6 @@ function commandScore(string, abbreviation, aliases) {
     {}
   );
 }
-var CommandContext = createContext(void 0);
-var StoreContext = createContext(void 0);
 
 // src/context/create-command-context.ts
 function createCommandContext(options) {
@@ -217,14 +269,14 @@ function useAsRef(data) {
   return ref;
 }
 var useCommand = () => {
-  const context = React4.useContext(CommandContext);
+  const context = React.useContext(CommandContext);
   if (!context) {
     throw new Error("useCommand must be used within a Command component");
   }
   return context;
 };
 var useStore = () => {
-  const store = React4.useContext(StoreContext);
+  const store = React.useContext(StoreContext);
   if (!store) {
     throw new Error("useStore must be used within a Command component");
   }
@@ -233,7 +285,7 @@ var useStore = () => {
 function useCommandState(selector) {
   const store = useStore();
   const cb = () => selector(store.snapshot());
-  return React4.useSyncExternalStore(store.subscribe, cb, cb);
+  return React.useSyncExternalStore(store.subscribe, cb, cb);
 }
 var useScheduleLayoutEffect = () => {
   const [updateCount, setUpdateCount] = useState(0);
@@ -247,65 +299,10 @@ var useScheduleLayoutEffect = () => {
     setUpdateCount((prev) => prev + 1);
   }, []);
 };
-
-// src/utils/constants.ts
-var GROUP_SELECTOR = `[role="presentation"]`;
-var GROUP_ITEMS_SELECTOR = `[role="group"]`;
-var GROUP_HEADING_SELECTOR = `[aria-hidden="true"]`;
-var ITEM_SELECTOR = `[role="option"]`;
-var VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`;
-var SELECT_EVENT = `cmdk-item-select`;
-var VALUE_ATTR = `data-value`;
-
-// src/utils/dom.ts
-function findNextSibling(el, selector) {
-  let sibling = el.nextElementSibling;
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling;
-    sibling = sibling.nextElementSibling;
-  }
-  return null;
-}
-function findPreviousSibling(el, selector) {
-  let sibling = el.previousElementSibling;
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling;
-    sibling = sibling.previousElementSibling;
-  }
-  return null;
-}
-var useLayoutEffect = typeof window === "undefined" ? React4.useEffect : React4.useLayoutEffect;
-function renderChildren(children) {
-  const childrenType = children.type;
-  if (typeof childrenType === "function") {
-    try {
-      return childrenType(children.props);
-    } catch {
-      return children;
-    }
-  }
-  if (typeof childrenType === "object" && childrenType !== null && "render" in childrenType) {
-    const forwardRefComponent = childrenType;
-    return forwardRefComponent.render(children.props, null);
-  }
-  return children;
-}
-function SlottableWithNestedChildren({ asChild, children }, render) {
-  if (asChild && React4.isValidElement(children)) {
-    const renderedChild = renderChildren(children);
-    if (React4.isValidElement(renderedChild)) {
-      const childProps = children.props;
-      return React4.cloneElement(renderedChild, {}, render(childProps.children));
-    }
-  }
-  return render(children);
-}
-
-// src/hooks/use-value.ts
 function useValue(id, ref, deps, aliases = []) {
   const valueRef = useRef();
   const context = useCommand();
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const value = (() => {
       for (const part of deps) {
         if (typeof part === "string") {
@@ -327,7 +324,7 @@ function useValue(id, ref, deps, aliases = []) {
   });
   return valueRef;
 }
-var GroupContext = React4.createContext(void 0);
+var GroupContext = React.createContext(void 0);
 var commandTv = tcv({
   slots: {
     root: "flex h-full w-full flex-col overflow-hidden",
@@ -348,16 +345,13 @@ var commandTv = tcv({
 });
 var commandInputTv = tcv({
   slots: {
-    root: "m-2 flex items-center",
-    input: "w-full rounded-lg"
+    input: "m-2"
   },
   variants: {
     size: {
-      default: {
-        input: "text-body-medium h-8 px-2"
-      },
+      default: {},
       large: {
-        input: "leading-lg tracking-lg h-10 px-4 text-body-large"
+        input: "leading-lg tracking-lg px-4 text-body-large"
       }
     }
   },
@@ -384,6 +378,11 @@ var commandGroupTv = tcv({
       dark: {
         heading: "text-white/50"
       }
+    },
+    hidden: {
+      true: {
+        root: "hidden"
+      }
     }
   }
 });
@@ -427,6 +426,11 @@ var commandItemTv = tcv({
       true: {
         root: "pointer-events-none"
       }
+    },
+    hidden: {
+      true: {
+        root: "hidden"
+      }
     }
   },
   compoundVariants: [
@@ -721,8 +725,10 @@ var Command = forwardRef((props, forwardedRef) => {
     state.current.filtered.groups = /* @__PURE__ */ new Set();
     let itemCount = 0;
     for (const id of allItems.current) {
-      const value2 = ids.current.get(id)?.value ?? "";
-      const keywords = ids.current.get(id)?.keywords ?? [];
+      const itemData = ids.current.get(id);
+      if (!itemData) continue;
+      const value2 = itemData.value ?? "";
+      const keywords = itemData.keywords ?? [];
       const rank = score(value2, keywords);
       state.current.filtered.items.set(id, rank);
       if (rank > 0) itemCount++;
@@ -804,7 +810,7 @@ var Command = forwardRef((props, forwardedRef) => {
       variant
     }),
     []
-    // ❌ 空依赖数组，和原始实现一致
+    // Empty deps array, consistent with original cmdk implementation
   );
   const last = () => updateSelectedToIndex(getValidItems().length - 1);
   const next = (e) => {
@@ -934,59 +940,61 @@ var CommandFooter = forwardRef(
   }
 );
 CommandFooter.displayName = "CommandFooter";
-var CommandGroup = forwardRef((props, forwardedRef) => {
-  const { className, heading, children, forceMount, value, ...rest } = props;
-  const id = useId();
-  const ref = useRef(null);
-  const headingRef = useRef(null);
-  const headingId = React4.useId();
-  const context = useCommand();
-  const render = useCommandState(
-    (state) => forceMount ? true : context.filter() === false ? true : !state.search ? true : state.filtered.groups.has(id)
-  );
-  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 /* @__PURE__ */ jsxs(
-    "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,
-      children: [
-        heading && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: headingRef,
-            className: tcx(tv.heading()),
-            "aria-hidden": true,
-            id: headingId,
-            children: heading
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            role: "group",
-            "aria-labelledby": heading ? headingId : void 0,
-            children: /* @__PURE__ */ jsx(GroupContext.Provider, { value: contextValue, children })
-          }
-        )
-      ]
-    }
-  );
-});
+var CommandGroup = memo(
+  forwardRef((props, forwardedRef) => {
+    const { className, heading, children, forceMount, value, ...rest } = props;
+    const id = useId();
+    const ref = useRef(null);
+    const headingRef = useRef(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)
+    );
+    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, hidden: !render });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (el) => {
+          ref.current = el;
+          if (typeof forwardedRef === "function") forwardedRef(el);
+          else if (forwardedRef) forwardedRef.current = el;
+        },
+        ...rest,
+        className: tv.root({ className }),
+        role: "presentation",
+        "data-value": value,
+        "data-hidden": !render || void 0,
+        children: [
+          heading && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: headingRef,
+              className: tcx(tv.heading()),
+              "aria-hidden": true,
+              id: headingId,
+              children: heading
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "group",
+              "aria-labelledby": heading ? headingId : void 0,
+              children: /* @__PURE__ */ jsx(GroupContext.Provider, { value: contextValue, children })
+            }
+          )
+        ]
+      }
+    );
+  })
+);
 CommandGroup.displayName = "CommandGroup";
 var CommandInput = forwardRef((props, ref) => {
   const { className, onChange, value, prefixElement, suffixElement, ...rest } = props;
@@ -1000,158 +1008,172 @@ var CommandInput = forwardRef((props, ref) => {
       store.setState("search", value);
     }
   }, [value, store]);
-  const handleChange = useEventCallback((value2) => {
+  const handleChange = useEventCallback((newValue) => {
     if (!isControlled) {
-      store.setState("search", value2);
+      store.setState("search", newValue);
     }
-    onChange?.(value2);
+    onChange?.(newValue);
   });
   const tv = commandInputTv({ size: context.size });
-  return /* @__PURE__ */ jsxs("div", { className: tcx(tv.root({ className })), children: [
-    prefixElement,
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        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
-  ] });
-});
-CommandInput.displayName = "CommandInput";
-var CommandItem = forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    disabled,
-    forceMount,
-    keywords,
-    onSelect,
-    value,
-    children,
-    prefixElement,
-    suffixElement,
-    shortcut,
-    ...rest
-  } = props;
-  const ref = useRef(null);
-  const id = React4.useId();
-  const context = useCommand();
-  const groupContext = React4.useContext(GroupContext);
-  const propsRef = useRef({
-    disabled,
-    forceMount: forceMount ?? groupContext?.forceMount,
-    keywords,
-    onSelect,
-    value
-  });
-  propsRef.current = {
-    disabled,
-    forceMount: forceMount ?? groupContext?.forceMount,
-    keywords,
-    onSelect,
-    value
-  };
-  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
-  );
-  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);
-  }, [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 /* @__PURE__ */ jsxs(
-    "div",
+    TextField,
     {
-      ref: (el) => {
-        ref.current = el;
-        if (typeof forwardedRef === "function") forwardedRef(el);
-        else if (forwardedRef) forwardedRef.current = el;
-      },
+      ref,
       ...rest,
-      id,
-      className: tcx(tv.root({ className })),
-      role: "option",
-      "aria-disabled": disabled,
-      "aria-selected": selected || void 0,
-      "data-disabled": disabled,
-      "data-selected": selected,
-      "data-value": valueRef.current,
-      onPointerMove: handlePointerMove,
-      onClick: handleClick,
+      className: tcx(tv.input({ className })),
+      size: "large",
+      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,
       children: [
-        prefixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: prefixElement }),
-        children,
-        hasValidShortcut && /* @__PURE__ */ jsx(
-          Kbd,
-          {
-            className: tv.shortcut(),
-            keys: shortcut.modifier,
-            children: shortcut.keys
-          }
-        ),
-        suffixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: suffixElement })
+        prefixElement && /* @__PURE__ */ jsx(TextField.Prefix, { children: prefixElement }),
+        suffixElement && /* @__PURE__ */ jsx(TextField.Suffix, { children: suffixElement })
       ]
     }
   );
 });
+CommandInput.displayName = "CommandInput";
+var CommandItem = memo(
+  forwardRef((props, forwardedRef) => {
+    const {
+      className,
+      disabled,
+      forceMount,
+      keywords,
+      onSelect,
+      value,
+      children,
+      prefixElement,
+      suffixElement,
+      shortcut,
+      ...rest
+    } = props;
+    const ref = useRef(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
+    };
+    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
+    );
+    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);
+    }, [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,
+      hidden: !render
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (el) => {
+          ref.current = el;
+          if (typeof forwardedRef === "function") forwardedRef(el);
+          else if (forwardedRef) forwardedRef.current = el;
+        },
+        ...rest,
+        id,
+        className: tv.root({ className }),
+        role: "option",
+        "aria-disabled": disabled,
+        "aria-selected": selected || void 0,
+        "data-hidden": !render || void 0,
+        "data-disabled": disabled,
+        "data-selected": selected,
+        "data-value": valueRef.current,
+        onPointerMove: handlePointerMove,
+        onClick: handleClick,
+        children: [
+          prefixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: prefixElement }),
+          children,
+          hasValidShortcut && /* @__PURE__ */ jsx(
+            Kbd,
+            {
+              className: tv.shortcut(),
+              keys: shortcut.modifier,
+              children: shortcut.keys
+            }
+          ),
+          suffixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: suffixElement })
+        ]
+      }
+    );
+  })
+);
 CommandItem.displayName = "CommandItem";
 var CommandList = forwardRef((props, forwardedRef) => {
-  const { children, className, label = "Suggestions", hoverBoundary = "none", ...rest } = props;
+  const {
+    children,
+    className,
+    label = "Suggestions",
+    hoverBoundary = "none",
+    scrollbarMode = "padding-b",
+    orientation,
+    variant,
+    type,
+    ...rest
+  } = props;
   const ref = useRef(null);
   const height = useRef(null);
   const selectedItemId = useCommandState((state) => state.selectedItemId);
@@ -1178,9 +1200,11 @@ var CommandList = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     ScrollArea,
     {
-      variant: context.variant,
+      variant: variant ?? context.variant,
       hoverBoundary,
-      ...rest,
+      scrollbarMode,
+      orientation,
+      type,
       children: /* @__PURE__ */ jsx(
         ScrollArea.Viewport,
         {
@@ -1222,7 +1246,7 @@ var CommandLoading = forwardRef((props, ref) => {
     "div",
     {
       ref,
-      ...props,
+      ...rest,
       className: tcx(tv.root({ className })),
       role: "progressbar",
       "aria-valuenow": progress,
@@ -1297,4 +1321,4 @@ var Command2 = Object.assign(Command, {
   TabItem
 });
 
-export { Command2 as Command, Command as CommandRoot, defaultFilter, useCommandState };
+export { Command2 as Command, Command as CommandRoot, commandScore, defaultFilter, useCommand, useCommandState, useValue };