design-system-next 2.9.1 → 2.9.4

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

@@ -118,7 +118,9 @@ export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<Calenda
   };
 
   const handleSorting = () => {
-    state.sort.value = state.sort.value === 'desc' ? 'asc' : 'desc';
+    if (state.sort.value === 'asc') state.sort.value = '';
+    else state.sort.value = state.sort.value === 'desc' ? 'asc' : 'desc';
+
     emit('update:sort', state.sort.value);
   };
 

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

@@ -1,164 +1,164 @@
-import { ref, toRefs, computed, watch } from 'vue';
-import { useVModel, useDebounceFn, onClickOutside } from '@vueuse/core';
-
-import type { SelectLadderizedPropTypes } from './select-ladderized';
-
-import type { MenuListType } from '@/components/list/list';
-
-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',
-  }));
-
-  // Popper Variables
-  const ladderizedSelectPopperState = ref(false);
-  const ladderizedSelectRef = ref(null);
-  const isLadderizedSelectPopperDisabled = computed(() => disabled.value);
-
-  // Ladderized Select Model
-  const ladderizedSelectModel = useVModel(props, 'modelValue', emit);
-  const ladderizedSelectOptions = computed(() => options.value);
-
-  // Input Variables
-  const inputText = ref<string>('');
-  const isSearching = ref(false);
-  const wasCleared = ref(false);
-
-  const isLeafNode = (item: MenuListType): boolean => {
-    return !item.sublevel || item.sublevel.length === 0;
-  };
-
-  // Helper to find the path to a selected value in the menu tree
-  const findPathToValue = (items: MenuListType[], value: string | number, path: string[] = []): string[] | null => {
-    for (const item of items) {
-      const newPath = [...path, item.text];
-
-      if (item.value === value) {
-        return newPath;
-      }
-
-      if (item.sublevel) {
-        const result = findPathToValue(item.sublevel, value, newPath);
-
-        if (result) return result;
-      }
-    }
-
-    return null;
-  };
-
-  const handleSelectedLadderizedItem = (selectedItems: string[], selectedItem?: MenuListType) => {
-    wasCleared.value = false;
-    ladderizedSelectModel.value = selectedItems;
-
-    let itemToCheck = selectedItem;
-
-    // Fallback: if selectedItem is not provided, try to find it from the value
-    if (!itemToCheck && selectedItems.length > 0) {
-      const findItemByValue = (items: MenuListType[], value: string | number): MenuListType | undefined => {
-        for (const item of items) {
-          if (item.value === value) return item;
-
-          if (item.sublevel) {
-            const found = findItemByValue(item.sublevel, value);
-
-            if (found) return found;
-          }
-        }
-
-        return undefined;
-      };
-
-      itemToCheck = findItemByValue(ladderizedSelectOptions.value, selectedItems[selectedItems.length - 1]);
-    }
-
-    if (itemToCheck) {
-      const path = findPathToValue(ladderizedSelectOptions.value, itemToCheck.value);
-
-      inputText.value = path ? path.join(' > ') : itemToCheck.text || '';
-
-      if (isLeafNode(itemToCheck)) {
-        ladderizedSelectPopperState.value = false;
-      }
-    } else if (selectedItems.length === 0 && !wasCleared.value) {
-      inputText.value = '';
-    }
-  };
-
-  const handleSearch = () => {
-    isSearching.value = true;
-
-    debouncedEmitSearch();
-  };
-
-  const debouncedEmitSearch = useDebounceFn(() => {
-    // Optionally emit search event here if needed
-  }, 300);
-
-  const handleClear = () => {
-    wasCleared.value = true;
-
-    inputText.value = '';
-
-    emit('update:modelValue', []);
-  };
-
-  const handleOptionsToggle = () => {
-    ladderizedSelectPopperState.value = true;
-
-    isSearching.value = false;
-  };
-
-  // Watch for changes in modelValue to update inputText
-  watch(
-    () => ladderizedSelectModel.value,
-    (newVal) => {
-      if (wasCleared.value) {
-        inputText.value = '';
-        wasCleared.value = false;
-        return;
-      }
-
-      if (Array.isArray(newVal) && newVal.length > 0) {
-        // Treat the array as a single path for ladderized select
-        let currentLevel = ladderizedSelectOptions.value;
-
-        const pathTexts: string[] = [];
-
-        for (const value of newVal) {
-          const found = currentLevel.find((item) => item.value === value);
-          if (!found) break;
-          pathTexts.push(found.text);
-          currentLevel = found.sublevel || [];
-        }
-
-        inputText.value = pathTexts.join(' > ');
-      }
-    },
-    { immediate: true },
-  );
-
-  onClickOutside(ladderizedSelectRef, () => {
-    ladderizedSelectPopperState.value = false;
-  });
-
-  return {
-    ladderizedClasses,
-    ladderizedSelectPopperState,
-    ladderizedSelectRef,
-    ladderizedSelectOptions,
-    isLadderizedSelectPopperDisabled,
-    ladderizedSelectModel,
-    inputText,
-    handleSelectedLadderizedItem,
-    handleSearch,
-    handleClear,
-    handleOptionsToggle,
-  };
-};
+import { ref, toRefs, computed, watch } from 'vue';
+import { useVModel, useDebounceFn, onClickOutside } from '@vueuse/core';
+
+import type { SelectLadderizedPropTypes } from './select-ladderized';
+
+import type { MenuListType } from '@/components/list/list';
+
+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',
+  }));
+
+  // Popper Variables
+  const ladderizedSelectPopperState = ref(false);
+  const ladderizedSelectRef = ref(null);
+  const isLadderizedSelectPopperDisabled = computed(() => disabled.value);
+
+  // Ladderized Select Model
+  const ladderizedSelectModel = useVModel(props, 'modelValue', emit);
+  const ladderizedSelectOptions = computed(() => options.value);
+
+  // Input Variables
+  const inputText = ref<string>('');
+  const isSearching = ref(false);
+  const wasCleared = ref(false);
+
+  const isLeafNode = (item: MenuListType): boolean => {
+    return !item.sublevel || item.sublevel.length === 0;
+  };
+
+  // Helper to find the path to a selected value in the menu tree
+  const findPathToValue = (items: MenuListType[], value: string | number, path: string[] = []): string[] | null => {
+    for (const item of items) {
+      const newPath = [...path, item.text];
+
+      if (item.value === value) {
+        return newPath;
+      }
+
+      if (item.sublevel) {
+        const result = findPathToValue(item.sublevel, value, newPath);
+
+        if (result) return result;
+      }
+    }
+
+    return null;
+  };
+
+  const handleSelectedLadderizedItem = (selectedItems: string[], selectedItem?: MenuListType) => {
+    wasCleared.value = false;
+    ladderizedSelectModel.value = selectedItems;
+
+    let itemToCheck = selectedItem;
+
+    // Fallback: if selectedItem is not provided, try to find it from the value
+    if (!itemToCheck && selectedItems.length > 0) {
+      const findItemByValue = (items: MenuListType[], value: string | number): MenuListType | undefined => {
+        for (const item of items) {
+          if (item.value === value) return item;
+
+          if (item.sublevel) {
+            const found = findItemByValue(item.sublevel, value);
+
+            if (found) return found;
+          }
+        }
+
+        return undefined;
+      };
+
+      itemToCheck = findItemByValue(ladderizedSelectOptions.value, selectedItems[selectedItems.length - 1]);
+    }
+
+    if (itemToCheck) {
+      const path = findPathToValue(ladderizedSelectOptions.value, itemToCheck.value);
+
+      inputText.value = path ? path.join(' > ') : itemToCheck.text || '';
+
+      if (isLeafNode(itemToCheck)) {
+        ladderizedSelectPopperState.value = false;
+      }
+    } else if (selectedItems.length === 0 && !wasCleared.value) {
+      inputText.value = '';
+    }
+  };
+
+  const handleSearch = () => {
+    isSearching.value = true;
+
+    debouncedEmitSearch();
+  };
+
+  const debouncedEmitSearch = useDebounceFn(() => {
+    // Optionally emit search event here if needed
+  }, 300);
+
+  const handleClear = () => {
+    wasCleared.value = true;
+
+    inputText.value = '';
+
+    emit('update:modelValue', []);
+  };
+
+  const handleOptionsToggle = () => {
+    ladderizedSelectPopperState.value = true;
+
+    isSearching.value = false;
+  };
+
+  // Watch for changes in modelValue to update inputText
+  watch(
+    () => ladderizedSelectModel.value,
+    (newVal) => {
+      if (wasCleared.value) {
+        inputText.value = '';
+        wasCleared.value = false;
+        return;
+      }
+
+      if (Array.isArray(newVal) && newVal.length > 0) {
+        // Treat the array as a single path for ladderized select
+        let currentLevel = ladderizedSelectOptions.value;
+
+        const pathTexts: string[] = [];
+
+        for (const value of newVal) {
+          const found = currentLevel.find((item) => item.value === value);
+          if (!found) break;
+          pathTexts.push(found.text);
+          currentLevel = found.sublevel || [];
+        }
+
+        inputText.value = pathTexts.join(' > ');
+      }
+    },
+    { immediate: true },
+  );
+
+  onClickOutside(ladderizedSelectRef, () => {
+    ladderizedSelectPopperState.value = false;
+  });
+
+  return {
+    ladderizedClasses,
+    ladderizedSelectPopperState,
+    ladderizedSelectRef,
+    ladderizedSelectOptions,
+    isLadderizedSelectPopperDisabled,
+    ladderizedSelectModel,
+    inputText,
+    handleSelectedLadderizedItem,
+    handleSearch,
+    handleClear,
+    handleOptionsToggle,
+  };
+};

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

@@ -31,9 +31,7 @@ export const multiSelectPropTypes = {
     required: true,
   },
   modelValue: {
-    type: [String, Number, Object, Array] as PropType<
-      string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[]
-    >,
+    type: Array as PropType<(string | number | Record<string, unknown>)[]>,
     default: () => [],
   },
   options: {
@@ -102,10 +100,18 @@ export const multiSelectPropTypes = {
     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-multiple/select-multiple.vue

@@ -23,46 +23,59 @@
         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"
+            :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

@@ -102,10 +102,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,68 @@
         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
+            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 +163,7 @@ const {
   selectClasses,
   selectPopperState,
   selectRef,
+  selectPopperRef,
   selectModel,
   selectOptions,
   filteredSelectOptions,