@neovici/cosmoz-dropdown 1.0.0

package/package.json

@@ -0,0 +1,80 @@
+{
+	"name": "@neovici/cosmoz-dropdown",
+	"version": "1.0.0",
+	"description": "A simple dropdown web component",
+	"keywords": [
+		"lit-html",
+		"web-components"
+	],
+	"homepage": "https://github.com/neovici/cosmoz-dropdown#readme",
+	"bugs": {
+		"url": "https://github.com/neovici/cosmoz-dropdown/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/neovici/cosmoz-dropdown.git"
+	},
+	"license": "Apache-2.0",
+	"author": "",
+	"main": "cosmoz-dropdown.js",
+	"directories": {
+		"test": "test"
+	},
+	"scripts": {
+		"lint": "eslint --cache --ext .js .",
+		"lint-tsc": "tsc",
+		"start": "wds",
+		"test": "wtr --coverage",
+		"test:watch": "wtr --watch",
+		"storybook:build": "build-storybook",
+		"storybook:deploy": "storybook-to-ghpages",
+		"prepare": "husky install"
+	},
+	"release": {
+		"plugins": [
+			"@semantic-release/commit-analyzer",
+			"@semantic-release/release-notes-generator",
+			"@semantic-release/changelog",
+			"@semantic-release/github",
+			"@semantic-release/npm",
+			"@semantic-release/git"
+		],
+		"branch": "master",
+		"preset": "conventionalcommits"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"src/*.js"
+	],
+	"commitlint": {
+		"extends": [
+			"@commitlint/config-conventional"
+		]
+	},
+	"dependencies": {
+		"@neovici/cosmoz-utils": "^3.24.0",
+		"haunted": "^4.7.0",
+		"lit-html": "^1.4.0",
+		"position.js": "^0.3.0"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^13.0.0",
+		"@commitlint/config-conventional": "^13.0.0",
+		"@neovici/eslint-config": "^1.2.0",
+		"@open-wc/testing": "^2.5.32",
+		"@semantic-release/changelog": "^6.0.0",
+		"@semantic-release/git": "^10.0.0",
+		"@storybook/storybook-deployer": "^2.8.5",
+		"@web/dev-server": "^0.1.28",
+		"@web/dev-server-storybook": "^0.3.8",
+		"@web/test-runner": "^0.13.0",
+		"@web/test-runner-selenium": "^0.5.0",
+		"husky": "^7.0.0",
+		"prettier": "^2.5.1",
+		"semantic-release": "^18.0.0",
+		"sinon": "^11.0.0",
+		"typescript": "^4.0.0"
+	}
+}

package/src/cosmoz-dropdown.js

