design-system-next 2.8.0 → 2.8.3

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

@@ -1,5 +1,5 @@
 import { ref, toRefs, computed, ComputedRef, onMounted, watch } from 'vue';
-import { onClickOutside, useInfiniteScroll, useVModel, useDebounceFn } from '@vueuse/core';
+import { onClickOutside, useVModel } from '@vueuse/core';
 
 import classNames from 'classnames';
 
@@ -13,7 +13,7 @@ interface MultiSelectClasses {
 }
 
 export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<MultiSelectEmitTypes>['emit']) => {
-  const { displayText, menuList, disabled, textField, valueField, disabledLocalSearch } = toRefs(props);
+  const { displayText, options, disabled, textField, valueField } = toRefs(props);
 
   const multiSelectClasses: ComputedRef<MultiSelectClasses> = computed(() => {
     const baseClasses = classNames('spr-flex spr-flex-col spr-gap-size-spacing-4xs');
@@ -28,57 +28,47 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     };
   });
 
-  // Popper Variables
   const multiSelectRef = ref<HTMLDivElement | null>(null);
   const multiSelectPopperState = ref<boolean>(false);
   const isMultiSelectPopperDisabled = computed(() => disabled.value);
 
-  // Multi-Select Variables
   const multiSelectModel = useVModel(props, 'modelValue', emit);
-  const multiSelectedListItems = ref<MenuListType[]>();
-  const multiSelectMenuList = ref<MenuListType[]>([]);
+  const multiSelectedListItems = ref<MenuListType[]>([]);
+  const multiSelectOptions = ref<MenuListType[]>([]);
   const hasUserSelected = ref(false);
 
-  // Input Text Variables
   const inputText = ref<string | number>('');
   const inputTextBackup = ref<string | number>('');
-  const isSearching = ref<boolean>(false);
 
-  const handleMenuToggle = () => {
-    multiSelectPopperState.value = true;
-
-    isSearching.value = false;
-  };
-
-  // Normalized value for internal use - always an array
+  /**
+   * Returns the normalized value of the model as an array for internal use.
+   */
   const normalizedValue = computed(() => {
-    // If already an array, use it
     if (Array.isArray(multiSelectModel.value)) {
       return multiSelectModel.value;
     }
 
-    // If not an array but has a value, make it a single-item array
     if (multiSelectModel.value !== undefined && multiSelectModel.value !== null) {
       return [multiSelectModel.value];
     }
 
-    // Default empty array
     return [];
   });
 
