design-system-next 2.13.5 → 2.14.1

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

@@ -8,13 +8,13 @@
     </label>
 
     <Menu
-      :shown="multiSelectPopperState"
+      v-model:shown="multiSelectPopperState"
       aria-id="multi-select-wrapper"
       distance="4"
       :placement="props.placement"
-      :triggers="[]"
-      :popper-hide-triggers="[]"
-      :auto-hide="false"
+      :triggers="props.triggers"
+      :popper-triggers="props.popperTriggers"
+      :auto-hide="props.autoHide"
       :disabled="isMultiSelectPopperDisabled"
       :container="`#${props.id}`"
       :strategy="
@@ -27,66 +27,26 @@
       }"
     >
       <div ref="multiSelectRef">
-        <div @click="handleOptionsToggle">
-          <template v-if="props.chipped">
-            <div :class="multiSelectClasses.chippedInputTextBaseClasses">
-              <div ref="chippedInputTextRef" :class="multiSelectClasses.chippedInputTextClasses">
-                <div class="spr-h-auto spr-w-full">
-                  <template v-if="multiSelectedListItems.length > 0">
-                    <template v-for="item in multiSelectedListItems" :key="item.value">
-                      <spr-chips
-                        class="spr-m-1 spr-inline-block"
-                        :label="String(item.text)"
-                        closable
-                        visible
-                        @close="handleChippedRemoveItem(String(item.value))"
-                      />
-                    </template>
-                  </template>
-                  <template v-else>
-                    <span class="spr-placeholder spr-px-3 spr-text-gray-400">{{ props.placeholder }}</span>
-                  </template>
-                </div>
-                <div :class="multiSelectClasses.chippedIconClasses">
-                  <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"
+        <template v-if="props.chipped">
+          <div :class="multiSelectClasses.chippedInputTextBaseClasses">
+            <div ref="chippedInputTextRef" :class="multiSelectClasses.chippedInputTextClasses">
+              <div class="spr-h-auto spr-w-full">
+                <template v-if="multiSelectedListItems.length > 0">
+                  <template v-for="item in multiSelectedListItems" :key="item.value">
+                    <spr-chips
+                      class="spr-m-1 spr-inline-block"
+                      :label="String(item.text)"
+                      closable
+                      visible
+                      @close="handleChippedRemoveItem(String(item.value))"
                     />
-                    <Icon icon="ph:caret-down" />
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-if="props.displayHelper" :class="multiSelectClasses.chippedHelperContainerClasses">
-              <div v-if="props.displayHelper" :class="multiSelectClasses.chippedHelperClasses">
-                <slot name="helperMessage">
-                  <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
-                  <span>{{ props.helperText }}</span>
-                </slot>
+                  </template>
+                </template>
+                <template v-else>
+                  <span class="spr-placeholder spr-px-3 spr-text-gray-400">{{ props.placeholder }}</span>
+                </template>
               </div>
-            </div>
-          </template>
-          <template v-else>
-            <spr-input
-              :id="`input-${props.id}`"
-              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="multiSelectClasses.chippedIconClasses">
                 <div class="spr-flex spr-items-center spr-gap-1">
                   <Icon
                     v-if="props.clearable && inputText"
@@ -96,21 +56,59 @@
                   />
                   <Icon icon="ph:caret-down" />
                 </div>
-              </template>
+              </div>
+            </div>
+          </div>
+          <div v-if="props.displayHelper" :class="multiSelectClasses.chippedHelperContainerClasses">
+            <div v-if="props.displayHelper" :class="multiSelectClasses.chippedHelperClasses">
+              <slot name="helperMessage">
+                <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
+                <span>{{ props.helperText }}</span>
+              </slot>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <spr-input
+            :id="`input-${props.id}`"
+            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>
-          </template>
+            <template #helperMessage>
+              <slot name="helperMessage" />
+            </template>
+          </spr-input>
+        </template>
 
-          <!-- 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>
+        <!-- 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>
 
         <!-- This div used to poppulate popper menu -->
         <div
@@ -124,7 +122,7 @@
       <template #popper>
         <div
           ref="multipleSelectPopperRef"
-          class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden spr-p-2"
+          class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden"
         >
           <spr-list
             v-model="multiSelectedListItems"
@@ -176,6 +174,5 @@ const {
   handleMultiSelectedItem,
   handleChippedRemoveItem,
   handleClear,
-  handleOptionsToggle,
 } = useMultiSelect(props, emit);
 </script>

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

