design-system-next 2.13.6 → 2.14.3

package/src/components/list/list.vue

@@ -1,169 +1,188 @@
 <template>
   <div class="spr-font-main">
-    <div v-if="props.searchableMenu" class="spr-mb-3 spr-grid spr-gap-3">
+    <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 v-if="isParentMenu" class="spr-background-color-surface spr-h-[1px]"></div>
     </div>
 
-    <template v-if="props.groupItemsBy">
-      <template v-if="groupedMenuList && groupedMenuList.length > 0">
-        <div class="spr-grid spr-gap-2">
-          <div v-for="(list, listIndex) in groupedMenuList" :key="listIndex" class="spr-grid spr-gap-0.5">
-            <div
-              v-if="list.groupLabel !== 'no-group'"
-              class="spr-label-xs-medium spr-text-color-base spr-px-size-spacing-4xs spr-py-size-spacing-3xs spr-uppercase"
-            >
-              <span>
-                {{ list.groupLabel }}
-              </span>
-            </div>
-            <div
-              v-for="(item, itemIndex) in list.items"
-              :key="itemIndex"
-              :class="getListItemClasses(item)"
-              @click="handleSelectedItem(item)"
-            >
-              <spr-checkbox v-if="props.multiSelect" :checked="isItemSelected(item)" />
-              <template v-if="props.lozenge">
-                <spr-lozenge 
-                  :label="item.text || item.lozengeProps?.label as string" 
-                  :tone="item.lozengeProps?.tone as string & (typeof LOZENGE_TONE)[number]"
-                  :fill="item.lozengeProps?.fill as boolean"
-                  :url="item.lozengeProps?.url as string"
-                  :icon="item.icon || item.lozengeProps?.icon as string"
-                  :postfix-icon="item.lozengeProps?.postfixIcon as string"
-                />
-              </template>
-              <template v-else>
-                <div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
-                  <span v-if="item.icon" :class="[item.iconColor, 'spr-mt-[2px]']">
-                    <icon :icon="item.icon" width="20px" height="20px" />
-                  </span>
-                  <div class="spr-flex spr-flex-auto spr-flex-col spr-justify-start">
-                    <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">
-                      {{ item.subtext }}
-                    </span>
-                  </div>
-                </div>
-                <template v-if="!props.multiSelect && !props.dropdown">
-                  <Icon
-                    v-if="isItemSelected(item) && !props.noCheck"
-                    class="spr-text-color-brand-base spr-w-[1.39em]"
-                    icon="ph:check"
+    <div class="spr-p-size-spacing-3xs">
+      <template v-if="props.groupItemsBy">
+        <template v-if="groupedMenuList && groupedMenuList.length > 0">
+          <div class="spr-grid spr-gap-2">
+            <div v-for="(list, listIndex) in groupedMenuList" :key="listIndex" class="spr-grid spr-gap-0.5">
+              <div
+                v-if="list.groupLabel !== 'no-group'"
+                class="spr-label-xs-medium spr-text-color-base spr-px-size-spacing-4xs spr-py-size-spacing-3xs spr-uppercase"
+              >
+                <span>
+                  {{ list.groupLabel }}
+                </span>
+              </div>
+              <div
+                v-for="(item, itemIndex) in list.items"
+                :key="itemIndex"
+                :class="getListItemClasses(item)"
+                @click="handleSelectedItem(item)"
+              >
+                <spr-checkbox v-if="props.multiSelect" :checked="isItemSelected(item)" />
+                <template v-if="props.lozenge">
+                  <spr-lozenge
+                    :label="item.text || (item.lozengeProps?.label as string)"
+                    :tone="item.lozengeProps?.tone as string & (typeof LOZENGE_TONE)[number]"
+                    :fill="item.lozengeProps?.fill as boolean"
+                    :url="item.lozengeProps?.url as string"
+                    :icon="item.icon || (item.lozengeProps?.icon as string)"
+                    :postfix-icon="item.lozengeProps?.postfixIcon as string"
                   />
                 </template>
