design-system-next 2.19.0 → 2.19.3

package/src/components/chips/chips.vue

@@ -8,7 +8,10 @@
     @click="handleClick"
     @keyup.enter="handleClick"
   >
-    <template v-if="variant === 'tag'">
+    <template v-if="slots.default">
+      <slot />
+    </template>
+    <template v-else-if="variant === 'tag'">
       <span v-if="hasIcon" class="chips-icon spr-inline-flex spr-items-center spr-leading-[0]">
         <slot name="icon">
           <Icon :icon="getIcon" class="spr-font-size-300" />

package/src/components/date-picker/{reusable-calendar/reusable-calendar.ts → date-calendar-picker/date-calendar-picker.ts}

@@ -27,7 +27,7 @@ export type RestDayType = 'su' | 'mo' | 'tu' | 'we' | 'th' | 'fr' | 'sa';
 export type DatePickerMode = typeof DATE_PICKER_MODES[number];
 
 // Define props with JSDoc comments for documentation
-export const reusableCalendarPropTypes = {
+export const dateCalendarPickerPropTypes = {
   /**
    * @description The selected date value (v-model)
    */
@@ -109,7 +109,7 @@ export const reusableCalendarPropTypes = {
 };
 
 // Define emits with type validation
-export const reusableCalendarEmitTypes = {
+export const dateCalendarPickerEmitTypes = {
   'update:modelValue': (value: string): value is string => typeof value === 'string',
   'update:month': (month: number): month is number => typeof month === 'number',
   'update:year': (year: number): year is number => typeof year === 'number',
@@ -117,5 +117,5 @@ export const reusableCalendarEmitTypes = {
 };
 
 // Export types for use in other files
-export type ReusableCalendarPropTypes = ExtractPropTypes<typeof reusableCalendarPropTypes>;
-export type ReusableCalendarEmitTypes = typeof reusableCalendarEmitTypes;
+export type DateCalendarPickerPropTypes = ExtractPropTypes<typeof dateCalendarPickerPropTypes>;
+export type DateCalendarPickerEmitTypes = typeof dateCalendarPickerEmitTypes;

package/src/components/date-picker/{reusable-calendar/reusable-calendar.vue → date-calendar-picker/date-calendar-picker.vue}

@@ -1,7 +1,7 @@
 <template>
   <div 
-    ref="reusableCalendarRef"
-    :class="reusableCalendarClasses"
+    ref="dateCalendarPickerRef"
+    :class="dateCalendarPickerClasses"
   >
     <div
       :class="[
@@ -132,13 +132,13 @@ import DatePickerCalendarTab from '../tabs/DatePickerCalendarTab.vue';
 import DatePickerMonthTab from '../tabs/DatePickerMonthTab.vue';
 import DatePickerYearTab from '../tabs/DatePickerYearTab.vue';
 
-import { useReusableCalendar } from './use-reusable-calendar';
-import { reusableCalendarEmitTypes, reusableCalendarPropTypes } from './reusable-calendar';
+import { useDateCalendarPicker } from './use-date-calendar-picker';
+import { dateCalendarPickerEmitTypes, dateCalendarPickerPropTypes } from './date-calendar-picker';
 
-const props = defineProps(reusableCalendarPropTypes);
-const emit = defineEmits(reusableCalendarEmitTypes);
+const props = defineProps(dateCalendarPickerPropTypes);
+const emit = defineEmits(dateCalendarPickerEmitTypes);
 
-const reusableCalendarRef = ref<HTMLElement | null>(null);
+const dateCalendarPickerRef = ref<HTMLElement | null>(null);
 
 // Use the composable for all logic
 const {
@@ -176,12 +176,12 @@ const {
   handleMonthTabMonthUpdateWrapper,
   handleYearTabYearUpdateWrapper,
   handleYearTabCurrentPageUpdateWrapper,
-} = useReusableCalendar(props, emit);
+} = useDateCalendarPicker(props, emit);
 
 // Compute CSS classes using classNames utility
-const reusableCalendarClasses = computed(() => {
+const dateCalendarPickerClasses = computed(() => {
   return classNames(
-    'reusable-calendar-container spr-bg-white spr-rounded-lg spr-shadow-lg spr-border spr-border-solid spr-border-mushroom-200 min-w-[320px]',
+    'date-calendar-picker-container spr-bg-white spr-rounded-lg spr-shadow-lg spr-border spr-border-solid spr-border-mushroom-200 min-w-[320px]',
     {
       'spr-disabled': props.disabled,
       'spr-readonly': props.readonly,

package/src/components/date-picker/{reusable-calendar/use-reusable-calendar.ts → date-calendar-picker/use-date-calendar-picker.ts}

@@ -3,11 +3,11 @@ import { toRefs } from 'vue';
 import dayjs from 'dayjs';
 
 import type { SetupContext } from 'vue';
-import type { ReusableCalendarEmitTypes, ReusableCalendarPropTypes } from './reusable-calendar';
+import type { DateCalendarPickerEmitTypes, DateCalendarPickerPropTypes } from './date-calendar-picker';
 
-export const useReusableCalendar = (
-  props: ReusableCalendarPropTypes, 
-  emit: SetupContext<ReusableCalendarEmitTypes>['emit']
+export const useDateCalendarPicker = (
+  props: DateCalendarPickerPropTypes, 
+  emit: SetupContext<DateCalendarPickerEmitTypes>['emit']
 ) => {
   // Extract reactive props
   const { 

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

@@ -1,8 +1,6 @@
 import { onBeforeMount, ref, toRefs, watch } from 'vue';
-import { useVModel } from '@vueuse/core';
-
+import { useVModel, watchDeep } from '@vueuse/core';
 import { LadderizedListPropTypes, LadderizedListEmitTypes } from './ladderized-list';
-
 import type { SetupContext } from 'vue';
 import type { MenuListType } from '../list';
 
@@ -21,6 +19,8 @@ export const useLadderizedList = (
   const activeList = ref<MenuListType[]>(menuList.value); // List of items to display in the active level
   const searchText = ref('');
 
+  const modelValueIsCustom = ref(false);
+
   // Recursive filter function for ladderized options
   const filterOptionsRecursive = (items: MenuListType[], search: string): MenuListType[] => {
     if (!search) return items;
@@ -86,6 +86,12 @@ export const useLadderizedList = (
   const handleSelectedListItem = (item: MenuListType) => {
     transitionName.value = 'slide-left';
 
+    if (modelValueIsCustom.value) {
+      console.log("Custom");
+      ladderizedListOutput.value.shift();
+      modelValueIsCustom.value = false;
+    };
+
     // If searching, reconstruct full path as array of option objects
     if (searchText.value) {
       const path = findOptionPath(menuList.value, String(item.value));
@@ -111,7 +117,7 @@ export const useLadderizedList = (
       replaceItemInOutput(item);
     }
 
-    if (item.sublevel && item.sublevel.length > 0) updateLevel(item);
+    if (item.sublevel && item.sublevel.length > 0) updateLevel(item); // FIXME: This causes activeLevel one less than expected. Currently not critical since most forms are 2 levels deep.
     emit('update:modelValue', ladderizedListOutput.value);
   };
 
@@ -224,9 +230,14 @@ export const useLadderizedList = (
 
           prevList.value = activeList.value;
           activeList.value = item.sublevel ?? prevList.value;
-          activeLevel.value += item.sublevel ? 1 : 0;
+          activeLevel.value += item.sublevel ? 1 : 0; // FIXME: This causes activeLevel one less than expected. Currently not critical since most forms are 2 levels deep.
         } else {
-          // If no item found, skip the for loop
+          // If no item found, rest the values to initial state
+          selectedListItem.value = [];
+          prevList.value = [];
+          activeList.value = menuList.value;
+          activeLevel.value = 0;
+          modelValueIsCustom.value = true;
           return;
         }
       });
@@ -241,8 +252,8 @@ export const useLadderizedList = (
   };
 
   // Watch for modelValue changes and reset selectedListItem if cleared
-  watch(
-    () => props.modelValue,
+  watchDeep(
+    ladderizedListOutput,
     (newVal) => {
       if (!newVal || (Array.isArray(newVal) && newVal.length === 0)) {
         selectedListItem.value = [];

package/src/components/list/list.ts

@@ -91,10 +91,6 @@ export const listPropTypes = {
     type: [String, Number] as PropType<string | number>,
     default: 0,
   },
-  displayListItemSelected: {
-    type: Boolean,
-    default: false,
-  },
   itemIcon: {
     type: String,
     default: '',

package/src/components/list/list.vue

@@ -1,30 +1,21 @@
 <template>
   <div class="spr-font-main">
-    <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.displayListItemSelected" class="spr-label-sm-medium spr-text-color-base spr-block">
-          {{ selectedItems.length }} Selected
-        </span>
-      </div>
-    </template>
+    <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>
 
     <div class="spr-p-size-spacing-3xs">
       <template v-if="props.groupItemsBy">
@@ -72,16 +63,13 @@
                           { 'spr-text-color-disabled': item.disabled },
                         ]"
                       >
-                        <span class="spr-text-left spr-text-xs" style="word-break: break-word">
-                          {{ item.text }}
-                        </span>
+                        <span class="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 },
                           ]"
-                          style="word-break: break-word"
                         >
                           {{ item.subtext }}
                         </span>
@@ -165,16 +153,13 @@
                       { 'spr-text-color-disabled': item.disabled },
                     ]"
                   >
-                    <span class="spr-text-left spr-text-xs" style="word-break: break-word">
-                      {{ item.text }}
-                    </span>
+                    <span class="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 },
                       ]"
-                      style="word-break: break-word"
                     >
                       {{ item.subtext }}
                     </span>
@@ -240,13 +225,6 @@ import { useList } from './use-list';
 const props = defineProps(listPropTypes);
 const emit = defineEmits(listEmitTypes);
 
-const {
-  selectedItems,
-  searchText,
-  localizedMenuList,
-  groupedMenuList,
-  isItemSelected,
-  getListItemClasses,
-  handleSelectedItem,
-} = useList(props, emit);
+const { searchText, localizedMenuList, groupedMenuList, isItemSelected, getListItemClasses, handleSelectedItem } =
+  useList(props, emit);
 </script>

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

@@ -572,7 +572,6 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   });
 
   return {
-    selectedItems,
     searchText,
     listClasses,
     localizedMenuList,

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

@@ -144,12 +144,16 @@ export const selectLadderizedPropTypes = {
     type: Boolean,
     default: false,
   },
+  writableInputText: {
+    type: Boolean,
+    default: false,
+  }
 };
 
 export const selectLadderizedEmitTypes = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true,
-  'popper-state': Boolean,
+  'popper-state': () => true,
 };
 
 export type SelectLadderizedEmitFn = (event: string, ...args: unknown[]) => void;

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

@@ -37,10 +37,11 @@
             :helper-text="props.helperText"
             :helper-icon="props.helperIcon"
             :display-helper="props.displayHelper"
-            readonly
+            :readonly="!props.writableInputText"
             :active="props.active"
             :disabled="props.disabled"
             :error="props.error"
+            @blur="handleInputChange"
           >
             <template #icon>
               <div
@@ -121,5 +122,6 @@ const {
   inputText,
   handleSelectedLadderizedItem,
   handleClear,
+  handleInputChange,
 } = useSelectLadderized(props, emit as SelectLadderizedEmitFn);
 </script>

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

@@ -1,5 +1,5 @@
 import { ref, toRefs, computed, watch } from 'vue';
-import { useVModel, onClickOutside } from '@vueuse/core';
+import { useVModel, onClickOutside, watchDeep } from '@vueuse/core';
 
 import type { SelectLadderizedPropTypes } from './select-ladderized';
 
@@ -17,6 +17,7 @@ export const useSelectLadderized = (
     supportingLabelClasses: 'spr-body-sm-regular spr-text-color-supporting',
   }));
 
+  // Wrapper for input field
   const ladderizedSelectState = ref<HTMLDivElement | null>(null);
 
   // Popper Variables
@@ -31,6 +32,7 @@ export const useSelectLadderized = (
   // Input Variables
   const inputText = ref<string>('');
   const wasCleared = ref<boolean>(false);
+  const isCustomInput = ref<boolean>(false);
 
   const isLeafNode = (item: MenuListType): boolean => {
     return !item.sublevel || item.sublevel.length === 0;
@@ -57,6 +59,7 @@ export const useSelectLadderized = (
 
   const handleSelectedLadderizedItem = (selectedItems: string[], selectedItem?: MenuListType) => {
     wasCleared.value = false;
+    isCustomInput.value = false;
 
     // If the selectedItems is a single value (leaf from search), reconstruct the full path
     let fullPath: string[] | null = null;
@@ -157,15 +160,17 @@ export const useSelectLadderized = (
   };
 
   // Watch for changes in modelValue to update inputText
-  watch(
-    () => ladderizedSelectModel.value,
+  watchDeep(
+    ladderizedSelectModel,
     (newVal) => {
+      if (isCustomInput.value) return;
+
       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
@@ -194,6 +199,13 @@ export const useSelectLadderized = (
     emit('popper-state', newState);
   });
 
+  const handleInputChange = () => {
+    if (!props.writableInputText) return;
+    wasCleared.value = false;
+    isCustomInput.value = true;
+    ladderizedSelectModel.value = [inputText.value];
+  };
+
   // Close only when clicking completely outside both the popper and the trigger wrapper.
   onClickOutside(ladderizedSelectPopperRef, (event) => {
     const triggerWrapper = ladderizedSelectState.value;
@@ -216,5 +228,6 @@ export const useSelectLadderized = (
     inputText,
     handleSelectedLadderizedItem,
     handleClear,
+    handleInputChange,
   };
 };

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

@@ -127,10 +127,6 @@ export const multiSelectPropTypes = {
     type: Boolean,
     default: false,
   },
-  displayListItemSelected: {
-    type: Boolean,
-    default: false,
-  },
   displayHelper: {
     type: Boolean,
     default: false,

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

@@ -49,7 +49,9 @@
                         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>
@@ -162,9 +164,8 @@
             :loading="props.loading"
             :item-icon="props.itemIcon"
             :lozenge="props.lozenge"
-            :display-list-item-selected="props.displayListItemSelected"
-            :disabled-local-search="props.disabledLocalSearch"
             multi-select
+            :disabled-local-search="props.disabledLocalSearch"
             @update:model-value="handleMultiSelectedItem"
           />
         </div>