@@ -0,0 +1,57 @@
+import { html, component, useCallback, useEffect } from 'haunted';
+import { usePosition } from './use-position';
+import { useFocus } from './use-focus';
+
+const preventDefault = e => e.preventDefault(),
+	fevs = ['focusin', 'focusout'],
+	Content = host => {
+		usePosition({ anchor: host.anchor, host });
+		return html` <style>
+				:host {
+					position: fixed;
+					left: -9999999999px;
+					min-width: 72px;
+					box-sizing: border-box;
+				}
+			</style>
+			<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));
+			};
+		}, []);
+		return html`
+			<style>
+				.anchor {
+					pointer-events: none;
+				}
+				button {
+					border: none;
+					cursor: pointer;
+					pointer-events: auto;
+					outline: none;
+				}
+			</style>
+			<div class="anchor" part="anchor">
+				<button @click=${ onToggle } @mousedown=${ preventDefault } part="button">
+					<slot name="button">...</slot>
+				</button>
+			</div>
+			${ active
+		? html` <cosmoz-dropdown-content .anchor=${ anchor } part="dropdown">
+						<slot></slot>
+				  </cosmoz-dropdown-content>`
+		: [] }
+		`;
+	};
+
+customElements.define('cosmoz-dropdown', component(Dropdown));
+customElements.define('cosmoz-dropdown-content', component(Content));
+
+export { Dropdown, Content };

package/src/index.js

@@ -0,0 +1,2 @@
+export * from './cosmoz-dropdown';
+

package/src/on-scrolled.js

@@ -0,0 +1,37 @@
+/**
+ * Returns all ancestor ShadowRoot elements
+ * @param {HTMLElement} el The element
+ * @param {HTMLElement} limit The limit to stop searching
+ * @returns {ShadowRoot[]} Array of ancestor roots
+ */
+const ancestorRoots = (el, limit = document.body) => {
+		const roots = [];
+		let ancestor = el;
+		while (ancestor && ancestor !== limit) {
+			if (ancestor.assignedSlot) {
+				ancestor = ancestor.assignedSlot;
+				continue;
+			}
+			if (ancestor instanceof ShadowRoot) {
+				roots.push(ancestor);
+				ancestor = ancestor.host;
+				continue;
+			}
+			ancestor = ancestor.parentNode;
+		}
+		return roots;
+	},
+	/**
+	 * Listen to a scroll event in a ancestor root
+	 * @param {HTMLElement} el The element
+	 * @param {function} handler The event handler
+	 * @returns {function} Function to cleanup the event listeners
+	 */
+	onScrolled = (el, handler) => {
+		const roots = ancestorRoots(el);
+		roots.forEach(r => r.addEventListener('scroll', handler, true));
+		return () => {
+			roots.forEach(r => r.removeEventListener('scroll', handler, true));
+		};
+	};
+export { onScrolled };

package/src/use-focus.js

@@ -0,0 +1,49 @@
+import { useEffect, useState, useCallback } from 'haunted';
+import { useMeta } from '@neovici/cosmoz-utils/lib/hooks/use-meta';
+
+const isFocused = t => t.matches(':focus-within');
+
+export const useFocus = ({ disabled, onFocus }) => {
+	const [{ focused, closed } = {}, setState] = useState(),
+		active = focused && !disabled,
+		meta = useMeta({ closed, onFocus }),
+		setClosed = useCallback(closed => setState(p => ({ ...p, closed })), []),
+		onToggle = useCallback(e => {
+			const target = e.currentTarget;
+			return isFocused(target)
+				? setState(p => ({ focused: true, closed: !p?.closed }))
+				: target.focus();
+		}, []);
+
+	useEffect(() => {
+		if (!active) {
+			return;
+		}
+		const handler = e => {
+			if (e.defaultPrevented) {
+				return;
+			}
+			const { closed } = meta;
+			if (e.key === 'Escape' && !closed) {
+				e.preventDefault();
+				setClosed(true);
+			} else if (['ArrowUp', 'Up'].includes(e.key) && closed) {
+				e.preventDefault();
+				setClosed(false);
+			}
+		};
+		document.addEventListener('keydown', handler, true);
+		return () => document.removeEventListener('keydown', handler, true);
+	}, [active]);
+
+	return {
+		active: active && !closed,
+		setClosed,
+		onToggle,
+		onFocus: useCallback(e => {
+			const focused = isFocused(e.currentTarget);
+			setState({ focused });
+			meta.onFocus?.(focused);
+		}, [meta])
+	};
+};

package/src/use-position.js

@@ -0,0 +1,51 @@
+import { useEffect } from 'haunted';
+import getPosition from 'position.js';
+import { onScrolled } from './on-scrolled';
+
+const defaultPlacement = ['bottom-left', 'bottom-right', 'bottom', 'top-left', 'top-right', 'top'],
+	position = ({ host, anchor, placement = defaultPlacement, confinement, limit }) => {
+		const anchorBounds = anchor.getBoundingClientRect(),
+			hostBounds = host.getBoundingClientRect(),
+			{ popupOffset: offset } = getPosition(hostBounds, anchorBounds, placement, {
+				fixed: true,
+				adjustXY: 'both',
+				offsetParent: confinement
+			}),
+			{ style } = host;
+		style.left = offset.left + 'px';
+		style.top = offset.top + 'px';
+		if (limit) {
+			style.minWidth = Math.max(anchorBounds.width, hostBounds.width) + 'px';
+		}
+	},
+	usePosition = ({ anchor: anchorage, host, ...thru }) => {
+		useEffect(() => {
+			const anchor = typeof anchorage === 'function' ? anchorage() : anchorage;
+			if (anchor == null) {
+				return;
+			}
+			let rid;
+			const reposition = () => position({ host, anchor, ...thru }),
+				ro = new ResizeObserver(reposition);
+
+			ro.observe(host);
+			ro.observe(anchor);
+
+			const onReposition = () => {
+					cancelAnimationFrame(rid);
+					rid = requestAnimationFrame(reposition);
+				},
+				offScroll = onScrolled(anchor, onReposition);
+			window.addEventListener('resize', onReposition, true);
+
+			return () => {
+				ro.unobserve(host);
+				ro.unobserve(anchor);
+				offScroll();
+				window.removeEventListener('resize', onReposition, true);
+				cancelAnimationFrame(rid);
+			};
+		}, [anchorage, ...Object.values(thru)]);
+	};
+
+export { usePosition, defaultPlacement };