@@ -33,7 +33,7 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     });
 
     const chippedInputTextBaseClasses = classNames(
-      'spr-relative spr-flex spr-items-center spr-min-h-9 spr-rounded-border-radius-md spr-border-[1.5px] spr-border-solid',
+      'spr-relative spr-flex spr-items-center spr-min-h-10 spr-rounded-border-radius-md spr-border-[1.5px] spr-border-solid',
       {
         'spr-cursor-pointer': !disabled.value,
 
@@ -188,15 +188,6 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     multiSelectOptions.value = options.value as MenuListType[];
   };
 
-  /**
-   * Opens the multi-select options.
-   */
-  const handleOptionsToggle = () => {
-    multiSelectPopperState.value = !multiSelectPopperState.value;
-
-    emit('popper-state', !multiSelectPopperState.value);
-  };
-
   /**
    * Handles selection changes from the multi-select and updates the model value.
    * Converts stringified objects back to objects if needed.
@@ -330,8 +321,6 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     multiSelectedListItems.value = [];
     inputText.value = '';
     multiSelectPopperState.value = false;
-
-    emit('popper-state', false);
   };
 
   watch(multiSelectModel, () => {
@@ -360,6 +349,10 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     search.value = searchInput.value;
   });
 
+  watch(multiSelectPopperState, (newState) => {
+    emit('popper-state', newState);
+  });
+
   /**
    * Handles closing the multi-select when clicking outside.
    */
@@ -367,8 +360,6 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     multiSelectPopperState.value = false;
 
     updateMultiSelectedItemsFromValue();
-
-    emit('popper-state', false);
   });
 
   useInfiniteScroll(
@@ -404,6 +395,5 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     handleMultiSelectedItem,
     handleChippedRemoveItem,
     handleClear,
-    handleOptionsToggle,
   };
 };

package/src/components/select/select.ts

@@ -24,6 +24,7 @@ const PLACEMENTS_TYPES = [
 ] as const;
 
 const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
+const TRIGGER_EVENTS = ['click', 'hover', 'focus', 'touch'] as const;
 
 export const selectPropTypes = {
   id: {
@@ -74,6 +75,24 @@ export const selectPropTypes = {
     validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
     default: 'bottom',
   },
+  triggers: {
+    type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
+    validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
+      return value.every((val) => TRIGGER_EVENTS.includes(val));
+    },
+    default: () => ['click'],
+  },
+  popperTriggers: {
+    type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
+    validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
+      return value.every((val) => TRIGGER_EVENTS.includes(val));
+    },
+    default: () => [],
+  },
+  autoHide: {
+    type: Boolean,
+    default: true,
+  },
   popperStrategy: {
     type: String,
     validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),

package/src/components/select/select.vue

@@ -8,13 +8,13 @@
     </label>
 
     <Menu
-      :shown="selectPopperState"
+      v-model:shown="selectPopperState"
       aria-id="select-wrapper"
       distance="4"
       :placement="props.placement"
-      :triggers="[]"
-      :popper-hide-triggers="[]"
-      :auto-hide="false"
+      :triggers="props.triggers"
+      :popper-triggers="props.popperTriggers"
+      :auto-hide="props.autoHide"
       :disabled="isSelectPopperDisabled"
       :container="`#${props.id}`"
       :strategy="
@@ -27,55 +27,53 @@
       }"
     >
       <div ref="selectRef">
-        <div @click="handleOptionsToggle">
-          <spr-input
-            :id="`input-${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>
+        <spr-input
+          :id="`input-${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>
 
-            <template #helperMessage>
-              <slot name="helperMessage" />
-            </template>
-          </spr-input>
+          <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>
+        <!-- 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>
 
         <!-- This div used to poppulate popper menu -->
         <div
@@ -89,7 +87,7 @@
       <template #popper>
         <div
           ref="selectPopperRef"
-          class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden spr-p-2"
+          class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden"
         >
           <template v-if="isSearching">
             <template v-if="!props.disabledLocalSearch">
@@ -178,6 +176,5 @@ const {
   handleSelectedItem,
   handleSearch,
   handleClear,
-  handleOptionsToggle,
 } = useSelect(props, emit);
 </script>

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

@@ -159,15 +159,6 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     emit('search-string', inputText.value);
   }, 300);
 
-  // Toggle options popper state
-  const handleOptionsToggle = () => {
-    selectPopperState.value = !selectPopperState.value;
-
-    isSearching.value = false;
-
-    emit('popper-state', !selectPopperState.value);
-  };
-
   // Handle selected item for simple list component
   const handleSelectedItem = (selectedItems: MenuListType[]) => {
     if (selectedItems.length === 0) {
@@ -207,7 +198,6 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     // Always close select for single selection
     setTimeout(() => {
       selectPopperState.value = false;
-      emit('popper-state', false);
     }, 10);
   };
 
@@ -332,6 +322,10 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     { deep: true },
   );
 
