edvoyui-component-library-test-flight 0.0.248 → 0.0.249

package/dist/components/searchTagSelect/EUISearchTagSelect.d.ts

@@ -37,6 +37,8 @@ interface Props {
     maxVisibleTags?: number;
     tagSize?: "sm" | "md" | "lg";
     dropdownWidth?: string;
+    /** Render the menu at body level to escape clipping scroll containers. */
+    teleported?: boolean;
 }
 export type SelectItemKey = string | (string | number)[] | ((item: object, fallback?: any) => any);
 declare function __VLS_template(): {
@@ -194,6 +196,8 @@ declare function __VLS_template(): {
             activeOptionId: string;
             expanded: boolean;
         }> | null;
+        triggerButtonRef: HTMLButtonElement;
+        dropdownContentRef: HTMLDivElement;
         options: HTMLUListElement;
     };
     rootEl: HTMLDivElement;
@@ -231,6 +235,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     clearable: boolean;
     searchable: boolean;
     placement: "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
+    teleported: boolean;
     classes: string;
     backendPagination: boolean;
     itemText: string;
@@ -387,6 +392,8 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         activeOptionId: string;
         expanded: boolean;
     }> | null;
+    triggerButtonRef: HTMLButtonElement;
+    dropdownContentRef: HTMLDivElement;
     options: HTMLUListElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/searchTagSelect/EUISearchTagSelect.vue

@@ -10,16 +10,19 @@
       </label>
     </slot>
     <Popper
-      :class="[`popper-defaultstyle w-full ${popperClasses}`]"
+      :class="[
+        `popper-defaultstyle w-full ${popperClasses}`,
+        { 'search-tag-select--teleported': teleported },
+      ]"
       v-bind="$attrs"
       :show="showDropDown"
-      arrow
+      :arrow="!teleported"
       closeDelay="100"
       :offsetSkid="offsetSkid"
       :offsetDistance="offsetDistance"
       :placement="placement"
       :interactive="true"
-      :auto-hide="true"
+      :auto-hide="!teleported"
       @open:popper="handleOpen"
       @close:popper="handleClose"
     >
@@ -41,6 +44,7 @@
       />
       <button
         v-else-if="!showDropDown && selectedValues.length > 0"
+        ref="triggerButtonRef"
         type="button"
         :disabled="disabled"
         class="flex items-center justify-between w-full h-10 gap-2 px-4 py-2 text-left bg-white border border-gray-200 border-solid cursor-pointer search-textstyle rounded-3xl focus-within:outline-violet-200"
@@ -90,10 +94,13 @@
         </div>
       </button>
       <template #content>
-        <div
-          v-if="showDropDown"
-          :class="['w-full p-3 text-sm bg-white border-2 border-gray-100 border-solid shadow-lg rounded-3xl min-w-28', confirmSelection && selectType === 'multiple' ? '' : 'overflow-y-auto max-h-72 scrollbar--hide', dropdownWidth]"
-        >
+        <Teleport to="body" :disabled="!teleported">
+          <div
+            v-if="showDropDown"
+            ref="dropdownContentRef"
+            :class="['w-full p-3 text-sm bg-white border-2 border-gray-100 border-solid shadow-lg rounded-3xl min-w-28', confirmSelection && selectType === 'multiple' ? '' : 'overflow-y-auto max-h-72 scrollbar--hide', dropdownWidth, teleported ? 'z-[60]' : '']"
+            @click.stop
+          >
           <div class="flex items-center justify-between p-2 pb-0 mb-1 -mx-px -mt-3">
             <h3
             class="mb-0 text-xs font-semibold tracking-wide text-gray-500 uppercase bg-white "
@@ -120,7 +127,7 @@
             tabindex="-1"
             role="listbox"
             aria-label="Search results"
-            :class="['space-y-0.5', confirmSelection && selectType === 'multiple' ? 'max-h-52 overflow-y-auto scrollbar--hide' : '']"
+            :class="['space-y-0.5', confirmSelection && selectType === 'multiple' ? 'max-h-48 overflow-y-auto scrollbar--hide' : '']"
           >
             <li
               v-if="showAllOption"
@@ -268,7 +275,8 @@
               Apply
             </EUIButton>
           </div>
-        </div>
+          </div>
+        </Teleport>
       </template>
     </Popper>
     <template v-if="errors && errors.length && !showDropDown">
@@ -351,6 +359,7 @@ import EUICheckbox from "../checkbox/EUICheckbox.vue";
 import EUITag from "../tag/EUITag.vue";
 import EUIButton from "../button/EUIButton.vue";
 import Popper from "vue3-popper";