-                <template v-if="props.ladderized">
-                  <Icon
-                    v-if="item.sublevel && item.sublevel?.length > 0"
-                    class="spr-text-color-weak spr-size-4"
-                    icon="ph:caret-right"
-                  />
+                <template v-else>
+                  <div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
+                    <span v-if="item.icon" :class="[item.iconColor, 'spr-mt-[2px]']">
+                      <icon :icon="item.icon" width="20px" height="20px" />
+                    </span>
+                    <div class="spr-flex spr-flex-auto spr-flex-col spr-justify-start">
+                      <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">
+                        {{ item.subtext }}
+                      </span>
+                    </div>
+                  </div>
+                  <template v-if="props.ladderized">
+                    <template v-if="item.sublevel && item.sublevel?.length > 0">
+                      <Icon class="spr-text-color-weak spr-size-4" icon="ph:caret-right" />
+                    </template>
+                    <template v-else>
+                      <Icon
+                        v-if="isItemSelected(item) && !props.noCheck"
+                        class="spr-text-color-brand-base spr-w-[1.39em]"
+                        icon="ph:check"
+                      />
+                    </template>
+                  </template>
+                  <template v-else>
+                    <Icon
+                      v-if="isItemSelected(item) && !props.noCheck && !props.multiSelect"
+                      class="spr-text-color-brand-base spr-w-[1.39em]"
+                      icon="ph:check"
+                    />
+                  </template>
                 </template>
-              </template>
+              </div>
             </div>
           </div>
-        </div>
-      </template>
-      <template v-else>
-        <div v-if="props.loading" class="spr-skeletal-loader spr-h-8 spr-w-full spr-rounded-md" />
-        <div v-else class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
-          <span class="spr-body-sm-regular spr-m-0">No results found</span>
-        </div>
+        </template>
+        <template v-else>
+          <div v-if="props.loading" class="spr-skeletal-loader spr-h-8 spr-w-full spr-rounded-md" />
+          <div v-else class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
+            <span class="spr-body-sm-regular spr-m-0">No results found</span>
+          </div>
+        </template>
       </template>
-    </template>
 
-    <template v-else>
-      <template v-if="localizedMenuList && localizedMenuList.length > 0">
-        <div
-          v-for="(item, index) in localizedMenuList"
-          :key="index"
-          :class="getListItemClasses(item)"
-          @click="handleSelectedItem(item)"
-        >
-          <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
-          <template v-if="props.lozenge">
-            <spr-lozenge 
-              :label="item.text || item.lozengeProps?.label as string" 
-              :tone="item.lozengeProps?.tone as string & (typeof LOZENGE_TONE)[number]"
-              :fill="item.lozengeProps?.fill as boolean"
-              :url="item.lozengeProps?.url as string"
-              :icon="item.lozengeProps?.icon as string"
-              :postfix-icon="item.lozengeProps?.postfixIcon as string"
-            />
-          </template>
-          <template v-else>
-            <div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
-              <span v-if="item.icon" :class="[item.iconColor, 'spr-mt-[2px]']"
-                ><icon :icon="item.icon" width="20px" height="20px"
-              /></span>
-              <div
-                :class="[
-                  'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
-                  { 'spr-text-color-disabled': item.disabled },
-                ]"
-              >
-                <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
-                <span
-                  v-if="item.subtext"
+      <template v-else>
+        <template v-if="localizedMenuList && localizedMenuList.length > 0">
+          <div
+            v-for="(item, index) in localizedMenuList"
+            :key="index"
+            :class="getListItemClasses(item)"
+            @click="handleSelectedItem(item)"
+          >
+            <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
+            <template v-if="props.lozenge">
+              <spr-lozenge
+                :label="item.text || (item.lozengeProps?.label as string)"
+                :tone="item.lozengeProps?.tone as string & (typeof LOZENGE_TONE)[number]"
+                :fill="item.lozengeProps?.fill as boolean"
+                :url="item.lozengeProps?.url as string"
+                :icon="item.lozengeProps?.icon as string"
+                :postfix-icon="item.lozengeProps?.postfixIcon as string"
+              />
+            </template>
+            <template v-else>
+              <div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
+                <span v-if="item.icon" :class="[item.iconColor, 'spr-mt-[2px]']"
+                  ><icon :icon="item.icon" width="20px" height="20px"
+                /></span>
+                <div
                   :class="[
-                    'spr-body-xs-regular spr-text-color-base spr-text-left',
+                    'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
                     { 'spr-text-color-disabled': item.disabled },
                   ]"
                 >
-                  {{ item.subtext }}
-                </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 },
+                    ]"
+                  >
+                    {{ item.subtext }}
+                  </span>
+                </div>
               </div>
