@choice-ui/react 1.4.2 → 1.4.5

package/dist/components/command/src/components/command-group.js

@@ -1,64 +1,66 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { forwardRef, useId, useRef, useEffect, useMemo } from "react";
+import React, { memo, forwardRef, useId, useRef, useEffect, useMemo } from "react";
 import { GroupContext } from "../hooks/index.js";
 import { commandGroupTv } from "../tv.js";
 import { useValue } from "../hooks/use-value.js";
 import { useCommand } from "../hooks/use-command.js";
 import { useCommandState } from "../hooks/use-command-state.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
-const 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 = 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 });
-  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 })
-          }
-        )
-      ]
-    }
-  );
-});
+const 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";
 export {
   CommandGroup

package/dist/components/command/src/components/command-input.d.ts

@@ -1,6 +1,6 @@
-import { InputProps } from '../../../input/src';
+import { TextFieldProps } from '../../../text-field/src';
 import { ReactNode } from 'react';
-export interface CommandInputProps extends Omit<InputProps, "value" | "onChange" | "type"> {
+export interface CommandInputProps extends Omit<TextFieldProps, "value" | "onChange" | "type"> {
     onChange?: (search: string) => void;
     prefixElement?: ReactNode;
     suffixElement?: ReactNode;

package/dist/components/command/src/components/command-input.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Input } from "../../../input/dist/index.js";
+import { TextField } from "../../../text-field/dist/index.js";
 import { forwardRef, useEffect } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { commandInputTv } from "../tv.js";
@@ -18,40 +18,41 @@ const 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 == null ? void 0 : onChange(value2);
+    onChange == null ? void 0 : 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
-  ] });
+  return /* @__PURE__ */ jsxs(
+    TextField,
+    {
+      ref,
+      ...rest,
+      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(TextField.Prefix, { children: prefixElement }),
+        suffixElement && /* @__PURE__ */ jsx(TextField.Suffix, { children: suffixElement })
+      ]
+    }
+  );
 });
 CommandInput.displayName = "CommandInput";
 export {

package/dist/components/command/src/components/command-item.d.ts

@@ -13,4 +13,4 @@ export interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSel
     suffixElement?: ReactNode;
     value?: string;
 }
-export declare const CommandItem: React.ForwardRefExoticComponent<Omit<CommandItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CommandItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<CommandItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>>;

package/dist/components/command/src/components/command-item.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Kbd } from "../../../kbd/dist/index.js";
-import React, { forwardRef, useRef, useEffect, useMemo } from "react";
+import React, { memo, forwardRef, useRef, useEffect, useMemo } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { GroupContext } from "../hooks/index.js";
 import { commandItemTv } from "../tv.js";
@@ -8,122 +8,124 @@ import { useCommand } from "../hooks/use-command.js";
 import { useValue } from "../hooks/use-value.js";
 import { useCommandState } from "../hooks/use-command-state.js";
 import { SELECT_EVENT } from "../utils/constants.js";
