Merge branch 'staging' into rebrand-2025-beta

Author: juliodialpad

packages/dialtone-css/lib/build/less/components/tooltip.less

@@ -74,6 +74,7 @@
   line-height: var(--tooltip-line-height);
   letter-spacing: calc(var(--dt-space-100) * 0.25);
   text-align: center;
+  overflow-wrap: break-word;
   background-color: var(--tooltip-color-background);
   border-radius: var(--tooltip-border-radius);
 

packages/dialtone-icons/project.json

@@ -1,15 +1,11 @@
 {
   "name": "dialtone-icons",
   "targets": {
-    "build": {
+    "pre-build": {
       "executor": "nx:run-commands",
       "options": {
         "cwd": "{projectRoot}",
-        "commands": [
-          "pnpm exec gulp",
-          "nx run-many --target=build --projects=dialtone-icons-vue2,dialtone-icons-vue3 --parallel=2 --output-style=stream"
-        ],
-        "parallel": false
+        "command": "pnpm exec gulp"
       },
       "inputs": [
         "{projectRoot}/src/**/*",
@@ -19,13 +15,28 @@
       "outputs": [
         "{projectRoot}/src/icons",
         "{projectRoot}/src/illustrations",
-        "{projectRoot}/dist",
+        "{projectRoot}/dist"
+      ]
+    },
+    "build": {
+      "dependsOn": ["pre-build"],
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "nx run-many --target=build --projects=dialtone-icons-vue2,dialtone-icons-vue3 --parallel=2 --output-style=stream"
+      },
+      "inputs": [
+        "{projectRoot}/src/**/*",
+        "{projectRoot}/transformSVGtoVue.cjs",
+        "{projectRoot}/gulpfile.cjs"
+      ],
+      "outputs": [
         "{projectRoot}/vue2/dist",
         "{projectRoot}/vue3/dist"
       ]
     },
     "build:android": {
-      "dependsOn": ["dialtone-icons-android:build"],
+      "dependsOn": ["pre-build", "dialtone-icons-android:build"],
       "executor": "nx:run-commands",
       "options": {
         "cwd": "{projectRoot}/android",

packages/dialtone-vue3/common/mixins/keyboard_list_navigation.js

@@ -1,4 +1,5 @@
 import Dom from './dom';
+import { returnFirstEl } from '@/common/utils';
 
 const ERROR_INVALID_LIST_ELEMENT = (
   'listElementKey is required or the referenced ' +
@@ -74,7 +75,7 @@ export default ({
     // this[listElement]() can return a Vue component, in which case we need to target
     // the $el property, or it can simply be an html element.
     _getListElement () {
-      return this[listElementKey]()?.$el || this[listElementKey]();
+      return returnFirstEl(this[listElementKey]()?.$el) || this[listElementKey]();
     },
 
     // Gets the length of all the items in the list, uses the listItemRole param to determine

packages/dialtone-vue3/common/mixins/modal.js

@@ -1,3 +1,5 @@
+import { returnFirstEl } from '@/common/utils';
+
 const focusableAttrs = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])';
 const tabbableAttrs = `${focusableAttrs}:not([tabindex="-1"])`;
 const focusableElementsList = `button,[href],input,select,textarea,details,[tabindex]`;
@@ -36,13 +38,13 @@ export default {
      *  will default to the root node of the vue component
      */
     async focusFirstElement (el = this.$el) {
-      const elToFocus = await this.getFirstFocusableElement(el);
+      const elToFocus = await this.getFirstFocusableElement(returnFirstEl(el));
       elToFocus?.focus({ preventScroll: true });
     },
 
     async focusElementById (elementId) {
       await this.$nextTick();
-      const result = this.$el?.querySelector(elementId);
+      const result = returnFirstEl(this.$el)?.querySelector(elementId);
       if (result) {
         result.focus();
         return;
@@ -83,6 +85,7 @@ export default {
      * @param {bool} includeNegativeTabIndex - will include tabindex="-1" in the list of focusable elements.
      */
     _getFocusableElements (el = this.$el, includeNegativeTabIndex = false) {
+      el = returnFirstEl(el);
       if (!el) return [];
       const focusableContent = [...el.querySelectorAll(focusableElementsList)];
       return focusableContent.filter((fc) => {

packages/dialtone-vue3/common/utils/index.js

@@ -202,6 +202,23 @@ export const extractVueListeners = (attrs) => {
   return Object.fromEntries(listeners);
 };
 
+/**
+ * $el works very differently than in vue 2, if the first node in the template is a text node
+ * such as a comment it will return that instead of the first actual element. This function
+ * will recursively return the first element in the template instead of the first node.
+ * @param el
+ * @returns {HTMLElement} The first element in the template
+ */
+export const returnFirstEl = (el) => {
+  if (el?.nodeType === Node.ELEMENT_NODE) {
+    return el;
+  } else if (!el?.nodeType) {
+    return null;
+  } else {
+    return returnFirstEl(el?.nextSibling);
+  }
+};
+
 /*
 * Set's a global timer to debounce the execution of a function.
 * @param { object } func - the function that is going to be called after timeout
@@ -456,6 +473,7 @@ export default {
   flushPromises,
   kebabCaseToPascalCase,
   extractVueListeners,
+  returnFirstEl,
   debounce,
   isOutOfViewPort,
   getPhoneNumberRegex,

packages/dialtone-vue3/components/datepicker/composables/useCalendar.js

@@ -2,6 +2,7 @@ import { computed, ref, watch, nextTick } from 'vue';
 import { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils.js';
 import { MONTH_FORMAT, WEEK_START } from '@/components/datepicker/datepicker_constants.js';
 import { format, getYear } from 'date-fns';
+import { returnFirstEl } from '@/common/utils';
 
 export function useCalendar (props, emits) {
   const selectedDay = ref(null);
@@ -34,13 +35,13 @@ export function useCalendar (props, emits) {
         event.preventDefault();
         focusDay.value -= 7;
         try {
-          daysRef.value[focusDay.value].el.$el.focus();
+          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();
         } catch (error) {
           const prevFocusDate = calculatePrevFocusDate(daysRef.value[focusDay.value + 7].day.value);
           emits('go-to-prev-month');
 
           nextTick(() => {
-            daysRef.value[prevFocusDate - 1].el.$el.focus();
+            returnFirstEl(daysRef.value[prevFocusDate - 1].el.$el).focus();
             focusDay.value += prevFocusDate - 1;
           });
         }
@@ -50,13 +51,13 @@ export function useCalendar (props, emits) {
         event.preventDefault();
         focusDay.value += 7;
         try {
-          daysRef.value[focusDay.value].el.$el.focus();
+          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();
         } catch (error) {
           const nextFocusDate = calculateNextFocusDate(daysRef.value[focusDay.value - 7].day.value);
           emits('go-to-next-month');
 
           nextTick(() => {
-            daysRef.value[nextFocusDate - 1].el.$el.focus();
+            returnFirstEl(daysRef.value[nextFocusDate - 1].el.$el).focus();
             focusDay.value += nextFocusDate - 1;
           });
         }
@@ -66,7 +67,7 @@ export function useCalendar (props, emits) {
         event.preventDefault();
         if (focusDay.value > 0) {
           focusDay.value -= 1;
-          daysRef.value[focusDay.value].el.$el.focus();
+          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();
         } else {
           // if we are on month first day, jump to last day of prev month
           emits('go-to-prev-month');
@@ -78,7 +79,7 @@ export function useCalendar (props, emits) {
         event.preventDefault();
         if (focusDay.value < daysRef.value.length - 1) {
           focusDay.value += 1;
-          daysRef.value[focusDay.value].el.$el.focus();
+          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();
         } else {
           // if we are on month last day, jump to first day of next month
           emits('go-to-next-month');
@@ -102,14 +103,14 @@ export function useCalendar (props, emits) {
     focusDay.value = 0;
 
     nextTick(() => {
-      daysRef.value[focusDay.value].el.$el.focus();
+      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();
     });
   }
 
   function focusLastDay () {
     nextTick(() => {
       focusDay.value = daysRef.value.length - 1;
-      daysRef.value[focusDay.value].el.$el.focus();
+      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();
     });
   }
 

packages/dialtone-vue3/components/datepicker/composables/useMonthYearPicker.js

@@ -1,6 +1,7 @@
 import { computed, ref, watch } from 'vue';
 import { addMonths, getDate, getMonth, getYear, set, subMonths } from 'date-fns';
 import { formatMonth, getCalendarDays } from '@/components/datepicker/utils.js';
+import { returnFirstEl } from '@/common/utils';
 
 export function useMonthYearPicker (props, emits) {
   const selectMonth = ref(getMonth(props.selectedDate));
@@ -34,7 +35,7 @@ export function useMonthYearPicker (props, emits) {
   }
 
   function focusMonthYearPicker () {
-    focusRefs.value[0].$el.focus();
+    returnFirstEl(focusRefs.value[0].$el).focus();
   }
 
   function handleKeyDown (event) {
@@ -43,21 +44,21 @@ export function useMonthYearPicker (props, emits) {
         event.preventDefault();
         if (focusPicker.value === 0) {
           focusPicker.value = 3;
-          focusRefs.value[focusPicker.value].$el.focus();
+          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();
         } else {
           focusPicker.value--;
-          focusRefs.value[focusPicker.value].$el.focus();
+          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();
         }
         break;
 
       case 'ArrowRight':
         event.preventDefault();
         if (focusPicker.value === 3) {
           focusPicker.value = 0;
-          focusRefs.value[focusPicker.value].$el.focus();
+          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();
         } else {
           focusPicker.value++;
-          focusRefs.value[focusPicker.value].$el.focus();
+          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();
         }
         break;
 

packages/dialtone-vue3/components/datepicker/datepicker.vue

@@ -37,12 +37,12 @@
 </template>
 
 <script setup>
+import { returnFirstEl, warnIfUnmounted } from '@/common/utils';
 import MonthYearPicker from './modules/month-year-picker.vue';
 import Calendar from './modules/calendar.vue';
 import { DtStack } from '@/components/stack';
 
 import { onMounted, ref, getCurrentInstance } from 'vue';
-import { warnIfUnmounted } from '@/common/utils';
 
 defineProps({
   /**
@@ -157,6 +157,6 @@ function updateCalendarDays (days) {
 
 onMounted(() => {
   const instance = getCurrentInstance();
-  warnIfUnmounted(instance.proxy.$el, 'datepicker');
+  warnIfUnmounted(returnFirstEl(instance.proxy.$el), 'datepicker');
 });
 </script>

packages/dialtone-vue3/components/emoji_picker/modules/emoji_tabset.vue

@@ -31,6 +31,7 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
 import { DtTab, DtTabGroup } from '@/components/tab';
+import { returnFirstEl } from '@/common/utils';
 import { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker/emoji_picker_constants.js';
 import {
   DtIconClock,
@@ -148,7 +149,7 @@ function selectTabset (id) {
 function setTabsetRef (ref) {
   // We push the $el, because $el is the button inside the dt-tab component
   // and we need the button to focus it
-  tabsetRef.value.push(ref.$el);
+  tabsetRef.value.push(returnFirstEl(ref.$el));
 }
 
 function focusTabset () {

packages/dialtone-vue3/components/image_viewer/image_viewer.vue

@@ -67,6 +67,7 @@
 
 <script>
 import Modal from '@/common/mixins/modal';
+import { returnFirstEl } from '@/common/utils';
 import { EVENT_KEYNAMES } from '@/common/constants';
 import { DtIconClose } from '@dialpad/dialtone-icons/vue3';
 import { DtButton } from '@/components/button';
@@ -244,7 +245,7 @@ export default {
     },
 
     focusAfterOpen () {
-      this.$refs.closeImage?.$el.focus();
+      returnFirstEl(this.$refs.closeImage?.$el)?.focus();
     },
 
     trapFocus (e) {