design-system-next 2.19.3 → 2.19.4

package/src/components/list/list.ts

@@ -36,6 +36,10 @@ export const listPropTypes = {
     type: String,
     default: '',
   },
+  supportingDisplayText: {
+    type: String,
+    default: '',
+  },
   menuList: {
     type: Array as PropType<MenuListType[]>,
     required: true,
@@ -91,15 +95,24 @@ export const listPropTypes = {
     type: [String, Number] as PropType<string | number>,
     default: 0,
   },
+  displayListItemSelected: {
+    type: Boolean,
+    default: false,
+  },
   itemIcon: {
     type: String,
     default: '',
   },
+  disabledUnselectedItems: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const listEmitTypes = {
   'update:modelValue': (value: MenuListType[]) => value,
   'update:searchValue': (value: string) => typeof value === 'string',
+  'get-single-selected-item': (item: MenuListType) => item,
 };
 
 export type ListPropTypes = ExtractPropTypes<typeof listPropTypes>;

package/src/components/list/list.vue

@@ -1,21 +1,36 @@
 <template>
   <div class="spr-font-main">
-    <div
-      v-if="props.searchableMenu"
-      :class="[
-        'spr-sticky spr-z-20',
-        'spr-grid spr-gap-3 spr-bg-white-50 spr-p-size-spacing-3xs',
-        'spr-border-color-weak spr-border spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid',
-      ]"
-      :style="{
-        top:
-          typeof props.stickySearchOffset === 'number'
-            ? props.stickySearchOffset + 'px'
-            : String(props.stickySearchOffset),
-      }"
-    >
-      <spr-input-search v-model="searchText" :placeholder="props.searchableMenuPlaceholder" autocomplete="off" />
-    </div>
+    <template v-if="props.searchableMenu || props.displayListItemSelected">
+      <div
+        :class="[
+          'spr-sticky spr-z-20',
+          'spr-grid spr-gap-3 spr-bg-white-50 spr-px-size-spacing-3xs spr-py-size-spacing-2xs',
+          'spr-border-color-weak spr-border spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid',
+        ]"
+        :style="{
+          top:
+            typeof props.stickySearchOffset === 'number'
+              ? props.stickySearchOffset + 'px'
+              : String(props.stickySearchOffset),
+        }"
+      >
+        <spr-input-search
+          v-if="props.searchableMenu"
+          v-model="searchText"
+          :placeholder="props.searchableMenuPlaceholder"
+          autocomplete="off"
+        />
+        <span
+          v-if="props.supportingDisplayText || props.displayListItemSelected"
+          class="spr-label-sm-medium spr-text-color-base spr-block"
+        >
+          <template v-if="props.supportingDisplayText">
+            {{ props.supportingDisplayText }}
+          </template>
+          <template v-else> {{ selectedItems.length }} Selected</template>
+        </span>
+      </div>
+    </template>
 
     <div class="spr-p-size-spacing-3xs">
       <template v-if="props.groupItemsBy">
@@ -38,7 +53,11 @@
               >
                 <template v-if="props.lozenge">
                   <div class="spr-flex spr-items-center spr-gap-1">
-                    <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
+                    <spr-checkbox
+                      v-if="props.multiSelect"
+                      :disabled="item.disabled || (props.disabledUnselectedItems && !isItemSelected(item))"
+                      :checked="isItemSelected(item)"
+                    />
                     <spr-lozenge
                       v-if="props.lozenge"
                       :label="item.text || (item.lozengeProps?.label as string)"
@@ -52,23 +71,45 @@
                 </template>
                 <template v-else>
                   <div class="spr-flex spr-items-center spr-gap-1">
-                    <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
+                    <spr-checkbox
+                      v-if="props.multiSelect"
+                      :disabled="item.disabled || (props.disabledUnselectedItems && !isItemSelected(item))"
+                      :checked="isItemSelected(item)"
+                    />
                     <div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
