design-system-next 2.14.1 → 2.15.0

package/src/assets/styles/tailwind.css

@@ -68,7 +68,7 @@
 
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-overflow-hidden spr-rounded-none spr-border-none spr-bg-transparent spr-shadow-none;
+        @apply spr-overflow-hidden spr-rounded-none spr-border-none spr-bg-transparent spr-shadow-drop;
 
         .slide-fade-enter-active {
           @apply spr-duration-300 spr-ease-out;
@@ -89,7 +89,6 @@
       }
     }
   }
-
   /* #endregion - Sidenav */
 
   /* #region - Tooltips */
@@ -97,7 +96,7 @@
   #tooltip-full-width-wrapper {
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-background-color-inverted spr-text-color-inverted-strong spr-body-xs-regular spr-break-all spr-rounded-border-radius-md spr-px-2 spr-py-1.5 spr-font-main spr-opacity-100;
+        @apply spr-background-color-inverted spr-text-color-inverted-strong spr-body-xs-regular spr-break-all spr-rounded-border-radius-md spr-px-2 spr-py-1.5 spr-font-main spr-opacity-100 spr-shadow-drop;
       }
 
       .v-popper__arrow-outer {
@@ -109,7 +108,7 @@
   #tooltip-wrapper {
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-max-w-full;
+        @apply spr-max-w-full spr-shadow-drop;
       }
     }
   }
@@ -117,7 +116,7 @@
   #tooltip-full-width-wrapper {
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-max-w-[280px];
+        @apply spr-max-w-[280px] spr-shadow-drop;
       }
     }
   }
@@ -129,7 +128,7 @@
 
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-border-color-weak spr-w-full spr-rounded-xl spr-border spr-border-solid spr-font-main spr-shadow-none;
+        @apply spr-border-color-weak spr-w-full spr-rounded-xl spr-border spr-border-solid spr-font-main spr-shadow-drop;
 
         &::-webkit-scrollbar-track {
           @apply spr-rounded-br-xl spr-rounded-tr-xl;
@@ -141,18 +140,6 @@
       }
     }
   }
-
-  #contact-number-country-dropdown {
-    #dropdown-wrapper[data-popper-placement='top-start'] {
-      margin-top: -4px;
-      margin-left: -8px;
-    }
-
-    #dropdown-wrapper[data-popper-placement='bottom-start'] {
-      margin-top: 4px;
-      margin-left: -8px;
-    }
-  }
   /* #endregion - Dropdown */
 
   /* #region - Select */
