tuikit-atomicx-vue3 0.1.0

package/dist/components/MessageList/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.js

@@ -0,0 +1,1704 @@
+import { ref, computed, provide, inject, defineComponent, watch, h, watchEffect, markRaw, toRefs, createBlock, openBlock, unref, withCtx, createVNode, renderSlot, normalizeProps, guardReactiveProps, onMounted, mergeDefaults, onUnmounted, mergeProps, nextTick, withModifiers, createElementBlock, Fragment, normalizeClass, renderList, normalizeStyle, createCommentVNode, resolveDynamicComponent, createElementVNode, toDisplayString } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { c as cs } from "../../../../../index-BF6QB9jF.js";
+import { i as injectConfigProviderContext, l as refAutoReset, g as getActiveElement, j as unrefElement, S as Slot, a as useVModel, c as createContext, P as Primitive, m as createSharedComposable, n as useEventListener, b as useBodyScrollLock, u as useForwardExpose, F as FocusScope_default, D as DismissableLayer_default, d as useHideOthers, e as Presence_default, T as Teleport_default, f as useEmitAsProps } from "../../../../../Teleport-BnT1MTUO.js";
+import { d as PopperAnchor_default, P as PopperRoot_default, a as useFocusGuards, b as PopperContent_default, e as PopperContentPropsDefaultValue, c as useForwardPropsEmits } from "../../../../../PopperContent-C59duB_H.js";
+import { g as getOpenState, i as isPointerInGraceArea, a as isMouseEvent, F as FIRST_LAST_KEYS, L as LAST_KEYS, f as focusFirst$1, S as SELECTION_KEYS, I as ITEM_SELECT } from "../../../../../utils-CnPWv_hZ.js";
+import { useMessageActions } from "../../../../../hooks/useMessageActions.js";
+import { _ as _export_sfc } from "../../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const ignoredElement = ["INPUT", "TEXTAREA"];
+function useArrowNavigation(e, currentElement, parentElement, options = {}) {
+  if (!currentElement || options.enableIgnoredElement && ignoredElement.includes(currentElement.nodeName)) return null;
+  const { arrowKeyOptions = "both", attributeName = "[data-reka-collection-item]", itemsArray = [], loop = true, dir = "ltr", preventScroll = true, focus = false } = options;
+  const [right, left, up, down, home, end] = [
+    e.key === "ArrowRight",
+    e.key === "ArrowLeft",
+    e.key === "ArrowUp",
+    e.key === "ArrowDown",
+    e.key === "Home",
+    e.key === "End"
+  ];
+  const goingVertical = up || down;
+  const goingHorizontal = right || left;
+  if (!home && !end && (!goingVertical && !goingHorizontal || arrowKeyOptions === "vertical" && goingHorizontal || arrowKeyOptions === "horizontal" && goingVertical)) return null;
+  const allCollectionItems = parentElement ? Array.from(parentElement.querySelectorAll(attributeName)) : itemsArray;
+  if (!allCollectionItems.length) return null;
+  if (preventScroll) e.preventDefault();
+  let item = null;
+  if (goingHorizontal || goingVertical) {
+    const goForward = goingVertical ? down : dir === "ltr" ? right : left;
+    item = findNextFocusableElement(allCollectionItems, currentElement, {
+      goForward,
+      loop
+    });
+  } else if (home) item = allCollectionItems.at(0) || null;
+  else if (end) item = allCollectionItems.at(-1) || null;
+  if (focus) item == null ? void 0 : item.focus();
+  return item;
+}
+function findNextFocusableElement(elements, currentElement, options, iterations = elements.length) {
+  if (--iterations === 0) return null;
+  const index = elements.indexOf(currentElement);
+  const newIndex = options.goForward ? index + 1 : index - 1;
+  if (!options.loop && (newIndex < 0 || newIndex >= elements.length)) return null;
+  const adjustedNewIndex = (newIndex + elements.length) % elements.length;
+  const candidate = elements[adjustedNewIndex];
+  if (!candidate) return null;
+  const isDisabled = candidate.hasAttribute("disabled") && candidate.getAttribute("disabled") !== "false";
+  if (isDisabled) return findNextFocusableElement(elements, candidate, options, iterations);
+  return candidate;
+}
+function useDirection(dir) {
+  const context = injectConfigProviderContext({ dir: ref("ltr") });
+  return computed(() => {
+    var _a;
+    return (dir == null ? void 0 : dir.value) || ((_a = context.dir) == null ? void 0 : _a.value) || "ltr";
+  });
+}
+function useTypeahead(callback) {
+  const search = refAutoReset("", 1e3);
+  const handleTypeaheadSearch = (key, items) => {
+    search.value = search.value + key;
+    {
+      const currentItem = getActiveElement();
+      const itemsWithTextValue = items.map((item) => {
+        var _a, _b;
+        return {
+          ...item,
+          textValue: ((_a = item.value) == null ? void 0 : _a.textValue) ?? ((_b = item.ref.textContent) == null ? void 0 : _b.trim()) ?? ""
+        };
+      });
+      const currentMatch = itemsWithTextValue.find((item) => item.ref === currentItem);
+      const values = itemsWithTextValue.map((item) => item.textValue);
+      const nextMatch = getNextMatch(values, search.value, currentMatch == null ? void 0 : currentMatch.textValue);
+      const newItem = itemsWithTextValue.find((item) => item.textValue === nextMatch);
+      if (newItem) newItem.ref.focus();
+      return newItem == null ? void 0 : newItem.ref;
+    }
+  };
+  const resetTypeahead = () => {
+    search.value = "";
+  };
+  return {
+    search,
+    handleTypeaheadSearch,
+    resetTypeahead
+  };
+}
+function wrapArray(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+function getNextMatch(values, search, currentMatch) {
+  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+  const normalizedSearch = isRepeated ? search[0] : search;
+  const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+  let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+  const excludeCurrentMatch = normalizedSearch.length === 1;
+  if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+  const nextMatch = wrappedValues.find((value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase()));
+  return nextMatch !== currentMatch ? nextMatch : void 0;
+}
+function usePrimitiveElement() {
+  const primitiveElement = ref();
+  const currentElement = computed(() => {
+    var _a, _b;
+    return ["#text", "#comment"].includes((_a = primitiveElement.value) == null ? void 0 : _a.$el.nodeName) ? (_b = primitiveElement.value) == null ? void 0 : _b.$el.nextElementSibling : unrefElement(primitiveElement);
+  });
+  return {
+    primitiveElement,
+    currentElement
+  };
+}
+const ITEM_DATA_ATTR = "data-reka-collection-item";
+function useCollection(options = {}) {
+  const { key = "", isProvider = false } = options;
+  const injectionKey = `${key}CollectionProvider`;
+  let context;
+  if (isProvider) {
+    const itemMap = ref(/* @__PURE__ */ new Map());
+    const collectionRef = ref();
+    context = {
+      collectionRef,
+      itemMap
+    };
+    provide(injectionKey, context);
+  } else context = inject(injectionKey);
+  const getItems = (includeDisabledItem = false) => {
+    const collectionNode = context.collectionRef.value;
+    if (!collectionNode) return [];
+    const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
+    const items = Array.from(context.itemMap.value.values());
+    const orderedItems = items.sort((a, b) => orderedNodes.indexOf(a.ref) - orderedNodes.indexOf(b.ref));
+    if (includeDisabledItem) return orderedItems;
+    else return orderedItems.filter((i) => i.ref.dataset.disabled !== "");
+  };
+  const CollectionSlot = defineComponent({
+    name: "CollectionSlot",
+    setup(_, { slots }) {
+      const { primitiveElement, currentElement } = usePrimitiveElement();
+      watch(currentElement, () => {
+        context.collectionRef.value = currentElement.value;
+      });
+      return () => h(Slot, { ref: primitiveElement }, slots);
+    }
+  });
+  const CollectionItem = defineComponent({
+    name: "CollectionItem",
+    inheritAttrs: false,
+    props: { value: { validator: () => true } },
+    setup(props, { slots, attrs }) {
+      const { primitiveElement, currentElement } = usePrimitiveElement();
+      watchEffect((cleanupFn) => {
+        if (currentElement.value) {
+          const key$1 = markRaw(currentElement.value);
+          context.itemMap.value.set(key$1, {
+            ref: currentElement.value,
+            value: props.value
+          });
+          cleanupFn(() => context.itemMap.value.delete(key$1));
+        }
+      });
+      return () => h(Slot, {
+        ...attrs,
+        [ITEM_DATA_ATTR]: "",
+        ref: primitiveElement
+      }, slots);
+    }
+  });
+  const reactiveItems = computed(() => Array.from(context.itemMap.value.values()));
+  const itemMapSize = computed(() => context.itemMap.value.size);
+  return {
+    getItems,
+    reactiveItems,
+    itemMapSize,
+    CollectionSlot,
+    CollectionItem
+  };
+}
+const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+const EVENT_OPTIONS = {
+  bubbles: false,
+  cancelable: true
+};
+function focusFirst(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = getActiveElement();
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (getActiveElement() !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+const [injectRovingFocusGroupContext, provideRovingFocusGroupContext] = createContext("RovingFocusGroup");
+var RovingFocusGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "RovingFocusGroup",
+  props: {
+    orientation: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    dir: {
+      type: String,
+      required: false
+    },
+    loop: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    currentTabStopId: {
+      type: [String, null],
+      required: false
+    },
+    defaultCurrentTabStopId: {
+      type: String,
+      required: false
+    },
+    preventScrollOnEntryFocus: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  emits: ["entryFocus", "update:currentTabStopId"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { loop, orientation, dir: propDir } = toRefs(props);
+    const dir = useDirection(propDir);
+    const currentTabStopId = useVModel(props, "currentTabStopId", emits, {
+      defaultValue: props.defaultCurrentTabStopId,
+      passive: props.currentTabStopId === void 0
+    });
+    const isTabbingBackOut = ref(false);
+    const isClickFocus = ref(false);
+    const focusableItemsCount = ref(0);
+    const { getItems, CollectionSlot } = useCollection({ isProvider: true });
+    function handleFocus(event) {
+      const isKeyboardFocus = !isClickFocus.value;
+      if (event.currentTarget && event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut.value) {
+        const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+        event.currentTarget.dispatchEvent(entryFocusEvent);
+        emits("entryFocus", entryFocusEvent);
+        if (!entryFocusEvent.defaultPrevented) {
+          const items = getItems().map((i) => i.ref).filter((i) => i.dataset.disabled !== "");
+          const activeItem = items.find((item) => item.getAttribute("data-active") === "");
+          const currentItem = items.find((item) => item.id === currentTabStopId.value);
+          const candidateItems = [
+            activeItem,
+            currentItem,
+            ...items
+          ].filter(Boolean);
+          focusFirst(candidateItems, props.preventScrollOnEntryFocus);
+        }
+      }
+      isClickFocus.value = false;
+    }
+    function handleMouseUp() {
+      setTimeout(() => {
+        isClickFocus.value = false;
+      }, 1);
+    }
+    __expose({ getItems });
+    provideRovingFocusGroupContext({
+      loop,
+      dir,
+      orientation,
+      currentTabStopId,
+      onItemFocus: (tabStopId) => {
+        currentTabStopId.value = tabStopId;
+      },
+      onItemShiftTab: () => {
+        isTabbingBackOut.value = true;
+      },
+      onFocusableItemAdd: () => {
+        focusableItemsCount.value++;
+      },
+      onFocusableItemRemove: () => {
+        focusableItemsCount.value--;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(CollectionSlot), null, {
+        default: withCtx(() => [createVNode(unref(Primitive), {
+          tabindex: isTabbingBackOut.value || focusableItemsCount.value === 0 ? -1 : 0,
+          "data-orientation": unref(orientation),
+          as: _ctx.as,
+          "as-child": _ctx.asChild,
+          dir: unref(dir),
+          style: { "outline": "none" },
+          onMousedown: _cache[0] || (_cache[0] = ($event) => isClickFocus.value = true),
+          onMouseup: handleMouseUp,
+          onFocus: handleFocus,
+          onBlur: _cache[1] || (_cache[1] = ($event) => isTabbingBackOut.value = false)
+        }, {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 8, [
+          "tabindex",
+          "data-orientation",
+          "as",
+          "as-child",
+          "dir"
+        ])]),
+        _: 3
+      });
+    };
+  }
+});
+var RovingFocusGroup_default = RovingFocusGroup_vue_vue_type_script_setup_true_lang_default;
+var MenuAnchor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "MenuAnchor",
+  props: {
+    reference: {
+      type: null,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(PopperAnchor_default), normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var MenuAnchor_default = MenuAnchor_vue_vue_type_script_setup_true_lang_default;
+function useIsUsingKeyboardImpl() {
+  const isUsingKeyboard = ref(false);
+  onMounted(() => {
+    useEventListener("keydown", () => {
+      isUsingKeyboard.value = true;
+    }, {
+      capture: true,
+      passive: true
+    });
+    useEventListener(["pointerdown", "pointermove"], () => {
+      isUsingKeyboard.value = false;
+    }, {
+      capture: true,
+      passive: true
+    });
+  });
+  return isUsingKeyboard;
+}
+const useIsUsingKeyboard = createSharedComposable(useIsUsingKeyboardImpl);
+const [injectMenuContext, provideMenuContext] = createContext(["MenuRoot", "MenuSub"], "MenuContext");
+const [injectMenuRootContext, provideMenuRootContext] = createContext("MenuRoot");
+var MenuRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "MenuRoot",
+  props: {
+    open: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    dir: {
+      type: String,
+      required: false
+    },
+    modal: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { modal, dir: propDir } = toRefs(props);
+    const dir = useDirection(propDir);
+    const open = useVModel(props, "open", emits);
+    const content = ref();
+    const isUsingKeyboardRef = useIsUsingKeyboard();
+    provideMenuContext({
+      open,
+      onOpenChange: (value) => {
+        open.value = value;
+      },
+      content,
+      onContentChange: (element) => {
+        content.value = element;
+      }
+    });
+    provideMenuRootContext({
+      onClose: () => {
+        open.value = false;
+      },
+      isUsingKeyboardRef,
+      dir,
+      modal
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(PopperRoot_default), null, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      });
+    };
+  }
+});
+var MenuRoot_default = MenuRoot_vue_vue_type_script_setup_true_lang_default;
+const [injectMenuContentContext, provideMenuContentContext] = createContext("MenuContent");
+var MenuContentImpl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "MenuContentImpl",
+  props: /* @__PURE__ */ mergeDefaults({
+    loop: {
+      type: Boolean,
+      required: false
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: false
+    },
+    disableOutsideScroll: {
+      type: Boolean,
+      required: false
+    },
+    trapFocus: {
+      type: Boolean,
+      required: false
+    },
+    side: {
+      type: null,
+      required: false
+    },
+    sideOffset: {
+      type: Number,
+      required: false
+    },
+    sideFlip: {
+      type: Boolean,
+      required: false
+    },
+    align: {
+      type: null,
+      required: false
+    },
+    alignOffset: {
+      type: Number,
+      required: false
+    },
+    alignFlip: {
+      type: Boolean,
+      required: false
+    },
+    avoidCollisions: {
+      type: Boolean,
+      required: false
+    },
+    collisionBoundary: {
+      type: null,
+      required: false
+    },
+    collisionPadding: {
+      type: [Number, Object],
+      required: false
+    },
+    arrowPadding: {
+      type: Number,
+      required: false
+    },
+    sticky: {
+      type: String,
+      required: false
+    },
+    hideWhenDetached: {
+      type: Boolean,
+      required: false
+    },
+    positionStrategy: {
+      type: String,
+      required: false
+    },
+    updatePositionStrategy: {
+      type: String,
+      required: false
+    },
+    disableUpdateOnLayoutShift: {
+      type: Boolean,
+      required: false
+    },
+    prioritizePosition: {
+      type: Boolean,
+      required: false
+    },
+    reference: {
+      type: null,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  }, { ...PopperContentPropsDefaultValue }),
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "entryFocus",
+    "openAutoFocus",
+    "closeAutoFocus",
+    "dismiss"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const menuContext = injectMenuContext();
+    const rootContext = injectMenuRootContext();
+    const { trapFocus, disableOutsidePointerEvents, loop } = toRefs(props);
+    useFocusGuards();
+    useBodyScrollLock(disableOutsidePointerEvents.value);
+    const searchRef = ref("");
+    const timerRef = ref(0);
+    const pointerGraceTimerRef = ref(0);
+    const pointerGraceIntentRef = ref(null);
+    const pointerDirRef = ref("right");
+    const lastPointerXRef = ref(0);
+    const currentItemId = ref(null);
+    const rovingFocusGroupRef = ref();
+    const { forwardRef, currentElement: contentElement } = useForwardExpose();
+    const { handleTypeaheadSearch } = useTypeahead();
+    watch(contentElement, (el) => {
+      menuContext.onContentChange(el);
+    });
+    onUnmounted(() => {
+      window.clearTimeout(timerRef.value);
+    });
+    function isPointerMovingToSubmenu(event) {
+      var _a, _b;
+      const isMovingTowards = pointerDirRef.value === ((_a = pointerGraceIntentRef.value) == null ? void 0 : _a.side);
+      return isMovingTowards && isPointerInGraceArea(event, (_b = pointerGraceIntentRef.value) == null ? void 0 : _b.area);
+    }
+    async function handleMountAutoFocus(event) {
+      var _a;
+      emits("openAutoFocus", event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      (_a = contentElement.value) == null ? void 0 : _a.focus({ preventScroll: true });
+    }
+    function handleKeyDown(event) {
+      var _a;
+      if (event.defaultPrevented) return;
+      const target = event.target;
+      const isKeyDownInside = target.closest("[data-reka-menu-content]") === event.currentTarget;
+      const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+      const isCharacterKey = event.key.length === 1;
+      const el = useArrowNavigation(event, getActiveElement(), contentElement.value, {
+        loop: loop.value,
+        arrowKeyOptions: "vertical",
+        dir: rootContext == null ? void 0 : rootContext.dir.value,
+        focus: true,
+        attributeName: "[data-reka-collection-item]:not([data-disabled])"
+      });
+      if (el) return el == null ? void 0 : el.focus();
+      if (event.code === "Space") return;
+      const collectionItems = ((_a = rovingFocusGroupRef.value) == null ? void 0 : _a.getItems()) ?? [];
+      if (isKeyDownInside) {
+        if (event.key === "Tab") event.preventDefault();
+        if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key, collectionItems);
+      }
+      if (event.target !== contentElement.value) return;
+      if (!FIRST_LAST_KEYS.includes(event.key)) return;
+      event.preventDefault();
+      const candidateNodes = [...collectionItems.map((item) => item.ref)];
+      if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
+      focusFirst$1(candidateNodes);
+    }
+    function handleBlur(event) {
+      var _a, _b;
+      if (!((_b = (_a = event == null ? void 0 : event.currentTarget) == null ? void 0 : _a.contains) == null ? void 0 : _b.call(_a, event.target))) {
+        window.clearTimeout(timerRef.value);
+        searchRef.value = "";
+      }
+    }
+    function handlePointerMove(event) {
+      var _a;
+      if (!isMouseEvent(event)) return;
+      const target = event.target;
+      const pointerXHasChanged = lastPointerXRef.value !== event.clientX;
+      if (((_a = event == null ? void 0 : event.currentTarget) == null ? void 0 : _a.contains(target)) && pointerXHasChanged) {
+        const newDir = event.clientX > lastPointerXRef.value ? "right" : "left";
+        pointerDirRef.value = newDir;
+        lastPointerXRef.value = event.clientX;
+      }
+    }
+    provideMenuContentContext({
+      onItemEnter: (event) => {
+        if (isPointerMovingToSubmenu(event)) return true;
+        else return false;
+      },
+      onItemLeave: (event) => {
+        var _a;
+        if (isPointerMovingToSubmenu(event)) return;
+        (_a = contentElement.value) == null ? void 0 : _a.focus();
+        currentItemId.value = null;
+      },
+      onTriggerLeave: (event) => {
+        if (isPointerMovingToSubmenu(event)) return true;
+        else return false;
+      },
+      searchRef,
+      pointerGraceTimerRef,
+      onPointerGraceIntentChange: (intent) => {
+        pointerGraceIntentRef.value = intent;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(FocusScope_default), {
+        "as-child": "",
+        trapped: unref(trapFocus),
+        onMountAutoFocus: handleMountAutoFocus,
+        onUnmountAutoFocus: _cache[7] || (_cache[7] = ($event) => emits("closeAutoFocus", $event))
+      }, {
+        default: withCtx(() => [createVNode(unref(DismissableLayer_default), {
+          "as-child": "",
+          "disable-outside-pointer-events": unref(disableOutsidePointerEvents),
+          onEscapeKeyDown: _cache[2] || (_cache[2] = ($event) => emits("escapeKeyDown", $event)),
+          onPointerDownOutside: _cache[3] || (_cache[3] = ($event) => emits("pointerDownOutside", $event)),
+          onFocusOutside: _cache[4] || (_cache[4] = ($event) => emits("focusOutside", $event)),
+          onInteractOutside: _cache[5] || (_cache[5] = ($event) => emits("interactOutside", $event)),
+          onDismiss: _cache[6] || (_cache[6] = ($event) => emits("dismiss"))
+        }, {
+          default: withCtx(() => [createVNode(unref(RovingFocusGroup_default), {
+            ref_key: "rovingFocusGroupRef",
+            ref: rovingFocusGroupRef,
+            "current-tab-stop-id": currentItemId.value,
+            "onUpdate:currentTabStopId": _cache[0] || (_cache[0] = ($event) => currentItemId.value = $event),
+            "as-child": "",
+            orientation: "vertical",
+            dir: unref(rootContext).dir.value,
+            loop: unref(loop),
+            onEntryFocus: _cache[1] || (_cache[1] = (event) => {
+              emits("entryFocus", event);
+              if (!unref(rootContext).isUsingKeyboardRef.value) event.preventDefault();
+            })
+          }, {
+            default: withCtx(() => [createVNode(unref(PopperContent_default), {
+              ref: unref(forwardRef),
+              role: "menu",
+              as: _ctx.as,
+              "as-child": _ctx.asChild,
+              "aria-orientation": "vertical",
+              "data-reka-menu-content": "",
+              "data-state": unref(getOpenState)(unref(menuContext).open.value),
+              dir: unref(rootContext).dir.value,
+              side: _ctx.side,
+              "side-offset": _ctx.sideOffset,
+              align: _ctx.align,
+              "align-offset": _ctx.alignOffset,
+              "avoid-collisions": _ctx.avoidCollisions,
+              "collision-boundary": _ctx.collisionBoundary,
+              "collision-padding": _ctx.collisionPadding,
+              "arrow-padding": _ctx.arrowPadding,
+              "prioritize-position": _ctx.prioritizePosition,
+              "position-strategy": _ctx.positionStrategy,
+              "update-position-strategy": _ctx.updatePositionStrategy,
+              sticky: _ctx.sticky,
+              "hide-when-detached": _ctx.hideWhenDetached,
+              reference: _ctx.reference,
+              onKeydown: handleKeyDown,
+              onBlur: handleBlur,
+              onPointermove: handlePointerMove
+            }, {
+              default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+              _: 3
+            }, 8, [
+              "as",
+              "as-child",
+              "data-state",
+              "dir",
+              "side",
+              "side-offset",
+              "align",
+              "align-offset",
+              "avoid-collisions",
+              "collision-boundary",
+              "collision-padding",
+              "arrow-padding",
+              "prioritize-position",
+              "position-strategy",
+              "update-position-strategy",
+              "sticky",
+              "hide-when-detached",
+              "reference"
+            ])]),
+            _: 3
+          }, 8, [
+            "current-tab-stop-id",
+            "dir",
+            "loop"
+          ])]),
+          _: 3
+        }, 8, ["disable-outside-pointer-events"])]),
+        _: 3
+      }, 8, ["trapped"]);
+    };
+  }
+});
+var MenuContentImpl_default = MenuContentImpl_vue_vue_type_script_setup_true_lang_default;
+var MenuItemImpl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  inheritAttrs: false,
+  __name: "MenuItemImpl",
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    textValue: {
+      type: String,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const contentContext = injectMenuContentContext();
+    const { forwardRef } = useForwardExpose();
+    const { CollectionItem } = useCollection();
+    const isFocused = ref(false);
+    async function handlePointerMove(event) {
+      if (event.defaultPrevented) return;
+      if (!isMouseEvent(event)) return;
+      if (props.disabled) contentContext.onItemLeave(event);
+      else {
+        const defaultPrevented = contentContext.onItemEnter(event);
+        if (!defaultPrevented) {
+          const item = event.currentTarget;
+          item == null ? void 0 : item.focus({ preventScroll: true });
+        }
+      }
+    }
+    async function handlePointerLeave(event) {
+      await nextTick();
+      if (event.defaultPrevented) return;
+      if (!isMouseEvent(event)) return;
+      contentContext.onItemLeave(event);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(CollectionItem), { value: { textValue: _ctx.textValue } }, {
+        default: withCtx(() => [createVNode(unref(Primitive), mergeProps({
+          ref: unref(forwardRef),
+          role: "menuitem",
+          tabindex: "-1"
+        }, _ctx.$attrs, {
+          as: _ctx.as,
+          "as-child": _ctx.asChild,
+          "aria-disabled": _ctx.disabled || void 0,
+          "data-disabled": _ctx.disabled ? "" : void 0,
+          "data-highlighted": isFocused.value ? "" : void 0,
+          onPointermove: handlePointerMove,
+          onPointerleave: handlePointerLeave,
+          onFocus: _cache[0] || (_cache[0] = async (event) => {
+            await nextTick();
+            if (event.defaultPrevented || _ctx.disabled) return;
+            isFocused.value = true;
+          }),
+          onBlur: _cache[1] || (_cache[1] = async (event) => {
+            await nextTick();
+            if (event.defaultPrevented) return;
+            isFocused.value = false;
+          })
+        }), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16, [
+          "as",
+          "as-child",
+          "aria-disabled",
+          "data-disabled",
+          "data-highlighted"
+        ])]),
+        _: 3
+      }, 8, ["value"]);
+    };
+  }
+});
+var MenuItemImpl_default = MenuItemImpl_vue_vue_type_script_setup_true_lang_default;
+var MenuItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "MenuItem",
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    textValue: {
+      type: String,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { forwardRef, currentElement } = useForwardExpose();
+    const rootContext = injectMenuRootContext();
+    const contentContext = injectMenuContentContext();
+    const isPointerDownRef = ref(false);
+    async function handleSelect() {
+      const menuItem = currentElement.value;
+      if (!props.disabled && menuItem) {
+        const itemSelectEvent = new CustomEvent(ITEM_SELECT, {
+          bubbles: true,
+          cancelable: true
+        });
+        emits("select", itemSelectEvent);
+        await nextTick();
+        if (itemSelectEvent.defaultPrevented) isPointerDownRef.value = false;
+        else rootContext.onClose();
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(MenuItemImpl_default, mergeProps(props, {
+        ref: unref(forwardRef),
+        onClick: handleSelect,
+        onPointerdown: _cache[0] || (_cache[0] = () => {
+          isPointerDownRef.value = true;
+        }),
+        onPointerup: _cache[1] || (_cache[1] = async (event) => {
+          var _a;
+          await nextTick();
+          if (event.defaultPrevented) return;
+          if (!isPointerDownRef.value) (_a = event.currentTarget) == null ? void 0 : _a.click();
+        }),
+        onKeydown: _cache[2] || (_cache[2] = async (event) => {
+          const isTypingAhead = unref(contentContext).searchRef.value !== "";
+          if (_ctx.disabled || isTypingAhead && event.key === " ") return;
+          if (unref(SELECTION_KEYS).includes(event.key)) {
+            event.currentTarget.click();
+            event.preventDefault();
+          }
+        })
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var MenuItem_default = MenuItem_vue_vue_type_script_setup_true_lang_default;
+var MenuRootContentModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "MenuRootContentModal",
+  props: {
+    loop: {
+      type: Boolean,
+      required: false
+    },
+    side: {
+      type: null,
+      required: false
+    },
+    sideOffset: {
+      type: Number,
+      required: false
+    },
+    sideFlip: {
+      type: Boolean,
+      required: false
+    },
+    align: {
+      type: null,
+      required: false
+    },
+    alignOffset: {
+      type: Number,
+      required: false
+    },
+    alignFlip: {
+      type: Boolean,
+      required: false
+    },
+    avoidCollisions: {
+      type: Boolean,
+      required: false
+    },
+    collisionBoundary: {
+      type: null,
+      required: false
+    },
+    collisionPadding: {
+      type: [Number, Object],
+      required: false
+    },
+    arrowPadding: {
+      type: Number,
+      required: false
+    },
+    sticky: {
+      type: String,
+      required: false
+    },
+    hideWhenDetached: {
+      type: Boolean,
+      required: false
+    },
+    positionStrategy: {
+      type: String,
+      required: false
+    },
+    updatePositionStrategy: {
+      type: String,
+      required: false
+    },
+    disableUpdateOnLayoutShift: {
+      type: Boolean,
+      required: false
+    },
+    prioritizePosition: {
+      type: Boolean,
+      required: false
+    },
+    reference: {
+      type: null,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "entryFocus",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const forwarded = useForwardPropsEmits(props, emits);
+    const menuContext = injectMenuContext();
+    const { forwardRef, currentElement } = useForwardExpose();
+    useHideOthers(currentElement);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(MenuContentImpl_default, mergeProps(unref(forwarded), {
+        ref: unref(forwardRef),
+        "trap-focus": unref(menuContext).open.value,
+        "disable-outside-pointer-events": unref(menuContext).open.value,
+        "disable-outside-scroll": true,
+        onDismiss: _cache[0] || (_cache[0] = ($event) => unref(menuContext).onOpenChange(false)),
+        onFocusOutside: _cache[1] || (_cache[1] = withModifiers(($event) => emits("focusOutside", $event), ["prevent"]))
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16, ["trap-focus", "disable-outside-pointer-events"]);
+    };
+  }
+});
+var MenuRootContentModal_default = MenuRootContentModal_vue_vue_type_script_setup_true_lang_default;
+var MenuRootContentNonModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "MenuRootContentNonModal",
+  props: {
+    loop: {
+      type: Boolean,
+      required: false
+    },
+    side: {
+      type: null,
+      required: false
+    },
+    sideOffset: {
+      type: Number,
+      required: false
+    },
+    sideFlip: {
+      type: Boolean,
+      required: false
+    },
+    align: {
+      type: null,
+      required: false
+    },
+    alignOffset: {
+      type: Number,
+      required: false
+    },
+    alignFlip: {
+      type: Boolean,
+      required: false
+    },
+    avoidCollisions: {
+      type: Boolean,
+      required: false
+    },
+    collisionBoundary: {
+      type: null,
+      required: false
+    },
+    collisionPadding: {
+      type: [Number, Object],
+      required: false
+    },
+    arrowPadding: {
+      type: Number,
+      required: false
+    },
+    sticky: {
+      type: String,
+      required: false
+    },
+    hideWhenDetached: {
+      type: Boolean,
+      required: false
+    },
+    positionStrategy: {
+      type: String,
+      required: false
+    },
+    updatePositionStrategy: {
+      type: String,
+      required: false
+    },
+    disableUpdateOnLayoutShift: {
+      type: Boolean,
+      required: false
+    },
+    prioritizePosition: {
+      type: Boolean,
+      required: false
+    },
+    reference: {
+      type: null,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "entryFocus",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const forwarded = useForwardPropsEmits(props, emits);
+    const menuContext = injectMenuContext();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(MenuContentImpl_default, mergeProps(unref(forwarded), {
+        "trap-focus": false,
+        "disable-outside-pointer-events": false,
+        "disable-outside-scroll": false,
+        onDismiss: _cache[0] || (_cache[0] = ($event) => unref(menuContext).onOpenChange(false))
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var MenuRootContentNonModal_default = MenuRootContentNonModal_vue_vue_type_script_setup_true_lang_default;
+var MenuContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "MenuContent",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: false
+    },
+    loop: {
+      type: Boolean,
+      required: false
+    },
+    side: {
+      type: null,
+      required: false
+    },
+    sideOffset: {
+      type: Number,
+      required: false
+    },
+    sideFlip: {
+      type: Boolean,
+      required: false
+    },
+    align: {
+      type: null,
+      required: false
+    },
+    alignOffset: {
+      type: Number,
+      required: false
+    },
+    alignFlip: {
+      type: Boolean,
+      required: false
+    },
+    avoidCollisions: {
+      type: Boolean,
+      required: false
+    },
+    collisionBoundary: {
+      type: null,
+      required: false
+    },
+    collisionPadding: {
+      type: [Number, Object],
+      required: false
+    },
+    arrowPadding: {
+      type: Number,
+      required: false
+    },
+    sticky: {
+      type: String,
+      required: false
+    },
+    hideWhenDetached: {
+      type: Boolean,
+      required: false
+    },
+    positionStrategy: {
+      type: String,
+      required: false
+    },
+    updatePositionStrategy: {
+      type: String,
+      required: false
+    },
+    disableUpdateOnLayoutShift: {
+      type: Boolean,
+      required: false
+    },
+    prioritizePosition: {
+      type: Boolean,
+      required: false
+    },
+    reference: {
+      type: null,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "entryFocus",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const forwarded = useForwardPropsEmits(props, emits);
+    const menuContext = injectMenuContext();
+    const rootContext = injectMenuRootContext();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || unref(menuContext).open.value }, {
+        default: withCtx(() => [unref(rootContext).modal.value ? (openBlock(), createBlock(MenuRootContentModal_default, normalizeProps(mergeProps({ key: 0 }, {
+          ..._ctx.$attrs,
+          ...unref(forwarded)
+        })), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16)) : (openBlock(), createBlock(MenuRootContentNonModal_default, normalizeProps(mergeProps({ key: 1 }, {
+          ..._ctx.$attrs,
+          ...unref(forwarded)
+        })), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16))]),
+        _: 3
+      }, 8, ["present"]);
+    };
+  }
+});
+var MenuContent_default = MenuContent_vue_vue_type_script_setup_true_lang_default;
+var MenuPortal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "MenuPortal",
+  props: {
+    to: {
+      type: null,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    defer: {
+      type: Boolean,
+      required: false
+    },
+    forceMount: {
+      type: Boolean,
+      required: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Teleport_default), normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var MenuPortal_default = MenuPortal_vue_vue_type_script_setup_true_lang_default;
+const [injectContextMenuRootContext, provideContextMenuRootContext] = createContext("ContextMenuRoot");
+var ContextMenuRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  inheritAttrs: false,
+  __name: "ContextMenuRoot",
+  props: {
+    dir: {
+      type: String,
+      required: false
+    },
+    modal: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { dir: propDir, modal } = toRefs(props);
+    useForwardExpose();
+    const dir = useDirection(propDir);
+    const open = ref(false);
+    const triggerElement = ref();
+    provideContextMenuRootContext({
+      open,
+      onOpenChange: (value) => {
+        open.value = value;
+      },
+      dir,
+      modal,
+      triggerElement
+    });
+    watch(open, (value) => {
+      emits("update:open", value);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MenuRoot_default), {
+        open: open.value,
+        "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+        dir: unref(dir),
+        modal: unref(modal)
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, [
+        "open",
+        "dir",
+        "modal"
+      ]);
+    };
+  }
+});
+var ContextMenuRoot_default = ContextMenuRoot_vue_vue_type_script_setup_true_lang_default;
+var ContextMenuContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "ContextMenuContent",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: false
+    },
+    loop: {
+      type: Boolean,
+      required: false
+    },
+    sideFlip: {
+      type: Boolean,
+      required: false
+    },
+    alignOffset: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    alignFlip: {
+      type: Boolean,
+      required: false
+    },
+    avoidCollisions: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    collisionBoundary: {
+      type: null,
+      required: false,
+      default: () => []
+    },
+    collisionPadding: {
+      type: [Number, Object],
+      required: false,
+      default: 0
+    },
+    sticky: {
+      type: String,
+      required: false,
+      default: "partial"
+    },
+    hideWhenDetached: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    positionStrategy: {
+      type: String,
+      required: false
+    },
+    disableUpdateOnLayoutShift: {
+      type: Boolean,
+      required: false
+    },
+    prioritizePosition: {
+      type: Boolean,
+      required: false
+    },
+    reference: {
+      type: null,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "closeAutoFocus"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const forwarded = useForwardPropsEmits(props, emits);
+    useForwardExpose();
+    const rootContext = injectContextMenuRootContext();
+    const hasInteractedOutside = ref(false);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MenuContent_default), mergeProps(unref(forwarded), {
+        side: "right",
+        "side-offset": 2,
+        align: "start",
+        "update-position-strategy": "always",
+        style: {
+          "--reka-context-menu-content-transform-origin": "var(--reka-popper-transform-origin)",
+          "--reka-context-menu-content-available-width": "var(--reka-popper-available-width)",
+          "--reka-context-menu-content-available-height": "var(--reka-popper-available-height)",
+          "--reka-context-menu-trigger-width": "var(--reka-popper-anchor-width)",
+          "--reka-context-menu-trigger-height": "var(--reka-popper-anchor-height)"
+        },
+        onCloseAutoFocus: _cache[0] || (_cache[0] = (event) => {
+          if (!event.defaultPrevented && hasInteractedOutside.value) event.preventDefault();
+          hasInteractedOutside.value = false;
+        }),
+        onInteractOutside: _cache[1] || (_cache[1] = (event) => {
+          const originalEvent = event.detail.originalEvent;
+          if (originalEvent.button === 2 && event.target === unref(rootContext).triggerElement.value) event.preventDefault();
+          if (!event.defaultPrevented && !unref(rootContext).modal.value) hasInteractedOutside.value = true;
+        })
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var ContextMenuContent_default = ContextMenuContent_vue_vue_type_script_setup_true_lang_default;
+var ContextMenuItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "ContextMenuItem",
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    textValue: {
+      type: String,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const emitsAsProps = useEmitAsProps(emits);
+    useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MenuItem_default), normalizeProps(guardReactiveProps({
+        ...props,
+        ...unref(emitsAsProps)
+      })), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var ContextMenuItem_default = ContextMenuItem_vue_vue_type_script_setup_true_lang_default;
+var ContextMenuPortal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "ContextMenuPortal",
+  props: {
+    to: {
+      type: null,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    defer: {
+      type: Boolean,
+      required: false
+    },
+    forceMount: {
+      type: Boolean,
+      required: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MenuPortal_default), normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var ContextMenuPortal_default = ContextMenuPortal_vue_vue_type_script_setup_true_lang_default;
+function isTouchOrPen(event) {
+  return event.pointerType !== "mouse";
+}
+var ContextMenuTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  inheritAttrs: false,
+  __name: "ContextMenuTrigger",
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "span"
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const { disabled } = toRefs(props);
+    const { forwardRef, currentElement } = useForwardExpose();
+    const rootContext = injectContextMenuRootContext();
+    const point = ref({
+      x: 0,
+      y: 0
+    });
+    const virtualEl = computed(() => ({ getBoundingClientRect: () => ({
+      width: 0,
+      height: 0,
+      left: point.value.x,
+      right: point.value.x,
+      top: point.value.y,
+      bottom: point.value.y,
+      ...point.value
+    }) }));
+    const longPressTimer = ref(0);
+    function clearLongPress() {
+      window.clearTimeout(longPressTimer.value);
+    }
+    function handleOpen(event) {
+      point.value = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      rootContext.onOpenChange(true);
+    }
+    async function handleContextMenu(event) {
+      if (!disabled.value) {
+        await nextTick();
+        if (!event.defaultPrevented) {
+          clearLongPress();
+          handleOpen(event);
+          event.preventDefault();
+        }
+      }
+    }
+    async function handlePointerDown(event) {
+      if (!disabled.value) {
+        await nextTick();
+        if (isTouchOrPen(event) && !event.defaultPrevented) {
+          clearLongPress();
+          longPressTimer.value = window.setTimeout(() => handleOpen(event), 700);
+        }
+      }
+    }
+    async function handlePointerEvent(event) {
+      if (!disabled.value) {
+        await nextTick();
+        if (isTouchOrPen(event) && !event.defaultPrevented) clearLongPress();
+      }
+    }
+    onMounted(() => {
+      if (currentElement.value) rootContext.triggerElement.value = currentElement.value;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(MenuAnchor_default), {
+        as: "template",
+        reference: virtualEl.value
+      }, null, 8, ["reference"]), createVNode(unref(Primitive), mergeProps({
+        ref: unref(forwardRef),
+        as: _ctx.as,
+        "as-child": _ctx.asChild,
+        "data-state": unref(rootContext).open.value ? "open" : "closed",
+        "data-disabled": unref(disabled) ? "" : void 0,
+        style: {
+          WebkitTouchCallout: "none",
+          pointerEvents: "auto"
+        }
+      }, _ctx.$attrs, {
+        onContextmenu: handleContextMenu,
+        onPointerdown: handlePointerDown,
+        onPointermove: handlePointerEvent,
+        onPointercancel: handlePointerEvent,
+        onPointerup: handlePointerEvent
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16, [
+        "as",
+        "as-child",
+        "data-state",
+        "data-disabled"
+      ])], 64);
+    };
+  }
+});
+var ContextMenuTrigger_default = ContextMenuTrigger_vue_vue_type_script_setup_true_lang_default;
+const slideIn = "_slideIn_twbzd_1";
+const slideOut = "_slideOut_twbzd_1";
+const classes = {
+  "message-action-dropdown": "_message-action-dropdown_twbzd_1",
+  slideIn,
+  slideOut
+};
+const _hoisted_1 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MessageActionDropdown",
+  props: {
+    message: { default: () => ({}) },
+    messageActionList: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const defaultActionList = useMessageActions();
+    const visibleActions = computed(() => {
+      const availableActions = props.messageActionList ?? defaultActionList;
+      return availableActions.filter((action) => {
+        if (action.visible === void 0) {
+          return true;
+        }
+        if (typeof action.visible === "function") {
+          return action.visible(props.message);
+        }
+        return action.visible;
+      });
+    });
+    const handleActionClick = (action) => {
+      var _a;
+      (_a = action.onClick) == null ? void 0 : _a.call(action, props.message);
+    };
+    const bodyElement = document.body;
+    return (_ctx, _cache) => {
+      return visibleActions.value.length <= 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }, void 0, true) : (openBlock(), createBlock(unref(ContextMenuRoot_default), { key: 1 }, {
+        default: withCtx(() => [
+          createVNode(unref(ContextMenuTrigger_default), { "as-child": "" }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 3
+          }),
+          createVNode(unref(ContextMenuPortal_default), { to: unref(bodyElement) }, {
+            default: withCtx(() => [
+              createVNode(unref(ContextMenuContent_default), {
+                class: normalizeClass(unref(cs)(unref(classes)["message-action-dropdown"]))
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(visibleActions.value, (action) => {
+                    return openBlock(), createBlock(unref(ContextMenuItem_default), {
+                      key: action.key,
+                      as: "button",
+                      class: normalizeClass(unref(cs)("message-action-dropdown__item", action.className)),
+                      style: normalizeStyle(action.style),
+                      onSelect: ($event) => handleActionClick(action)
+                    }, {
+                      default: withCtx(() => [
+                        action.component && action.visible ? (openBlock(), createBlock(resolveDynamicComponent(action.component), {
+                          key: 0,
+                          message: _ctx.message
+                        }, null, 8, ["message"])) : action.visible ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                          createElementVNode("span", null, toDisplayString(unref(t)(`TUIChat.${action.label}`, { defaultValue: action.label })), 1),
+                          action.icon ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                            typeof action.icon === "string" ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(action.icon), 1)) : (openBlock(), createBlock(resolveDynamicComponent(action.icon), {
+                              key: 1,
+                              class: normalizeClass(unref(cs)("message-action-dropdown__icon"))
+                            }, null, 8, ["class"]))
+                          ], 64)) : createCommentVNode("", true)
+                        ], 64)) : createCommentVNode("", true)
+                      ]),
+                      _: 2
+                    }, 1032, ["class", "style", "onSelect"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ]),
+            _: 1
+          }, 8, ["to"])
+        ]),
+        _: 3
+      }));
+    };
+  }
+});
+const MessageActionDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-617704f8"]]);
+export {
+  MessageActionDropdown as default
+};