@knime/kds-components 0.29.3 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @knime/kds-components
 
+## 0.30.0
+
+### Minor Changes
+
+- e0a3ce6: Add submenu capability to `KdsMenuContainer` component
+  - Can now render children items up to 3 levels (root + 2 nested submenus)
+  - Items with children cannot have a shortcut assigned, nor a badge or a trailing icon since that space
+    is reserved for the icon that hints at a nested submenu
+
+### Patch Changes
+
+- @knime/kds-styles@0.30.0
+
 ## 0.29.3
 
 ### Patch Changes

package/dist/index.css

@@ -1210,7 +1210,7 @@ html.kds-legacy {
 }
 }
 
-.kds-menu-item-link[data-v-677d6ca6] {
+.kds-menu-item-link[data-v-96d9cfba] {
   display: block;
   color: inherit;
   text-decoration: none;
@@ -1227,7 +1227,7 @@ html.kds-legacy {
 }
 
 .kds-menu-container {
-&[data-v-cce3fc40] {
+&[data-v-9dc6d3f6] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-10x);
@@ -1239,11 +1239,46 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-cce3fc40]:focus-visible {
+&[data-v-9dc6d3f6]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 }
+.submenu-popover[data-v-9dc6d3f6] {
+  inset: anchor(top) auto auto anchor(right);
+  padding: 0 var(--kds-spacing-container-0-25x);
+  margin: 0;
+  position-try-fallbacks:
+    --kds-popover-try-right-dropdown, --kds-popover-try-left-dropdown,
+    --kds-popover-try-right-dropup, --kds-popover-try-left-dropup;
+  overflow: visible;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-right-dropdown {
+  inset: anchor(top) auto auto anchor(right);
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-left-dropdown {
+  inset: anchor(top) anchor(left) auto auto;
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-right-dropup {
+  inset: auto auto anchor(bottom) anchor(right);
+}
+
+/* noinspection CssInvalidFunction,CssInvalidAtRule */
+@position-try --kds-popover-try-left-dropup {
+  inset: auto anchor(left) anchor(bottom) auto;
+}
 
 .kds-popover {
 &[data-v-1e5f9d24] {

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, unref, resolveDynamicComponent, mergeProps, useTemplateRef, createVNode, withCtx, renderSlot, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, watchEffect, useAttrs, withKeys, isRef, getCurrentScope, onScopeDispose, defineAsyncComponent, toRefs, useCssVars, createSlots, normalizeProps, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, vModelText, createTextVNode, guardReactiveProps } from 'vue';
+import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, unref, resolveDynamicComponent, mergeProps, useTemplateRef, createVNode, withCtx, renderSlot, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, inject, provide, resolveComponent, withKeys, watchEffect, useAttrs, isRef, getCurrentScope, onScopeDispose, defineAsyncComponent, toRefs, useCssVars, createSlots, normalizeProps, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, vModelText, createTextVNode, guardReactiveProps } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, onClickOutside, useElementSize, useMousePressed, useVirtualList, useTemplateRefsList } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
@@ -10,7 +10,7 @@ import './index.css';const kdsAvatarSize = {
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
 const _hoisted_1$15 = ["role", "title", "aria-hidden", "aria-label", "data-color"];
-const _hoisted_2$G = ["src"];
+const _hoisted_2$H = ["src"];
 const _hoisted_3$u = {
   key: 1,
   class: "kds-avatar-initials",
@@ -80,7 +80,7 @@ const _sfc_main$1G = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$G)) : (openBlock(), createElementBlock("div", _hoisted_3$u, [
+        }, null, 40, _hoisted_2$H)) : (openBlock(), createElementBlock("div", _hoisted_3$u, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
       ], 10, _hoisted_1$15);
@@ -99,7 +99,7 @@ const _export_sfc = (sfc, props) => {
 const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-9e1a5abe"]]);
 
 const _hoisted_1$14 = ["aria-label"];
-const _hoisted_2$F = { class: "avatars" };
+const _hoisted_2$G = { class: "avatars" };
 const _hoisted_3$t = {
   key: 0,
   class: "more-count",
@@ -125,7 +125,7 @@ const _sfc_main$1F = /* @__PURE__ */ defineComponent({
         role: "group",
         "aria-label": ariaLabel.value
       }, [
-        createElementVNode("div", _hoisted_2$F, [
+        createElementVNode("div", _hoisted_2$G, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.avatars, (avatar, index) => {
             return openBlock(), createBlock(KdsAvatar, {
               key: index,
@@ -686,7 +686,7 @@ const kdsProgressBarSize = {
 const kdsProgressBarSizes = Object.values(kdsProgressBarSize);
 
 const _hoisted_1$11 = ["title", "aria-label"];
-const _hoisted_2$E = {
+const _hoisted_2$F = {
   key: 0,
   class: "indeterminate-bar",
   "aria-hidden": "true"
@@ -728,7 +728,7 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
           "aria-label": title.value,
           class: "progress"
         }, __props.indeterminate ? {} : { value: progressValue.value, max: 100 }), null, 16, _hoisted_1$11),
-        __props.indeterminate ? (openBlock(), createElementBlock("span", _hoisted_2$E)) : createCommentVNode("", true)
+        __props.indeterminate ? (openBlock(), createElementBlock("span", _hoisted_2$F)) : createCommentVNode("", true)
       ], 2);
     };
   }
@@ -961,7 +961,7 @@ function useKdsIsTruncated(elementRef) {
 }
 
 const _hoisted_1$$ = ["title", "aria-label"];
-const _hoisted_2$D = ["title"];
+const _hoisted_2$E = ["title"];
 const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
@@ -991,7 +991,7 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? __props.label : void 0
-        }, toDisplayString(__props.label), 9, _hoisted_2$D)) : createCommentVNode("", true)
+        }, toDisplayString(__props.label), 9, _hoisted_2$E)) : createCommentVNode("", true)
       ], 10, _hoisted_1$$);
     };
   }
