edvoyui-component-library-test-flight 0.0.223 → 0.0.225

package/dist/components/dropdown/EUIMultiDropdown.d.ts

@@ -19,6 +19,7 @@ declare function __VLS_template(): {
         }): any;
     };
     refs: {
+        dropdownRoot: HTMLDivElement;
         dropdownButton: HTMLButtonElement;
         dropdownMenu: HTMLDivElement;
     };
@@ -67,6 +68,15 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: PropType<"top" | "bottom" | "left" | "right">;
         default: string;
     };
+    /**
+     * Keep the dropdown open while the user interacts with content inside the menu
+     * (search fields, row actions). Selecting an item and clicking outside still close it.
+     * Off by default so existing menus keep dismissing on any click inside them.
+     */
+    keepOpenOnContentClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {
     subMenuItem: (...args: any[]) => void;
     menuItem: (...args: any[]) => void;
@@ -113,6 +123,15 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: PropType<"top" | "bottom" | "left" | "right">;
         default: string;
     };
+    /**
+     * Keep the dropdown open while the user interacts with content inside the menu
+     * (search fields, row actions). Selecting an item and clicking outside still close it.
+     * Off by default so existing menus keep dismissing on any click inside them.
+     */
+    keepOpenOnContentClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onSubMenuItem?: ((...args: any[]) => any) | undefined;
     onMenuItem?: ((...args: any[]) => any) | undefined;
@@ -123,7 +142,9 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     placement: "top" | "bottom" | "right" | "left";
     isSolidArrow: boolean;
     menuItems: MenuItem[];
+    keepOpenOnContentClick: boolean;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {
+    dropdownRoot: HTMLDivElement;
     dropdownButton: HTMLButtonElement;
     dropdownMenu: HTMLDivElement;
 }, HTMLDivElement>;

package/dist/components/dropdown/EUIMultiDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <div ref="dropdownRoot" class="relative">
     <!-- Main Dropdown Button -->
     <button
       type="button"
@@ -34,8 +34,10 @@
         :key="item.text"
         class="relative flex items-center px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100"
         @mouseenter="setActiveMenuItem(item.text)"
-        @mouseleave="clearActiveMenuItem"
-        @click.stop="$emit('menuItem', item)"
+        @mouseleave="scheduleClearActiveMenuItem(item.text)"
+        @focusin="setActiveMenuItem(item.text)"
+        @focusout="scheduleClearActiveMenuItem(item.text)"
+        @click.stop="selectMenuItem(item)"
       >
         <div
           class="flex items-center justify-between w-full gap-2 text-sm font-medium text-gray-800 break-words hover:text-gray-900"
@@ -59,6 +61,7 @@
         <div
           v-if="item.subMenu && activeMenuItem === item.text"
           :class="['absolute top-0 z-10 transition-all duration-300 ease-in-out min-w-32 max-w-64 w-max', placement === 'right' ? 'right-full' : 'left-full']"
+          @mouseenter="setActiveMenuItem(item.text)"
         >
           <div
             class="bg-white border border-gray-200 border-solid rounded-lg shadow-2xl ms-2 shadow-gray-300"
@@ -66,7 +69,7 @@
             <div
               v-if="item.enableAction"
               class="flex items-center justify-center w-full gap-1 px-6 py-3 text-sm font-medium text-gray-900 bg-purple-100 rounded-t-md"
-              @click.prevent="$emit('actionItem', 'action')"
+              @click.stop.prevent="triggerActionItem()"
             >
               <slot name="actionName">{{ "+ Action Name" }}</slot>
             </div>
@@ -77,7 +80,7 @@
                 v-for="subItem in item.subMenu"
                 :key="subItem.text"
                 class="flex items-center justify-between gap-2 px-3 py-2 text-sm font-medium text-gray-700 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-gray-900"
-                @click.stop="$emit('subMenuItem', subItem)"
+                @click.stop="selectSubMenuItem(subItem)"
               >
                 <slot name="submenu" :subItem="subItem">
                   {{ subItem.text }}