+import { createPopper, type Instance } from "@popperjs/core";
 import CheckTick from "../../assets/svg/CheckTick.vue";
 import { XMarkIcon } from "@heroicons/vue/20/solid";
 import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
@@ -409,6 +418,8 @@ interface Props {
   maxVisibleTags?: number;
   tagSize?: "sm" | "md" | "lg";
   dropdownWidth?: string,
+  /** Render the menu at body level to escape clipping scroll containers. */
+  teleported?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
@@ -440,7 +451,8 @@ const props = withDefaults(defineProps<Props>(), {
   selectAllLabel: "All",
   maxVisibleTags: 0,
   tagSize: "md",
-  dropdownWidth: ''
+  dropdownWidth: '',
+  teleported: false,
 });
 
 
@@ -464,6 +476,9 @@ const draftValues = ref<any[]>([]);
 const options = ref<HTMLElement>();
 const searchInputRef = ref<any>();
 const componentRef = ref<HTMLElement>();
+const triggerButtonRef = ref<HTMLButtonElement>();
+const dropdownContentRef = ref<HTMLElement>();
+let teleportedPopper: Instance | undefined;
 const tagsExpanded = ref(false);
 const highlightedIndex = ref(-1);
 const listboxId = `search-tag-listbox-${getCurrentInstance()?.uid ?? 0}`;
@@ -828,6 +843,43 @@ const handleSearchKeydown = (event: KeyboardEvent) => {
   else handleSelect(item);
 };
 
+const destroyTeleportedPopper = () => {
+  teleportedPopper?.destroy();
+  teleportedPopper = undefined;
+};
+
+const createTeleportedPopper = () => {
+  if (!props.teleported || !dropdownContentRef.value) return;
+
+  const trigger =
+    (searchInputRef.value?.$el as HTMLElement | undefined) ||
+    triggerButtonRef.value;
+  if (!trigger) return;
+
+  destroyTeleportedPopper();
+  teleportedPopper = createPopper(trigger, dropdownContentRef.value, {
+    placement: props.placement,
+    strategy: "fixed",
+    modifiers: [
+      {
+        name: "offset",
+        options: { offset: [Number(props.offsetSkid), Number(props.offsetDistance)] },
+      },
+      { name: "flip", options: { padding: 8 } },
+      { name: "preventOverflow", options: { padding: 8 } },
+      {
+        name: "sameWidth",
+        enabled: true,
+        phase: "beforeWrite",
+        requires: ["computeStyles"],
+        fn: ({ state }) => {
+          state.styles.popper.width = `${state.rects.reference.width}px`;
+        },
+      },
+    ],
+  });
+};
+
 const handleOpen = () => {
   if (props.disabled || showDropDown.value) return;
 
@@ -847,6 +899,7 @@ const handleOpen = () => {
 
   nextTick(() => {
     if (!showDropDown.value) return;
+    createTeleportedPopper();
     focusTimer = setTimeout(() => {
       focusTimer = undefined;
       if (!showDropDown.value) return;
@@ -878,6 +931,7 @@ const handleApply = () => {
 const handleClose = () => {
   highlightedIndex.value = -1;
   window.removeEventListener("scroll", handleScroll, true);
+  destroyTeleportedPopper();
   if (focusTimer) {
     clearTimeout(focusTimer);
     focusTimer = undefined;
@@ -914,7 +968,8 @@ const handleDocumentClick = (event: MouseEvent) => {
   if (
     showDropDown.value &&
     componentRef.value &&
-    !event.composedPath().includes(componentRef.value)
+    !event.composedPath().includes(componentRef.value) &&
+    !event.composedPath().includes(dropdownContentRef.value as EventTarget)
   ) {
     handleDismiss();
   }
@@ -922,6 +977,10 @@ const handleDocumentClick = (event: MouseEvent) => {
 
 const handleScroll = (event: Event) => {
   if (!showDropDown.value) return;
+  if (props.teleported) {
+    teleportedPopper?.update();
+    return;
+  }
   const target = event.target;
   // Keep the options usable; scrolling any ancestor or the page closes them.
   if (target instanceof Node && componentRef.value?.contains(target)) return;
@@ -936,6 +995,7 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener("click", handleDocumentClick);
   window.removeEventListener("scroll", handleScroll, true);
+  destroyTeleportedPopper();
   if (focusTimer) clearTimeout(focusTimer);
 });
 
@@ -955,6 +1015,10 @@ watch(internalSearch, (value: string) => {
   & > div.popper {
     width: 100% !important;
   }
+
+  &.search-tag-select--teleported > div.popper {
+    display: none !important;
+  }
 }
 
 .show-count {