@@ -1055,7 +1055,7 @@ const kdsLoadingSpinnerVariants = Object.values(
 );
 
 const _hoisted_1$Z = ["role"];
-const _hoisted_2$C = { class: "header" };
+const _hoisted_2$D = { class: "header" };
 const _hoisted_3$s = { class: "headline" };
 const _hoisted_4$o = {
   key: 0,
@@ -1092,7 +1092,7 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         role: role.value
       }, [
-        createElementVNode("div", _hoisted_2$C, [
+        createElementVNode("div", _hoisted_2$D, [
           createVNode(KdsIcon, {
             class: "icon",
             name: iconName.value,
@@ -1135,7 +1135,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
 const KdsMissingValueIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-df682150"]]);
 
 const _hoisted_1$Y = { class: "donut-container" };
-const _hoisted_2$B = ["height", "width", "viewBox"];
+const _hoisted_2$C = ["height", "width", "viewBox"];
 const _hoisted_3$r = ["r", "stroke-width"];
 const _hoisted_4$n = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
 const _hoisted_5$d = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
@@ -1233,7 +1233,7 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
             fill: "transparent",
             transform: transformWedge.value
           }, null, 10, _hoisted_5$d)) : createCommentVNode("", true)
-        ], 8, _hoisted_2$B)),
+        ], 8, _hoisted_2$C)),
         __props.title ? (openBlock(), createElementBlock("div", _hoisted_6$b, [
           createElementVNode("div", _hoisted_7$4, toDisplayString(__props.title), 1),
           __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$3, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
@@ -1634,7 +1634,7 @@ function prettyBytes(number, options) {
 }
 
 const _hoisted_1$V = { class: "label" };
-const _hoisted_2$A = {
+const _hoisted_2$B = {
   key: 1,
   class: "file-size"
 };
@@ -1734,7 +1734,7 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
             name: "external-link",
             size: "xsmall"
           })) : createCommentVNode("", true),
-          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$A, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
+          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$B, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["class", "to", "download", "target", "rel", "title", "aria-disabled"]);
@@ -1782,7 +1782,7 @@ const kdsToggleButtonVariant = {
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
 const _hoisted_1$U = ["data-visible"];
-const _hoisted_2$z = ["data-visible"];
+const _hoisted_2$A = ["data-visible"];
 const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
@@ -1854,7 +1854,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
                 size: iconSize.value,
                 variant: __props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$z)
+            ], 8, _hoisted_2$A)
           ], 2)
         ]),
         _: 1
@@ -1885,7 +1885,8 @@ const useListItemKeyboardNav = (options) => {
     containerEl,
     selectableItems,
     enabledItems,
-    itemFocusStrategy = "persistent"
+    itemFocusStrategy = "persistent",
+    shouldNavigate = () => true
   } = options;
   const activeId = ref(void 0);
   function scrollToView() {
@@ -1914,6 +1915,9 @@ const useListItemKeyboardNav = (options) => {
     return enabledItems.value[currentIndex - 1].id;
   };
   const handleKeydown = (event) => {
+    if (!shouldNavigate(event)) {
+      return;
+    }
     if (enabledItems.value.length === 0) {
       activeId.value = selectableItems.value.length === 0 ? options.emptyOptionId : void 0;
       return;
@@ -1933,6 +1937,14 @@ const useListItemKeyboardNav = (options) => {
         scrollToView();
         event.preventDefault();
         break;
+      case "ArrowLeft":
+        options.triggers?.onArrowLeft?.(activeId.value, targetItem);
+        event.preventDefault();
+        break;
+      case "ArrowRight":
+        options.triggers?.onArrowRight?.(activeId.value, targetItem);
+        event.preventDefault();
+        break;
       case "Enter":
         options.triggers?.onEnter?.(activeId.value, targetItem, event);
         event.preventDefault();
@@ -2134,7 +2146,7 @@ const kdsListItemAccessorySize = {
 };
 
 const _hoisted_1$T = ["id", "role", "aria-selected", "aria-disabled"];
-const _hoisted_2$y = {
+const _hoisted_2$z = {
   key: 0,
   class: "accessory"
 };
@@ -2212,7 +2224,7 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
         ]),
         onClick
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$y, [
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$z, [
           createVNode(_sfc_main$1n, {
             accessory: props.accessory,
             size: accessorySize.value,
@@ -2261,7 +2273,7 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
 const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__scopeId", "data-v-a3d6c86f"]]);
 
 const _hoisted_1$S = { class: "kds-list-item-section-title" };
-const _hoisted_2$x = {
+const _hoisted_2$y = {
   key: 0,
   class: "icon"
 };
@@ -2278,7 +2290,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$S, [
-        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$x, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$y, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
             size: "small"
@@ -2305,7 +2317,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     isLast: { type: Boolean },
     variant: {}
   },
-  emits: ["click"],
+  emits: ["click", "mouseenter"],
   setup(__props, { expose: __expose }) {
     const props = __props;
     const linkEl = useTemplateRef(
@@ -2370,6 +2382,14 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     const effectiveTo = computed(
       () => props.item.disabled ? void 0 : props.item.to
     );
+    const hasChildren = computed(
+      () => props.item.children && props.item.children.length > 0
+    );
+    const anchorId = useId();
+    const anchorName = `--anchor-${anchorId}`;
+    const anchorRootStyle = computed(
+      () => hasChildren.value ? { anchorName } : {}
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         __props.item.sectionHeadline ? (openBlock(), createBlock(unref(ListItemSectionTitle), mergeProps({
@@ -2393,7 +2413,8 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
           class: "kds-menu-item-link",
           onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
           }, ["prevent"])),
-          onClick: _cache[1] || (_cache[1] = ($event) => !__props.item.disabled && _ctx.$emit("click", $event))
+          onClick: _cache[1] || (_cache[1] = ($event) => !__props.item.disabled && _ctx.$emit("click", $event)),
+          onMouseenter: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("mouseenter", $event))
         }, {
           default: withCtx(() => [
             createVNode(unref(KdsListItem), mergeProps({
@@ -2411,7 +2432,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
             }, _ctx.$attrs), null, 16, ["id", "accessory", "text", "sub-text", "disabled", "active", "variant", "badge", "shortcut", "trailing-icon"])
           ]),
           _: 1
-        }, 40, ["id", "to", "download", "target", "rel", "aria-disabled"])) : (openBlock(), createBlock(unref(KdsListItem), mergeProps({
+        }, 40, ["id", "to", "download", "target", "rel", "aria-disabled"])) : !hasChildren.value ? (openBlock(), createBlock(unref(KdsListItem), mergeProps({
           key: 2,
           id: __props.item.id,
           accessory: __props.item.accessory,
@@ -2425,22 +2446,46 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
           shortcut: __props.item.shortcut,
           role: "menuitem"
         }, _ctx.$attrs, {
-          onClick: _cache[2] || (_cache[2] = ($event) => !__props.item.disabled && _ctx.$emit("click", $event))
-        }), null, 16, ["id", "accessory", "text", "sub-text", "disabled", "active", "variant", "badge", "trailing-icon", "shortcut"])),
-        __props.item.separator && !__props.isLast ? (openBlock(), createBlock(unref(KdsDivider), {
+          onClick: _cache[3] || (_cache[3] = ($event) => !__props.item.disabled && _ctx.$emit("click", $event)),
+          onMouseenter: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("mouseenter", $event))
+        }), null, 16, ["id", "accessory", "text", "sub-text", "disabled", "active", "variant", "badge", "trailing-icon", "shortcut"])) : (openBlock(), createBlock(unref(KdsListItem), mergeProps({
           key: 3,
+          id: __props.item.id,
+          accessory: __props.item.accessory,
+          text: __props.item.text,
+          "sub-text": __props.item.subText,
+          disabled: __props.item.disabled,
+          active: __props.activeId === __props.item.id,
+          variant: __props.variant,
+          "trailing-icon": "chevron-right",
+          style: anchorRootStyle.value,
+          role: "menuitem",
+          "aria-haspopup": "menu"
+        }, _ctx.$attrs, {
+          onMouseenter: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("mouseenter", $event))
+        }), null, 16, ["id", "accessory", "text", "sub-text", "disabled", "active", "variant", "style"])),
+        __props.item.separator && !__props.isLast ? (openBlock(), createBlock(unref(KdsDivider), {
+          key: 4,
           class: "kds-list-item-divider",
           role: "presentation",
           "aria-hidden": "true"
-        })) : createCommentVNode("", true)
+        })) : createCommentVNode("", true),
+        hasChildren.value ? renderSlot(_ctx.$slots, "children", {
+          key: 5,
+          anchor: { id: unref(anchorId), name: anchorName }
+        }, void 0, true) : createCommentVNode("", true)
       ], 64);
     };
   }
 });
 
