design-system-next 2.23.1 → 2.26.0

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

@@ -1,5 +1,5 @@
 import { ref, toRefs, computed, ComputedRef, SetupContext, onMounted, watch, nextTick } from 'vue';
-import { useVModel, onClickOutside, useDebounceFn } from '@vueuse/core';
+import { useVModel, onClickOutside } from '@vueuse/core';
 
 import dayjs from 'dayjs';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
@@ -143,8 +143,6 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
   const dateInput = ref<string>('');
   const yearInput = ref<string>('');
 
-  const datePickerErrors = ref<{ title: string; message: string }[]>([]);
-
   // #region - Calendar Tab
   const calendarTabPageData = ref({
     selectedMonth: dayjs().month(),
@@ -295,12 +293,18 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     }
 
     // Check if date and month are selected, but not year
-    if (dateInput.value && monthInput && !yearInput.value && !calendarTabIsDateIsDisabled(day)) {
+    if (dateInput.value && monthInput.value && !yearInput.value && !calendarTabIsDateIsDisabled(day)) {
       return day.date.getDate() === Number(dateInput.value) && day.date.getMonth() === monthValue && !day.inactive;
     }
 
     // Check if date, month, and year are selected
-    if (dateInput.value && monthInput.value && yearInput.value && !calendarTabIsDateIsDisabled(day)) {
+    if (
+      dateInput.value &&
+      monthInput.value &&
+      yearInput.value &&
+      monthValue !== undefined &&
+      !calendarTabIsDateIsDisabled(day)
+    ) {
       return (
         day.date.getDate() === Number(dateInput.value) &&
         day.date.getMonth() === monthValue &&
@@ -471,10 +475,6 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     emitDateFormats();
     emitInputValue();
 
-    datePickerErrors.value = [];
-
-    emit('getDateErrors', datePickerErrors.value);
-
     setTimeout(() => {
       datePopperState.value = false;
     }, 100);
@@ -494,11 +494,7 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     handleConvertMonthIfValid();
     calendarTabUpdateCalendar();
     emitDateFormats();
-    emitPartialInputValue();
-
-    datePickerErrors.value = [];
-
-    emit('getDateErrors', datePickerErrors.value);
+    emitInputValue();
   };
   // #endregion - Month Tab
 
@@ -564,11 +560,7 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     handleConvertMonthIfValid();
     calendarTabUpdateCalendar();
     emitDateFormats();
-    emitPartialInputValue();
-
-    datePickerErrors.value = [];
-
-    emit('getDateErrors', datePickerErrors.value);
+    emitInputValue();
   };
   // #endregion - Year Tab
 
@@ -640,8 +632,6 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
         const date = formattedDate.format('DD');
         const year = formattedDate.format('YYYY');
 
-        handleValidateDate();
-
         monthInput.value = month;
         dateInput.value = date;
         yearInput.value = year;
@@ -655,13 +645,7 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
         handleConvertMonthIfValid();
         calendarTabUpdateCalendar();
         emitDateFormats();
-
-        // Use the specified format for the input value
-        if (!monthInput.value && !dateInput.value && !yearInput.value) {
-          emit('getInputValue', null);
-        } else {
-          emit('getInputValue', formattedDate.format(format.value));
-        }
+        emitInputValue();
       } else {
         console.error(`Error: Could not parse date "${modelValue.value}" with format "${format.value}"`);
       }
@@ -686,48 +670,71 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
   };
 
   const handleMonthInput = () => {
-    datePopperState.value = false;
-
     monthInput.value = monthInput.value.replace(/[^A-Za-z0-9\s]/g, '').toLocaleUpperCase();
 
-    datePickerErrors.value = [];
-
-    emit('getDateErrors', datePickerErrors.value);
-
     handleConvertMonthIfValid();
 
-    handleValidateDate();
+    // Update calendar if month, date, and year are all provided
+    if (monthInput.value && dateInput.value && yearInput.value) {
+      const monthValue = getMonthObject('text', monthInput.value)?.monthValue;
+      const yearNumber = Number(yearInput.value);
+
+      if (monthValue !== undefined && yearNumber >= minMaxYear.value.min && yearNumber <= minMaxYear.value.max) {
+        calendarTabPageData.value.selectedMonth = monthValue;
+        calendarTabPageData.value.selectedYear = yearNumber;
+        calendarTabUpdateCalendar();
+      }
+    } else if (!monthInput.value && !dateInput.value && !yearInput.value) {
+      // Clear modelValue when all inputs are empty
+      modelValue.value = '';
+    }
 
     // Emit the partial date value as user types
-    emitPartialInputValue();
+    emitInputValue();
   };
 
   const handleDateInput = () => {
-    datePopperState.value = false;
-
     dateInput.value = dateInput.value.replace(/[^0-9]/g, '');
 
-    datePickerErrors.value = [];
-
-    emit('getDateErrors', datePickerErrors.value);
+    // Update calendar if month, date, and year are all provided
+    if (monthInput.value && dateInput.value && yearInput.value) {
+      const monthValue = getMonthObject('text', monthInput.value)?.monthValue;
+      const yearNumber = Number(yearInput.value);
 
-    handleValidateDate();
+      if (monthValue !== undefined && yearNumber >= minMaxYear.value.min && yearNumber <= minMaxYear.value.max) {
+        calendarTabPageData.value.selectedMonth = monthValue;
+        calendarTabPageData.value.selectedYear = yearNumber;
+        calendarTabUpdateCalendar();
+      }
+    } else if (!monthInput.value && !dateInput.value && !yearInput.value) {
+      // Clear modelValue when all inputs are empty
+      modelValue.value = '';
+    }
 
     // Emit the partial date value as user types
-    emitPartialInputValue();
+    emitInputValue();
   };
 
   const handleYearInput = () => {
-    datePopperState.value = false;
-
     yearInput.value = yearInput.value.replace(/[^0-9]/g, '');
 
-    datePickerErrors.value = [];
+    // Update calendar if month, date, and year are all provided
+    if (monthInput.value && dateInput.value && yearInput.value) {
+      const monthValue = getMonthObject('text', monthInput.value)?.monthValue;
+      const yearNumber = Number(yearInput.value);
 
-    emit('getDateErrors', datePickerErrors.value);
+      if (monthValue !== undefined && yearNumber >= minMaxYear.value.min && yearNumber <= minMaxYear.value.max) {
+        calendarTabPageData.value.selectedMonth = monthValue;
+        calendarTabPageData.value.selectedYear = yearNumber;
+        calendarTabUpdateCalendar();
+      }
+    } else if (!monthInput.value && !dateInput.value && !yearInput.value) {
+      // Clear modelValue when all inputs are empty
+      modelValue.value = '';
+    }
 
     // Emit the partial date value as user types
-    emitPartialInputValue();
+    emitInputValue();
   };
 
   const handleConvertMonthIfValid = () => {
@@ -755,51 +762,6 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     }
   };
 
