@dialpad/dialtone-vue 2.126.0 → 2.127.1

package/dist/lib/popover.js

@@ -1,33 +1,32 @@
-import { b as l, P as s, c as p, f as d, d as c, e as h, a as u, l as f, n as m, h as i } from "../chunks/popover_constants-qjlEkroB.js";
-import { g as Q } from "../chunks/popover_constants-qjlEkroB.js";
-import { getUniqueString as r, isOutOfViewPort as v } from "./utils.js";
-import { Portal as y } from "@linusborg/vue-simple-portal";
-import { M as _ } from "../chunks/modal-VuMFkZFH.js";
-import { n as a } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtButton as O } from "./button.js";
-import { DtIcon as E } from "./icon.js";
-import { S as g, a as P } from "../chunks/sr_only_close_button-JGole5Xi.js";
-import { DtLazyShow as b } 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 { getUniqueString, isOutOfViewPort } from "../common/utils.js";
+import { Portal } from "@linusborg/vue-simple-portal";
+import { Modal } from "../chunks/modal-XOr4kiNZ.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtButton } from "./button.js";
+import { DtIcon } from "./icon.js";
+import { SrOnlyCloseButton, SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-81bHIpPu.js";
+import { DtLazyShow } from "./lazy-show.js";
 import "tippy.js";
-import "./constants.js";
+import "../common/constants.js";
 import "vue";
-import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
-const C = {
+const _sfc_main$1 = {
   name: "PopoverHeaderFooter",
   components: {
-    DtButton: O,
-    DtIcon: E
+    DtButton,
+    DtIcon
   },
   props: {
     // eslint-disable-next-line vue/require-default-prop
     type: {
       type: String,
-      validator: function(t) {
-        return ["header", "footer"].includes(t);
+      validator: function(value) {
+        return ["header", "footer"].includes(value);
       }
     },
     /**
@@ -43,7 +42,7 @@ const C = {
      */
     showCloseButton: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * A set of props to be passed into the popover's header close button.
@@ -66,50 +65,53 @@ const C = {
   ],
   methods: {
     focusCloseButton() {
-      var e;
-      const t = (e = this.$refs["popover__close-button"]) == null ? void 0 : e.$el;
-      t == null || t.focus();
+      var _a;
+      const closeButton = (_a = this.$refs["popover__close-button"]) == null ? void 0 : _a.$el;
+      closeButton == null ? void 0 : closeButton.focus();
     }
   }
 };
-var S = function() {
-  var e = this, o = e._self._c;
-  return o("div", { class: {
-    "d-popover__header": e.type === "header",
-    "d-popover__footer": e.type === "footer"
-  }, attrs: { "data-qa": "dt-popover-header-footer" } }, [e.$slots.content ? o("div", { class: [{
-    "d-popover__header__content": e.type === "header",
-    "d-popover__footer__content": e.type === "footer"
-  }, e.contentClass], attrs: { "data-qa": "dt-popover-header-footer-content" } }, [e._t("content")], 2) : e._e(), e.showCloseButton ? o("dt-button", e._b({ ref: "popover__close-button", class: {
-    "d-popover__header__close-button": e.type === "header",
-    "d-popover__footer__close-button": e.type === "footer"
-  }, attrs: { "data-qa": "dt-popover-close", importance: "outlined", kind: "muted", circle: "" }, on: { click: function(n) {
-    return e.$emit("close");
-  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [o("dt-icon", { attrs: { name: "close", size: "300" } })];
-  }, proxy: !0 }], null, !1, 2538694920) }, "dt-button", e.closeButtonProps, !1)) : e._e()], 1);
-}, w = [], T = /* @__PURE__ */ a(
-  C,
-  S,
-  w,
-  !1,
+var _sfc_render$1 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: {
+    "d-popover__header": _vm.type === "header",
+    "d-popover__footer": _vm.type === "footer"
+  }, attrs: { "data-qa": "dt-popover-header-footer" } }, [_vm.$slots.content ? _c("div", { class: [{
+    "d-popover__header__content": _vm.type === "header",
+    "d-popover__footer__content": _vm.type === "footer"
+  }, _vm.contentClass], attrs: { "data-qa": "dt-popover-header-footer-content" } }, [_vm._t("content")], 2) : _vm._e(), _vm.showCloseButton ? _c("dt-button", _vm._b({ ref: "popover__close-button", class: {
+    "d-popover__header__close-button": _vm.type === "header",
+    "d-popover__footer__close-button": _vm.type === "footer"
+  }, attrs: { "data-qa": "dt-popover-close", "importance": "outlined", "kind": "muted", "circle": "" }, on: { "click": function($event) {
+    return _vm.$emit("close");
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon", { attrs: { "name": "close", "size": "300" } })];
+  }, proxy: true }], null, false, 2538694920) }, "dt-button", _vm.closeButtonProps, false)) : _vm._e()], 1);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
   null,
   null,
   null,
   null
 );