-                      <span v-if="props.itemIcon || item.icon" :class="[item.iconColor, 'spr-mt-[2px]']">
+                      <span
+                        v-if="props.itemIcon || item.icon"
+                        :class="[
+                          item.iconColor,
+                          'spr-mt-[2px]',
+                          {
+                            'spr-text-color-disabled':
+                              item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
+                          },
+                        ]"
+                      >
                         <icon :icon="(props.itemIcon || item.icon) as string" width="20px" height="20px" />
                       </span>
                       <div
                         :class="[
                           'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
-                          { 'spr-text-color-disabled': item.disabled },
+                          {
+                            'spr-text-color-disabled':
+                              item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
+                          },
                         ]"
                       >
-                        <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
+                        <span class="spr-break-words spr-text-left spr-text-xs">
+                          {{ item.text }}
+                        </span>
                         <span
                           v-if="item.subtext"
                           :class="[
-                            'spr-body-xs-regular spr-text-color-base spr-text-left',
-                            { 'spr-text-color-disabled': item.disabled },
+                            'spr-body-xs-regular spr-text-color-base spr-break-words spr-text-left',
+                            {
+                              'spr-text-color-disabled':
+                                item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
+                            },
                           ]"
                         >
                           {{ item.subtext }}
@@ -128,7 +169,11 @@
           >
             <template v-if="props.lozenge">
               <div class="spr-flex spr-items-center spr-gap-1">
-                <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
+                <spr-checkbox
+                  v-if="props.multiSelect"
+                  :disabled="item.disabled || (props.disabledUnselectedItems && !isItemSelected(item))"
+                  :checked="isItemSelected(item)"
+                />
                 <spr-lozenge
                   v-if="props.lozenge"
                   :label="item.text || (item.lozengeProps?.label as string)"
@@ -142,23 +187,45 @@
             </template>
             <template v-else>
               <div class="spr-flex spr-items-center spr-gap-1">
-                <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
+                <spr-checkbox
+                  v-if="props.multiSelect"
+                  :disabled="item.disabled || (props.disabledUnselectedItems && !isItemSelected(item))"
+                  :checked="isItemSelected(item)"
+                />
                 <div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
-                  <span v-if="props.itemIcon || item.icon" :class="[item.iconColor, 'spr-mt-[2px]']">
+                  <span
+                    v-if="props.itemIcon || item.icon"
+                    :class="[
+                      item.iconColor,
+                      'spr-mt-[2px]',
+                      {
+                        'spr-text-color-disabled':
+                          item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
+                      },
+                    ]"
+                  >
                     <icon :icon="(props.itemIcon || item.icon) as string" width="20px" height="20px" />
                   </span>
                   <div
                     :class="[
                       'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
-                      { 'spr-text-color-disabled': item.disabled },
+                      {
+                        'spr-text-color-disabled':
+                          item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
+                      },
                     ]"
                   >
-                    <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
+                    <span class="spr-break-words spr-text-left spr-text-xs">
+                      {{ item.text }}
+                    </span>
                     <span
                       v-if="item.subtext"
                       :class="[
-                        'spr-body-xs-regular spr-text-color-base spr-text-left',
-                        { 'spr-text-color-disabled': item.disabled },
+                        'spr-body-xs-regular spr-text-color-base spr-break-words spr-text-left',
+                        {
+                          'spr-text-color-disabled':
+                            item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
+                        },
                       ]"
                     >
                       {{ item.subtext }}
@@ -225,6 +292,13 @@ import { useList } from './use-list';
 const props = defineProps(listPropTypes);
 const emit = defineEmits(listEmitTypes);
 
-const { searchText, localizedMenuList, groupedMenuList, isItemSelected, getListItemClasses, handleSelectedItem } =
-  useList(props, emit);
+const {
+  selectedItems,
+  searchText,
+  localizedMenuList,
+  groupedMenuList,
+  isItemSelected,
+  getListItemClasses,
+  handleSelectedItem,
+} = useList(props, emit);
 </script>

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

