@dialpad/dialtone 9.49.2 → 9.51.0

package/dist/vue3/dialtone-vue.cjs

@@ -23,7 +23,7 @@ const lib_collapsible = require("./lib/collapsible.cjs");
 const lib_combobox = require("./chunks/index-4qgKeErp.js");
 const lib_datepicker = require("./lib/datepicker.cjs");
 const lib_descriptionList = require("./lib/description-list.cjs");
-const dropdown = require("./chunks/dropdown-XFYig-ys.js");
+const dropdown = require("./chunks/dropdown-p-Azgwov.js");
 const lib_dropdown = require("./lib/dropdown.cjs");
 const dropdown_constants = require("./chunks/dropdown_constants-2pGCXy7m.js");
 const lib_emoji = require("./lib/emoji.cjs");
@@ -51,7 +51,7 @@ const notice_action = require("./chunks/notice_action-WTucGhvr.js");
 const notice_constants = require("./chunks/notice_constants-UXo9e3bS.js");
 const lib_pagination = require("./lib/pagination.cjs");
 const lib_popover = require("./lib/popover.cjs");
-const popover_constants = require("./chunks/popover_constants-qUYTzsS3.js");
+const popover_constants = require("./chunks/popover_constants-XnGWXaxX.js");
 const lib_presence = require("./lib/presence.cjs");
 const lib_radio = require("./lib/radio.cjs");
 const lib_radioGroup = require("./lib/radio-group.cjs");

package/dist/vue3/dialtone-vue.js

@@ -21,7 +21,7 @@ import { DtCollapsible } from "./lib/collapsible.js";
 import { DtCombobox, LABEL_SIZES } from "./chunks/index-b_MgDylR.js";
 import { DtDatepicker, formatLong, formatMedium, formatNoYear, formatNumerical, formatShort } from "./lib/datepicker.js";
 import { DT_DESCRIPTION_LIST_DIRECTION, DtDescriptionList } from "./lib/description-list.js";
-import { DtDropdown } from "./chunks/dropdown-tVfEPEl1.js";
+import { DtDropdown } from "./chunks/dropdown-oA-_Gotg.js";
 import { DtDropdownSeparator } from "./lib/dropdown.js";
 import { DROPDOWN_PADDING_CLASSES } from "./chunks/dropdown_constants-w1MXGC3Z.js";
 import { DtEmoji } from "./lib/emoji.js";
@@ -49,7 +49,7 @@ import { DtNoticeAction, DtNoticeContent, DtNoticeIcon } from "./chunks/notice_a
 import { NOTICE_KINDS, NOTICE_ROLES } from "./chunks/notice_constants-7Qt2CQEY.js";
 import { DtPagination } from "./lib/pagination.js";
 import { DtPopover } from "./lib/popover.js";
-import { 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, TOOLTIP_DELAY_MS, TOOLTIP_DIRECTIONS, TOOLTIP_HIDE_ON_CLICK_VARIANTS, TOOLTIP_KIND_MODIFIERS, TOOLTIP_STICKY_VALUES } from "./chunks/popover_constants-kQaX7G4a.js";
+import { 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, TOOLTIP_DELAY_MS, TOOLTIP_DIRECTIONS, TOOLTIP_HIDE_ON_CLICK_VARIANTS, TOOLTIP_KIND_MODIFIERS, TOOLTIP_STICKY_VALUES } from "./chunks/popover_constants-WsOUIY-m.js";
 import { DtPresence, PRESENCE_STATES, PRESENCE_STATES_LIST } from "./lib/presence.js";
 import { DtRadio, RADIO_INPUT_VALIDATION_CLASSES } from "./lib/radio.js";
 import { DtRadioGroup } from "./lib/radio-group.js";

package/dist/vue3/lib/callbar-button-with-popover.cjs

@@ -9,7 +9,7 @@ const lib_button = require("./button.cjs");
 const lib_icon = require("./icon.cjs");
 require("../common/constants.cjs");
 require("./tooltip.cjs");
