@expcat/tigercat-vue 1.2.14 → 1.2.19

package/dist/{chunk-LDDGBB3V.mjs → chunk-54G23KA7.mjs}

@@ -1,3 +1,8 @@
+import {
+  renderVueBodyTeleport,
+  useVueFloating
+} from "./chunk-7RIWAO2A.mjs";
+
 // src/components/Menu.ts
 import {
   defineComponent,
@@ -22,6 +27,7 @@ import {
   getSubMenuTitleClasses,
   getSubMenuExpandIconClasses,
   getSubmenuPopupZIndex,
+  getTransformOrigin,
   filterMenuItems,
   isKeySelected,
   isKeyOpen,
@@ -126,6 +132,10 @@ var Menu = defineComponent({
       type: Number,
       default: 24
     },
+    popupPortal: {
+      type: Boolean,
+      default: false
+    },
     className: {
       type: String,
       default: void 0
@@ -221,11 +231,13 @@ var Menu = defineComponent({
     const themeRef = computed(() => props.theme);
     const collapsedRef = computed(() => props.collapsed);
     const inlineIndentRef = computed(() => props.inlineIndent);
+    const popupPortalRef = computed(() => props.popupPortal);
     provide(MenuContextKey, {
       mode: modeRef,
       theme: themeRef,
       collapsed: collapsedRef,
       inlineIndent: inlineIndentRef,
+      popupPortal: popupPortalRef,
       selectedKeys: currentSelectedKeys,
       openKeys: currentOpenKeys,
       handleSelect,
@@ -619,8 +631,11 @@ var SubMenu = defineComponent({
     });
     const isHovered = ref(false);
     const isOpenByKeyboard = ref(false);
+    const titleEl = ref(null);
+    const popupEl = ref(null);
     const submenuContentEl = ref(null);
     let heightTransitionController = null;
+    let popupCloseTimer = null;
     const effectiveCollapsed = computed(() => {
       return props.collapsed ?? (menuContext ? menuContext.collapsed.value : false);
     });
@@ -629,6 +644,7 @@ var SubMenu = defineComponent({
       if (menuContext.mode.value === "horizontal") return true;
       return menuContext.mode.value === "vertical" && effectiveCollapsed.value;
     });
+    const popupPortal = computed(() => Boolean(isPopup.value && menuContext?.popupPortal.value));
     const isExpanded = computed(() => {
       if (menuContext?.mode.value === "horizontal" || isPopup.value) {
         return isHovered.value || isOpenByKeyboard.value;
@@ -636,6 +652,20 @@ var SubMenu = defineComponent({
       return isOpen.value;
     });
     const hasRenderedInline = ref(!isPopup.value && isExpanded.value);
+    const popupPlacement = computed(
+      () => menuContext?.mode.value === "horizontal" && props.level === 0 ? "bottom-start" : "right-start"
+    );
+    const {
+      x: popupX,
+      y: popupY,
+      placement: currentPopupPlacement
+    } = useVueFloating({
+      referenceRef: titleEl,
+      floatingRef: popupEl,
+      enabled: computed(() => popupPortal.value && isExpanded.value),
+      placement: popupPlacement.value,
+      offset: 4
+    });
     const disposeHeightTransition = () => {
       heightTransitionController?.dispose();
       heightTransitionController = null;
@@ -668,7 +698,10 @@ var SubMenu = defineComponent({
     watch(hasRenderedInline, () => {
       void syncHeightTransition();
     });
-    onBeforeUnmount(disposeHeightTransition);
+    onBeforeUnmount(() => {
+      disposeHeightTransition();
+      if (popupCloseTimer) clearTimeout(popupCloseTimer);
+    });
     const titleClasses = computed(() => {
       if (!menuContext) return "";
       return classNames(
@@ -707,8 +740,8 @@ var SubMenu = defineComponent({
     };
     const focusFirstChild = async () => {
       await nextTick();
-      const titleEl = document.activeElement;
-      if (titleEl) focusFirstChildItem(titleEl);
+      const titleEl2 = document.activeElement;
+      if (titleEl2) focusFirstChildItem(titleEl2);
     };
     const handleTitleKeyDown = async (event) => {
       if (!menuContext || props.disabled) return;
@@ -777,14 +810,25 @@ var SubMenu = defineComponent({
       }
     };
     const handleMouseEnter = () => {
+      if (popupCloseTimer) {
+        clearTimeout(popupCloseTimer);
+        popupCloseTimer = null;
+      }
       if (menuContext?.mode.value === "horizontal" || isPopup.value) {
         isHovered.value = true;
       }
     };
     const handleMouseLeave = () => {
       if (menuContext?.mode.value === "horizontal" || isPopup.value) {
-        isHovered.value = false;
-        isOpenByKeyboard.value = false;
+        const close = () => {
+          isHovered.value = false;
+          isOpenByKeyboard.value = false;
+        };
+        if (popupPortal.value) {
+          popupCloseTimer = setTimeout(close, 120);
+          return;
+        }
+        close();
       }
     };
     const indentStyle = computed(() => {
@@ -838,6 +882,7 @@ var SubMenu = defineComponent({
         "button",
         {
           type: "button",
+          ref: titleEl,
           class: titleClasses.value,
           style: titleStyle.value,
           onClick: handleTitleClick,
@@ -853,19 +898,35 @@ var SubMenu = defineComponent({
         },
         titleChildren
       );
-      const contentNode = isPopup.value ? h(
-        "ul",
-        {
-          class: contentClasses.value,
-          style: {
-            display: isExpanded.value ? "block" : "none",
-            ...popupZIndex.value
+      const popupContentNode = () => {
+        const popupStyle = popupPortal.value ? {
+          display: isExpanded.value ? "block" : "none",
+          position: "absolute",
+          left: `${popupX.value}px`,
+          top: `${popupY.value}px`,
+          transformOrigin: getTransformOrigin(currentPopupPlacement.value),
+          ...popupZIndex.value
+        } : {
+          display: isExpanded.value ? "block" : "none",
+          ...popupZIndex.value
+        };
+        const node = h(
+          "ul",
+          {
+            ref: popupPortal.value ? popupEl : void 0,
+            class: contentClasses.value,
+            style: popupStyle,
+            role: "menu",
+            "aria-hidden": isExpanded.value ? void 0 : "true",
+            onMouseenter: popupPortal.value ? handleMouseEnter : void 0,
+            onMouseleave: popupPortal.value ? handleMouseLeave : void 0,
+            "data-tiger-submenu-popup": ""
           },
-          role: "menu",
-          "aria-hidden": isExpanded.value ? void 0 : "true"
-        },
-        withChildLevel(slots.default?.())
-      ) : hasRenderedInline.value ? h(
+          withChildLevel(slots.default?.())
+        );
+        return popupPortal.value ? renderVueBodyTeleport(node) : node;
+      };
+      const contentNode = isPopup.value ? popupContentNode() : hasRenderedInline.value ? h(
         "div",
         {
           ref: submenuContentEl,
@@ -889,7 +950,7 @@ var SubMenu = defineComponent({
       return h(
         "li",
         {
-          class: isPopup.value ? "relative" : "",
+          class: isPopup.value && !popupPortal.value ? "relative" : "",
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
           role: "none"

package/dist/{chunk-2GQE47OY.mjs → chunk-DSHV7EAX.mjs}

@@ -141,6 +141,29 @@ var Drawer = defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * When destroyOnClose is true, wait for leave animation before unmounting.
+     * @default false
+     */
+    destroyOnCloseAfterLeave: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the drawer panel should become fullscreen on mobile viewports.
+     * @default true
+     */
+    fullscreenOnMobile: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Additional CSS class for drawer panel.
+     */
+    panelClassName: {
+      type: String,
+      default: void 0
+    },
     /**
      * Custom inline style for drawer panel
      */
@@ -148,6 +171,13 @@ var Drawer = defineComponent({
       type: Object,
       default: void 0
     },
+    /**
+     * Custom inline style for drawer panel.
+     */
+    panelStyle: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     /**
      * Close button aria-label
      * @default 'Close drawer'
@@ -177,6 +207,7 @@ var Drawer = defineComponent({
   setup(props, { slots, emit, attrs }) {
     const instanceId = ref(createDrawerId());
     const hasBeenOpened = ref(false);
+    const deferredRendered = ref(props.open);
     const dialogRef = ref(null);
     const closeButtonRef = ref(null);
     const previousActiveElement = ref(null);
@@ -188,7 +219,9 @@ var Drawer = defineComponent({
         hasBeenOpened.value = true;
         return true;
       }
-      if (props.destroyOnClose) return false;
+      if (props.destroyOnClose) {
+        return props.destroyOnCloseAfterLeave ? deferredRendered.value : false;
+      }
       return hasBeenOpened.value;
     });
     const handleClose = () => {
@@ -245,11 +278,15 @@ var Drawer = defineComponent({
       () => props.open,
       async (nextVisible) => {
         if (nextVisible) {
+          deferredRendered.value = true;
           previousActiveElement.value = captureActiveElement();
           await nextTick();
           focusFirst([closeButtonRef.value, dialogRef.value]);
           return;
         }
+        if (props.destroyOnClose && !props.destroyOnCloseAfterLeave) {
+          deferredRendered.value = false;
+        }
         restoreFocus(previousActiveElement.value);
       }
     );
@@ -260,6 +297,9 @@ var Drawer = defineComponent({
           return;
         const timer = window.setTimeout(() => {
           emit(nextVisible ? "after-enter" : "after-leave");
+          if (!nextVisible && props.destroyOnClose && props.destroyOnCloseAfterLeave) {
+            deferredRendered.value = false;
+          }
         }, ANIMATION_DURATION_MS);
         onCleanup(() => window.clearTimeout(timer));
       },
@@ -278,16 +318,17 @@ var Drawer = defineComponent({
       );
       const maskClasses = getDrawerMaskClasses(props.open);
       const panelClasses = classNames(
-        getDrawerPanelClasses(props.placement, props.open, props.size),
+        getDrawerPanelClasses(props.placement, props.open, props.size, props.fullscreenOnMobile),
         "flex flex-col",
         props.className,
+        props.panelClassName,
         coerceClassValue(attrs.class)
       );
       const isHorizontal = props.placement === "left" || props.placement === "right";
       const widthStyle = props.width ? {
         [isHorizontal ? "width" : "height"]: typeof props.width === "number" ? `${props.width}px` : props.width
       } : void 0;
-      const mergedStyle = mergeStyleValues(attrs.style, props.style, widthStyle);
+      const mergedStyle = mergeStyleValues(attrs.style, props.panelStyle, props.style, widthStyle);
       const headerClasses = getDrawerHeaderClasses();
       const bodyClasses = getDrawerBodyClasses(props.bodyClassName);
       const footerClasses = getDrawerFooterClasses();
@@ -370,7 +411,7 @@ var Drawer = defineComponent({
         {
           class: containerClasses,
           style: { zIndex: props.zIndex },
-          hidden: !props.open,
+          hidden: !props.open && !(props.destroyOnClose && props.destroyOnCloseAfterLeave),
           "aria-hidden": !props.open ? "true" : void 0,
           "data-tiger-drawer-root": ""
         },

package/dist/{chunk-FXS5GHQZ.js → chunk-IQZX54SQ.js}

@@ -141,6 +141,29 @@ var Drawer = _vue.defineComponent.call(void 0, {
       type: Boolean,
       default: false
     },
+    /**
+     * When destroyOnClose is true, wait for leave animation before unmounting.
+     * @default false
+     */
+    destroyOnCloseAfterLeave: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the drawer panel should become fullscreen on mobile viewports.
+     * @default true
+     */
+    fullscreenOnMobile: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Additional CSS class for drawer panel.
+     */
+    panelClassName: {
+      type: String,
+      default: void 0
+    },
     /**
      * Custom inline style for drawer panel
      */
@@ -148,6 +171,13 @@ var Drawer = _vue.defineComponent.call(void 0, {
       type: Object,
       default: void 0
     },
+    /**
+     * Custom inline style for drawer panel.
+     */
+    panelStyle: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     /**
      * Close button aria-label
      * @default 'Close drawer'
@@ -177,6 +207,7 @@ var Drawer = _vue.defineComponent.call(void 0, {
   setup(props, { slots, emit, attrs }) {
     const instanceId = _vue.ref.call(void 0, createDrawerId());
     const hasBeenOpened = _vue.ref.call(void 0, false);
+    const deferredRendered = _vue.ref.call(void 0, props.open);
     const dialogRef = _vue.ref.call(void 0, null);
     const closeButtonRef = _vue.ref.call(void 0, null);
     const previousActiveElement = _vue.ref.call(void 0, null);
@@ -188,7 +219,9 @@ var Drawer = _vue.defineComponent.call(void 0, {
         hasBeenOpened.value = true;
         return true;
       }
-      if (props.destroyOnClose) return false;
+      if (props.destroyOnClose) {
+        return props.destroyOnCloseAfterLeave ? deferredRendered.value : false;
+      }
       return hasBeenOpened.value;
     });
     const handleClose = () => {
@@ -245,11 +278,15 @@ var Drawer = _vue.defineComponent.call(void 0, {
       () => props.open,
       async (nextVisible) => {
         if (nextVisible) {
+          deferredRendered.value = true;
           previousActiveElement.value = _tigercatcore.captureActiveElement.call(void 0, );
           await _vue.nextTick.call(void 0, );
           _tigercatcore.focusFirst.call(void 0, [closeButtonRef.value, dialogRef.value]);
           return;
         }
+        if (props.destroyOnClose && !props.destroyOnCloseAfterLeave) {
+          deferredRendered.value = false;
+        }
         _tigercatcore.restoreFocus.call(void 0, previousActiveElement.value);
       }
     );
@@ -260,6 +297,9 @@ var Drawer = _vue.defineComponent.call(void 0, {
           return;
         const timer = window.setTimeout(() => {
           emit(nextVisible ? "after-enter" : "after-leave");
+          if (!nextVisible && props.destroyOnClose && props.destroyOnCloseAfterLeave) {
+            deferredRendered.value = false;
+          }
         }, _tigercatcore.ANIMATION_DURATION_MS);
         onCleanup(() => window.clearTimeout(timer));
       },
@@ -278,16 +318,17 @@ var Drawer = _vue.defineComponent.call(void 0, {
       );
       const maskClasses = _tigercatcore.getDrawerMaskClasses.call(void 0, props.open);
       const panelClasses = _tigercatcore.classNames.call(void 0, 
-        _tigercatcore.getDrawerPanelClasses.call(void 0, props.placement, props.open, props.size),
+        _tigercatcore.getDrawerPanelClasses.call(void 0, props.placement, props.open, props.size, props.fullscreenOnMobile),
         "flex flex-col",
         props.className,
+        props.panelClassName,
         _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       );
       const isHorizontal = props.placement === "left" || props.placement === "right";
       const widthStyle = props.width ? {
         [isHorizontal ? "width" : "height"]: typeof props.width === "number" ? `${props.width}px` : props.width
       } : void 0;
-      const mergedStyle = _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style, widthStyle);
+      const mergedStyle = _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.panelStyle, props.style, widthStyle);
       const headerClasses = _tigercatcore.getDrawerHeaderClasses.call(void 0, );
       const bodyClasses = _tigercatcore.getDrawerBodyClasses.call(void 0, props.bodyClassName);
       const footerClasses = _tigercatcore.getDrawerFooterClasses.call(void 0, );
@@ -370,7 +411,7 @@ var Drawer = _vue.defineComponent.call(void 0, {
         {
           class: containerClasses,
           style: { zIndex: props.zIndex },
-          hidden: !props.open,
+          hidden: !props.open && !(props.destroyOnClose && props.destroyOnCloseAfterLeave),
           "aria-hidden": !props.open ? "true" : void 0,
           "data-tiger-drawer-root": ""
         },

package/dist/{chunk-V32X2OEO.js → chunk-JZJEZKGN.js}

@@ -120,7 +120,7 @@ var MessageContainer = _vue.defineComponent.call(void 0, {
         },
         IS_TEST_ENV ? messageInstances.value.map(renderMessageItem) : _vue.h.call(void 0, 
           _vue.TransitionGroup,
-          { name: "message", tag: "div" },
+          { name: "message" },
           () => messageInstances.value.map(renderMessageItem)
         )
       )

package/dist/{chunk-TGIXSJI3.mjs → chunk-LS4VI4RG.mjs}

@@ -120,7 +120,7 @@ var MessageContainer = defineComponent({
         },
         IS_TEST_ENV ? messageInstances.value.map(renderMessageItem) : h(
           TransitionGroup,
-          { name: "message", tag: "div" },
+          { name: "message" },
           () => messageInstances.value.map(renderMessageItem)
         )
       )

package/dist/{chunk-4OOR4524.js → chunk-O5DBHXGJ.js}

@@ -1,4 +1,9 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Menu.ts
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+var _chunkJDCVS4SJjs = require('./chunk-JDCVS4SJ.js');
+
+// src/components/Menu.ts
 
 
 
@@ -43,6 +48,7 @@ var _vue = require('vue');
 
 
 
+
 
 
 var _tigercatcore = require('@expcat/tigercat-core');
@@ -126,6 +132,10 @@ var Menu = _vue.defineComponent.call(void 0, {
       type: Number,
       default: 24
     },
+    popupPortal: {
+      type: Boolean,
+      default: false
+    },
     className: {
       type: String,
       default: void 0
@@ -221,11 +231,13 @@ var Menu = _vue.defineComponent.call(void 0, {
     const themeRef = _vue.computed.call(void 0, () => props.theme);
     const collapsedRef = _vue.computed.call(void 0, () => props.collapsed);
     const inlineIndentRef = _vue.computed.call(void 0, () => props.inlineIndent);
+    const popupPortalRef = _vue.computed.call(void 0, () => props.popupPortal);
     _vue.provide.call(void 0, MenuContextKey, {
       mode: modeRef,
       theme: themeRef,
       collapsed: collapsedRef,
       inlineIndent: inlineIndentRef,
+      popupPortal: popupPortalRef,
       selectedKeys: currentSelectedKeys,
       openKeys: currentOpenKeys,
       handleSelect,
@@ -619,8 +631,11 @@ var SubMenu = _vue.defineComponent.call(void 0, {
     });
     const isHovered = _vue.ref.call(void 0, false);
     const isOpenByKeyboard = _vue.ref.call(void 0, false);
+    const titleEl = _vue.ref.call(void 0, null);
+    const popupEl = _vue.ref.call(void 0, null);
     const submenuContentEl = _vue.ref.call(void 0, null);
     let heightTransitionController = null;
+    let popupCloseTimer = null;
     const effectiveCollapsed = _vue.computed.call(void 0, () => {
       return _nullishCoalesce(props.collapsed, () => ( (menuContext ? menuContext.collapsed.value : false)));
     });
@@ -629,15 +644,30 @@ var SubMenu = _vue.defineComponent.call(void 0, {
       if (menuContext.mode.value === "horizontal") return true;
       return menuContext.mode.value === "vertical" && effectiveCollapsed.value;
     });
+    const popupPortal = _vue.computed.call(void 0, () => Boolean(isPopup.value && _optionalChain([menuContext, 'optionalAccess', _7 => _7.popupPortal, 'access', _8 => _8.value])));
     const isExpanded = _vue.computed.call(void 0, () => {
-      if (_optionalChain([menuContext, 'optionalAccess', _7 => _7.mode, 'access', _8 => _8.value]) === "horizontal" || isPopup.value) {
+      if (_optionalChain([menuContext, 'optionalAccess', _9 => _9.mode, 'access', _10 => _10.value]) === "horizontal" || isPopup.value) {
         return isHovered.value || isOpenByKeyboard.value;
       }
       return isOpen.value;
     });
     const hasRenderedInline = _vue.ref.call(void 0, !isPopup.value && isExpanded.value);
+    const popupPlacement = _vue.computed.call(void 0, 
+      () => _optionalChain([menuContext, 'optionalAccess', _11 => _11.mode, 'access', _12 => _12.value]) === "horizontal" && props.level === 0 ? "bottom-start" : "right-start"
+    );
+    const {
+      x: popupX,
+      y: popupY,
+      placement: currentPopupPlacement
+    } = _chunkJDCVS4SJjs.useVueFloating.call(void 0, {
+      referenceRef: titleEl,
+      floatingRef: popupEl,
+      enabled: _vue.computed.call(void 0, () => popupPortal.value && isExpanded.value),
+      placement: popupPlacement.value,
+      offset: 4
+    });
     const disposeHeightTransition = () => {
-      _optionalChain([heightTransitionController, 'optionalAccess', _9 => _9.dispose, 'call', _10 => _10()]);
+      _optionalChain([heightTransitionController, 'optionalAccess', _13 => _13.dispose, 'call', _14 => _14()]);
       heightTransitionController = null;
     };
     const syncHeightTransition = async () => {
@@ -668,7 +698,10 @@ var SubMenu = _vue.defineComponent.call(void 0, {
     _vue.watch.call(void 0, hasRenderedInline, () => {
       void syncHeightTransition();
     });
-    _vue.onBeforeUnmount.call(void 0, disposeHeightTransition);
+    _vue.onBeforeUnmount.call(void 0, () => {
+      disposeHeightTransition();
+      if (popupCloseTimer) clearTimeout(popupCloseTimer);
+    });
     const titleClasses = _vue.computed.call(void 0, () => {
       if (!menuContext) return "";
       return _tigercatcore.classNames.call(void 0, 
@@ -707,14 +740,14 @@ var SubMenu = _vue.defineComponent.call(void 0, {
     };
     const focusFirstChild = async () => {
       await _vue.nextTick.call(void 0, );
-      const titleEl = document.activeElement;
-      if (titleEl) _tigercatcore.focusFirstChildItem.call(void 0, titleEl);
+      const titleEl2 = document.activeElement;
+      if (titleEl2) _tigercatcore.focusFirstChildItem.call(void 0, titleEl2);
     };
     const handleTitleKeyDown = async (event) => {
       if (!menuContext || props.disabled) return;
       const current = event.currentTarget;
       const rootMenu = current.closest('ul[role="menu"]');
-      const isRoot = _optionalChain([rootMenu, 'optionalAccess', _11 => _11.dataset, 'access', _12 => _12.tigerMenuRoot]) === "true";
+      const isRoot = _optionalChain([rootMenu, 'optionalAccess', _15 => _15.dataset, 'access', _16 => _16.tigerMenuRoot]) === "true";
       const isHorizontalRoot = isRoot && menuContext.mode.value === "horizontal";
       const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
       const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
@@ -777,14 +810,25 @@ var SubMenu = _vue.defineComponent.call(void 0, {
       }
     };
     const handleMouseEnter = () => {
-      if (_optionalChain([menuContext, 'optionalAccess', _13 => _13.mode, 'access', _14 => _14.value]) === "horizontal" || isPopup.value) {
+      if (popupCloseTimer) {
+        clearTimeout(popupCloseTimer);
+        popupCloseTimer = null;
+      }
+      if (_optionalChain([menuContext, 'optionalAccess', _17 => _17.mode, 'access', _18 => _18.value]) === "horizontal" || isPopup.value) {
         isHovered.value = true;
       }
     };
     const handleMouseLeave = () => {
-      if (_optionalChain([menuContext, 'optionalAccess', _15 => _15.mode, 'access', _16 => _16.value]) === "horizontal" || isPopup.value) {
-        isHovered.value = false;
-        isOpenByKeyboard.value = false;
+      if (_optionalChain([menuContext, 'optionalAccess', _19 => _19.mode, 'access', _20 => _20.value]) === "horizontal" || isPopup.value) {
+        const close = () => {
+          isHovered.value = false;
+          isOpenByKeyboard.value = false;
+        };
+        if (popupPortal.value) {
+          popupCloseTimer = setTimeout(close, 120);
+          return;
+        }
+        close();
       }
     };
     const indentStyle = _vue.computed.call(void 0, () => {
@@ -838,6 +882,7 @@ var SubMenu = _vue.defineComponent.call(void 0, {
         "button",
         {
           type: "button",
+          ref: titleEl,
           class: titleClasses.value,
           style: titleStyle.value,
           onClick: handleTitleClick,
@@ -853,19 +898,35 @@ var SubMenu = _vue.defineComponent.call(void 0, {
         },
         titleChildren
       );
-      const contentNode = isPopup.value ? _vue.h.call(void 0, 
-        "ul",
-        {
-          class: contentClasses.value,
-          style: {
-            display: isExpanded.value ? "block" : "none",
-            ...popupZIndex.value
+      const popupContentNode = () => {
+        const popupStyle = popupPortal.value ? {
+          display: isExpanded.value ? "block" : "none",
+          position: "absolute",
+          left: `${popupX.value}px`,
+          top: `${popupY.value}px`,
+          transformOrigin: _tigercatcore.getTransformOrigin.call(void 0, currentPopupPlacement.value),
+          ...popupZIndex.value
+        } : {
+          display: isExpanded.value ? "block" : "none",
+          ...popupZIndex.value
+        };
+        const node = _vue.h.call(void 0, 
+          "ul",
+          {
+            ref: popupPortal.value ? popupEl : void 0,
+            class: contentClasses.value,
+            style: popupStyle,
+            role: "menu",
+            "aria-hidden": isExpanded.value ? void 0 : "true",
+            onMouseenter: popupPortal.value ? handleMouseEnter : void 0,
+            onMouseleave: popupPortal.value ? handleMouseLeave : void 0,
+            "data-tiger-submenu-popup": ""
           },
-          role: "menu",
-          "aria-hidden": isExpanded.value ? void 0 : "true"
-        },
-        withChildLevel(_optionalChain([slots, 'access', _17 => _17.default, 'optionalCall', _18 => _18()]))
-      ) : hasRenderedInline.value ? _vue.h.call(void 0, 
+          withChildLevel(_optionalChain([slots, 'access', _21 => _21.default, 'optionalCall', _22 => _22()]))
+        );
+        return popupPortal.value ? _chunkJDCVS4SJjs.renderVueBodyTeleport.call(void 0, node) : node;
+      };
+      const contentNode = isPopup.value ? popupContentNode() : hasRenderedInline.value ? _vue.h.call(void 0, 
         "div",
         {
           ref: submenuContentEl,
@@ -882,14 +943,14 @@ var SubMenu = _vue.defineComponent.call(void 0, {
               class: contentClasses.value,
               role: "menu"
             },
-            withChildLevel(_optionalChain([slots, 'access', _19 => _19.default, 'optionalCall', _20 => _20()]))
+            withChildLevel(_optionalChain([slots, 'access', _23 => _23.default, 'optionalCall', _24 => _24()]))
           )
         ]
       ) : null;
       return _vue.h.call(void 0, 
         "li",
         {
-          class: isPopup.value ? "relative" : "",
+          class: isPopup.value && !popupPortal.value ? "relative" : "",
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
           role: "none"

package/dist/components/ActivityFeed.d.mts

@@ -107,10 +107,10 @@ declare const ActivityFeed: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    loadingText: string;
-    emptyText: string;
     className: string;
     style: Record<string, string | number>;
+    loadingText: string;
+    emptyText: string;
     loading: boolean;
     groupBy: (item: ActivityItem) => string;
     items: ActivityItem[];