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

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(): {
@@ -59,6 +61,7 @@ declare function __VLS_template(): {
     };
     refs: {
         componentRef: HTMLDivElement;
+        triggerRef: HTMLDivElement;
         searchInputRef: import('../../../node_modules/vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
             modelValue: {
                 type: (StringConstructor | NumberConstructor)[];
@@ -194,6 +197,7 @@ declare function __VLS_template(): {
             activeOptionId: string;
             expanded: boolean;
         }> | null;
+        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;
@@ -252,6 +257,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     dropdownWidth: string;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, false, {
     componentRef: HTMLDivElement;
+    triggerRef: HTMLDivElement;
     searchInputRef: import('../../../node_modules/vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
         modelValue: {
             type: (StringConstructor | NumberConstructor)[];
@@ -387,6 +393,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         activeOptionId: string;
         expanded: boolean;
     }> | null;
+    dropdownContentRef: HTMLDivElement;
     options: HTMLUListElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/searchTagSelect/EUISearchTagSelect.vue

@@ -9,20 +9,7 @@
         {{ label }} <span v-if="required" class="text-red-500">*</span>
       </label>
     </slot>
-    <Popper
-      :class="[`popper-defaultstyle w-full ${popperClasses}`]"
-      v-bind="$attrs"
-      :show="showDropDown"
-      arrow
-      closeDelay="100"
-      :offsetSkid="offsetSkid"
-      :offsetDistance="offsetDistance"
-      :placement="placement"
-      :interactive="true"
-      :auto-hide="true"
-      @open:popper="handleOpen"
-      @close:popper="handleClose"
-    >
+    <div ref="triggerRef" class="w-full" v-bind="$attrs">
       <SearchInput
         v-if="showDropDown || selectedValues.length === 0"
         ref="searchInputRef"
@@ -89,11 +76,20 @@
           />
         </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]"
-        >
+    </div>
+    <Teleport to="body" :disabled="!teleported">
+          <div
+            v-if="showDropDown"
+            ref="dropdownContentRef"
+            :class="[
+              '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]' : 'z-50',
+              'transition-opacity duration-150 ease-out',
+              dropdownReady ? 'opacity-100' : 'opacity-0 pointer-events-none',
+            ]"
+          >
           <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 +116,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,9 +264,8 @@
               Apply
             </EUIButton>
           </div>
-        </div>
-      </template>
-    </Popper>
+          </div>
+    </Teleport>
     <template v-if="errors && errors.length && !showDropDown">
       <EUIErrorMessage :errors="errors" :name="name" class="mt-2" />
     </template>
@@ -350,7 +345,7 @@ import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
 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, type Placement } 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 +404,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 +437,8 @@ const props = withDefaults(defineProps<Props>(), {
   selectAllLabel: "All",
   maxVisibleTags: 0,
   tagSize: "md",
-  dropdownWidth: ''
+  dropdownWidth: '',
+  teleported: false,
 });
 
 
@@ -464,6 +462,10 @@ const draftValues = ref<any[]>([]);
 const options = ref<HTMLElement>();
 const searchInputRef = ref<any>();
 const componentRef = ref<HTMLElement>();
+const triggerRef = ref<HTMLElement>();
+const dropdownContentRef = ref<HTMLElement>();
+const dropdownReady = ref(false);
+let popperInstance: Instance | null = null;
 const tagsExpanded = ref(false);
 const highlightedIndex = ref(-1);
 const listboxId = `search-tag-listbox-${getCurrentInstance()?.uid ?? 0}`;
@@ -828,7 +830,58 @@ const handleSearchKeydown = (event: KeyboardEvent) => {
   else handleSelect(item);
 };
 
-const handleOpen = () => {
+const destroyPopper = () => {
+  popperInstance?.destroy();
+  popperInstance = null;
+};
+
+const createDropdownPopper = async () => {
+  await nextTick();
+  if (!showDropDown.value || !triggerRef.value || !dropdownContentRef.value)
+    return;
+
+  destroyPopper();
+  popperInstance = createPopper(triggerRef.value, dropdownContentRef.value, {
+    placement: props.placement as Placement,
+    strategy: props.teleported ? "fixed" : "absolute",
+    modifiers: [
+      {
+        name: "offset",
+        options: { offset: [Number(props.offsetSkid), Number(props.offsetDistance)] },
+      },
+      {
+        name: "flip",
+        options: {
+          padding: 8,
+          fallbackPlacements: ["bottom-start", "top-start", "bottom-end", "top-end"],
+        },
+      },
+      {
+        name: "preventOverflow",
+        options: {
+          boundary: "viewport",
+          rootBoundary: "viewport",
+          padding: 8,
+          altAxis: true,
+          tether: true,
+        },
+      },
+      {
+        name: "sameWidth",
+        enabled: !props.dropdownWidth,
+        phase: "beforeWrite",
+        requires: ["computeStyles"],
+        fn: ({ state }) => {
+          state.styles.popper.width = `${state.rects.reference.width}px`;
+        },
+      },
+      { name: "eventListeners", options: { scroll: true, resize: true } },
+    ],
+  });
+  await popperInstance.update();
+};
+
+const handleOpen = async () => {
   if (props.disabled || showDropDown.value) return;
 
   highlightedIndex.value = -1;
@@ -841,8 +894,11 @@ const handleOpen = () => {
   if (props.selectType === "single") {
     internalSearch.value = "";
   }
+  dropdownReady.value = false;
   showDropDown.value = true;
-  window.addEventListener("scroll", handleScroll, true);
+  await createDropdownPopper();
+  if (!showDropDown.value) return;
+  dropdownReady.value = true;
   emit("open");
 
   nextTick(() => {
@@ -877,7 +933,8 @@ const handleApply = () => {
 
 const handleClose = () => {
   highlightedIndex.value = -1;
-  window.removeEventListener("scroll", handleScroll, true);
+  destroyPopper();
+  dropdownReady.value = false;
   if (focusTimer) {
     clearTimeout(focusTimer);
     focusTimer = undefined;
@@ -908,34 +965,25 @@ const handleSearchFocus = () => {
 };
 
 // Document click handler for outside clicks
-const handleDocumentClick = (event: MouseEvent) => {
-  // The trigger can be replaced during this click. composedPath retains its
-  // original ancestors, so an inside click stays inside after that DOM update.
+const handleDocumentPointerDown = (event: PointerEvent) => {
+  if (!showDropDown.value) return;
+  const target = event.target as Node;
   if (
-    showDropDown.value &&
-    componentRef.value &&
-    !event.composedPath().includes(componentRef.value)
-  ) {
-    handleDismiss();
-  }
-};
+    componentRef.value?.contains(target) ||
+    dropdownContentRef.value?.contains(target)
+  ) return;
 
-const handleScroll = (event: Event) => {
-  if (!showDropDown.value) 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;
   handleDismiss();
 };
 
 // Lifecycle hooks
 onMounted(() => {
-  document.addEventListener("click", handleDocumentClick);
+  document.addEventListener("pointerdown", handleDocumentPointerDown);
 });
 
 onUnmounted(() => {
-  document.removeEventListener("click", handleDocumentClick);
-  window.removeEventListener("scroll", handleScroll, true);
+  document.removeEventListener("pointerdown", handleDocumentPointerDown);
+  destroyPopper();
   if (focusTimer) clearTimeout(focusTimer);
 });
 
@@ -944,19 +992,19 @@ watch(internalSearch, (value: string) => {
   emit("search", value);
 });
 
+watch(
+  () => [props.placement, props.offsetDistance, props.offsetSkid, props.teleported],
+  async () => {
+    if (!showDropDown.value) return;
+    dropdownReady.value = false;
+    await createDropdownPopper();
+    if (showDropDown.value) dropdownReady.value = true;
+  },
+);
+
 </script>
 
 <style lang="scss">
-.popper-defaultstyle {
-  border: 0px solid transparent !important;
-  margin: 0px !important;
-  @apply w-full;
-
-  & > div.popper {
-    width: 100% !important;
-  }
-}
-
 .show-count {
   @apply min-w-5 h-5 inline-flex items-center justify-center text-xss font-semibold bg-white rounded-xl;
 }

package/dist/components/table/UTable.vue

@@ -470,7 +470,7 @@ const headerStyle = (header: Header) => ({
 });
 
 const bodyStyle = (header: Header) => ({
-  width: `${header.width || 300}px`,
+  minWidth: `${header.width || 300}px`,
   maxWidth: `${header.width || 300}px`,
   // flex: `${header.width || 300} 0 auto`,
 });