design-system-next 2.15.7 → 2.16.3

package/src/components/dropdown/dropdown.ts

@@ -39,8 +39,7 @@ export const dropdownPropTypes = {
   },
   menuList: {
     type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
-    required: true,
-    default: [],
+    default: () => [],
   },
   searchableMenu: {
     type: Boolean,
@@ -87,6 +86,29 @@ export const dropdownPropTypes = {
     type: String,
     default: '100%',
   },
+  autoHide: {
+    type: Boolean,
+    default: true,
+  },
+  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: () => [],
+  },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
   popperWidth: {
     type: String,
     default: '100%',
@@ -95,10 +117,9 @@ export const dropdownPropTypes = {
     type: String,
     default: 'unset',
   },
-  popperStrategy: {
+  popperContainer: {
     type: String,
-    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
-    default: 'absolute',
+    default: '',
   },
   disabled: {
     type: Boolean,
@@ -116,32 +137,10 @@ export const dropdownPropTypes = {
     type: Boolean,
     default: false,
   },
-  dropdown: {
-    type: Boolean,
-    default: false,
-  },
   lozenge: {
     type: Boolean,
     default: false,
   },
-  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,
-  },
 };
 
 export const dropdownEmitTypes = {

package/src/components/dropdown/dropdown.vue

@@ -8,7 +8,7 @@
     :popper-triggers="props.popperTriggers"
     :auto-hide="props.autoHide"
     :disabled="isDropdownPopperDisabled"
-    :container="`#${props.id}`"
+    :container="props.popperContainer ? props.popperContainer : `#${props.id}`"
     :strategy="
       props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
     "
@@ -30,47 +30,57 @@
     ></div>
 
     <template #popper>
-      <div
-        ref="dropdownRef"
-        :class="[
-          'spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden',
-          !props.ladderized || isLadderizedSearch,
-        ]"
-        :style="{
-          width: props.popperInnerWidth,
-        }"
-      >
-        <template v-if="dropdownMenuList.length > 0">
-          <spr-list
-            v-if="!props.ladderized || isLadderizedSearch"
-            v-model="selectedListItems"
-            :menu-list="dropdownMenuList"
-            :searchable-menu="props.searchableMenu"
-            :group-items-by="props.groupItemsBy"
-            :multi-select="props.multiSelect"
-            :pre-selected-items="dropdownValue"
-            :no-check="props.noCheckInList"
-            :dropdown="props.dropdown"
-            :lozenge="props.lozenge"
-            @update:model-value="handleSelectedItem"
-          />
-          <spr-ladderized-list
-            v-else
-            v-model="dropdownValue"
-            :ladderized="props.ladderized"
-            :dropdown="props.dropdown"
-            :menu-list="dropdownMenuList"
-            :searchable-menu="props.searchableMenu"
-            :remove-current-level-in-back-label="removeCurrentLevelInBackLabel"
-            @update:model-value="handleSelectedLadderizedItem"
-          />
-        </template>
-        <template v-else>
-          <div 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>
-      </div>
+      <template v-if="$slots.popper">
+        <div
+          class="spr-overflow-y-auto spr-overflow-x-hidden spr-p-2"
+          :style="{
+            width: props.popperInnerWidth,
+          }"
+        >
+          <slot name="popper" />
+        </div>
+      </template>
+      <template v-else>
+        <div
+          ref="dropdownRef"
+          :class="[
+            'spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden',
+            !props.ladderized || isLadderizedSearch,
+          ]"
+          :style="{
+            width: props.popperInnerWidth,
+          }"
+        >
+          <template v-if="dropdownMenuList.length > 0">
+            <spr-list
+              v-if="!props.ladderized || isLadderizedSearch"
+              v-model="selectedListItems"
+              :menu-list="dropdownMenuList"
+              :searchable-menu="props.searchableMenu"
+              :group-items-by="props.groupItemsBy"
+              :multi-select="props.multiSelect"
+              :pre-selected-items="dropdownValue"
+              :no-check="props.noCheckInList"
+              :lozenge="props.lozenge"
+              @update:model-value="handleSelectedItem"
+            />
+            <spr-ladderized-list
+              v-else
+              v-model="dropdownValue"
+              :ladderized="props.ladderized"
+              :menu-list="dropdownMenuList"
+              :searchable-menu="props.searchableMenu"
+              :remove-current-level-in-back-label="removeCurrentLevelInBackLabel"
+              @update:model-value="handleSelectedLadderizedItem"
+            />
+          </template>
+          <template v-else>
+            <div 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>
+        </div>
+      </template>
     </template>
   </Menu>
 </template>

