@choice-ui/command 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -43,6 +43,10 @@ interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSelect"> {
     keywords?: string[];
     onSelect?: (value: string) => void;
     prefixElement?: ReactNode;
+    /**
+     * When true, this item will be set as the selected item and scrolled into view.
+     */
+    selected?: boolean;
     shortcut?: {
         keys?: ReactNode;
         modifier?: KbdKey | KbdKey[] | undefined;
@@ -54,6 +58,9 @@ interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSelect"> {
 interface CommandListProps extends ScrollAreaProps {
     children: React.ReactNode;
     className?: string;
+    classNames?: {
+        content?: string;
+    };
     label?: string;
 }
 
@@ -106,6 +113,11 @@ interface CommandProps extends Omit<react__default.HTMLAttributes<HTMLDivElement
      * Event handler called when the selected item of the menu changes.
      */
     onChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to enable selection mode.
+     * When enabled, items with `selected` prop will be scrolled into view on mount.
+     */
+    selection?: boolean;
     /**
      * 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.
@@ -140,6 +152,7 @@ type Context = {
     labelId: string;
     listId: string;
     listInnerRef: react__default.MutableRefObject<HTMLDivElement | null>;
+    selection?: boolean;
     size?: "default" | "large";
     store: Store;
     value: (id: string, value?: string, keywords?: string[]) => void;

package/dist/index.js

@@ -180,6 +180,7 @@ function createCommandContext(options) {
     propsRef,
     schedule,
     selectFirstItem,
+    selection,
     size,
     sort,
     state,
@@ -256,6 +257,7 @@ function createCommandContext(options) {
     inputId,
     labelId,
     listInnerRef,
+    selection,
     store,
     size,
     variant
@@ -333,7 +335,7 @@ var commandTv = tcv({
   variants: {
     variant: {
       default: {
-        root: "bg-default-background text-default-foreground",
+        root: "text-default-foreground",
         divider: "bg-default-boundary"
       },
       dark: {
@@ -600,6 +602,7 @@ var Command = forwardRef((props, forwardedRef) => {
     onChange: onValueChange,
     filter,
     shouldFilter,
+    selection,
     loop,
     size = "default",
     variant = "default",
@@ -803,6 +806,7 @@ var Command = forwardRef((props, forwardedRef) => {
       propsRef,
       schedule,
       selectFirstItem,
+      selection,
       size,
       sort,
       state,
@@ -1053,6 +1057,7 @@ var CommandItem = memo(
       forceMount,
       keywords,
       onSelect,
+      selected: selectedProp,
       value,
       children,
       prefixElement,
@@ -1087,6 +1092,11 @@ var CommandItem = memo(
     const stableKeywords = useMemo(() => keywords || [], [keywords]);
     const valueRef = useValue(id, ref, valueDeps, stableKeywords);
     const store = context.store;
+    useEffect(() => {
+      if (context.selection && selectedProp && valueRef.current) {
+        store.setState("value", valueRef.current);
+      }
+    }, [selectedProp]);
     const selected = useCommandState(
       (state) => Boolean(state.value && state.value === valueRef?.current)
     );
@@ -1169,6 +1179,9 @@ var CommandList = forwardRef((props, forwardedRef) => {
     label = "Suggestions",
     hoverBoundary = "none",
     scrollbarMode = "padding-b",
+    classNames = {
+      content: ""
+    },
     orientation,
     variant,
     type,
@@ -1215,6 +1228,7 @@ var CommandList = forwardRef((props, forwardedRef) => {
           },
           ...rest,
           className: tcx(tv.root({ className })),
+          style: context.selection ? { scrollPaddingBlock: 8 } : void 0,
           role: "listbox",
           tabIndex: -1,
           "aria-activedescendant": selectedItemId,
@@ -1223,7 +1237,7 @@ var CommandList = forwardRef((props, forwardedRef) => {
           children: /* @__PURE__ */ jsx(
             ScrollArea.Content,
             {
-              className: tcx(tv.content()),
+              className: tcx(tv.content(), classNames?.content),
               ref: (el) => {
                 height.current = el;
                 if (context.listInnerRef) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/command",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "A command palette component for quick actions, search, and keyboard navigation",
   "sideEffects": false,
   "type": "module",
@@ -21,7 +21,7 @@
   "dependencies": {
     "usehooks-ts": "^3.1.0",
     "@choice-ui/shared": "^0.0.1",
-    "@choice-ui/text-field": "^0.0.7",
+    "@choice-ui/text-field": "^0.0.10",
     "@choice-ui/kbd": "^0.0.4",
     "@choice-ui/scroll-area": "^0.0.7",
     "@choice-ui/tabs": "^0.0.5"