design-system-next 2.16.2 → 2.17.4

package/src/components/popper/popper.ts

@@ -0,0 +1,12 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const popperPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+};
+
+export type PopperPropTypes = ExtractPropTypes<typeof popperPropTypes>;

package/src/components/popper/popper.vue

@@ -0,0 +1,36 @@
+<template>
+  <Menu
+    v-bind="$attrs"
+    :shown="popperState"
+    aria-id="popper-wrapper"
+    distance="4"
+    :container="`#${props.id}`"
+    :style="{
+      width: '100%',
+    }"
+  >
+    <div :id="props.id" @click="popperState = true">
+      <slot />
+    </div>
+
+    <template #popper>
+      <div ref="popperRef">
+        <slot name="content" />
+      </div>
+    </template>
+  </Menu>
+</template>
+
+<script lang="ts" setup>
+import { Menu } from 'floating-vue';
+
+import 'floating-vue/dist/style.css';
+
+import { popperPropTypes } from './popper';
+
+import { usePopper } from './use-popper';
+
+const props = defineProps(popperPropTypes);
+
+const { popperState, popperRef } = usePopper();
+</script>

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

@@ -0,0 +1,16 @@
+import { ref } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+
+export const usePopper = () => {
+  const popperRef = ref<HTMLDivElement | null>(null);
+  const popperState = ref<boolean>(false);
+
+  onClickOutside(popperRef, () => {
+    popperState.value = false;
+  });
+
+  return {
+    popperState,
+    popperRef,
+  };
+};

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'
       "

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'
       "

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

@@ -358,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'
       "