-            </div>
-            <template v-if="!props.multiSelect && !props.dropdown">
-              <Icon
-                v-if="isItemSelected(item) && !props.noCheck"
-                class="spr-text-color-brand-base spr-w-[1.39em]"
-                icon="ph:check"
-              />
-            </template>
-            <template v-if="props.ladderized">
-              <Icon
-                v-if="item.sublevel && item.sublevel?.length > 0"
-                class="spr-text-color-weak spr-size-4"
-                icon="ph:caret-right"
-              />
+              <template v-if="props.ladderized">
+                <template v-if="item.sublevel && item.sublevel?.length > 0">
+                  <Icon class="spr-text-color-weak spr-size-4" icon="ph:caret-right" />
+                </template>
+                <template v-else>
+                  <Icon
+                    v-if="isItemSelected(item) && !props.noCheck"
+                    class="spr-text-color-brand-base spr-w-[1.39em]"
+                    icon="ph:check"
+                  />
+                </template>
+              </template>
+              <template v-else>
+                <Icon
+                  v-if="isItemSelected(item) && !props.noCheck && !props.multiSelect"
+                  class="spr-text-color-brand-base spr-w-[1.39em]"
+                  icon="ph:check"
+                />
+              </template>
             </template>
-          </template>
-        </div>
-      </template>
-      <template v-else>
-        <div v-if="props.loading" class="spr-skeletal-loader spr-h-8 spr-w-full spr-rounded-md" />
-        <div v-else class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
-          <span class="spr-body-sm-regular spr-m-0">No results found</span>
-        </div>
+          </div>
+        </template>
+        <template v-else>
+          <div v-if="props.loading" class="spr-skeletal-loader spr-h-8 spr-w-full spr-rounded-md" />
+          <div v-else class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
+            <span class="spr-body-sm-regular spr-m-0">No results found</span>
+          </div>
+        </template>
       </template>
-    </template>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue';
-import { listPropTypes, listEmitTypes } from './list';
-import { useList } from './use-list';
+
 import SprCheckbox from '@/components/checkbox/checkbox.vue';
 import SprInputSearch from '@/components/input/input-search/input-search.vue';
 import SprLozenge from '@/components/lozenge/lozenge.vue';
+
 import { LOZENGE_TONE } from '@/components/lozenge/lozenge';
 
+import { listPropTypes, listEmitTypes } from './list';
+import { useList } from './use-list';
+
 const props = defineProps(listPropTypes);
 const emit = defineEmits(listEmitTypes);
 
-const {
-  searchText,
-  localizedMenuList,
-  groupedMenuList,
-  isParentMenu,
-  isItemSelected,
-  getListItemClasses,
-  handleSelectedItem,
-} = useList(props, emit);
+const { searchText, localizedMenuList, groupedMenuList, isItemSelected, getListItemClasses, handleSelectedItem } =
+  useList(props, emit);
 </script>

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

@@ -20,12 +20,12 @@ const PLACEMENTS_TYPES = [
 ] as const;
 
 const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
+const TRIGGER_EVENTS = ['click', 'hover', 'focus', 'touch'] as const;
 
 export const selectLadderizedPropTypes = {
   id: {
     type: String,
     required: true,
-    default: 'select-ladderized',
   },
   modelValue: {
     type: Array as PropType<string[]>,
@@ -97,6 +97,24 @@ export const selectLadderizedPropTypes = {
     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: () => [],
+  },
+  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,
+  },
   wrapperPosition: {
     type: String,
     default: 'relative',

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

@@ -8,15 +8,15 @@
     </label>
 
     <Menu
-      :shown="ladderizedSelectPopperState"
+      v-model:shown="ladderizedSelectPopperState"
       aria-id="ladderized-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="isLadderizedSelectPopperDisabled"
-      :container="'#ladderized-select-wrapper'"
+      :container="`#${props.id}`"
       :strategy="
         props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
       "
@@ -26,44 +26,46 @@
         width: props.width,
       }"
     >
-      <div @click="handleOptionsToggle">
-        <spr-input
-          :id="`input-${props.id}`"
-          v-model="inputText"
-          class="spr-cursor-pointer"
-          :placeholder="props.placeholder"
-          autocomplete="off"
-          :helper-text="props.helperText"
-          :helper-icon="props.helperIcon"
-          :display-helper="props.displayHelper"
-          readonly
-          :disabled="props.disabled"
-          :error="props.error"
-          @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>
+      <div ref="ladderizedSelectState">
+        <div @click="ladderizedSelectPopperState = !ladderizedSelectPopperState">
+          <spr-input
+            :id="`input-${props.id}`"
+            v-model="inputText"
+            class="spr-cursor-pointer"
+            :placeholder="props.placeholder"
+            autocomplete="off"
+            :helper-text="props.helperText"
+            :helper-icon="props.helperIcon"
+            :display-helper="props.displayHelper"
+            readonly
+            :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>
-      </div>
+            <template #helperMessage>
+              <slot name="helperMessage" />
+            </template>
+          </spr-input>
+        </div>
 
-      <div id="ladderized-select-wrapper" :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="ladderizedSelectRef"
+          ref="ladderizedSelectPopperRef"
           class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden"
         >
           <template v-if="ladderizedSelectOptions.length > 0">
@@ -106,15 +108,14 @@ const emit = defineEmits(selectLadderizedEmitTypes);
 
 const {
   ladderizedClasses,
+  ladderizedSelectState,
   ladderizedSelectPopperState,
-  ladderizedSelectRef,
+  ladderizedSelectPopperRef,
   ladderizedSelectOptions,
   isLadderizedSelectPopperDisabled,
   ladderizedSelectModel,
   inputText,
   handleSelectedLadderizedItem,
-  handleSearch,
   handleClear,
-  handleOptionsToggle,
 } = 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, useDebounceFn, onClickOutside } from '@vueuse/core';
