design-system-next 2.24.2 → 2.26.0

package/src/components/radio-grouped/radio-grouped.ts

@@ -1,65 +1,65 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export interface RadioOption {
-  text: string;
-  value: string | number | boolean;
-  disabled?: boolean;
-}
-
-export const radioGroupedPropTypes = {
-  id: {
-    type: String,
-    required: true,
-  },
-  modelValue: {
-    type: [String, Number, Boolean],
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  options: {
-    type: Array as PropType<RadioOption[]>,
-    required: true,
-    default: () => [],
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  description: {
-    type: String,
-  },
-  bordered: {
-    type: Boolean,
-    default: false,
-  },
-  displayHelper: {
-    type: Boolean,
-    default: false,
-  },
-  helperIcon: {
-    type: String,
-    default: null,
-  },
-  helperText: {
-    type: String,
-    default: '',
-  },
-  error: {
-    type: Boolean,
-    default: false,
-  },
-  horizontalAlign: {
-    type: String as PropType<'left' | 'center' | 'right'>,
-    default: 'left',
-  },
-};
-
-export const radioGroupedEmitTypes = ['update:modelValue'];
-
-export type RadioGroupedPropTypes = ExtractPropTypes<typeof radioGroupedPropTypes>;
-
-export type RadioGroupedEmitTypes = typeof radioGroupedEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export interface RadioOption {
+  text: string;
+  value: string | number | boolean;
+  disabled?: boolean;
+}
+
+export const radioGroupedPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number, Boolean],
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Array as PropType<RadioOption[]>,
+    required: true,
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  description: {
+    type: String,
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  displayHelper: {
+    type: Boolean,
+    default: false,
+  },
+  helperIcon: {
+    type: String,
+    default: null,
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  horizontalAlign: {
+    type: String as PropType<'left' | 'center' | 'right'>,
+    default: 'left',
+  },
+};
+
+export const radioGroupedEmitTypes = ['update:modelValue'];
+
+export type RadioGroupedPropTypes = ExtractPropTypes<typeof radioGroupedPropTypes>;
+
+export type RadioGroupedEmitTypes = typeof radioGroupedEmitTypes;

package/src/components/radio-grouped/use-radio-grouped.ts

@@ -1,62 +1,62 @@
-import { toRefs, computed, ComputedRef } from 'vue';
-import { useVModel } from '@vueuse/core';
-
-import classNames from 'classnames';
-
-import type { SetupContext } from 'vue';
-import type { RadioGroupedPropTypes, RadioGroupedEmitTypes, RadioOption } from './radio-grouped';
-
-interface RadioGroupedClasses {
-  containerClasses: string;
-  helperClasses: string;
-}
-
-export const useRadioGrouped = (props: RadioGroupedPropTypes, emit: SetupContext<RadioGroupedEmitTypes>['emit']) => {
-  const { disabled, horizontalAlign, displayHelper, error } = toRefs(props);
-
-  const radioGroupedClasses: ComputedRef<RadioGroupedClasses> = computed(() => {
-    const alignmentMap = {
-      left: 'spr-justify-start',
-      center: 'spr-justify-center',
-      right: 'spr-justify-end',
-    };
-
-    const containerClasses = classNames('spr-flex spr-flex-col spr-gap-2', {
-      [alignmentMap[horizontalAlign.value as keyof typeof alignmentMap]]: true,
-    });
-
-    const helperClasses = classNames(
-      'spr-flex spr-items-center spr-gap-1 spr-mt-size-spacing-2xs spr-body-sm-regular',
-      {
-        'spr-text-mushroom-600': !error.value,
-        'spr-text-color-danger-base': error.value,
-      },
-    );
-
-    return {
-      containerClasses,
-      helperClasses,
-    };
-  });
-
-  const proxyValue = useVModel(props, 'modelValue', emit);
-
-  const renderOptions = (): RadioOption[] => {
-    return props.options || [];
-  };
-
-  const isOptionDisabled = (option: RadioOption): boolean => {
-    return disabled.value || (option.disabled ?? false);
-  };
-
-  return {
-    radioGroupedClasses,
-    proxyValue,
-    renderOptions,
-    isOptionDisabled,
-    disabled,
-    displayHelper,
-    horizontalAlign,
-    error,
-  };
-};
+import { toRefs, computed, ComputedRef } from 'vue';
+import { useVModel } from '@vueuse/core';
+
+import classNames from 'classnames';
+
+import type { SetupContext } from 'vue';
+import type { RadioGroupedPropTypes, RadioGroupedEmitTypes, RadioOption } from './radio-grouped';
+
+interface RadioGroupedClasses {
+  containerClasses: string;
+  helperClasses: string;
+}
+
+export const useRadioGrouped = (props: RadioGroupedPropTypes, emit: SetupContext<RadioGroupedEmitTypes>['emit']) => {
+  const { disabled, horizontalAlign, displayHelper, error } = toRefs(props);
+
+  const radioGroupedClasses: ComputedRef<RadioGroupedClasses> = computed(() => {
+    const alignmentMap = {
+      left: 'spr-justify-start',
+      center: 'spr-justify-center',
+      right: 'spr-justify-end',
+    };
+
+    const containerClasses = classNames('spr-flex spr-flex-col spr-gap-2', {
+      [alignmentMap[horizontalAlign.value as keyof typeof alignmentMap]]: true,
+    });
+
+    const helperClasses = classNames(
+      'spr-flex spr-items-center spr-gap-1 spr-mt-size-spacing-2xs spr-body-sm-regular',
+      {
+        'spr-text-mushroom-600': !error.value,
+        'spr-text-color-danger-base': error.value,
+      },
+    );
+
+    return {
+      containerClasses,
+      helperClasses,
+    };
+  });
+
+  const proxyValue = useVModel(props, 'modelValue', emit);
+
+  const renderOptions = (): RadioOption[] => {
+    return props.options || [];
+  };
+
+  const isOptionDisabled = (option: RadioOption): boolean => {
+    return disabled.value || (option.disabled ?? false);
+  };
+
+  return {
+    radioGroupedClasses,
+    proxyValue,
+    renderOptions,
+    isOptionDisabled,
+    disabled,
+    displayHelper,
+    horizontalAlign,
+    error,
+  };
+};

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'`.
@@ -108,6 +111,10 @@ export const sidepanelPropTypes = {
   footerNoTopBorder: {
     type: Boolean,
     default: false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
   }
 };
 

package/src/components/sidepanel/sidepanel.vue

@@ -22,10 +22,25 @@
     >
       <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"
@@ -33,7 +48,12 @@
               data-testid="expand-icon"
               @click="handlePanelExpansion"
             />
-            <Icon :class="sidepanelClasses.sidepanelHeaderIconClasses" icon="ph:x" data-testid="x-icon" @click="handleClose" />
+            <Icon
+              :class="sidepanelClasses.sidepanelHeaderIconClasses"
+              icon="ph:x"
+              data-testid="x-icon"
+              @click="handleClose"
+            />
           </div>
         </div>
         <div v-else>

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

@@ -16,6 +16,7 @@ interface SidepanelClasses {
   sidepanelTransitionHiddenClasses: string;
   sidepanelTransitionVisibleClasses: string;
   backdropBaseClasses: string;
+  sidepanelHeaderSubtitleClasses: string;
 }
 
 export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<SidepanelEmitTypes>['emit']) => {
@@ -43,6 +44,8 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
 
     const sidepanelHeaderTitleClasses = classNames('spr-subheading-xs');
 
+    const sidepanelHeaderSubtitleClasses = classNames('spr-text-200 spr-max-w-[95%]');
+
     const sidepanelHeaderIconClasses = classNames('spr-text-color-weak spr-h-5 spr-w-5 spr-cursor-pointer');
 
     const sidepanelContentClasses = classNames('spr-h-full spr-overflow-y-auto');
@@ -81,6 +84,7 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
       sidepanelTransitionHiddenClasses,
       sidepanelTransitionVisibleClasses,
       backdropBaseClasses,
+      sidepanelHeaderSubtitleClasses
     };
   });
 

