design-system-next 2.7.44 → 2.8.0

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

@@ -1,21 +1,54 @@
-import { ref, toRefs, computed, onMounted, watch } from 'vue';
-import { onClickOutside, useInfiniteScroll, useVModel } from '@vueuse/core';
+import { ref, toRefs, computed, ComputedRef, onMounted, watch } from 'vue';
+import { onClickOutside, useInfiniteScroll, useVModel, useDebounceFn } from '@vueuse/core';
+
+import classNames from 'classnames';
 
 import type { SetupContext } from 'vue';
 import type { SelectPropTypes, SelectEmitTypes } from './select';
 import type { MenuListType } from '../list/list';
 
+interface SelectClasses {
+  baseClasses: string;
+  labelClasses: string;
+}
+
 export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitTypes>['emit']) => {
-  const { menuList, searchString, disabled, textField, valueField } = toRefs(props);
+  const { displayText, menuList, disabled, textField, valueField, disabledLocalSearch } = toRefs(props);
+
+  const selectClasses: ComputedRef<SelectClasses> = computed(() => {
+    const baseClasses = classNames('spr-flex spr-flex-col spr-gap-size-spacing-4xs');
+
+    const labelClasses = classNames('spr-body-sm-regular spr-text-color-strong spr-block', {
+      'spr-text-color-on-fill-disabled': disabled.value,
+    });
+
+    return {
+      baseClasses,
+      labelClasses,
+    };
+  });
 
+  // Popper Variables
   const selectRef = ref<HTMLDivElement | null>(null);
   const selectPopperState = ref<boolean>(false);
   const isSelectPopperDisabled = computed(() => disabled.value);
 
+  // Select Variables
   const selectModel = useVModel(props, 'modelValue', emit);
-  const inputText = ref('');
-  const selectedListItems = ref<MenuListType[]>([]);
+  const selectedListItems = ref<MenuListType[]>();
   const selectMenuList = 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 = () => {
+    selectPopperState.value = true;
+
+    isSearching.value = false;
+  };
 
   // Normalized value for internal use - always an array
   const normalizedValue = computed(() => {
@@ -35,21 +68,20 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
 
   // Compatibility layer for pre-selected items (List component expects string[] format)
   const compatPreSelectedItems = computed(() => {
-    return selectModel.value !== undefined && selectModel.value !== null
-      ? [
-          typeof selectModel.value === 'object'
-            ? selectModel.value
-            : typeof selectModel.value === 'number'
-              ? selectModel.value
-              : selectModel.value.toString(),
-        ]
-      : [];
+    if (selectModel.value === undefined || selectModel.value === null) return [];
+
+    if (Array.isArray(selectModel.value)) {
+      return selectModel.value;
+    }
+
+    return [selectModel.value];
   });
 
   const processMenuList = () => {
     // Handle empty array or non-array values
     if (!menuList.value || !Array.isArray(menuList.value) || menuList.value.length === 0) {
       selectMenuList.value = [];
+
       return;
     }
 
@@ -71,6 +103,7 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
         text: item.toString(),
         value: item, // Keep the value as a number instead of converting to string
       }));
+
       return;
     }
 
@@ -99,105 +132,45 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
       return;
     }
 
-    // Default fallback
     selectMenuList.value = menuList.value as MenuListType[];
   };
 