-  const handleValidateDate = useDebounceFn(() => {
-    if (monthInput.value && dateInput.value && yearInput.value) {
-      const selectedDate = `${monthInput.value}-${dateInput.value}-${yearInput.value}`;
-
-      const isDateValid = dayjs(selectedDate, 'MM-DD-YYYY').isValid();
-      const isYearValid =
-        Number(yearInput.value) >= minMaxYear.value.min && Number(yearInput.value) <= minMaxYear.value.max;
-
-      if (isDateValid && isYearValid) {
-        datePickerErrors.value = datePickerErrors.value.filter((error) => error.title !== 'Invalid Date');
-
-        const monthValue = getMonthObject('text', monthInput.value)?.monthValue;
-
-        calendarTabPageData.value.selectedMonth = Number(monthValue);
-        calendarTabPageData.value.selectedYear = Number(yearInput.value);
-
-        calendarTabUpdateCalendar();
-        emitDateFormats();
-      } else {
-        const errorExists = datePickerErrors.value.some((error) => error.title === 'Invalid Date');
-
-        if (!errorExists) {
-          let errorMessage;
-
-          if (!isYearValid) {
-            errorMessage = `Year must be between ${minMaxYear.value.min} and ${minMaxYear.value.max}.`;
-          } else {
-            errorMessage = `Invalid Date Format. Please use ${format.value}`;
-          }
-
-          datePickerErrors.value.push({
-            title: 'Invalid Date',
-            message: errorMessage,
-          });
-
-          datePopperState.value = false;
-
-          emit('getDateErrors', datePickerErrors.value);
-
-          console.error(`Invalid Date: "${selectedDate}". ${errorMessage}`);
-        }
-      }
-    }
-  }, 500);
-
   const handleTabClick = (tab: string) => {
     if (currentTab.value === tab) {
       currentTab.value = 'tab-calendar';
@@ -824,34 +786,28 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     }
   };
 
