design-system-next 2.9.3 → 2.9.5

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

@@ -23,46 +23,60 @@
         width: props.width,
       }"
     >
-      <div @click="handleOptionsToggle">
-        <spr-input
-          v-model="inputText"
-          :class="{
-            'spr-cursor-pointer': true,
+      <div ref="multiSelectRef">
+        <div @click="handleOptionsToggle">
+          <spr-input
+            v-model="inputText"
+            :id="props.id"
+            :class="{
+              'spr-cursor-pointer': true,
+            }"
+            :placeholder="props.placeholder"
+            autocomplete="off"
+            :helper-text="props.helperText"
+            :helper-icon="props.helperIcon"
+            :display-helper="props.displayHelper"
+            :active="props.active"
+            :readonly="true"
+            :disabled="props.disabled"
+            :error="props.error"
+          >
+            <template #icon>
+              <div class="spr-flex spr-items-center spr-gap-1">
+                <Icon
+                  v-if="props.clearable && inputText"
+                  class="spr-cursor-pointer"
+                  icon="ph:x"
+                  @click.stop="handleClear"
+                />
+                <Icon icon="ph:caret-down" />
+              </div>
+            </template>
+
+            <template #helperMessage>
+              <slot name="helperMessage" />
+            </template>
+          </spr-input>
+
+          <!-- Hidden Select for QA automation -->
+          <select v-if="multiSelectOptions && multiSelectOptions.length" v-model="multiSelectModel" multiple hidden>
+            <option v-for="option in multiSelectOptions" :key="option.value" :value="option.value">
+              {{ option.text }}
+            </option>
+          </select>
+        </div>
+
+        <!-- This div used to poppulate popper menu -->
+        <div
+          :id="props.id"
+          :style="{
+            width: props.popperWidth,
           }"
-          :placeholder="props.placeholder"
-          :readonly="true"
-          :disabled="props.disabled"
-          autocomplete="off"
-          :helper-text="props.helperText"
-          :helper-icon="props.helperIcon"
-          :display-helper="props.displayHelper"
-        >
-          <template #icon>
-            <div class="spr-flex spr-items-center spr-gap-1">
-              <Icon
-                v-if="props.clearable && inputText"
-                class="spr-cursor-pointer"
-                icon="ph:x"
-                @click.stop="handleClear"
-              />
-              <Icon icon="ph:caret-down" />
-            </div>
-          </template>
-        </spr-input>
+        ></div>
       </div>
 
-      <div
-        :id="props.id"
-        :style="{
-          width: props.popperWidth,
-        }"
-      ></div>
-
       <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"
-        >
+        <div 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="multiSelectOptions.length > 0">
             <spr-list
               v-model="multiSelectedListItems"

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