@@ -198,7 +185,7 @@
     }
     tbody::-webkit-scrollbar {
       @apply spr-h-0 spr-w-0; /* Hides the scrollbar in WebKit browsers */
-    }    
+    }
 
     .empty-table-dropzone-dragged-class {
       @apply spr-hidden;

package/src/components/date-picker/date-picker.ts

@@ -27,7 +27,6 @@ export const datePickerPropTypes = {
   id: {
     type: String,
     required: true,
-    default: 'date-picker',
   },
   modelValue: {
     type: String,

package/src/components/date-picker/date-picker.vue

@@ -266,7 +266,7 @@
     </Menu>
     <div v-if="props.displayHelper" :class="datePickerClasses.datePickerInputHelperClasses">
       <slot name="helperMessage">
-        <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
+        <Icon v-if="props.helperIcon" class="spr-h-5 spr-min-h-5 spr-w-5 spr-min-w-5" :icon="props.helperIcon" />
         <span>{{ props.helperText }}</span>
       </slot>
     </div>
@@ -330,7 +330,7 @@ const {
   handleTabClick,
   handleBackspace,
   clearDate,
-  handleSlotClick
+  handleSlotClick,
 } = useDatePicker(props, emit);
 
 defineExpose({

package/src/components/date-picker/date-range-picker/date-range-picker.vue

@@ -1,42 +1,49 @@
 <template>
   <div>
     <Menu
-       v-model:shown="datePopperState"
-       aria-id="date-range-picker-wrapper"
-       distance="4"
-       :placement="finalPlacement"
-       :triggers="[]"
-       :popper-hide-triggers="[]"
-       :auto-hide="false"
-       :disabled="isDateRangePickerPopperDisabled"
-       :container="`#${props.id}`"
-       :reference="activeInputRef"
-       :strategy="
-         props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
-       "
-       :delay="0"
-       :auto-placement="!isUsingCustomSlot"
-       :style="{
-         width: props.width,
-       }"
-     >
+      v-model:shown="datePopperState"
+      aria-id="date-range-picker-wrapper"
+      distance="4"
+      :placement="finalPlacement"
+      :triggers="[]"
+      :popper-hide-triggers="[]"
+      :auto-hide="false"
+      :disabled="isDateRangePickerPopperDisabled"
+      :container="`#${props.id}`"
+      :reference="activeInputRef"
+      :strategy="
+        props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
+      "
+      :delay="0"
+      :auto-placement="!isUsingCustomSlot"
+      :style="{
+        width: props.width,
+      }"
+    >
       <div :id="props.id" class="spr-grid spr-gap-size-spacing-4xs">
         <label v-if="props.label" :for="props.id" :class="dateRangePickerClasses.labelClasses">
           {{ props.label }}
         </label>
-        
+
         <!-- Date Range Input Container -->
-        <div class="spr-flex spr-items-center spr-gap-2 spr-w-full">
+        <div class="spr-flex spr-w-full spr-items-center spr-gap-2">
           <slot :handle-click="handleCustomComponentClick">
             <!-- fallback: original input fields -->
             <!-- Start Date Input -->
-            <div ref="startDateContainerRef" :class="['spr-flex-1', dateRangePickerClasses.dateRangePickerBaseInputClasses]" @click.stop="handleStartDateClick" >
+            <div
+              ref="startDateContainerRef"
+              :class="['spr-flex-1', dateRangePickerClasses.dateRangePickerBaseInputClasses]"
+              @click.stop="handleStartDateClick"
+            >
               <div class="spr-flex spr-h-full spr-items-center spr-gap-1.5">
                 <input
                   :id="`${props.id}-start-month`"
                   ref="startMonthInputRef"
                   v-model="startMonthInput"
-                  :class="['spr-w-[38px] spr-min-w-[38px] spr-uppercase', dateRangePickerClasses.dateRangePickerInputClasses]"
+                  :class="[
+                    'spr-w-[38px] spr-min-w-[38px] spr-uppercase',
+                    dateRangePickerClasses.dateRangePickerInputClasses,
+                  ]"
                   type="text"
                   placeholder="MMM"
                   maxlength="3"
@@ -51,7 +58,10 @@
                   :id="`${props.id}-start-date`"
                   ref="startDateInputRef"
                   v-model="startDateInput"
-                  :class="['spr-w-[24px] spr-min-w-[24px] spr-text-center', dateRangePickerClasses.dateRangePickerInputClasses]"
+                  :class="[
+                    'spr-w-[24px] spr-min-w-[24px] spr-text-center',
+                    dateRangePickerClasses.dateRangePickerInputClasses,
+                  ]"
                   type="text"
                   placeholder="DD"
                   maxlength="2"
@@ -84,13 +94,20 @@
             <!-- Separator -->
             <span class="spr-text-color-strong spr-font-size-200 spr-text-color-weak">{{ props.separator }}</span>
             <!-- End Date Input -->
-            <div ref="endDateContainerRef" :class="['spr-flex-1', dateRangePickerClasses.dateRangePickerBaseInputClasses]" @click.stop="handleEndDateClick">
+            <div
+              ref="endDateContainerRef"
+              :class="['spr-flex-1', dateRangePickerClasses.dateRangePickerBaseInputClasses]"
+              @click.stop="handleEndDateClick"
+            >
               <div class="spr-flex spr-h-full spr-items-center spr-gap-1.5">
                 <input
                   :id="`${props.id}-end-month`"
                   ref="endMonthInputRef"
                   v-model="endMonthInput"
-                  :class="['spr-w-[38px] spr-min-w-[38px] spr-uppercase', dateRangePickerClasses.dateRangePickerInputClasses]"
+                  :class="[
+                    'spr-w-[38px] spr-min-w-[38px] spr-uppercase',
+                    dateRangePickerClasses.dateRangePickerInputClasses,
+                  ]"
                   type="text"
                   placeholder="MMM"
                   maxlength="3"
