@neovici/cosmoz-dropdown 7.6.1-beta.1 → 7.6.1

package/dist/cosmoz-dropdown.js

@@ -1,8 +1,9 @@
-import { component, css, useCallback, useEffect, useRef } from '@pionjs/pion';
+import { component, css } from '@pionjs/pion';
 import { html, nothing } from 'lit-html';
 import { guard } from 'lit-html/directives/guard.js';
 import { ref } from 'lit-html/directives/ref.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
+import { when } from 'lit-html/directives/when.js';
 import { Content } from './cosmoz-dropdown-content';
 import { useFloating } from './use-floating';
 import { useHostFocus } from './use-focus';
@@ -31,30 +32,12 @@ const style = css `
 const Dropdown = (host) => {
     const { placement, strategy, middleware, render } = host;
     const { active, onToggle } = useHostFocus(host);
-    const contentRef = useRef();
     const { styles, setReference, setFloating } = useFloating({
         placement,
         strategy,
         middleware,
     });
-    const setContent = useCallback((el) => {
-        contentRef.current = el;
-        setFloating(el);
-    }, [setFloating]);
-    useEffect(() => {
-        const content = contentRef.current;
-        if (!content) {
-            return;
-        }
-        if (active && !content.matches(':popover-open')) {
-            content.showPopover?.();
-        }
-        if (!active && content.matches(':popover-open')) {
-            content.hidePopover?.();
-        }
-    }, [active]);
-    return html `
-		<div class="anchor" part="anchor" ${ref(setReference)}>
+    return html ` <div class="anchor" part="anchor" ${ref(setReference)}>
 			<button
 				@mousedown=${preventDefault}
 				@click=${onToggle}
@@ -64,16 +47,16 @@ const Dropdown = (host) => {
 				<slot name="button">...</slot>
 			</button>
 		</div>
-		<cosmoz-dropdown-content
-			popover
-			id="content"
-			part="content"
-			exportparts="wrap, content"
-			style="${styleMap(styles)}"
-			${ref(setContent)}
-			><slot></slot>${guard([render], () => render?.() || nothing)}</cosmoz-dropdown-content
-		>
-	`;
+		${when(active, () => html `<cosmoz-dropdown-content
+					popover
+					id="content"
+					part="content"
+					exportparts="wrap, content"
+					style="${styleMap(styles)}"
+					@connected=${(e) => e.target.showPopover?.()}
+					${ref(setFloating)}
+					><slot></slot>${guard([render], () => render?.() || nothing)}</cosmoz-dropdown-content
+				> `)}`;
 };
 customElements.define('cosmoz-dropdown', component(Dropdown, { styleSheets: [style] }));
 export { Content, Dropdown };

package/dist/use-focus.js

@@ -1,7 +1,12 @@
 import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
-import { useCallback, useEffect, useState } from '@pionjs/pion';
-const isFocused = (t) => t.matches(':focus-within');
-const hasOpenDialogInPath = (e) => e.composedPath().some((el) => el instanceof HTMLDialogElement && el.open);
+import { useCallback, useEffect, useRef, useState } from '@pionjs/pion';
+const isFocused = (t) => {
+    if (t.matches(':focus-within')) {
+        return true;
+    }
+    const popover = t.shadowRoot?.querySelector('[popover]');
+    return popover?.matches(':focus-within') ?? false;
+};
 export const useFocus = ({ disabled, onFocus }) => {
     const [focusState, setState] = useState(), { focused: _focused, closed } = focusState || {}, focused = _focused && !disabled, meta = useMeta({ closed, onFocus }), setClosed = useCallback((closed) => setState((p) => ({ ...p, closed })), []), onToggle = useCallback((e) => {
         const target = e.currentTarget;
@@ -17,9 +22,6 @@ export const useFocus = ({ disabled, onFocus }) => {
             if (e.defaultPrevented) {
                 return;
             }
-            if (e.key === 'Escape' && hasOpenDialogInPath(e)) {
-                return;
-            }
             const { closed } = meta;
             if (e.key === 'Escape' && !closed) {
                 e.preventDefault();
@@ -45,15 +47,28 @@ export const useFocus = ({ disabled, onFocus }) => {
         }, [meta]),
     };
 };
-const fevs = ['focusin', 'focusout'];
 export const useHostFocus = (host) => {
     const thru = useFocus(host), { onFocus } = thru;
+    const scheduleRef = useRef();
     useEffect(() => {
         host.setAttribute('tabindex', '0');
-        fevs.forEach((ev) => host.addEventListener(ev, onFocus));
+        const onFocusIn = (e) => {
+            clearTimeout(scheduleRef.current);
+            onFocus(e);
+        };
+        const onFocusOut = (e) => {
+            clearTimeout(scheduleRef.current);
+            const currentTarget = e.currentTarget;
+            // TODO: `onFocus` only uses `e.currentTarget`, consider refactoring to accept `HTMLElement` instead of `FocusEvent`
+            scheduleRef.current = setTimeout(() => onFocus({ currentTarget }), 30);
+        };
+        host.addEventListener('focusin', onFocusIn);
+        host.addEventListener('focusout', onFocusOut);
         return () => {
-            fevs.forEach((ev) => host.removeEventListener(ev, onFocus));
+            clearTimeout(scheduleRef.current);
+            host.removeEventListener('focusin', onFocusIn);
+            host.removeEventListener('focusout', onFocusOut);
         };
-    }, []);
+    }, [onFocus]);
     return thru;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-dropdown",
-	"version": "7.6.1-beta.1",
+	"version": "7.6.1",
 	"description": "A simple dropdown web component",
 	"keywords": [
 		"lit-html",
@@ -44,13 +44,7 @@
 			"@semantic-release/npm",
 			"@semantic-release/git"
 		],
-		"branches": [
-			"master",
-			{
-				"name": "beta",
-				"prerelease": true
-			}
-		],
+		"branch": "master",
 		"preset": "conventionalcommits"
 	},
 	"publishConfig": {
@@ -89,10 +83,11 @@
 	"devDependencies": {
 		"@commitlint/cli": "^20.0.0",
 		"@commitlint/config-conventional": "^20.0.0",
-		"@neovici/cfg": "^2.8.0",
+		"@neovici/cfg": "^2.13.0",
 		"@neovici/cosmoz-button": "^1.0.0",
 		"@neovici/cosmoz-tokens": "^3.2.1",
 		"@open-wc/testing": "^4.0.0",
+		"@playwright/test": "1.60.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/addon-docs": "^10.0.0",
@@ -106,6 +101,7 @@
 		"http-server": "^14.1.1",
 		"husky": "^9.0.11",
 		"lint-staged": "^16.2.7",
+		"playwright": "1.60.0",
 		"rollup-plugin-esbuild": "^6.1.1",
 		"semantic-release": "^25.0.0",
 		"shadow-dom-testing-library": "^1.13.1",