@iris-ui-kit/vue 0.2.26 → 0.2.27

package/dist/admin.cjs

@@ -626,10 +626,317 @@ function installNavMenuStyles() {
   document.head.appendChild(style);
   installed = true;
 }
+var HOVER_OPEN_DELAY_VAL = 60;
+var HOVER_CLOSE_DELAY_VAL = 150;
+function createNavMenuFlyout(ctx) {
+  const hovered = vue.ref(null);
+  const hoveredBranches = vue.ref([]);
+  const focusedBranches = vue.ref([]);
+  const clickedBranches = vue.ref([]);
+  let suppressFocusOpen = false;
+  let openTimer = null;
+  const closeTimers = /* @__PURE__ */ new Map();
+  const clearOpenTimer = () => {
+    if (openTimer) {
+      clearTimeout(openTimer);
+      openTimer = null;
+    }
+  };
+  const cancelClose = (key) => {
+    const timer = closeTimers.get(key);
+    if (timer) {
+      clearTimeout(timer);
+      closeTimers.delete(key);
+    }
+  };
+  const cancelAllTimers = () => {
+    clearOpenTimer();
+    for (const timer of closeTimers.values()) clearTimeout(timer);
+    closeTimers.clear();
+  };
+  vue.onBeforeUnmount(cancelAllTimers);
+  const flyoutTriggers = /* @__PURE__ */ new Map();
+  const flyoutPanels = /* @__PURE__ */ new Map();
+  const setFlyoutRef = (map, key, el) => {
+    if (el instanceof HTMLElement) map.set(key, el);
+    else map.delete(key);
+  };
+  const positionFlyout = (key) => {
+    const trigger = flyoutTriggers.get(key);
+    const panel = flyoutPanels.get(key);
+    if (!trigger || !panel || typeof document === "undefined") return;
+    const rect = trigger.getBoundingClientRect();
+    const dir = getComputedStyle(trigger).direction;
+    panel.style.position = "fixed";
+    panel.style.top = `${ctx.collapsed ? rect.top : rect.bottom}px`;
+    if (dir === "rtl") {
+      panel.style.left = "";
+      panel.style.right = `${window.innerWidth - (ctx.collapsed ? rect.left : rect.right)}px`;
+    } else {
+      panel.style.right = "";
+      panel.style.left = `${ctx.collapsed ? rect.right : rect.left}px`;
+    }
+  };
+  vue.onBeforeUnmount(() => {
+    detachViewportListeners();
+    flyoutTriggers.clear();
+    flyoutPanels.clear();
+  });
+  const isolateAtDepth = (key) => {
+    const depth = core.findNavPath(ctx.items, key).length - 1;
+    const isSameDepthOther = (k) => k !== key && core.findNavPath(ctx.items, k).length - 1 === depth;
+    for (const state of [hoveredBranches, clickedBranches, focusedBranches]) {
+      if (state.value.some(isSameDepthOther)) {
+        state.value = state.value.filter((k) => !isSameDepthOther(k));
+      }
+    }
+  };
+  const scheduleOpen = (key) => {
+    clearOpenTimer();
+    openTimer = setTimeout(() => {
+      openTimer = null;
+      isolateAtDepth(key);
+      setBranchInteraction(hoveredBranches, key, true);
+    }, HOVER_OPEN_DELAY_VAL);
+  };
+  const scheduleClose = (key) => {
+    cancelClose(key);
+    closeTimers.set(
+      key,
+      setTimeout(() => {
+        closeTimers.delete(key);
+        setBranchInteraction(hoveredBranches, key, false);
+      }, HOVER_CLOSE_DELAY_VAL)
+    );
+  };
+  const closeHorizontalMenus = () => {
+    if (!ctx.flyoutMode.value) return;
+    cancelAllTimers();
+    hovered.value = null;
+    hoveredBranches.value = [];
+    focusedBranches.value = [];
+    clickedBranches.value = [];
+  };
+  const select = (node) => {
+    if (node.disabled) return;
+    closeHorizontalMenus();
+    ctx.emitSelect(node.key, node);
+  };
+  const toggleFlyout = (key) => {
+    cancelAllTimers();
+    const current = clickedBranches.value;
+    if (current.includes(key)) {
+      clickedBranches.value = current.filter((k) => k !== key);
+      setBranchInteraction(hoveredBranches, key, false);
+      setBranchInteraction(focusedBranches, key, false);
+    } else {
+      isolateAtDepth(key);
+      clickedBranches.value = [...clickedBranches.value, key];
+    }
+  };
+  const openFlyout = (key) => {
+    cancelAllTimers();
+    isolateAtDepth(key);
+    setBranchInteraction(focusedBranches, key, true);
+  };
+  const setBranchInteraction = (state, key, enabled) => {
+    const current = state.value;
+    if (enabled) {
+      if (!current.includes(key)) state.value = [...current, key];
+    } else if (current.includes(key)) {
+      state.value = current.filter((item) => item !== key);
+    }
+  };
+  const keepsPointerInside = (container, event) => {
+    if (!container || !(container instanceof HTMLElement)) return false;
+    const next = event.relatedTarget;
+    return !!(next && next instanceof Node && container.contains(next));
+  };
+  const interactionKeyAtDepth = (keys, depth) => keys.find((key) => core.findNavPath(ctx.items, key).length === depth + 1);
+  const horizontalBranchVisible = (key, depth) => {
+    const hoveredAtDepth = interactionKeyAtDepth(hoveredBranches.value, depth);
+    if (hoveredAtDepth) return hoveredAtDepth === key;
+    const clickedAtDepth = interactionKeyAtDepth(clickedBranches.value, depth);
+    if (clickedAtDepth) return clickedAtDepth === key;
+    return interactionKeyAtDepth(focusedBranches.value, depth) === key;
+  };
+  const shownFlyoutKeys = vue.computed(() => {
+    if (!ctx.flyoutMode.value) return [];
+    const keys = [];
+    for (const node of ctx.tree.value) {
+      if (core.isBranch(node) && horizontalBranchVisible(node.key, 0)) keys.push(node.key);
+    }
+    return keys;
+  });
+  const repositionOpenFlyouts = () => {
+    for (const key of shownFlyoutKeys.value) positionFlyout(key);
+  };
+  let viewportListenersActive = false;
+  const attachViewportListeners = () => {
+    if (viewportListenersActive || typeof document === "undefined") return;
+    viewportListenersActive = true;
+    document.addEventListener("scroll", repositionOpenFlyouts, true);
+    window.addEventListener("resize", repositionOpenFlyouts);
+  };
+  const detachViewportListeners = () => {
+    if (!viewportListenersActive || typeof document === "undefined") return;
+    viewportListenersActive = false;
+    document.removeEventListener("scroll", repositionOpenFlyouts, true);
+    window.removeEventListener("resize", repositionOpenFlyouts);
+  };
+  vue.watch(
+    shownFlyoutKeys,
+    (keys, prev) => {
+      if (keys.length > 0 && prev.length === 0) attachViewportListeners();
+      else if (keys.length === 0 && prev.length > 0) detachViewportListeners();
+      for (const key of keys) positionFlyout(key);
+    },
+    { flush: "post" }
+  );
+  return {
+    hovered,
+    hoveredBranches,
+    focusedBranches,
+    clickedBranches,
+    select,
+    toggleFlyout,
+    openFlyout,
+    closeHorizontalMenus,
+    setBranchInteraction,
+    keepsPointerInside,
+    interactionKeyAtDepth,
+    horizontalBranchVisible,
+    shownFlyoutKeys,
+    setFlyoutRef,
+    flyoutTriggers,
+    flyoutPanels,
+    suppressFocusOpen: { get: () => suppressFocusOpen },
+    setSuppressFocusOpen: (value) => {
+      suppressFocusOpen = value;
+    },
+    cancelClose,
+    scheduleOpen,
+    scheduleClose,
+    cancelAllTimers
+  };
+}
+function createNavMenuKeydownHandler(deps) {
+  const {
+    items,
+    flyoutMode,
+    expanded,
+    toggle,
+    openFlyout,
+    closeHorizontalMenus,
+    horizontalBranchVisible,
+    setBranchInteraction,
+    focusedBranches,
+    collapsed,
+    hoveredBranches,
+    clickedBranches,
+    setSuppressFocusOpen
+  } = deps;
+  return (e) => {
+    const root = e.currentTarget;
+    const buttons = Array.from(root.querySelectorAll("[data-iris-nav-item]")).filter(
+      (button) => !button.closest('[data-iris-nav-children][aria-hidden="true"]')
+    );
+    if (buttons.length === 0) return;
+    const idx = buttons.indexOf(document.activeElement);
+    const focusAt = (i) => buttons[(i + buttons.length) % buttons.length]?.focus();
+    const key = idx >= 0 ? buttons[idx]?.getAttribute("data-key") : void 0;
+    const node = key ? core.findNavNode(items, key) : void 0;
+    const depth = idx >= 0 ? Number(buttons[idx]?.getAttribute("data-depth") ?? 0) : 0;
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        if (flyoutMode() && node && core.isBranch(node)) {
+          openFlyout(key);
+          const group = buttons[idx].closest("[data-iris-nav-group]");
+          void vue.nextTick(() => {
+            group?.querySelector("[data-iris-nav-children] [data-iris-nav-item]")?.focus();
+          });
+          return;
+        }
+        focusAt(idx < 0 ? 0 : idx + 1);
+        return;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        if (flyoutMode() && node && core.isBranch(node) && horizontalBranchVisible(key, depth)) {
+          setBranchInteraction(focusedBranches, key, false);
+          setBranchInteraction(clickedBranches, key, false);
+          return;
+        }
+        focusAt(idx < 0 ? buttons.length - 1 : idx - 1);
+        return;
+      }
+      case "Home":
+        e.preventDefault();
+        buttons[0]?.focus();
+        return;
+      case "End":
+        e.preventDefault();
+        buttons[buttons.length - 1]?.focus();
+        return;
+      case "Escape": {
+        if (flyoutMode()) {
+          const openKeys = [
+            ...hoveredBranches.value,
+            ...clickedBranches.value,
+            ...focusedBranches.value
+          ];
+          if (openKeys.length > 0) {
+            e.preventDefault();
+            const openTop = openKeys.find((k) => core.findNavPath(items, k).length === 1);
+            closeHorizontalMenus();
+            if (openTop) {
+              setSuppressFocusOpen(true);
+              buttons.find((b) => b.getAttribute("data-key") === openTop)?.focus();
+              void vue.nextTick(() => {
+                setSuppressFocusOpen(false);
+              });
+            }
+          }
+        }
+        return;
+      }
+    }
+    if (collapsed || idx < 0 || !key || !node) return;
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      if (core.isBranch(node)) {
+        if (flyoutMode() || !expanded().includes(key)) {
+          if (flyoutMode()) openFlyout(key);
+          else toggle(key);
+          const group = buttons[idx].closest("[data-iris-nav-group]");
+          void vue.nextTick(() => {
+            group?.querySelector("[data-iris-nav-children] [data-iris-nav-item]")?.focus();
+          });
+        } else {
+          focusAt(idx + 1);
+        }
+      }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      if (flyoutMode() && core.isBranch(node)) {
+        setBranchInteraction(focusedBranches, key, false);
+        setBranchInteraction(clickedBranches, key, false);
+        return;
+      }
+      if (core.isBranch(node) && expanded().includes(key)) {
+        toggle(key);
+      } else {
+        const parentKey = core.findNavPath(items, key).at(-2)?.key;
+        if (parentKey) {
+          buttons.find((b) => b.getAttribute("data-key") === parentKey)?.focus();
+        }
+      }
+    }
+  };
+}
 
 // src/admin/NavMenu.ts