package/src/components/list/list.ts

@@ -82,10 +82,6 @@ export const listPropTypes = {
     type: Boolean,
     default: false,
   },
-  dropdown: {
-    type: Boolean,
-    default: false,
-  },
   lozenge: {
     type: Boolean,
     default: false,

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

@@ -101,6 +101,10 @@ export const selectLadderizedPropTypes = {
     type: Number,
     default: 6,
   },
+  autoHide: {
+    type: Boolean,
+    default: false,
+  },
   triggers: {
     type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
     validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
@@ -115,26 +119,26 @@ export const selectLadderizedPropTypes = {
     },
     default: () => [],
   },
-  autoHide: {
-    type: Boolean,
-    default: false,
-  },
-  wrapperPosition: {
+  popperStrategy: {
     type: String,
-    default: 'relative',
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
   },
-  width: {
+  popperWidth: {
     type: String,
     default: '100%',
   },
-  popperWidth: {
+  popperContainer: {
     type: String,
-    default: '100%',
+    default: '',
   },
-  popperStrategy: {
+  wrapperPosition: {
     type: String,
-    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
-    default: 'absolute',
+    default: 'relative',
+  },
+  width: {
+    type: String,
+    default: '100%',
   },
   removeCurrentLevelInBackLabel: {
     type: Boolean,

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

@@ -16,7 +16,7 @@
       :popper-triggers="props.popperTriggers"
       :auto-hide="props.autoHide"
       :disabled="isLadderizedSelectPopperDisabled"
-      :container="`#ladderized-select-popper-${props.id}`"
+      :container="props.popperContainer ? props.popperContainer : `#ladderized-select-popper-${props.id}`"
       :strategy="
         props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
       "
@@ -42,13 +42,16 @@
             :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"
-                />
+              <div
+                :class="[
+                  'spr-flex spr-items-center spr-gap-1',
+                  {
+                    'spr-cursor-pointer': !props.disabled,
+                    'spr-cursor-not-allowed': props.disabled,
+                  },
+                ]"
+              >
+                <Icon v-if="props.clearable && inputText" icon="ph:x" @click.stop="handleClear" />
                 <Icon icon="ph:caret-down" />
               </div>
             </template>

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

@@ -147,6 +147,8 @@ export const useSelectLadderized = (
   };
 
   const handleClear = () => {
+    if (disabled.value) return;
+
     wasCleared.value = true;
 
     inputText.value = '';

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

@@ -87,6 +87,10 @@ export const multiSelectPropTypes = {
     },
     default: () => [],
   },
+  autoHide: {
+    type: Boolean,
+    default: false,
+  },
   popperTriggers: {
     type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
     validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
@@ -94,10 +98,6 @@ export const multiSelectPropTypes = {
     },
     default: () => [],
   },
-  autoHide: {
-    type: Boolean,
-    default: false,
-  },
   popperStrategy: {
     type: String,
     validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
@@ -107,6 +107,10 @@ export const multiSelectPropTypes = {
     type: String,
     default: '100%',
   },
+  popperContainer: {
+    type: String,
+    default: '',
+  },
   width: {
     type: String,
     default: '100%',

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

@@ -16,7 +16,7 @@
       :popper-triggers="props.popperTriggers"
       :auto-hide="props.autoHide"
       :disabled="isMultiSelectPopperDisabled"
-      :container="`#multi-select-${props.id}`"
+      :container="props.popperContainer ? props.popperContainer : `#multi-select-${props.id}`"
       :strategy="
         props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
       "
@@ -48,12 +48,19 @@
                   </template>
                 </div>
                 <div :class="multiSelectClasses.chippedIconClasses">
-                  <div class="spr-flex spr-items-center spr-gap-1">
+                  <div
+                    :class="[
+                      'spr-flex spr-items-center spr-gap-1',
+                      {
+                        'spr-cursor-pointer': !props.disabled,
+                        'spr-cursor-not-allowed': props.disabled,
+                      },
+                    ]"
+                  >
                     <Icon
                       v-if="props.clearable && inputText"
-                      class="spr-cursor-pointer"
                       icon="ph:x"
-                      @click.stop="handleClear"
+                      @click.stop="!props.disabled ? handleClear : null"
                     />
                     <Icon icon="ph:caret-down" />
                   </div>
@@ -91,13 +98,16 @@
               :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"
-                  />
+                <div
+                  :class="[
+                    'spr-flex spr-items-center spr-gap-1',
+                    {
+                      'spr-cursor-pointer': !props.disabled,
+                      'spr-cursor-not-allowed': props.disabled,
+                    },
+                  ]"
+                >
+                  <Icon v-if="props.clearable && inputText" icon="ph:x" @click.stop="handleClear" />
                   <Icon icon="ph:caret-down" />
                 </div>
               </template>

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

@@ -316,11 +316,13 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
    * Clears the selection and input text, and closes the multi-select.
    */
   const handleClear = () => {
-    emit('update:modelValue', []);
+    if (disabled.value) return;
 
     multiSelectedListItems.value = [];
     inputText.value = '';
     multiSelectPopperState.value = false;
+
+    emit('update:modelValue', []);
   };
 
   watch(multiSelectModel, () => {
@@ -356,11 +358,22 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
   /**
    * Handles closing the multi-select when clicking outside.
    */
-  onClickOutside(multiSelectRef, () => {
-    multiSelectPopperState.value = false;
+  onClickOutside(
+    multiSelectRef,
+    (event) => {
+      // If click happened inside the floating popper content, don't treat as outside
+      if (multipleSelectPopperRef.value && multipleSelectPopperRef.value.contains(event.target as Node)) {
+        return;
+      }
 
-    updateMultiSelectedItemsFromValue();
-  });
+      multiSelectPopperState.value = false;
+
+      updateMultiSelectedItemsFromValue();
+    },
+    {
+      ignore: [multipleSelectPopperRef],
+    },
+  );
 
   useInfiniteScroll(
     multipleSelectPopperRef,

package/src/components/select/select.ts

@@ -105,6 +105,10 @@ export const selectPropTypes = {
     type: String,
     default: '100%',
   },
+  popperContainer: {
+    type: String,
+    default: '',
+  },
   width: {
     type: String,
     default: '100%',

package/src/components/select/select.vue

@@ -16,7 +16,7 @@
       :popper-triggers="props.popperTriggers"
       :auto-hide="props.autoHide"
       :disabled="isSelectPopperDisabled"
-      :container="`#select-popper-${props.id}`"
+      :container="props.popperContainer ? props.popperContainer : `#select-popper-${props.id}`"
       :strategy="
         props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
       "
@@ -47,13 +47,16 @@
             @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"
-                />
+              <div
+                :class="[
+                  'spr-flex spr-items-center spr-gap-1',
+                  {
+                    'spr-cursor-pointer': !props.disabled,
+                    'spr-cursor-not-allowed': props.disabled,
+                  },
+                ]"
+              >
+                <Icon v-if="props.clearable && inputText" icon="ph:x" @click.stop="handleClear" />
                 <Icon icon="ph:caret-down" />
               </div>
             </template>

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

@@ -301,10 +301,12 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
   };
 
   const handleClear = () => {
-    emit('update:modelValue', '');
-    emit('search-string', '');
+    if (disabled.value) return;
 
     inputText.value = '';
+
+    emit('update:modelValue', '');
+    emit('search-string', '');
   };
 
   watch(selectModel, () => {