-const x = T.exports, L = {
+const PopoverHeaderFooter = __component__$1.exports;
+const _sfc_main = {
   name: "DtPopover",
   /********************
    * CHILD COMPONENTS *
    ********************/
   components: {
-    SrOnlyCloseButton: g,
-    DtLazyShow: b,
-    PopoverHeaderFooter: x,
-    Portal: y
+    SrOnlyCloseButton,
+    DtLazyShow,
+    PopoverHeaderFooter,
+    Portal
   },
-  mixins: [_, P],
+  mixins: [Modal, SrOnlyCloseButtonMixin],
   props: {
     /**
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
@@ -128,7 +130,7 @@ const x = T.exports, L = {
      */
     openOnContext: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Element type (tag name) of the root element of the component.
@@ -152,7 +154,9 @@ const x = T.exports, L = {
     role: {
       type: String,
       default: "dialog",
-      validator: (t) => l.includes(t)
+      validator: (role) => {
+        return POPOVER_ROLES.includes(role);
+      }
     },
     /**
      * ID of the element that serves as the label for the popover content.
@@ -188,7 +192,9 @@ const x = T.exports, L = {
     padding: {
       type: String,
       default: "large",
-      validator: (t) => Object.keys(s).some((e) => e === t)
+      validator: (padding) => {
+        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);
+      }
     },
     /**
      * Additional class name for the content wrapper element.
@@ -205,7 +211,7 @@ const x = T.exports, L = {
     contentWidth: {
       type: String,
       default: "",
-      validator: (t) => p.includes(t)
+      validator: (contentWidth) => POPOVER_CONTENT_WIDTHS.includes(contentWidth)
     },
     /**
      * Tabindex value for the content. Passing null, no tabindex attribute will be set.
@@ -228,7 +234,7 @@ const x = T.exports, L = {
     id: {
       type: String,
       default() {
-        return r();
+        return getUniqueString();
       }
     },
     /**
@@ -253,7 +259,7 @@ const x = T.exports, L = {
      */
     hideOnClick: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Determines modal state. If enabled popover has a modal overlay
@@ -262,7 +268,7 @@ const x = T.exports, L = {
      */
     modal: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * If the popover does not fit in the direction described by "placement",
@@ -277,7 +283,9 @@ const x = T.exports, L = {
      * */
     fallbackPlacements: {
       type: Array,
-      default: () => ["auto"]
+      default: () => {
+        return ["auto"];
+      }
     },
     /**
      * The direction the popover displays relative to the anchor.
@@ -312,7 +320,7 @@ const x = T.exports, L = {
      */
     tether: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * If the popover sticks to the anchor. This is usually not needed, but can be needed
@@ -331,8 +339,10 @@ const x = T.exports, L = {
      */
     sticky: {
       type: [Boolean, String],
-      default: !1,
-      validator: (t) => d.includes(t)
+      default: false,
+      validator: (sticky) => {
+        return POPOVER_STICKY_VALUES.includes(sticky);
+      }
     },
     /**
      * Determines maximum height for the popover before overflow.
@@ -356,7 +366,7 @@ const x = T.exports, L = {
      */
     showCloseButton: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Additional class name for the header content wrapper element.
@@ -390,7 +400,9 @@ const x = T.exports, L = {
     initialFocusElement: {
       type: [String, HTMLElement],
       default: "first",
-      validator: (t) => c.includes(t) || t instanceof HTMLElement || t.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.
@@ -399,7 +411,7 @@ const x = T.exports, L = {
      */
     openWithArrowKeys: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Sets the element to which the popover is going to append to.
@@ -409,7 +421,9 @@ const x = T.exports, L = {
     appendTo: {
       type: [HTMLElement, String],
       default: "body",
-      validator: (t) => h.includes(t) || t 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
@@ -417,7 +431,7 @@ const x = T.exports, L = {
      */
     hovercard: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * The timer is used only when the hovercard prop is true.
@@ -428,7 +442,9 @@ const x = T.exports, L = {
     timer: {
       type: [Object, null],
       default: null,
-      validator: (t) => t === null || t.enter && t.leave && Object.keys(t).includes("current")
+      validator: (timer) => {
+        return timer === null || timer.enter && timer.leave && Object.keys(timer).includes("current");
+      }
     }
   },
   emits: [
@@ -449,11 +465,11 @@ const x = T.exports, L = {
   ],
   data() {
     return {
-      POPOVER_PADDING_CLASSES: s,
-      POPOVER_HEADER_FOOTER_PADDING_CLASSES: u,
+      POPOVER_PADDING_CLASSES,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES,
       intersectionObserver: null,
-      isOutsideViewport: !1,
-      isOpen: !1,
+      isOutsideViewport: false,
+      isOpen: false,
       anchorEl: null,
       popoverContentEl: null,
       inTimer: null,
@@ -464,154 +480,213 @@ const x = T.exports, L = {
     popoverListeners() {
       return {
         ...this.$listeners,
-        keydown: (t) => {
-          this.onKeydown(t), this.$emit("keydown", t);
+        keydown: (event) => {
+          this.onKeydown(event);
+          this.$emit("keydown", event);
         },
-        "after-leave": (t) => {
+        "after-leave": (event) => {
           this.onLeaveTransitionComplete();
         },
-        "after-enter": (t) => {
+        "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 && r("DtPopover__anchor");
+      return this.ariaLabelledby || !this.ariaLabel && getUniqueString("DtPopover__anchor");
     },
     currentHovercard() {
-      var t;
-      return (t = this.timer) == null ? void 0 : t.current.value;
+      var _a;
+      return (_a = this.timer) == null ? void 0 : _a.current.value;
     }
   },
   watch: {
     $props: {
-      immediate: !0,
-      deep: !0,
+      immediate: true,
+      deep: true,
       handler() {
         this.validateProps();
       }
     },
-    modal(t) {
-      var e;
-      (e = this.tip) == null || e.setProps({
-        zIndex: t ? 650 : this.calculateAnchorZindex()
+    modal(modal) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        zIndex: modal ? 650 : this.calculateAnchorZindex()
       });
     },
-    offset(t) {
-      var e;
-      (e = this.tip) == null || e.setProps({
-        offset: t
+    offset(offset) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        offset
       });
     },
-    sticky(t) {
-      var e;
-      (e = this.tip) == null || e.setProps({
-        sticky: t
+    sticky(sticky) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        sticky
       });
     },
     fallbackPlacements() {
-      var t;
-      (t = this.tip) == null || t.setProps({
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
         popperOptions: this.popperOptions()
       });
     },
     tether() {
-      var t;
-      (t = this.tip) == null || t.setProps({
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
         popperOptions: this.popperOptions()
       });
     },
-    placement(t) {
-      var e;
-      (e = this.tip) == null || e.setProps({
-        placement: t
+    placement(placement) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        placement
       });
     },
     open: {
-      handler: function(t) {
-        t !== null && (this.isOpen = t);
+      handler: function(open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
       },
-      immediate: !0
-    },
-    isOpen(t, e) {
-      t ? (this.initTippyInstance(), this.tip.show()) : !t && e !== t && (this.removeEventListeners(), this.tip.hide());
+      immediate: true
+    },
+    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 e;
-    const t = this.externalAnchor ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`) : null;
-    this.anchorEl = t ?? this.$refs.anchor.children[0], this.popoverContentEl = (e = this.$refs.content) == null ? void 0 : e.$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);
   },
   beforeDestroy() {
-    var t;
-    (t = this.tip) == null || t.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(t) {
-      var n;
-      const e = (n = t == null ? void 0 : t[0]) == null ? void 0 : n.target;
-      if (!e)
+    hasIntersectedViewport(entries) {
+      var _a;
+      const dialog = (_a = entries == null ? void 0 : entries[0]) == null ? void 0 : _a.target;
+      if (!dialog)
         return;
-      const o = v(e);
-      this.isOutsideViewport = o.bottom || o.top;
+      const isOut = isOutOfViewPort(dialog);
+      this.isOutsideViewport = isOut.bottom || isOut.top;
     },
     popperOptions() {
-      return f({
+      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 t;
-      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.
-      (t = this.anchorEl) != null && t.closest(".d-zi-drawer") ? 650 : 300;
+      ((_a = this.anchorEl) == null ? void 0 : _a.closest(".d-zi-drawer"))) {
+        return 650;
+      } else {
+        return 300;
+      }
     },
-    defaultToggleOpen(t) {
-      var e, o;
-      this.hovercard || this.openOnContext || (this.open ?? ((e = this.anchorEl) != null && e.contains(t.target) && !((o = this.anchorEl) != null && o.disabled) && this.toggleOpen()));
+    defaultToggleOpen(e) {
+      var _a, _b;
+      if (this.hovercard) {
+        return;
+      }
+      if (this.openOnContext) {
+        return;
+      }
+      this.open ?? (((_a = this.anchorEl) == null ? void 0 : _a.contains(e.target)) && !((_b = this.anchorEl) == null ? void 0 : _b.disabled) && this.toggleOpen());
     },
-    async onContext(t) {
-      this.openOnContext && (t.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: t.clientY,
-          bottom: t.clientY,
-          left: t.clientX,
-          right: t.clientX
+          top: event.clientY,
+          bottom: event.clientY,
+          left: event.clientX,
+          right: event.clientX
         })
-      }));
+      });
     },
     toggleOpen() {
       this.isOpen = !this.isOpen;
     },
-    onArrowKeyPress(t) {
-      var e;
-      this.open === null && this.openWithArrowKeys && (e = this.anchorEl) != null && e.contains(t.target) && (this.isOpen || (this.isOpen = !0));
+    onArrowKeyPress(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;
+        }
+      }
     },
     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:
@@ -620,43 +695,94 @@ const x = T.exports, L = {
     *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
     **/
     preventScrolling() {
-      var t, e;
+      var _a, _b;
       if (this.modal) {
-        const o = (t = this.anchorEl) == null ? void 0 : t.closest("body, .tippy-box");
-        if (!o)
+        const element = (_a = this.anchorEl) == null ? void 0 : _a.closest("body, .tippy-box");
+        if (!element)
           return;
-        ((e = o.tagName) == null ? void 0 : e.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 e, o;
-      const t = (e = this.anchorEl) == null ? void 0 : e.closest("body, .tippy-box");
-      t && (((o = t.tagName) == null ? void 0 : o.toLowerCase()) === "body" ? (t.classList.remove("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : t.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 t;
-      this.modal && (await this.focusFirstElement(this.$refs.anchor), await this.$nextTick(), this.enableScrolling()), (t = this.tip) == null || t.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 t, e;
-      this.initialFocusElement === "dialog" && ((e = (t = this.$refs.content) == null ? void 0 : t.$el) == null || e.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 e, o, n;
-      const t = (o = (e = this.$refs.content) == null ? void 0 : e.$el) == null ? void 0 : o.querySelector(this.initialFocusElement);
-      t ? t.focus() : console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'), t ? t.focus() : (n = this.$refs.content) == null || n.$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();
@@ -664,33 +790,51 @@ const x = T.exports, L = {
     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(t) {
-      t.key === "Tab" && this.modal && this.focusTrappedTabPress(t, this.popoverContentEl), t.key === "Escape" && this.closePopover();
+    onKeydown(e) {
+      if (e.key === "Tab") {
+        if (this.modal) {
+          this.focusTrappedTabPress(e, this.popoverContentEl);
+        }
+      }
+      if (e.key === "Escape") {
+        this.closePopover();
+      }
     },
     async setPopoverContentAnchorWidth() {
-      var t;
-      await this.$nextTick(), this.popoverContentEl.style.width = `${(t = this.anchorEl) == null ? void 0 : t.clientWidth}px`;
-    },
-    focusFirstElementIfNeeded(t) {
-      var o, n;
-      this._getFocusableElements(t, !0).length !== 0 ? this.focusFirstElement(t) : this.showCloseButton ? (o = this.$refs.popover__header) == null || o.focusCloseButton() : (n = this.$refs.content) == null || n.$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 t, e;
-      this.tip = m(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" ? (e = (t = this.anchorEl) == null ? void 0 : t.getRootNode()) == null ? void 0 : e.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
@@ -701,79 +845,114 @@ const x = T.exports, L = {
     //  ----------------------------------------------------------------------------
     setInTimer() {
       this.inTimer = setTimeout(() => {
-        this.isOpen = !0;
-      }, i);
+        this.isOpen = true;
+      }, TOOLTIP_DELAY_MS);
     },
     setOutTimer() {
       this.outTimer = setTimeout(() => {
-        this.isOpen = !1;
-      }, i);
+        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
     //  ----------------------------------------------------------------------------
   }
 };
-var k = function() {
-  var e = this, o = e._self._c;
-  return o("div", [e.modal && e.isOpen ? o("portal", [o("div", { staticClass: "d-modal--transparent", attrs: { "aria-hidden": e.modal && e.isOpen ? "false" : "true" }, on: { click: function(n) {
-    n.preventDefault(), n.stopPropagation();
-  } } })]) : e._e(), o(e.elementType, e._g({ ref: "popover", tag: "component", class: ["d-popover", { "d-popover__anchor--opened": e.isOpen }], attrs: { "data-qa": "dt-popover-container" } }, e.$listeners), [o("div", { ref: "anchor", attrs: { id: !e.ariaLabelledby && e.labelledBy, "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}-anchor` : "dt-popover-anchor", tabindex: e.openOnContext ? 0 : void 0 }, on: { "!click": function(n) {
-    return e.defaultToggleOpen.apply(null, arguments);
-  }, contextmenu: e.onContext, keydown: [function(n) {
-    return !n.type.indexOf("key") && e._k(n.keyCode, "up", 38, n.key, ["Up", "ArrowUp"]) ? null : (n.preventDefault(), e.onArrowKeyPress.apply(null, arguments));
-  }, function(n) {
-    return !n.type.indexOf("key") && e._k(n.keyCode, "down", 40, n.key, ["Down", "ArrowDown"]) ? null : (n.preventDefault(), e.onArrowKeyPress.apply(null, arguments));
-  }], "!keydown": function(n) {
-    return !n.type.indexOf("key") && e._k(n.keyCode, "escape", void 0, n.key, void 0) ? null : e.closePopover.apply(null, arguments);
-  }, mouseenter: e.onEnterAnchor, mouseleave: e.onLeaveAnchor } }, [e._t("anchor", null, { attrs: {
-    "aria-expanded": e.isOpen.toString(),
-    "aria-controls": e.id,
-    "aria-haspopup": e.role
-  } })], 2), o("dt-lazy-show", e._g({ ref: "content", class: ["d-popover__dialog", { "d-popover__dialog--modal": e.modal }, e.dialogClass], style: {
-    "max-height": e.calculatedMaxHeight,
-    "max-width": e.maxWidth
-  }, attrs: { id: e.id, role: e.role, "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}__dialog` : "dt-popover", "aria-hidden": `${!e.isOpen}`, "aria-labelledby": e.labelledBy, "aria-label": e.ariaLabel, "aria-modal": `${!e.modal}`, transition: e.transition, show: e.isOpen, tabindex: e.contentTabindex, appear: "" }, on: { mouseenter: e.onEnterContent, mouseleave: e.onLeaveContent } }, e.popoverListeners), [e.$slots.headerContent || e.showCloseButton ? o("popover-header-footer", { ref: "popover__header", class: e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding], attrs: { "content-class": e.headerClass, type: "header", "show-close-button": e.showCloseButton, "close-button-props": e.closeButtonProps }, on: { close: e.closePopover }, scopedSlots: e._u([{ key: "content", fn: function() {
-    return [e._t("headerContent", null, { close: e.closePopover })];
-  }, proxy: !0 }], null, !0) }) : e._e(), o("div", { ref: "popover__content", class: [
+var _sfc_render = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", [_vm.modal && _vm.isOpen ? _c("portal", [_c("div", { staticClass: "d-modal--transparent", attrs: { "aria-hidden": _vm.modal && _vm.isOpen ? "false" : "true" }, on: { "click": function($event) {
+    $event.preventDefault();
+    $event.stopPropagation();
+  } } })]) : _vm._e(), _c(_vm.elementType, _vm._g({ ref: "popover", tag: "component", class: ["d-popover", { "d-popover__anchor--opened": _vm.isOpen }], attrs: { "data-qa": "dt-popover-container" } }, _vm.$listeners), [_c("div", { ref: "anchor", attrs: { "id": !_vm.ariaLabelledby && _vm.labelledBy, "data-qa": _vm.$attrs["data-qa"] ? `${_vm.$attrs["data-qa"]}-anchor` : "dt-popover-anchor", "tabindex": _vm.openOnContext ? 0 : void 0 }, on: { "!click": function($event) {
+    return _vm.defaultToggleOpen.apply(null, arguments);
+  }, "contextmenu": _vm.onContext, "keydown": [function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
+      return null;
+    $event.preventDefault();
+    return _vm.onArrowKeyPress.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
+      return null;
+    $event.preventDefault();
+    return _vm.onArrowKeyPress.apply(null, arguments);
+  }], "!keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "escape", void 0, $event.key, void 0))
+      return null;
+    return _vm.closePopover.apply(null, arguments);
+  }, "mouseenter": _vm.onEnterAnchor, "mouseleave": _vm.onLeaveAnchor } }, [_vm._t("anchor", null, { "attrs": {
+    "aria-expanded": _vm.isOpen.toString(),
+    "aria-controls": _vm.id,
+    "aria-haspopup": _vm.role
+  } })], 2), _c("dt-lazy-show", _vm._g({ ref: "content", class: ["d-popover__dialog", { "d-popover__dialog--modal": _vm.modal }, _vm.dialogClass], style: {
+    "max-height": _vm.calculatedMaxHeight,
+    "max-width": _vm.maxWidth
+  }, attrs: { "id": _vm.id, "role": _vm.role, "data-qa": _vm.$attrs["data-qa"] ? `${_vm.$attrs["data-qa"]}__dialog` : "dt-popover", "aria-hidden": `${!_vm.isOpen}`, "aria-labelledby": _vm.labelledBy, "aria-label": _vm.ariaLabel, "aria-modal": `${!_vm.modal}`, "transition": _vm.transition, "show": _vm.isOpen, "tabindex": _vm.contentTabindex, "appear": "" }, on: { "mouseenter": _vm.onEnterContent, "mouseleave": _vm.onLeaveContent } }, _vm.popoverListeners), [_vm.$slots.headerContent || _vm.showCloseButton ? _c("popover-header-footer", { ref: "popover__header", class: _vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding], attrs: { "content-class": _vm.headerClass, "type": "header", "show-close-button": _vm.showCloseButton, "close-button-props": _vm.closeButtonProps }, on: { "close": _vm.closePopover }, scopedSlots: _vm._u([{ key: "content", fn: function() {
+    return [_vm._t("headerContent", null, { "close": _vm.closePopover })];
+  }, proxy: true }], null, true) }) : _vm._e(), _c("div", { ref: "popover__content", class: [
     "d-popover__content",
-    e.POPOVER_PADDING_CLASSES[e.padding],
-    e.contentClass
-  ], attrs: { "data-qa": e.$attrs["data-qa"] ? `${e.$attrs["data-qa"]}-content` : "dt-popover-content" } }, [e._t("content", null, { close: e.closePopover })], 2), e.$slots.footerContent ? o("popover-header-footer", { ref: "popover__footer", class: e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding], attrs: { type: "footer", "content-class": e.footerClass }, scopedSlots: e._u([{ key: "content", fn: function() {
-    return [e._t("footerContent", null, { close: e.closePopover })];
-  }, proxy: !0 }], null, !0) }) : e._e(), e.showVisuallyHiddenClose ? o("sr-only-close-button", { attrs: { "visually-hidden-close-label": e.visuallyHiddenCloseLabel }, on: { close: e.closePopover } }) : e._e()], 1)], 1)], 1);
-}, A = [], $ = /* @__PURE__ */ a(
-  L,
-  k,
-  A,
-  !1,
+    _vm.POPOVER_PADDING_CLASSES[_vm.padding],
+    _vm.contentClass
+  ], attrs: { "data-qa": _vm.$attrs["data-qa"] ? `${_vm.$attrs["data-qa"]}-content` : "dt-popover-content" } }, [_vm._t("content", null, { "close": _vm.closePopover })], 2), _vm.$slots.footerContent ? _c("popover-header-footer", { ref: "popover__footer", class: _vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding], attrs: { "type": "footer", "content-class": _vm.footerClass }, scopedSlots: _vm._u([{ key: "content", fn: function() {
+    return [_vm._t("footerContent", null, { "close": _vm.closePopover })];
+  }, proxy: true }], null, true) }) : _vm._e(), _vm.showVisuallyHiddenClose ? _c("sr-only-close-button", { attrs: { "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel }, on: { "close": _vm.closePopover } }) : _vm._e()], 1)], 1)], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const Z = $.exports;
+const DtPopover = __component__.exports;
 export {
-  Z as DtPopover,
-  h as POPOVER_APPEND_TO_VALUES,
-  p as POPOVER_CONTENT_WIDTHS,
-  Q as POPOVER_DIRECTIONS,
-  u as POPOVER_HEADER_FOOTER_PADDING_CLASSES,
-  c as POPOVER_INITIAL_FOCUS_STRINGS,
-  s as POPOVER_PADDING_CLASSES,
-  l as POPOVER_ROLES,
-  d 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