@choice-ui/react 1.9.1 → 1.9.3

package/dist/components/dropdown/src/dropdown.d.ts

@@ -2,6 +2,11 @@ import { MenuButton, MenuContextContent, MenuContextItem, MenuContextLabel, Menu
 import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { default as React } from 'react';
 export interface DropdownProps {
+    /**
+     * Active index for keyboard navigation (controlled).
+     * When provided, the component becomes controlled for activeIndex.
+     */
+    activeIndex?: number | null;
     /**
      * Whether to automatically select the first item in coordinate mode.
      * @default true
@@ -14,10 +19,21 @@ export interface DropdownProps {
      */
     avoidCollisions?: boolean;
     children?: React.ReactNode;
+    /**
+     * Disable internal keyboard navigation.
+     * Useful when implementing custom keyboard handling externally.
+     * @default false
+     */
+    disableKeyboardNavigation?: boolean;
     disabledNested?: boolean;
     focusManagerProps?: Partial<FloatingFocusManagerProps>;
     matchTriggerWidth?: boolean;
     offset?: number;
+    /**
+     * Callback when active index changes.
+     * Use with activeIndex prop for controlled keyboard navigation.
+     */
+    onActiveIndexChange?: (index: number | null) => void;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
     placement?: Placement;

package/dist/components/dropdown/src/dropdown.js

@@ -12,8 +12,10 @@ const DEFAULT_OFFSET = 4;
 const DropdownComponent = memo(function DropdownComponent2(props) {
   const {
     children,
+    activeIndex: controlledActiveIndex,
     autoSelectFirstItem = true,
     avoidCollisions = true,
+    disableKeyboardNavigation = false,
     disabledNested = false,
     offset: offsetDistance = DEFAULT_OFFSET,
     placement = "bottom-start",
@@ -23,6 +25,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     selection = false,
     matchTriggerWidth = false,
     open: controlledOpen,
+    onActiveIndexChange,
     onOpenChange,
     triggerRef,
     triggerSelector,
@@ -39,10 +42,12 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
   const { scrollRef, elementsRef, labelsRef, selectTimeoutRef } = useMenuBaseRefs();
   const [isOpen, setIsOpen] = useState(false);
   const [hasFocusInside, setHasFocusInside] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(null);
+  const [internalActiveIndex, setInternalActiveIndex] = useState(null);
   const [scrollTop, setScrollTop] = useState(0);
   const [touch, setTouch] = useState(false);
   const [isMouseOverMenu, setIsMouseOverMenu] = useState(false);
+  const isControlledActiveIndex = controlledActiveIndex !== void 0;
+  const activeIndex = isControlledActiveIndex ? controlledActiveIndex : internalActiveIndex;
   const isCoordinateMode = position !== null && position !== void 0;
   const isControlledOpen = isCoordinateMode ? controlledOpen || false : controlledOpen === void 0 ? isOpen : controlledOpen;
   const baseId = useId();
@@ -119,6 +124,12 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     middleware,
     whileElementsMounted: autoUpdate
   });
+  const handleSetActiveIndex = useEventCallback((index) => {
+    if (!isControlledActiveIndex) {
+      setInternalActiveIndex(index);
+    }
+    onActiveIndexChange == null ? void 0 : onActiveIndexChange(index);
+  });
   useIsomorphicLayoutEffect(() => {
     if (position && isCoordinateMode && isControlledOpen && (!lastPositionRef.current || lastPositionRef.current.x !== position.x || lastPositionRef.current.y !== position.y)) {
       setVirtualPosition(position);
@@ -127,14 +138,14 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
   }, [position, isCoordinateMode, isControlledOpen, setVirtualPosition]);
   useEffect(() => {
     if (isCoordinateMode && isControlledOpen && activeIndex === null && !isMouseOverMenu) {
-      setActiveIndex(autoSelectFirstItem ? 0 : null);
+      handleSetActiveIndex(autoSelectFirstItem ? 0 : null);
     }
-  }, [isCoordinateMode, isControlledOpen, activeIndex, isMouseOverMenu, autoSelectFirstItem]);
+  }, [isCoordinateMode, isControlledOpen, activeIndex, isMouseOverMenu, autoSelectFirstItem, handleSetActiveIndex]);
   useEffect(() => {
     if (isCoordinateMode && !isControlledOpen) {
-      setActiveIndex(null);
+      handleSetActiveIndex(null);
     }
-  }, [isCoordinateMode, isControlledOpen]);
+  }, [isCoordinateMode, isControlledOpen, handleSetActiveIndex]);
   const isOpenRef = useRef(isControlledOpen);
   isOpenRef.current = isControlledOpen;
   useEffect(() => {
@@ -170,7 +181,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     escapeKey: true
   });
   const handleNavigate = useEventCallback((index) => {
-    setActiveIndex(index);
+    handleSetActiveIndex(index);
     if (tree && index !== null) {
       tree.events.emit("navigate", { nodeId, index });
     }
@@ -180,12 +191,14 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     activeIndex,
     nested: isNested,
     onNavigate: handleNavigate,
-    loop: true
+    loop: true,
+    enabled: !disableKeyboardNavigation
   });
   const typeahead = useTypeahead(context, {
     listRef: labelsRef,
-    onMatch: isControlledOpen ? setActiveIndex : void 0,
-    activeIndex
+    onMatch: isControlledOpen ? handleSetActiveIndex : void 0,
+    activeIndex,
+    enabled: !disableKeyboardNavigation
   });
   const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
     hover,