@@ -105,7 +122,10 @@
                   :id="`${props.id}-end-date`"
                   ref="endDateInputRef"
                   v-model="endDateInput"
-                  :class="['spr-w-[24px] spr-min-w-[24px] spr-text-center', dateRangePickerClasses.dateRangePickerInputClasses]"
+                  :class="[
+                    'spr-w-[24px] spr-min-w-[24px] spr-text-center',
+                    dateRangePickerClasses.dateRangePickerInputClasses,
+                  ]"
                   type="text"
                   placeholder="DD"
                   maxlength="2"
@@ -244,11 +264,11 @@
                       'spr-text-color-disabled': calendarTabIsInactiveMonthDates(day),
 
                       // Selected Date (Start or End) - Use brand color scheme from date picker
-                      'spr-background-color-brand-base active:spr-background-color-brand-pressed spr-text-color-inverted-strong !spr-text-white-50 active:spr-scale-95 spr-font-medium':
+                      'spr-background-color-brand-base active:spr-background-color-brand-pressed spr-text-color-inverted-strong spr-font-medium !spr-text-white-50 active:spr-scale-95':
                         calendarTabIsSelectedDate(day),
 
                       // In Range (between start and end) - Light green background with brand outline, no border, using spr- prefix
-                      'spr-bg-green-100 spr-cursor-pointer spr-outline spr-outline-1 spr-outline-offset-[-0.5px] spr-outline-kangkong-700':
+                      'spr-cursor-pointer spr-bg-green-100 spr-outline spr-outline-1 spr-outline-offset-[-0.5px] spr-outline-kangkong-700':
                         calendarTabIsInRange(day),
 
                       // Unselected Date - Gray border, no hover effects
@@ -264,7 +284,7 @@
                   <span>{{ day.date.date() }}</span>
                   <div
                     v-if="calendarTabIsTodayIndicator(day)"
-                    class="spr-bg-green-600 spr-absolute spr-bottom-1 spr-m-auto spr-h-1 spr-w-1 spr-rounded-full"
+                    class="spr-absolute spr-bottom-1 spr-m-auto spr-h-1 spr-w-1 spr-rounded-full spr-bg-green-600"
                   ></div>
                 </div>
                 <div v-else></div>
@@ -281,9 +301,11 @@
                   {
                     'spr-text-color-brand-base': month.monthValue === currentDate.month(),
                     'spr-border-color-weak hover:spr-background-color-hover active:spr-background-color-pressed':
-                      month.text.toLowerCase() !== startMonthInput.toLowerCase() && month.text.toLowerCase() !== endMonthInput.toLowerCase(),
+                      month.text.toLowerCase() !== startMonthInput.toLowerCase() &&
+                      month.text.toLowerCase() !== endMonthInput.toLowerCase(),
                     'spr-border-color-brand-base spr-background-color-single-active':
-                      month.text.toLowerCase() === startMonthInput.toLowerCase() || month.text.toLowerCase() === endMonthInput.toLowerCase(),
+                      month.text.toLowerCase() === startMonthInput.toLowerCase() ||
+                      month.text.toLowerCase() === endMonthInput.toLowerCase(),
                   },
                 ]"
                 @click="monthTabHandleSelectedMonth(month)"
@@ -308,7 +330,8 @@
                     'spr-text-color-brand-base': year === currentDate.year(),
                     'spr-border-color-weak hover:spr-background-color-hover active:spr-background-color-pressed':
                       year !== Number(startYearInput) && year !== Number(endYearInput),
-                    'spr-border-color-brand-base spr-background-color-single-active': year === Number(startYearInput) || year === Number(endYearInput),
+                    'spr-border-color-brand-base spr-background-color-single-active':
+                      year === Number(startYearInput) || year === Number(endYearInput),
                   },
                 ]"
                 @click="yearTabHandleSelectedYear(String(year))"