@@ -14,8 +14,16 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   const selectedItems = useVModel(props, 'modelValue', emit);
   const searchString = useVModel(props, 'searchValue', emit);
 
-  const { menuList, menuLevel, groupItemsBy, multiSelect, preSelectedItems, disabledLocalSearch, noCheck } =
-    toRefs(props);
+  const {
+    menuList,
+    menuLevel,
+    groupItemsBy,
+    multiSelect,
+    preSelectedItems,
+    disabledLocalSearch,
+    noCheck,
+    disabledUnselectedItems,
+  } = toRefs(props);
 
   const listClasses: ComputedRef<ListClasses> = computed(() => {
     const listItemClasses = classNames(
@@ -161,6 +169,7 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
 
     if (previousSelected) {
       handleSelectedItem(item);
+
       return true;
     }
 
@@ -341,10 +350,10 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   };
 
   const getListItemClasses = (item: MenuListType) => ({
-    [listClasses.value.listItemClasses]: !item.disabled,
+    [listClasses.value.listItemClasses]: !item.disabled && !(disabledUnselectedItems.value && !isItemSelected(item)),
     'spr-background-color-single-active': isItemSelected(item) && !item.disabled && !noCheck.value,
-    'hover:spr-cursor-not-allowed spr-flex spr-cursor-pointer spr-items-center spr-gap-1.5 spr-rounded-lg':
-      item.disabled,
+    'spr-cursor-not-allowed spr-flex spr-items-center spr-gap-1.5 spr-rounded-lg':
+      item.disabled || (disabledUnselectedItems.value && !isItemSelected(item)),
     'spr-p-size-spacing-3xs': !props.lozenge,
     'spr-py-size-spacing-3xs spr-px-size-spacing-4xs': props.lozenge,
   });
@@ -420,6 +429,8 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   const handleSelectedItem = (item: MenuListType) => {
     if (item.disabled) return;
 
+    if (disabledUnselectedItems.value && !isItemSelected(item)) return;
+
     if (multiSelect.value) {
       // For multi-select, check if item is already selected
       const index = selectedItems.value.findIndex((selectedItem: MenuListType) => {
@@ -488,8 +499,11 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     } else {
       // For single-select, simply replace the selection
       selectedItems.value = [item];
+
       if (item.onClickFn) item.onClickFn();
     }
+
+    emit('get-single-selected-item', item);
   };
   // #endregion - Helper Methods
 
@@ -567,11 +581,13 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
 
   onMounted(() => {
     searchString.value = searchText.value;
+
     setMenuList();
     setPreSelectedItems();
   });
 
   return {
+    selectedItems,
     searchText,
     listClasses,
     localizedMenuList,

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

@@ -123,10 +123,22 @@ export const multiSelectPropTypes = {
     type: String,
     default: '',
   },
+  supportingDisplayText: {
+    type: String,
+    default: '',
+  },
+  persistentDisplayText: {
+    type: Boolean,
+    default: false,
+  },
   displaySelectedCountOnly: {
     type: Boolean,
     default: false,
   },
+  displayListItemSelected: {
+    type: Boolean,
+    default: false,
+  },
   displayHelper: {
     type: Boolean,
     default: false,
@@ -179,14 +191,22 @@ export const multiSelectPropTypes = {
     type: String,
     default: '',
   },
+  disabledUnselectedItems: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const multiSelectEmitTypes = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true,
   'update:searchValue': (value: string) => typeof value === 'string',
+  'search-string': (value: string) => typeof value === 'string',
   'infinite-scroll-trigger': Boolean,
   'popper-state': Boolean,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'get-selected-options': (_value: unknown) => true,
+  'get-single-selected-item': (item: MenuListType) => item,
 };
 
 export type MultiSelectPropTypes = ExtractPropTypes<typeof multiSelectPropTypes>;

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

@@ -49,9 +49,7 @@
                         class="spr-text-color-supporting spr-px-3"
                         :aria-label="`${multiSelectedListItems.length} selected options`"
                       >
-                        {{ multiSelectedListItems.length }} item{{
-                          multiSelectedListItems.length === 1 ? '' : 's'
-                        }}
+                        {{ multiSelectedListItems.length }} item{{ multiSelectedListItems.length === 1 ? '' : 's' }}
                         selected
                       </span>
                     </template>
@@ -164,9 +162,13 @@
             :loading="props.loading"
             :item-icon="props.itemIcon"
             :lozenge="props.lozenge"
-            multi-select
+            :supporting-display-text="props.supportingDisplayText"
+            :display-list-item-selected="props.displayListItemSelected"
             :disabled-local-search="props.disabledLocalSearch"
+            :disabled-unselected-items="props.disabledUnselectedItems"
+            multi-select
             @update:model-value="handleMultiSelectedItem"
+            @get-single-selected-item="emit('get-single-selected-item', $event)"
           />
         </div>
       </template>

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

@@ -19,7 +19,7 @@ interface MultiSelectClasses {
 }
 
 export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<MultiSelectEmitTypes>['emit']) => {
-  const { displayText, options, textField, valueField, active, disabled, error, disabledLocalSearch } = toRefs(props);
+  const { displayText, persistentDisplayText, options, textField, valueField, active, disabled, error } = toRefs(props);
 
   const multiSelectClasses: ComputedRef<MultiSelectClasses> = computed(() => {
     const baseClasses = classNames('spr-flex spr-flex-col spr-gap-size-spacing-4xs');
@@ -106,7 +106,6 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
   const hasUserSelected = ref(false);
 
   const inputText = ref<string | number>('');
-  const inputTextBackup = ref<string | number>('');
   const chippedInputTextRef = ref(null);
 
   const search = useVModel(props, 'searchValue', emit);
@@ -201,18 +200,15 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
           return item.value;
         }
       }
-
       return item.value;
     });
 
     hasUserSelected.value = true;
     multiSelectModel.value = selectedValues;
-    inputTextBackup.value =
-      multiSelectedItems.length > 3
-        ? `${multiSelectedItems.length} items selected`
-        : multiSelectedItems.map((item) => item.text).join(', ');
 
     updateMultiSelectedItemsFromValue();
+
+    emit('get-selected-options', multiSelectedItems);
   };
 
   /**
@@ -256,64 +252,92 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
    * Handles stringified objects and updates the input text accordingly.
    */
   const updateMultiSelectedItemsFromValue = () => {
-    if (!multiSelectOptions.value.length) return;
+    const values = normalizedValue.value;
 
-    if (!disabledLocalSearch.value) {
-      const values = normalizedValue.value;
-      if (!values || !values.length) {
-        multiSelectedListItems.value = [];
-        inputText.value = '';
-        inputTextBackup.value = '';
+    if (!values || !values.length) {
+      multiSelectedListItems.value = [];
 
-        return;
+      // Always show displayText if provided and no selected items
+      if (displayText.value) {
+        inputText.value = displayText.value;
+      } else if (!persistentDisplayText.value) {
+        inputText.value = '';
       }
-      multiSelectedListItems.value = multiSelectOptions.value.filter((item) => {
-        return values.some((val) => {
-          let itemVal = item.value;
-          let valToCompare = val;
-
-          if (typeof itemVal === 'string' && itemVal.startsWith('{') && itemVal.endsWith('}')) {
-            try {
-              itemVal = JSON.parse(itemVal);
-            } catch {
-              // ignore
-            }
-          }
 
-          if (typeof valToCompare === 'string' && valToCompare.startsWith('{') && valToCompare.endsWith('}')) {
-            try {
-              valToCompare = JSON.parse(valToCompare);
-            } catch {
-              // ignore
-            }
-          }
+      return;
+    }
 
-          if (typeof itemVal === 'object' && typeof valToCompare === 'object') {
-            return JSON.stringify(itemVal) === JSON.stringify(valToCompare);
+    // Always keep multiSelectedListItems in sync with selected values
+    multiSelectedListItems.value = multiSelectOptions.value.filter((item) => {
+      return values.some((val) => {
+        let itemVal = item.value;
+        let valToCompare = val;
+
+        if (typeof itemVal === 'string' && itemVal.startsWith('{') && itemVal.endsWith('}')) {
+          try {
+            itemVal = JSON.parse(itemVal);
+          } catch {
+            // ignore error
           }
-
-          return itemVal == valToCompare;
-        });
+        }
+        if (typeof valToCompare === 'string' && valToCompare.startsWith('{') && valToCompare.endsWith('}')) {
+          try {
+            valToCompare = JSON.parse(valToCompare);
+          } catch {
+            // ignore error
+          }
+        }
+        if (typeof itemVal === 'object' && typeof valToCompare === 'object') {
+          return JSON.stringify(itemVal) === JSON.stringify(valToCompare);
+        }
+        return itemVal == valToCompare;
       });
-    }
+    });
 
     // Determine input text based on whether count-only mode is enabled
-    if (props.displaySelectedCountOnly && multiSelectedListItems.value.length) {
-      inputText.value = `${multiSelectedListItems.value.length} item${
-        multiSelectedListItems.value.length === 1 ? '' : 's'
-      } selected`;
-    } else if (multiSelectedListItems.value.length > 3) {
-      inputText.value = `${multiSelectedListItems.value.length} items selected`;
-    } else {
-      inputText.value = multiSelectedListItems.value.map((item) => item.text).join(', ');
+    if (!persistentDisplayText.value) {
+      if (props.displaySelectedCountOnly && values.length) {
+        inputText.value = `${values.length} item${values.length === 1 ? '' : 's'} selected`;
+      } else if (values.length > 3) {
+        inputText.value = `${values.length} items selected`;
+      } else {
+        // Safely get display text for each value
+        inputText.value = values
+          .map((val) => {
+            // Try to find the corresponding option for display text
+            const found = multiSelectOptions.value.find((opt) => {
+              let optVal = opt.value;
+              let v = val;
+              if (typeof optVal === 'string' && optVal.startsWith('{') && optVal.endsWith('}')) {
+                try {
+                  optVal = JSON.parse(optVal);
+                } catch {
+                  // ignore error
+                }
+              }
+              if (typeof v === 'string' && v.startsWith('{') && v.endsWith('}')) {
+                try {
+                  v = JSON.parse(v);
+                } catch {
+                  // ignore error
+                }
+              }
+              if (typeof optVal === 'object' && typeof v === 'object') {
+                return JSON.stringify(optVal) === JSON.stringify(v);
+              }
+              return optVal == v;
+            });
+            return found ? found.text : typeof val === 'string' || typeof val === 'number' ? String(val) : '';
+          })
+          .join(', ');
+      }
     }
 
-    // Always update backup to match inputText after update
-    inputTextBackup.value = inputText.value;
-
-    if (displayText.value && !hasUserSelected.value && (!inputText.value || inputText.value === '')) {
+    if (
+      persistentDisplayText.value ||
+      (displayText.value && !hasUserSelected.value && (!inputText.value || inputText.value === ''))
+    ) {
       inputText.value = displayText.value;
-      inputTextBackup.value = displayText.value;
     }
   };
 
@@ -354,12 +378,22 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
 
   watch(searchInput, () => {
     search.value = searchInput.value;
+
+    emit('search-string', searchInput.value);
   });
 
   watch(multiSelectPopperState, (newState) => {
     emit('popper-state', newState);
   });
 
+  // Watcher for displayText to update inputText when displayText changes and there are no selected items
+  watch(displayText, (newVal) => {
+    // Only update inputText if there are no selected items
+    if (!multiSelectedListItems.value.length) {
+      inputText.value = newVal;
+    }
+  });
+
   /**
    * Handles closing the multi-select when clicking outside.
    */
@@ -395,7 +429,6 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
       updateMultiSelectedItemsFromValue();
     } else if (displayText.value) {
       inputText.value = displayText.value;
-      inputTextBackup.value = displayText.value;
     }
   });