design-system-next 2.7.36 → 2.7.37

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

@@ -6,30 +6,149 @@ import type { DropdownPropTypes, DropdownEmitTypes } from './dropdown';
 import type { MenuListType } from '../list/list';
 
 export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<DropdownEmitTypes>['emit']) => {
-  const { menuList, searchString, disabled, multiSelect, removeCurrentLevelInBackLabel, ladderized } = toRefs(props);
+  const { menuList, searchString, disabled, multiSelect, removeCurrentLevelInBackLabel, ladderized, textField, valueField } = toRefs(props);
 
   // Dropdown component ref variables
-  const dropdownValue = useVModel(props, 'modelValue', emit); // v-model value of  dropdown component
+  const dropdownValue = useVModel(props, 'modelValue', emit); // v-model value of dropdown component
   const dropdownRef = ref<HTMLDivElement | null>(null);
 
   // List component ref variables
   const selectedListItems = ref<MenuListType[]>([]); // v-model value of the list component
   const dropdownMenuList = ref<MenuListType[]>([]); // menu list for the list component
 
+  // Normalized value for internal use - always an array
+  const normalizedValue = computed(() => {
+    // If already an array, use it
+    if (Array.isArray(dropdownValue.value)) {
+      return dropdownValue.value;
+    }
+    // If not an array but has a value, make it a single-item array
+    if (dropdownValue.value !== undefined && dropdownValue.value !== null) {
+      return [dropdownValue.value];
+    }
+    // Default empty array
+    return [];
+  });
+
+  // Compatibility layer for pre-selected items (List component expects string[] format)
+  const compatPreSelectedItems = computed(() => {
+    // For ladderized dropdown with search, handle the special format
+    if (props.ladderized && Array.isArray(dropdownValue.value) && dropdownValue.value.length === 2) {
+      // We return only the second value from the [subvalue, value] format which is the actual selected value
+      return [dropdownValue.value[1]?.toString() || ''];
+    }
+    
+    // For regular arrays (multi-select)
+    if (Array.isArray(dropdownValue.value)) {
+      return dropdownValue.value.map(item => {
+        if (item === undefined || item === null) return '';
+        
+        // For numbers, preserve the original number value instead of converting to string
+        if (typeof item === 'number') return item;
+        
+        // For objects, pass the original object reference
+        // This is key for proper multi-select of objects
+        if (typeof item === 'object') return item;
+        
+        // For strings, pass as is
+        return item.toString();
+      });
+    }
+    
+    // For single values (single-select)
+    return dropdownValue.value !== undefined && dropdownValue.value !== null 
+      ? [typeof dropdownValue.value === 'object' ? 
+          // Pass object reference directly instead of stringifying
+          dropdownValue.value : 
+          // For numbers, preserve the original number value
+          typeof dropdownValue.value === 'number' ? 
+            dropdownValue.value : 
+            dropdownValue.value.toString()] 
+      : [];
+  });
+
   // Popper state
   const dropdownPopperState = ref<boolean>(false);
   const isDropdownPopperDisabled = computed(() => disabled.value);
 
   const isLadderizedSearch = computed(
-    () => ladderized.value && searchString.value !== '' && dropdownValue.value.length === 0,
+    () => ladderized.value && searchString.value !== '' && normalizedValue.value.length === 0,
   );
 
-  const initializeMenuList = () => {
-    dropdownMenuList.value = [...menuList.value];
+  const processMenuList = () => {
+    // Handle empty array or non-array values
+    if (!menuList.value || !Array.isArray(menuList.value) || menuList.value.length === 0) {
+      dropdownMenuList.value = [];
+      return;
+    }
+    
+    // If ladderized is true and menu list items already conform to MenuListType, don't transform
+    if (ladderized.value) {
+      // Verify the items have the required structure for ladderized lists
+      const allValid = menuList.value.every(item => 
+        typeof item === 'object' && item !== null && 'text' in item && 'value' in item
+      );
+      
+      if (allValid) {
+        dropdownMenuList.value = menuList.value as MenuListType[];
+      } else {
+        console.warn('Ladderized dropdown requires menu items in {text, value} format');
+        dropdownMenuList.value = [];
+      }
+      return;
+    }
+
+    const firstItem = menuList.value[0];
+
+    // Handle array of strings
+    if (typeof firstItem === 'string') {
+      dropdownMenuList.value = (menuList.value as string[]).map(item => ({
+        text: item,
+        value: item
+      }));
+      return;
+    }
+
+    // Handle array of numbers
+    if (typeof firstItem === 'number') {
+      dropdownMenuList.value = (menuList.value as number[]).map(item => ({
+        text: item.toString(),
+        value: item // Keep the value as a number instead of converting to string
+      }));
+      return;
+    }
+
+    // Handle array of objects with dynamic attributes
+    if (typeof firstItem === 'object' && firstItem !== null) {
+      // Check if it's already in MenuListType format
+      if ('text' in firstItem && 'value' in firstItem) {
+        dropdownMenuList.value = menuList.value as MenuListType[];
+        return;
+      }
+
+      // Transform to MenuListType format using textField and valueField
+      dropdownMenuList.value = (menuList.value as Record<string, unknown>[]).map(item => {
+        const displayText = item[textField.value] || 'Unnamed';
+        // Use the specified value field if available, otherwise use the entire object
+        const itemValue = valueField.value && item[valueField.value] !== undefined 
+          ? item[valueField.value] 
+          : item;
+          
+        return {
+          text: displayText,
+          value: typeof itemValue === 'object' ? JSON.stringify(itemValue) : itemValue.toString(),
+          _originalObject: item // Store the original object for reference
+        };
+      });
+      return;
+    }
+
+    // Default fallback
+    dropdownMenuList.value = menuList.value as MenuListType[];
   };
 
   watch(menuList, () => {
-    initializeMenuList();
+    processMenuList();
   });
 
   const handleSearch = () => {
@@ -40,8 +159,13 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
     if (!multiSelect.value) {
       singleSelectSearch();
     } else {
-      dropdownMenuList.value = [...menuList.value];
-      // TODO: Handle multi-select search
+      // Process menu list for searching
+      processMenuList();
+      
+      // Handle multi-select search - filter based on search string
+      if (searchString.value.trim() !== '') {
+        dropdownMenuList.value = getFilteredMenuList(dropdownMenuList.value);
+      }
     }
   };
 
@@ -54,19 +178,25 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
   };
 
   const basicSearch = () => {
-    dropdownMenuList.value = getFilteredMenuList(menuList.value);
+    // Process menu list first
+    processMenuList();
+    
+    // Then filter based on search string
+    if (searchString.value.trim() !== '') {
+      dropdownMenuList.value = getFilteredMenuList(dropdownMenuList.value);
+    }
   };
 
   const ladderizedSearch = () => {
     //revert to initial list if search string is empty or dropdownValue is not empty
-    if (searchString.value === '' || dropdownValue.value.length > 0) {
-      dropdownMenuList.value = [...menuList.value];
+    if (searchString.value === '' || normalizedValue.value.length > 0) {
+      dropdownMenuList.value = [...menuList.value] as MenuListType[];
       return;
     }
 
-    const menuListSubLevels = getAllSublevelItems(menuList.value);
+    const menuListSubLevels = getAllSublevelItems(menuList.value as MenuListType[]);
 
-    const filteredMenuList = getFilteredMenuList(menuList.value);
+    const filteredMenuList = getFilteredMenuList(menuList.value as MenuListType[]);
     const filteredMenuListSubLevels = getFilteredMenuList(menuListSubLevels);
 
     if (filteredMenuList.length > 0) {
@@ -83,12 +213,12 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
   // compile sublevel items from menuList to a single array
   // and add text and value of the parent item to all sublevel items as subtext and subvalue
   const getAllSublevelItems = (menuList: MenuListType[]) => {
-    return menuList.reduce((currentValue, currentItem) => {
+    return menuList.reduce<MenuListType[]>((currentValue, currentItem) => {
       if (currentItem.sublevel) {
         const mappedSublevel = currentItem.sublevel.map((sublevelItem: MenuListType) => ({
           ...sublevelItem, //text and value of a sublevel item
           subtext: currentItem.text, // text of parent of a sublevel item
-          subvalue: currentItem.value, // value of parent of a sublevel item
+          subvalue: typeof currentItem.value === 'string' ? currentItem.value : String(currentItem.value), // value of parent of a sublevel item as string
         }));
 
         return [...currentValue, ...mappedSublevel];
@@ -125,15 +255,80 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
   // Handle selected item for simple list component
   const handleSelectedItem = (selectedItems: MenuListType[]) => {
     if (!props.ladderized) {
-      dropdownValue.value = selectedItems.map((item) => item.value.toString());
-    }
-
-    if (!multiSelect.value) {
-      if (props.ladderized && props.searchString !== '') {
+      // Determine the type of value to emit based on the original data type and multiSelect
+      if (multiSelect.value) {
+        // For multi-select, always return an array
+        const values = selectedItems.map(item => {
+          // If we stored the original object, use it
+          if ('_originalObject' in item) {
+            return item._originalObject;
+          }
+          
+          // For simple types, handle value type conversion properly
+          const val = item.value;
+          
+          // If it's already a number, keep it as a number
+          if (typeof val === 'number') {
+            return val;
+          }
+          
+          // For strings that look like numbers, convert them
+          if (typeof val === 'string' && !isNaN(Number(val)) && val.trim() !== '') {
+            // Only convert if it looks like a proper number format
+            if (/^-?\d+(\.\d+)?$/.test(val)) {
+              return Number(val);
+            }
+          }
+          
+          // Return the original value for all other cases
+          return val;
+        });
+        
+        dropdownValue.value = values as (string | number | Record<string, unknown>)[];
+      } else {
+        // For single-select
+        if (selectedItems.length === 0) {
+          dropdownValue.value = props.multiSelect ? [] : '';
+          return;
+        }
+
+        const item = selectedItems[0];
+        
+        // If we stored the original object, use it
+        if ('_originalObject' in item) {
+          dropdownValue.value = item._originalObject as Record<string, unknown>;
+        } else {
+          // For simple types, return the value (try to convert number strings to numbers)
+          const val = item.value;
+          if (typeof val === 'string' && !isNaN(Number(val)) && val.trim() !== '') {
+            dropdownValue.value = Number(val);
+          } else {
+            dropdownValue.value = val;
+          }
+        }
+      }
+    } else if (props.ladderized) {
+      if (props.searchString !== '') {
         // generate dropdown value if ladderized with search string
-        dropdownValue.value = [selectedItems[0].subvalue ?? '', selectedItems[0].value];
+        const subvalue = selectedItems[0]?.subvalue;
+        const value = selectedItems[0]?.value;
+        if (subvalue !== undefined && value !== undefined) {
+          dropdownValue.value = [subvalue, value] as [string, string | number];
+        }
+      } else {
+        // For regular ladderized dropdown selection without search
+        if (selectedItems.length > 0) {
+          const item = selectedItems[0];
+          // Use the value directly for ladderized items
+          if (item && item.value) {
+            dropdownValue.value = item.value;
+          }
+        }
       }
+    }
 
+    // Always close dropdown for single selection, regardless of value type
+    if (!multiSelect.value) {
       setTimeout(() => {
         dropdownPopperState.value = false;
       }, 10);
@@ -142,6 +337,11 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
 
   // Handle selected item for ladderized list component
   const handleSelectedLadderizedItem = (selectedItems: string[]) => {
+    // Update the model value with the selected ladderized items
+    if (selectedItems.length > 0) {
+      dropdownValue.value = selectedItems;
+    }
+    
     // If item is from last sublevel, close the dropdown
     if (checkIfItemFromLastSublevel(selectedItems)) {
       dropdownPopperState.value = false;
@@ -164,8 +364,113 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
     return true;
   };
 
+  // Update selected items when model value changes externally
+  const updateSelectedItemsFromValue = () => {
+    if (!dropdownMenuList.value.length) return;
+    
+    const values = normalizedValue.value;
+    if (!values || !values.length) {
+      selectedListItems.value = [];
+      return;
+    }
+
+    // Store both original values and string versions for flexible matching
+    const valueData = values.map(val => {
+      if (val === undefined || val === null) return { original: '', string: '' };
+      
+      // For objects, use JSON string representation
+      if (typeof val === 'object') {
+        return { 
+          original: val, 
+          string: JSON.stringify(val),
+          isObject: true,
+          id: 'id' in val ? val.id : undefined
+        };
+      }
+      
+      // For numbers and strings, keep original and string versions
+      return { 
+        original: val,
+        string: val.toString(),
+        isObject: false
+      };
+    });
+    
+    // Extract just string values for comparison
+    const valueStrings = valueData.map(v => v.string);
+
+    if (props.ladderized) {
+      // Special handling for ladderized dropdowns
+      if (Array.isArray(dropdownValue.value) && dropdownValue.value.length === 2) {
+        // Handle [subvalue, value] format used in ladderized dropdowns with search
+        const subvalue = dropdownValue.value[0]?.toString() || '';
+        const value = dropdownValue.value[1]?.toString() || '';
+        
+        selectedListItems.value = dropdownMenuList.value.filter(item => {
+          return item.value === value && (!item.subvalue || item.subvalue === subvalue);
+        });
+      } else {
+        // Regular ladderized dropdown value
+        selectedListItems.value = dropdownMenuList.value.filter(item => {
+          // Convert both to strings for comparison or check direct equality for numbers
+          if (typeof item.value === 'number') {
+            return valueData.some(v => v.original === item.value || v.string === String(item.value));
+          } else {
+            return valueStrings.includes(String(item.value));
+          }
+        });
+      }
+    } else {
+      // Regular dropdown value
+      selectedListItems.value = dropdownMenuList.value.filter(item => {
+        // Handle objects with _originalObject property
+        if ('_originalObject' in item && item._originalObject) {
+          return valueData.some(v => {
+            // If both are objects, compare by JSON string or by ID
+            if (v.isObject && typeof v.original === 'object') {
+              const originalObj = item._originalObject as Record<string, unknown>;
+              
+              // First try direct equality comparison
+              if (v.original === originalObj) return true;
+              
+              // Try JSON string comparison
+              const itemJson = JSON.stringify(originalObj);
+              if (v.string === itemJson) return true;
+              
+              // Try ID-based comparison if both have ID fields
+              if (v.id !== undefined && 'id' in originalObj) {
+                return v.id === originalObj.id;
+              }
+            }
+            return false;
+          });
+        }
+        
+        // Handle both numeric and string values correctly
+        if (typeof item.value === 'number') {
+          return valueData.some(v => v.original === item.value || v.string === String(item.value));
+        } else {
+          return valueStrings.includes(String(item.value));
+        }
+      });
+    }
+  };
+
+  watch(dropdownValue, () => {
+    updateSelectedItemsFromValue();
+  });
+
+  watch(dropdownMenuList, () => {
+    updateSelectedItemsFromValue();
+  });
+
   onMounted(() => {
-    initializeMenuList();
+    processMenuList();
+    
+    // Set initial selected items based on model value
+    if (normalizedValue.value.length > 0) {
+      updateSelectedItemsFromValue();
+    }
   });
 
   return {
@@ -176,7 +481,7 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
     selectedListItems,
     handleSelectedItem,
     handleSelectedLadderizedItem,
-    dropdownValue,
+    dropdownValue: compatPreSelectedItems, // Use compatible format for lists
     removeCurrentLevelInBackLabel,
     isLadderizedSearch,
   };

package/src/components/filter/filter.vue

@@ -77,7 +77,7 @@
                     :key="menu.field"
                     v-model:shown="mappedFilterMenuList[menu.field].isFilterVisible"
                     aria-id="filter-menu-wrapper"
-                    placement="right-start"
+                    placement="right"
                     :triggers="['click']"
                     :auto-hide="false"
                   >
@@ -118,7 +118,7 @@
 
                         <div
                           v-if="getSelectedFilterMenuOption.length > 0"
-                          class="spr-space-x-2 spr-space-y-2 spr-p-size-spacing-2xs"
+                          class="spr-h-[70px] spr-space-x-2 spr-space-y-2 spr-overflow-auto spr-p-size-spacing-2xs"
                         >
                           <spr-chips
                             v-for="(FilterMenuOption, i) in getSelectedFilterMenuOption"
@@ -133,7 +133,7 @@
                           v-if="getFiltereredMenuOption.length > 0"
                           :id="menu.field"
                           ref="filterMenuOptionList"
-                          class="spr-max-h-[264px] spr-space-y-size-spacing-6xs spr-overflow-auto spr-p-size-spacing-2xs"
+                          class="spr-h-[264px] spr-space-y-size-spacing-6xs spr-overflow-auto spr-p-size-spacing-2xs"
                         >
                           <div
                             v-for="(option, key) in getFiltereredMenuOption"

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

@@ -144,11 +144,6 @@ export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitT
     emit('infiniteScrollTrigger', true);
   };
 
-  watch(loading, () => {
-    if (loading.value) return;
-    getMappedMenuOptionList();
-  });
-
   watch(selectedColumn, (_value) => {
     setFilterVisible(_value);
   });
@@ -222,7 +217,9 @@ export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitT
     const PopperContentClasses = classNames(
       'spr-flex spr-w-[328px] spr-flex-wrap spr-gap-size-spacing-2xs spr-p-size-spacing-xs',
     );
-    const LoadingStateClasses = classNames('spr-p-size-spacing-sm spr-flex spr-items-center spr-justify-center');
+    const LoadingStateClasses = classNames(
+      'spr-h-[264px] spr-p-size-spacing-sm spr-flex spr-items-center spr-justify-center',
+    );
     const ActionButtonClasses = classNames('spr-flex spr-justify-end spr-gap-2 spr-p-size-spacing-2xs');
     const filterListClasses = classNames(
       'spr-body-xs-regular spr-flex spr-cursor-pointer spr-justify-between spr-rounded-border-radius-md spr-p-size-spacing-4xs',

package/src/components/list/list.ts

@@ -7,11 +7,12 @@ const GROUPED_ITEMS_BY_TYPES = ['A-Z', 'Z-A', 'default'] as const;
 export type MenuListType = {
   text: string;
   subtext?: string;
-  value: string;
+  value: string | number;  // Allow both string and number values
   subvalue?: string;
   sublevel?: MenuListType[];
   group?: string;
   disabled?: boolean;
+  _originalObject?: Record<string, unknown>;  // Store original object reference when mapping complex objects
 };
 
 export type GroupedMenuListType = {
@@ -40,8 +41,8 @@ export const listPropTypes = {
     default: false,
   },
   preSelectedItems: {
-    type: Array as PropType<string[]>,
-    default: [],
+    type: Array as PropType<(string | number | Record<string, unknown>)[]>,
+    default: () => [],
   },
   ladderized: {
     type: Boolean,