-const KdsMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-677d6ca6"]]);
+const KdsMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-96d9cfba"]]);
+
+const ContainerDepthKey = /* @__PURE__ */ Symbol("ContainerDepth");
+const ChildItemKey = /* @__PURE__ */ Symbol("ChildItem");
 
 const _hoisted_1$R = ["id", "aria-label", "aria-activedescendant"];
+const _hoisted_2$x = ["id"];
 const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuContainer",
   props: {
@@ -2497,20 +2542,95 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
       }
       handleItemInteraction(item, event);
     };
-    const { activeId } = useListItemKeyboardNav({
+    const activePopoverId = ref();
+    const popovers = shallowRef({});
+    const showPopover = (itemId) => {
+      if (!itemId) {
+        return void 0;
+      }
+      if (popovers.value[itemId]) {
+        activePopoverId.value = itemId;
+        popovers.value[itemId].showPopover?.();
+        return popovers.value[itemId];
+      }
+      return void 0;
+    };
+    const closePopover = () => {
+      if (activePopoverId.value) {
+        popovers.value[activePopoverId.value]?.hidePopover?.();
+        activePopoverId.value = void 0;
+      }
+    };
+    const depth = inject(ContainerDepthKey, 0);
+    const providedDepth = computed(() => depth + 1);
+    const canRenderSubmenus = computed(() => depth < 2);
+    provide(ContainerDepthKey, providedDepth.value);
+    const parentList = inject(ChildItemKey, null);
+    const validateItemChildren = (item) => {
+      if (item.children) {
+        return canRenderSubmenus.value ? item : { ...item, children: [] };
+      }
+      return item;
+    };
+    const hasChildren = (item) => {
+      return item.children && item.children.length > 0;
+    };
+    const showPopoverByKeyboard = (activeId2) => {
+      if (activeId2) {
+        const activePopover = showPopover(activeId2);
+        const containerComponent = activePopover?.querySelector(
+          "[data-submenu-container]"
+        );
+        containerComponent?.focus();
+      }
+    };
+    const { activeId, setActiveId } = useListItemKeyboardNav({
       containerEl,
       enabledItems,
       selectableItems,
       itemFocusStrategy: __props.itemFocusStrategy,
+      // only allow navigation when the current menu has the focus
+      shouldNavigate: (event) => {
+        const rootNode = containerEl.value?.getRootNode();
+        if (!rootNode) {
+          return false;
+        }
+        const activeElement = rootNode.activeElement;
+        return activeElement === event.target && activeElement === containerEl.value;
+      },
       triggers: {
-        onEnter: (_activeId, item, event) => {
-          onKeyboardActivate(item, event);
+        onEnter: (activeId2, item, event) => {
+          if (item && hasChildren(validateItemChildren(item))) {
+            showPopoverByKeyboard(activeId2);
+          } else {
+            onKeyboardActivate(item, event);
+          }
         },
         onSpace: (_activeId, item, event) => {
           onKeyboardActivate(item, event);
+        },
+        // In this type of navigation
+        // LEFT is treated as   -> CLOSE
+        onArrowLeft: () => {
+          parentList?.closeActiveSubmenu({ requester: props.id });
+        },
+        // RIGHT is treated as  -> OPEN
+        onArrowRight: (activeId2, item) => {
+          if (item && !hasChildren(validateItemChildren(item))) {
+            return;
+          }
+          showPopoverByKeyboard(activeId2);
         }
       }
     });
+    provide(ChildItemKey, {
+      closeActiveSubmenu: () => {
+        const lastActiveId = activePopoverId.value;
+        closePopover();
+        containerEl.value?.focus();
+        setActiveId(lastActiveId);
+      }
+    });
     __expose({
       /**
        * Function to focus the outer container of the menu.
@@ -2520,7 +2640,18 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
         containerEl.value?.focus();
       }
     });
+    const handleFocusOut = (event) => {
+      if (event.relatedTarget && containerEl.value?.contains(event.relatedTarget)) {
+        event.stopPropagation();
+        if (containerEl.value === event.relatedTarget) {
+          const lastActiveId = activePopoverId.value;
+          closePopover();
+          setActiveId(lastActiveId);
+        }
+      }
+    };
     return (_ctx, _cache) => {
+      const _component_KdsMenuContainer = resolveComponent("KdsMenuContainer", true);
       return openBlock(), createElementBlock("div", {
         id: props.id,
         ref_key: "containerEl",
@@ -2530,26 +2661,68 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
         "aria-label": __props.ariaLabel,
         tabindex: 0,
         style: normalizeStyle({ maxHeight: __props.menuMaxHeight }),
-        "aria-activedescendant": unref(activeId)
+        "aria-activedescendant": unref(activeId) ?? activePopoverId.value,
+        onMouseleave: closePopover,
+        onFocusin: _cache[3] || (_cache[3] = withModifiers(($event) => activePopoverId.value = void 0, ["stop"])),
+        onFocusout: handleFocusOut,
+        onKeydown: _cache[4] || (_cache[4] = withKeys(
+          () => {
+            unref(parentList)?.closeActiveSubmenu({ requester: props.id });
+          },
+          ["esc"]
+        ))
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(itemsWithPrefix), (item, index) => {
           return openBlock(), createBlock(KdsMenuItem, {
             key: item.id,
             ref_for: true,
             ref: (el) => setItemRef(el, index),
-            item,
+            item: validateItemChildren(item),
             "is-last": index === unref(itemsWithPrefix).length - 1,
-            "active-id": unref(activeId),
+            "active-id": unref(activeId) ?? activePopoverId.value,
             variant: __props.variant,
-            onClick: ($event) => handleItemInteraction(item, $event)
-          }, null, 8, ["item", "is-last", "active-id", "variant", "onClick"]);
+            onClick: ($event) => handleItemInteraction(item, $event),
+            onMouseenter: () => {
+              if (activePopoverId.value) {
+                closePopover();
+              }
+              if (!item.disabled && hasChildren(item)) {
+                showPopover(item.id);
+              }
+            }
+          }, {
+            children: withCtx(({ anchor }) => [
+              createElementVNode("div", {
+                id: anchor.id,
+                ref_for: true,
+                ref: (el) => {
+                  popovers.value[item.id] = el;
+                },
+                popover: "",
+                class: "submenu-popover",
+                style: normalizeStyle({ positionAnchor: anchor.name }),
+                onMouseleave: _cache[1] || (_cache[1] = ($event) => closePopover()),
+                onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers(() => {
+                }, ["stop", "prevent"]), ["esc"]))
+              }, [
+                createVNode(_component_KdsMenuContainer, {
+                  id: `${__props.id}:${item.id}`,
+                  "data-submenu-container": "",
+                  ariaLabel: `Submenu for item ${item.text}`,
+                  items: item.children ?? [],
+                  onItemClick: _cache[0] || (_cache[0] = ($event) => emit("itemClick", $event))
+                }, null, 8, ["id", "ariaLabel", "items"])
+              ], 44, _hoisted_2$x)
+            ]),
+            _: 2
+          }, 1032, ["item", "is-last", "active-id", "variant", "onClick", "onMouseenter"]);
         }), 128))
-      ], 12, _hoisted_1$R);
+      ], 44, _hoisted_1$R);
     };
   }
 });
 
-const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-cce3fc40"]]);
+const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-9dc6d3f6"]]);
 
 const kdsPopoverPlacement = {
   TOP_LEFT: "top-left",