package/src/components/table/table-header-dropdown/table-header-dropdown.vue

@@ -25,7 +25,7 @@
         </template>
         <template #content>
           <div v-if="props.isSortable" class="spr-border-0 spr-border-b spr-border-solid spr-border-color-weak">
-            <spr-list v-model="selectedSort" class="spr-capitalize spr-body-sm-regular spr-text-color-strong [&_svg]:spr-w-[16px] [&_svg]:spr-h-[16px] [&_svg.spr-text-color-brand-base]:spr-hidden" :menu-list="props.sortOptions"/>
+            <spr-list v-model="selectedSort" class="spr-capitalize spr-body-sm-regular spr-text-color-strong [&_svg]:spr-w-[16px] [&_svg]:spr-h-[16px] [&_svg.spr-text-color-brand-base]:spr-hidden" :menu-list="props.sortOptions" :allow-deselect="true"/>
           </div>
           <div v-if="props.header.filterList && props.header.filterList.length > 0" >
             <spr-list v-model="selectedFilters" class="spr-capitalize spr-body-sm-regular spr-text-color-strong [&_svg]:spr-w-[16px] [&_svg]:spr-h-[16px]" :menu-list="props.header.filterList" multi-select/>
@@ -81,4 +81,8 @@ const selectAll = () => {
   selectedFilters.value = props.header.filterList ? [...props.header.filterList] : [];
   emits('onSelectAll');
 };