-  const emitPartialInputValue = () => {
-    // Convert month to numeric format if it's text
-    let emittedMonth = monthInput.value;
-
-    if (monthInput.value) {
-      const isNumeric = !isNaN(Number(monthInput.value)) && !isNaN(parseFloat(monthInput.value));
-
-      if (!isNumeric) {
-        const monthIsValid = monthsList.value.find(
-          (_month: MonthsList) => _month.text.toLowerCase() === monthInput.value.toLowerCase(),
-        );
+  const emitInputValue = () => {
+    if (monthInput.value || dateInput.value || yearInput.value) {
+      emit('getInputValue', `${monthInput.value}-${dateInput.value}-${yearInput.value}`);
+    } else {
+      emit('getInputValue', null);
 
-        if (monthIsValid) {
-          emittedMonth =
-            monthIsValid.monthValue < 10 ? `0${monthIsValid.monthValue + 1}` : `${monthIsValid.monthValue + 1}`;
-        }
-      }
+      modelValue.value = '';
     }
 
-    // Build the partial date string with zeros for empty fields
-    const partialMonth = emittedMonth || '0';
-    const partialDate = dateInput.value || '0';
-    const partialYear = yearInput.value || '0';
+    if (monthInput.value && dateInput.value && yearInput.value) {
+      const monthIsValid = monthsList.value.find(
+        (_month: MonthsList) => _month.text.toLowerCase() === monthInput.value.toLowerCase(),
+      );
 
-    const partialDateString = `${partialMonth}-${partialDate}-${partialYear}`;
+      const yearIsValid = yearTabPageData.value.yearsArray.find((_year) => _year === Number(yearInput.value));
 
-    // Emit the partial date string
-    emit('getInputValue', partialDateString);
+      if (monthIsValid && yearIsValid) {
+        const _date = dayjs(`${monthInput.value}-${dateInput.value}-${yearInput.value}`, 'MM-DD-YYYY');
+
+        modelValue.value = _date.format(format.value);
+      }
+    }
   };
 
   const emitDateFormats = () => {
@@ -904,28 +860,6 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     }
   };
 
-  const emitInputValue = () => {
-    let emittedMonth = monthInput.value;
-
-    const isNumeric = !isNaN(Number(monthInput.value)) && !isNaN(parseFloat(monthInput.value));
-
-    if (!isNumeric) {
-      const monthIsValid = monthsList.value.find(
-        (_month: MonthsList) => _month.text.toLowerCase() === monthInput.value.toLowerCase(),
-      );
-
-      if (monthIsValid) {
-        emittedMonth =
-          monthIsValid.monthValue < 10 ? `0${monthIsValid.monthValue + 1}` : `${monthIsValid.monthValue + 1}`;
-      }
-    }
-    // Format the date according to the format prop
-    const dateObj = dayjs(`${emittedMonth}-${dateInput.value}-${yearInput.value}`, 'MM-DD-YYYY');
-
-    // Use the specified format for the input value
-    emit('getInputValue', (modelValue.value = dateObj.format(format.value)));
-  };
-
   const emitMonthList = () => {
     emit('getMonthList', monthsList.value);
   };
@@ -939,6 +873,9 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     monthInput.value = '';
     dateInput.value = '';
     yearInput.value = '';
+    modelValue.value = '';
+
+    emitInputValue();
   };
 
   const handleSlotClick = () => {
@@ -972,14 +909,19 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     }
   });
 
