@neovici/cosmoz-dropdown 7.4.0 → 7.4.2

package/dist/next/cosmoz-dropdown-next.js

@@ -1,4 +1,4 @@
-import { component, css, useEffect, useProperty, useRef } from '@pionjs/pion';
+import { component, css, useCallback, useEffect, useProperty, useRef, } from '@pionjs/pion';
 import { html } from 'lit-html';
 import { ref } from 'lit-html/directives/ref.js';
 import { useAutoOpen } from './use-auto-open.js';
@@ -88,43 +88,57 @@ const CosmozDropdownNext = (host) => {
     const { placement = 'bottom span-right', openOnHover, openOnFocus } = host;
     const popoverRef = useRef();
     const [opened, setOpened] = useProperty('opened', false);
-    const open = () => setOpened(true);
-    const close = () => setOpened(false);
-    const toggle = () => setOpened((v) => !v);
-    // Drive the native popover from the `opened` property
+    // Call showPopover/hidePopover synchronously so the browser associates
+    // the popover with the current user-gesture. Deferring to a microtask
+    // (useEffect) causes light-dismiss to immediately close the popover.
+    const open = useCallback(() => {
+        setOpened(true);
+        popoverRef.current?.showPopover();
+    }, []);
+    const close = useCallback(() => {
+        setOpened(false);
+        popoverRef.current?.hidePopover();
+    }, []);
+    const toggle = useCallback(() => {
+        const popover = popoverRef.current;
+        if (popover?.matches(':popover-open'))
+            close();
+        else
+            open();
+    }, []);
+    // Sync native popover when `opened` is set externally via property binding
     useEffect(() => {
         const popover = popoverRef.current;
         if (!popover)
             return;
-        if (opened && !popover.matches(':popover-open'))
+        if (opened)
             popover.showPopover();
-        if (!opened && popover.matches(':popover-open'))
+        else
             popover.hidePopover();
     }, [opened]);
-    // Attribute reflection — sync property → attribute for CSS selectors.
     useEffect(() => {
         host.toggleAttribute('opened', !!opened);
     }, [opened]);
-    useAutoOpen({ host, popoverRef, openOnHover, openOnFocus, open, close });
-    // When open-on-focus is active, clicking the button should only open
-    // (not toggle), since focusin already handles opening and toggle would
-    // race with the focusin handler (focusin opens, then click toggles closed).
+    const { scheduleClose, cancelClose } = useAutoOpen({
+        host,
+        popoverRef,
+        openOnHover,
+        openOnFocus,
+        open,
+        close,
+    });
+    // With open-on-focus, only open (not toggle) on click to avoid racing
+    // with the focusin handler
     const handleClick = openOnFocus ? open : toggle;
-    const onToggle = (e) => {
+    const onToggle = useCallback((e) => {
         autofocus(e);
-        // Sync browser-initiated state changes (light-dismiss, Escape)
-        // back to the property. The useEffect guards against redundant
-        // showPopover/hidePopover calls.
         setOpened(e.newState === 'open');
-        // Re-dispatch as a composed event so parent components across
-        // shadow boundaries can observe popover state changes.
-        // The native ToggleEvent is composed: false, bubbles: false.
         host.dispatchEvent(new ToggleEvent('dropdown-toggle', {
             newState: e.newState,
             oldState: e.oldState,
             composed: true,
         }));
-    };
+    }, []);
     return html `
 		<slot name="button" @click=${handleClick}></slot>
 		<div
@@ -132,6 +146,8 @@ const CosmozDropdownNext = (host) => {
 			style="position-area: ${placement}"
 			@toggle=${onToggle}
 			@select=${close}
+			@focusout=${scheduleClose}
+			@focusin=${cancelClose}
 			${ref((el) => el && (popoverRef.current = el))}
 		>
 			<slot></slot>

package/dist/next/use-auto-open.d.ts

@@ -8,5 +8,8 @@ interface UseAutoOpenOptions {
     open: () => void;
     close: () => void;
 }
-export declare const useAutoOpen: ({ host, popoverRef, openOnHover, openOnFocus, open, close, }: UseAutoOpenOptions) => void;
+export declare const useAutoOpen: ({ host, popoverRef, openOnHover, openOnFocus, open, close, }: UseAutoOpenOptions) => {
+    scheduleClose: () => void;
+    cancelClose: () => void;
+};
 export {};

package/dist/next/use-auto-open.js

@@ -10,8 +10,7 @@ export const useAutoOpen = ({ host, popoverRef, openOnHover, openOnFocus, open,
                 (host.matches(':hover') || popover?.matches(':hover'))) {
                 return;
             }
-            if (openOnFocus &&
-                (host.matches(':focus-within') || popover?.matches(':focus-within'))) {
+            if (host.matches(':focus-within') || popover?.matches(':focus-within')) {
                 return;
             }
             close();
@@ -45,4 +44,5 @@ export const useAutoOpen = ({ host, popoverRef, openOnHover, openOnFocus, open,
             host.removeEventListener('focusout', scheduleClose);
         };
     }, [openOnFocus, host]);
+    return { scheduleClose, cancelClose };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-dropdown",
-	"version": "7.4.0",
+	"version": "7.4.2",
 	"description": "A simple dropdown web component",
 	"keywords": [
 		"lit-html",