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

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

@@ -61,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)[];
@@ -196,7 +197,6 @@ declare function __VLS_template(): {
             activeOptionId: string;
             expanded: boolean;
         }> | null;
-        triggerButtonRef: HTMLButtonElement;
         dropdownContentRef: HTMLDivElement;
         options: HTMLUListElement;
     };
@@ -257,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)[];
@@ -392,7 +393,6 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         activeOptionId: string;
         expanded: boolean;
     }> | null;
-    triggerButtonRef: HTMLButtonElement;
     dropdownContentRef: HTMLDivElement;
     options: HTMLUListElement;
 }, HTMLDivElement>;

package/dist/components/searchTagSelect/EUISearchTagSelect.vue

@@ -9,23 +9,7 @@
         {{ label }} <span v-if="required" class="text-red-500">*</span>
       </label>
     </slot>
-    <Popper
-      :class="[
-        `popper-defaultstyle w-full ${popperClasses}`,
-        { 'search-tag-select--teleported': teleported },
-      ]"
-      v-bind="$attrs"
-      :show="showDropDown"
-      :arrow="!teleported"
-      closeDelay="100"
-      :offsetSkid="offsetSkid"
-      :offsetDistance="offsetDistance"
-      :placement="placement"
-      :interactive="true"
-      :auto-hide="!teleported"
-      @open:popper="handleOpen"
-      @close:popper="handleClose"
-    >
+    <div ref="triggerRef" class="w-full" v-bind="$attrs">
       <SearchInput
         v-if="showDropDown || selectedValues.length === 0"
         ref="searchInputRef"
@@ -44,7 +28,6 @@
       />
       <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"
@@ -93,13 +76,19 @@
           />
         </div>
       </button>
-      <template #content>
-        <Teleport to="body" :disabled="!teleported">
+    </div>
+    <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
+            :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
@@ -276,9 +265,7 @@
             </EUIButton>
           </div>
           </div>
-        </Teleport>
-      </template>
-    </Popper>
+    </Teleport>
     <template v-if="errors && errors.length && !showDropDown">
       <EUIErrorMessage :errors="errors" :name="name" class="mt-2" />
     </template>
@@ -358,8 +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 } from "@popperjs/core";
+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";
@@ -476,9 +462,10 @@ const draftValues = ref<any[]>([]);
 const options = ref<HTMLElement>();
 const searchInputRef = ref<any>();
 const componentRef = ref<HTMLElement>();
-const triggerButtonRef = ref<HTMLButtonElement>();
+const triggerRef = ref<HTMLElement>();
 const dropdownContentRef = ref<HTMLElement>();
-let teleportedPopper: Instance | undefined;
+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}`;
@@ -843,44 +830,58 @@ const handleSearchKeydown = (event: KeyboardEvent) => {
   else handleSelect(item);
 };
 
-const destroyTeleportedPopper = () => {
-  teleportedPopper?.destroy();
-  teleportedPopper = undefined;
+const destroyPopper = () => {
+  popperInstance?.destroy();
+  popperInstance = null;
 };
 
-const createTeleportedPopper = () => {
-  if (!props.teleported || !dropdownContentRef.value) return;
-
-  const trigger =
-    (searchInputRef.value?.$el as HTMLElement | undefined) ||
-    triggerButtonRef.value;
-  if (!trigger) return;
+const createDropdownPopper = async () => {
+  await nextTick();
+  if (!showDropDown.value || !triggerRef.value || !dropdownContentRef.value)
+    return;
 
-  destroyTeleportedPopper();
-  teleportedPopper = createPopper(trigger, dropdownContentRef.value, {
-    placement: props.placement,
-    strategy: "fixed",
+  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 } },
-      { name: "preventOverflow", options: { padding: 8 } },
+      {
+        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: true,
+        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 = () => {
+const handleOpen = async () => {
   if (props.disabled || showDropDown.value) return;
 
   highlightedIndex.value = -1;
@@ -893,13 +894,15 @@ 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(() => {
     if (!showDropDown.value) return;
-    createTeleportedPopper();
     focusTimer = setTimeout(() => {
       focusTimer = undefined;
       if (!showDropDown.value) return;
@@ -930,8 +933,8 @@ const handleApply = () => {
 
 const handleClose = () => {
   highlightedIndex.value = -1;
-  window.removeEventListener("scroll", handleScroll, true);
-  destroyTeleportedPopper();
+  destroyPopper();
+  dropdownReady.value = false;
   if (focusTimer) {
     clearTimeout(focusTimer);
     focusTimer = undefined;
@@ -962,40 +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) &&
-    !event.composedPath().includes(dropdownContentRef.value as EventTarget)
-  ) {
-    handleDismiss();
-  }
-};
+    componentRef.value?.contains(target) ||
+    dropdownContentRef.value?.contains(target)
+  ) return;
 
-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;
   handleDismiss();
 };
 
 // Lifecycle hooks
 onMounted(() => {
-  document.addEventListener("click", handleDocumentClick);
+  document.addEventListener("pointerdown", handleDocumentPointerDown);
 });
 
 onUnmounted(() => {
-  document.removeEventListener("click", handleDocumentClick);
-  window.removeEventListener("scroll", handleScroll, true);
-  destroyTeleportedPopper();
+  document.removeEventListener("pointerdown", handleDocumentPointerDown);
+  destroyPopper();
   if (focusTimer) clearTimeout(focusTimer);
 });
 
@@ -1004,23 +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;
-  }
-
-  &.search-tag-select--teleported > div.popper {
-    display: none !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`,
 });