-  watch(minMaxYear, () => {
-    yearTabPageData.value.yearsArray = Array.from(
-      { length: minMaxYear.value.max - minMaxYear.value.min + 1 },
-      (_, index) => minMaxYear.value.min + index,
-    ).filter((year) => year <= minMaxYear.value.max && year >= minMaxYear.value.min);
-
-    yearTabPageData.value.currentPage = 0;
-  });
+  watch(
+    minMaxYear,
+    () => {
+      yearTabPageData.value.yearsArray = Array.from(
+        { length: minMaxYear.value.max - minMaxYear.value.min + 1 },
+        (_, index) => minMaxYear.value.min + index,
+      ).filter((year) => year <= minMaxYear.value.max && year >= minMaxYear.value.min);
+
+      yearTabPageData.value.currentPage = 0;
+      emitYearList();
+    },
+    { deep: true },
+  );
 
   onClickOutside(datePickerRef, () => {
     datePopperState.value = false;
@@ -1014,7 +956,6 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     dateInput,
     monthInput,
     yearInput,
-    datePickerErrors,
     calendarTabPageData,
     calendarTabIsMinMonth,
     calendarTabIsMaxMonth,

package/src/components/dropdown/dropdown.ts

@@ -141,13 +141,17 @@ export const dropdownPropTypes = {
     type: Boolean,
     default: false,
   },
+  noPadding: {
+    type: Boolean,
+    default: false,
+  }
 };
 
 export const dropdownEmitTypes = {
-  'infinite-scroll-trigger': Boolean,
+  'infinite-scroll-trigger': (value: boolean) => typeof value === 'boolean',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true, // Accept any type of value
-  'popper-state': Boolean,
+  'popper-state': (state: boolean) => typeof state === 'boolean',
 };
 
 export type DropdownPropTypes = ExtractPropTypes<typeof dropdownPropTypes>;

package/src/components/dropdown/dropdown.vue

@@ -32,7 +32,7 @@
     <template #popper>
       <template v-if="$slots.popper">
         <div
-          class="spr-overflow-y-auto spr-overflow-x-hidden spr-p-4"
+          :class="['spr-overflow-y-auto spr-overflow-x-hidden', !props.noPadding && 'spr-p-4']"
           :style="{
             width: props.popperInnerWidth,
           }"
@@ -111,5 +111,12 @@ const {
   dropdownValue,
   removeCurrentLevelInBackLabel,
   isLadderizedSearch,
+  showDropdown,
+  hideDropdown,
 } = useDropdown(props, emit);
+
+defineExpose({
+  showDropdown,
+  hideDropdown,
+});
 </script>

package/src/components/dropdown/use-dropdown.ts

@@ -82,6 +82,17 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
   const dropdownPopperState = ref<boolean>(false);
   const isDropdownPopperDisabled = computed(() => disabled.value);
 
+  // Exposed methods to show/hide dropdown. This is for custom trigger handling for custom dropdown.
+  // To use these methods, set :triggers="[]" on the SprDropdown component to disable default triggers. (reference: https://floating-vue.starpad.dev/api/#shown)
+  /* #region - Exposed Methods */
+  const showDropdown = () => {
+    dropdownPopperState.value = true;
+  };
+  const hideDropdown = () => {
+    dropdownPopperState.value = false;
+  };
+  /* #endregion - Exposed Methods */
+
   const isLadderizedSearch = computed(
     () => ladderized.value && searchString.value !== '' && normalizedValue.value.length === 0,
   );
@@ -503,5 +514,7 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
     dropdownValue: compatPreSelectedItems, // Use compatible format for lists
     removeCurrentLevelInBackLabel,
     isLadderizedSearch,
+    showDropdown,
+    hideDropdown,
   };
 };

package/src/components/list/list.ts

