@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/popover.js

@@ -1,31 +1,31 @@
-import { b as A, P as b, c as L, f as k, d as I, e as B, a as R, l as x, n as D, h as _ } from "../chunks/popover_constants-qjlEkroB.js";
-import { g as Oe } from "../chunks/popover_constants-qjlEkroB.js";
-import { hasSlotContent as P, getUniqueString as g, isOutOfViewPort as q } from "./utils.js";
-import { M as H } from "../chunks/modal-VuMFkZFH.js";
-import { resolveComponent as f, openBlock as l, createElementBlock as E, normalizeClass as d, renderSlot as c, createCommentVNode as h, createBlock as a, mergeProps as w, withCtx as u, createVNode as S, Teleport as N, createElementVNode as y, withModifiers as O, resolveDynamicComponent as V, withKeys as p, toHandlers as M } from "vue";
-import { _ as T } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtButton as F } from "./button.js";
-import { DtIcon as z } from "./icon.js";
-import { S as W, a as K } from "../chunks/sr_only_close_button-7O-Ev8uM.js";
-import { DtLazyShow as j } from "./lazy-show.js";
+import { POPOVER_ROLES, POPOVER_PADDING_CLASSES, POPOVER_CONTENT_WIDTHS, POPOVER_STICKY_VALUES, POPOVER_INITIAL_FOCUS_STRINGS, POPOVER_APPEND_TO_VALUES, POPOVER_HEADER_FOOTER_PADDING_CLASSES, getPopperOptions, createTippy, TOOLTIP_DELAY_MS } from "../chunks/popover_constants-Qkpb0yh2.js";
+import { POPOVER_DIRECTIONS } from "../chunks/popover_constants-Qkpb0yh2.js";
+import { hasSlotContent, getUniqueString, isOutOfViewPort } from "../common/utils.js";
+import { Modal } from "../chunks/modal-XOr4kiNZ.js";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createBlock, mergeProps, withCtx, createVNode, Teleport, createElementVNode, withModifiers, resolveDynamicComponent, withKeys, toHandlers } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtButton } from "./button.js";
+import { DtIcon } from "./icon.js";
+import { SrOnlyCloseButton, SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-3EdsV-dH.js";
+import { DtLazyShow } from "./lazy-show.js";
 import "tippy.js";
-import "./constants.js";
-import "../chunks/link_constants-vIUB92L4.js";
+import "../common/constants.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-const G = {
+const _sfc_main$1 = {
   name: "PopoverHeaderFooter",
   components: {
-    DtButton: F,
-    DtIcon: z
+    DtButton,
+    DtIcon
   },
   props: {
     // eslint-disable-next-line vue/require-default-prop
     type: {
       type: String,
-      validator: function(e) {
-        return ["header", "footer"].includes(e);
+      validator: function(value) {
+        return ["header", "footer"].includes(value);
       }
     },
     /**
@@ -41,7 +41,7 @@ const G = {
      */
     showCloseButton: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * A set of props to be passed into the popover's header close button.
@@ -64,71 +64,73 @@ const G = {
   ],
   data() {
     return {
-      hasSlotContent: P
+      hasSlotContent
     };
   },
   methods: {
     focusCloseButton() {
-      var t;
-      const e = (t = this.$refs["popover__close-button"]) == null ? void 0 : t.$el;
-      e == null || e.focus();
+      var _a;
+      const closeButton = (_a = this.$refs["popover__close-button"]) == null ? void 0 : _a.$el;
+      closeButton == null ? void 0 : closeButton.focus();
     }
   }
 };
-function U(e, t, o, r, i, n) {
-  const m = f("dt-icon"), v = f("dt-button");
-  return l(), E("div", {
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_button = resolveComponent("dt-button");
+  return openBlock(), createElementBlock("div", {
     "data-qa": "dt-popover-header-footer",
-    class: d({
-      "d-popover__header": o.type === "header",
-      "d-popover__footer": o.type === "footer"
+    class: normalizeClass({
+      "d-popover__header": $props.type === "header",
+      "d-popover__footer": $props.type === "footer"
     })
   }, [
-    i.hasSlotContent(e.$slots.content) ? (l(), E("div", {
+    $data.hasSlotContent(_ctx.$slots.content) ? (openBlock(), createElementBlock("div", {
       key: 0,
       "data-qa": "dt-popover-header-footer-content",
-      class: d([{
-        "d-popover__header__content": o.type === "header",
-        "d-popover__footer__content": o.type === "footer"
-      }, o.contentClass])
+      class: normalizeClass([{
+        "d-popover__header__content": $props.type === "header",
+        "d-popover__footer__content": $props.type === "footer"
+      }, $props.contentClass])
     }, [
-      c(e.$slots, "content")
-    ], 2)) : h("", !0),
-    o.showCloseButton ? (l(), a(v, w({
+      renderSlot(_ctx.$slots, "content")
+    ], 2)) : createCommentVNode("", true),
+    $props.showCloseButton ? (openBlock(), createBlock(_component_dt_button, mergeProps({
       key: 1,
       ref: "popover__close-button",
       "data-qa": "dt-popover-close",
       class: {
-        "d-popover__header__close-button": o.type === "header",
-        "d-popover__footer__close-button": o.type === "footer"
+        "d-popover__header__close-button": $props.type === "header",
+        "d-popover__footer__close-button": $props.type === "footer"
       },
       importance: "outlined",
       kind: "muted",
       circle: ""
-    }, o.closeButtonProps, {
-      onClick: t[0] || (t[0] = (C) => e.$emit("close"))
+    }, $props.closeButtonProps, {
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
     }), {
-      icon: u(() => [
-        S(m, {
+      icon: withCtx(() => [
+        createVNode(_component_dt_icon, {
           name: "close",
           size: "300"
         })
       ]),
       _: 1
-    }, 16, ["class"])) : h("", !0)
+    }, 16, ["class"])) : createCommentVNode("", true)
   ], 2);
 }
-const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
+const PopoverHeaderFooter = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
   name: "DtPopover",
   /********************
    * CHILD COMPONENTS *
    ********************/
   components: {
-    SrOnlyCloseButton: W,
-    DtLazyShow: j,
-    PopoverHeaderFooter: Y
+    SrOnlyCloseButton,
+    DtLazyShow,
+    PopoverHeaderFooter
   },
-  mixins: [H, K],
+  mixins: [Modal, SrOnlyCloseButtonMixin],
   props: {
     /**
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
@@ -147,7 +149,7 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
      */
     openOnContext: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Element type (tag name) of the root element of the component.
@@ -171,7 +173,9 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
     role: {
       type: String,
       default: "dialog",
-      validator: (e) => A.includes(e)
+      validator: (role) => {
+        return POPOVER_ROLES.includes(role);
+      }
     },
     /**
      * ID of the element that serves as the label for the popover content.
@@ -207,7 +211,9 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
     padding: {
       type: String,
       default: "large",
-      validator: (e) => Object.keys(b).some((t) => t === e)
+      validator: (padding) => {
+        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);
+      }
     },
     /**
      * Additional class name for the content wrapper element.
@@ -224,7 +230,7 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
     contentWidth: {
       type: String,
       default: "",
-      validator: (e) => L.includes(e)
+      validator: (contentWidth) => POPOVER_CONTENT_WIDTHS.includes(contentWidth)
     },
     /**
      * Whether to apply transition on initial render in the content lazy show component.
@@ -254,7 +260,7 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
     id: {
       type: String,
       default() {
-        return g();
+        return getUniqueString();
       }
     },
     /**
@@ -279,7 +285,7 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
      */
     hideOnClick: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Determines modal state. If enabled popover has a modal overlay
@@ -288,7 +294,7 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
      */
     modal: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * If the popover does not fit in the direction described by "placement",
@@ -303,7 +309,9 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
      * */
     fallbackPlacements: {
       type: Array,
-      default: () => ["auto"]
+      default: () => {
+        return ["auto"];
+      }
     },
     /**
      * The direction the popover displays relative to the anchor.
@@ -338,7 +346,7 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
      */
     tether: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * If the popover sticks to the anchor. This is usually not needed, but can be needed
@@ -357,8 +365,10 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
      */
     sticky: {
       type: [Boolean, String],
-      default: !1,
-      validator: (e) => k.includes(e)
+      default: false,
+      validator: (sticky) => {
+        return POPOVER_STICKY_VALUES.includes(sticky);
+      }
     },
     /**
      * Determines maximum height for the popover before overflow.
@@ -382,7 +392,7 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
      */
     showCloseButton: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Additional class name for the header content wrapper element.
@@ -416,7 +426,9 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
     initialFocusElement: {
       type: [String, HTMLElement],
       default: "first",
-      validator: (e) => I.includes(e) || e instanceof HTMLElement || e.startsWith("#")
+      validator: (initialFocusElement) => {
+        return POPOVER_INITIAL_FOCUS_STRINGS.includes(initialFocusElement) || initialFocusElement instanceof HTMLElement || initialFocusElement.startsWith("#");
+      }
     },
     /**
      * If the popover should open pressing up or down arrow key on the anchor element.
@@ -425,7 +437,7 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
      */
     openWithArrowKeys: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Sets the element to which the popover is going to append to.
@@ -435,7 +447,9 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
     appendTo: {
       type: [HTMLElement, String],
       default: "body",
-      validator: (e) => B.includes(e) || e instanceof HTMLElement
+      validator: (appendTo) => {
+        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
     },
     /**
      * Set this prop to true and popover component will support hovercard behaviour
@@ -443,7 +457,7 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
      */
     hovercard: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * The timer is used only when the hovercard prop is true.
@@ -454,7 +468,9 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
     timer: {
       type: [Object, null],
       default: null,
-      validator: (e) => e === null || e.enter && e.leave && Object.keys(e).includes("current")
+      validator: (timer) => {
+        return timer === null || timer.enter && timer.leave && Object.keys(timer).includes("current");
+      }
     }
   },
   emits: [
@@ -480,15 +496,15 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
   ],
   data() {
     return {
-      POPOVER_PADDING_CLASSES: b,
-      POPOVER_HEADER_FOOTER_PADDING_CLASSES: R,
+      POPOVER_PADDING_CLASSES,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES,
       intersectionObserver: null,
-      isOutsideViewport: !1,
-      isOpen: !1,
-      toAppear: !1,
+      isOutsideViewport: false,
+      isOpen: false,
+      toAppear: false,
       anchorEl: null,
       popoverContentEl: null,
-      hasSlotContent: P,
+      hasSlotContent,
       inTimer: null,
       outTimer: null
     };
@@ -496,163 +512,228 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
   computed: {
     popoverListeners() {
       return {
-        keydown: (e) => {
-          this.onKeydown(e);
+        keydown: (event) => {
+          this.onKeydown(event);
         },
-        "after-leave": (e) => {
+        "after-leave": (event) => {
           this.onLeaveTransitionComplete();
         },
-        "after-enter": (e) => {
+        "after-enter": (event) => {
           this.onEnterTransitionComplete();
         }
       };
     },
     calculatedMaxHeight() {
-      return this.isOutsideViewport && this.modal ? "calc(100vh - var(--dt-space-300))" : this.maxHeight;
+      if (this.isOutsideViewport && this.modal) {
+        return `calc(100vh - var(--dt-space-300))`;
+      }
+      return this.maxHeight;
     },
     labelledBy() {
-      return this.ariaLabelledby || !this.ariaLabel && g("DtPopover__anchor");
+      return this.ariaLabelledby || !this.ariaLabel && getUniqueString("DtPopover__anchor");
     },
     currentHovercard() {
-      var e;
-      return (e = this.timer) == null ? void 0 : e.current;
+      var _a;
+      return (_a = this.timer) == null ? void 0 : _a.current;
     }
   },
   watch: {
     $props: {
-      immediate: !0,
-      deep: !0,
+      immediate: true,
+      deep: true,
       handler() {
         this.validateProps();
       }
     },
-    modal(e) {
-      var t;
-      (t = this.tip) == null || t.setProps({
-        zIndex: e ? 650 : this.calculateAnchorZindex()
+    modal(modal) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        zIndex: modal ? 650 : this.calculateAnchorZindex()
       });
     },
-    offset(e) {
-      var t;
-      (t = this.tip) == null || t.setProps({
-        offset: e
+    offset(offset) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        offset
       });
     },
-    sticky(e) {
-      var t;
-      (t = this.tip) == null || t.setProps({
-        sticky: e
+    sticky(sticky) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        sticky
       });
     },
     fallbackPlacements() {
-      var e;
-      (e = this.tip) == null || e.setProps({
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
         popperOptions: this.popperOptions()
       });
     },
     tether() {
-      var e;
-      (e = this.tip) == null || e.setProps({
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
         popperOptions: this.popperOptions()
       });
     },
-    placement(e) {
-      var t;
-      (t = this.tip) == null || t.setProps({
-        placement: e
+    placement(placement) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        placement
       });
     },
     open: {
-      handler: function(e) {
-        e !== null && (this.isOpen = e), e === !0 && (this.toAppear = !0);
+      handler: function(open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+        if (open === true) {
+          this.toAppear = true;
+        }
       },
-      immediate: !0
+      immediate: true
     },
     contentAppear: {
-      handler: function(e) {
-        e !== null && (this.toAppear = e);
+      handler: function(contentAppear) {
+        if (contentAppear !== null) {
+          this.toAppear = contentAppear;
+        }
       }
     },
-    isOpen(e, t) {
-      e ? (this.initTippyInstance(), this.tip.show()) : !e && t !== e && (this.removeEventListeners(), this.tip.hide());
+    isOpen(isOpen, isPrev) {
+      if (isOpen) {
+        this.initTippyInstance();
+        this.tip.show();
+      } else if (!isOpen && isPrev !== isOpen) {
+        this.removeEventListeners();
+        this.tip.hide();
+      }
     },
     currentHovercard() {
-      this.hovercard && this.timer && (this.currentHovercard === this.id ? this.isOpen = !0 : this.isOpen = !1);
+      if (this.hovercard && this.timer) {
+        if (this.currentHovercard === this.id) {
+          this.isOpen = true;
+        } else {
+          this.isOpen = false;
+        }
+      }
     }
   },
   mounted() {
-    var t;
-    const e = this.externalAnchor ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`) : null;
-    this.anchorEl = e ?? this.$refs.anchor.children[0], this.popoverContentEl = (t = this.$refs.content) == null ? void 0 : t.$el, this.isOpen && (this.initTippyInstance(), this.tip.show()), this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport), this.intersectionObserver.observe(this.popoverContentEl);
+    var _a;
+    const externalAnchorEl = this.externalAnchor ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`) : null;
+    this.anchorEl = externalAnchorEl ?? this.$refs.anchor.children[0];
+    this.popoverContentEl = (_a = this.$refs.content) == null ? void 0 : _a.$el;
+    if (this.isOpen) {
+      this.initTippyInstance();
+      this.tip.show();
+    }
+    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport);
+    this.intersectionObserver.observe(this.popoverContentEl);
   },
   beforeUnmount() {
-    var e;
-    (e = this.tip) == null || e.destroy(), this.intersectionObserver.disconnect(), this.removeReferences(), this.removeEventListeners();
+    var _a;
+    (_a = this.tip) == null ? void 0 : _a.destroy();
+    this.intersectionObserver.disconnect();
+    this.removeReferences();
+    this.removeEventListeners();
   },
   /******************
    *     METHODS    *
    ******************/
   methods: {
-    hasIntersectedViewport(e) {
-      var r;
-      const t = (r = e == null ? void 0 : e[0]) == null ? void 0 : r.target;
-      if (!t)
+    hasIntersectedViewport(entries) {
+      var _a;
+      const dialog = (_a = entries == null ? void 0 : entries[0]) == null ? void 0 : _a.target;
+      if (!dialog)
         return;
-      const o = q(t);
-      this.isOutsideViewport = o.bottom || o.top;
+      const isOut = isOutOfViewPort(dialog);
+      this.isOutsideViewport = isOut.bottom || isOut.top;
     },
     popperOptions() {
-      return x({
+      return getPopperOptions({
         fallbackPlacements: this.fallbackPlacements,
         tether: this.tether,
-        hasHideModifierEnabled: !0
+        hasHideModifierEnabled: true
       });
     },
     validateProps() {
-      this.modal && this.initialFocusElement === "none" && console.error('If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement');
+      if (this.modal && this.initialFocusElement === "none") {
+        console.error('If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement');
+      }
     },
     calculateAnchorZindex() {
-      var e;
-      return this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]') || // Special case because we don't have any dialtone drawer component yet. Render at 650 when
+      var _a;
+      if (this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]') || // Special case because we don't have any dialtone drawer component yet. Render at 650 when
       // anchor of popover is within a drawer.
-      (e = this.anchorEl) != null && e.closest(".d-zi-drawer") ? 650 : 300;
+      ((_a = this.anchorEl) == null ? void 0 : _a.closest(".d-zi-drawer"))) {
+        return 650;
+      } else {
+        return 300;
+      }
     },
     defaultToggleOpen(e) {
-      var t, o, r;
-      if (!this.hovercard && !this.openOnContext && (this.open === null || this.open === void 0)) {
-        if (!((t = this.anchorEl) != null && t.contains(e.target)) && !((o = this.anchorEl) != null && o.isEqualNode(e.target)) || (r = this.anchorEl) != null && r.disabled)
+      var _a, _b, _c;
+      if (this.hovercard) {
+        return;
+      }
+      if (this.openOnContext) {
+        return;
+      }
+      if (this.open === null || this.open === void 0) {
+        if (!((_a = this.anchorEl) == null ? void 0 : _a.contains(e.target)) && !((_b = this.anchorEl) == null ? void 0 : _b.isEqualNode(e.target)) || ((_c = this.anchorEl) == null ? void 0 : _c.disabled)) {
           return;
+        }
         this.toggleOpen();
       }
     },
-    async onContext(e) {
-      this.openOnContext && (e.preventDefault(), this.isOpen = !0, await this.$nextTick(), this.tip.setProps({
+    async onContext(event) {
+      if (!this.openOnContext) {
+        return;
+      }
+      event.preventDefault();
+      this.isOpen = true;
+      await this.$nextTick();
+      this.tip.setProps({
         placement: "right-start",
         getReferenceClientRect: () => ({
           width: 0,
           height: 0,
-          top: e.clientY,
-          bottom: e.clientY,
-          left: e.clientX,
-          right: e.clientX
+          top: event.clientY,
+          bottom: event.clientY,
+          left: event.clientX,
+          right: event.clientX
         })
-      }));
+      });
     },
     toggleOpen() {
       this.isOpen = !this.isOpen;
     },
     onArrowKeyPress(e) {
-      var t;
-      this.open === null && (this.openWithArrowKeys && ((t = this.anchorEl) != null && t.contains(e.target)) && (this.isOpen || (this.isOpen = !0)), this.$emit("keydown", e));
+      var _a;
+      if (this.open !== null) {
+        return;
+      }
+      if (this.openWithArrowKeys && ((_a = this.anchorEl) == null ? void 0 : _a.contains(e.target))) {
+        if (!this.isOpen) {
+          this.isOpen = true;
+        }
+      }
+      this.$emit("keydown", e);
     },
     addEventListeners() {
-      window.addEventListener("dt-popover-close", this.closePopover), this.contentWidth === "anchor" && window.addEventListener("resize", this.onResize);
+      window.addEventListener("dt-popover-close", this.closePopover);
+      if (this.contentWidth === "anchor") {
+        window.addEventListener("resize", this.onResize);
+      }
     },
     removeEventListeners() {
-      window.removeEventListener("dt-popover-close", this.closePopover), this.contentWidth === "anchor" && window.removeEventListener("resize", this.onResize);
+      window.removeEventListener("dt-popover-close", this.closePopover);
+      if (this.contentWidth === "anchor") {
+        window.removeEventListener("resize", this.onResize);
+      }
     },
     closePopover() {
-      this.isOpen = !1;
+      this.isOpen = false;
     },
     /*
     * Prevents scrolling outside of the currently opened modal popover by:
@@ -661,43 +742,94 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
     *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
     **/
     preventScrolling() {
-      var e, t;
+      var _a, _b;
       if (this.modal) {
-        const o = (e = this.anchorEl) == null ? void 0 : e.closest("body, .tippy-box");
-        if (!o)
+        const element = (_a = this.anchorEl) == null ? void 0 : _a.closest("body, .tippy-box");
+        if (!element)
           return;
-        ((t = o.tagName) == null ? void 0 : t.toLowerCase()) === "body" ? (o.classList.add("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : o.classList.add("d-zi-popover");
+        if (((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "body") {
+          element.classList.add("d-of-hidden");
+          this.tip.setProps({ offset: this.offset });
+        } else {
+          element.classList.add("d-zi-popover");
+        }
       }
     },
     /*
     * Resets the prevent scrolling properties set in preventScrolling() back to normal.
     **/
     enableScrolling() {
-      var t, o;
-      const e = (t = this.anchorEl) == null ? void 0 : t.closest("body, .tippy-box");
-      e && (((o = e.tagName) == null ? void 0 : o.toLowerCase()) === "body" ? (e.classList.remove("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : e.classList.remove("d-zi-popover"));
+      var _a, _b;
+      const element = (_a = this.anchorEl) == null ? void 0 : _a.closest("body, .tippy-box");
+      if (!element)
+        return;
+      if (((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "body") {
+        element.classList.remove("d-of-hidden");
+        this.tip.setProps({ offset: this.offset });
+      } else {
+        element.classList.remove("d-zi-popover");
+      }
     },
     removeReferences() {
-      this.anchorEl = null, this.popoverContentEl = null, this.tip = null;
+      this.anchorEl = null;
+      this.popoverContentEl = null;
+      this.tip = null;
     },
     async onShow() {
-      this.contentWidth === "anchor" && await this.setPopoverContentAnchorWidth(), this.contentWidth === null && (this.popoverContentEl.style.width = "auto"), this.addEventListeners();
+      if (this.contentWidth === "anchor") {
+        await this.setPopoverContentAnchorWidth();
+      }
+      if (this.contentWidth === null) {
+        this.popoverContentEl.style.width = "auto";
+      }
+      this.addEventListeners();
     },
     async onLeaveTransitionComplete() {
-      var e;
-      this.modal && (await this.focusFirstElement(this.$refs.anchor), await this.$nextTick(), this.enableScrolling()), (e = this.tip) == null || e.unmount(), this.$emit("opened", !1), this.open !== null && this.$emit("update:open", !1);
+      var _a;
+      if (this.modal) {
+        await this.focusFirstElement(this.$refs.anchor);
+        await this.$nextTick();
+        this.enableScrolling();
+      }
+      (_a = this.tip) == null ? void 0 : _a.unmount();
+      this.$emit("opened", false);
+      if (this.open !== null) {
+        this.$emit("update:open", false);
+      }
     },
     async onEnterTransitionComplete() {
-      this.focusInitialElement(), await this.$nextTick(), this.preventScrolling(), this.$emit("opened", !0, this.$refs.popover__content), this.open !== null && this.$emit("update:open", !0);
+      this.focusInitialElement();
+      await this.$nextTick();
+      this.preventScrolling();
+      this.$emit("opened", true, this.$refs.popover__content);
+      if (this.open !== null) {
+        this.$emit("update:open", true);
+      }
     },
     focusInitialElement() {
-      var e, t;
-      this.initialFocusElement === "dialog" && ((t = (e = this.$refs.content) == null ? void 0 : e.$el) == null || t.focus()), this.initialFocusElement.startsWith("#") && this.focusInitialElementById(), this.initialFocusElement === "first" && this.focusFirstElementIfNeeded(this.$refs.popover__content), this.initialFocusElement instanceof HTMLElement && this.initialFocusElement.focus();
+      var _a, _b;
+      if (this.initialFocusElement === "dialog") {
+        (_b = (_a = this.$refs.content) == null ? void 0 : _a.$el) == null ? void 0 : _b.focus();
+      }
+      if (this.initialFocusElement.startsWith("#")) {
+        this.focusInitialElementById();
+      }
+      if (this.initialFocusElement === "first") {
+        this.focusFirstElementIfNeeded(this.$refs.popover__content);
+      }
+      if (this.initialFocusElement instanceof HTMLElement) {
+        this.initialFocusElement.focus();
+      }
     },
     focusInitialElementById() {
-      var t, o, r;
-      const e = (o = (t = this.$refs.content) == null ? void 0 : t.$el) == null ? void 0 : o.querySelector(this.initialFocusElement);
-      e ? e.focus() : console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'), e ? e.focus() : (r = this.$refs.content) == null || r.$el.focus();
+      var _a, _b, _c;
+      const result = (_b = (_a = this.$refs.content) == null ? void 0 : _a.$el) == null ? void 0 : _b.querySelector(this.initialFocusElement);
+      if (result) {
+        result.focus();
+      } else {
+        console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.');
+      }
+      result ? result.focus() : (_c = this.$refs.content) == null ? void 0 : _c.$el.focus();
     },
     onResize() {
       this.closePopover();
@@ -705,33 +837,52 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
     onClickOutside() {
       if (!this.hideOnClick)
         return;
-      this.popoverContentEl.querySelector(".d-popover__anchor--opened") || this.closePopover();
+      const innerModals = this.popoverContentEl.querySelector(".d-popover__anchor--opened");
+      if (!innerModals) {
+        this.closePopover();
+      }
     },
     onKeydown(e) {
-      e.key === "Tab" && this.modal && this.focusTrappedTabPress(e, this.popoverContentEl), e.key === "Escape" && this.closePopover(), this.$emit("keydown", e);
+      if (e.key === "Tab") {
+        if (this.modal) {
+          this.focusTrappedTabPress(e, this.popoverContentEl);
+        }
+      }
+      if (e.key === "Escape") {
+        this.closePopover();
+      }
+      this.$emit("keydown", e);
     },
     async setPopoverContentAnchorWidth() {
-      var e;
-      await this.$nextTick(), this.popoverContentEl.style.width = `${(e = this.anchorEl) == null ? void 0 : e.clientWidth}px`;
-    },
-    focusFirstElementIfNeeded(e) {
-      var o, r;
-      this._getFocusableElements(e, !0).length !== 0 ? this.focusFirstElement(e) : this.showCloseButton ? (o = this.$refs.popover__header) == null || o.focusCloseButton() : (r = this.$refs.content) == null || r.$el.focus();
+      var _a;
+      await this.$nextTick();
+      this.popoverContentEl.style.width = `${(_a = this.anchorEl) == null ? void 0 : _a.clientWidth}px`;
+    },
+    focusFirstElementIfNeeded(domEl) {
+      var _a, _b;
+      const focusableElements = this._getFocusableElements(domEl, true);
+      if (focusableElements.length !== 0) {
+        this.focusFirstElement(domEl);
+      } else if (this.showCloseButton) {
+        (_a = this.$refs.popover__header) == null ? void 0 : _a.focusCloseButton();
+      } else {
+        (_b = this.$refs.content) == null ? void 0 : _b.$el.focus();
+      }
     },
     initTippyInstance() {
-      var e, t;
-      this.tip = D(this.anchorEl, {
+      var _a, _b;
+      this.tip = createTippy(this.anchorEl, {
         popperOptions: this.popperOptions(),
         contentElement: this.popoverContentEl,
         placement: this.placement,
         offset: this.offset,
         sticky: this.sticky,
-        appendTo: this.appendTo === "body" ? (t = (e = this.anchorEl) == null ? void 0 : e.getRootNode()) == null ? void 0 : t.querySelector("body") : this.appendTo,
-        interactive: !0,
+        appendTo: this.appendTo === "body" ? (_b = (_a = this.anchorEl) == null ? void 0 : _a.getRootNode()) == null ? void 0 : _b.querySelector("body") : this.appendTo,
+        interactive: true,
         trigger: "manual",
         // We have to manage hideOnClick functionality manually to handle
         // popover within popover situations.
-        hideOnClick: !1,
+        hideOnClick: false,
         zIndex: this.modal ? 650 : this.calculateAnchorZindex(),
         onClickOutside: this.onClickOutside,
         onShow: this.onShow
@@ -742,143 +893,172 @@ const Y = /* @__PURE__ */ T(G, [["render", U]]), Z = {
     //  ----------------------------------------------------------------------------
     setInTimer() {
       this.inTimer = setTimeout(() => {
-        this.isOpen = !0;
-      }, _);
+        this.isOpen = true;
+      }, TOOLTIP_DELAY_MS);
     },
     setOutTimer() {
       this.outTimer = setTimeout(() => {
-        this.isOpen = !1;
-      }, _);
+        this.isOpen = false;
+      }, TOOLTIP_DELAY_MS);
     },
     onEnterAnchor() {
-      this.hovercard && (this.timer ? this.timer.enter(this.id) : (clearTimeout(this.outTimer), this.setInTimer()));
+      if (!this.hovercard)
+        return;
+      if (this.timer)
+        this.timer.enter(this.id);
+      else {
+        clearTimeout(this.outTimer);
+        this.setInTimer();
+      }
     },
     onLeaveAnchor() {
-      this.hovercard && (this.timer ? this.timer.leave() : (clearTimeout(this.inTimer), this.setOutTimer()));
+      if (!this.hovercard)
+        return;
+      if (this.timer)
+        this.timer.leave();
+      else {
+        clearTimeout(this.inTimer);
+        this.setOutTimer();
+      }
     },
     onEnterContent() {
-      this.hovercard && (this.timer ? this.timer.enter(this.id) : clearTimeout(this.outTimer));
+      if (!this.hovercard)
+        return;
+      if (this.timer)
+        this.timer.enter(this.id);
+      else
+        clearTimeout(this.outTimer);
     },
     onLeaveContent() {
-      this.hovercard && (this.timer ? this.timer.leave() : this.setOutTimer());
+      if (!this.hovercard)
+        return;
+      if (this.timer)
+        this.timer.leave();
+      else
+        this.setOutTimer();
     }
     //  ============================================================================
     //  $ HOVERCARD
     //  ----------------------------------------------------------------------------
   }
-}, X = ["aria-hidden"], J = ["id", "data-qa", "tabindex"], Q = ["data-qa"];
-function $(e, t, o, r, i, n) {
-  const m = f("popover-header-footer"), v = f("sr-only-close-button"), C = f("dt-lazy-show");
-  return l(), E("div", null, [
-    o.modal && i.isOpen ? (l(), a(N, {
+};
+const _hoisted_1 = ["aria-hidden"];
+const _hoisted_2 = ["id", "data-qa", "tabindex"];
+const _hoisted_3 = ["data-qa"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_popover_header_footer = resolveComponent("popover-header-footer");
+  const _component_sr_only_close_button = resolveComponent("sr-only-close-button");
+  const _component_dt_lazy_show = resolveComponent("dt-lazy-show");
+  return openBlock(), createElementBlock("div", null, [
+    $props.modal && $data.isOpen ? (openBlock(), createBlock(Teleport, {
       key: 0,
       to: "body"
     }, [
-      y("div", {
+      createElementVNode("div", {
         class: "d-modal--transparent",
-        "aria-hidden": o.modal && i.isOpen ? "false" : "true",
-        onClick: t[0] || (t[0] = O(() => {
+        "aria-hidden": $props.modal && $data.isOpen ? "false" : "true",
+        onClick: _cache[0] || (_cache[0] = withModifiers(() => {
         }, ["prevent", "stop"]))
-      }, null, 8, X)
-    ])) : h("", !0),
-    (l(), a(V(o.elementType), {
+      }, null, 8, _hoisted_1)
+    ])) : createCommentVNode("", true),
+    (openBlock(), createBlock(resolveDynamicComponent($props.elementType), {
       ref: "popover",
-      class: d(["d-popover", { "d-popover__anchor--opened": i.isOpen }]),
+      class: normalizeClass(["d-popover", { "d-popover__anchor--opened": $data.isOpen }]),
       "data-qa": "dt-popover-container"
     }, {
-      default: u(() => [
-        y("div", {
-          id: !o.ariaLabelledby && n.labelledBy,
+      default: withCtx(() => [
+        createElementVNode("div", {
+          id: !$props.ariaLabelledby && $options.labelledBy,
           ref: "anchor",
-          "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}-anchor` : "dt-popover-anchor",
-          tabindex: o.openOnContext ? 0 : void 0,
-          onClickCapture: t[1] || (t[1] = (...s) => n.defaultToggleOpen && n.defaultToggleOpen(...s)),
-          onContextmenu: t[2] || (t[2] = (...s) => n.onContext && n.onContext(...s)),
+          "data-qa": _ctx.$attrs["data-qa"] ? `${_ctx.$attrs["data-qa"]}-anchor` : "dt-popover-anchor",
+          tabindex: $props.openOnContext ? 0 : void 0,
+          onClickCapture: _cache[1] || (_cache[1] = (...args) => $options.defaultToggleOpen && $options.defaultToggleOpen(...args)),
+          onContextmenu: _cache[2] || (_cache[2] = (...args) => $options.onContext && $options.onContext(...args)),
           onKeydown: [
-            t[3] || (t[3] = p(O((...s) => n.onArrowKeyPress && n.onArrowKeyPress(...s), ["prevent"]), ["up"])),
-            t[4] || (t[4] = p(O((...s) => n.onArrowKeyPress && n.onArrowKeyPress(...s), ["prevent"]), ["down"])),
-            t[6] || (t[6] = p((s) => e.$emit("keydown", s), ["enter"])),
-            t[7] || (t[7] = p((s) => e.$emit("keydown", s), ["space"]))
+            _cache[3] || (_cache[3] = withKeys(withModifiers((...args) => $options.onArrowKeyPress && $options.onArrowKeyPress(...args), ["prevent"]), ["up"])),
+            _cache[4] || (_cache[4] = withKeys(withModifiers((...args) => $options.onArrowKeyPress && $options.onArrowKeyPress(...args), ["prevent"]), ["down"])),
+            _cache[6] || (_cache[6] = withKeys(($event) => _ctx.$emit("keydown", $event), ["enter"])),
+            _cache[7] || (_cache[7] = withKeys(($event) => _ctx.$emit("keydown", $event), ["space"]))
           ],
-          onKeydownCapture: t[5] || (t[5] = p((...s) => n.closePopover && n.closePopover(...s), ["escape"])),
-          onMouseenter: t[8] || (t[8] = (...s) => n.onEnterAnchor && n.onEnterAnchor(...s)),
-          onMouseleave: t[9] || (t[9] = (...s) => n.onLeaveAnchor && n.onLeaveAnchor(...s))
+          onKeydownCapture: _cache[5] || (_cache[5] = withKeys((...args) => $options.closePopover && $options.closePopover(...args), ["escape"])),
+          onMouseenter: _cache[8] || (_cache[8] = (...args) => $options.onEnterAnchor && $options.onEnterAnchor(...args)),
+          onMouseleave: _cache[9] || (_cache[9] = (...args) => $options.onLeaveAnchor && $options.onLeaveAnchor(...args))
         }, [
-          c(e.$slots, "anchor", {
+          renderSlot(_ctx.$slots, "anchor", {
             attrs: {
-              "aria-expanded": i.isOpen.toString(),
-              "aria-controls": o.id,
-              "aria-haspopup": o.role
+              "aria-expanded": $data.isOpen.toString(),
+              "aria-controls": $props.id,
+              "aria-haspopup": $props.role
             }
           })
-        ], 40, J),
-        S(C, w({
-          id: o.id,
+        ], 40, _hoisted_2),
+        createVNode(_component_dt_lazy_show, mergeProps({
+          id: $props.id,
           ref: "content",
-          role: o.role,
-          "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}__dialog` : "dt-popover",
-          "aria-hidden": `${!i.isOpen}`,
-          "aria-labelledby": n.labelledBy,
-          "aria-label": o.ariaLabel,
-          "aria-modal": `${!o.modal}`,
-          transition: o.transition,
-          show: i.isOpen,
-          appear: i.toAppear,
-          class: ["d-popover__dialog", { "d-popover__dialog--modal": o.modal }, o.dialogClass],
+          role: $props.role,
+          "data-qa": _ctx.$attrs["data-qa"] ? `${_ctx.$attrs["data-qa"]}__dialog` : "dt-popover",
+          "aria-hidden": `${!$data.isOpen}`,
+          "aria-labelledby": $options.labelledBy,
+          "aria-label": $props.ariaLabel,
+          "aria-modal": `${!$props.modal}`,
+          transition: $props.transition,
+          show: $data.isOpen,
+          appear: $data.toAppear,
+          class: ["d-popover__dialog", { "d-popover__dialog--modal": $props.modal }, $props.dialogClass],
           style: {
-            "max-height": n.calculatedMaxHeight,
-            "max-width": o.maxWidth
+            "max-height": $options.calculatedMaxHeight,
+            "max-width": $props.maxWidth
           },
-          css: e.$attrs.css,
-          tabindex: o.contentTabindex
-        }, M(n.popoverListeners), {
-          onMouseenter: n.onEnterContent,
-          onMouseleave: n.onLeaveContent
+          css: _ctx.$attrs.css,
+          tabindex: $props.contentTabindex
+        }, toHandlers($options.popoverListeners), {
+          onMouseenter: $options.onEnterContent,
+          onMouseleave: $options.onLeaveContent
         }), {
-          default: u(() => [
-            i.hasSlotContent(e.$slots.headerContent) || o.showCloseButton ? (l(), a(m, {
+          default: withCtx(() => [
+            $data.hasSlotContent(_ctx.$slots.headerContent) || $props.showCloseButton ? (openBlock(), createBlock(_component_popover_header_footer, {
               key: 0,
               ref: "popover__header",
-              class: d(i.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),
-              "content-class": o.headerClass,
+              class: normalizeClass($data.POPOVER_HEADER_FOOTER_PADDING_CLASSES[$props.padding]),
+              "content-class": $props.headerClass,
               type: "header",
-              "show-close-button": o.showCloseButton,
-              "close-button-props": o.closeButtonProps,
-              onClose: n.closePopover
+              "show-close-button": $props.showCloseButton,
+              "close-button-props": $props.closeButtonProps,
+              onClose: $options.closePopover
             }, {
-              content: u(() => [
-                c(e.$slots, "headerContent", { close: n.closePopover })
+              content: withCtx(() => [
+                renderSlot(_ctx.$slots, "headerContent", { close: $options.closePopover })
               ]),
               _: 3
-            }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : h("", !0),
-            y("div", {
+            }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : createCommentVNode("", true),
+            createElementVNode("div", {
               ref: "popover__content",
-              "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}-content` : "dt-popover-content",
-              class: d([
+              "data-qa": _ctx.$attrs["data-qa"] ? `${_ctx.$attrs["data-qa"]}-content` : "dt-popover-content",
+              class: normalizeClass([
                 "d-popover__content",
-                i.POPOVER_PADDING_CLASSES[o.padding],
-                o.contentClass
+                $data.POPOVER_PADDING_CLASSES[$props.padding],
+                $props.contentClass
               ])
             }, [
-              c(e.$slots, "content", { close: n.closePopover })
-            ], 10, Q),
-            i.hasSlotContent(e.$slots.footerContent) ? (l(), a(m, {
+              renderSlot(_ctx.$slots, "content", { close: $options.closePopover })
+            ], 10, _hoisted_3),
+            $data.hasSlotContent(_ctx.$slots.footerContent) ? (openBlock(), createBlock(_component_popover_header_footer, {
               key: 1,
               ref: "popover__footer",
               type: "footer",
-              class: d(i.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),
-              "content-class": o.footerClass
+              class: normalizeClass($data.POPOVER_HEADER_FOOTER_PADDING_CLASSES[$props.padding]),
+              "content-class": $props.footerClass
             }, {
-              content: u(() => [
-                c(e.$slots, "footerContent", { close: n.closePopover })
+              content: withCtx(() => [
+                renderSlot(_ctx.$slots, "footerContent", { close: $options.closePopover })
               ]),
               _: 3
-            }, 8, ["class", "content-class"])) : h("", !0),
-            e.showVisuallyHiddenClose ? (l(), a(v, {
+            }, 8, ["class", "content-class"])) : createCommentVNode("", true),
+            _ctx.showVisuallyHiddenClose ? (openBlock(), createBlock(_component_sr_only_close_button, {
               key: 2,
-              "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
-              onClose: n.closePopover
-            }, null, 8, ["visually-hidden-close-label", "onClose"])) : h("", !0)
+              "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+              onClose: $options.closePopover
+            }, null, 8, ["visually-hidden-close-label", "onClose"])) : createCommentVNode("", true)
           ]),
           _: 3
         }, 16, ["id", "role", "data-qa", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "appear", "class", "style", "css", "tabindex", "onMouseenter", "onMouseleave"])
@@ -887,16 +1067,16 @@ function $(e, t, o, r, i, n) {
     }, 8, ["class"]))
   ]);
 }
-const me = /* @__PURE__ */ T(Z, [["render", $]]);
+const DtPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  me as DtPopover,
-  B as POPOVER_APPEND_TO_VALUES,
-  L as POPOVER_CONTENT_WIDTHS,
-  Oe as POPOVER_DIRECTIONS,
-  R as POPOVER_HEADER_FOOTER_PADDING_CLASSES,
-  I as POPOVER_INITIAL_FOCUS_STRINGS,
-  b as POPOVER_PADDING_CLASSES,
-  A as POPOVER_ROLES,
-  k as POPOVER_STICKY_VALUES
+  DtPopover,
+  POPOVER_APPEND_TO_VALUES,
+  POPOVER_CONTENT_WIDTHS,
+  POPOVER_DIRECTIONS,
+  POPOVER_HEADER_FOOTER_PADDING_CLASSES,
+  POPOVER_INITIAL_FOCUS_STRINGS,
+  POPOVER_PADDING_CLASSES,
+  POPOVER_ROLES,
+  POPOVER_STICKY_VALUES
 };
 //# sourceMappingURL=popover.js.map