@neovici/cosmoz-dropdown 7.7.1 → 7.7.2-beta.1

package/dist/cosmoz-dropdown-content.js

@@ -18,12 +18,12 @@ const style = css `
 		overflow: visible;
 	}
 	.wrap {
-		background: var(--cosmoz-dropdown-bg-color, #fff);
-		box-shadow: var(
-			--cosmoz-dropdown-box-shadow,
-			0px 3px 4px 2px rgba(0, 0, 0, 0.1)
+		background: var(
+			--cosmoz-dropdown-menu-bg-color,
+			var(--cz-color-bg-primary)
 		);
-		border-radius: var(--cosmoz-dropdown-border-radius, 15px);
+		box-shadow: var(--cosmoz-dropdown-box-shadow, var(--cz-shadow-sm));
+		border-radius: var(--cosmoz-dropdown-border-radius, var(--cz-radius-sm));
 	}
 	::slotted(*) {
 		display: block;

package/dist/cosmoz-dropdown-menu.js

@@ -1,26 +1,34 @@
-import { css, component } from '@pionjs/pion';
+import { component, css } from '@pionjs/pion';
 import { html } from 'lit-html';
 const style = css `
 	:host {
 		display: contents;
-		max-height: var(--cosmoz-dropdown-menu-max-height, calc(96vh - 64px));
+		max-height: var(--cosmoz-dropdown-menu-max-height, calc(96dvh - 64px));
+		background: var(
+			--cosmoz-dropdown-menu-bg-color,
+			var(--cz-color-bg-primary)
+		);
 		overflow-y: auto;
-		border-radius: var(--cosmoz-dropdown-border-radius, 15px);
+		padding: var(--cz-spacing) calc(var(--cz-spacing) * 1.5);
+		border-radius: var(--cosmoz-dropdown-border-radius, var(--cz-radius-sm));
+		border: 1px solid
+			var(--cosmoz-dropdown-menu-border-color, var(--cz-color-border-primary));
 	}
 	::slotted(:not(slot)) {
 		display: block;
 		--paper-button_-_display: block;
 		box-sizing: border-box;
-		padding: 10px 24px;
+		padding: calc(var(--cz-spacing) * 2) calc(var(--cz-spacing) * 2.5);
+		border-radius: var(--cosmoz-dropdown-border-radius, var(--cz-radius-sm));
 		background: var(--cosmoz-dropdown-menu-bg-color, transparent);
-		color: var(--cosmoz-dropdown-menu-color, #101010);
+		color: var(--cosmoz-dropdown-menu-color, var(--cz-color-text-primary));
 		transition:
 			background 0.25s,
 			color 0.25s;
 		border: none;
 		cursor: pointer;
-		font-size: 14px;
-		line-height: 20px;
+		font-size: var(--cz-text-sm);
+		line-height: var(--cz-text-sm-line-height);
 		text-align: left;
 		margin: 0;
 		width: 100%;
@@ -29,7 +37,7 @@ const style = css `
 	::slotted(:not(slot):hover) {
 		background: var(
 			--cosmoz-dropdown-menu-hover-color,
-			var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
+			var(--cz-color-bg-secondary)
 		);
 	}
 

package/dist/cosmoz-dropdown.d.ts

@@ -1,3 +1,4 @@
+import '@neovici/cosmoz-button';
 import { Content } from './cosmoz-dropdown-content';
 import { UseFloating } from './use-floating';
 import { UseFocusOpts } from './use-focus';

package/dist/cosmoz-dropdown.js

@@ -1,28 +1,18 @@
-import { component, css } from '@pionjs/pion';
+import '@neovici/cosmoz-button';
+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';
 const preventDefault = (e) => e.preventDefault();
 const style = css `
 	.anchor {
-		pointer-events: none;
 		padding: var(--cosmoz-dropdown-anchor-spacing);
 	}
-	button {
-		pointer-events: auto;
-		border: none;
-		cursor: pointer;
-		background: transparent;
-		padding: 0;
-	}
-	::slotted(svg) {
-		pointer-events: none;
-	}
+
 	@-moz-document url-prefix() {
 		#content {
 			left: auto;
@@ -32,31 +22,49 @@ 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)}>
-			<button
+    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)}>
+			<cosmoz-button
 				@mousedown=${preventDefault}
 				@click=${onToggle}
 				part="button"
 				id="dropdownButton"
 			>
 				<slot name="button">...</slot>
-			</button>
+			</cosmoz-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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-dropdown",
-	"version": "7.7.1",
+	"version": "7.7.2-beta.1",
 	"description": "A simple dropdown web component",
 	"keywords": [
 		"lit-html",
@@ -74,7 +74,7 @@
 		"@commitlint/cli": "^20.0.0",
 		"@commitlint/config-conventional": "^20.0.0",
 		"@neovici/cfg": "^2.13.0",
-		"@neovici/cosmoz-button": "^1.0.0",
+		"@neovici/cosmoz-button": "^1.1.1",
 		"@neovici/cosmoz-tokens": "^3.2.1",
 		"@open-wc/testing": "^4.0.0",
 		"@playwright/test": "1.60.0",