-  const processMenuList = () => {
-    // Handle empty array or non-array values
-    if (!menuList.value || !Array.isArray(menuList.value) || menuList.value.length === 0) {
-      multiSelectMenuList.value = [];
+  /**
+   * Processes the options prop and normalizes it into MenuListType[] for the multi-select.
+   */
+  const processOptions = () => {
+    if (!options.value || !Array.isArray(options.value) || options.value.length === 0) {
+      multiSelectOptions.value = [];
 
       return;
     }
 
-    const firstItem = menuList.value[0];
+    const firstItem = options.value[0];
 
-    // Handle array of strings
     if (typeof firstItem === 'string') {
-      multiSelectMenuList.value = (menuList.value as string[]).map((item) => ({
+      multiSelectOptions.value = (options.value as string[]).map((item) => ({
         text: item,
         value: item,
       }));
@@ -86,245 +76,147 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
       return;
     }
 
-    // Handle array of numbers
     if (typeof firstItem === 'number') {
-      multiSelectMenuList.value = (menuList.value as number[]).map((item) => ({
-        text: item.toString(),
-        value: item, // Keep the value as a number instead of converting to string
-      }));
+      multiSelectOptions.value = (options.value as Array<number | string | Record<string, unknown>>)
+        .filter((item): item is number => typeof item === 'number')
+        .map((item) => ({
+          text: item.toString(),
+          value: item,
+        }));
 
       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) {
-        multiSelectMenuList.value = menuList.value as MenuListType[];
+        multiSelectOptions.value = options.value as MenuListType[];
+
         return;
       }
-      // Transform to MenuListType format using textField and valueField
-      multiSelectMenuList.value = (menuList.value as Record<string, unknown>[]).map((item) => {
-        // Ensure displayText is a string
+
+      multiSelectOptions.value = (options.value as Record<string, unknown>[]).map((item) => {
         const displayText = item[textField.value] !== undefined ? String(item[textField.value]) : 'Unnamed';
-        // Use the specified value field if available, otherwise use the entire object
+
         let itemValue = valueField.value && item[valueField.value] !== undefined ? item[valueField.value] : item;
-        // If itemValue is undefined, fallback to empty string
+
         if (itemValue === undefined) itemValue = '';
+
         return {
           text: displayText,
           value: typeof itemValue === 'object' ? JSON.stringify(itemValue) : String(itemValue),
-          _originalObject: item, // Store the original object for reference
+          _originalObject: item,
         };
       });
+
       return;
     }
 
-    multiSelectMenuList.value = menuList.value as MenuListType[];
+    multiSelectOptions.value = options.value as MenuListType[];
   };
 
-  const filteredMultiSelectMenuList = computed(() => {
-    if (disabledLocalSearch.value) {
-      return multiSelectMenuList.value;
-    }
-
-    const query = inputText.value.toString().toLowerCase().trim();
-
-    if (!query) return multiSelectMenuList.value;
-
-    return multiSelectMenuList.value.filter((item) => item.text?.toString().toLowerCase().includes(query));
-  });
-
-  watch(menuList, () => {
-    processMenuList();
-  });
-
-  // Search handler: always emit search-string, but only filter locally if local search is enabled
-  const handleSearch = () => {
-    isSearching.value = true;
-
-    debouncedEmitSearch();
+  /**
+   * Opens the multi-select options.
+   */
+  const handleOptionsToggle = () => {
+    multiSelectPopperState.value = true;
   };
 
-  const debouncedEmitSearch = useDebounceFn(() => {
-    emit('search-string', inputText.value);
-  }, 300);
-
-  onClickOutside(multiSelectRef, () => {
-    multiSelectPopperState.value = false;
-    // If user was searching, restore inputText from backup
-    if (isSearching.value) {
-      inputText.value = inputTextBackup.value;
-    }
-    isSearching.value = false;
-  });
-
-  useInfiniteScroll(
-    multiSelectRef,
-    () => {
-      emit('infinite-scroll-trigger', true);
-    },
-    { distance: 10 },
-  );
-
-  // Handle multi-selected item for simple list component
+  /**
+   * Handles selection changes from the multi-select and updates the model value.
+   * Converts stringified objects back to objects if needed.
+   */
   const handleMultiSelectedItem = (multiSelectedItems: MenuListType[]) => {
-    // Get the last clicked item (assuming spr-list emits the full array in order)
-    const lastClicked = multiSelectedItems[multiSelectedItems.length - 1];
-    if (!lastClicked) return;
-
-    // Normalize value for comparison
-    let lastValue: string | number | Record<string, unknown>;
-    if ('_originalObject' in lastClicked) {
-      lastValue = lastClicked._originalObject ?? lastClicked.value;
-    } else if (typeof lastClicked.value === 'number') {
-      lastValue = lastClicked.value;
-    } else if (
-      typeof lastClicked.value === 'string' &&
-      !isNaN(Number(lastClicked.value)) &&
-      lastClicked.value.trim() !== '' &&
-      /^-?\d+(\.\d+)?$/.test(lastClicked.value)
-    ) {
-      lastValue = Number(lastClicked.value);
-    } else {
-      lastValue = lastClicked.value;
-    }
-
-    // Always normalize current selection to an array
-    let current: (string | number | Record<string, unknown>)[] = [];
-    if (Array.isArray(multiSelectModel.value)) {
-      current = [...multiSelectModel.value];
-    } else if (
-      multiSelectModel.value !== undefined &&
-      multiSelectModel.value !== null &&
-      multiSelectModel.value !== ''
-    ) {
-      current = [multiSelectModel.value];
-    }
-
-    // Find if already selected (deep compare for objects, strict for primitives)
-    const isSelected = current.some((sel) => {
-      if (typeof sel === 'object' && typeof lastValue === 'object') {
-        return JSON.stringify(sel) === JSON.stringify(lastValue);
+    const selectedValues = multiSelectedItems.map((item) => {
+      if (typeof item.value === 'string' && item.value.startsWith('{') && item.value.endsWith('}')) {
+        try {
+          return JSON.parse(item.value);
+        } catch {
+          return item.value;
+        }
       }
-      return sel === lastValue;
-    });
 
-    if (isSelected) {
-      // Remove from selection
-      current = current.filter((sel) => {
-        if (typeof sel === 'object' && typeof lastValue === 'object') {
-          return JSON.stringify(sel) !== JSON.stringify(lastValue);
-        }
-        return sel !== lastValue;
-      });
-    } else {
-      // Add to selection
-      current.push(lastValue);
-    }
+      return item.value;
+    });
 
     hasUserSelected.value = true;
-    multiSelectModel.value = current;
+    multiSelectModel.value = selectedValues;
     multiSelectPopperState.value = true;
-    // Clone inputText to backup after selection
-    inputTextBackup.value = inputText.value;
+    inputTextBackup.value =
+      multiSelectedItems.length > 3
+        ? `${multiSelectedItems.length} items selected`
+        : multiSelectedItems.map((item) => item.text).join(', ');
+
+    updateMultiSelectedItemsFromValue();
   };
 
-  // Update multi-selected items when model value changes externally
+  /**
+   * Updates the selected items in the multi-select based on the current model value.
+   * Handles stringified objects and updates the input text accordingly.
+   */
   const updateMultiSelectedItemsFromValue = () => {
-    if (!multiSelectMenuList.value.length) return;
+    if (!multiSelectOptions.value.length) return;
 
     const values = normalizedValue.value;
 
     if (!values || !values.length) {
       multiSelectedListItems.value = [];
-
-      // Always clear inputText and backup if nothing is selected
       inputText.value = '';
       inputTextBackup.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);
-
-    multiSelectedListItems.value = multiSelectMenuList.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>;
-
-            if (v.original === originalObj) return true;
+    multiSelectedListItems.value = multiSelectOptions.value.filter((item) => {
+      return values.some((val) => {
+        let itemVal = item.value;
+        let valToCompare = val;
 
-            const itemJson = JSON.stringify(originalObj);
-
-            if (v.string === itemJson) return true;
+        if (typeof itemVal === 'string' && itemVal.startsWith('{') && itemVal.endsWith('}')) {
+          try {
+            itemVal = JSON.parse(itemVal);
+          } catch {
+            // ignore
+          }
+        }
 
-            if (v.id !== undefined && 'id' in originalObj) {
-              return v.id === originalObj.id;
-            }
+        if (typeof valToCompare === 'string' && valToCompare.startsWith('{') && valToCompare.endsWith('}')) {
+          try {
+            valToCompare = JSON.parse(valToCompare);
+          } catch {
+            // ignore
           }
-          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));
-      }
+        if (typeof itemVal === 'object' && typeof valToCompare === 'object') {
+          return JSON.stringify(itemVal) === JSON.stringify(valToCompare);
+        }
+
+        return itemVal == valToCompare;
+      });
     });
 
-    // Only update inputText if not searching
-    if (!isSearching.value) {
-      if (multiSelectedListItems.value.length > 3) {
-        inputText.value = `${multiSelectedListItems.value.length} items selected`;
-      } else {
-        inputText.value = multiSelectedListItems.value.map((item) => item.text).join(', ');
-      }
+    if (multiSelectedListItems.value.length > 3) {
+      inputText.value = `${multiSelectedListItems.value.length} items selected`;
+    } else {
+      inputText.value = multiSelectedListItems.value.map((item) => item.text).join(', ');
+    }
 
-      // Only use displayText.value if user hasn't selected anything yet
-      if (displayText.value && !hasUserSelected.value && (!inputText.value || inputText.value === '')) {
-        inputText.value = displayText.value;
-        inputTextBackup.value = displayText.value;
-      } else {
-        // Always update backup to match inputText if not searching
-        inputTextBackup.value = inputText.value;
-      }
+    // Always update backup to match inputText after update
+    inputTextBackup.value = inputText.value;
+
+    if (displayText.value && !hasUserSelected.value && (!inputText.value || inputText.value === '')) {
+      inputText.value = displayText.value;
+      inputTextBackup.value = displayText.value;
     }
   };
 
+  /**
+   * Clears the selection and input text, and closes the multi-select.
+   */
   const handleClear = () => {
-    emit('update:modelValue', '');
+    emit('update:modelValue', []);
 
     inputText.value = '';
-
     multiSelectPopperState.value = false;
   };
 
@@ -332,14 +224,22 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     updateMultiSelectedItemsFromValue();
   });
 
-  watch(multiSelectMenuList, () => {
+  watch(multiSelectOptions, () => {
+    updateMultiSelectedItemsFromValue();
+  });
+
+  /**
+   * Handles closing the multi-select when clicking outside.
+   */
+  onClickOutside(multiSelectRef, () => {
+    multiSelectPopperState.value = false;
+
     updateMultiSelectedItemsFromValue();
   });
 
   onMounted(() => {
-    processMenuList();
+    processOptions();
 
-    // Set initial multi-selected items based on model value
     if (normalizedValue.value.length > 0) {
       updateMultiSelectedItemsFromValue();
     } else if (displayText.value) {
@@ -353,15 +253,12 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     multiSelectPopperState,
     multiSelectRef,
     multiSelectModel,
-    multiSelectMenuList,
-    filteredMultiSelectMenuList,
+    multiSelectOptions,
     multiSelectedListItems,
     inputText,
     isMultiSelectPopperDisabled,
-    isSearching,
     handleMultiSelectedItem,
-    handleSearch,
     handleClear,
-    handleMenuToggle,
+    handleOptionsToggle,
   };
 };

package/src/components/select/select.ts

@@ -34,9 +34,9 @@ export const selectPropTypes = {
     type: [String, Number, Object, Array] as PropType<
       string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[]
     >,
-    default: () => [],
+    default: '',
   },
-  menuList: {
+  options: {
     type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
     required: true,
     default: [],

package/src/components/select/select.vue

@@ -23,7 +23,7 @@
         width: props.width,
       }"
     >
-      <div @click="handleMenuToggle">
+      <div @click="handleOptionsToggle">
         <spr-input
           v-model="inputText"
           :class="{
@@ -52,14 +52,14 @@
         </spr-input>
 
         <select
-          v-if="selectMenuList && selectMenuList.length"
+          v-if="selectOptions && selectOptions.length"
           :value="Array.isArray(selectModel) ? selectModel[0] : selectModel"
           data-testid="qa-hidden-select"
           tabindex="-1"
           aria-hidden="true"
           hidden
         >
-          <option v-for="item in selectMenuList" :key="item.value" :value="item.value">
+          <option v-for="item in selectOptions" :key="item.value" :value="item.value">
             {{ item.text }}
           </option>
         </select>
@@ -79,10 +79,10 @@
         >
           <template v-if="isSearching">
             <template v-if="!props.disabledLocalSearch">
-              <template v-if="filteredSelectMenuList.length > 0">
+              <template v-if="filteredSelectOptions.length > 0">
                 <spr-list
                   v-model="selectedListItems"
-                  :menu-list="filteredSelectMenuList"
+                  :menu-list="filteredSelectOptions"
                   :group-items-by="props.groupItemsBy"
                   :pre-selected-items="Array.isArray(selectModel) ? selectModel.flat() : [selectModel]"
                   @update:model-value="handleSelectedItem"
@@ -95,10 +95,10 @@
               </template>
             </template>
             <template v-else>
-              <template v-if="selectMenuList.length > 0">
+              <template v-if="selectOptions.length > 0">
                 <spr-list
                   v-model="selectedListItems"
-                  :menu-list="selectMenuList"
+                  :menu-list="selectOptions"
                   :group-items-by="props.groupItemsBy"
                   :pre-selected-items="Array.isArray(selectModel) ? selectModel.flat() : [selectModel]"
                   @update:model-value="handleSelectedItem"
@@ -112,10 +112,10 @@
             </template>
           </template>
           <template v-else>
-            <template v-if="selectMenuList.length > 0">
+            <template v-if="selectOptions.length > 0">
               <spr-list
                 v-model="selectedListItems"
-                :menu-list="selectMenuList"
+                :menu-list="selectOptions"
                 :group-items-by="props.groupItemsBy"
                 :pre-selected-items="Array.isArray(selectModel) ? selectModel.flat() : [selectModel]"
                 @update:model-value="handleSelectedItem"
@@ -154,8 +154,8 @@ const {
   selectPopperState,
   selectRef,
   selectModel,
-  selectMenuList,
-  filteredSelectMenuList,
+  selectOptions,
+  filteredSelectOptions,
   selectedListItems,
   inputText,
   isSelectPopperDisabled,
@@ -163,6 +163,6 @@ const {
   handleSelectedItem,
   handleSearch,
   handleClear,
-  handleMenuToggle,
+  handleOptionsToggle,
 } = useSelect(props, emit);
 </script>