+import { useVModel, onClickOutside } from '@vueuse/core';
 
 import type { SelectLadderizedPropTypes } from './select-ladderized';
 
@@ -17,9 +17,11 @@ export const useSelectLadderized = (
     supportingLabelClasses: 'spr-body-sm-regular spr-text-color-supporting',
   }));
 
+  const ladderizedSelectState = ref<HTMLDivElement | null>(null);
+
   // Popper Variables
-  const ladderizedSelectPopperState = ref(false);
-  const ladderizedSelectRef = ref(null);
+  const ladderizedSelectPopperState = ref<boolean>(false);
+  const ladderizedSelectPopperRef = ref<HTMLElement | null>(null);
   const isLadderizedSelectPopperDisabled = computed(() => disabled.value);
 
   // Ladderized Select Model
@@ -28,8 +30,7 @@ export const useSelectLadderized = (
 
   // Input Variables
   const inputText = ref<string>('');
-  const isSearching = ref(false);
-  const wasCleared = ref(false);
+  const wasCleared = ref<boolean>(false);
 
   const isLeafNode = (item: MenuListType): boolean => {
     return !item.sublevel || item.sublevel.length === 0;
@@ -102,8 +103,6 @@ export const useSelectLadderized = (
 
         if (leafItem && isLeafNode(leafItem)) {
           ladderizedSelectPopperState.value = false;
-
-          emit('popper-state', false);
         }
 
         return;
@@ -141,24 +140,12 @@ export const useSelectLadderized = (
 
       if (isLeafNode(itemToCheck)) {
         ladderizedSelectPopperState.value = false;
-
-        emit('popper-state', 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;
 
@@ -167,14 +154,6 @@ export const useSelectLadderized = (
     emit('update:modelValue', []);
   };
 
-  const handleOptionsToggle = () => {
-    ladderizedSelectPopperState.value = true;
-
-    isSearching.value = false;
-
-    emit('popper-state', true);
-  };
-
   // Watch for changes in modelValue to update inputText
   watch(
     () => ladderizedSelectModel.value,
@@ -209,23 +188,31 @@ export const useSelectLadderized = (
     { immediate: true },
   );
 
-  onClickOutside(ladderizedSelectRef, () => {
-    ladderizedSelectPopperState.value = false;
+  watch(ladderizedSelectPopperState, (newState) => {
+    emit('popper-state', newState);
+  });
 
-    emit('popper-state', false);
+  // Close only when clicking completely outside both the popper and the trigger wrapper.
+  onClickOutside(ladderizedSelectPopperRef, (event) => {
+    const triggerWrapper = ladderizedSelectState.value;
+    if (triggerWrapper && triggerWrapper.contains(event.target as Node)) {
+      return; // ignore clicks on trigger content
+    }
+    if (ladderizedSelectPopperState.value) {
+      ladderizedSelectPopperState.value = false;
+    }
   });
 
   return {
     ladderizedClasses,
+    ladderizedSelectState,
     ladderizedSelectPopperState,
-    ladderizedSelectRef,
+    ladderizedSelectPopperRef,
     ladderizedSelectOptions,
     isLadderizedSelectPopperDisabled,
     ladderizedSelectModel,
     inputText,
     handleSelectedLadderizedItem,
-    handleSearch,
     handleClear,
-    handleOptionsToggle,
   };
 };

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

@@ -24,12 +24,12 @@ const PLACEMENTS_TYPES = [
 ] as const;
 
 const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
+const TRIGGER_EVENTS = ['click', 'hover', 'focus', 'touch'] as const;
 
 export const multiSelectPropTypes = {
   id: {
     type: String,
     required: true,
-    default: 'multi-select',
   },
   modelValue: {
     type: Array as PropType<(string | number | Record<string, unknown>)[]>,
@@ -76,6 +76,24 @@ export const multiSelectPropTypes = {
     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: () => [],
+  },
+  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: false,
+  },
   popperStrategy: {
     type: String,
     validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),