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

package/dist/cosmoz-dropdown.js

@@ -1,9 +1,8 @@
-import { component, css } from '@pionjs/pion';
+import { component, css, useCallback, useEffect, useRef } 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';
@@ -32,12 +31,30 @@ 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,
     });
-    return html ` <div class="anchor" part="anchor" ${ref(setReference)}>
+    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)}>
 			<button
 				@mousedown=${preventDefault}
 				@click=${onToggle}
@@ -47,16 +64,16 @@ const Dropdown = (host) => {
 				<slot name="button">...</slot>
 			</button>
 		</div>
-		${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
-				> `)}`;
+		<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
+		>
+	`;
 };
 customElements.define('cosmoz-dropdown', component(Dropdown, { styleSheets: [style] }));
 export { Content, Dropdown };

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

@@ -40,7 +40,7 @@ const style = css `
 		position: fixed;
 		position-anchor: --dropdown-anchor;
 		inset: unset;
-		margin: var(--cz-spacing, 0.25rem);
+		margin-block: var(--cz-spacing, 0.25rem);
 		position-try-fallbacks:
 			flip-block,
 			flip-inline,

package/dist/use-focus.js

@@ -1,6 +1,7 @@
-import { useEffect, useState, useCallback } from '@pionjs/pion';
 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);
 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;
@@ -16,6 +17,9 @@ 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();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-dropdown",
-	"version": "7.5.0",
+	"version": "7.6.1-beta.1",
 	"description": "A simple dropdown web component",
 	"keywords": [
 		"lit-html",
@@ -44,7 +44,13 @@
 			"@semantic-release/npm",
 			"@semantic-release/git"
 		],
-		"branch": "master",
+		"branches": [
+			"master",
+			{
+				"name": "beta",
+				"prerelease": true
+			}
+		],
 		"preset": "conventionalcommits"
 	},
 	"publishConfig": {