@iris-ui-kit/vue 0.2.15 → 0.2.17

package/dist/admin.cjs

@@ -381,7 +381,7 @@ var CSS = `
   white-space: nowrap;
 }
 
-:where(.iris-nav-menu--horizontal .iris-nav-menu-item) {
+:where(.iris-nav-menu--horizontal > .iris-nav-menu-group > .iris-nav-menu-item) {
   width: auto;
   padding-inline-start: var(--iris-nav-item-padding-inline);
 }
@@ -660,6 +660,11 @@ var IrisNavMenu = vue.defineComponent({
         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);
@@ -720,8 +725,10 @@ var IrisNavMenu = vue.defineComponent({
           onMouseenter: () => {
             if (!node.disabled) hovered.value = node.key;
           },
-          onMouseleave: () => {
-            if (hovered.value === node.key) hovered.value = null;
+          onMouseleave: (event) => {
+            if (hovered.value === node.key && !keepsPointerInside(event.currentTarget, event)) {
+              hovered.value = null;
+            }
           },
           onClick: () => select(branch ? core.firstLeaf(node) : node)
         },
@@ -766,8 +773,10 @@ var IrisNavMenu = vue.defineComponent({
           onMouseenter: () => {
             if (!node.disabled) hovered.value = node.key;
           },
-          onMouseleave: () => {
-            if (hovered.value === node.key) hovered.value = null;
+          onMouseleave: (event) => {
+            if (hovered.value === node.key && !keepsPointerInside(event.currentTarget, event)) {
+              hovered.value = null;
+            }
           },
           onClick: () => branch ? toggle(node.key) : select(node)
         },
@@ -811,8 +820,26 @@ var IrisNavMenu = vue.defineComponent({
             `iris-nav-menu-group--depth-${Math.min(9, depth)}`
           ],
           ...horizontal ? {
-            onMouseenter: () => setBranchInteraction(hoveredBranches, node.key, true),
-            onMouseleave: () => setBranchInteraction(hoveredBranches, node.key, false),
+            onMouseenter: (event) => {
+              if (!keepsPointerInside(event.currentTarget, event)) {
+                setBranchInteraction(hoveredBranches, node.key, true);
+              }
+            },
+            onMouseover: (event) => {
+              if (!keepsPointerInside(event.currentTarget, event)) {
+                setBranchInteraction(hoveredBranches, node.key, true);
+              }
+            },
+            onMouseout: (event) => {
+              if (!keepsPointerInside(event.currentTarget, event)) {
+                setBranchInteraction(hoveredBranches, node.key, false);
+              }
+            },
+            onMouseleave: (event) => {
+              if (!keepsPointerInside(event.currentTarget, event)) {
+                setBranchInteraction(hoveredBranches, node.key, false);
+              }
+            },
             onFocusin: () => setBranchInteraction(focusedBranches, node.key, true),
             onFocusout: (event) => {
               const group = event.currentTarget;