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

package/README.md

@@ -32,6 +32,8 @@ Modern dropdown using the Popover API and CSS Anchor Positioning.
 | Property        | Type      | Default               | Description                                                                                                              |
 | --------------- | --------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------ |
 | `placement`     | `string`  | `'bottom span-right'` | CSS anchor `position-area` value. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position-area) for options. |
+| `disabled`      | `boolean` | `false`               | Prevents the dropdown from opening.                                                                                      |
+| `passthrough`   | `boolean` | `false`               | When `disabled` + `passthrough`, render default slot content inline instead of inside the popover.                       |
 | `open-on-hover` | `boolean` | `false`               | Open on pointer hover.                                                                                                   |
 | `open-on-focus` | `boolean` | `false`               | Open when the trigger receives focus.                                                                                    |
 
@@ -65,6 +67,24 @@ When auto-open is enabled:
 - When `open-on-focus` is active, clicking the button only opens (does not toggle)
 - Otherwise, click works as a toggle
 
+#### Disabled + Passthrough
+
+When `disabled` and `passthrough` are both set, the default slot content renders in normal document flow (outside the popover). This enables using the dropdown as a conditional wrapper — popover mode when enabled, inline mode when disabled:
+
+```html
+<!-- Dropdown mode (enabled) -->
+<cosmoz-dropdown-next placement="bottom span-right">
+	<button slot="button">Menu</button>
+	<div>Popover content</div>
+</cosmoz-dropdown-next>
+
+<!-- Inline mode (disabled + passthrough) -->
+<cosmoz-dropdown-next disabled passthrough>
+	<button slot="button">Menu</button>
+	<div>Rendered inline, not inside a popover</div>
+</cosmoz-dropdown-next>
+```
+
 #### Slots
 
 | Slot      | Description                                 |

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/next/cosmoz-dropdown-next.js

@@ -85,7 +85,7 @@ const style = css `
 	}
 `;
 const CosmozDropdownNext = (host) => {
-    const { placement = 'bottom span-right', disabled, openOnHover, openOnFocus, } = host;
+    const { placement = 'bottom span-right', disabled, passthrough, openOnHover, openOnFocus, } = host;
     const popoverRef = useRef();
     const [opened, setOpened] = useProperty('opened', false);
     // Call showPopover/hidePopover synchronously so the browser associates
@@ -146,17 +146,19 @@ const CosmozDropdownNext = (host) => {
     }, []);
     return html `
 		<slot name="button" @click=${handleClick}></slot>
-		<div
-			popover
-			style="position-area: ${placement}"
-			@toggle=${onToggle}
-			@select=${close}
-			@focusout=${scheduleClose}
-			@focusin=${cancelClose}
-			${ref((el) => el && (popoverRef.current = el))}
-		>
-			<slot></slot>
-		</div>
+		${disabled && passthrough
+        ? html `<slot></slot>`
+        : html `<div
+					popover
+					style="position-area: ${placement}"
+					@toggle=${onToggle}
+					@select=${close}
+					@focusout=${scheduleClose}
+					@focusin=${cancelClose}
+					${ref((el) => el && (popoverRef.current = el))}
+				>
+					<slot></slot>
+				</div>`}
 	`;
 };
 customElements.define('cosmoz-dropdown-next', component(CosmozDropdownNext, {
@@ -164,6 +166,7 @@ customElements.define('cosmoz-dropdown-next', component(CosmozDropdownNext, {
     observedAttributes: [
         'placement',
         'disabled',
+        'passthrough',
         'open-on-hover',
         'open-on-focus',
     ],

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.7.0",
 	"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",