@choice-ui/react 1.4.2 → 1.4.5

package/dist/components/menubar/src/menubar.js

@@ -0,0 +1,177 @@
+import { jsx } from "react/jsx-runtime";
+import { useFloatingParentNodeId, FloatingTree } from "@floating-ui/react";
+import { memo, forwardRef, useState, useRef, useCallback, useMemo } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { MenubarDivider } from "./components/menubar-divider.js";
+import { MenubarItem } from "./components/menubar-item.js";
+import { MenubarTrigger } from "./components/menubar-trigger.js";
+import { menubarTv } from "./tv.js";
+import { MenubarContext } from "./context/menubar-context.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const MenubarInner = memo(
+  forwardRef(function MenubarInner2(props, ref) {
+    const {
+      className,
+      children,
+      disabled = false,
+      loopFocus = true,
+      dropdownProps,
+      ...rest
+    } = props;
+    const [activeMenuId, setActiveMenuId] = useState(null);
+    const itemsRef = useRef(/* @__PURE__ */ new Map());
+    const itemOrderRef = useRef([]);
+    const hasAnyMenuOpen = activeMenuId !== null;
+    const openMenu = useEventCallback((id) => {
+      if (disabled) return;
+      setActiveMenuId(id);
+    });
+    const closeAllMenus = useEventCallback(() => {
+      setActiveMenuId(null);
+    });
+    const registerItem = useEventCallback((info) => {
+      itemsRef.current.set(info.id, info);
+      if (!itemOrderRef.current.includes(info.id)) {
+        itemOrderRef.current.push(info.id);
+      }
+    });
+    const unregisterItem = useEventCallback((id) => {
+      itemsRef.current.delete(id);
+      itemOrderRef.current = itemOrderRef.current.filter((itemId) => itemId !== id);
+    });
+    const getEnabledItems = useEventCallback(() => {
+      return itemOrderRef.current.filter((id) => {
+        const item = itemsRef.current.get(id);
+        return item && !item.disabled;
+      });
+    });
+    const getCurrentIndex = useCallback(() => {
+      const enabledItems = getEnabledItems();
+      if (!activeMenuId) return -1;
+      return enabledItems.indexOf(activeMenuId);
+    }, [activeMenuId, getEnabledItems]);
+    const navigateNext = useEventCallback(() => {
+      var _a;
+      const enabledItems = getEnabledItems();
+      if (enabledItems.length === 0) return;
+      const currentIndex = getCurrentIndex();
+      let nextIndex;
+      if (currentIndex === -1) {
+        nextIndex = 0;
+      } else if (currentIndex === enabledItems.length - 1) {
+        nextIndex = loopFocus ? 0 : currentIndex;
+      } else {
+        nextIndex = currentIndex + 1;
+      }
+      const nextId = enabledItems[nextIndex];
+      if (nextId) {
+        openMenu(nextId);
+        const item = itemsRef.current.get(nextId);
+        (_a = item == null ? void 0 : item.triggerRef.current) == null ? void 0 : _a.focus();
+      }
+    });
+    const navigatePrev = useEventCallback(() => {
+      var _a;
+      const enabledItems = getEnabledItems();
+      if (enabledItems.length === 0) return;
+      const currentIndex = getCurrentIndex();
+      let prevIndex;
+      if (currentIndex === -1) {
+        prevIndex = enabledItems.length - 1;
+      } else if (currentIndex === 0) {
+        prevIndex = loopFocus ? enabledItems.length - 1 : 0;
+      } else {
+        prevIndex = currentIndex - 1;
+      }
+      const prevId = enabledItems[prevIndex];
+      if (prevId) {
+        openMenu(prevId);
+        const item = itemsRef.current.get(prevId);
+        (_a = item == null ? void 0 : item.triggerRef.current) == null ? void 0 : _a.focus();
+      }
+    });
+    const handleKeyDown = useEventCallback((e) => {
+      if (!hasAnyMenuOpen) return;
+      if (e.defaultPrevented) return;
+      const nextKey = "ArrowRight";
+      const prevKey = "ArrowLeft";
+      if (e.key === nextKey) {
+        e.preventDefault();
+        navigateNext();
+      } else if (e.key === prevKey) {
+        e.preventDefault();
+        navigatePrev();
+      }
+    });
+    const contextValue = useMemo(
+      () => ({
+        activeMenuId,
+        closeAllMenus,
+        dropdownProps: dropdownProps ?? {},
+        hasAnyMenuOpen,
+        loopFocus,
+        navigateNext,
+        navigatePrev,
+        openMenu,
+        registerItem,
+        rootDisabled: disabled,
+        unregisterItem
+      }),
+      [
+        activeMenuId,
+        closeAllMenus,
+        disabled,
+        dropdownProps,
+        hasAnyMenuOpen,
+        loopFocus,
+        navigateNext,
+        navigatePrev,
+        openMenu,
+        registerItem,
+        unregisterItem
+      ]
+    );
+    const tv = menubarTv({ disabled });
+    return /* @__PURE__ */ jsx(MenubarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "menubar",
+        "data-disabled": disabled ? "" : void 0,
+        className: tcx(tv.root(), className),
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children
+      }
+    ) });
+  })
+);
+const MenubarBase = forwardRef(function Menubar2(props, ref) {
+  const parentId = useFloatingParentNodeId();
+  if (parentId !== null) {
+    return /* @__PURE__ */ jsx(
+      MenubarInner,
+      {
+        ref,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(
+    MenubarInner,
+    {
+      ref,
+      ...props
+    }
+  ) });
+});
+const MemoizedMenubar = memo(MenubarBase);
+MemoizedMenubar.displayName = "Menubar";
+const Menubar = Object.assign(MemoizedMenubar, {
+  Divider: MenubarDivider,
+  Item: MenubarItem,
+  Trigger: MenubarTrigger
+});
+export {
+  Menubar
+};

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

@@ -0,0 +1,108 @@
+export declare const menubarTv: import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string[];
+}, undefined, {
+    disabled: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string[];
+}, import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string[];
+}, undefined, unknown, unknown, undefined>>;
+export declare const MenubarTriggerTv: import('tailwind-variants').TVReturnType<{
+    hasPrefix: {
+        false: {};
+        true: {
+            root: string;
+        };
+    };
+    hasSuffix: {
+        false: {};
+        true: {
+            root: string;
+        };
+    };
+    size: {
+        default: {};
+        large: {};
+    };
+}, {
+    root: string;
+    icon: string;
+}, undefined, {
+    hasPrefix: {
+        false: {};
+        true: {
+            root: string;
+        };
+    };
+    hasSuffix: {
+        false: {};
+        true: {
+            root: string;
+        };
+    };
+    size: {
+        default: {};
+        large: {};
+    };
+}, {
+    root: string;
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    hasPrefix: {
+        false: {};
+        true: {
+            root: string;
+        };
+    };
+    hasSuffix: {
+        false: {};
+        true: {
+            root: string;
+        };
+    };
+    size: {
+        default: {};
+        large: {};
+    };
+}, {
+    root: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const MenubarDividerTv: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,72 @@
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+const menubarTv = tcv({
+  slots: {
+    root: ["flex", "gap-1"]
+  },
+  variants: {
+    disabled: {
+      true: {},
+      false: {}
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+const MenubarTriggerTv = tcv({
+  slots: {
+    root: "justify-start text-left",
+    icon: "flex size-6 flex-none items-center justify-center"
+  },
+  variants: {
+    hasPrefix: {
+      false: {},
+      true: { root: "gap-0" }
+    },
+    hasSuffix: {
+      false: {},
+      true: { root: "gap-0" }
+    },
+    size: {
+      default: {},
+      large: {}
+    }
+  },
+  compoundVariants: [
+    {
+      size: "default",
+      hasPrefix: true,
+      class: { root: "pl-0" }
+    },
+    {
+      size: "large",
+      hasPrefix: true,
+      class: { root: "pl-1" }
+    },
+    {
+      size: "default",
+      hasSuffix: true,
+      class: { root: "pr-0" }
+    },
+    {
+      size: "large",
+      hasSuffix: true,
+      class: { root: "pr-0" }
+    }
+  ],
+  defaultVariants: {
+    hasPrefix: false,
+    hasSuffix: false,
+    size: "default"
+  }
+});
+const MenubarDividerTv = tcv({
+  slots: {
+    root: "mx-1 h-4 w-px shrink-0 self-center bg-default-boundary"
+  }
+});
+export {
+  MenubarDividerTv,
+  MenubarTriggerTv,
+  menubarTv
+};

package/dist/components/menubar/tsup.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('tsup').Options | import('tsup').Options[] | ((overrideOptions: import('tsup').Options) => import('tsup').Options | import('tsup').Options[] | Promise<import('tsup').Options | import('tsup').Options[]>);
+export default _default;