@neovici/cosmoz-dropdown 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-dropdown",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "A simple dropdown web component",
 	"keywords": [
 		"lit-html",
@@ -16,7 +16,7 @@
 	},
 	"license": "Apache-2.0",
 	"author": "",
-	"main": "sr/index.js",
+	"main": "src/index.js",
 	"directories": {
 		"test": "test"
 	},

package/src/cosmoz-dropdown.js

@@ -1,11 +1,10 @@
-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 });
+		usePosition({ anchor: host.anchor, host, placement: host.placement });
 		return html` <style>
 				:host {
 					position: fixed;
@@ -17,15 +16,9 @@ const preventDefault = e => e.preventDefault(),
 			<slot></slot>`;
 	},
 	Dropdown = host => {
-		const { 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));
-			};
-		}, []);
+		const { placement } = host,
+			anchor = useCallback(() => host.shadowRoot.querySelector('.anchor'), []),
+			{ active, onToggle } = useHostFocus(host);
 		return html`
 			<style>
 				.anchor {
@@ -44,7 +37,7 @@ const preventDefault = e => e.preventDefault(),
 				</button>
 			</div>
 			${ active
-		? html` <cosmoz-dropdown-content .anchor=${ anchor } part="dropdown">
+		? html` <cosmoz-dropdown-content part="dropdown" .anchor=${ anchor } .placement=${ placement }>
 						<slot></slot>
 				  </cosmoz-dropdown-content>`
 		: [] }

package/src/index.js

@@ -1,2 +1,4 @@
 export * from './cosmoz-dropdown';
+export * from './use-focus';
+export * from './use-position';
 

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;
+};