@destyler/popover 0.0.1-beta.6 → 0.0.1-beta.8

package/dist/index.cjs

@@ -1,1155 +1,374 @@
 'use strict';
 
 const vue = require('vue');
+const popper = require('@destyler/popper');
 const shared = require('@destyler/shared');
-const directives = require('@destyler/directives');
 const composition = require('@destyler/composition');
+const primitive = require('@destyler/primitive');
+const presence = require('@destyler/presence');
+const dismissableLayer = require('@destyler/dismissable-layer');
+const focusScope = require('@destyler/focus-scope');
+const directives = require('@destyler/directives');
+const teleport = require('@destyler/teleport');
 
-function getParentNode(node) {
-  if (node.nodeType === 9)
-    return null;
-  return node.parentNode;
-}
-function getScrollParent(node) {
-  if (node === null)
-    return null;
-  const parentNode = getParentNode(node);
-  if (parentNode === null)
-    return null;
-  if (parentNode.nodeType === 9)
-    return document;
-  if (parentNode.nodeType === 1) {
-    const { overflow, overflowX, overflowY } = getComputedStyle(
-      parentNode
-    );
-    if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX))
-      return parentNode;
-  }
-  return getScrollParent(parentNode);
-}
-
-const DestylerBinder = vue.defineComponent({
-  name: "DestylerBinder",
-  props: {
-    syncTargetWithParent: {
-      type: Boolean
-    },
-    syncTarget: {
-      type: Boolean,
-      default: true
-    }
+const [injectPopoverRootContext, providePopoverRootContext] = shared.createContext("DestylerPopoverRoot");
+const destylerPopoverRootProps = {
+  defaultOpen: {
+    type: Boolean,
+    required: false,
+    default: false
   },
-  setup(props) {
-    vue.provide("DestylerBinder", vue.getCurrentInstance()?.proxy);
-    const DestylerBinder2 = vue.inject("DestylerBinder", null);
-    const targetRef = vue.ref(null);
-    const followerResizeListeners = /* @__PURE__ */ new Set();
-    const followerScrollListeners = /* @__PURE__ */ new Set();
-    const onScrollRaf = () => {
-      followerScrollListeners.forEach((listener) => listener());
-    };
-    const onScroll = () => {
-      shared.beforeNextFrameOnce(onScrollRaf);
-    };
-    const onResize = () => {
-      followerResizeListeners.forEach((listener) => listener());
-    };
-    const setTargetRef = (el) => {
-      targetRef.value = el;
-      if (DestylerBinder2 && props.syncTargetWithParent)
-        DestylerBinder2.setTargetRef(el);
-    };
-    let scrollableNodes = [];
-    const ensureScrollListener = () => {
-      let cursor = targetRef.value;
-      while (true) {
-        cursor = getScrollParent(cursor);
-        if (cursor === null)
-          break;
-        scrollableNodes.push(cursor);
-      }
-      for (const el of scrollableNodes)
-        shared.on("scroll", el, onScroll, true);
-    };
-    const removeScrollListeners = () => {
-      for (const el of scrollableNodes)
-        shared.off("scroll", el, onScroll, true);
-      scrollableNodes = [];
-    };
-    const addScrollListener = (listener) => {
-      if (followerScrollListeners.size === 0)
-        ensureScrollListener();
-      if (!followerScrollListeners.has(listener))
-        followerScrollListeners.add(listener);
-    };
-    const removeScrollListener = (listener) => {
-      if (followerScrollListeners.has(listener))
-        followerScrollListeners.delete(listener);
-      if (followerScrollListeners.size === 0)
-        removeScrollListeners();
-    };
-    const addResizeListener = (listener) => {
-      if (followerResizeListeners.size === 0)
-        shared.on("resize", window, onResize);
-      if (!followerResizeListeners.has(listener))
-        followerResizeListeners.add(listener);
-    };
-    const removeResizeListener = (listener) => {
-      if (followerResizeListeners.has(listener))
-        followerResizeListeners.delete(listener);
-      if (followerResizeListeners.size === 0)
-        shared.off("resize", window, onResize);
-    };
-    vue.onBeforeUnmount(() => {
-      shared.off("resize", window, onResize);
-      removeScrollListeners();
+  open: {
+    type: Boolean,
+    required: false,
+    default: void 0
+  },
+  modal: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerPopoverRoot = vue.defineComponent({
+  name: "DestylerPopoverRoot",
+  props: destylerPopoverRootProps,
+  emits: ["update:open"],
+  setup(props, { emit }) {
+    const modalRef = vue.toRef(props.modal);
+    const openRef = composition.useVModel(props, "open", emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === void 0
+    });
+    const triggerElement = vue.ref();
+    const hasCustomAnchor = vue.ref(false);
+    function handleUpdateOpen(value) {
+      openRef.value = value;
+    }
+    providePopoverRootContext({
+      contentId: composition.useId(),
+      modal: modalRef,
+      open: openRef,
+      onOpenChange: (value) => {
+        handleUpdateOpen(value);
+      },
+      onOpenToggle: () => {
+        handleUpdateOpen(!openRef.value);
+      },
+      triggerElement,
+      hasCustomAnchor
     });
     return {
-      targetRef,
-      setTargetRef,
-      addScrollListener,
-      removeScrollListener,
-      addResizeListener,
-      removeResizeListener
+      openRef,
+      modalRef,
+      triggerElement,
+      hasCustomAnchor
     };
   },
   render() {
-    return shared.getSlot("binder", this.$slots);
+    return vue.h(popper.DestylerPopperRoot, this.$slots.default?.());
   }
 });
 
-const DestylerTarget = vue.defineComponent({
-  name: "DestylerTarget",
+const destylerPopoverAnchorProps = {
+  ...popper.destylerPopperArrowProps
+};
+const DestylerPopoverAnchor = vue.defineComponent({
+  name: "DestylerPopoverAnchor",
+  props: destylerPopoverAnchorProps,
   setup() {
-    const { setTargetRef, syncTarget } = vue.inject("DestylerBinder");
-    const setTargetDirective = {
-      mounted(el) {
-        setTargetRef(el);
-      },
-      updated(el) {
-        setTargetRef(el);
-      }
-    };
+    const rootContext = injectPopoverRootContext();
+    vue.onBeforeMount(() => {
+      rootContext.hasCustomAnchor.value = true;
+    });
+    vue.onUnmounted(() => {
+      rootContext.hasCustomAnchor.value = false;
+    });
+  },
+  render() {
+    return vue.h(popper.DestylerPopperAnchor, vue.mergeProps(this.$props, {}), this.$slots.default?.());
+  }
+});
+
+const destylerPopoverArrowProps = {
+  ...popper.destylerPopperArrowProps
+};
+const DestylerPopoverArrow = vue.defineComponent({
+  name: "DestylerPopoverArrow",
+  props: destylerPopoverArrowProps,
+  render() {
+    return vue.h(popper.DestylerPopperArrow, vue.mergeProps(this.$props, {}), this.$slots.default?.());
+  }
+});
+
+const destylerPopoverCloseProps = {
+  ...primitive.destylerPrimitiveProp,
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  }
+};
+const DestylerPopoverClose = vue.defineComponent({
+  name: "DestylerPopoverClose",
+  props: destylerPopoverCloseProps,
+  setup() {
+    const rootContext = injectPopoverRootContext();
     return {
-      syncTarget,
-      setTargetDirective
+      rootContext
     };
   },
   render() {
-    const { syncTarget, setTargetDirective } = this;
-    if (syncTarget) {
-      return vue.withDirectives(shared.getFirstVNode("follower", this.$slots), [
-        [setTargetDirective]
-      ]);
-    }
-    return shared.getFirstVNode("follower", this.$slots);
+    return vue.h(primitive.DestylerPrimitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild,
+      type: this.$props.as === "button" ? "button" : void 0,
+      onClick: () => {
+        this.rootContext.onOpenChange(false);
+      }
+    }, this.$slots.default?.());
   }
 });
 
-const DestylerLazyTeleport = vue.defineComponent({
-  name: "DestylerLazyTeleport",
-  props: {
-    to: {
-      type: [String, Object],
-      default: "body"
-    },
-    disabled: {
-      type: Boolean
-    },
-    show: {
-      type: Boolean,
-      required: true
-    }
-  },
+const destylerPopoverContentImplProps = {
+  ...popper.destylerPopperContentProps,
+  ...dismissableLayer.destylerDismissableLayerProps,
+  trapFocus: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const destylerPopoverContentImplEmits = ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss", "openAutoFocus", "closeAutoFocus"];
+const DestylerPopoverContentImpl = vue.defineComponent({
+  name: "DestylerPopoverContentImpl",
+  props: destylerPopoverContentImplProps,
+  emits: destylerPopoverContentImplEmits,
   setup(props) {
+    const forwarded = composition.useForwardProps(props);
+    const rootContext = injectPopoverRootContext();
+    composition.useFocusGuards();
     return {
-      showTeleport: composition.useFalseUntilTruthy(vue.toRef(props, "show")),
-      mergedTo: vue.computed(() => {
-        const { to } = props;
-        return to ?? "body";
-      })
+      rootContext,
+      forwarded
     };
   },
   render() {
-    return this.showTeleport ? this.disabled ? shared.getSlot("lazy-teleport", this.$slots) : vue.h(
-      vue.Teleport,
-      {
-        disabled: this.disabled,
-        to: this.mergedTo
+    return vue.h(focusScope.DestylerFocusScope, {
+      asChild: this.$props.asChild,
+      loop: true,
+      trapped: this.$props.trapFocus,
+      onMountAutoFocus: (event) => {
+        this.$emit("openAutoFocus", event);
       },
-      shared.getSlot("lazy-teleport", this.$slots)
-    ) : null;
+      onUnmountAutoFocus: (event) => {
+        this.$emit("closeAutoFocus", event);
+      }
+    }, vue.h(dismissableLayer.DestylerDismissableLayer, {
+      asChild: this.$props.asChild,
+      disableOutsidePointerEvents: this.$props.disableOutsidePointerEvents,
+      onPointerDownOutside: (event) => {
+        this.$emit("pointerDownOutside", event);
+      },
+      onInteractOutside: (event) => {
+        this.$emit("interactOutside", event);
+      },
+      onEscapeKeyDown: (event) => {
+        this.$emit("escapeKeyDown", event);
+      },
+      onFocusOutside: (event) => {
+        this.$emit("focusOutside", event);
+      },
+      onDismiss: () => {
+        this.rootContext.onOpenChange(false);
+      }
+    }, vue.withDirectives(vue.h(popper.DestylerPopperContent, vue.mergeProps(this.forwarded, {
+      "data-state": this.rootContext.open.value ? "open" : "closed",
+      "role": "dialog",
+      "style": {
+        "--destyler_popover_content_transform_origin": "var(--destyler_popper_transform_origin)",
+        "--destyler_popover_content_available_width": "var(--destyler_popper_available_width)",
+        "--destyler_popover_content_available_height": "var(--destyler_popper_available_height)",
+        "--destyler_popover_trigger_width": "var(--destyler_popper_anchor_width)",
+        "--destyler_popover_trigger_height": "var(--destyler_popper_anchor_height)"
+      }
+    }), this.$slots.default?.()), [
+      [directives.BindOnceDirective, { id: this.rootContext.contentId }]
+    ])));
   }
 });
 
-const DestylerFollower = vue.defineComponent({
-  name: "DestylerFollower",
-  inheritAttrs: true,
-  props: {
-    show: {
-      type: Boolean,
-      default: false
-    },
-    enabled: {
-      type: Boolean,
-      default: void 0
-    },
-    to: {
-      type: [String, Object],
-      default: "body"
-    },
-    flip: {
-      type: Boolean,
-      default: true
-    },
-    internalShift: {
-      type: Boolean
-    },
-    x: {
-      type: Number
-    },
-    y: {
-      type: Number
-    },
-    width: {
-      type: String
-    },
-    minWidth: {
-      type: String
-    },
-    containerClass: {
-      type: String
-    },
-    teleportDisabled: {
-      type: Boolean
-    },
-    zindexable: {
-      type: Boolean,
-      default: true
-    },
-    zIndex: {
-      type: Number
-    },
-    overlap: {
-      type: Boolean
-    }
-  },
-  setup(props) {
-    const DestylerBinder = vue.inject("DestylerBinder");
-    const mergedEnabled = composition.useMemo(() => {
-      return props.enabled !== void 0 ? props.enabled : props.show;
-    });
-    const follower = vue.ref(null);
-    const offsetContainer = vue.ref(null);
-    const isMounted = composition.useIsMounted();
-    const mergedTo = composition.useMemo(
-      () => {
-        const { to } = props;
-        if (to !== void 0)
-          return to;
-        if (isMounted.value) {
-          return void 0;
-        }
-        return void 0;
-      }
-    );
-    function getElementBounding() {
-      if (DestylerBinder.targetRef === null) {
-        return {
-          x: 0,
-          y: 0,
-          width: 0,
-          height: 0
-        };
-      } else {
-        const rect = DestylerBinder.targetRef.getBoundingClientRect();
-        return {
-          x: rect.x,
-          y: rect.y,
-          width: rect.width,
-          height: rect.height
-        };
-      }
-    }
+const DestylerPopoverContentModal = vue.defineComponent({
+  name: "DestylerPopoverContentModal",
+  props: destylerPopoverContentImplProps,
+  emits: destylerPopoverContentImplEmits,
+  setup(props, { emit }) {
+    const rootContext = injectPopoverRootContext();
+    const isRightClickOutsideRef = vue.ref(false);
+    const forwarded = composition.useForwardPropsEmits(props, emit);
+    const { customElement, currentElement } = composition.useCustomElement();
+    composition.useHideOthers(currentElement);
     return {
-      mergedEnabled,
-      follower,
-      offsetContainer,
-      mergedTo,
-      getElementBounding
+      rootContext,
+      forwarded,
+      isRightClickOutsideRef,
+      customElement
     };
   },
   render() {
-    return vue.h(DestylerLazyTeleport, {
-      to: this.mergedTo,
-      disabled: this.$props.teleportDisabled,
-      show: this.$props.show
-    }, {
-      default: () => {
-        const vNode = vue.h("div", {
-          ref: "offsetContainer",
-          destyler: "offset-container"
-        }, [
-          vue.h("div", {
-            ref: "follower",
-            destyler: "follower",
-            style: `
-            --destyler-follower-x:${this.getElementBounding().x}px;
-            --destyler-follower-y:${this.getElementBounding().y}px;
-            --destyler-follower-width:${this.getElementBounding().width}px;
-            --destyler-follower-height:${this.getElementBounding().height}px;
-            `
-          }, this.$slots.default?.())
-        ]);
-        if (this.$props.zindexable) {
-          return vue.withDirectives(vNode, [
-            [
-              directives.zindexable,
-              {
-                enabled: this.mergedEnabled,
-                zIndex: this.$props.zIndex
-              }
-            ]
-          ]);
-        }
-        return vNode;
+    return vue.h(DestylerPopoverContentImpl, {
+      "ref": "customElement",
+      ...vue.mergeProps(this.forwarded),
+      "trapFocus": this.rootContext.open.value,
+      "disable-outside-pointer-events": "",
+      "onCloseAutoFocusPrevent": (event) => {
+        this.$emit("closeAutoFocus", event);
+        if (!this.isRightClickOutsideRef)
+          this.rootContext.triggerElement.value?.focus();
+      },
+      "onPointerDownOutside": (event) => {
+        this.$emit("pointerDownOutside", event);
+        const originalEvent = event.detail.originalEvent;
+        const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+        const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+        this.isRightClickOutsideRef = isRightClick;
       }
-    });
+    }, this.$slots.default?.());
   }
 });
 
-function isHTMLElement(node) {
-  return node instanceof HTMLElement;
-}
-function focusFirstDescendant(node) {
-  for (let i = 0; i < node.childNodes.length; i++) {
-    const child = node.childNodes[i];
-    if (isHTMLElement(child)) {
-      if (attemptFocus(child) || focusFirstDescendant(child))
-        return true;
-    }
-  }
-  return false;
-}
-function focusLastDescendant(element) {
-  for (let i = element.childNodes.length - 1; i >= 0; i--) {
-    const child = element.childNodes[i];
-    if (isHTMLElement(child)) {
-      if (attemptFocus(child) || focusLastDescendant(child))
-        return true;
-    }
-  }
-  return false;
-}
-function attemptFocus(element) {
-  if (!isFocusable(element))
-    return false;
-  try {
-    element.focus({ preventScroll: true });
-  } catch (e) {
-  }
-  return document.activeElement === element;
-}
-function isFocusable(element) {
-  if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute("tabIndex") !== null)
-    return true;
-  if (element.getAttribute("disabled"))
-    return false;
-  switch (element.nodeName) {
-    case "A":
-      return !!element.href && element.rel !== "ignore";
-    case "INPUT":
-      return element.type !== "hidden" && element.type !== "file";
-    case "BUTTON":
-    case "SELECT":
-    case "TEXTAREA":
-      return true;
-    default:
-      return false;
-  }
-}
-
-let stack = [];
-const DestylerFocusTrap = vue.defineComponent({
-  name: "DestylerFocusTrap",
-  props: {
-    disabled: {
-      type: Boolean
-    },
-    active: {
-      type: Boolean
-    },
-    autoFocus: {
-      type: Boolean,
-      default: true
-    },
-    onEsc: {
-      type: Function
-    },
-    initialFocusTo: {
-      type: String
-    },
-    finalFocusTo: {
-      type: String
-    },
-    returnFocusOnDeactivated: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup(props) {
-    const id = shared.createId();
-    const focusableStartRef = vue.ref(null);
-    const focusableEndRef = vue.ref(null);
-    let activated = false;
-    let ignoreInternalFocusChange = false;
-    const lastFocusedElement = typeof document === "undefined" ? null : document.activeElement;
-    function isCurrentActive() {
-      const currentActiveId = stack[stack.length - 1];
-      return currentActiveId === id;
-    }
-    function handleDocumentKeydown(e) {
-      if (e.code === "Escape") {
-        if (isCurrentActive())
-          props.onEsc?.(e);
-      }
-    }
-    vue.onMounted(() => {
-      vue.watch(
-        () => props.active,
-        (value) => {
-          if (value) {
-            activate();
-            shared.on("keydown", document, handleDocumentKeydown);
-          } else {
-            shared.off("keydown", document, handleDocumentKeydown);
-            if (activated)
-              deactivate();
-          }
-        },
-        {
-          immediate: true
-        }
-      );
-    });
-    vue.onBeforeUnmount(() => {
-      shared.off("keydown", document, handleDocumentKeydown);
-      if (activated)
-        deactivate();
-    });
-    function handleDocumentFocus(e) {
-      if (ignoreInternalFocusChange)
-        return;
-      if (isCurrentActive()) {
-        const mainEl = getMainEl();
-        if (mainEl === null)
-          return;
-        if (mainEl.contains(shared.getPreciseEventTarget(e)))
-          return;
-        resetFocusTo("first");
-      }
-    }
-    function getMainEl() {
-      const focusableStartEl = focusableStartRef.value;
-      if (focusableStartEl === null)
-        return null;
-      let mainEl = focusableStartEl;
-      while (true) {
-        mainEl = mainEl.nextSibling;
-        if (mainEl === null)
-          break;
-        if (mainEl instanceof Element && mainEl.tagName === "DIV")
-          break;
-      }
-      return mainEl;
-    }
-    function activate() {
-      if (props.disabled)
-        return;
-      stack.push(id);
-      if (props.autoFocus) {
-        const { initialFocusTo } = props;
-        if (initialFocusTo === void 0)
-          resetFocusTo("first");
-        else
-          shared.resolveTo(initialFocusTo)?.focus({ preventScroll: true });
-      }
-      activated = true;
-      document.addEventListener("focus", handleDocumentFocus, true);
-    }
-    function deactivate() {
-      if (props.disabled)
-        return;
-      document.removeEventListener("focus", handleDocumentFocus, true);
-      stack = stack.filter((idInStack) => idInStack !== id);
-      if (isCurrentActive())
-        return;
-      const { finalFocusTo } = props;
-      if (finalFocusTo !== void 0) {
-        shared.resolveTo(finalFocusTo)?.focus({ preventScroll: true });
-      } else if (props.returnFocusOnDeactivated) {
-        if (lastFocusedElement instanceof HTMLElement) {
-          ignoreInternalFocusChange = true;
-          lastFocusedElement.focus({ preventScroll: true });
-          ignoreInternalFocusChange = false;
-        }
-      }
-    }
-    function resetFocusTo(target) {
-      if (!isCurrentActive())
-        return;
-      if (props.active) {
-        const focusableStartEl = focusableStartRef.value;
-        const focusableEndEl = focusableEndRef.value;
-        if (focusableStartEl !== null && focusableEndEl !== null) {
-          const mainEl = getMainEl();
-          if (mainEl == null || mainEl === focusableEndEl) {
-            ignoreInternalFocusChange = true;
-            focusableStartEl.focus({ preventScroll: true });
-            ignoreInternalFocusChange = false;
-            return;
-          }
-          ignoreInternalFocusChange = true;
-          const focused = target === "first" ? focusFirstDescendant(mainEl) : focusLastDescendant(mainEl);
-          ignoreInternalFocusChange = false;
-          if (!focused) {
-            ignoreInternalFocusChange = true;
-            focusableStartEl.focus({ preventScroll: true });
-            ignoreInternalFocusChange = false;
-          }
-        }
-      }
-    }
-    function handleStartFocus(e) {
-      if (ignoreInternalFocusChange)
-        return;
-      const mainEl = getMainEl();
-      if (mainEl === null)
-        return;
-      if (e.relatedTarget !== null && mainEl.contains(e.relatedTarget)) {
-        resetFocusTo("last");
-      } else {
-        resetFocusTo("first");
-      }
-    }
-    function handleEndFocus(e) {
-      if (ignoreInternalFocusChange)
-        return;
-      if (e.relatedTarget !== null && e.relatedTarget === focusableStartRef.value) {
-        resetFocusTo("last");
-      } else {
-        resetFocusTo("first");
-      }
-    }
+const DestylerPopoverContentNonModal = vue.defineComponent({
+  name: "DestylerPopoverContentNonModal",
+  props: destylerPopoverContentImplProps,
+  emits: destylerPopoverContentImplEmits,
+  setup(props, { emit }) {
+    const rootContext = injectPopoverRootContext();
+    const hasInteractedOutsideRef = vue.ref(false);
+    const hasPointerDownOutsideRef = vue.ref(false);
+    const forwarded = composition.useForwardPropsEmits(props, emit);
     return {
-      focusableStartRef,
-      focusableEndRef,
-      focusableStyle: "position: absolute; height: 0; width: 0;",
-      handleStartFocus,
-      handleEndFocus
+      forwarded,
+      rootContext,
+      hasInteractedOutsideRef,
+      hasPointerDownOutsideRef
     };
   },
   render() {
-    const { default: defaultSlot } = this.$slots;
-    if (defaultSlot === void 0)
-      return null;
-    if (this.disabled)
-      return defaultSlot();
-    const { active, focusableStyle } = this;
-    return vue.h(vue.Fragment, null, [
-      vue.h("div", {
-        "destyler": "focusable-start",
-        "aria-hidden": "true",
-        "tabindex": active ? "0" : "-1",
-        "ref": "focusableStartRef",
-        "style": focusableStyle,
-        "onFocus": this.handleStartFocus
-      }),
-      vue.h("div", {
-        destyler: "focusable-content"
-      }, defaultSlot()),
-      vue.h("div", {
-        "destyler": "focusable-end",
-        "aria-hidden": "true",
-        "style": focusableStyle,
-        "ref": "focusableEndRef",
-        "tabindex": active ? "0" : "-1",
-        "onFocus": this.handleEndFocus
-      })
-    ]);
+    return vue.h(DestylerPopoverContentImpl, {
+      ...vue.mergeProps(this.forwarded),
+      trapFocus: false,
+      disableOutsidePointerEvents: false,
+      onCloseAutoFocus: (event) => {
+        this.$emit("closeAutoFocus", event);
+        if (!event.defaultPrevented) {
+          if (!this.hasInteractedOutsideRef)
+            this.rootContext.triggerElement.value?.focus();
+          event.preventDefault();
+        }
+        this.hasInteractedOutsideRef = false;
+        this.hasPointerDownOutsideRef = false;
+      },
+      onInteractOutside: async (event) => {
+        this.$emit("interactOutside", event);
+        if (!event.defaultPrevented) {
+          this.hasInteractedOutsideRef = true;
+          if (event.detail.originalEvent.type === "pointerdown")
+            this.hasPointerDownOutsideRef = true;
+        }
+        const target = event.target;
+        const targetIsTrigger = this.rootContext.triggerElement.value?.contains(target);
+        if (targetIsTrigger)
+          event.preventDefault();
+        if (event.detail.originalEvent.type === "focusin" && this.hasPointerDownOutsideRef)
+          event.preventDefault();
+      }
+    }, this.$slots.default?.());
   }
 });
 
-const popoverBodyProps = {
-  name: {
-    type: String,
+const destylerPopoverContentProps = {
+  ...destylerPopoverContentImplProps,
+  forceMount: {
+    type: Boolean,
     required: false,
-    default: "popover"
-  },
-  show: {
-    type: Boolean
-  },
-  trigger: {
-    type: String
-  },
-  delay: {
-    type: Number
-  },
-  duration: {
-    type: Number
-  },
-  displayDirective: {
-    type: String
-  },
-  x: {
-    type: Number
-  },
-  y: {
-    type: Number
-  },
-  flip: {
-    type: Boolean
-  },
-  internalTrapFocus: {
-    type: Boolean
-  },
-  overlap: {
-    type: Boolean
-  },
-  keepAliveOnHover: {
-    type: Boolean
-  },
-  scrollable: {
-    type: Boolean
-  },
-  internalDeactivateImmediately: {
-    type: Boolean
-  },
-  onClickoutside: {
-    type: Function
+    default: false
   }
 };
-const DestylerPopoverBody = vue.defineComponent({
-  name: "DestylerPopoverBody",
-  props: popoverBodyProps,
-  setup(props, { slots, attrs }) {
-    const follower = vue.ref(null);
-    const DestylerPopover = vue.inject("DestylerPopover");
-    const body = vue.ref(null);
-    const followerEnabled = vue.ref(props.show);
-    const displayed = vue.ref(false);
-    vue.watchEffect(() => {
-      const { show } = props;
-      if (show && !shared.isJsdom() && !props.internalDeactivateImmediately)
-        displayed.value = true;
-      else
-        displayed.value = false;
-    });
-    vue.onBeforeUnmount(() => {
-      DestylerPopover.setBodyInstance(null);
-    });
-    vue.watch(vue.toRef(props, "show"), (value) => {
-      if (value)
-        followerEnabled.value = true;
-      else
-        followerEnabled.value = false;
-    });
-    function syncPosition() {
-      follower.value?.syncPosition();
-    }
-    DestylerPopover.setBodyInstance({
-      syncPosition
-    });
-    function handleMouseEnter(e) {
-      if (props.trigger === "hover" && props.keepAliveOnHover && props.show)
-        DestylerPopover.handleMouseEnter(e);
-    }
-    function handleMouseLeave(e) {
-      if (props.trigger === "hover" && props.keepAliveOnHover)
-        DestylerPopover.handleMouseLeave(e);
-    }
-    function handleMouseMoveOutside(e) {
-      if (props.trigger === "hover" && !getTriggerElement().contains(shared.getPreciseEventTarget(e)))
-        DestylerPopover.handleMouseMoveOutside(e);
-    }
-    function getTriggerElement() {
-      return DestylerPopover.getTriggerElement();
-    }
-    function handleClickOutside(e) {
-      if (props.trigger === "click" && !getTriggerElement().contains(
-        shared.getPreciseEventTarget(e)
-      ) || props.onClickoutside)
-        DestylerPopover.handleClickOutside(e);
-    }
-    const directives$1 = vue.computed(() => {
-      const { trigger, onClickoutside } = props;
-      const directives2 = [];
-      const {
-        positionManually: { value: positionManually }
-      } = DestylerPopover;
-      if (!positionManually) {
-        if (trigger === "click" && !onClickoutside) {
-          directives2.push([
-            directives.clickoutside,
-            handleClickOutside,
-            void 0,
-            { capture: true }
-          ]);
-        }
-        if (trigger === "hover")
-          directives2.push([directives.mousemoveoutside, handleMouseMoveOutside]);
-      }
-      if (onClickoutside) {
-        directives2.push([
-          directives.clickoutside,
-          handleClickOutside,
-          void 0,
-          { capture: true }
-        ]);
-      }
-      if (props.displayDirective === "show" || displayed.value)
-        directives2.push([vue.vShow, props.show]);
-      return directives2;
-    });
-    function renderContentNode() {
-      const shouldRenderDom = props.displayDirective === "show" || props.show || displayed.value;
-      if (!shouldRenderDom)
-        return null;
-      let contentNode;
-      const renderBody = DestylerPopover.internalRenderBody.value;
-      if (!renderBody) {
-        const { internalTrapFocus } = props;
-        const hasHeaderOrFooter = !shared.isSlotEmpty(slots.header) || !shared.isSlotEmpty(slots.footer);
-        const renderContentInnerNode = () => {
-          const body2 = hasHeaderOrFooter ? [
-            shared.resolveWrappedSlot(slots.header, (children) => {
-              return children ? vue.h("div", null, children) : null;
-            }),
-            shared.resolveWrappedSlot(slots.default, (children) => {
-              return children ? vue.h("div", null, children) : null;
-            }),
-            shared.resolveWrappedSlot(slots.footer, (children) => {
-              return children ? vue.h("div", null, children) : null;
-            })
-          ] : vue.h("div", {
-            destyler: `${props.name}-body-content`
-          }, slots);
-          return [body2];
-        };
-        contentNode = vue.h("div", vue.mergeProps({
-          ref: body,
-          destyler: `${props.name}-body-toggle`,
-          onMouseenter: handleMouseEnter,
-          onMouseleave: handleMouseLeave
-        }, attrs), internalTrapFocus ? vue.h(DestylerFocusTrap, {
-          active: props.show,
-          autoFocus: true
-        }, renderContentInnerNode) : renderContentInnerNode());
-      } else {
-        contentNode = renderBody(body, handleMouseEnter, handleMouseLeave);
-      }
-      return vue.withDirectives(contentNode, directives$1.value);
-    }
+const destylerPopoverContentEmits = [...destylerPopoverContentImplEmits];
+const DestylerPopoverContent = vue.defineComponent({
+  name: "DestylerPopoverContent",
+  props: destylerPopoverContentProps,
+  emits: destylerPopoverContentEmits,
+  setup(props, { emit }) {
+    const rootContext = injectPopoverRootContext();
+    const forwarded = composition.useForwardPropsEmits(props, emit);
     return {
-      displayed,
-      isMounted: DestylerPopover.isMounted,
-      zIndex: DestylerPopover.zIndex,
-      follower,
-      followerEnabled,
-      renderContentNode
+      rootContext,
+      forwarded
     };
   },
   render() {
-    return vue.h(DestylerFollower, {
-      ref: "follower",
-      zIndex: this.zIndex,
-      show: this.$props.show,
-      enabled: this.followerEnabled,
-      to: "body",
-      x: this.$props.x,
-      y: this.$props.y,
-      flip: this.$props.flip,
-      overlap: this.$props.overlap
-    }, () => this.renderContentNode());
+    const useVShow = this.rootContext.modal.value;
+    return vue.h(presence.DestylerPresence, {
+      present: this.forceMount || this.rootContext.open.value
+    }, useVShow ? vue.h(DestylerPopoverContentModal, {
+      ...this.forwarded,
+      ...vue.mergeProps(this.$attrs)
+    }, this.$slots.default?.()) : vue.h(DestylerPopoverContentNonModal, {
+      ...this.forwarded,
+      ...vue.mergeProps(this.$attrs)
+    }, this.$slots.default?.()));
   }
 });
 
-const bodyPropKeys = Object.keys(popoverBodyProps);
-const triggerEventMap = {
-  focus: ["onFocus", "onBlur"],
-  click: ["onClick"],
-  hover: ["onMouseenter", "onMouseleave"],
-  manual: [],
-  nested: ["onFocus", "onBlur", "onMouseenter", "onMouseleave", "onClick"]
+const destylerPopoverPortalProps = {
+  ...teleport.destylerTeleportProps
 };
-function appendEvents(vNode, trigger, events) {
-  triggerEventMap[trigger].forEach((eventName) => {
-    if (!vNode.props)
-      vNode.props = {};
-    else
-      vNode.props = Object.assign({}, vNode.props);
-    const originalHandler = vNode.props[eventName];
-    const handler = events[eventName];
-    if (!originalHandler) {
-      vNode.props[eventName] = handler;
-    } else {
-      vNode.props[eventName] = (...args) => {
-        originalHandler(...args);
-        handler(...args);
-      };
-    }
-  });
-}
-const destylerPopoverProps = {
-  "name": {
-    type: String,
+const DestylerPopoverPortal = vue.defineComponent({
+  name: "DestylerPopoverPortal",
+  props: destylerPopoverPortalProps,
+  render() {
+    return vue.h(teleport.DestylerTeleport, vue.mergeProps(this.$props), this.$slots.default?.());
+  }
+});
+
+const destylerPopoverTriggerProps = {
+  ...primitive.destylerPrimitiveProp,
+  as: {
+    type: [String, Object],
     required: false,
-    default: "popover"
-  },
-  "show": {
-    type: Boolean,
-    default: void 0
-  },
-  "defaultShow": {
-    type: Boolean
-  },
-  "trigger": {
-    type: String,
-    default: "hover"
-  },
-  "delay": {
-    type: Number,
-    default: 100
-  },
-  "duration": {
-    type: Number,
-    default: 100
-  },
-  "x": {
-    type: Number
-  },
-  "y": {
-    type: Number
-  },
-  "disabled": {
-    type: Boolean
-  },
-  "getDisabled": {
-    type: Function
-  },
-  "displayDirective": {
-    type: String,
-    default: "if"
-  },
-  "zIndex": {
-    type: Number
-  },
-  "internalSyncTargetWithParent": {
-    type: Boolean
-  },
-  "internalInheritedEventHandlers": {
-    type: Array,
-    default: () => []
-  },
-  "internalTrapFocus": {
-    type: Boolean
-  },
-  "onClickoutside": {
-    type: Function
-  },
-  "onUpdate:show": {
-    type: [Function, Array]
-  },
-  "onUpdateShow": {
-    type: [Function, Array]
-  },
-  "onShow": {
-    type: [Function, Array]
-  },
-  "onHide": {
-    type: [Function, Array]
-  },
-  "internalRenderBody": {
-    type: Function
+    default: "button"
   }
 };
-const DestylerPopover = vue.defineComponent({
-  name: "DestylerPopover",
-  inheritAttrs: false,
-  props: destylerPopoverProps,
-  __popover__: true,
-  setup(props) {
-    const isMounted = composition.useIsMounted();
-    const binderInst = vue.ref(null);
-    const controlledShow = vue.computed(() => props.show);
-    const uncontrolledShow = vue.ref(props.defaultShow);
-    const mergedShowWithoutDisabled = composition.useMergedState(
-      controlledShow,
-      uncontrolledShow
-    );
-    const mergedShowConsideringDisabledProp = composition.useMemo(() => {
-      if (props.disabled)
-        return false;
-      return mergedShowWithoutDisabled.value;
-    });
-    const getMergedDisabled = () => {
-      if (props.disabled)
-        return true;
-      const { getDisabled } = props;
-      if (getDisabled?.())
-        return true;
-      return false;
-    };
-    const getMergedShow = () => {
-      if (getMergedDisabled())
-        return false;
-      return mergedShowWithoutDisabled.value;
-    };
-    const showTimerId = vue.ref(null);
-    const hideTimerId = vue.ref(null);
-    const positionManually = composition.useMemo(() => {
-      return props.x !== void 0 && props.y !== void 0;
-    });
-    function doUpdateShow(value) {
-      const {
-        "onUpdate:show": _onUpdateShow,
-        onUpdateShow,
-        onShow,
-        onHide
-      } = props;
-      uncontrolledShow.value = value;
-      if (_onUpdateShow)
-        shared.call(_onUpdateShow, value);
-      if (onUpdateShow)
-        shared.call(onUpdateShow, value);
-      if (value && onShow)
-        shared.call(onShow, true);
-      if (value && onHide)
-        shared.call(onHide, false);
-    }
-    function clearShowTimer() {
-      if (showTimerId.value) {
-        window.clearTimeout(showTimerId.value);
-        showTimerId.value = null;
-      }
-    }
-    function clearHideTimer() {
-      if (hideTimerId.value) {
-        window.clearTimeout(hideTimerId.value);
-        hideTimerId.value = null;
-      }
-    }
-    function handleFocus() {
-      const mergedDisabled = getMergedDisabled();
-      if (props.trigger === "focus" && !mergedDisabled) {
-        if (getMergedShow())
-          return;
-        doUpdateShow(true);
-      }
-    }
-    function handleBlur() {
-      const mergedDisabled = getMergedDisabled();
-      if (props.trigger === "focus" && !mergedDisabled) {
-        if (!getMergedShow())
-          return;
-        doUpdateShow(false);
-      }
-    }
-    function handleMouseEnter() {
-      const mergedDisabled = getMergedDisabled();
-      if (props.trigger === "hover" && !mergedDisabled) {
-        clearHideTimer();
-        if (showTimerId.value !== null)
-          return;
-        if (getMergedShow())
-          return;
-        const delayCallback = () => {
-          doUpdateShow(true);
-          showTimerId.value = null;
-        };
-        const { delay } = props;
-        if (delay === 0)
-          delayCallback();
-        else
-          showTimerId.value = window.setTimeout(delayCallback, delay);
-      }
-    }
-    function handleMouseLeave() {
-      const mergedDisabled = getMergedDisabled();
-      if (props.trigger === "hover" && !mergedDisabled) {
-        clearShowTimer();
-        if (hideTimerId.value !== null)
-          return;
-        if (!getMergedShow())
-          return;
-        const delayedCallback = () => {
-          doUpdateShow(false);
-          hideTimerId.value = null;
-        };
-        const { duration } = props;
-        if (duration === 0)
-          delayedCallback();
-        else
-          hideTimerId.value = window.setTimeout(delayedCallback, duration);
-      }
-    }
-    function handleMouseMoveOutside() {
-      handleMouseLeave();
-    }
-    function handleClickOutside(e) {
-      if (!getMergedShow())
-        return;
-      if (props.trigger === "click") {
-        clearShowTimer();
-        clearHideTimer();
-        doUpdateShow(false);
-      }
-      props.onClickoutside?.(e);
-    }
-    function handleClick() {
-      if (props.trigger === "click" && !getMergedDisabled()) {
-        clearShowTimer();
-        clearHideTimer();
-        const nextShow = !getMergedShow();
-        doUpdateShow(nextShow);
-      }
-    }
-    function getTriggerElement() {
-      return binderInst.value?.targetRef;
-    }
-    function setBodyInstance(value) {
-    }
-    vue.provide("DestylerPopover", {
-      getTriggerElement,
-      handleMouseEnter,
-      handleMouseLeave,
-      handleClickOutside,
-      handleMouseMoveOutside,
-      setBodyInstance,
-      positionManually,
-      isMounted,
-      zIndex: vue.toRef(props, "zIndex"),
-      internalRenderBody: vue.toRef(props, "internalRenderBody")
-    });
-    vue.watchEffect(() => {
-      if (mergedShowWithoutDisabled.value && getMergedDisabled())
-        doUpdateShow(false);
+const DestylerPopoverTrigger = vue.defineComponent({
+  name: "DestylerPopoverTrigger",
+  props: destylerPopoverTriggerProps,
+  setup() {
+    const rootContext = injectPopoverRootContext();
+    const { customElement, currentElement: triggerElement } = composition.useCustomElement();
+    vue.onMounted(() => {
+      rootContext.triggerElement.value = triggerElement.value;
     });
-    function setShow(value) {
-      uncontrolledShow.value = value;
-    }
     return {
-      binderInst,
-      positionManually,
-      mergedShowConsideringDisabledProp,
-      // if to show popover body
-      uncontrolledShow,
-      setShow,
-      getMergedShow,
-      handleClick,
-      handleMouseEnter,
-      handleMouseLeave,
-      handleFocus,
-      handleBlur
+      rootContext,
+      customElement
     };
   },
   render() {
-    let triggerVNode;
-    let popoverInside = false;
-    if (!this.positionManually) {
-      if (this.$slots.activator)
-        triggerVNode = shared.getFirstSlotVNode(this.$slots, "activator");
-      else
-        triggerVNode = shared.getFirstSlotVNode(this.$slots, "trigger");
-      if (triggerVNode) {
-        triggerVNode = vue.cloneVNode(triggerVNode);
-        triggerVNode = triggerVNode.type === Text ? vue.h("span", [triggerVNode]) : triggerVNode;
-        const handlers = {
-          onClick: this.handleClick,
-          onMouseenter: this.handleMouseEnter,
-          onMouseleave: this.handleMouseLeave,
-          onFocus: this.handleFocus,
-          onBlur: this.handleBlur
-        };
-        if (triggerVNode.type?.__popover__) {
-          popoverInside = true;
-          if (!triggerVNode.props) {
-            triggerVNode.props = {
-              internalSyncTargetWithParent: true,
-              internalInheritedEventHandlers: []
-            };
-          }
-          triggerVNode.props.internalSyncTargetWithParent = true;
-          if (!triggerVNode.props.internalInheritedEventHandlers) {
-            triggerVNode.props.internalInheritedEventHandlers = [handlers];
-          } else {
-            triggerVNode.props.internalInheritedEventHandlers = [
-              handlers,
-              ...triggerVNode.props.internalInheritedEventHandlers
-            ];
-          }
-        } else {
-          const { internalInheritedEventHandlers } = this.$props;
-          const ascendantAndCurrentHandlers = [
-            handlers,
-            ...internalInheritedEventHandlers
-          ];
-          const mergedHandlers = {
-            onBlur: (e) => {
-              ascendantAndCurrentHandlers.forEach((_handlers) => {
-                _handlers.onBlur(e);
-              });
-            },
-            onFocus: (e) => {
-              ascendantAndCurrentHandlers.forEach((_handlers) => {
-                _handlers.onFocus(e);
-              });
-            },
-            onClick: (e) => {
-              ascendantAndCurrentHandlers.forEach((_handlers) => {
-                _handlers.onClick(e);
-              });
-            },
-            onMouseenter: (e) => {
-              ascendantAndCurrentHandlers.forEach((_handlers) => {
-                _handlers.onMouseenter(e);
-              });
-            },
-            onMouseleave: (e) => {
-              ascendantAndCurrentHandlers.forEach((_handlers) => {
-                _handlers.onMouseleave(e);
-              });
-            }
-          };
-          appendEvents(
-            triggerVNode,
-            internalInheritedEventHandlers ? "nested" : this.positionManually ? "manual" : this.$props.trigger,
-            mergedHandlers
-          );
-        }
+    return vue.h(this.rootContext.hasCustomAnchor.value ? primitive.DestylerPrimitive : popper.DestylerPopperAnchor, {
+      asChild: true
+    }, vue.h(primitive.DestylerPrimitive, {
+      "ref": "customElement",
+      "type": this.$props.as === "button" ? "button" : void 0,
+      "as": this.$props.as,
+      "aria-haspopup": "dialog",
+      "asChild": this.$props.asChild,
+      "aria-expanded": this.rootContext.open.value,
+      "aria-controls": this.rootContext.contentId,
+      "data-state": this.rootContext.open.value ? "open" : "closed",
+      "onClick": () => {
+        this.rootContext.onOpenToggle();
       }
-    }
-    return vue.h(DestylerBinder, {
-      ref: "binderInst",
-      syncTarget: !popoverInside,
-      syncTargetWithParent: this.$props.internalSyncTargetWithParent
-    }, () => {
-      return [
-        this.$props.internalTrapFocus && this.getMergedShow() ? vue.withDirectives(vue.h("div"), [[directives.zindexable, { enabled: this.getMergedShow(), zIndex: this.$props.zIndex }]]) : null,
-        this.positionManually ? null : vue.h(DestylerTarget, null, {
-          default: () => triggerVNode
-        }),
-        vue.h(DestylerPopoverBody, shared.keep(this.$props, bodyPropKeys, {
-          ...this.$attrs,
-          name: this.$props.name,
-          show: this.getMergedShow()
-        }), {
-          default: () => this.$slots.default?.(),
-          header: () => this.$slots.header?.(),
-          footer: () => this.$slots.footer?.()
-        })
-      ];
-    });
+    }, this.$slots.default?.()));
   }
 });
 
@@ -1166,8 +385,26 @@ function DestylerPopoverResolver() {
   };
 }
 
-exports.DestylerPopover = DestylerPopover;
-exports.DestylerPopoverBody = DestylerPopoverBody;
+exports.DestylerPopoverAnchor = DestylerPopoverAnchor;
+exports.DestylerPopoverArrow = DestylerPopoverArrow;
+exports.DestylerPopoverClose = DestylerPopoverClose;
+exports.DestylerPopoverContent = DestylerPopoverContent;
+exports.DestylerPopoverContentImpl = DestylerPopoverContentImpl;
+exports.DestylerPopoverContentModal = DestylerPopoverContentModal;
+exports.DestylerPopoverContentNonModal = DestylerPopoverContentNonModal;
+exports.DestylerPopoverPortal = DestylerPopoverPortal;
 exports.DestylerPopoverResolver = DestylerPopoverResolver;
-exports.destylerPopoverProps = destylerPopoverProps;
-exports.popoverBodyProps = popoverBodyProps;
+exports.DestylerPopoverRoot = DestylerPopoverRoot;
+exports.DestylerPopoverTrigger = DestylerPopoverTrigger;
+exports.destylerPopoverAnchorProps = destylerPopoverAnchorProps;
+exports.destylerPopoverArrowProps = destylerPopoverArrowProps;
+exports.destylerPopoverCloseProps = destylerPopoverCloseProps;
+exports.destylerPopoverContentEmits = destylerPopoverContentEmits;
+exports.destylerPopoverContentImplEmits = destylerPopoverContentImplEmits;
+exports.destylerPopoverContentImplProps = destylerPopoverContentImplProps;
+exports.destylerPopoverContentProps = destylerPopoverContentProps;
+exports.destylerPopoverPortalProps = destylerPopoverPortalProps;
+exports.destylerPopoverRootProps = destylerPopoverRootProps;
+exports.destylerPopoverTriggerProps = destylerPopoverTriggerProps;
+exports.injectPopoverRootContext = injectPopoverRootContext;
+exports.providePopoverRootContext = providePopoverRootContext;