+
+defineExpose({
+  showDropdown  
+});
 </script>

package/src/components/table/table.vue

@@ -45,9 +45,11 @@
               :class="[getTableClasses.headerClasses(header)]"
               :style="{ width: header?.width }"
             >
+              <div v-if="props.showHeaderFilter" class="spr-cursor-pointer hover:spr-background-color-hover active:spr-background-color-pressed spr-absolute spr-inset-0 spr-z-[2]" @click="handleHeaderDropdownClick(keyHeader)"></div>
               <!-- Header with Dropdown Filter -->
               <spr-table-header-dropdown
                 v-if="props.showHeaderFilter"
+                :ref="(el: unknown) => setHeaderDropdownRef(el, keyHeader)"      
                 :id="`th-dropdown-${keyHeader}`"
                 :header="header"
                 :is-sortable="true"
@@ -238,6 +240,18 @@ import { useDraggableTableRows } from './use-draggable-table-rows';
 const props = defineProps(tablePropTypes);
 const emit = defineEmits(tableEmitTypes);
 const slots = useSlots();
+const headerDropdownRefs = ref<Record<string, Element | null>>({});
+
+const setHeaderDropdownRef = (el: unknown, key: string | number) => {  
+  if (el) {
+    headerDropdownRefs.value[String(key)] = el as Element;
+  }
+};
+
+const handleHeaderDropdownClick = (keyHeader: string | number) => {
+  const dropdownRef = headerDropdownRefs.value[String(keyHeader)] as InstanceType<typeof SprTableHeaderDropdown> | null;
+  dropdownRef?.showDropdown();
+};
 
 const sortableTBody = ref<HTMLElement | null>(null);
 

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

@@ -218,12 +218,11 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
       }
 
       return classNames(
-        'spr-min-h-12 spr-px-size-spacing-2xs spr-py-size-spacing-3xs',
+        'spr-min-h-12 spr-px-size-spacing-2xs spr-py-size-spacing-3xs spr-relative',
         'spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-text-start spr-font-medium spr-uppercase',
         'spr-border-color-weak spr-border-x-0 spr-border-y spr-border-solid',
         {
           'spr-border-t-0': !slots.default,
-          'spr-cursor-pointer hover:spr-background-color-hover active:spr-background-color-pressed': props.showHeaderFilter,
         },
         headerBackground,
       );