@@ -123,12 +123,17 @@ export const listPropTypes = {
     type: Boolean,
     default: false,
   },
+  allowDeselect: {
+    type: Boolean,
+    default: false
+  }
 };
 
 export const listEmitTypes = {
   'update:modelValue': (value: MenuListType[]) => value,
   'update:searchValue': (value: string) => typeof value === 'string',
   'get-single-selected-item': (item: MenuListType) => item,
+  'get-single-deselected-item': (item: MenuListType) => item,
 };
 
 export type ListPropTypes = ExtractPropTypes<typeof listPropTypes>;

package/src/components/list/list.vue

@@ -8,6 +8,7 @@
           v-model="searchText"
           :placeholder="props.searchableMenuPlaceholder"
           autocomplete="off"
+          @keyup="handleSearchKeyup"
         />
         <span
           v-if="props.supportingDisplayText || props.displayListItemSelected"
@@ -121,5 +122,6 @@ const {
   isItemSelected,
   getListItemClasses,
   handleSelectedItem,
+  handleSearchKeyup,
 } = useList(props, emit);
 </script>

package/src/components/list/use-list.ts

@@ -22,6 +22,7 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     noCheck,
     disabledUnselectedItems,
     stickySearchOffset,
+    allowDeselect,
   } = toRefs(props);
 
   const listClasses: ComputedRef<ListClasses> = computed(() => {
@@ -518,14 +519,31 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
         // Track the deselection but DON'T add items back to selectedItems when deselecting
         trackNewlySelectedItems(item, true);
       }
+      emit('get-single-selected-item', item);
     } else {
       // For single-select, simply replace the selection
-      selectedItems.value = [item];
+      if (allowDeselect.value) {
+        handleDeselect(item);
+      } else {
+        handleSingleSelect(item);
+      }
+    }    
+  };
 
-      if (item.onClickFn) item.onClickFn();
+  const handleDeselect = (item: MenuListType) => {
+    if (selectedItems.value.length === 0 || !isItemSelected(item)) {
+      selectedItems.value = [item];  
+      emit('get-single-selected-item', item);    
+    } else {
+      selectedItems.value = [];
+      emit('get-single-deselected-item', item);
     }
+  };
 
-    emit('get-single-selected-item', item);
+  const handleSingleSelect = (item: MenuListType) => {
+    selectedItems.value = [item];
+    if (item.onClickFn) item.onClickFn();   
+    emit('get-single-selected-item', item); 
   };
   // #endregion - Helper Methods
 
@@ -608,6 +626,20 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     setPreSelectedItems();
   });
 
+  // Handle search keyup to ignore modifier-only keys
+  const handleSearchKeyup = (event: KeyboardEvent) => {
+    // Ignore pure modifier keys: Shift, Control, Alt, Meta (Command/Windows), CapsLock
+    const modifierOnlyKeys = ['Shift', 'Control', 'Alt', 'Meta', 'CapsLock'];
+
+    if (!modifierOnlyKeys.includes(event.key)) {
+      // Allow the search to proceed - v-model will handle the actual update
+      return;
+    }
+
+    // For modifier-only keys, prevent default behavior if needed
+    event.preventDefault();
+  };
+
   return {
     listClasses,
     stickyOffsetStyle,
@@ -623,5 +655,6 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     handleSearch,
     handleSelectedItem,
     trackNewlySelectedItems,
+    handleSearchKeyup,
   };
 };

package/src/components/select/select-multiple/use-select-multiple.ts

@@ -376,10 +376,14 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     { deep: true },
   );
 