-  watch(menuList, () => {
-    processMenuList();
-  });
-
-  const handleSearch = () => {
-    if (menuList.value && menuList.value.length === 0) {
-      return;
+  const filteredSelectMenuList = computed(() => {
+    if (disabledLocalSearch.value) {
+      return selectMenuList.value;
     }
 
-    if (!multiSelect.value) {
-      singleSelectSearch();
-    } else {
-      // Process menu list for searching
-      processMenuList();
+    const query = inputText.value.toString().toLowerCase().trim();
 
-      // Handle multi-select search - filter based on search string
-      if (searchString.value.trim() !== '') {
-        selectMenuList.value = getFilteredMenuList(selectMenuList.value);
-      }
-    }
-  };
+    if (!query) return selectMenuList.value;
 
-  const singleSelectSearch = () => {
-    if (props.ladderized) {
-      ladderizedSearch();
-    } else {
-      basicSearch();
-    }
-  };
+    return selectMenuList.value.filter((item) => item.text?.toString().toLowerCase().includes(query));
+  });
 
-  const basicSearch = () => {
-    // Process menu list first
+  watch(menuList, () => {
     processMenuList();
+  });
 
-    // Then filter based on search string
-    if (searchString.value.trim() !== '') {
-      selectMenuList.value = getFilteredMenuList(selectMenuList.value);
-    }
-  };
-
-  const ladderizedSearch = () => {
-    //revert to initial list if search string is empty or selectModel is not empty
-    if (searchString.value === '' || normalizedValue.value.length > 0) {
-      selectMenuList.value = [...menuList.value] as MenuListType[];
-      return;
-    }
-
-    const menuListSubLevels = getAllSublevelItems(menuList.value as MenuListType[]);
-
-    const filteredMenuList = getFilteredMenuList(menuList.value as MenuListType[]);
-    const filteredMenuListSubLevels = getFilteredMenuList(menuListSubLevels);
-
-    if (filteredMenuList.length > 0) {
-      //if there is a match at the top level of the menuList
-      selectMenuList.value = getAllSublevelItems(filteredMenuList);
-    } else if (filteredMenuListSubLevels.length > 0) {
-      //if there is a match at the 2nd level (sublevel of a menuList item) of the menuList
-      selectMenuList.value = filteredMenuListSubLevels;
-    } else {
-      selectMenuList.value = [];
-    }
-  };
-
-  // 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<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: typeof currentItem.value === 'string' ? currentItem.value : String(currentItem.value), // value of parent of a sublevel item as string
-        }));
-
-        return [...currentValue, ...mappedSublevel];
-      }
-
-      return currentValue;
-    }, [] as MenuListType[]);
-  };
+  // Search handler: always emit search-string, but only filter locally if local search is enabled
+  const handleSearch = () => {
+    isSearching.value = true;
 
-  // filter list based on search string and menuList/sublevel texts
-  const getFilteredMenuList = (list: MenuListType[]) => {
-    return list.filter((item: MenuListType) => {
-      const searchTerm = searchString.value.toLowerCase().trim();
-      return item.text.toLowerCase().includes(searchTerm);
-    });
+    debouncedEmitSearch();
   };
 
-  watch(searchString, () => {
-    handleSearch();
-  });
+  const debouncedEmitSearch = useDebounceFn(() => {
+    emit('search-string', inputText.value);
+  }, 300);
 
   onClickOutside(selectRef, () => {
     selectPopperState.value = false;
+
+    // If user was searching, restore inputText from backup
+    if (isSearching.value) {
+      inputText.value = inputTextBackup.value;
+    }
+
+    isSearching.value = false;
   });
 
   useInfiniteScroll(
@@ -210,114 +183,40 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
 
   // Handle selected item for simple list component
   const handleSelectedItem = (selectedItems: MenuListType[]) => {
-    if (!props.ladderized) {
-      // 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;
-          }
+    if (selectedItems.length === 0) {
+      selectModel.value = '';
 
-          // For simple types, handle value type conversion properly
-          const val = item.value;
+      return;
+    }
 
-          // If it's already a number, keep it as a number
-          if (typeof val === 'number') {
-            return val;
-          }
+    hasUserSelected.value = true; // User has now made a selection
 
-          // 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);
-            }
-          }
+    const item = selectedItems[0];
 
-          // Return the original value for all other cases
-          return val;
-        });
+    // If we stored the original object, use it
+    if ('_originalObject' in item) {
+      selectModel.value = item._originalObject as Record<string, unknown>;
+    } else {
+      // For simple types, return the value (try to convert number strings to numbers)
+      const itemValue = item.value;
+      const itemText = item.text || '';
 
-        selectModel.value = values as (string | number | Record<string, unknown>)[];
+      if (typeof itemValue === 'string' && !isNaN(Number(itemValue)) && itemValue.trim() !== '') {
+        selectModel.value = Number(itemValue);
       } else {
-        // For single-select
-        if (selectedItems.length === 0) {
-          selectModel.value = props.multiSelect ? [] : '';
-          return;
-        }
-
-        const item = selectedItems[0];
-
-        // If we stored the original object, use it
-        if ('_originalObject' in item) {
-          selectModel.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() !== '') {
-            selectModel.value = Number(val);
-          } else {
-            selectModel.value = val;
-          }
-        }
+        selectModel.value = itemValue;
       }
