@maas/vue-equipment 0.30.2 → 0.30.4

package/dist/plugins/MagicMenu/src/components/MagicMenuRemote.vue

@@ -3,7 +3,7 @@
     class="magic-menu-remote"
     :class="{ '-active': channel?.active, '-disabled': disabled }"
     :data-id="`${channelId}-remote`"
-    @click="onClick"
+    @pointerdown="onClick"
     @mouseenter="onMouseenter"
   >
     <slot :is-active="view?.active" :is-disabled="disabled" />
@@ -49,6 +49,7 @@ if (!props.channelId) {
 }
 
 const mappedChannelId = computed(() => `magic-menu-channel-${props.channelId}`)
+
 const mappedTrigger = computed<Interaction[]>(
   () => props.trigger ?? ['mouseenter']
 )
@@ -60,7 +61,6 @@ const { initializeChannel, deleteChannel } = useMenuChannel({
   instanceId,
   viewId,
 })
-let channel = initializeChannel({ id: mappedChannelId.value })
 
 const { onClick, onMouseenter } = useMenuRemote({
   viewId,
@@ -69,16 +69,20 @@ const { onClick, onMouseenter } = useMenuRemote({
   mappedTrigger,
 })
 
+let channel = initializeChannel({ id: mappedChannelId.value })
+
 watch(
   () => view?.active,
-  () => {
-    // Reset if parent view changes
-    deleteChannel(mappedChannelId.value)
-    channel = initializeChannel({ id: mappedChannelId.value })
+  (value) => {
+    // Reset if parent view is inactive
+    if (!value) {
+      deleteChannel(mappedChannelId.value)
+      channel = initializeChannel({ id: mappedChannelId.value })
+    }
   }
 )
 </script>
 
 <style>
-.magic-menu-remote{cursor:var(--magic-menu-remote-cursor,pointer)}
+.magic-menu-remote{cursor:var(--magic-menu-remote-cursor,pointer)}.magic-menu-remote.-disabled{pointer-events:none}
 </style>

package/dist/plugins/MagicMenu/src/components/MagicMenuRemote.vue.d.ts

@@ -6,12 +6,14 @@ interface MagicMenuRemoteProps {
     disabled?: boolean;
     trigger?: Interaction[];
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuRemoteProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuRemoteProps>>>, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {
         isActive: boolean | undefined;
         isDisabled: boolean | undefined;
     }): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuRemoteProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuRemoteProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue

@@ -5,7 +5,7 @@
     :class="{ '-active': view?.active, '-disabled': mappedDisabled }"
     :data-id="`${viewId}-trigger`"
     :tabindex="mappedTabindex"
-    @click="onClick"
+    @pointerdown="onClick"
     @contextmenu="onClick"
     @mouseenter="onMouseenter"
   >
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, ref, toValue, watch } from 'vue'
+import { computed, inject, ref, toValue, watch } from 'vue'
 import { useMenuState } from '../composables/private/useMenuState'
 import { useMenuView } from '../composables/private/useMenuView'
 import { useMenuItem } from '../composables/private/useMenuItem'
@@ -58,7 +58,7 @@ const state = initializeState()
 const { getItem } = useMenuItem({ instanceId, viewId })
 const item = getItem(itemId ?? '')
 
-const mappedDisabled = computed(() => props.disabled ?? item?.disabled)
+const mappedDisabled = computed(() => props.disabled ?? item?.disabled ?? false)
 
 const mappedTrigger = computed<Interaction[]>(() => {
   if (props.trigger?.length) {
@@ -112,5 +112,5 @@ onKeyStroke('Enter', onEnter)
 </script>
 
 <style>
-.magic-menu-trigger{cursor:var(--magic-menu-trigger-cursor,pointer)}
+.magic-menu-trigger{cursor:var(--magic-menu-trigger-cursor,pointer)}.magic-menu-trigger.-disabled{pointer-events:none}
 </style>

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue.d.ts

@@ -3,12 +3,14 @@ interface MagicMenuTriggerProps {
     disabled?: boolean;
     trigger?: Interaction[];
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuTriggerProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuTriggerProps>>>, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {
         isActive: boolean | undefined;
         isDisabled: boolean;
     }): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuTriggerProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuTriggerProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue

@@ -8,7 +8,6 @@
 import { computed, inject, onBeforeUnmount, provide } from 'vue'
 import { uuid } from '@maas/vue-equipment/utils'
 import { useMenuView } from '../composables/private/useMenuView'
-
 import {
   MagicMenuInstanceId,
   MagicMenuViewId,

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue.d.ts

@@ -3,9 +3,11 @@ interface MagicMenuViewProps {
     id?: string;
     placement?: Placement;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuViewProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuViewProps>>>, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {}): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuViewProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuViewProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/plugins/MagicMenu/src/composables/private/useMenuChannel.mjs

@@ -1,10 +1,7 @@
 import { reactive } from "vue";
 import { useMenuView } from "./useMenuView.mjs";
-import { useMenuState } from "./useMenuState.mjs";
 export function useMenuChannel(args) {
   const { instanceId, viewId } = args;
-  const { initializeState } = useMenuState(instanceId);
-  const state = initializeState();
   const { getView } = useMenuView(instanceId);
   const view = getView(viewId);
   function createChannel(args2) {
@@ -35,8 +32,7 @@ export function useMenuChannel(args) {
     return instance;
   }
   function deleteChannel(id) {
-    if (!view?.channels)
-      return;
+    if (!view?.channels) return;
     view.channels = view.channels.filter((x) => x.id !== id);
   }
   function getChannel(id) {
@@ -49,9 +45,6 @@ export function useMenuChannel(args) {
     if (instance) {
       instance.active = true;
       unselectSiblings(id);
-      if (view) {
-        state.input.view = view.id;
-      }
     }
   }
   function unselectChannel(id) {

package/dist/plugins/MagicMenu/src/composables/private/useMenuCursor.d.ts

@@ -1,13 +1,5 @@
-import { type MaybeRef } from 'vue';
-import type { Coordinates } from '../../types.js';
-import type { Placement } from '@floating-ui/vue';
-interface UseMenuCursorArgs {
-    from: MaybeRef<HTMLElement | undefined>;
-    to: MaybeRef<HTMLElement | undefined>;
-    placement: MaybeRef<Placement>;
-    click: MaybeRef<Coordinates | undefined>;
-}
-export declare function useMenuCursor(args: UseMenuCursorArgs): {
+import type { MenuView } from '../../types.js';
+export declare function useMenuCursor(view: MenuView, debug?: boolean): {
     coords: import("vue").Ref<{
         x: number;
         y: number;
@@ -18,4 +10,3 @@ export declare function useMenuCursor(args: UseMenuCursorArgs): {
     initialize: () => void;
     destroy: () => void;
 };
-export {};

package/dist/plugins/MagicMenu/src/composables/private/useMenuCursor.mjs

@@ -1,14 +1,7 @@
-import { ref, toValue } from "vue";
-import {
-  useEventListener,
-  useElementBounding,
-  useResizeObserver,
-  usePointer
-} from "@vueuse/core";
-export function useMenuCursor(args) {
-  const cancelListener = ref(new AbortController());
-  const { x, y } = usePointer();
-  const { from, to, placement, click } = args;
+import { ref } from "vue";
+import { useEventListener } from "@vueuse/core";
+export function useMenuCursor(view, debug = false) {
+  let cancelListener = new AbortController();
   const coords = ref([
     { x: 0, y: 0 },
     { x: 0, y: 0 },
@@ -19,7 +12,7 @@ export function useMenuCursor(args) {
   const isInsideTriangle = ref(false);
   function extendTriangle(vertices, pixelAmount) {
     const [a, b, c] = vertices;
-    switch (toValue(placement)) {
+    switch (view?.placement) {
       case "bottom":
       case "bottom-start":
       case "bottom-end":
@@ -63,11 +56,10 @@ export function useMenuCursor(args) {
         }
         break;
     }
-    coords.value = [a, b, c];
     return [a, b, c];
   }
-  function isPointInTriangle(args2) {
-    const { p, a, b, c } = args2;
+  function isPointInTriangle(args) {
+    const { p, a, b, c } = args;
     const v0 = { x: c.x - a.x, y: c.y - a.y };
     const v1 = { x: b.x - a.x, y: b.y - a.y };
     const v2 = { x: p.x - a.x, y: p.y - a.y };
@@ -81,37 +73,29 @@ export function useMenuCursor(args) {
     const v = (dot00 * dot12 - dot01 * dot02) * invDenom;
     return u >= 0 && v >= 0 && u + v <= 1;
   }
-  function isPointInRectangle(args2) {
-    const { p, top, left, bottom, right } = args2;
+  function isPointInRectangle(args) {
+    const { p, top, left, bottom, right } = args;
     return p.x >= left && p.x <= right && p.y >= top && p.y <= bottom;
   }
-  function triangleOverlap(cursor, from2, to2) {
-    const fromBounding = useElementBounding(from2, {
-      windowScroll: false,
-      windowResize: false
-    });
-    const toBounding = useElementBounding(to2, {
-      windowScroll: false,
-      windowResize: false
-    });
+  function getTriangle(fromBounding, toBounding) {
     const { top, left, bottom, right } = toBounding;
-    const centerPoint = toValue(click) ?? {
-      x: (fromBounding.left.value + fromBounding.right.value) / 2,
-      y: (fromBounding.top.value + fromBounding.bottom.value) / 2
+    const centerPoint = view.state.clicked ? view.state.clicked : {
+      x: (fromBounding.left + fromBounding.right) / 2,
+      y: (fromBounding.top + fromBounding.bottom) / 2
     };
     const sidePoints = [];
-    switch (toValue(placement)) {
+    switch (view.placement) {
       case "top":
       case "top-start":
       case "top-end":
       case "bottom":
       case "bottom-start":
       case "bottom-end":
-        const topDist = Math.abs(top.value - centerPoint.y);
-        const bottomDist = Math.abs(bottom.value - centerPoint.y);
+        const topDist = Math.abs(top - centerPoint.y);
+        const bottomDist = Math.abs(bottom - centerPoint.y);
         const mappedY = topDist < bottomDist ? top : bottom;
-        sidePoints.push({ x: left.value, y: mappedY.value });
-        sidePoints.push({ x: right.value, y: mappedY.value });
+        sidePoints.push({ x: left, y: mappedY });
+        sidePoints.push({ x: right, y: mappedY });
         break;
       case "right":
       case "right-start":
@@ -119,17 +103,21 @@ export function useMenuCursor(args) {
       case "left":
       case "left-start":
       case "left-end":
-        const rightDist = Math.abs(right.value - centerPoint.x);
-        const leftDist = Math.abs(left.value - centerPoint.x);
+        const rightDist = Math.abs(right - centerPoint.x);
+        const leftDist = Math.abs(left - centerPoint.x);
         const mappedX = rightDist < leftDist ? right : left;
-        sidePoints.push({ x: mappedX.value, y: top.value });
-        sidePoints.push({ x: mappedX.value, y: bottom.value });
+        sidePoints.push({ x: mappedX, y: top });
+        sidePoints.push({ x: mappedX, y: bottom });
         break;
     }
     const [a, b, c] = extendTriangle(
       [centerPoint, sidePoints[0], sidePoints[1]],
       16
     );
+    return [a, b, c];
+  }
+  function triangleOverlap(cursor, fromBounding, toBounding) {
+    const [a, b, c] = getTriangle(fromBounding, toBounding);
     return isPointInTriangle({
       p: cursor,
       a,
@@ -137,69 +125,61 @@ export function useMenuCursor(args) {
       c
     });
   }
-  function elementOverlap(cursor, element) {
-    const { top, left, bottom, right } = useElementBounding(element, {
-      windowScroll: false,
-      windowResize: false
-    });
+  function elementOverlap(cursor, bounding) {
+    const { top, left, bottom, right } = bounding;
     return isPointInRectangle({
       p: cursor,
-      top: top.value,
-      left: left.value,
-      bottom: bottom.value,
-      right: right.value
+      top,
+      left,
+      bottom,
+      right
     });
   }
   function onMousemove(e) {
-    const cursor = { x: e.clientX, y: e.clientY };
-    isInsideFrom.value = elementOverlap(cursor, from);
-    isInsideTo.value = elementOverlap(cursor, to);
-    isInsideTriangle.value = triangleOverlap(cursor, from, to);
-  }
-  function fromMouseenter() {
-    isInsideFrom.value = true;
-  }
-  function fromMouseleave() {
-    isInsideFrom.value = false;
-  }
-  function toMouseenter() {
-    isInsideTo.value = true;
-  }
-  function toMouseleave(e) {
-    isInsideTo.value = false;
-  }
-  function onResize() {
-    const cursor = { x: x.value, y: y.value };
-    isInsideFrom.value = elementOverlap(cursor, from);
-    isInsideTo.value = elementOverlap(cursor, to);
-    isInsideTriangle.value = triangleOverlap(cursor, from, to);
+    const from = Array.from(
+      document.querySelectorAll(`[data-id="${view?.id}-trigger"]`)
+    );
+    const to = document.querySelector(
+      `[data-id="${view?.id}-content"] .magic-menu-content__inner`
+    );
+    if (from.length && to) {
+      const cursor = { x: e.clientX, y: e.clientY };
+      const toBounding = to.getBoundingClientRect();
+      isInsideTo.value = elementOverlap(cursor, toBounding);
+      isInsideFrom.value = from.some((trigger) => {
+        const fromBounding = trigger.getBoundingClientRect();
+        const overlap = elementOverlap(cursor, fromBounding);
+        return overlap;
+      });
+      isInsideTriangle.value = from.some((trigger) => {
+        const fromBounding = trigger.getBoundingClientRect();
+        const overlap = triangleOverlap(cursor, fromBounding, toBounding);
+        return overlap;
+      });
+      if (debug) {
+        const allCoords = [];
+        from.forEach((trigger) => {
+          const fromBounding = trigger.getBoundingClientRect();
+          const [a, b, c] = getTriangle(fromBounding, toBounding);
+          allCoords.push(a, b, c);
+        });
+        coords.value = allCoords;
+      }
+    }
   }
   function initialize() {
-    cancelListener.value.abort();
-    cancelListener.value = new AbortController();
-    useEventListener(from, "mouseenter", fromMouseenter, {
-      signal: cancelListener.value.signal
-    });
-    useEventListener(from, "mouseleave", fromMouseleave, {
-      signal: cancelListener.value.signal
-    });
-    useEventListener(to, "mouseenter", toMouseenter, {
-      signal: cancelListener.value.signal
-    });
-    useEventListener(to, "mouseleave", toMouseleave, {
-      signal: cancelListener.value.signal
-    });
+    cancelListener.abort();
+    cancelListener = new AbortController();
     useEventListener(document, "mousemove", onMousemove, {
-      signal: cancelListener.value.signal
+      signal: cancelListener.signal
     });
-    useResizeObserver(to, onResize);
   }
   function destroy() {
     coords.value = [];
     isInsideFrom.value = false;
     isInsideTo.value = false;
     isInsideTriangle.value = false;
-    cancelListener.value.abort();
+    cancelListener.abort();
   }
   return {
     coords,

package/dist/plugins/MagicMenu/src/composables/private/useMenuDOM.mjs

@@ -11,8 +11,7 @@ export function useMenuDOM() {
     scrollLock.value = false;
   }
   function addScrollLockPadding() {
-    if (typeof window === "undefined")
-      return;
+    if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-menu?/);
     const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
     document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);

package/dist/plugins/MagicMenu/src/composables/private/useMenuItem.mjs

@@ -39,8 +39,7 @@ export function useMenuItem(args) {
     return instance;
   }
   function deleteItem(id) {
-    if (!view?.items)
-      return;
+    if (!view?.items) return;
     view.items = view.items.filter((x) => x.id !== id);
   }
   function getItem(id) {

package/dist/plugins/MagicMenu/src/composables/private/useMenuKeyListener.mjs

@@ -94,8 +94,7 @@ export function useMenuKeyListener(instanceId) {
     }
     const viewId = state.input.view;
     const inputView = getView(viewId);
-    if (!inputView)
-      return;
+    if (!inputView) return;
     const enabledItems = getEnabledItems(inputView);
     const prevIndex = enabledItems.findIndex((item) => item.active) - 1;
     if (prevIndex >= 0) {
@@ -118,8 +117,7 @@ export function useMenuKeyListener(instanceId) {
     }
     const viewId = state.input.view;
     const inputView = getView(viewId);
-    if (!inputView)
-      return;
+    if (!inputView) return;
     const enabledItems = getEnabledItems(inputView);
     const nextIndex = enabledItems.findIndex((item) => item.active) + 1;
     if (nextIndex >= 0) {

package/dist/plugins/MagicMenu/src/composables/private/useMenuTrigger.mjs

@@ -15,7 +15,7 @@ export function useMenuTrigger(args) {
         selectView(viewId);
         state.active = true;
         if (view) {
-          view.click = { x: e.clientX, y: e.clientY };
+          view.state.clicked = { x: e.clientX, y: e.clientY };
         }
         if (!itemId) {
           state.input.view = viewId;
@@ -38,11 +38,17 @@ export function useMenuTrigger(args) {
   }
   function onMouseenter() {
     if (mappedTrigger.value.includes("mouseenter") && !mappedDisabled.value && viewId && view) {
-      if (mappedTrigger.value[0].includes("mouseenter")) {
+      if (mappedTrigger.value[0] === "mouseenter") {
         state.active = true;
       }
+      let delay = 0;
+      switch (state.options.mode) {
+        case "navigation":
+          delay = 200;
+          break;
+      }
       if (state.active) {
-        selectView(viewId);
+        selectView(viewId, delay);
         if (!itemId) {
           state.input.view = viewId;
         }
@@ -51,10 +57,16 @@ export function useMenuTrigger(args) {
   }
   function onClick(e) {
     if (mappedTrigger.value.includes("click") && !mappedDisabled.value && e.button === 0 && viewId) {
+      let delay = 0;
+      switch (state.options.mode) {
+        case "navigation":
+          delay = 200;
+          break;
+      }
       switch (true) {
         case !state.active:
           state.active = true;
-          selectView(viewId);
+          selectView(viewId, delay);
           if (!itemId) {
             state.input.view = viewId;
           }

package/dist/plugins/MagicMenu/src/composables/private/useMenuView.d.ts

@@ -12,8 +12,8 @@ export declare function useMenuView(instanceId: MaybeRef<string>): {
     getTopLevelView: () => MenuView | undefined;
     getNestedView: (itemId: string) => MenuView | undefined;
     getParentView: (id: string) => MenuView | undefined;
-    selectView: (id: string) => void;
-    unselectView: (id: string) => void;
+    selectView: (id: string, delayMs?: number) => Promise<void>;
+    unselectView: (id: string, delayMs?: number) => Promise<void>;
     unselectUnrelatedViews: (id: string) => void;
     unselectDescendingViews: (id: string) => void;
     unselectAllViews: () => void;

package/dist/plugins/MagicMenu/src/composables/private/useMenuView.mjs

@@ -1,8 +1,4 @@
-import {
-  reactive,
-  computed,
-  toValue
-} from "vue";
+import { reactive, computed, toValue } from "vue";
 import { useMenuState } from "./useMenuState.mjs";
 export function useMenuView(instanceId) {
   const { initializeState } = useMenuState(instanceId);
@@ -23,7 +19,11 @@ export function useMenuView(instanceId) {
       active: false,
       items: [],
       channels: [],
-      placement
+      placement,
+      state: {
+        selectAbortController: new AbortController(),
+        unselectAbortController: new AbortController()
+      }
     };
     return reactive(view);
   }
@@ -32,11 +32,19 @@ export function useMenuView(instanceId) {
     state.views = [...state.views, view];
     return view;
   }
+  function delay(ms, signal) {
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(resolve, ms);
+      signal.addEventListener("abort", () => {
+        clearTimeout(timer);
+        reject(new DOMException("Aborted", "AbortError"));
+      });
+    });
+  }
   function initializeView(args) {
     const { id } = args;
     let instance = getView(id);
-    if (!instance)
-      instance = addView(args);
+    if (!instance) instance = addView(args);
     return instance;
   }
   function deleteView(id) {
@@ -81,17 +89,49 @@ export function useMenuView(instanceId) {
       (view) => view.id !== id && !argView?.parent.views.includes(view.id)
     );
   }
-  function selectView(id) {
+  async function selectView(id, delayMs = 0) {
     const instance = getView(id);
     if (instance) {
-      instance.active = true;
-      unselectUnrelatedViews(id);
+      if (instance.state.unselectAbortController) {
+        instance.state.unselectAbortController.abort();
+      }
+      const abortController = new AbortController();
+      instance.state.selectAbortController = abortController;
+      try {
+        await delay(delayMs, abortController.signal);
+        instance.active = true;
+        unselectUnrelatedViews(id);
+      } catch (err) {
+        if (err.name === "AbortError") {
+          console.log(
+            `selectView() was interrupted by a call to unselectView()`
+          );
+        } else {
+          throw err;
+        }
+      }
     }
   }
-  function unselectView(id) {
+  async function unselectView(id, delayMs = 0) {
     const instance = getView(id);
     if (instance) {
-      instance.active = false;
+      if (instance.state.selectAbortController) {
+        instance.state.selectAbortController.abort();
+      }
+      const abortController = new AbortController();
+      instance.state.unselectAbortController = abortController;
+      try {
+        await delay(delayMs, abortController.signal);
+        instance.active = false;
+      } catch (err) {
+        if (err.name === "AbortError") {
+          console.log(
+            `unselectView() was interrupted by a call to selectView()`
+          );
+        } else {
+          throw err;
+        }
+      }
     }
   }
   function unselectUnrelatedViews(id) {

package/dist/plugins/MagicMenu/src/composables/useMagicMenu.d.ts

@@ -4,8 +4,8 @@ interface UseMagicMenuArgs {
     viewId: string;
 }
 export declare function useMagicMenu(args: UseMagicMenuArgs): {
-    selectView: (id: string) => void;
-    unselectView: (id: string) => void;
+    selectView: (id: string, delayMs?: number) => Promise<void>;
+    unselectView: (id: string, delayMs?: number) => Promise<void>;
     selectChannel: (id: string) => void;
     unselectChannel: (id: string) => void;
 };

package/dist/plugins/MagicMenu/src/types/index.d.ts

@@ -3,10 +3,13 @@ import type { RequireAllNested } from '@maas/vue-equipment/utils';
 type MenuMode = 'dropdown' | 'menubar' | 'context' | 'navigation';
 export interface MagicMenuOptions {
     mode?: MenuMode;
+    debug?: boolean;
     transition?: {
-        initial?: string;
-        final?: string;
-        nested?: string;
+        content?: {
+            default?: string;
+            nested?: string;
+        };
+        channel: string;
     };
 }
 export type Interaction = 'click' | 'mouseenter' | 'right-click';
@@ -33,7 +36,11 @@ export interface MenuView {
         views: string[];
     };
     placement: Placement;
-    click?: Coordinates;
+    state: {
+        selectAbortController: AbortController;
+        unselectAbortController: AbortController;
+        clicked?: Coordinates;
+    };
 }
 export interface MenuState {
     id: string;