@@ -324,10 +347,10 @@
         </div>
       </template>
     </Menu>
-    
+
     <div v-if="props.displayHelper" :class="dateRangePickerClasses.dateRangePickerInputHelperClasses">
       <slot name="helperMessage">
-        <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
+        <Icon v-if="props.helperIcon" class="spr-h-5 spr-min-h-5 spr-w-5 spr-min-w-5" :icon="props.helperIcon" />
         <span>{{ props.helperText }}</span>
       </slot>
     </div>
@@ -409,4 +432,4 @@ const {
   handleEndDateClick,
   handleCustomComponentClick,
 } = useDateRangePicker(props, emit);
-</script> 
+</script>

package/src/components/dropdown/dropdown.ts

@@ -42,6 +42,10 @@ export const dropdownPropTypes = {
     required: true,
     default: [],
   },
+  searchableMenu: {
+    type: Boolean,
+    default: false,
+  },
   textField: {
     type: String,
     default: 'text',
@@ -65,6 +69,10 @@ export const dropdownPropTypes = {
     validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
     default: 'bottom',
   },
+  distance: {
+    type: Number,
+    default: 6,
+  },
   groupItemsBy: {
     type: String as PropType<(typeof GROUPED_ITEMS_BY_TYPES)[number]>,
     validator: (value: (typeof GROUPED_ITEMS_BY_TYPES)[number] | undefined) => {
@@ -112,7 +120,6 @@ export const dropdownPropTypes = {
     type: Boolean,
     default: false,
   },
-  // Enable lozenge style for dropdown items
   lozenge: {
     type: Boolean,
     default: false,

package/src/components/dropdown/dropdown.vue

@@ -2,7 +2,7 @@
   <Menu
     v-model:shown="dropdownPopperState"
     aria-id="dropdown-wrapper"
-    distance="4"
+    :distance="props.distance"
     :placement="props.placement"
     :triggers="props.triggers"
     :popper-triggers="props.popperTriggers"
@@ -45,6 +45,7 @@
             v-if="!props.ladderized || isLadderizedSearch"
             v-model="selectedListItems"
             :menu-list="dropdownMenuList"
+            :searchable-menu="props.searchableMenu"
             :group-items-by="props.groupItemsBy"
             :multi-select="props.multiSelect"
             :pre-selected-items="dropdownValue"
@@ -59,6 +60,7 @@
             :ladderized="props.ladderized"
             :dropdown="props.dropdown"
             :menu-list="dropdownMenuList"
+            :searchable-menu="props.searchableMenu"
             :remove-current-level-in-back-label="removeCurrentLevelInBackLabel"
             @update:model-value="handleSelectedLadderizedItem"
           />

package/src/components/input/input-contact-number/input-contact-number.ts

@@ -23,9 +23,13 @@ export const COUNTRY_OPTIONS: CountryOption[] = getCountries().map((countryCode)
 });
 
 export const inputContactNumberPropTypes = {
+  id: {
+    type: String,
+    default: '',
+  },
   modelValue: {
     type: String,
-    required: true,
+    default: '',
   },
   placeholder: {
     type: String,
@@ -69,13 +73,7 @@ export const inputContactNumberEmitTypes = {
 
 export interface InputContactNumberEmit {
   (event: 'update:modelValue', value: string): void;
-  (
-    event: 'getSelectedCountryCallingCode',
-    value: {
-      countryCode: string[];
-      countryCallingCode: string[];
-    },
-  ): void;
+  (event: 'getSelectedCountryCallingCode', value: { countryCode: string; countryCallingCode: string }): void;
   (event: 'getContactNumberErrors', value: Array<{ title: string; message: string }>): void;
 }
 

package/src/components/input/input-contact-number/input-contact-number.vue

@@ -12,9 +12,9 @@
   >
     <template #prefix>
       <spr-dropdown
-        id="contact-number-country-dropdown"
+        :id="dropdownId"
         v-model="selectedCountry.countryCode"
-        class="[&>#dropdown-wrapper]:spr-my-1"
+        :class="inputContactNumberClasses.dropdownBaseClasses"
         :menu-list="COUNTRY_OPTIONS"
         placement="bottom-start"
         :width="!props.disabledCountryCallingCode ? '45px' : '35px'"
@@ -23,10 +23,10 @@
         @update:model-value="handleSelectedCountryCode"
         @get-popper-state="handlePopperState"
       >
-        <span :class="inputContactNumberClasses.countryCallingCodeClasses">
-          +{{ selectedCountry.countryCallingCode[0] }}
+        <div :class="inputContactNumberClasses.dropdownWrappertClasses">
+          <span>+{{ selectedCountry.countryCallingCode }}</span>
           <icon v-if="!props.disabledCountryCallingCode" icon="ph:caret-down" width="16px" height="16px" />
-        </span>
+        </div>
       </spr-dropdown>
     </template>
   </spr-input>
@@ -48,6 +48,7 @@ const emit = defineEmits(inputContactNumberEmitTypes);
 
 const {
   inputContactNumberClasses,
+  dropdownId,
   formattedValue,
   selectedCountry,
   popperState,

package/src/components/input/input-contact-number/use-input-contact-number.ts

@@ -8,17 +8,26 @@ import parsePhoneNumber, { getCountries, getCountryCallingCode, CountryCode } fr
 import { type InputContactNumberEmitTypes, type InputContactNumberPropTypes } from './input-contact-number';
 
 interface InputContactNumberClasses {
-  countryCallingCodeClasses: string;
+  dropdownBaseClasses: string;
+  dropdownWrappertClasses: string;
 }
 
 export const useInputContactNumber = (
   props: InputContactNumberPropTypes,
   emit: SetupContext<InputContactNumberEmitTypes>['emit'],
 ) => {
-  const { preSelectedCountryCode, disabledCountryCallingCode, disabled } = toRefs(props);
+  const { id, preSelectedCountryCode, disabledCountryCallingCode, disabled } = toRefs(props);
 
   const inputContactNumberClasses: ComputedRef<InputContactNumberClasses> = computed(() => {
-    const countryCallingCodeClasses = classNames(
+    const dropdownBaseClasses = classNames(
+      '[&_#dropdown-wrapper]:spr-my-1',
+      '[&_#dropdown-wrapper[data-popper-placement="bottom-start"]]:spr-ml-[-10px]',
+      '[&_#dropdown-wrapper[data-popper-placement="bottom-start"]]:spr-mt-[6px]',
+      '[&_#dropdown-wrapper[data-popper-placement="top-start"]]:spr-ml-[-10px]',
+      '[&_#dropdown-wrapper[data-popper-placement="top-start"]]:spr-mt-[-6px]',
+    );
+
+    const dropdownWrappertClasses = classNames(
       'spr-font-weight-regular spr-font-size-200 spr-line-height-500 spr-letter-spacing-none spr-font-main',
       'spr-flex spr-items-center spr-gap-size-spacing-5xs',
       {
@@ -29,20 +38,25 @@ export const useInputContactNumber = (
     );
 
     return {
-      countryCallingCodeClasses,
+      dropdownBaseClasses,
+      dropdownWrappertClasses,
     };
   });
 
+  // fallback random id if user does not provide one (stable per component instance)
+  const fallbackId = ref(`currency-${Math.random().toString(36).slice(2, 8)}-dropdown`);
+  const dropdownId = computed(() => (id.value ? `${id.value}-dropdown` : fallbackId.value));
+
   const formattedValue = useVModel(props, 'modelValue', emit);
 
   const selectedCountry = ref({
-    countryCode: ['PH'],
-    countryCallingCode: ['63'],
+    countryCode: 'PH',
+    countryCallingCode: '63',
   });
 
   const popperState = ref(false);
 
-  const setselectedCountry = (selectedCountryCode: string) => {
+  const setSelectedCountry = (selectedCountryCode: string) => {
     const countryCallingCode = getCountryCallingCode(selectedCountryCode as CountryCode);
 
     const countryCode = getCountries().find((country) => {
@@ -51,8 +65,8 @@ export const useInputContactNumber = (
 
     if (countryCode && countryCallingCode) {
       selectedCountry.value = {
-        countryCode: [countryCode],
-        countryCallingCode: [countryCallingCode],
+        countryCode: countryCode,
+        countryCallingCode: countryCallingCode,
       };
 
       formatContactNumber();
@@ -81,10 +95,10 @@ export const useInputContactNumber = (
     }
   };
 
-  const handleSelectedCountryCode = (countryCode: string[]) => {
+  const handleSelectedCountryCode = (countryCode: string) => {
     selectedCountry.value = {
-      countryCode: [countryCode[0]],
-      countryCallingCode: [getCountryCallingCode(countryCode[0] as CountryCode)],
+      countryCode: countryCode,
+      countryCallingCode: getCountryCallingCode(countryCode as CountryCode),
     };
 
     emit('getContactNumberErrors', []);
@@ -92,27 +106,46 @@ export const useInputContactNumber = (
     formatContactNumber();
 
     emit('getSelectedCountryCallingCode', {
-      countryCode: selectedCountry.value.countryCode[0],
-      countryCallingCode: selectedCountry.value.countryCallingCode[0],
+      countryCode: selectedCountry.value.countryCode,
+      countryCallingCode: selectedCountry.value.countryCallingCode,
     });
   };
 
   const formatContactNumber = () => {
-    if (!formattedValue.value) return;
-
-    const normalizedNumber = formattedValue.value.replace(/\D/g, '');
+    if (!formattedValue.value) {
+      emit('getContactNumberErrors', []);
+      return;
+    }
 
-    const phoneNumber = parsePhoneNumber(normalizedNumber, {
-      defaultCountry: selectedCountry.value.countryCode[0] as CountryCode,
-      extract: false,
-    });
+    const original = formattedValue.value.trim();
+    const hasPlus = original.startsWith('+');
+    const normalizedNumber = hasPlus ? `+${original.replace(/[^0-9]/g, '')}` : original.replace(/\D/g, '');
+
+    let phoneNumber;
+
+    try {
+      phoneNumber = hasPlus
+        ? parsePhoneNumber(normalizedNumber)
+        : parsePhoneNumber(normalizedNumber, {
+            defaultCountry: selectedCountry.value.countryCode as CountryCode,
+            extract: false,
+          });
+    } catch {
+      phoneNumber = undefined;
+    }
 
     if (phoneNumber && phoneNumber.isValid()) {
       let formattedNumber = phoneNumber.formatInternational();
 
-      formattedNumber = formattedNumber.replace(`+${selectedCountry.value.countryCallingCode[0]} `, '');
+      const prefix = `+${selectedCountry.value.countryCallingCode} `;
+
+      if (formattedNumber.startsWith(prefix)) {
+        formattedNumber = formattedNumber.slice(prefix.length);
+      }
 
       formattedValue.value = formattedNumber;
+
+      emit('getContactNumberErrors', []);
     } else {
       emit('getContactNumberErrors', [
         {
@@ -133,23 +166,24 @@ export const useInputContactNumber = (
 
   watch(preSelectedCountryCode, (newValue) => {
     if (newValue) {
-      setselectedCountry(newValue);
+      setSelectedCountry(newValue);
     }
   });
 
   onMounted(() => {
     emit('getSelectedCountryCallingCode', {
-      countryCode: selectedCountry.value.countryCode[0],
-      countryCallingCode: selectedCountry.value.countryCallingCode[0],
+      countryCode: selectedCountry.value.countryCode,
+      countryCallingCode: selectedCountry.value.countryCallingCode,
     });
 
     if (preSelectedCountryCode.value) {
-      setselectedCountry(preSelectedCountryCode.value);
+      setSelectedCountry(preSelectedCountryCode.value);
     }
   });
 
   return {
     inputContactNumberClasses,
+    dropdownId,
     formattedValue,
     selectedCountry,
     popperState,
@@ -158,5 +192,6 @@ export const useInputContactNumber = (
     formatContactNumber,
     handleUpdateModelValue,
     handlePopperState,
+    setSelectedCountry,
   };
 };