-require("../chunks/popover_constants-qUYTzsS3.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("tippy.js");
 require("../chunks/modal-VgxXAQFP.js");
 require("../chunks/sr_only_close_button-xGrHFjwA.js");

package/dist/vue3/lib/callbar-button-with-popover.js

@@ -7,7 +7,7 @@ import { DtButton } from "./button.js";
 import { DtIcon } from "./icon.js";
 import "../common/constants.js";
 import "./tooltip.js";
-import "../chunks/popover_constants-kQaX7G4a.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
 import "tippy.js";
 import "../chunks/modal-XOr4kiNZ.js";
 import "../chunks/sr_only_close_button-3EdsV-dH.js";

package/dist/vue3/lib/callbar-button.cjs

@@ -7,7 +7,7 @@ const lib_button = require("./button.cjs");
 const lib_tooltip = require("./tooltip.cjs");
 require("../common/constants.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
-require("../chunks/popover_constants-qUYTzsS3.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("tippy.js");
 const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ["sm", "md", "lg", "xl"];
 const _sfc_main = {

package/dist/vue3/lib/callbar-button.js

@@ -5,7 +5,7 @@ import { DtButton } from "./button.js";
 import { DtTooltip } from "./tooltip.js";
 import "../common/constants.js";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/popover_constants-kQaX7G4a.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
 import "tippy.js";
 const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ["sm", "md", "lg", "xl"];
 const _sfc_main = {

package/dist/vue3/lib/combobox-multi-select.cjs

@@ -6,7 +6,7 @@ const lib_chip = require("./chip.cjs");
 const lib_validationMessages = require("./validation-messages.cjs");
 const common_validators = require("../common/validators.cjs");
 const common_utils = require("../common/utils.cjs");
-const popover_constants = require("../chunks/popover_constants-qUYTzsS3.js");
+const popover_constants = require("../chunks/popover_constants-XnGWXaxX.js");
 const sr_only_close_button = require("../chunks/sr_only_close_button-xGrHFjwA.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");

package/dist/vue3/lib/combobox-multi-select.js

@@ -4,7 +4,7 @@ import { DtChip } from "./chip.js";
 import { DtValidationMessages } from "./validation-messages.js";
 import { validationMessageValidator } from "../common/validators.js";
 import { hasSlotContent } from "../common/utils.js";
-import { POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-kQaX7G4a.js";
+import { POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-WsOUIY-m.js";
 import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-3EdsV-dH.js";
 import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, createElementBlock, Fragment, renderList, mergeProps, toHandlers, withKeys, createTextVNode, toDisplayString, createVNode, withModifiers, renderSlot } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";

package/dist/vue3/lib/combobox-with-popover.cjs

@@ -7,7 +7,7 @@ const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 const lib_popover = require("./popover.cjs");
 const dropdown_constants = require("../chunks/dropdown_constants-2pGCXy7m.js");
-const popover_constants = require("../chunks/popover_constants-qUYTzsS3.js");
+const popover_constants = require("../chunks/popover_constants-XnGWXaxX.js");
 require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
 require("./list-item.cjs");
 require("../chunks/list_item_constants-EiqkqZvP.js");

package/dist/vue3/lib/combobox-with-popover.js

@@ -5,7 +5,7 @@ import { resolveComponent, openBlock, createBlock, mergeProps, withCtx, createEl
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtPopover } from "./popover.js";
 import { DROPDOWN_PADDING_CLASSES } from "../chunks/dropdown_constants-w1MXGC3Z.js";
-import { POPOVER_CONTENT_WIDTHS, POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-kQaX7G4a.js";
+import { POPOVER_CONTENT_WIDTHS, POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-WsOUIY-m.js";
 import "../chunks/keyboard_list_navigation-ScXhrxya.js";
 import "./list-item.js";
 import "../chunks/list_item_constants-u1xcN9Dd.js";

package/dist/vue3/lib/contact-row.cjs

@@ -20,7 +20,7 @@ require("./badge.cjs");
 require("./button.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("./tooltip.cjs");
-require("../chunks/popover_constants-qUYTzsS3.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("tippy.js");
 const _sfc_main = {
   name: "DtRecipeContactRow",

package/dist/vue3/lib/contact-row.js

@@ -18,7 +18,7 @@ import "./badge.js";
 import "./button.js";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "./tooltip.js";
-import "../chunks/popover_constants-kQaX7G4a.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
 import "tippy.js";
 const _sfc_main = {
   name: "DtRecipeContactRow",

package/dist/vue3/lib/datepicker.cjs

@@ -8,7 +8,7 @@ const lib_button = require("./button.cjs");
 const lib_icon = require("./icon.cjs");
 require("../chunks/stack_constants-SMzMWnAQ.js");
 require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
-require("../chunks/popover_constants-qUYTzsS3.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("tippy.js");
 require("../common/utils.cjs");
 require("../common/constants.cjs");

package/dist/vue3/lib/datepicker.js

@@ -6,7 +6,7 @@ import { DtButton } from "./button.js";
 import { DtIcon } from "./icon.js";
 import "../chunks/stack_constants-HraCekPm.js";
 import "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
-import "../chunks/popover_constants-kQaX7G4a.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
 import "tippy.js";
 import "../common/utils.js";
 import "../common/constants.js";

package/dist/vue3/lib/dropdown.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dropdown = require("../chunks/dropdown-XFYig-ys.js");
+const dropdown = require("../chunks/dropdown-p-Azgwov.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 const dropdown_constants = require("../chunks/dropdown_constants-2pGCXy7m.js");
@@ -15,7 +15,7 @@ require("@dialpad/dialtone-icons/icons.json");
 require("./button.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("./popover.cjs");
-require("../chunks/popover_constants-qUYTzsS3.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("tippy.js");
 require("../chunks/modal-VgxXAQFP.js");
 require("./lazy-show.cjs");

package/dist/vue3/lib/dropdown.js

@@ -1,4 +1,4 @@
-import { DtDropdown } from "../chunks/dropdown-tVfEPEl1.js";
+import { DtDropdown } from "../chunks/dropdown-oA-_Gotg.js";
 import { openBlock, createElementBlock } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DROPDOWN_PADDING_CLASSES } from "../chunks/dropdown_constants-w1MXGC3Z.js";
@@ -13,7 +13,7 @@ import "@dialpad/dialtone-icons/icons.json";
 import "./button.js";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "./popover.js";
-import "../chunks/popover_constants-kQaX7G4a.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
 import "tippy.js";
 import "../chunks/modal-XOr4kiNZ.js";
 import "./lazy-show.js";

package/dist/vue3/lib/editor.cjs

@@ -50,7 +50,7 @@ require("./presence.cjs");
 require("@dialpad/dialtone-icons/vue3/hash");
 require("@dialpad/dialtone-icons/vue3/lock");
 require("../chunks/stack_constants-SMzMWnAQ.js");
-require("../chunks/popover_constants-qUYTzsS3.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("../chunks/modal-VgxXAQFP.js");
 require("../chunks/sr_only_close_button-xGrHFjwA.js");
 require("./lazy-show.cjs");

package/dist/vue3/lib/editor.js

@@ -48,7 +48,7 @@ import "./presence.js";
 import "@dialpad/dialtone-icons/vue3/hash";
 import "@dialpad/dialtone-icons/vue3/lock";
 import "../chunks/stack_constants-HraCekPm.js";
-import "../chunks/popover_constants-kQaX7G4a.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
 import "../chunks/modal-XOr4kiNZ.js";
 import "../chunks/sr_only_close_button-3EdsV-dH.js";
 import "./lazy-show.js";

package/dist/vue3/lib/emoji-picker.cjs

@@ -17,7 +17,7 @@ require("@dialpad/dialtone-icons/vue3");
 require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("../chunks/link_constants-x8NwdqmA.js");
-require("../chunks/popover_constants-qUYTzsS3.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("tippy.js");
 const _hoisted_1$5 = { class: "d-emoji-picker__search d-emoji-picker__alignment" };
 const _sfc_main$5 = {
@@ -138,8 +138,9 @@ const _sfc_main$4 = {
      * @param {String} tabId - The name of the tab that was selected
      */
     "selected-tabset",
-    "focus-search-input",
-    "focus-skin-selector"
+    "shift-tab-key-pressed",
+    "tab-key-pressed",
+    "arrow-down-key-pressed"
   ],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
@@ -204,13 +205,13 @@ const _sfc_main$4 = {
       if (event.key === "Tab") {
         event.preventDefault();
         if (event.shiftKey) {
-          emits("focus-skin-selector");
+          emits("shift-tab-key-pressed");
         } else {
-          emits("focus-search-input");
+          emits("tab-key-pressed");
         }
       }
       if (event.key === "ArrowDown") {
-        emits("focus-search-input");
+        emits("arrow-down-key-pressed");
       }
     }
     __expose({
@@ -536,9 +537,9 @@ const _sfc_main$3 = {
     "focus-skin-selector",
     /**
      * Emitted when the user shift tab in first tab of emoji selector
-     * @event focus-search-input
+     * @event shift-tab-key-pressed
       */
-    "focus-search-input"
+    "shift-tab-key-pressed"
   ],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
@@ -719,7 +720,7 @@ const _sfc_main$3 = {
               scrollToTab(indexTab, true);
             } else {
               scrollToTab(1, false);
-              emits("focus-search-input");
+              emits("shift-tab-key-pressed");
             }
           } else {
             if (focusEmoji(indexTab + 1, 0)) {
@@ -1216,6 +1217,9 @@ const _sfc_main = {
     const selectedTabset = vue.ref({});
     const scrollIntoTab = vue.ref(0);
     const isScrolling = vue.ref(false);
+    const searchInputRef = vue.ref(null);
+    const emojiSelectorRef = vue.ref(null);
+    const tabsetRef = vue.ref(null);
     const showRecentlyUsedTab = vue.computed(() => props.recentlyUsedEmojis.length > 0);
     vue.watch(
       () => props.searchQuery,
@@ -1237,36 +1241,54 @@ const _sfc_main = {
     function updateHighlightedEmoji(emoji) {
       highlightedEmoji.value = emoji;
     }
+    function focusNextSectionFromEmojiTabSet() {
+      if (props.showSearch) {
+        searchInputRef.value.focusSearchInput();
+      } else {
+        emojiSelectorRef.value.focusEmojiSelector();
+      }
+    }
+    function focusNextSectionFromEmojiSelector() {
+      if (props.showSearch) {
+        searchInputRef.value.focusSearchInput();
+      } else {
+        tabsetRef.value.focusTabset();
+      }
+    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         vue.createElementVNode("div", _hoisted_2, [
           vue.createVNode(_sfc_main$4, {
-            ref: "tabsetRef",
+            ref_key: "tabsetRef",
+            ref: tabsetRef,
             "emoji-filter": internalSearchQuery.value,
             "show-recently-used-tab": showRecentlyUsedTab.value,
             "scroll-into-tab": scrollIntoTab.value,
             "tabset-labels": __props.tabSetLabels,
             "is-scrolling": isScrolling.value,
-            onFocusSearchInput: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.searchInputRef.focusSearchInput()),
-            onFocusSkinSelector: _cache[1] || (_cache[1] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+            onTabKeyPressed: focusNextSectionFromEmojiTabSet,
+            onShiftTabKeyPressed: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+            onArrowDownKeyPressed: focusNextSectionFromEmojiTabSet,
             onSelectedTabset: scrollToSelectedTabset,
-            onKeydown: _cache[2] || (_cache[2] = vue.withKeys(($event) => emits("close"), ["esc"]))
+            onKeydown: _cache[1] || (_cache[1] = vue.withKeys(($event) => emits("close"), ["esc"]))
           }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
         ]),
         vue.createElementVNode("div", _hoisted_3, [
           __props.showSearch ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
             key: 0,
-            ref: "searchInputRef",
+            ref_key: "searchInputRef",
+            ref: searchInputRef,
             modelValue: internalSearchQuery.value,
-            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => internalSearchQuery.value = $event),
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => internalSearchQuery.value = $event),
             "search-placeholder-label": __props.searchPlaceholderLabel,
-            onSelectFirstEmoji: _cache[4] || (_cache[4] = ($event) => emits("selected-emoji", highlightedEmoji.value)),
-            onFocusTabset: _cache[5] || (_cache[5] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
-            onFocusEmojiSelector: _cache[6] || (_cache[6] = ($event) => _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
-            onKeydown: _cache[7] || (_cache[7] = vue.withKeys(($event) => emits("close"), ["esc"]))
+            onSelectFirstEmoji: _cache[3] || (_cache[3] = ($event) => emits("selected-emoji", highlightedEmoji.value)),
+            onFocusTabset: _cache[4] || (_cache[4] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
+            onFocusEmojiSelector: _cache[5] || (_cache[5] = ($event) => _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
+            onKeydown: _cache[6] || (_cache[6] = vue.withKeys(($event) => emits("close"), ["esc"]))
           }, null, 8, ["modelValue", "search-placeholder-label"])) : vue.createCommentVNode("", true),
           vue.createVNode(_sfc_main$3, {
-            ref: "emojiSelectorRef",
+            ref_key: "emojiSelectorRef",
+            ref: emojiSelectorRef,
             "emoji-filter": internalSearchQuery.value,
             "skin-tone": __props.skinTone,
             "tabset-labels": __props.tabSetLabels,
@@ -1277,10 +1299,10 @@ const _sfc_main = {
             onScrollIntoTab: updateScrollIntoTab,
             onIsScrolling: updateIsScrolling,
             onHighlightedEmoji: updateHighlightedEmoji,
-            onSelectedEmoji: _cache[8] || (_cache[8] = ($event) => emits("selected-emoji", $event)),
-            onFocusSkinSelector: _cache[9] || (_cache[9] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
-            onFocusSearchInput: _cache[10] || (_cache[10] = ($event) => _ctx.$refs.searchInputRef.focusSearchInput()),
-            onKeydown: _cache[11] || (_cache[11] = vue.withKeys(($event) => emits("close"), ["esc"]))
+            onSelectedEmoji: _cache[7] || (_cache[7] = ($event) => emits("selected-emoji", $event)),
+            onFocusSkinSelector: _cache[8] || (_cache[8] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+            onShiftTabKeyPressed: focusNextSectionFromEmojiSelector,
+            onKeydown: _cache[9] || (_cache[9] = vue.withKeys(($event) => emits("close"), ["esc"]))
           }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
         ]),
         vue.createElementVNode("div", _hoisted_4, [
@@ -1290,10 +1312,10 @@ const _sfc_main = {
             "is-hovering": !!highlightedEmoji.value,
             "skin-selector-button-tooltip-label": __props.skinSelectorButtonTooltipLabel,
             "skin-tone": __props.skinTone,
-            onSkinTone: _cache[12] || (_cache[12] = ($event) => emits("skin-tone", $event)),
-            onFocusTabset: _cache[13] || (_cache[13] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
-            onFocusLastEmoji: _cache[14] || (_cache[14] = ($event) => _ctx.$refs.emojiSelectorRef.focusLastEmoji()),
-            onKeydown: _cache[15] || (_cache[15] = vue.withKeys(($event) => emits("close"), ["esc"]))
+            onSkinTone: _cache[10] || (_cache[10] = ($event) => emits("skin-tone", $event)),
+            onFocusTabset: _cache[11] || (_cache[11] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
+            onFocusLastEmoji: _cache[12] || (_cache[12] = ($event) => _ctx.$refs.emojiSelectorRef.focusLastEmoji()),
+            onKeydown: _cache[13] || (_cache[13] = vue.withKeys(($event) => emits("close"), ["esc"]))
           }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
         ])
       ]);