-  watch(searchInput, () => {
-    search.value = searchInput.value;
+  watch(searchInput, (newVal, oldVal) => {
+    search.value = newVal;
 
-    emit('search-string', searchInput.value);
+    // Only emit search-string if value actually changed (not just modifier keys)
+    // Modifier key presses alone won't change the input value
+    if (newVal !== oldVal) {
+      emit('search-string', newVal);
+    }
   });
 
   watch(multiSelectPopperState, (newState) => {

package/src/components/select/use-select.ts

@@ -148,11 +148,15 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     return selectOptions.value.filter((item) => item.text?.toString().toLowerCase().includes(query));
   });
 
-  // Search handler: always emit search-string, but only filter locally if local search is enabled
-  const handleSearch = () => {
-    isSearching.value = true;
-
-    debouncedEmitSearch();
+  // Search handler: only emit search-string on regular keys and ENTER, ignore modifier-only keys
+  const handleSearch = (event: KeyboardEvent) => {
+    // Ignore pure modifier keys: Shift, Control, Alt, Meta (Command/Windows), CapsLock
+    const modifierOnlyKeys = ['Shift', 'Control', 'Alt', 'Meta', 'CapsLock'];
+
+    if (!modifierOnlyKeys.includes(event.key)) {
+      isSearching.value = true;
+      debouncedEmitSearch();
+    }
   };
 
   const debouncedEmitSearch = useDebounceFn(() => {

package/src/components/sidepanel/sidepanel.ts

@@ -20,6 +20,9 @@ export const sidepanelPropTypes = {
     type: String,
     default: 'Sidepanel Header',
   },
+  headerSubtitle: {
+    type: String    
+  },
   /**
    * @description Specifies the size of the side panel.
    * Acceptable values are: `'sm'`, `'md'`, `'lg'`, `'xl'`.
@@ -104,6 +107,14 @@ export const sidepanelPropTypes = {
   isActivePanel: {
     type: Boolean,
     default: false
+  },
+  footerNoTopBorder: {
+    type: Boolean,
+    default: false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
   }
 };
 

package/src/components/sidepanel/sidepanel.vue

@@ -17,21 +17,43 @@
       aria-labelledby="sidepanel-title"
       aria-describedby="sidepanel-content"
       :class="sidepanelClasses.sidepanelBaseClasses"
+      data-testid="sidepanel-dialog"
       :style="{ height: typeof height === 'number' ? `${height}px` : height }"
     >
       <template v-if="!props.hideHeader">
         <div v-if="!$slots.header" :class="sidepanelClasses.sidepanelHeaderClasses">
-          <div id="sidepanel-title" :class="sidepanelClasses.sidepanelHeaderTitleClasses">
-            {{ headerTitle }}
+          <div v-if="!isLoading" id="headers">
+            <div id="sidepanel-title" :class="sidepanelClasses.sidepanelHeaderTitleClasses">
+              {{ headerTitle }}
+            </div>
+            <div id="sidepanel-subtitle" :class="sidepanelClasses.sidepanelHeaderSubtitleClasses">
+              <slot name="subtitle">
+                <span class="spr-text-color-base">{{ headerSubtitle }}</span>
+              </slot>
+            </div>
           </div>
-          <div class="spr-flex spr-items-center spr-gap-size-spacing-3xs">            
+          <div v-else id="header-loaders" class="spr-w-full spr-flex spr-flex-col spr-gap-size-spacing-4xs">
+            <div class="spr-skeletal-loader spr-h-4 spr-w-[90%] spr-rounded-md"></div>
+            <div
+              v-if="headerSubtitle || $slots.subtitle"
+              class="spr-skeletal-loader spr-h-8 spr-w-[95%] spr-rounded-md"
+            ></div>
+          </div>
+
+          <div class="spr-flex spr-items-center spr-gap-size-spacing-3xs">
             <Icon
               v-if="props.isExpandable"
               :class="sidepanelClasses.sidepanelHeaderIconClasses"
               :icon="isExpanded ? 'ph:arrows-in-simple' : 'ph:arrows-out-simple'"
+              data-testid="expand-icon"
               @click="handlePanelExpansion"
             />
-            <Icon :class="sidepanelClasses.sidepanelHeaderIconClasses" icon="ph:x" @click="handleClose" />
+            <Icon
+              :class="sidepanelClasses.sidepanelHeaderIconClasses"
+              icon="ph:x"
+              data-testid="x-icon"
+              @click="handleClose"
+            />
           </div>
         </div>
         <div v-else>