design-system-next 2.8.1 → 2.8.3

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

@@ -1,5 +1,5 @@
-import { ref, computed, watch } from 'vue';
-import { useDebounceFn, onClickOutside } from '@vueuse/core';
+import { ref, toRefs, computed, watch } from 'vue';
+import { useVModel, useDebounceFn, onClickOutside } from '@vueuse/core';
 
 import type { SelectLadderizedPropTypes } from './select-ladderized';
 
@@ -9,6 +9,8 @@ export const useSelectLadderized = (
   props: SelectLadderizedPropTypes,
   emit: (event: string, ...args: unknown[]) => void,
 ) => {
+  const { options, disabled } = toRefs(props);
+
   const ladderizedClasses = computed(() => ({
     baseClasses: 'spr-flex spr-flex-col spr-gap-size-spacing-4xs',
     labelClasses: 'spr-body-sm-regular spr-text-color-strong spr-block',
@@ -17,14 +19,11 @@ export const useSelectLadderized = (
   // Popper Variables
   const ladderizedSelectPopperState = ref(false);
   const ladderizedSelectRef = ref(null);
-  const isLadderizedSelectPopperDisabled = computed(() => props.disabled);
+  const isLadderizedSelectPopperDisabled = computed(() => disabled.value);
 
   // Ladderized Select Model
-  const ladderizedSelectModel = computed({
-    get: () => props.modelValue,
-    set: (val) => emit('update:modelValue', val),
-  });
-  const ladderizedSelectMenuList = computed(() => props.menuList);
+  const ladderizedSelectModel = useVModel(props, 'modelValue', emit);
+  const ladderizedSelectOptions = computed(() => options.value);
 
   // Input Variables
   const inputText = ref<string>('');
@@ -76,11 +75,11 @@ export const useSelectLadderized = (
         return undefined;
       };
 
-      itemToCheck = findItemByValue(ladderizedSelectMenuList.value, selectedItems[selectedItems.length - 1]);
+      itemToCheck = findItemByValue(ladderizedSelectOptions.value, selectedItems[selectedItems.length - 1]);
     }
 
     if (itemToCheck) {
-      const path = findPathToValue(ladderizedSelectMenuList.value, itemToCheck.value);
+      const path = findPathToValue(ladderizedSelectOptions.value, itemToCheck.value);
 
       inputText.value = path ? path.join(' > ') : itemToCheck.text || '';
 
@@ -110,7 +109,7 @@ export const useSelectLadderized = (
     emit('update:modelValue', []);
   };
 
-  const handleMenuToggle = () => {
+  const handleOptionsToggle = () => {
     ladderizedSelectPopperState.value = true;
 
     isSearching.value = false;
@@ -128,7 +127,7 @@ export const useSelectLadderized = (
 
       if (Array.isArray(newVal) && newVal.length > 0) {
         // Treat the array as a single path for ladderized select
-        let currentLevel = ladderizedSelectMenuList.value;
+        let currentLevel = ladderizedSelectOptions.value;
 
         const pathTexts: string[] = [];
 
@@ -153,13 +152,13 @@ export const useSelectLadderized = (
     ladderizedClasses,
     ladderizedSelectPopperState,
     ladderizedSelectRef,
-    ladderizedSelectMenuList,
+    ladderizedSelectOptions,
     isLadderizedSelectPopperDisabled,
     ladderizedSelectModel,
     inputText,
     handleSelectedLadderizedItem,
     handleSearch,
     handleClear,
-    handleMenuToggle,
+    handleOptionsToggle,
   };
 };

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

@@ -36,7 +36,7 @@ export const multiSelectPropTypes = {
     >,
     default: () => [],
   },
-  menuList: {
+  options: {
     type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
     required: true,
     default: [],
@@ -110,22 +110,11 @@ export const multiSelectPropTypes = {
     type: Boolean,
     default: false,
   },
-  searchable: {
-    type: Boolean,
-    default: false,
-  },
-  disabledLocalSearch: {
-    type: Boolean,
-    default: false,
-  },
 };
 
 export const multiSelectEmitTypes = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true,
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  'search-string': (_search: string | number) => true,
 };
 
 export type MultiSelectPropTypes = ExtractPropTypes<typeof multiSelectPropTypes>;

package/src/components/select/select-multiple/select-multiple.vue

@@ -23,20 +23,19 @@
         width: props.width,
       }"
     >
-      <div @click="handleMenuToggle">
+      <div @click="handleOptionsToggle">
         <spr-input
           v-model="inputText"
           :class="{
-            'spr-cursor-pointer': !props.searchable,
+            'spr-cursor-pointer': true,
           }"
           :placeholder="props.placeholder"
-          :readonly="!props.searchable"
+          :readonly="true"
           :disabled="props.disabled"
           autocomplete="off"
           :helper-text="props.helperText"
           :helper-icon="props.helperIcon"
           :display-helper="props.displayHelper"
-          @keyup="handleSearch"
         >
           <template #icon>
             <div class="spr-flex spr-items-center spr-gap-1">
@@ -59,76 +58,25 @@
         }"
       ></div>
 
-      <select
-        :id="`${props.id}-multiple-select`"
-        tabindex="-1"
-        aria-hidden="true"
-        data-qa="multi-select-hidden"
-        multiple
-        hidden
-      >
-        <option v-for="item in multiSelectedListItems" :key="item.value" :value="item.value" selected>
-          {{ item.text }}
-        </option>
-      </select>
-
       <template #popper>
         <div
           ref="multiSelectRef"
           class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden spr-p-2"
         >
-          <template v-if="isSearching">
-            <template v-if="!props.disabledLocalSearch">
-              <template v-if="filteredMultiSelectMenuList.length > 0">
-                <spr-list
-                  v-model="multiSelectedListItems"
-                  :menu-list="filteredMultiSelectMenuList"
-                  :group-items-by="props.groupItemsBy"
-                  :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
-                  multi-select
-                  @update:model-value="handleMultiSelectedItem"
-                />
-              </template>
-              <template v-else>
-                <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
-                  <span class="spr-body-sm-regular spr-m-0">No results found</span>
-                </div>
-              </template>
-            </template>
-            <template v-else>
-              <template v-if="multiSelectMenuList.length > 0">
-                <spr-list
-                  v-model="multiSelectedListItems"
-                  :menu-list="multiSelectMenuList"
-                  :group-items-by="props.groupItemsBy"
-                  :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
-                  multi-select
-                  @update:model-value="handleMultiSelectedItem"
-                />
-              </template>
-              <template v-else>
-                <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
-                  <span class="spr-body-sm-regular spr-m-0">No results found</span>
-                </div>
-              </template>
-            </template>
+          <template v-if="multiSelectOptions.length > 0">
+            <spr-list
+              v-model="multiSelectedListItems"
+              :menu-list="multiSelectOptions"
+              :group-items-by="props.groupItemsBy"
+              :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
+              multi-select
+              @update:model-value="handleMultiSelectedItem"
+            />
           </template>
           <template v-else>
-            <template v-if="multiSelectMenuList.length > 0">
-              <spr-list
-                v-model="multiSelectedListItems"
-                :menu-list="multiSelectMenuList"
-                :group-items-by="props.groupItemsBy"
-                :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
-                multi-select
-                @update:model-value="handleMultiSelectedItem"
-              />
-            </template>
-            <template v-else>
-              <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
-                <span class="spr-body-sm-regular spr-m-0">No results found</span>
-              </div>
-            </template>
+            <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
+              <span class="spr-body-sm-regular spr-m-0">No results found</span>
+            </div>
           </template>
         </div>
       </template>
@@ -157,15 +105,12 @@ const {
   multiSelectPopperState,
   multiSelectRef,
   multiSelectModel,
-  multiSelectMenuList,
-  filteredMultiSelectMenuList,
+  multiSelectOptions,
   multiSelectedListItems,
   inputText,
   isMultiSelectPopperDisabled,
-  isSearching,
   handleMultiSelectedItem,
-  handleSearch,
   handleClear,
-  handleMenuToggle,
+  handleOptionsToggle,
 } = useMultiSelect(props, emit);
 </script>

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, 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');
@@ -34,20 +34,11 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
 
   const multiSelectModel = useVModel(props, 'modelValue', emit);
   const multiSelectedListItems = ref<MenuListType[]>([]);
-  const multiSelectMenuList = ref<MenuListType[]>([]);
+  const multiSelectOptions = ref<MenuListType[]>([]);
   const hasUserSelected = ref(false);
 
   const inputText = ref<string | number>('');
   const inputTextBackup = ref<string | number>('');
-  const isSearching = ref<boolean>(false);
-
-  /**
-   * Opens the multi-select dropdown menu and resets the searching state.
-   */
-  const handleMenuToggle = () => {
-    multiSelectPopperState.value = true;
-    isSearching.value = false;
-  };
 
   /**
    * Returns the normalized value of the model as an array for internal use.
@@ -65,19 +56,19 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
   });
 
   /**
-   * Processes the menuList prop and normalizes it into MenuListType[] for the dropdown.
+   * Processes the options prop and normalizes it into MenuListType[] for the multi-select.
    */
-  const processMenuList = () => {
-    if (!menuList.value || !Array.isArray(menuList.value) || menuList.value.length === 0) {
-      multiSelectMenuList.value = [];
+  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];
 
     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,7 +77,7 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     }
 
     if (typeof firstItem === 'number') {
-      multiSelectMenuList.value = (menuList.value as Array<number | string | Record<string, unknown>>)
+      multiSelectOptions.value = (options.value as Array<number | string | Record<string, unknown>>)
         .filter((item): item is number => typeof item === 'number')
         .map((item) => ({
           text: item.toString(),
@@ -98,12 +89,12 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
 
     if (typeof firstItem === 'object' && firstItem !== null) {
       if ('text' in firstItem && 'value' in firstItem) {
-        multiSelectMenuList.value = menuList.value as MenuListType[];
+        multiSelectOptions.value = options.value as MenuListType[];
 
         return;
       }
 
-      multiSelectMenuList.value = (menuList.value as Record<string, unknown>[]).map((item) => {
+      multiSelectOptions.value = (options.value as Record<string, unknown>[]).map((item) => {
         const displayText = item[textField.value] !== undefined ? String(item[textField.value]) : 'Unnamed';
 
         let itemValue = valueField.value && item[valueField.value] !== undefined ? item[valueField.value] : item;
@@ -120,53 +111,18 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
       return;
     }
 
-    multiSelectMenuList.value = menuList.value as MenuListType[];
+    multiSelectOptions.value = options.value as MenuListType[];
   };
 
   /**
-   * Returns the filtered menu list based on the search input, or the full list if local search is disabled.
+   * Opens the multi-select options.
    */
-  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));
-  });
-
-  /**
-   * Handles the search input and emits the search-string event (debounced).
-   */
-  const handleSearch = () => {
-    isSearching.value = true;
-
-    debouncedEmitSearch();
+  const handleOptionsToggle = () => {
+    multiSelectPopperState.value = true;
   };
 
   /**
-   * Debounced function to emit the search-string event for remote search.
-   */
-  const debouncedEmitSearch = useDebounceFn(() => {
-    emit('search-string', inputText.value);
-  }, 300);
-
-  /**
-   * Handles closing the dropdown when clicking outside, restoring input text if searching.
-   */
-  onClickOutside(multiSelectRef, () => {
-    multiSelectPopperState.value = false;
-    if (isSearching.value) {
-      inputText.value = inputTextBackup.value;
-    }
-    isSearching.value = false;
-  });
-
-  /**
-   * Handles selection changes from the dropdown and updates the model value.
+   * Handles selection changes from the multi-select and updates the model value.
    * Converts stringified objects back to objects if needed.
    */
   const handleMultiSelectedItem = (multiSelectedItems: MenuListType[]) => {
@@ -178,21 +134,27 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
           return item.value;
         }
       }
+
       return item.value;
     });
 
     hasUserSelected.value = true;
     multiSelectModel.value = selectedValues;
     multiSelectPopperState.value = true;
-    inputTextBackup.value = inputText.value;
+    inputTextBackup.value =
+      multiSelectedItems.length > 3
+        ? `${multiSelectedItems.length} items selected`
+        : multiSelectedItems.map((item) => item.text).join(', ');
+
+    updateMultiSelectedItemsFromValue();
   };
 
   /**
-   * Updates the selected items in the dropdown based on the current model value.
+   * 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;
 
@@ -204,7 +166,7 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
       return;
     }
 
-    multiSelectedListItems.value = multiSelectMenuList.value.filter((item) => {
+    multiSelectedListItems.value = multiSelectOptions.value.filter((item) => {
       return values.some((val) => {
         let itemVal = item.value;
         let valToCompare = val;
@@ -233,30 +195,28 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
       });
     });
 
-    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(', ');
+    }
 
-      if (displayText.value && !hasUserSelected.value && (!inputText.value || inputText.value === '')) {
-        inputText.value = displayText.value;
-        inputTextBackup.value = displayText.value;
-      } else if (hasUserSelected.value) {
-        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 dropdown.
+   * Clears the selection and input text, and closes the multi-select.
    */
   const handleClear = () => {
     emit('update:modelValue', []);
 
     inputText.value = '';
-
     multiSelectPopperState.value = false;
   };
 
@@ -264,12 +224,21 @@ 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();
 
     if (normalizedValue.value.length > 0) {
       updateMultiSelectedItemsFromValue();
@@ -284,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>