-import { tcx } from "../../../../shared/utils/tcx/tcx.js";
-const CommandItem = 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 == null ? void 0 : groupContext.forceMount),
-    keywords,
-    onSelect,
-    value
-  });
-  propsRef.current = {
-    disabled,
-    forceMount: forceMount ?? (groupContext == null ? void 0 : groupContext.forceMount),
-    keywords,
-    onSelect,
-    value
-  };
-  useEffect(() => {
-    if (!propsRef.current.forceMount) {
-      return context.item(id, groupContext == null ? void 0 : groupContext.id);
-    }
-  }, [context, groupContext == null ? void 0 : 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 == null ? void 0 : 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 = () => {
-      var _a, _b;
+const 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 == null ? void 0 : groupContext.forceMount),
+      keywords,
+      onSelect,
+      value
+    });
+    propsRef.current = {
+      disabled,
+      forceMount: forceMount ?? (groupContext == null ? void 0 : groupContext.forceMount),
+      keywords,
+      onSelect,
+      value
+    };
+    useEffect(() => {
+      if (!propsRef.current.forceMount) {
+        return context.item(id, groupContext == null ? void 0 : groupContext.id);
+      }
+    }, [context, groupContext == null ? void 0 : 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 == null ? void 0 : 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 = () => {
+        var _a, _b;
+        select();
+        (_b = (_a = propsRef.current).onSelect) == null ? void 0 : _b.call(_a, 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(() => {
+      var _a, _b;
+      if (disabled) return;
       (_b = (_a = propsRef.current).onSelect) == null ? void 0 : _b.call(_a, 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(() => {
-    var _a, _b;
-    if (disabled) return;
-    (_b = (_a = propsRef.current).onSelect) == null ? void 0 : _b.call(_a, 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",
-    {
-      ref: (el) => {
-        ref.current = el;
-        if (typeof forwardedRef === "function") forwardedRef(el);
-        else if (forwardedRef) forwardedRef.current = el;
-      },
-      ...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,
-      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 })
-      ]
-    }
-  );
-});
+    });
+    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";
 export {
   CommandItem

package/dist/components/command/src/components/command-loading.d.ts

@@ -1,6 +1,14 @@
 import { default as React } from 'react';
 export interface CommandLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The label of the loading.
+     * @default "Loading..."
+     */
     label?: string;
+    /**
+     * The progress of the loading.
+     * @default undefined
+     */
     progress?: number;
 }
 export declare const CommandLoading: React.ForwardRefExoticComponent<CommandLoadingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/command/src/components/command-loading.js

@@ -9,7 +9,7 @@ const CommandLoading = forwardRef((props, ref) => {
     "div",
     {
       ref,
-      ...props,
+      ...rest,
       className: tcx(tv.root({ className })),
       role: "progressbar",
       "aria-valuenow": progress,

package/dist/components/command/src/context/create-command-context.js

@@ -1,4 +1,4 @@
-import { commandScore } from "../command-score.js";
+import { commandScore } from "../utils/command-score.js";
 function createCommandContext(options) {
   const {
     allGroups,

package/dist/components/command/src/hooks/use-schedule-layout-effect.d.ts

@@ -1,2 +1,2 @@
-/** 在下一个 layout effect 周期内以命令式方式运行函数。 */
+/** Run functions imperatively in the next layout effect cycle. */
 export declare const useScheduleLayoutEffect: () => (id: string | number, cb: () => void) => void;

package/dist/components/command/src/hooks/use-value.js

@@ -1,11 +1,11 @@
 import { useRef } from "react";
 import { useCommand } from "./use-command.js";
-import { useLayoutEffect } from "../utils/helpers.js";
+import { useIsomorphicLayoutEffect } from "usehooks-ts";
 import { VALUE_ATTR } from "../utils/constants.js";
 function useValue(id, ref, deps, aliases = []) {
   const valueRef = useRef();
   const context = useCommand();
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     var _a;
     const value = (() => {
       var _a2;

package/dist/components/command/src/index.d.ts

@@ -1,15 +1,23 @@
 export { Command as CommandRoot, defaultFilter } from './command';
-export { useCommandState } from './hooks';
-export declare const Command: import('react').ForwardRefExoticComponent<import('./types').CommandProps & import('react').RefAttributes<HTMLDivElement>> & {
+export declare const Command: import('react').ForwardRefExoticComponent<import('../..').CommandProps & import('react').RefAttributes<HTMLDivElement>> & {
     Empty: import('react').ForwardRefExoticComponent<Omit<import('./components').CommandEmptyProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Footer: import('react').ForwardRefExoticComponent<Omit<import('react').HTMLProps<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Group: import('react').ForwardRefExoticComponent<Omit<import('./components').CommandGroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Input: import('react').ForwardRefExoticComponent<Omit<import('./components').CommandInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
-    Item: import('react').ForwardRefExoticComponent<Omit<import('./components').CommandItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    List: import('react').ForwardRefExoticComponent<import('./components').CommandListProps & import('react').RefAttributes<HTMLDivElement>>;
-    Loading: import('react').ForwardRefExoticComponent<import('./components').CommandLoadingProps & import('react').RefAttributes<HTMLDivElement>>;
-    Divider: import('react').ForwardRefExoticComponent<Omit<import('./components').CommandDividerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Group: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<import('../..').CommandGroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>>;
+    Input: import('react').ForwardRefExoticComponent<Omit<import('../..').CommandInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+    Item: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<import('../..').CommandItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>>;
+    List: import('react').ForwardRefExoticComponent<import('../..').CommandListProps & import('react').RefAttributes<HTMLDivElement>>;
+    Loading: import('react').ForwardRefExoticComponent<import('../..').CommandLoadingProps & import('react').RefAttributes<HTMLDivElement>>;
+    Divider: import('react').ForwardRefExoticComponent<Omit<import('../..').CommandDividerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Value: import('react').ForwardRefExoticComponent<Omit<import('react').HTMLProps<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Tabs: import('react').ForwardRefExoticComponent<Omit<import('../../tabs/src').TabsProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     TabItem: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<import('../../tabs/src').TabItemProps, "ref"> & import('react').RefAttributes<HTMLElement>>>;
 };
+export { useCommandState, useCommand, useValue } from './hooks';
+export { commandScore } from './utils';
+export type { CommandProps } from './types';
+export type { CommandGroupProps } from './components/command-group';
+export type { CommandItemProps } from './components/command-item';
+export type { CommandListProps } from './components/command-list';
+export type { CommandLoadingProps } from './components/command-loading';
+export type { CommandDividerProps } from './components/command-divider';
+export type { CommandInputProps } from './components/command-input';