@@ -278,7 +291,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
   const contextValue = useMemo(
     () => ({
       activeIndex,
-      setActiveIndex,
+      setActiveIndex: handleSetActiveIndex,
       getItemProps,
       setHasFocusInside,
       isOpen: isControlledOpen,
@@ -287,7 +300,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
       close: handleClose,
       variant
     }),
-    [activeIndex, getItemProps, handleClose, isControlledOpen, readOnly, selection, variant]
+    [activeIndex, getItemProps, handleClose, handleSetActiveIndex, isControlledOpen, readOnly, selection, variant]
   );
   const parentActiveIndex = parent == null ? void 0 : parent.activeIndex;
   const parentGetItemProps = parent == null ? void 0 : parent.getItemProps;

package/dist/components/list/dist/index.d.ts

@@ -67,7 +67,7 @@ interface ListProps extends Omit<HTMLProps<HTMLDivElement>, "size" | "as"> {
     selection?: boolean;
     shouldShowReferenceLine?: boolean;
     size?: "default" | "large";
-    variant?: "default" | "primary";
+    variant?: "default" | "primary" | "dark" | "reset";
 }
 interface ListComponentProps extends React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>> {
     Content: typeof ListContent;

package/dist/components/list/src/components/list-content.js

@@ -6,7 +6,7 @@ import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const ListContent = forwardRef((props, ref) => {
   const { as: As = "div", children, className, parentId, ...rest } = props;
   const { isSubListExpanded } = useExpandContext();
-  const { itemsMap, shouldShowReferenceLine, size } = useStructureContext();
+  const { itemsMap, shouldShowReferenceLine, size, variant } = useStructureContext();
   const level = useMemo(() => {
     if (!parentId) return 0;
     let currentLevel = 1;
@@ -32,7 +32,8 @@ const ListContent = forwardRef((props, ref) => {
   const tv = ListContentTv({
     showReferenceLine: shouldShowReferenceLine,
     level: safeLevel,
-    size
+    size,
+    variant
   });
   return /* @__PURE__ */ jsx(LevelContext.Provider, { value: { level: safeLevel }, children: /* @__PURE__ */ jsx(
     As,

package/dist/components/list/src/components/list-divider.js

@@ -1,11 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { ListDividerTv } from "../tv.js";
+import { useStructureContext } from "../context/list-context.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const ListDivider = forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
-    const tv = ListDividerTv();
+    const { variant = "default" } = useStructureContext();
+    const tv = ListDividerTv({ variant });
     return /* @__PURE__ */ jsx(
       "div",
       {

package/dist/components/list/src/context/list-context.d.ts

@@ -28,7 +28,7 @@ interface StructureContextValue {
     shouldShowReferenceLine?: boolean;
     size?: "default" | "large";
     unregisterItem: (id: string) => void;
-    variant?: "default" | "primary";
+    variant?: "default" | "primary" | "dark" | "reset";
 }
 export declare const StructureContext: import('react').Context<StructureContextValue | undefined>;
 export declare function useStructureContext(): StructureContextValue;

package/dist/components/list/src/context/list-provider.d.ts

@@ -5,7 +5,7 @@ interface ListProviderProps {
     selection?: boolean;
     shouldShowReferenceLine?: boolean;
     size?: "default" | "large";
-    variant?: "default" | "primary";
+    variant?: "default" | "primary" | "dark" | "reset";
 }
 export declare function ListProvider({ children, interactive, shouldShowReferenceLine, selection, variant, size, }: ListProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/list/src/list.d.ts

@@ -12,7 +12,7 @@ export interface ListProps extends Omit<HTMLProps<HTMLDivElement>, "size" | "as"
     selection?: boolean;
     shouldShowReferenceLine?: boolean;
     size?: "default" | "large";
-    variant?: "default" | "primary";
+    variant?: "default" | "primary" | "dark" | "reset";
 }
 interface ListComponentProps extends React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>> {
     Content: typeof ListContent;

package/dist/components/list/src/tv.d.ts

@@ -28,6 +28,8 @@ export declare const ListItemTv: import('tailwind-variants').TVReturnType<{
     variant: {
         default: {};
         primary: {};
+        dark: {};
+        reset: {};
     };
     size: {
         default: {
@@ -78,6 +80,8 @@ export declare const ListItemTv: import('tailwind-variants').TVReturnType<{
     variant: {
         default: {};
         primary: {};
+        dark: {};
+        reset: {};
     };
     size: {
         default: {
@@ -128,6 +132,8 @@ export declare const ListItemTv: import('tailwind-variants').TVReturnType<{
     variant: {
         default: {};
         primary: {};
+        dark: {};
+        reset: {};
     };
     size: {
         default: {
@@ -167,33 +173,51 @@ export declare const ListLabelTv: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, "flex h-6 w-full flex-none items-center gap-2 opacity-50", unknown, unknown, undefined>>;
 export declare const ListDividerTv: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            root?: import('tailwind-merge').ClassNameValue;
-            divider?: import('tailwind-merge').ClassNameValue;
+    variant: {
+        default: {
+            divider: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            root?: import('tailwind-merge').ClassNameValue;
-            divider?: import('tailwind-merge').ClassNameValue;
+        primary: {
+            divider: string;
+        };
+        dark: {
+            divider: string;
         };
+        reset: {};
     };
-} | {}, {
+}, {
     root: string;
     divider: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            root?: import('tailwind-merge').ClassNameValue;
-            divider?: import('tailwind-merge').ClassNameValue;
+    variant: {
+        default: {
+            divider: string;
+        };
+        primary: {
+            divider: string;
         };
+        dark: {
+            divider: string;
+        };
+        reset: {};
     };
-} | {}, {
+}, {
     root: string;
     divider: string;
-}, import('tailwind-variants').TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {
+            divider: string;
+        };
+        primary: {
+            divider: string;
+        };
+        dark: {
+            divider: string;
+        };
+        reset: {};
+    };
+}, {
     root: string;
     divider: string;
 }, undefined, unknown, unknown, undefined>>;
@@ -206,6 +230,12 @@ export declare const ListContentTv: import('tailwind-variants').TVReturnType<{
         default: {};
         large: {};
     };
+    variant: {
+        default: {};
+        primary: {};
+        dark: {};
+        reset: {};
+    };
     level: {
         0: string;
         1: string;
@@ -223,6 +253,12 @@ export declare const ListContentTv: import('tailwind-variants').TVReturnType<{
         default: {};
         large: {};
     };
+    variant: {
+        default: {};
+        primary: {};
+        dark: {};
+        reset: {};
+    };
     level: {
         0: string;
         1: string;
@@ -240,6 +276,12 @@ export declare const ListContentTv: import('tailwind-variants').TVReturnType<{
         default: {};
         large: {};
     };
+    variant: {
+        default: {};
+        primary: {};
+        dark: {};
+        reset: {};
+    };
     level: {
         0: string;
         1: string;

package/dist/components/list/src/tv.js

@@ -46,7 +46,9 @@ const ListItemTv = tcv({
     },
     variant: {
       default: {},
-      primary: {}
+      primary: {},
+      dark: {},
+      reset: {}
     },
     size: {
       default: {
@@ -91,6 +93,15 @@ const ListItemTv = tcv({
         shortcut: "text-default-foreground"
       }
     },
+    {
+      disabled: false,
+      active: true,
+      variant: "dark",
+      class: {
+        root: "bg-white/10",
+        shortcut: "text-white"
+      }
+    },
     {
       size: "default",
       hasPrefix: false,
@@ -208,9 +219,25 @@ const ListLabelTv = tcv({
 const ListDividerTv = tcv({
   slots: {
     root: "flex h-4 w-full flex-none items-center",
-    divider: "bg-default-boundary h-px flex-1"
+    divider: "h-px flex-1"
   },
-  defaultVariants: {}
+  variants: {
+    variant: {
+      default: {
+        divider: "bg-default-boundary"
+      },
+      primary: {
+        divider: "bg-default-boundary"
+      },
+      dark: {
+        divider: "bg-white/10"
+      },
+      reset: {}
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
 });
 const ListContentTv = tcv({
   base: "group/list flex flex-col gap-1",
@@ -223,6 +250,12 @@ const ListContentTv = tcv({
       default: {},
       large: {}
     },
+    variant: {
+      default: {},
+      primary: {},
+      dark: {},
+      reset: {}
+    },
     level: {
       0: "",
       1: "",
@@ -238,10 +271,17 @@ const ListContentTv = tcv({
       level: [1, 2, 3, 4, 5],
       class: [
         "relative",
-        "before:absolute before:inset-y-0 before:z-1 before:w-px before:content-['']",
-        "group-hover/list:before:bg-default-boundary"
+        "before:absolute before:inset-y-0 before:z-1 before:w-px before:content-['']"
       ]
     },
+    {
+      variant: ["default", "primary"],
+      class: "group-hover/list:before:bg-default-boundary"
+    },
+    {
+      variant: "dark",
+      class: "group-hover/list:before:bg-white/10"
+    },
     {
       size: "default",
       level: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",