@@ -156,32 +159,84 @@ const props = defineProps({
     type: String as PropType<"top" | "bottom" | "left" | "right">,
     default: "bottom",
   },
+  /**
+   * Keep the dropdown open while the user interacts with content inside the menu
+   * (search fields, row actions). Selecting an item and clicking outside still close it.
+   * Off by default so existing menus keep dismissing on any click inside them.
+   */
+  keepOpenOnContentClick: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const isOpen = ref(false);
 const activeMenuItem = ref<string | null>(null);
+const dropdownRoot = ref<HTMLElement | null>(null);
 const dropdownButton = ref<HTMLElement | null>(null);
 const dropdownMenu = ref<HTMLElement | null>(null);
 const resolvedPlacement = ref<"top" | "bottom" | "left" | "right">(
   props.placement
 );
+let activeMenuCloseTimer: ReturnType<typeof setTimeout> | undefined;
 
-defineEmits(["subMenuItem", "menuItem", "actionItem"]);
+const emit = defineEmits(["subMenuItem", "menuItem", "actionItem"]);
 
 const toggleDropdown = () => {
-  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    closeDropdown();
+    return;
+  }
+
+  isOpen.value = true;
+};
+
+const closeDropdown = () => {
+  clearTimeout(activeMenuCloseTimer);
+  isOpen.value = false;
+  activeMenuItem.value = null;
 };
 
 const setActiveMenuItem = (text: string) => {
+  clearTimeout(activeMenuCloseTimer);
   activeMenuItem.value = text;
 };
 
-const clearActiveMenuItem = () => {
-  activeMenuItem.value = null;
+const scheduleClearActiveMenuItem = (text: string) => {
+  clearTimeout(activeMenuCloseTimer);
+  activeMenuCloseTimer = setTimeout(() => {
+    // Interactive submenu content (for example, search) must stay mounted while focused.
+    if (dropdownMenu.value?.contains(document.activeElement)) return;
+    if (activeMenuItem.value === text) activeMenuItem.value = null;
+  }, 150);
+};
+
+const selectMenuItem = (item: MenuItem) => {
+  emit("menuItem", item);
+  closeDropdown();
+};
+
+const selectSubMenuItem = (subItem: MenuItem) => {
+  emit("subMenuItem", subItem);
+  closeDropdown();
 };
 
+const triggerActionItem = () => {
+  emit("actionItem", "action");
+  closeDropdown();
+};
+
+// A click anywhere outside the dropdown always closes it.
+onClickOutside(dropdownRoot, () => {
+  closeDropdown();
+});
+
+// Legacy behaviour: the watcher used to sit on the trigger button alone, so clicks on the
+// menu itself counted as "outside" and dismissed it. Menus that host interactive content
+// opt out with `keepOpenOnContentClick` - they close on selection instead.
 onClickOutside(dropdownButton, () => {
-  isOpen.value = false;
+  if (props.keepOpenOnContentClick) return;
+  closeDropdown();
 });
 
 const updateDropdownPlacement = () => {
@@ -233,6 +288,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
+  clearTimeout(activeMenuCloseTimer);
   window.removeEventListener("resize", updateDropdownPlacement);
   window.removeEventListener("scroll", updateDropdownPlacement, true);
 });

package/dist/components/searchexpand/EUISearchExpand.vue

@@ -63,7 +63,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, PropType, ref, toRefs, watch } from "vue";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
 import SearchBigZoomIn from "../../assets/svg/SearchBigZoomIn.vue";
 
 const props = defineProps({
@@ -87,12 +96,13 @@ const emit = defineEmits(["update:modelValue"]);
 
 const input = ref<HTMLInputElement>();
 const isExpanded = ref(true);
-const searchQuery = ref();
+const searchQuery = ref<string | number>(props.modelValue ?? "");
 const componentWrapper = ref<HTMLElement | null>(null);
 
-function expandInput() {
+async function expandInput() {
   isExpanded.value = true;
-  input?.value?.focus();
+  await nextTick();
+  input.value?.focus();
 }
 
 const inputValue = computed(() => {
@@ -124,10 +134,19 @@ watch(
   { immediate: true, deep: true }
 );
 
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue !== searchQuery.value) {
+      searchQuery.value = newValue ?? "";
+    }
+  }
+);
+
 onMounted(() => {
   document.addEventListener("click", handleOutsideClick);
-  if (searchQuery.value) {
-    searchQuery.value?.focus();
+  if (isExpanded.value) {
+    nextTick(() => input.value?.focus());
   }
 });