-    } else if (props.ladderized) {
-      if (props.searchString !== '') {
-        // generate select value if ladderized with search string
-        const subvalue = selectedItems[0]?.subvalue;
-        const value = selectedItems[0]?.value;
-        if (subvalue !== undefined && value !== undefined) {
-          selectModel.value = [subvalue, value] as [string, string | number];
-        }
-      } else {
-        // For regular ladderized select selection without search
-        if (selectedItems.length > 0) {
-          const item = selectedItems[0];
-          // Use the value directly for ladderized items
-          if (item && item.value) {
-            selectModel.value = item.value;
-          }
-        }
-      }
-    }
 
-    // Always close select for single selection, regardless of value type
-    if (!multiSelect.value) {
-      setTimeout(() => {
-        selectPopperState.value = false;
-      }, 10);
+      inputText.value = itemText;
     }
-  };
 
-  // Handle selected item for ladderized list component
-  const handleSelectedLadderizedItem = (selectedItems: string[]) => {
-    // Update the model value with the selected ladderized items
-    if (selectedItems.length > 0) {
-      selectModel.value = selectedItems;
-    }
+    // Clone inputText to backup after selection
+    inputTextBackup.value = inputText.value;
 
-    // If item is from last sublevel, close the select
-    if (checkIfItemFromLastSublevel(selectedItems)) {
+    // Always close select for single selection
+    setTimeout(() => {
       selectPopperState.value = false;
-    }
-  };
-
-  const checkIfItemFromLastSublevel = (selectedItems: string[]) => {
-    let selectedItemsObject = selectMenuList.value;
-
-    // Traverse to the last item in the selectedItems array
-    selectedItems.forEach((selectedItem) => {
-      selectedItemsObject = selectedItemsObject.find((item) => selectedItem === item.value)?.sublevel ?? [];
-    });
-
-    // If there is a sublevel, return false
-    if (selectedItemsObject.length > 0) {
-      return false;
-    }
-
-    return true;
+    }, 10);
   };
 
   // Update selected items when model value changes externally
@@ -325,8 +224,26 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     if (!selectMenuList.value.length) return;
 
     const values = normalizedValue.value;
+
     if (!values || !values.length) {
       selectedListItems.value = [];
+
+      // Only set displayText if user hasn't typed anything
+      if (
+        displayText.value &&
+        !hasUserSelected.value &&
+        !isSearching.value &&
+        (!inputText.value || inputText.value === '')
+      ) {
+        inputText.value = displayText.value;
+
+        // Clone displayText to backup if present
+        inputTextBackup.value = displayText.value;
+      } else if (!hasUserSelected.value && (!inputText.value || inputText.value === '')) {
+        inputText.value = '';
+        inputTextBackup.value = '';
+      }
+
       return;
     }
 
@@ -355,63 +272,57 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     // Extract just string values for comparison
     const valueStrings = valueData.map((v) => v.string);
 
-    if (props.ladderized) {
-      // Special handling for ladderized selects
-      if (Array.isArray(selectModel.value) && selectModel.value.length === 2) {
-        // Handle [subvalue, value] format used in ladderized selects with search
-        const subvalue = selectModel.value[0]?.toString() || '';
-        const value = selectModel.value[1]?.toString() || '';
+    selectedListItems.value = selectMenuList.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>;
 
-        selectedListItems.value = selectMenuList.value.filter((item) => {
-          return item.value === value && (!item.subvalue || item.subvalue === subvalue);
-        });
-      } else {
-        // Regular ladderized select value
-        selectedListItems.value = selectMenuList.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));
+            if (v.original === originalObj) return true;
+
+            const itemJson = JSON.stringify(originalObj);
+
+            if (v.string === itemJson) return true;
+
+            if (v.id !== undefined && 'id' in originalObj) {
+              return v.id === originalObj.id;
+            }
           }
+          return false;
         });
       }
-    } else {
-      // Regular Select value
-      selectedListItems.value = selectMenuList.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));
-        }
-      });
+
+      // 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));
+      }
+    });
+
+    // Only update inputText if not searching
+    if (!isSearching.value) {
+      inputText.value = selectedListItems.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;
+      }
     }
   };
 
