@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue3/lib/popover.js

@@ -1,18 +1,18 @@
-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, createTippyPopover, TOOLTIP_DELAY_MS } from "../chunks/popover_constants-6YkPPbnk.js";
-import { POPOVER_DIRECTIONS } from "../chunks/popover_constants-6YkPPbnk.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, createTippyPopover, TOOLTIP_DELAY_MS } from "../chunks/popover_constants-WsOUIY-m.js";
+import { POPOVER_DIRECTIONS } from "../chunks/popover_constants-WsOUIY-m.js";
 import { hasSlotContent, getUniqueString, isOutOfViewPort } from "../common/utils.js";
-import { Modal } from "../chunks/modal-8X6poIZW.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-Ji3Zlts6.js";
+import { SrOnlyCloseButton, SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-3EdsV-dH.js";
 import { DtLazyShow } from "./lazy-show.js";
 import "tippy.js";
 import "../common/constants.js";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 const _sfc_main$1 = {
   name: "PopoverHeaderFooter",
@@ -84,33 +84,40 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       "d-popover__header": $props.type === "header",
       "d-popover__footer": $props.type === "footer"
     })
-  }, [$data.hasSlotContent(_ctx.$slots.content) ? (openBlock(), createElementBlock("div", {
-    key: 0,
-    "data-qa": "dt-popover-header-footer-content",
-    class: normalizeClass([{
-      "d-popover__header__content": $props.type === "header",
-      "d-popover__footer__content": $props.type === "footer"
-    }, $props.contentClass])
-  }, [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": $props.type === "header",
-      "d-popover__footer__close-button": $props.type === "footer"
-    },
-    importance: "outlined",
-    kind: "muted",
-    circle: ""
-  }, $props.closeButtonProps, {
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
-  }), {
-    icon: withCtx(() => [createVNode(_component_dt_icon, {
-      name: "close",
-      size: "300"
-    })]),
-    _: 1
-  }, 16, ["class"])) : createCommentVNode("", true)], 2);
+  }, [
+    $data.hasSlotContent(_ctx.$slots.content) ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      "data-qa": "dt-popover-header-footer-content",
+      class: normalizeClass([{
+        "d-popover__header__content": $props.type === "header",
+        "d-popover__footer__content": $props.type === "footer"
+      }, $props.contentClass])
+    }, [
+      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": $props.type === "header",
+        "d-popover__footer__close-button": $props.type === "footer"
+      },
+      importance: "outlined",
+      kind: "muted",
+      circle: ""
+    }, $props.closeButtonProps, {
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+    }), {
+      icon: withCtx(() => [
+        createVNode(_component_dt_icon, {
+          name: "close",
+          size: "300"
+        })
+      ]),
+      _: 1
+    }, 16, ["class"])) : createCommentVNode("", true)
+  ], 2);
 }
 const PopoverHeaderFooter = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 const _sfc_main = {
@@ -744,9 +751,7 @@ const _sfc_main = {
           return;
         if (((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "body") {
           element.classList.add("d-of-hidden");
-          this.tip.setProps({
-            offset: this.offset
-          });
+          this.tip.setProps({ offset: this.offset });
         } else {
           element.classList.add("d-zi-popover");
         }
@@ -762,9 +767,7 @@ const _sfc_main = {
         return;
       if (((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "body") {
         element.classList.remove("d-of-hidden");
-        this.tip.setProps({
-          offset: this.offset
-        });
+        this.tip.setProps({ offset: this.offset });
       } else {
         element.classList.remove("d-zi-popover");
       }
@@ -994,103 +997,123 @@ 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"
-  }, [createElementVNode("div", {
-    class: "d-modal--transparent",
-    "aria-hidden": $props.modal && $data.isOpen ? "false" : "true",
-    onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-    }, ["prevent", "stop"]))
-  }, null, 8, _hoisted_1)])) : createCommentVNode("", true), (openBlock(), createBlock(resolveDynamicComponent($props.elementType), {
-    ref: "popover",
-    class: normalizeClass(["d-popover", {
-      "d-popover__anchor--opened": $data.isOpen
-    }]),
-    "data-qa": "dt-popover-container"
-  }, {
-    default: withCtx(() => [createElementVNode("div", {
-      id: !$props.ariaLabelledby && $options.labelledBy,
-      ref: "anchor",
-      "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: [_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: _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))
-    }, [renderSlot(_ctx.$slots, "anchor", {
-      attrs: {
-        "aria-expanded": $data.isOpen.toString(),
-        "aria-controls": $props.id,
-        "aria-haspopup": $props.role
-      }
-    })], 40, _hoisted_2), createVNode(_component_dt_lazy_show, mergeProps({
-      id: $props.id,
-      ref: "content",
-      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": $options.calculatedMaxHeight,
-        "max-width": $props.maxWidth
-      },
-      css: _ctx.$attrs.css,
-      tabindex: $props.contentTabindex
-    }, toHandlers($options.popoverListeners), {
-      onMouseenter: $options.onEnterContent,
-      onMouseleave: $options.onLeaveContent
-    }), {
-      default: withCtx(() => [$data.hasSlotContent(_ctx.$slots.headerContent) || $props.showCloseButton ? (openBlock(), createBlock(_component_popover_header_footer, {
-        key: 0,
-        ref: "popover__header",
-        class: normalizeClass($data.POPOVER_HEADER_FOOTER_PADDING_CLASSES[$props.padding]),
-        "content-class": $props.headerClass,
-        type: "header",
-        "show-close-button": $props.showCloseButton,
-        "close-button-props": $props.closeButtonProps,
-        onClose: $options.closePopover
-      }, {
-        content: withCtx(() => [renderSlot(_ctx.$slots, "headerContent", {
-          close: $options.closePopover
-        })]),
-        _: 3
-      }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : createCommentVNode("", true), createElementVNode("div", {
-        ref: "popover__content",
-        "data-qa": _ctx.$attrs["data-qa"] ? `${_ctx.$attrs["data-qa"]}-content` : "dt-popover-content",
-        class: normalizeClass(["d-popover__content", $data.POPOVER_PADDING_CLASSES[$props.padding], $props.contentClass])
-      }, [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: normalizeClass($data.POPOVER_HEADER_FOOTER_PADDING_CLASSES[$props.padding]),
-        "content-class": $props.footerClass
-      }, {
-        content: withCtx(() => [renderSlot(_ctx.$slots, "footerContent", {
-          close: $options.closePopover
-        })]),
-        _: 3
-      }, 8, ["class", "content-class"])) : createCommentVNode("", true), _ctx.showVisuallyHiddenClose ? (openBlock(), createBlock(_component_sr_only_close_button, {
-        key: 2,
-        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-        onClose: $options.closePopover
-      }, null, 8, ["visually-hidden-close-label", "onClose"])) : createCommentVNode("", true)]),
+  return openBlock(), createElementBlock("div", null, [
+    $props.modal && $data.isOpen ? (openBlock(), createBlock(Teleport, {
+      key: 0,
+      to: "body"
+    }, [
+      createElementVNode("div", {
+        class: "d-modal--transparent",
+        "aria-hidden": $props.modal && $data.isOpen ? "false" : "true",
+        onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+        }, ["prevent", "stop"]))
+      }, null, 8, _hoisted_1)
+    ])) : createCommentVNode("", true),
+    (openBlock(), createBlock(resolveDynamicComponent($props.elementType), {
+      ref: "popover",
+      class: normalizeClass(["d-popover", { "d-popover__anchor--opened": $data.isOpen }]),
+      "data-qa": "dt-popover-container"
+    }, {
+      default: withCtx(() => [
+        createElementVNode("div", {
+          id: !$props.ariaLabelledby && $options.labelledBy,
+          ref: "anchor",
+          "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: [
+            _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: _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))
+        }, [
+          renderSlot(_ctx.$slots, "anchor", {
+            attrs: {
+              "aria-expanded": $data.isOpen.toString(),
+              "aria-controls": $props.id,
+              "aria-haspopup": $props.role
+            }
+          })
+        ], 40, _hoisted_2),
+        createVNode(_component_dt_lazy_show, mergeProps({
+          id: $props.id,
+          ref: "content",
+          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": $options.calculatedMaxHeight,
+            "max-width": $props.maxWidth
+          },
+          css: _ctx.$attrs.css,
+          tabindex: $props.contentTabindex
+        }, toHandlers($options.popoverListeners), {
+          onMouseenter: $options.onEnterContent,
+          onMouseleave: $options.onLeaveContent
+        }), {
+          default: withCtx(() => [
+            $data.hasSlotContent(_ctx.$slots.headerContent) || $props.showCloseButton ? (openBlock(), createBlock(_component_popover_header_footer, {
+              key: 0,
+              ref: "popover__header",
+              class: normalizeClass($data.POPOVER_HEADER_FOOTER_PADDING_CLASSES[$props.padding]),
+              "content-class": $props.headerClass,
+              type: "header",
+              "show-close-button": $props.showCloseButton,
+              "close-button-props": $props.closeButtonProps,
+              onClose: $options.closePopover
+            }, {
+              content: withCtx(() => [
+                renderSlot(_ctx.$slots, "headerContent", { close: $options.closePopover })
+              ]),
+              _: 3
+            }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : createCommentVNode("", true),
+            createElementVNode("div", {
+              ref: "popover__content",
+              "data-qa": _ctx.$attrs["data-qa"] ? `${_ctx.$attrs["data-qa"]}-content` : "dt-popover-content",
+              class: normalizeClass([
+                "d-popover__content",
+                $data.POPOVER_PADDING_CLASSES[$props.padding],
+                $props.contentClass
+              ])
+            }, [
+              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: normalizeClass($data.POPOVER_HEADER_FOOTER_PADDING_CLASSES[$props.padding]),
+              "content-class": $props.footerClass
+            }, {
+              content: withCtx(() => [
+                renderSlot(_ctx.$slots, "footerContent", { close: $options.closePopover })
+              ]),
+              _: 3
+            }, 8, ["class", "content-class"])) : createCommentVNode("", true),
+            _ctx.showVisuallyHiddenClose ? (openBlock(), createBlock(_component_sr_only_close_button, {
+              key: 2,
+              "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"])
+      ]),
       _: 3
-    }, 16, ["id", "role", "data-qa", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "appear", "class", "style", "css", "tabindex", "onMouseenter", "onMouseleave"])]),
-    _: 3
-  }, 8, ["class"]))]);
+    }, 8, ["class"]))
+  ]);
 }
 const DtPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {