@vertz/ui-primitives 0.2.41 → 0.2.43

package/dist/shared/chunk-z5j7ztf2.js

@@ -1,467 +0,0 @@
-import {
-  createDismiss
-} from "./chunk-a6wp8c32.js";
-import {
-  cn
-} from "./chunk-q7xbcj9q.js";
-import {
-  createFloatingPosition
-} from "./chunk-vef3sepw.js";
-import {
-  linkedIds,
-  uniqueId
-} from "./chunk-8y1jf6xr.js";
-import {
-  Keys,
-  isKey
-} from "./chunk-7867pr13.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 };