@vertz/ui-primitives 0.2.23 → 0.2.25

package/dist/shared/chunk-4z006v1j.js

@@ -0,0 +1,467 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  linkedIds,
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/menubar/menubar-composed.tsx
+import { computed } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, onMount, ref, useContext } from "@vertz/ui";
+var MenubarContext = createContext(undefined, "@vertz/ui-primitives::MenubarContext");
+function useMenubarContext(componentName) {
+  const ctx = useContext(MenubarContext);
+  if (!ctx) {
+    throw new Error(`<Menubar.${componentName}> must be used inside <Menubar>. ` + "Ensure it is a direct or nested child of the Menubar root component.");
+  }
+  return ctx;
+}
+var MenuContext = createContext(undefined, "@vertz/ui-primitives::MenubarMenuContext");
+function useMenuContext(componentName) {
+  const ctx = useContext(MenuContext);
+  if (!ctx) {
+    throw new Error(`<Menubar.${componentName}> must be used inside <Menubar.Menu>. ` + "Ensure it is a direct or nested child of a Menubar.Menu component.");
+  }
+  return ctx;
+}
+function MenubarMenu(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const barCtx = useMenubarContext("Menu");
+    const ids = linkedIds("menubar-menu");
+    const menuCtx = {
+      menuValue: __props.value,
+      triggerId: ids.triggerId,
+      contentId: ids.contentId,
+      classes: barCtx.classes
+    };
+    const __mfResult0 = MenuContext.Provider({ get value() {
+      return menuCtx;
+    }, children: () => (() => {
+      const __el0 = __element("span");
+      {
+        const __v = { display: "contents" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __el0.setAttribute("data-menubar-menu", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function MenubarTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const menuCtx = useMenuContext("Trigger");
+    const barCtx = useMenubarContext("Trigger");
+    const el = computed(() => (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("role", "menuitem");
+      {
+        const __v = menuCtx.triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = menuCtx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-haspopup", "menu");
+      __el0.setAttribute("data-menubar-trigger", "");
+      {
+        const __v = menuCtx.menuValue;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-expanded", "false");
+      __el0.setAttribute("data-state", "closed");
+      __attr(__el0, "class", () => cn(menuCtx.classes?.trigger, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children ?? menuCtx.menuValue));
+      __exitChildren();
+      return __el0;
+    })());
+    onMount(() => {
+      const btnEl = el.value;
+      function handleClick() {
+        if (barCtx.getActiveMenu() === menuCtx.menuValue) {
+          barCtx.closeAll();
+        } else {
+          barCtx.openMenu(menuCtx.menuValue);
+        }
+      }
+      function handleKeydown(event) {
+        if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          barCtx.openMenu(menuCtx.menuValue);
+        }
+      }
+      btnEl.addEventListener("click", handleClick);
+      btnEl.addEventListener("keydown", handleKeydown);
+      return () => {
+        btnEl.removeEventListener("click", handleClick);
+        btnEl.removeEventListener("keydown", handleKeydown);
+      };
+    });
+    const __mfResult0 = el.value;
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function MenubarContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const menuCtx = useMenuContext("Content");
+    const barCtx = useMenubarContext("Content");
+    const el = computed(() => (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "menu");
+      {
+        const __v = menuCtx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-menubar-content", "");
+      {
+        const __v = menuCtx.menuValue;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-hidden", "true");
+      __el0.setAttribute("data-state", "closed");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __attr(__el0, "class", () => cn(menuCtx.classes?.content, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })());
+    onMount(() => {
+      const contentEl = el.value;
+      function handleKeydown(event) {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          barCtx.closeAll();
+          const root = barCtx.rootRef.current;
+          if (root) {
+            const trigger = root.querySelector(`[data-menubar-trigger][data-value="${menuCtx.menuValue}"]`);
+            trigger?.focus();
+          }
+          return;
+        }
+        if (isKey(event, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          const items = [...contentEl.querySelectorAll('[role="menuitem"]')];
+          const active = items.find((item) => item === document.activeElement);
+          if (active) {
+            const val = active.getAttribute("data-value");
+            if (val !== null) {
+              barCtx.getOnSelect()?.(val);
+              barCtx.closeAll();
+            }
+          }
+          return;
+        }
+        if (isKey(event, Keys.ArrowDown, Keys.ArrowUp)) {
+          event.preventDefault();
+          const items = [...contentEl.querySelectorAll('[role="menuitem"]')];
+          if (items.length === 0)
+            return;
+          const currentIdx = items.indexOf(document.activeElement);
+          const direction = isKey(event, Keys.ArrowDown) ? 1 : -1;
+          const nextIdx = ((currentIdx + direction) % items.length + items.length) % items.length;
+          items[nextIdx]?.focus();
+          return;
+        }
+        if (isKey(event, Keys.ArrowRight)) {
+          event.preventDefault();
+          event.stopPropagation();
+          barCtx.navigateMenu(1);
+          return;
+        }
+        if (isKey(event, Keys.ArrowLeft)) {
+          event.preventDefault();
+          event.stopPropagation();
+          barCtx.navigateMenu(-1);
+          return;
+        }
+      }
+      contentEl.addEventListener("keydown", handleKeydown);
+      return () => {
+        contentEl.removeEventListener("keydown", handleKeydown);
+      };
+    });
+    const __mfResult0 = el.value;
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function MenubarItem(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const barCtx = useMenubarContext("Item");
+    const menuCtx = useMenuContext("Item");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "menuitem");
+      __el0.setAttribute("data-menubar-item", "");
+      __attr(__el0, "data-value", () => __props.value);
+      __el0.setAttribute("tabindex", "-1");
+      __attr(__el0, "class", () => cn(menuCtx.classes?.item, __props.className ?? __props.class));
+      __on(__el0, "click", () => {
+        barCtx.getOnSelect()?.(__props.value);
+        barCtx.closeAll();
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function MenubarGroup(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const menuCtx = useMenuContext("Group");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "group");
+      __attr(__el0, "aria-label", () => __props.label);
+      __attr(__el0, "class", () => cn(menuCtx.classes?.group, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function MenubarLabel(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { classes } = useMenuContext("Label");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "none");
+      __attr(__el0, "class", () => cn(classes?.label, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function MenubarSeparator(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { classes } = useMenuContext("Separator");
+    const __mfResult0 = (() => {
+      const __el0 = __element("hr");
+      __el0.setAttribute("role", "separator");
+      __attr(__el0, "class", () => cn(classes?.separator, __props.className ?? __props.class));
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedMenubarRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let getRootEl = function() {
+      return rootRef.current ?? null;
+    }, getMenuItems = function(contentEl) {
+      return [...contentEl.querySelectorAll('[role="menuitem"]')];
+    }, getMenuValues = function() {
+      const root = getRootEl();
+      if (!root)
+        return [];
+      const triggers = root.querySelectorAll("[data-menubar-trigger]");
+      return [...triggers].map((t) => t.getAttribute("data-value"));
+    }, closeAll = function() {
+      const root = getRootEl();
+      if (!root)
+        return;
+      const triggers = root.querySelectorAll("[data-menubar-trigger]");
+      const contents = root.querySelectorAll("[data-menubar-content]");
+      for (const trigger of triggers) {
+        trigger.setAttribute("aria-expanded", "false");
+        trigger.setAttribute("data-state", "closed");
+      }
+      for (const content of contents) {
+        content.setAttribute("data-state", "closed");
+        content.setAttribute("aria-hidden", "true");
+        content.style.display = "none";
+      }
+      state.activeMenu = null;
+      state.floatingCleanup?.();
+      state.floatingCleanup = null;
+      state.dismissCleanup?.();
+      state.dismissCleanup = null;
+    }, openMenu = function(value) {
+      const root = getRootEl();
+      if (!root)
+        return;
+      const current = state.activeMenu;
+      if (current && current !== value) {
+        const prevTrigger = root.querySelector(`[data-menubar-trigger][data-value="${current}"]`);
+        const prevContent = root.querySelector(`[data-menubar-content][data-value="${current}"]`);
+        if (prevTrigger) {
+          prevTrigger.setAttribute("aria-expanded", "false");
+          prevTrigger.setAttribute("data-state", "closed");
+        }
+        if (prevContent) {
+          prevContent.setAttribute("data-state", "closed");
+          prevContent.setAttribute("aria-hidden", "true");
+          prevContent.style.display = "none";
+        }
+        state.floatingCleanup?.();
+        state.floatingCleanup = null;
+      }
+      const trigger = root.querySelector(`[data-menubar-trigger][data-value="${value}"]`);
+      const content = root.querySelector(`[data-menubar-content][data-value="${value}"]`);
+      if (!trigger || !content)
+        return;
+      state.activeMenu = value;
+      trigger.setAttribute("aria-expanded", "true");
+      trigger.setAttribute("data-state", "open");
+      content.setAttribute("aria-hidden", "false");
+      content.setAttribute("data-state", "open");
+      content.style.display = "";
+      {
+        const floatingOpts = __props.positioning ?? { placement: "bottom-start", offset: 4 };
+        content.style.position = "fixed";
+        const result = createFloatingPosition(trigger, content, floatingOpts);
+        state.floatingCleanup = result.cleanup;
+        if (!state.dismissCleanup) {
+          state.dismissCleanup = createDismiss({
+            onDismiss: closeAll,
+            insideElements: [root],
+            escapeKey: false
+          });
+        }
+      }
+      const items = getMenuItems(content);
+      const firstItem = items[0];
+      if (firstItem) {
+        firstItem.setAttribute("tabindex", "0");
+        firstItem.focus();
+      }
+    }, navigateMenu = function(direction) {
+      const values = getMenuValues();
+      if (values.length === 0)
+        return;
+      const currentIdx = state.activeMenu ? values.indexOf(state.activeMenu) : -1;
+      const nextIdx = ((currentIdx + direction) % values.length + values.length) % values.length;
+      const nextValue = values[nextIdx];
+      if (nextValue) {
+        openMenu(nextValue);
+      }
+    };
+    const rootId = uniqueId("menubar");
+    const rootRef = ref();
+    const state = { activeMenu: null, floatingCleanup: null, dismissCleanup: null };
+    const ctx = {
+      rootId,
+      rootRef,
+      classes: __props.classes,
+      getOnSelect: () => __props.onSelect,
+      getPositioning: () => __props.positioning,
+      getActiveMenu: () => state.activeMenu,
+      openMenu,
+      closeAll,
+      navigateMenu
+    };
+    const __mfResult0 = MenubarContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      rootRef.current = __el0;
+      __el0.setAttribute("role", "menubar");
+      {
+        const __v = rootId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __on(__el0, "keydown", (event) => {
+        if (state.activeMenu && isKey(event, Keys.ArrowRight)) {
+          event.preventDefault();
+          navigateMenu(1);
+        } else if (state.activeMenu && isKey(event, Keys.ArrowLeft)) {
+          event.preventDefault();
+          navigateMenu(-1);
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedMenubar = Object.assign(ComposedMenubarRoot, {
+  Menu: MenubarMenu,
+  Trigger: MenubarTrigger,
+  Content: MenubarContent,
+  Item: MenubarItem,
+  Group: MenubarGroup,
+  Label: MenubarLabel,
+  Separator: MenubarSeparator
+});
+
+export { ComposedMenubar };

package/dist/shared/{chunk-b25npqer.js → chunk-585ysr70.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-e2v1c9ex.js";
 import {
   createFloatingPosition
-} from "./chunk-0mcr52hc.js";
+} from "./chunk-vef3sepw.js";
 import {
   Keys,
   isKey