@iris-ui-kit/vue 0.2.4 → 0.2.6

package/dist/admin.cjs

@@ -395,8 +395,24 @@ var IrisNavMenu = vue.defineComponent({
       emit("select", node.key, node);
     };
     const hovered = vue.ref(null);
+    const hoveredBranches = vue.ref([]);
+    const focusedBranches = vue.ref([]);
+    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 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;
+      return interactionKeyAtDepth(focusedBranches.value, depth) === key;
+    };
     const itemStyle = (opts) => {
-      const bg = opts.active ? "var(--iris-primary)" : hovered.value && !opts.disabled ? "var(--iris-surface)" : "transparent";
+      const bg = opts.active ? "var(--iris-primary)" : opts.hovered && !opts.disabled ? "var(--iris-surface)" : "transparent";
       return {
         display: "flex",
         alignItems: "center",
@@ -457,7 +473,13 @@ var IrisNavMenu = vue.defineComponent({
           title: node.title,
           "aria-label": branch ? `${node.title} (section)` : node.title,
           "aria-current": active && !branch ? "page" : void 0,
-          style: itemStyle({ depth: 0, active, trail: false, disabled: !!node.disabled }),
+          style: itemStyle({
+            depth: 0,
+            active,
+            trail: false,
+            hovered: hovered.value === node.key,
+            disabled: !!node.disabled
+          }),
           ...hoverHandlers(node.key),
           onClick: () => select(branch ? core.firstLeaf(node) : node)
         },
@@ -467,8 +489,10 @@ var IrisNavMenu = vue.defineComponent({
     const renderItem = (node, depth) => {
       const branch = core.isBranch(node);
       const open = expanded.value.includes(node.key);
+      const horizontal = props.orientation === "horizontal";
+      const shown = horizontal ? horizontalBranchVisible(node.key, depth) : open;
       const active = node.key === props.activeKey;
-      const trail = branch && activePath.value.includes(node.key);
+      const trail = branch && !active && activePath.value.includes(node.key);
       const row = vue.h(
         "button",
         {
@@ -477,12 +501,19 @@ var IrisNavMenu = vue.defineComponent({
           "data-key": node.key,
           "data-branch": branch ? "true" : void 0,
           "data-active": active ? "true" : void 0,
-          "data-open": branch && open ? "true" : void 0,
+          "data-active-trail": trail ? "true" : void 0,
+          "data-open": branch && shown ? "true" : void 0,
           "data-depth": String(depth),
           disabled: node.disabled,
-          "aria-expanded": branch ? open ? "true" : "false" : void 0,
+          "aria-expanded": branch ? shown ? "true" : "false" : void 0,
           "aria-current": active ? "page" : void 0,
-          style: itemStyle({ depth, active, trail, disabled: !!node.disabled }),
+          style: itemStyle({
+            depth,
+            active,
+            trail,
+            hovered: hovered.value === node.key,
+            disabled: !!node.disabled
+          }),
           ...hoverHandlers(node.key),
           onClick: () => branch ? toggle(node.key) : select(node)
         },
@@ -502,14 +533,14 @@ var IrisNavMenu = vue.defineComponent({
           ),
           badgeNode(node),
           branch ? vue.h(IrisIcon, {
-            name: open ? "chevron-down" : "chevron-right",
+            name: horizontal ? "chevron-down" : "chevron-right",
             size: 16,
             style: { marginInlineStart: badgeNode(node) ? "6px" : "auto", opacity: "0.6" }
           }) : null
         ]
       );
-      const groupStyle = props.orientation === "horizontal" && depth === 0 ? { position: "relative" } : void 0;
-      if (!branch || !open)
+      const groupStyle = horizontal && depth === 0 ? { position: "relative" } : void 0;
+      if (!branch || !horizontal && !open)
         return vue.h(
           "div",
           { key: node.key, "data-iris-nav-group": branch ? "" : void 0, style: groupStyle },
@@ -517,7 +548,24 @@ var IrisNavMenu = vue.defineComponent({
         );
       return vue.h(
         "div",
-        { key: node.key, "data-iris-nav-group": "", "data-open": "true", style: groupStyle },
+        {
+          key: node.key,
+          "data-iris-nav-group": "",
+          "data-open": shown ? "true" : void 0,
+          style: groupStyle,
+          ...horizontal ? {
+            onMouseenter: () => setBranchInteraction(hoveredBranches, node.key, true),
+            onMouseleave: () => setBranchInteraction(hoveredBranches, node.key, false),
+            onFocusin: () => setBranchInteraction(focusedBranches, node.key, true),
+            onFocusout: (event) => {
+              const group = event.currentTarget;
+              const next = event.relatedTarget;
+              if (!next || !group.contains(next)) {
+                setBranchInteraction(focusedBranches, node.key, false);
+              }
+            }
+          } : {}
+        },
         [
           row,
           vue.h(
@@ -525,9 +573,11 @@ var IrisNavMenu = vue.defineComponent({
             {
               "data-iris-nav-children": "",
               role: "group",
-              style: props.orientation === "horizontal" && depth === 0 ? {
+              "aria-hidden": horizontal && !shown ? "true" : void 0,
+              style: horizontal && depth === 0 ? {
+                display: shown ? "block" : "none",
                 position: "absolute",
-                insetBlockStart: "calc(100% + 4px)",
+                insetBlockStart: "100%",
                 insetInlineStart: "0",
                 zIndex: "60",
                 minWidth: "220px",
@@ -536,7 +586,7 @@ var IrisNavMenu = vue.defineComponent({
                 borderRadius: "var(--iris-radius-md, 6px)",
                 background: "var(--iris-surface)",
                 boxShadow: "var(--iris-shadow-md)"
-              } : void 0
+              } : horizontal ? { display: shown ? "block" : "none" } : void 0
             },
             (node.children ?? []).map((child) => renderItem(child, depth + 1))
           )
@@ -545,7 +595,11 @@ var IrisNavMenu = vue.defineComponent({
     };
     const onKeydown = (e) => {
       const root = e.currentTarget;
-      const buttons = Array.from(root.querySelectorAll("[data-iris-nav-item]"));
+      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();