@neovici/cosmoz-dropdown 1.0.4 → 1.3.0

package/package.json

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

package/src/cosmoz-dropdown.js

@@ -1,9 +1,8 @@
-import { html, component, useCallback, useEffect } from 'haunted';
+import { html, component, useCallback } from 'haunted';
 import { usePosition } from './use-position';
-import { useFocus } from './use-focus';
+import { useHostFocus } from './use-focus';
 
 const preventDefault = e => e.preventDefault(),
-	fevs = ['focusin', 'focusout'],
 	Content = host => {
 		usePosition({ anchor: host.anchor, host, placement: host.placement });
 		return html` <style>
@@ -12,21 +11,22 @@ const preventDefault = e => e.preventDefault(),
 					left: -9999999999px;
 					min-width: 72px;
 					box-sizing: border-box;
+					padding: var(--cosmoz-dropdown-spacing, 0px)
+				}
+				.content {
+					background: var(--cosmoz-dropdown-bg-color, #fff);
+					box-shadow: var(--cosmoz-dropdown-box-shadow, 0px 3px 4px 2px rgba(0, 0, 0, 0.1));
+				}
+				::slotted(*) {
+					display: block;
 				}
 			</style>
-			<slot></slot>`;
+			<div class="content"><slot></slot></div>`;
 	},
 	Dropdown = host => {
 		const { placement } = host,
-			{ active, onFocus, onToggle } = useFocus(host),
-			anchor = useCallback(() => host.shadowRoot.querySelector('.anchor'), []);
-		useEffect(() => {
-			host.setAttribute('tabindex', '-1');
-			fevs.forEach(ev => host.addEventListener(ev, onFocus));
-			return () => {
-				fevs.forEach(ev => host.removeEventListener(ev, onFocus));
-			};
-		}, []);
+			anchor = useCallback(() => host.shadowRoot.querySelector('.anchor'), []),
+			{ active, onToggle } = useHostFocus(host);
 		return html`
 			<style>
 				.anchor {
@@ -37,6 +37,11 @@ const preventDefault = e => e.preventDefault(),
 					cursor: pointer;
 					pointer-events: auto;
 					outline: none;
+					background: var(--cosmoz-dropdown-button-bg-color, #101010);
+					color: var(--cosmoz-dropdown-button-color, #fff);
+					border-radius: var(--cosmoz-dropdown-button-radius, 50%);
+					width: var(--cosmoz-dropdown-button-width, var(--cosmoz-dropdown-button-size, 40px));
+					height: var(--cosmoz-dropdown-button-height, var(--cosmoz-dropdown-button-size, 40px));
 				}
 			</style>
 			<div class="anchor" part="anchor">

package/src/use-focus.js

@@ -7,7 +7,10 @@ export const useFocus = ({ disabled, onFocus }) => {
 	const [{ focused, closed } = {}, setState] = useState(),
 		active = focused && !disabled,
 		meta = useMeta({ closed, onFocus }),
-		setClosed = useCallback(closed => setState(p => ({ ...p, closed })), []),
+		setClosed = useCallback(
+			closed => setState(p => ({ ...p, closed })),
+			[]
+		),
 		onToggle = useCallback(e => {
 			const target = e.currentTarget;
 			return isFocused(target)
@@ -40,10 +43,29 @@ export const useFocus = ({ disabled, onFocus }) => {
 		active: active && !closed,
 		setClosed,
 		onToggle,
-		onFocus: useCallback(e => {
-			const focused = isFocused(e.currentTarget);
-			setState({ focused });
-			meta.onFocus?.(focused);
-		}, [meta])
+		onFocus: useCallback(
+			e => {
+				const focused = isFocused(e.currentTarget);
+				setState({ focused });
+				meta.onFocus?.(focused);
+			},
+			[meta]
+		)
 	};
 };
+
+const fevs = ['focusin', 'focusout'];
+export const useHostFocus = host => {
+	const thru = useFocus(host),
+		{ onFocus } = thru;
+
+	useEffect(() => {
+		host.setAttribute('tabindex', '-1');
+		fevs.forEach(ev => host.addEventListener(ev, onFocus));
+		return () => {
+			fevs.forEach(ev => host.removeEventListener(ev, onFocus));
+		};
+	}, []);
+
+	return thru;
+};