@@ -118,7 +118,7 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
    * Opens the multi-select options.
    */
   const handleOptionsToggle = () => {
-    multiSelectPopperState.value = true;
+    multiSelectPopperState.value = !multiSelectPopperState.value;
   };
 
   /**
@@ -140,7 +140,6 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
 
     hasUserSelected.value = true;
     multiSelectModel.value = selectedValues;
-    multiSelectPopperState.value = true;
     inputTextBackup.value =
       multiSelectedItems.length > 3
         ? `${multiSelectedItems.length} items selected`
@@ -224,9 +223,23 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     updateMultiSelectedItemsFromValue();
   });
 
-  watch(multiSelectOptions, () => {
-    updateMultiSelectedItemsFromValue();
-  });
+  watch(
+    multiSelectOptions,
+    () => {
+      updateMultiSelectedItemsFromValue();
+    },
+    { deep: true },
+  );
+
+  // Add watcher for options prop to re-process options when changed
+  watch(
+    options,
+    () => {
+      processOptions();
+      updateMultiSelectedItemsFromValue();
+    },
+    { deep: true },
+  );
 
   /**
    * Handles closing the multi-select when clicking outside.

package/src/components/select/select.ts

@@ -29,6 +29,7 @@ export const selectPropTypes = {
   id: {
     type: String,
     required: true,
+    default: 'select',
   },
   modelValue: {
     type: [String, Number, Object, Array] as PropType<
@@ -102,10 +103,18 @@ export const selectPropTypes = {
     type: String,
     default: '',
   },
+  active: {
+    type: Boolean,
+    default: false,
+  },
   disabled: {
     type: Boolean,
     default: false,
   },
+  error: {
+    type: Boolean,
+    default: false,
+  },
   clearable: {
     type: Boolean,
     default: false,

package/src/components/select/select.vue

@@ -23,58 +23,69 @@
         width: props.width,
       }"
     >
-      <div @click="handleOptionsToggle">
-        <spr-input
-          v-model="inputText"
-          :class="{
-            'spr-cursor-pointer': !props.searchable,
-          }"
-          :placeholder="props.placeholder"
-          :readonly="!props.searchable"
-          :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">
-              <Icon
-                v-if="props.clearable && inputText"
-                class="spr-cursor-pointer"
-                icon="ph:x"
-                @click.stop="handleClear"
-              />
-              <Icon icon="ph:caret-down" />
-            </div>
-          </template>
-        </spr-input>
+      <div ref="selectRef">
+        <div @click="handleOptionsToggle">
+          <spr-input
+            :id="props.id"
+            v-model="inputText"
+            :class="{
+              'spr-cursor-pointer': !props.searchable,
+            }"
+            :placeholder="props.placeholder"
+            autocomplete="off"
+            :helper-text="props.helperText"
+            :helper-icon="props.helperIcon"
+            :display-helper="props.displayHelper"
+            :active="props.active"
+            :readonly="!props.searchable"
+            :disabled="props.disabled"
+            :error="props.error"
+            @keyup="handleSearch"
+          >
+            <template #icon>
+              <div class="spr-flex spr-cursor-pointer spr-items-center">
+                <Icon
+                  v-if="props.clearable && inputText"
+                  class="spr-cursor-pointer"
+                  icon="ph:x"
+                  @click.stop="handleClear"
+                />
+                <Icon icon="ph:caret-down" />
+              </div>
+            </template>
 
-        <select
-          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 selectOptions" :key="item.value" :value="item.value">
-            {{ item.text }}
-          </option>
-        </select>
-      </div>
+            <template #helperMessage>
+              <slot name="helperMessage" />
+            </template>
+          </spr-input>
+
+          <!-- Hidden Select for QA automation -->
+          <select
+            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 selectOptions" :key="item.value" :value="item.value">
+              {{ item.text }}
+            </option>
+          </select>
+        </div>
 
-      <div
-        :id="props.id"
-        :style="{
-          width: props.popperWidth,
-        }"
-      ></div>
+        <!-- This div used to poppulate popper menu -->
+        <div
+          :id="props.id"
+          :style="{
+            width: props.popperWidth,
+          }"
+        ></div>
+      </div>
 
       <template #popper>
         <div
-          ref="selectRef"
+          ref="selectPopperRef"
           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">
@@ -153,6 +164,7 @@ const {
   selectClasses,
   selectPopperState,
   selectRef,
+  selectPopperRef,
   selectModel,
   selectOptions,
   filteredSelectOptions,

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

@@ -34,6 +34,7 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
   const isSelectPopperDisabled = computed(() => disabled.value);
 
   // Select Variables
+  const selectPopperRef = ref<HTMLDivElement | null>(null);
   const selectModel = useVModel(props, 'modelValue', emit);
   const selectedListItems = ref<MenuListType[]>();
   const selectOptions = ref<MenuListType[]>([]);
@@ -44,12 +45,6 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
   const inputTextBackup = ref<string | number>('');
   const isSearching = ref<boolean>(false);
 
-  const handleOptionsToggle = () => {
-    selectPopperState.value = true;
-
-    isSearching.value = false;
-  };
-
   // Normalized value for internal use - always an array
   const normalizedValue = computed(() => {
     // If already an array, use it
@@ -147,14 +142,6 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     return selectOptions.value.filter((item) => item.text?.toString().toLowerCase().includes(query));
   });
 
-  watch(
-    options,
-    () => {
-      processOptions();
-    },
-    { deep: true },
-  );
-
   // Search handler: always emit search-string, but only filter locally if local search is enabled
   const handleSearch = () => {
     isSearching.value = true;
@@ -166,24 +153,12 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     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;
-    }
+  // Toggle options popper state
+  const handleOptionsToggle = () => {
+    selectPopperState.value = !selectPopperState.value;
 
     isSearching.value = false;
-  });
-
-  useInfiniteScroll(
-    selectRef,
-    () => {
-      emit('infinite-scroll-trigger', true);
-    },
-    { distance: 10 },
-  );
+  };
 
   // Handle selected item for simple list component
   const handleSelectedItem = (selectedItems: MenuListType[]) => {
@@ -336,6 +311,33 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     updateSelectedItemsFromValue();
   });
 
+  watch(
+    options,
+    () => {
+      processOptions();
+    },
+    { deep: true },
+  );
+
+  onClickOutside(selectRef, () => {
+    selectPopperState.value = false;
+
+    // If user was searching, restore inputText from backup
+    if (isSearching.value) {
+      inputText.value = inputTextBackup.value;
+    }
+
+    isSearching.value = false;
+  });
+
+  useInfiniteScroll(
+    selectPopperRef,
+    () => {
+      emit('infinite-scroll-trigger', true);
+    },
+    { distance: 10 },
+  );
+
   onMounted(() => {
     processOptions();
 
@@ -351,8 +353,8 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
   return {
     selectClasses,
     selectPopperState,
-    handleOptionsToggle,
     selectRef,
+    selectPopperRef,
     selectModel: compatPreSelectedItems, // Use compatible format for lists
     selectOptions,
     filteredSelectOptions,
@@ -360,6 +362,7 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     inputText,
     isSelectPopperDisabled,
     isSearching,
+    handleOptionsToggle,
     handleSelectedItem,
     handleSearch,
     handleClear,