+  const handleClear = () => {
+    emit('update:modelValue', '');
+
+    inputText.value = '';
+  };
+
   watch(selectModel, () => {
     updateSelectedItemsFromValue();
   });
@@ -426,20 +337,26 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     // Set initial selected items based on model value
     if (normalizedValue.value.length > 0) {
       updateSelectedItemsFromValue();
+    } else if (displayText.value) {
+      inputText.value = displayText.value;
+      inputTextBackup.value = displayText.value;
     }
   });
 
   return {
+    selectClasses,
     selectPopperState,
+    handleMenuToggle,
     selectRef,
-    inputText,
+    selectModel: compatPreSelectedItems, // Use compatible format for lists
     selectMenuList,
-    isSelectPopperDisabled,
+    filteredSelectMenuList,
     selectedListItems,
+    inputText,
+    isSelectPopperDisabled,
+    isSearching,
     handleSelectedItem,
-    handleSelectedLadderizedItem,
-    selectModel: compatPreSelectedItems, // Use compatible format for lists
-    removeCurrentLevelInBackLabel,
-    isLadderizedSearch,
+    handleSearch,
+    handleClear,
   };
 };

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

@@ -1,122 +0,0 @@
-// import type { PropType, ExtractPropTypes } from 'vue';
-// import type { MenuListType } from '../list/list';
-
-// export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-// const GROUPED_ITEMS_BY_TYPES = ['A-Z', 'Z-A'] as const;
-
-// const PLACEMENTS_TYPES = [
-//   'auto',
-//   'auto-start',
-//   'auto-end',
-//   'top',
-//   'top-start',
-//   'top-end',
-//   'right',
-//   'right-start',
-//   'right-end',
-//   'bottom',
-//   'bottom-start',
-//   'bottom-end',
-//   'left',
-//   'left-start',
-//   'left-end',
-// ] as const;
-
-// const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
-
-// export const selectPropTypes = {
-//   id: {
-//     type: String,
-//     required: true,
-//   },
-//   modelValue: {
-//     type: [String, Number, Object, Array] as PropType<
-//       string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[]
-//     >,
-//     default: () => [],
-//   },
-//   menuList: {
-//     type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
-//     required: true,
-//     default: [],
-//   },
-//   multiSelect: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   groupItemsBy: {
-//     type: String as PropType<(typeof GROUPED_ITEMS_BY_TYPES)[number]>,
-//     validator: (value: (typeof GROUPED_ITEMS_BY_TYPES)[number] | undefined) => {
-//       return value === undefined || GROUPED_ITEMS_BY_TYPES.includes(value);
-//     },
-//   },
-//   textField: {
-//     type: String,
-//     default: 'text',
-//     description: 'Field name to use for display text when using dynamic object arrays',
-//   },
-//   valueField: {
-//     type: String,
-//     default: 'value',
-//     description: 'Field name to use for value when using dynamic object arrays',
-//   },
-//   placeholder: {
-//     type: String,
-//   },
-//   searchString: {
-//     type: String,
-//     default: '',
-//   },
-//   placement: {
-//     type: String as PropType<(typeof PLACEMENTS_TYPES)[number]>,
-//     validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
-//     default: 'bottom',
-//   },
-//   popperStrategy: {
-//     type: String,
-//     validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
-//     default: 'absolute',
-//   },
-//   popperWidth: {
-//     type: String,
-//     default: '100%',
-//   },
-//   width: {
-//     type: String,
-//     default: '100%',
-//   },
-//   wrapperPosition: {
-//     type: String,
-//     default: 'relative',
-//   },
-//   disabled: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   readonly: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   ladderized: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   removeCurrentLevelInBackLabel: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   disabled: {
-//     type: Boolean,
-//     default: false,
-//   },
-// };
-
-// export const selectEmitTypes = {
-//   'infinite-scroll-trigger': Boolean,
-//   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-//   'update:modelValue': (_value: unknown) => true, // Accept any type of value
-// };
-
-// export type SelectPropTypes = ExtractPropTypes<typeof selectPropTypes>;
-// export type SelectEmitTypes = typeof selectEmitTypes;