-var HOVER_OPEN_DELAY = 100;
-var HOVER_CLOSE_DELAY = 150;
 var IrisNavMenu = vue.defineComponent({
   name: "IrisNavMenu",
   inheritAttrs: false,
@@ -691,170 +998,35 @@ var IrisNavMenu = vue.defineComponent({
         emit("update:expandedKeys", model.get());
       }
     };
-    const hovered = vue.ref(null);
-    const hoveredBranches = vue.ref([]);
-    const focusedBranches = vue.ref([]);
-    const clickedBranches = vue.ref([]);
-    let suppressFocusOpen = false;
-    let openTimer = null;
-    const closeTimers = /* @__PURE__ */ new Map();
-    const clearOpenTimer = () => {
-      if (openTimer) {
-        clearTimeout(openTimer);
-        openTimer = null;
-      }
-    };
-    const cancelClose = (key) => {
-      const timer = closeTimers.get(key);
-      if (timer) {
-        clearTimeout(timer);
-        closeTimers.delete(key);
-      }
-    };
-    const cancelAllTimers = () => {
-      clearOpenTimer();
-      for (const timer of closeTimers.values()) clearTimeout(timer);
-      closeTimers.clear();
-    };
-    vue.onBeforeUnmount(cancelAllTimers);
-    const flyoutTriggers = /* @__PURE__ */ new Map();
-    const flyoutPanels = /* @__PURE__ */ new Map();
-    const setFlyoutRef = (map, key, el) => {
-      if (el instanceof HTMLElement) map.set(key, el);
-      else map.delete(key);
-    };
-    const positionFlyout = (key) => {
-      const trigger = flyoutTriggers.get(key);
-      const panel = flyoutPanels.get(key);
-      if (!trigger || !panel || typeof document === "undefined") return;
-      const rect = trigger.getBoundingClientRect();
-      const dir = getComputedStyle(trigger).direction;
-      panel.style.position = "fixed";
-      panel.style.top = `${props.collapsed ? rect.top : rect.bottom}px`;
-      if (dir === "rtl") {
-        panel.style.left = "";
-        panel.style.right = `${window.innerWidth - (props.collapsed ? rect.left : rect.right)}px`;
-      } else {
-        panel.style.right = "";
-        panel.style.left = `${props.collapsed ? rect.right : rect.left}px`;
-      }
-    };
-    vue.onBeforeUnmount(() => {
-      detachViewportListeners();
-      flyoutTriggers.clear();
-      flyoutPanels.clear();
-    });
-    const isolateAtDepth = (key) => {
-      const depth = core.findNavPath(props.items, key).length - 1;
-      const isSameDepthOther = (k) => k !== key && core.findNavPath(props.items, k).length - 1 === depth;
-      for (const state of [hoveredBranches, clickedBranches, focusedBranches]) {
-        if (state.value.some(isSameDepthOther)) {
-          state.value = state.value.filter((k) => !isSameDepthOther(k));
-        }
-      }
-    };
-    const scheduleOpen = (key) => {
-      clearOpenTimer();
-      openTimer = setTimeout(() => {
-        openTimer = null;
-        isolateAtDepth(key);
-        setBranchInteraction(hoveredBranches, key, true);
-      }, HOVER_OPEN_DELAY);
-    };
-    const scheduleClose = (key) => {
-      cancelClose(key);
-      closeTimers.set(
-        key,
-        setTimeout(() => {
-          closeTimers.delete(key);
-          setBranchInteraction(hoveredBranches, key, false);
-        }, HOVER_CLOSE_DELAY)
-      );
-    };
-    const closeHorizontalMenus = () => {
-      if (!flyoutMode.value) return;
-      cancelAllTimers();
-      hovered.value = null;
-      hoveredBranches.value = [];
-      focusedBranches.value = [];
-      clickedBranches.value = [];
-    };
-    const select = (node) => {
-      if (node.disabled) return;
-      closeHorizontalMenus();
-      emit("select", node.key, node);
-    };
-    const toggleFlyout = (key) => {
-      cancelAllTimers();
-      const current = clickedBranches.value;
-      if (current.includes(key)) {
-        clickedBranches.value = current.filter((k) => k !== key);
-        setBranchInteraction(hoveredBranches, key, false);
-        setBranchInteraction(focusedBranches, key, false);
-      } else {
-        isolateAtDepth(key);
-        clickedBranches.value = [...clickedBranches.value, key];
-      }
-    };
-    const openFlyout = (key) => {
-      cancelAllTimers();
-      isolateAtDepth(key);
-      setBranchInteraction(focusedBranches, key, true);
-    };
-    const setBranchInteraction = (state, key, enabled) => {
-      const current = state.value;
-      if (enabled) {
-        if (!current.includes(key)) state.value = [...current, key];
-      } else if (current.includes(key)) {
-        state.value = current.filter((item) => item !== key);
-      }
-    };
-    const keepsPointerInside = (container, event) => {
-      if (!container || !(container instanceof HTMLElement)) return false;
-      const next = event.relatedTarget;
-      return !!(next && next instanceof Node && container.contains(next));
-    };
-    const interactionKeyAtDepth = (keys, depth) => keys.find((key) => core.findNavPath(props.items, key).length === depth + 1);
-    const horizontalBranchVisible = (key, depth) => {
-      const hoveredAtDepth = interactionKeyAtDepth(hoveredBranches.value, depth);
-      if (hoveredAtDepth) return hoveredAtDepth === key;
-      const clickedAtDepth = interactionKeyAtDepth(clickedBranches.value, depth);
-      if (clickedAtDepth) return clickedAtDepth === key;
-      return interactionKeyAtDepth(focusedBranches.value, depth) === key;
-    };
-    const shownFlyoutKeys = vue.computed(() => {
-      if (!flyoutMode.value) return [];
-      const keys = [];
-      for (const node of tree.value) {
-        if (core.isBranch(node) && horizontalBranchVisible(node.key, 0)) keys.push(node.key);
-      }
-      return keys;
+    const flyout = createNavMenuFlyout({
+      items: props.items,
+      tree,
+      expanded,
+      flyoutMode: { value: flyoutMode.value },
+      collapsed: props.collapsed,
+      toggle,
+      emitSelect: (key, node) => emit("select", key, node)
     });
-    const repositionOpenFlyouts = () => {
-      for (const key of shownFlyoutKeys.value) positionFlyout(key);
-    };
-    let viewportListenersActive = false;
-    const attachViewportListeners = () => {
-      if (viewportListenersActive || typeof document === "undefined") return;
-      viewportListenersActive = true;
-      document.addEventListener("scroll", repositionOpenFlyouts, true);
-      window.addEventListener("resize", repositionOpenFlyouts);
-    };
-    const detachViewportListeners = () => {
-      if (!viewportListenersActive || typeof document === "undefined") return;
-      viewportListenersActive = false;
-      document.removeEventListener("scroll", repositionOpenFlyouts, true);
-      window.removeEventListener("resize", repositionOpenFlyouts);
-    };
-    vue.watch(
-      shownFlyoutKeys,
-      (keys, prev) => {
-        if (keys.length > 0 && prev.length === 0) attachViewportListeners();
-        else if (keys.length === 0 && prev.length > 0) detachViewportListeners();
-        for (const key of keys) positionFlyout(key);
-      },
-      { flush: "post" }
-    );
+    const {
+      hovered,
+      hoveredBranches,
+      focusedBranches,
+      clickedBranches,
+      select,
+      toggleFlyout,
+      openFlyout,
+      closeHorizontalMenus,
+      setBranchInteraction,
+      keepsPointerInside,
+      horizontalBranchVisible,
+      setFlyoutRef,
+      flyoutTriggers,
+      flyoutPanels,
+      suppressFocusOpen,
+      cancelClose,
+      scheduleOpen,
+      scheduleClose
+    } = flyout;
     const itemClass = (opts) => {
       const depth = Math.min(9, opts.depth);
       return [
@@ -990,7 +1162,7 @@ var IrisNavMenu = vue.defineComponent({
               }
             },
             onFocusin: () => {
-              if (suppressFocusOpen) return;
+              if (suppressFocusOpen.get()) return;
               setBranchInteraction(focusedBranches, node.key, true);
             },
             onFocusout: (event) => {
@@ -1043,104 +1215,23 @@ var IrisNavMenu = vue.defineComponent({
       },
       { flush: "post" }
     );
-    const onKeydown = (e) => {
-      const root = e.currentTarget;
-      const buttons = Array.from(root.querySelectorAll("[data-iris-nav-item]")).filter(
-        (button) => !button.closest('[data-iris-nav-children][aria-hidden="true"]')
-      );
-      if (buttons.length === 0) return;
-      const idx = buttons.indexOf(document.activeElement);
-      const focusAt = (i) => buttons[(i + buttons.length) % buttons.length]?.focus();
-      const key = idx >= 0 ? buttons[idx]?.getAttribute("data-key") : void 0;
-      const node = key ? core.findNavNode(props.items, key) : void 0;
-      const depth = idx >= 0 ? Number(buttons[idx]?.getAttribute("data-depth") ?? 0) : 0;
-      switch (e.key) {
-        case "ArrowDown": {
-          e.preventDefault();
-          if (flyoutMode.value && node && core.isBranch(node)) {
-            openFlyout(key);
-            const group = buttons[idx].closest("[data-iris-nav-group]");
-            void vue.nextTick(() => {
-              group?.querySelector("[data-iris-nav-children] [data-iris-nav-item]")?.focus();
-            });
-            return;
-          }
-          focusAt(idx < 0 ? 0 : idx + 1);
-          return;
-        }
-        case "ArrowUp": {
-          e.preventDefault();
-          if (flyoutMode.value && node && core.isBranch(node) && horizontalBranchVisible(key, depth)) {
-            setBranchInteraction(focusedBranches, key, false);
-            setBranchInteraction(clickedBranches, key, false);
-            return;
-          }
-          focusAt(idx < 0 ? buttons.length - 1 : idx - 1);
-          return;
-        }
-        case "Home":
-          e.preventDefault();
-          buttons[0]?.focus();
-          return;
-        case "End":
-          e.preventDefault();
-          buttons[buttons.length - 1]?.focus();
-          return;
-        case "Escape": {
-          if (flyoutMode.value) {
-            const openKeys = [
-              ...hoveredBranches.value,
-              ...clickedBranches.value,
-              ...focusedBranches.value
-            ];
-            if (openKeys.length > 0) {
-              e.preventDefault();
-              const openTop = openKeys.find((k) => core.findNavPath(props.items, k).length === 1);
-              closeHorizontalMenus();
-              if (openTop) {
-                suppressFocusOpen = true;
-                buttons.find((b) => b.getAttribute("data-key") === openTop)?.focus();
-                void vue.nextTick(() => {
-                  suppressFocusOpen = false;
-                });
-              }
-            }
-          }
-          return;
-        }
-      }
-      if (props.collapsed || idx < 0 || !key || !node) return;
-      if (e.key === "ArrowRight") {
-        e.preventDefault();
-        if (core.isBranch(node)) {
-          if (flyoutMode.value || !expanded.value.includes(key)) {
-            if (flyoutMode.value) openFlyout(key);
-            else toggle(key);
-            const group = buttons[idx].closest("[data-iris-nav-group]");
-            void vue.nextTick(() => {
-              group?.querySelector("[data-iris-nav-children] [data-iris-nav-item]")?.focus();
-            });
-          } else {
-            focusAt(idx + 1);
-          }
-        }
-      } else if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        if (flyoutMode.value && core.isBranch(node)) {
-          setBranchInteraction(focusedBranches, key, false);
-          setBranchInteraction(clickedBranches, key, false);
-          return;
-        }
-        if (core.isBranch(node) && expanded.value.includes(key)) {
-          toggle(key);
-        } else {
-          const parentKey = core.findNavPath(props.items, key).at(-2)?.key;
-          if (parentKey) {
-            buttons.find((b) => b.getAttribute("data-key") === parentKey)?.focus();
-          }
-        }
-      }
-    };
+    const onKeydown = createNavMenuKeydownHandler({
+      items: props.items,
+      flyoutMode: () => flyoutMode.value,
+      expanded: () => expanded.value,
+      toggle,
+      openFlyout,
+      closeHorizontalMenus,
+      horizontalBranchVisible,
+      setBranchInteraction,
+      focusedBranches,
+      hoveredBranches,
+      clickedBranches,
+      setSuppressFocusOpen: (v) => {
+        flyout.setSuppressFocusOpen(v);
+      },
+      collapsed: props.collapsed
+    });
     const menuClass = [
       "iris-nav-menu",
       `iris-nav-menu--${props.orientation}`,