pxd 0.0.64 → 0.1.2

package/dist/components/popover/index.vue

@@ -1,279 +1,577 @@
 <script setup>
 import { arrow, autoUpdate, computePosition, flip, shift, hide } from "@floating-ui/dom";
-import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
-import { useDelayDestroy } from "../../composables/use-delay-destroy";
-import { useFocusTrap } from "../../composables/use-focus-trap";
-import { useOutsideClick } from "../../composables/use-outside-click";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { getCssUnitValue, toArray } from "../../utils/format";
+import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { useFocusTrap } from "../../composables/_internal/use-focus-trap.js";
+import { useDelayDestroy } from "../../composables/use-delay-destroy.js";
+import { useOutsideClick } from "../../composables/use-outside-click.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { throttleByRaf } from "../../utils/event.js";
+import { getCssUnitValue, toArray } from "../../utils/format.js";
 import PPopoverArrow from "../_internal/popover-arrow.vue";
 import POverlay from "../overlay/index.vue";
 defineOptions({
-  name: "PPopover",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PPopover",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  zIndex: { type: [Number, String], required: false },
-  offset: { type: Number, required: false },
-  trigger: { type: [String, Array], required: false, default: () => ["hover"] },
-  disabled: { type: Boolean, required: false },
-  adaptive: { type: Boolean, required: false },
-  maxWidth: { type: [Number, String], required: false },
-  position: { type: null, required: false, default: "bottom" },
-  showDelay: { type: Number, required: false, default: 0 },
-  hideDelay: { type: Number, required: false, default: 0 },
-  showArrow: { type: Boolean, required: false },
-  arrowColor: { type: String, required: false },
-  modelValue: { type: Boolean, required: false },
-  interactive: { type: Boolean, required: false, default: true },
-  autoPosition: { type: Boolean, required: false, default: true },
-  wrapperClass: { type: [String, Array, Object], required: false },
-  contentClass: { type: [String, Array, Object], required: false },
-  contentStyle: { type: [Object, String], required: false },
-  toggleOnTrigger: { type: Boolean, required: false, default: true },
-  closeOnInvisible: { type: Boolean, required: false, default: true },
-  closeOnPressEscape: { type: Boolean, required: false, default: true },
-  lockScrollOnVisible: { type: Boolean, required: false }
+	zIndex: {
+		type: [Number, String],
+		required: false
+	},
+	offset: {
+		type: Number,
+		required: false
+	},
+	trigger: {
+		type: [String, Array],
+		required: false,
+		default: () => ["hover"]
+	},
+	triggerSelector: {
+		type: String,
+		required: false
+	},
+	alignPoint: {
+		type: Boolean,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	adaptive: {
+		type: Boolean,
+		required: false
+	},
+	maxWidth: {
+		type: [Number, String],
+		required: false
+	},
+	position: {
+		type: null,
+		required: false,
+		default: "bottom"
+	},
+	showDelay: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	hideDelay: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	showArrow: {
+		type: Boolean,
+		required: false
+	},
+	arrowColor: {
+		type: String,
+		required: false
+	},
+	modelValue: {
+		type: Boolean,
+		required: false
+	},
+	interactive: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	autoPosition: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	destroyDelay: {
+		type: Number,
+		required: false,
+		default: 3e3
+	},
+	wrapperClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	contentClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	contentStyle: {
+		type: [Object, String],
+		required: false
+	},
+	toggleOnTrigger: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	autoFocusElement: {
+		type: [String, Boolean],
+		required: false,
+		default: false
+	},
+	fillTriggerWidth: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeOnInvisible: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	lockScrollOnVisible: {
+		type: Boolean,
+		required: false
+	},
+	returnFocusOnDeactivate: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
 });
-const emits = defineEmits(["show", "hide", "escape", "outside-click", "trigger-click", "visible-change", "update:modelValue"]);
+const emits = defineEmits([
+	"show",
+	"hide",
+	"escape",
+	"outside-click",
+	"trigger-click",
+	"visible-change",
+	"wrapper-keydown",
+	"update:modelValue"
+]);
 let showPopoverTimer;
 let hidePopoverTimer;
+let triggerElementsCache = null;
 let cleanupAutoUpdate = null;
 const arrowRef = shallowRef(null);
 const triggerRef = shallowRef(null);
 const wrapperRef = shallowRef(null);
+const activeTriggerRef = shallowRef(null);
+const activeTriggerIndex = shallowRef(-1);
+const hasMultipleTriggers = shallowRef(false);
+const pointerPosition = shallowRef(null);
 const localPosition = shallowRef(props.position);
+const pointReference = { getBoundingClientRect() {
+	const { x = 0, y = 0 } = pointerPosition.value ?? {};
+	return {
+		x,
+		y,
+		top: y,
+		left: x,
+		right: x,
+		bottom: y,
+		width: 0,
+		height: 0,
+		toJSON: () => ({})
+	};
+} };
 const triggerMethods = computed(() => toArray(props.trigger));
 const transitionType = computed(() => props.adaptive ? "fade-slide" : "fade-scale");
+const popoverMaxWidth = computed(() => getCssUnitValue(props.maxWidth));
 const wrapperStyle = computed(() => ({
-  "--popover-index": props.zIndex,
-  "--popover-offset": props.offset,
-  "--popover-arrow-color": props.arrowColor,
-  "--popover-max-width": getCssUnitValue(props.maxWidth)
+	"--popover-index": props.zIndex,
+	"--popover-offset": props.offset,
+	"--popover-arrow-color": props.arrowColor,
+	"--popover-max-width": popoverMaxWidth.value
 }));
 const configProvider = useConfigProvider();
 const allowOutsideClick = computed(() => !triggerMethods.value.includes("manual"));
 const focusTrapContainer = computed(() => isVisible.value ? wrapperRef.value : null);
+const triggerPointerMoveFn = computed(() => props.alignPoint ? onTriggerPointerMove : undefined);
 const computePositionMiddleware = computed(() => {
-  return [
-    shift(),
-    props.autoPosition && flip(),
-    props.showArrow && arrow({ element: arrowRef.value }),
-    props.closeOnInvisible && hide({ strategy: "referenceHidden" }),
-    props.closeOnInvisible && hide({ strategy: "escaped" })
-  ];
+	return [
+		shift(),
+		props.autoPosition && flip(),
+		props.showArrow && arrow({ element: arrowRef.value }),
+		props.closeOnInvisible && hide({ strategy: "escaped" }),
+		props.closeOnInvisible && hide({ strategy: "referenceHidden" })
+	];
 });
-const {
-  render: isRender,
-  visible: isVisible,
-  show: showPopover,
-  hide: hidePopover
-} = useDelayDestroy(props.modelValue, {
-  delay: 2e3,
-  visibleChange(v) {
-    if (!allowOutsideClick.value) {
-      return;
-    }
-    emits("visible-change", v);
-    if (v) {
-      emits("show");
-      emits("update:modelValue", true);
-    } else {
-      emits("hide");
-      emits("update:modelValue", false);
-    }
-  }
+const { render: isRender, visible: isVisible, show: showPopover, hide: hidePopover } = useDelayDestroy(props.modelValue, {
+	delay: () => props.destroyDelay,
+	visibleChange(v) {
+		if (!allowOutsideClick.value) {
+			return;
+		}
+		emits("visible-change", v);
+		if (v) {
+			emits("show");
+			emits("update:modelValue", true);
+		} else {
+			emits("hide");
+			emits("update:modelValue", false);
+		}
+	}
 });
-useFocusTrap(focusTrapContainer);
+useFocusTrap(focusTrapContainer, () => ({
+	autoFocusElement: props.autoFocusElement,
+	returnFocusOnDeactivate: props.returnFocusOnDeactivate
+}));
 useOutsideClick(wrapperRef, {
-  allowList: [triggerRef, wrapperRef],
-  isEnabled: () => {
-    return isVisible.value && allowOutsideClick.value;
-  },
-  onTrigger: (ev) => {
-    emits("outside-click", ev);
-    if (allowOutsideClick.value) {
-      handlePopoverHide();
-    }
-  }
+	allowList: [triggerRef, wrapperRef],
+	enabled: () => {
+		return isVisible.value && allowOutsideClick.value;
+	},
+	onTrigger: (ev) => {
+		emits("outside-click", ev);
+		if (allowOutsideClick.value) {
+			handlePopoverHide();
+		}
+	}
 });
+function clearShowTimer() {
+	if (showPopoverTimer) {
+		clearTimeout(showPopoverTimer);
+		showPopoverTimer = null;
+	}
+}
+function clearHideTimer() {
+	if (hidePopoverTimer) {
+		clearTimeout(hidePopoverTimer);
+		hidePopoverTimer = null;
+	}
+}
+function getTriggerElements() {
+	if (!props.triggerSelector) {
+		return [];
+	}
+	if (!triggerElementsCache) {
+		triggerElementsCache = Array.from(triggerRef.value.querySelectorAll(props.triggerSelector));
+		hasMultipleTriggers.value = triggerElementsCache.length > 0;
+	}
+	return triggerElementsCache;
+}
+function clearTriggerElementsCache() {
+	triggerElementsCache = null;
+	hasMultipleTriggers.value = false;
+}
+function resolveTriggerElement(target) {
+	if (!props.triggerSelector) {
+		return triggerRef.value;
+	}
+	if (!(target instanceof Element)) {
+		return null;
+	}
+	const matched = target.closest(props.triggerSelector);
+	if (!matched || !triggerRef.value.contains(matched)) {
+		return null;
+	}
+	return matched;
+}
+function setActiveTrigger(trigger) {
+	activeTriggerRef.value = trigger;
+	if (!props.triggerSelector) {
+		activeTriggerIndex.value = 0;
+		return;
+	}
+	activeTriggerIndex.value = trigger ? getTriggerElements().indexOf(trigger) : -1;
+}
+function ensureActiveTrigger() {
+	if (!props.triggerSelector) {
+		if (!activeTriggerRef.value) {
+			setActiveTrigger(triggerRef.value);
+		}
+		return;
+	}
+	if (!activeTriggerRef.value || !triggerRef.value.contains(activeTriggerRef.value)) {
+		setActiveTrigger(getTriggerElements()[0] ?? null);
+	}
+}
+function getReferenceElement() {
+	if (props.alignPoint && pointerPosition.value) {
+		return pointReference;
+	}
+	ensureActiveTrigger();
+	return activeTriggerRef.value || triggerRef.value;
+}
+function startAutoUpdate() {
+	if (!props.autoPosition || !wrapperRef.value) {
+		return;
+	}
+	cleanupAutoUpdate = autoUpdate(getReferenceElement(), wrapperRef.value, updatePosition);
+}
+async function syncPosition(waitForDom = false) {
+	disposeAutoUpdate();
+	if (waitForDom) {
+		await nextTick();
+	}
+	await updatePosition();
+	startAutoUpdate();
+}
+async function updateActiveTrigger(trigger) {
+	if (!trigger) {
+		return;
+	}
+	clearHideTimer();
+	if (trigger === activeTriggerRef.value) {
+		return;
+	}
+	setActiveTrigger(trigger);
+	if (isVisible.value) {
+		await syncPosition(true);
+	}
+}
 function disposeAutoUpdate() {
-  if (cleanupAutoUpdate) {
-    cleanupAutoUpdate();
-    cleanupAutoUpdate = null;
-  }
+	if (cleanupAutoUpdate) {
+		cleanupAutoUpdate();
+		cleanupAutoUpdate = null;
+	}
+	throttledUpdatePosition.cancel();
+}
+function updatePopoverMinWidth() {
+	if (!wrapperRef.value || props.alignPoint) {
+		return;
+	}
+	if (!props.fillTriggerWidth) {
+		wrapperRef.value.style.minWidth = "";
+		return;
+	}
+	const trigger = activeTriggerRef.value || triggerRef.value;
+	const triggerWidth = trigger.getBoundingClientRect().width;
+	const maxWidth = popoverMaxWidth.value;
+	wrapperRef.value.style.minWidth = maxWidth ? `min(${triggerWidth}px, ${maxWidth})` : `${triggerWidth}px`;
 }
 async function updatePosition() {
-  const { x, y, placement, middlewareData } = await computePosition(
-    triggerRef.value,
-    wrapperRef.value,
-    {
-      placement: props.position,
-      middleware: computePositionMiddleware.value
-    }
-  );
-  localPosition.value = placement;
-  if (middlewareData.hide?.referenceHidden || middlewareData.hide?.escaped) {
-    handlePopoverHide(true);
-    return;
-  }
-  const wrapperPositionStyle = {
-    left: props.adaptive ? "0" : `${x}px`,
-    top: props.adaptive ? "0" : `${y}px`
-  };
-  Object.assign(wrapperRef.value.style, wrapperPositionStyle);
-  if (middlewareData.arrow) {
-    const { x: arrowX, y: arrowY } = middlewareData.arrow;
-    Object.assign(arrowRef.value.style, {
-      left: arrowX != null ? `${Math.max(arrowX, 5)}px` : "",
-      top: arrowY != null ? `${Math.max(arrowY, 5)}px` : ""
-    });
-  }
+	if (!wrapperRef.value) {
+		return;
+	}
+	const referenceElement = getReferenceElement();
+	updatePopoverMinWidth();
+	const { x, y, placement, middlewareData } = await computePosition(referenceElement, wrapperRef.value, {
+		placement: props.position,
+		middleware: computePositionMiddleware.value
+	});
+	localPosition.value = placement;
+	if (middlewareData.hide?.referenceHidden || middlewareData.hide?.escaped) {
+		handlePopoverHide(true);
+		return;
+	}
+	const wrapperPositionStyle = {
+		left: props.adaptive ? "0" : `${x}px`,
+		top: props.adaptive ? "0" : `${y}px`
+	};
+	Object.assign(wrapperRef.value.style, wrapperPositionStyle);
+	if (middlewareData.arrow) {
+		const { x: arrowX, y: arrowY } = middlewareData.arrow;
+		Object.assign(arrowRef.value.style, {
+			left: arrowX != null ? `${Math.max(Math.ceil(arrowX), 5)}px` : "",
+			top: arrowY != null ? `${Math.max(Math.ceil(arrowY), 5)}px` : ""
+		});
+	}
 }
+const throttledUpdatePosition = throttleByRaf(updatePosition);
 async function handlePopoverShow() {
-  if (showPopoverTimer || props.disabled) {
-    return;
-  }
-  await new Promise((resolve) => {
-    if (hidePopoverTimer) {
-      clearTimeout(hidePopoverTimer);
-      hidePopoverTimer = null;
-    }
-    showPopoverTimer = setTimeout(() => {
-      showPopoverTimer = null;
-      resolve();
-    }, props.showDelay);
-  });
-  await showPopover();
-  disposeAutoUpdate();
-  if (props.autoPosition) {
-    cleanupAutoUpdate = autoUpdate(triggerRef.value, wrapperRef.value, updatePosition);
-  } else {
-    await updatePosition();
-  }
+	if (showPopoverTimer || props.disabled) {
+		return;
+	}
+	await new Promise((resolve) => {
+		clearHideTimer();
+		showPopoverTimer = setTimeout(() => {
+			showPopoverTimer = null;
+			resolve();
+		}, props.showDelay);
+	});
+	// Render first, then position the wrapper while it is still invisible
+	// (transitions are disabled via CSS when data-visible is false), so the
+	// enter animation always starts from the correct position.
+	const visiblePromise = showPopover();
+	await syncPosition(true);
+	await visiblePromise;
+}
+function handlePopoverEscape(ev) {
+	emits("escape", ev);
+	handlePopoverHide();
 }
 async function handlePopoverHide(immediate = false) {
-  if (hidePopoverTimer) {
-    if (!immediate) {
-      return;
-    }
-    clearTimeout(hidePopoverTimer);
-    hidePopoverTimer = null;
-  }
-  await new Promise((resolve) => {
-    if (showPopoverTimer) {
-      clearTimeout(showPopoverTimer);
-      showPopoverTimer = null;
-    }
-    hidePopoverTimer = setTimeout(
-      () => {
-        hidePopoverTimer = null;
-        resolve();
-      },
-      immediate ? 0 : props.hideDelay
-    );
-  });
-  disposeAutoUpdate();
-  hidePopover();
+	if (hidePopoverTimer) {
+		if (!immediate) {
+			return;
+		}
+		clearHideTimer();
+	}
+	await new Promise((resolve) => {
+		clearShowTimer();
+		hidePopoverTimer = setTimeout(() => {
+			hidePopoverTimer = null;
+			resolve();
+		}, immediate ? 0 : props.hideDelay);
+	});
+	clearTriggerElementsCache();
+	disposeAutoUpdate();
+	hidePopover();
+}
+function activateTrigger(trigger, toggleSameTrigger = true) {
+	const isSameTrigger = trigger === activeTriggerRef.value || !props.triggerSelector;
+	if (isVisible.value && isSameTrigger && toggleSameTrigger) {
+		handlePopoverHide();
+		return;
+	}
+	if (isVisible.value) {
+		updateActiveTrigger(trigger);
+		return;
+	}
+	setActiveTrigger(trigger);
+	handlePopoverShow();
+}
+function updatePointerPosition(ev) {
+	pointerPosition.value = {
+		x: ev.clientX,
+		y: ev.clientY
+	};
 }
 function onTriggerClick(ev) {
-  if (props.disabled) {
-    return;
-  }
-  emits("trigger-click", ev);
-  if (!triggerMethods.value.includes("click")) {
-    return;
-  }
-  if (isVisible.value && props.toggleOnTrigger) {
-    handlePopoverHide();
-    return;
-  }
-  handlePopoverShow();
+	if (props.disabled) {
+		return;
+	}
+	const trigger = resolveTriggerElement(ev.target);
+	if (!trigger) {
+		return;
+	}
+	emits("trigger-click", ev);
+	if (triggerMethods.value.includes("click")) {
+		if (triggerMethods.value.includes("hover") && isVisible.value) {
+			return;
+		}
+		if (props.alignPoint && !isVisible.value) {
+			updatePointerPosition(ev);
+		}
+		activateTrigger(trigger, props.toggleOnTrigger);
+	} else if (props.alignPoint && isVisible.value && triggerMethods.value.includes("contextmenu") && !triggerMethods.value.includes("hover")) {
+		handlePopoverHide();
+	}
+}
+function onTriggerPointerOver(ev) {
+	if (props.disabled || !triggerMethods.value.includes("hover")) {
+		return;
+	}
+	const trigger = resolveTriggerElement(ev.target);
+	if (trigger) {
+		if (props.alignPoint) {
+			updatePointerPosition(ev);
+		}
+		activateTrigger(trigger, false);
+	}
 }
-function onTriggerPointerEnter() {
-  if (props.disabled || !triggerMethods.value.includes("hover")) {
-    return;
-  }
-  handlePopoverShow();
+function onTriggerPointerMove(ev) {
+	if (props.disabled || !triggerMethods.value.includes("hover")) {
+		return;
+	}
+	if (!props.alignPoint) {
+		return;
+	}
+	updatePointerPosition(ev);
+	if (isVisible.value) {
+		updatePosition();
+	}
 }
 function onTriggerPointerLeave() {
-  if (props.disabled || !triggerMethods.value.includes("hover")) {
-    return;
-  }
-  handlePopoverHide();
+	if (props.disabled || !triggerMethods.value.includes("hover")) {
+		return;
+	}
+	handlePopoverHide();
 }
-function onTriggerContextmenu() {
-  if (props.disabled || !triggerMethods.value.includes("contextmenu")) {
-    return;
-  }
-  if (isVisible.value) {
-    handlePopoverHide();
-    return;
-  }
-  handlePopoverShow();
+function onTriggerContextmenu(ev) {
+	if (props.disabled || !triggerMethods.value.includes("contextmenu")) {
+		return;
+	}
+	const trigger = resolveTriggerElement(ev.target);
+	if (!trigger) {
+		return;
+	}
+	ev.preventDefault();
+	if (props.alignPoint) {
+		setActiveTrigger(trigger);
+		updatePointerPosition(ev);
+		if (isVisible.value) {
+			throttledUpdatePosition();
+		} else {
+			handlePopoverShow();
+		}
+		return;
+	}
+	activateTrigger(trigger);
 }
-const PREVENT_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "Home", "End"]);
 function onWrapperKeydown(ev) {
-  if (props.disabled || !isVisible.value) {
-    return;
-  }
-  const { key } = ev;
-  if (PREVENT_KEYS.has(key)) {
-    ev.preventDefault();
-  }
+	if (props.disabled || !isVisible.value) {
+		return;
+	}
+	emits("wrapper-keydown", ev);
 }
 function onWrapperPointerEnter() {
-  if (props.disabled) {
-    return;
-  }
-  if (!props.interactive || !isVisible.value) {
-    return;
-  }
-  handlePopoverShow();
+	if (props.disabled) {
+		return;
+	}
+	if (!props.interactive || !isVisible.value) {
+		return;
+	}
+	handlePopoverShow();
 }
 function onWrapperPointerLeave() {
-  if (props.disabled) {
-    return;
-  }
-  if (props.interactive && !triggerMethods.value.includes("hover")) {
-    return;
-  }
-  handlePopoverHide();
+	if (props.disabled) {
+		return;
+	}
+	if (!triggerMethods.value.includes("hover")) {
+		return;
+	}
+	handlePopoverHide();
 }
-watch(
-  () => props.modelValue,
-  (visible) => {
-    if (visible) {
-      handlePopoverShow();
-    } else {
-      handlePopoverHide(true);
-    }
-  }
-);
+watch(() => props.modelValue, (visible) => {
+	if (visible) {
+		handlePopoverShow();
+	} else {
+		handlePopoverHide(true);
+	}
+});
+onMounted(() => {
+	if (props.modelValue) {
+		handlePopoverShow();
+	}
+});
 onBeforeUnmount(() => {
-  disposeAutoUpdate();
+	clearShowTimer();
+	clearHideTimer();
+	disposeAutoUpdate();
+	clearTriggerElementsCache();
 });
 defineExpose({
-  show: handlePopoverShow,
-  hide: handlePopoverHide
+	show: handlePopoverShow,
+	hide: handlePopoverHide,
+	update: throttledUpdatePosition
 });
 </script>
 
 <template>
   <div
+    data-popover
     ref="triggerRef"
-    class="pxd-popover inline-flex max-w-full active:select-none data-[disabled=true]:pointer-events-none data-[visible=true]:pointer-events-auto"
+    class="pxd-popover inline-flex max-w-full touch-manipulation active:select-none data-[disabled=true]:pointer-events-none data-[visible=true]:pointer-events-auto"
     :data-visible="isVisible"
     :data-disabled="disabled"
     v-bind="$attrs"
     @click="onTriggerClick"
-    @pointerenter="onTriggerPointerEnter"
+    @contextmenu="onTriggerContextmenu"
+    @pointerover="onTriggerPointerOver"
+    @pointermove="triggerPointerMoveFn"
     @pointerleave="onTriggerPointerLeave"
-    @contextmenu.prevent="onTriggerContextmenu"
   >
     <slot />
 
@@ -281,8 +579,8 @@ defineExpose({
       :model-value="isVisible"
       :show-overlay="adaptive"
       :close-on-press-escape="closeOnPressEscape"
-      :lock-scroll-on-visible="adaptive"
-      @escape="handlePopoverHide()"
+      :lock-scroll-on-visible="lockScrollOnVisible"
+      @escape="handlePopoverEscape"
     >
       <div
         v-if="isRender"
@@ -292,30 +590,36 @@ defineExpose({
         :data-adaptive="adaptive"
         :data-position="localPosition"
         :data-interactive="interactive"
+        :data-multiple-triggers="hasMultipleTriggers"
         :class="wrapperClass"
         :style="wrapperStyle"
-        class="pxd-popover--wrapper sm:max-w-(--popover-max-width) absolute -top-full -left-full isolate z-(--popover-index) flex max-h-full max-w-full outline-none data-[interactive=false]:pointer-events-none data-[visible=false]:pointer-events-none motion-reduce:data-[visible=false]:hidden"
+        class="pxd-popover--wrapper sm:max-w-(--popover-max-width) absolute -top-full -left-full isolate z-(--popover-index) flex max-h-full max-w-full will-change-transform outline-none data-[interactive=false]:pointer-events-none data-[multiple-triggers=true]:transition-[left,top] data-[visible=false]:pointer-events-none data-[visible=false]:transition-none! motion-reduce:data-[visible=false]:hidden"
         @keydown="onWrapperKeydown"
         @pointerenter="onWrapperPointerEnter"
         @pointerleave="onWrapperPointerLeave"
       >
         <div
-          class="pxd-popover--container relative z-1 w-inherit default-transition-duration default-transition-timing-function"
+          class="pxd-popover--container pointer-events-none relative z-1 min-h-inherit w-full default-transition-duration default-transition-timing-function"
           :data-transition-type="transitionType"
-          :data-show-transition="configProvider.popoverShowTransition"
+          :data-enter-motion="configProvider.enterMotion"
+          :data-leave-motion="configProvider.leaveMotion"
         >
           <div
             class="pxd-popover--content h-full max-h-inherit overflow-auto"
             :class="contentClass"
             :style="contentStyle"
           >
-            <slot name="content" />
+            <slot
+              name="content"
+              :active-trigger="activeTriggerRef"
+              :active-trigger-index="activeTriggerIndex"
+            />
           </div>
 
           <div
             v-if="showArrow"
             ref="arrowRef"
-            class="pxd-popover--arrow pointer-events-none absolute z-1"
+            class="pxd-popover--arrow pointer-events-none absolute z-1 will-change-[left,top]"
           >
             <PPopoverArrow
               fill="var(--popover-arrow-color,transparent)"
@@ -329,127 +633,6 @@ defineExpose({
   </div>
 </template>
 
-<style lang="postcss">
-.pxd-popover--wrapper {
-  --popover-padding: calc(var(--popover-offset, 8) * 1px);
-
-  .pxd-popover--content.border + .pxd-popover--arrow {
-    --popover-arrow-border: var(--color-gray-300);
-  }
-
-  &[data-position^='top'] {
-    &[data-adaptive='false'] {
-      padding-bottom: var(--popover-padding);
-    }
-
-    .pxd-popover--arrow {
-      bottom: -6px;
-    }
-  }
-
-  &[data-position^='bottom'] {
-    &[data-adaptive='false'] {
-      padding-top: var(--popover-padding);
-    }
-
-    .pxd-popover--arrow {
-      top: -6px;
-    }
-  }
-
-  &[data-position^='left'] {
-    &[data-adaptive='false'] {
-      padding-right: var(--popover-padding);
-    }
-
-    .pxd-popover--arrow {
-      right: -6px;
-    }
-  }
-
-  &[data-position^='right'] {
-    &[data-adaptive='false'] {
-      padding-left: var(--popover-padding);
-    }
-
-    .pxd-popover--arrow {
-      left: -6px;
-    }
-  }
-}
-
-.pxd-popover--container {
-  transition-property: opacity, transform;
-  max-height: min(800px, 80vh);
-  max-height: min(800px, 80dvh);
-  pointer-events: none;
-
-  [data-visible='true'] & {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  [data-visible='true'] &[data-show-transition='false'] {
-    transition-duration: 0s !important;
-  }
-
-  [data-visible='false'] &[data-transition-type='fade-scale'] {
-    opacity: 0;
-    transform: scale(var(--popover-scale));
-    transition-duration: var(--faster-transition-duration);
-  }
-
-  [data-visible='false'] &[data-transition-type='fade-slide'] {
-    transform: translateY(100%);
-    transition-duration: var(--faster-transition-duration);
-  }
-
-  [data-position='top'] & {
-    transform-origin: center bottom;
-  }
-
-  [data-position='top-start'] & {
-    transform-origin: left bottom;
-  }
-
-  [data-position='top-end'] & {
-    transform-origin: right bottom;
-  }
-
-  [data-position='bottom'] & {
-    transform-origin: center top;
-  }
-
-  [data-position='bottom-start'] & {
-    transform-origin: left top;
-  }
-
-  [data-position='bottom-end'] & {
-    transform-origin: right top;
-  }
-
-  [data-position='left'] & {
-    transform-origin: right center;
-  }
-
-  [data-position='left-start'] & {
-    transform-origin: right top;
-  }
-
-  [data-position='left-end'] & {
-    transform-origin: right bottom;
-  }
-
-  [data-position='right'] & {
-    transform-origin: left center;
-  }
-
-  [data-position='right-start'] & {
-    transform-origin: left top;
-  }
-
-  [data-position='right-end'] & {
-    transform-origin: left bottom;
-  }
-}
+<style>
+.pxd-popover--wrapper{--popover-padding:calc(var(--popover-offset, 8)*1px)}.pxd-popover--wrapper .pxd-popover--content.variant-invert+.pxd-popover--arrow{--popover-arrow-border:var(--color-gray-300)}.pxd-popover--wrapper[data-position^=top][data-adaptive=false]{padding-bottom:var(--popover-padding)}.pxd-popover--wrapper[data-position^=top] .pxd-popover--arrow{bottom:-6px}.pxd-popover--wrapper[data-position^=bottom][data-adaptive=false]{padding-top:var(--popover-padding)}.pxd-popover--wrapper[data-position^=bottom] .pxd-popover--arrow{top:-6px}.pxd-popover--wrapper[data-position^=left][data-adaptive=false]{padding-right:var(--popover-padding)}.pxd-popover--wrapper[data-position^=left] .pxd-popover--arrow{right:-6px}.pxd-popover--wrapper[data-position^=right][data-adaptive=false]{padding-left:var(--popover-padding)}.pxd-popover--wrapper[data-position^=right] .pxd-popover--arrow{left:-6px}.pxd-popover--container{max-height:min(800px,80vh);max-height:min(800px,80dvh);transition-property:opacity,transform}[data-visible=true] .pxd-popover--container{opacity:1;pointer-events:auto}[data-visible=false] .pxd-popover--container[data-transition-type=fade-scale]{opacity:0;transform:scale(var(--popover-scale));transition-duration:var(--faster-transition-duration)}[data-visible=false] .pxd-popover--container[data-transition-type=fade-slide]{transform:translateY(100%);transition-duration:var(--faster-transition-duration)}[data-position=top] .pxd-popover--container{transform-origin:center bottom}[data-position=top-start] .pxd-popover--container{transform-origin:left bottom}[data-position=top-end] .pxd-popover--container{transform-origin:right bottom}[data-position=bottom] .pxd-popover--container{transform-origin:center top}[data-position=bottom-start] .pxd-popover--container{transform-origin:left top}[data-position=bottom-end] .pxd-popover--container{transform-origin:right top}[data-position=left] .pxd-popover--container{transform-origin:right center}[data-position=left-start] .pxd-popover--container{transform-origin:right top}[data-position=left-end] .pxd-popover--container{transform-origin:right bottom}[data-position=right] .pxd-popover--container{transform-origin:left center}[data-position=right-start] .pxd-popover--container{transform-origin:left top}[data-position=right-end] .pxd-popover--container{transform-origin:left bottom}
 </style>