design-system-next 2.15.0 → 2.15.2

package/dist/package.json.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   "name": "design-system-next",
   "private": false,
-  "version": "2.15.0",
+  "version": "2.15.2",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.15.0",
+  "version": "2.15.2",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {

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

@@ -117,7 +117,7 @@ export const selectLadderizedPropTypes = {
   },
   autoHide: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   wrapperPosition: {
     type: String,

package/src/components/select/select.ts

@@ -83,7 +83,7 @@ export const selectPropTypes = {
     validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
       return value.every((val) => TRIGGER_EVENTS.includes(val));
     },
-    default: () => ['click'],
+    default: () => [],
   },
   popperTriggers: {
     type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
@@ -94,7 +94,7 @@ export const selectPropTypes = {
   },
   autoHide: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   popperStrategy: {
     type: String,

package/src/components/select/select.vue

@@ -27,53 +27,56 @@
       }"
     >
       <div ref="selectRef">
-        <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>
-
-        <!-- 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 @click="!props.searchable? selectPopperState = !selectPopperState: null">
+          <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"
+            @click="props.searchable ? selectPopperState = true : null"
+          >
+            <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>
+  
+          <!-- 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>
 
         <!-- This div used to poppulate popper menu -->
         <div

package/src/components/table/table.ts

@@ -180,6 +180,10 @@ export const tablePropTypes = {
     type: Boolean,
     default: false,
   },
+  retainSelectionOnDataChange: {
+    type: Boolean,
+    default: false,
+  }
 };
 
 export const tableEmitTypes = {

package/src/components/table/table.vue

@@ -204,7 +204,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useSlots, useTemplateRef, watch } from 'vue';
+import { useSlots, ref, watch } from 'vue';
 import { Icon } from '@iconify/vue';
 import SprAvatar from '@/components/avatar/avatar.vue';
 import SprEmptyState from '@/components/empty-state/empty-state.vue';
@@ -224,7 +224,7 @@ const props = defineProps(tablePropTypes);
 const emit = defineEmits(tableEmitTypes);
 const slots = useSlots();
 
-const sortableTBody = useTemplateRef<HTMLElement>('sortableTBody');
+const sortableTBody = ref<HTMLElement | null>(null);
 
 const {
   getHeaderCount,
@@ -240,6 +240,7 @@ const {
   dragOptions,
   tableKey,
   isDragging,
+  
 
   isRowSelected,
   sortData,
@@ -250,10 +251,15 @@ const {
   sortedDataItem,
   getSortIcon,
   getRowKey,
+  clearSelectedData
 } = useTable(props, emit, slots);
 
 const { reinitializeSortable } = useDraggableTableRows(sortableTBody, dragOptions);
 
+defineExpose({
+  clearSelectedData
+});
+
 watch(tableKey, () => {
   reinitializeSortable();
 });

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

@@ -6,7 +6,7 @@ import type {
   TABLE_SORT,
   TableData,
   TableDataProps,
-  Header,  
+  Header,
   SortableDragEvent,
 } from './table';
 import type { SetupContext } from 'vue';
@@ -263,7 +263,7 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
       'spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid',
     );
 
-    const multiselectClass = classNames('spr-px-size-spacing-2xs spr-py-size-spacing-3xs spr-w-[44px] ');
+    const multiselectClass = classNames('spr-px-size-spacing-2xs spr-py-size-spacing-3xs spr-w-[44px]');
 
     const emptyStateClasses = classNames(`${emptyStateBaseClasses} ${props.emptyStateCustomClasses}`);
     const tableActionSlotClasses = classNames(`${defaultSlotClasses} ${props.tableActionSlotCustomClasses}`);
@@ -369,7 +369,7 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
   watch(sortedData, (newVal) => {
     tableData.value = [...newVal];
 
-    if (props.isMultiSelect && selectedData.value.length > 0) {
+    if (props.isMultiSelect && selectedData.value.length > 0 && !props.retainSelectionOnDataChange) {
       // Remove items from selectedData that are not in the new sortedData
       // This is to ensure that the selectedData is always in sync with the sortedData
 
@@ -392,12 +392,18 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     }
   });
 
+  const clearSelectedData = () => {
+    selectedData.value = [];    
+  }
+
   watch(tableData, () => {
     tableKey.value = tableKey.value + 1;
   });
 
   onMounted(() => {
-    tableData.value = [...sortedData.value];
+    if (sortedData.value.length > 0) {
+      tableData.value = [...sortedData.value];
+    }
   });
 
   return {
@@ -420,12 +426,13 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     sortedDataItem,
     getSortIcon,
     sortField,
-    allowSelfDrag,    
+    allowSelfDrag,
     tableData,
     isDraggable,
     dragOptions,
     getRowKey,
     isDragging: toRef(() => isDragging.value),
     tableKey,
+    clearSelectedData
   };
 };