+  watch(selectPopperState, (newState) => {
+    emit('popper-state', newState);
+  });
+
   onClickOutside(selectRef, () => {
     selectPopperState.value = false;
 
@@ -341,8 +335,6 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     }
 
     isSearching.value = false;
-
-    emit('popper-state', false);
   });
 
   useInfiniteScroll(
@@ -377,7 +369,6 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     inputText,
     isSelectPopperDisabled,
     isSearching,
-    handleOptionsToggle,
     handleSelectedItem,
     handleSearch,
     handleClear,

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

@@ -37,9 +37,13 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
   const handleRedirect = (objectItem: ObjectItem, parentNav: string, menu: string, submenu: string) => {
     if (objectItem && objectItem.redirect) {
       if (objectItem.redirect.openInNewTab) {
-        window.open(objectItem.redirect.link, '_blank');
+        if (typeof window !== 'undefined') {
+          window.open(objectItem.redirect.link, '_blank');
+        }
       } else if (objectItem.redirect.isAbsoluteURL) {
-        location.href = objectItem.redirect.link;
+        if (typeof window !== 'undefined' && typeof location !== 'undefined') {
+          location.href = objectItem.redirect.link;
+        }
       } else {
         const modifiedObjectItem = { ...objectItem };
 
@@ -72,9 +76,12 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
   };
 
   const confirmIfOwnDomain = (url: string) => {
+    // Guard against SSR where location is undefined
+    if (typeof window === 'undefined') return false;
+
     const domain = window.location.hostname;
     const urlHostname = new URL(url).hostname;
-    const isOwnDomain = domain === urlHostname || window.location.hostname === 'localhost';
+    const isOwnDomain = domain === urlHostname || domain === 'localhost';
 
     return isOwnDomain;
   };

package/src/components/table/table-pagination/use-table-pagination.ts

@@ -36,7 +36,7 @@ export const useTablePagination = (
       '!spr-w-max [&_.dropdown-slot_div_div]:spr-border-color-base [&_.dropdown-slot_div_div]:spr-p-0'
     );
     
-    const dropdownInputFieldClass = classNames('spr-max-w-[120px] spr-min-w-[48px] spr-h-full spr-font-semibold [&_input]:spr-py-size-spacing-3xs [&_input]:spr-pr-size-spacing-5xs');
+    const dropdownInputFieldClass = classNames('spr-max-w-[120px] spr-min-w-[48px] spr-h-full spr-font-medium [&_input]:spr-py-size-spacing-3xs [&_input]:spr-pr-size-spacing-5xs');
     const inputFieldIconClass = classNames('spr-text-mushroom-950 spr-pr-size-spacing-3xs spr-box-content');
     const rightSideClass = classNames(
       'spr-flex spr-justify-between spr-items-center',

package/src/components/table/table.ts

@@ -48,6 +48,25 @@ interface SortEvent {
   sortOrder: TABLE_SORT;
 }
 
+export interface DragOnChangeEvent {
+  added?: DragOnChangeAddedProperties;  
+  removed?: DragOnChangeRemovedProperties;
+}
+
+interface DragOnChangeAddedProperties {
+  element: TableData;
+  newIndex: number;
+}
+
+interface DragOnChangeRemovedProperties {
+  element: TableData;
+  oldIndex: number;
+}
+
+interface DragOnChangeEmit extends DragOnChangeEvent {
+  updatedList: TableData[];
+}
+
 const TABLE_SORT = ['asc', 'desc'] as const;
 const TABLE_VARIANT = ['surface', 'white'] as const;
 export type TABLE_SORT = (typeof TABLE_SORT)[number];
@@ -86,11 +105,11 @@ export const tablePropTypes = {
   },
   emptyStateCustomClasses: {
     type: String,
-    default: ''
+    default: '',
   },
   tableActionSlotCustomClasses: {
     type: String,
-    default: ''
+    default: '',
   },
   loading: {
     type: Boolean as PropType<boolean>,
@@ -121,7 +140,7 @@ export const tablePropTypes = {
   sortOrder: {
     type: String as PropType<(typeof TABLE_SORT)[number]>,
     validator: (value: (typeof TABLE_SORT)[number]) => TABLE_SORT.includes(value),
-    default: 'asc'
+    default: 'asc',
   },
 
   variant: {
@@ -154,6 +173,14 @@ export const tablePropTypes = {
     type: Boolean,
     default: false,
   },
+  allowSelfDrag: {
+    type: Boolean,
+    default: false,
+  },
+  isDraggable: {
+    type: Boolean,
+    default: false,
+  }
 };
 
 export const tableEmitTypes = {
@@ -169,6 +196,9 @@ export const tableEmitTypes = {
     value.every(
       (item) => (typeof item === 'object' || typeof item === 'string' || typeof item === 'number') && item !== null,
     ),
+  onDropToEmptyZone: (event: DragOnChangeEvent['added']): event is DragOnChangeEvent['added'] => event !== undefined,
+  onDragChange: (event: DragOnChangeEmit): event is DragOnChangeEmit =>
+    event !== undefined && Array.isArray(event.updatedList),
 };
 
 export type TablePropTypes = ExtractPropTypes<typeof tablePropTypes>;