@neovici/cosmoz-dropdown 3.0.2 → 3.2.0

package/dist/cosmoz-dropdown.d.ts

@@ -0,0 +1,13 @@
+import { TemplateResult } from 'lit-html';
+import { Placement } from './use-position';
+import { UseFocusOpts } from './use-focus';
+interface ContentProps {
+    anchor: HTMLElement;
+    placement?: Placement;
+    render?: () => TemplateResult;
+}
+declare const Content: (host: HTMLElement & ContentProps) => TemplateResult<1>;
+interface DropdownProps extends UseFocusOpts, Pick<ContentProps, 'placement' | 'render'> {
+}
+declare const Dropdown: (host: HTMLElement & DropdownProps) => TemplateResult<1>;
+export { Dropdown, Content };

package/dist/cosmoz-dropdown.js

@@ -0,0 +1,150 @@
+import { component, useCallback } from 'haunted';
+import { html, nothing } from 'lit-html';
+import { when } from 'lit-html/directives/when.js';
+import { usePosition } from './use-position';
+import { useHostFocus } from './use-focus';
+const preventDefault = (e) => e.preventDefault();
+const Content = (host) => {
+    const { anchor, placement, render } = host;
+    usePosition({ anchor, placement, host });
+    return html ` <style>
+			:host {
+				position: fixed;
+				left: -9999999999px;
+				min-width: 72px;
+				box-sizing: border-box;
+				padding: var(--cosmoz-dropdown-spacing, 0px);
+				z-index: var(--cosmoz-dropdown-z-index, 2);
+			}
+			.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)
+				);
+			}
+			::slotted(*) {
+				display: block;
+			}
+		</style>
+		<div class="wrap" part="wrap"><slot></slot>${render?.() || nothing}</div>`;
+};
+const Dropdown = (host) => {
+    const { placement, render } = host, anchor = useCallback(() => host.shadowRoot.querySelector('.anchor'), []), { active, onToggle } = useHostFocus(host);
+    return html ` <style>
+			.anchor {
+				pointer-events: none;
+				padding: var(--cosmoz-dropdown-anchor-spacing);
+			}
+			button {
+				border: none;
+				cursor: pointer;
+				position: relative;
+				pointer-events: auto;
+				outline: none;
+				background: var(
+					--cosmoz-dropdown-button-bg-color,
+					var(--cosmoz-button-bg-color, #101010)
+				);
+				color: var(
+					--cosmoz-dropdown-button-color,
+					var(--cosmoz-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)
+				);
+				padding: var(--cosmoz-dropdown-button-padding);
+			}
+			button:hover {
+				background: var(
+					--cosmoz-dropdown-button-hover-bg-color,
+					var(--cosmoz-button-hover-bg-color, #3a3f44)
+				);
+			}
+			::slotted(svg) {
+				pointer-events: none;
+			}
+			@-moz-document url-prefix() {
+				#content {
+					left: auto;
+				}
+			}
+		</style>
+		<div class="anchor" part="anchor">
+			<button
+				@click=${onToggle}
+				@mousedown=${preventDefault}
+				part="button"
+				id="dropdownButton"
+			>
+				<slot name="button">...</slot>
+			</button>
+		</div>
+		${when(active, () => html ` <cosmoz-dropdown-content
+					id="content"
+					part="content"
+					exportparts="wrap, content"
+					.anchor=${anchor}
+					.placement=${placement}
+					.render=${render}
+				>
+					<slot></slot>
+				</cosmoz-dropdown-content>`)}`;
+};
+const List = () => html `
+	<style>
+		:host {
+			display: contents;
+			max-height: var(--cosmoz-dropdown-menu-max-height, calc(96vh - 64px));
+			overflow-y: auto;
+		}
+		::slotted(:not(slot)) {
+			display: block;
+			--paper-button_-_display: block;
+			box-sizing: border-box;
+			padding: 10px 24px;
+			background: transparent;
+			color: var(--cosmoz-dropdown-menu-color, #101010);
+			transition: background 0.25s, color 0.25s;
+			border: none;
+			cursor: pointer;
+			font-size: 14px;
+			line-height: 20px;
+			text-align: left;
+			margin: 0;
+			width: 100%;
+		}
+
+		::slotted(:not(slot):hover) {
+			background: var(
+				--cosmoz-dropdown-menu-hover-color,
+				var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
+			);
+		}
+
+		::slotted(:not(slot)[disabled]) {
+			opacity: 0.5;
+			pointer-events: none;
+		}
+	</style>
+	<slot></slot>
+`;
+const Menu = ({ placement }) => html ` <cosmoz-dropdown
+	.placement=${placement}
+	part="dropdown"
+	exportparts="anchor, button, content, wrap, dropdown"
+>
+	<slot name="button" slot="button"></slot>
+	<cosmoz-dropdown-list><slot></slot></cosmoz-dropdown-list>
+</cosmoz-dropdown>`;
+customElements.define('cosmoz-dropdown-content', component(Content));
+customElements.define('cosmoz-dropdown', component(Dropdown));
+customElements.define('cosmoz-dropdown-list', component(List));
+customElements.define('cosmoz-dropdown-menu', component(Menu));
+export { Dropdown, Content };

package/dist/index.js

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

package/dist/on-scrolled.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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
+ */
+export declare const onScrolled: <T extends Element>(el: T, handler: (e: Event) => void) => () => void;

package/dist/on-scrolled.js

@@ -0,0 +1,36 @@
+/**
+ * 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 instanceof Element && 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
+ */
+export const onScrolled = (el, handler) => {
+    const roots = ancestorRoots(el);
+    roots.forEach((r) => r.addEventListener('scroll', handler, true));
+    return () => {
+        roots.forEach((r) => r.removeEventListener('scroll', handler, true));
+    };
+};

package/dist/use-focus.d.ts

@@ -0,0 +1,16 @@
+export interface UseFocusOpts {
+    disabled?: boolean;
+    onFocus: (focused: boolean) => void;
+}
+export declare const useFocus: ({ disabled, onFocus }: UseFocusOpts) => {
+    active: boolean | undefined;
+    setClosed: (closed: boolean) => void;
+    onToggle: (e: Event) => void;
+    onFocus: (e: FocusEvent) => void;
+};
+export declare const useHostFocus: (host: HTMLElement & UseFocusOpts) => {
+    active: boolean | undefined;
+    setClosed: (closed: boolean) => void;
+    onToggle: (e: Event) => void;
+    onFocus: (e: FocusEvent) => void;
+};

package/dist/use-focus.js

@@ -0,0 +1,54 @@
+import { useEffect, useState, useCallback } from 'haunted';
+import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
+const isFocused = (t) => t.matches(':focus-within');
+export const useFocus = ({ disabled, onFocus }) => {
+    const [focusState, setState] = useState(), { focused, closed } = focusState || {}, 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]),
+    };
+};
+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;
+};

package/dist/use-position.d.ts

@@ -0,0 +1,16 @@
+/// <reference path="../types/position.d.ts" />
+import type { Placement } from 'position.js';
+export declare const defaultPlacement: readonly ["bottom-left", "bottom-right", "bottom", "top-left", "top-right", "top"];
+export { Placement };
+export interface PositionOpts {
+    host: HTMLElement;
+    anchor: HTMLElement;
+    placement?: Placement;
+    confinement?: HTMLElement;
+    limit?: boolean;
+}
+export declare const position: ({ host, anchor, placement, confinement, limit, }: PositionOpts) => void;
+interface UsePositionOpts extends Omit<PositionOpts, 'anchor'> {
+    anchor?: (() => HTMLElement) | HTMLElement | null;
+}
+export declare const usePosition: ({ anchor: anchorage, host, ...thru }: UsePositionOpts) => void;

package/dist/use-position.js

@@ -0,0 +1,49 @@
+// eslint-disable-next-line
+/// <reference path="../types/position.d.ts" />
+import { useEffect } from 'haunted';
+import getPosition from 'position.js';
+import { onScrolled } from './on-scrolled';
+export const defaultPlacement = [
+    'bottom-left',
+    'bottom-right',
+    'bottom',
+    'top-left',
+    'top-right',
+    'top',
+];
+export const 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';
+    }
+};
+export const 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)]);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-dropdown",
-	"version": "3.0.2",
+	"version": "3.2.0",
 	"description": "A simple dropdown web component",
 	"keywords": [
 		"lit-html",
@@ -16,13 +16,13 @@
 	},
 	"license": "Apache-2.0",
 	"author": "",
-	"main": "src/index.js",
+	"main": "dist/index.js",
 	"directories": {
 		"test": "test"
 	},
 	"scripts": {
-		"lint": "eslint --cache --ext .js .",
-		"lint-tsc": "tsc",
+		"lint": "tsc && eslint --cache .",
+		"build": "tsc -p tsconfig.build.json",
 		"start": "wds",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
@@ -46,7 +46,8 @@
 		"access": "public"
 	},
 	"files": [
-		"src/*.js"
+		"dist/",
+		"types"
 	],
 	"commitlint": {
 		"extends": [
@@ -60,6 +61,13 @@
 			]
 		}
 	},
+	"exports": {
+		".": "./dist/index.js",
+		"./use-focus": "./dist/use-focus.js",
+		"./use-position": "./dist/use-position.js",
+		"./src/use-focus.js": "./dist/use-focus.js",
+		"./src/use-position.js": "./dist/use-position.js"
+	},
 	"dependencies": {
 		"@neovici/cosmoz-utils": "^5.0.0",
 		"haunted": "^5.0.0",
@@ -74,13 +82,10 @@
 		"@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.5.1",
-		"@web/test-runner": "^0.13.0",
+		"@web/dev-server-storybook": "^0.6.0",
 		"husky": "^8.0.0",
-		"prettier": "^2.5.1",
-		"semantic-release": "^19.0.0",
-		"sinon": "^14.0.0",
-		"typescript": "^4.0.0"
+		"semantic-release": "^21.0.0",
+		"sinon": "^15.0.0",
+		"typescript": "^5.0.0"
 	}
 }

package/types/position.d.ts

@@ -0,0 +1,49 @@
+declare module 'position.js' {
+	export type PlacementDirection =
+		| 'bottom'
+		| 'top'
+		| 'right'
+		| 'left'
+		| 'center'
+		| 'left-center'
+		| 'top-center'
+		| 'bottom-center'
+		| 'bottom-left'
+		| 'bottom-right'
+		| 'bottom'
+		| 'top-left'
+		| 'top-right'
+		| 'top';
+
+	export interface PlacementPrecise {
+		popup: PlacementDirection;
+		anchor: PlacementDirection;
+	}
+
+	export type Placement =
+		| PlacementPrecise
+		| PlacementDirection
+		| readonly PlacementDirection[]
+		| readonly PlacementPrecise[];
+
+	export interface Bounds {
+		top: number;
+		left: number;
+	}
+
+	export default function position(
+		hostBounds: Bounds,
+		anchorBounds: Bounds,
+		placement: Placement,
+		options?: {
+			fixed?: boolean;
+			adjustXY?: 'both';
+			offsetParent?: HTMLElement;
+		}
+	): {
+		popupOffset: {
+			top: number;
+			left: number;
+		};
+	};
+}

package/src/cosmoz-dropdown.js

@@ -1,163 +0,0 @@
-import { component, useCallback } from 'haunted';
-import { html, nothing } from 'lit-html';
-import { when } from 'lit-html/directives/when.js';
-import { usePosition } from './use-position';
-import { useHostFocus } from './use-focus';
-
-const preventDefault = (e) => e.preventDefault(),
-	Content = (host) => {
-		const { anchor, placement, render } = host;
-		usePosition({ anchor, placement, host });
-		return html` <style>
-				:host {
-					position: fixed;
-					left: -9999999999px;
-					min-width: 72px;
-					box-sizing: border-box;
-					padding: var(--cosmoz-dropdown-spacing, 0px);
-					z-index: var(--cosmoz-dropdown-z-index, 2);
-				}
-				.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)
-					);
-				}
-				::slotted(*) {
-					display: block;
-				}
-			</style>
-			<div class="wrap" part="wrap">
-				<slot></slot>${render?.() || nothing}
-			</div>`;
-	},
-	Dropdown = (host) => {
-		const { placement, render } = host,
-			anchor = useCallback(() => host.shadowRoot.querySelector('.anchor'), []),
-			{ active, onToggle } = useHostFocus(host);
-		return html`
-			<style>
-				.anchor {
-					pointer-events: none;
-					padding: var(--cosmoz-dropdown-anchor-spacing);
-				}
-				button {
-					border: none;
-					cursor: pointer;
-					position: relative;
-					pointer-events: auto;
-					outline: none;
-					background: var(
-						--cosmoz-dropdown-button-bg-color,
-						var(--cosmoz-button-bg-color, #101010)
-					);
-					color: var(
-						--cosmoz-dropdown-button-color,
-						var(--cosmoz-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)
-					);
-					padding: var(--cosmoz-dropdown-button-padding);
-				}
-				button:hover {
-					background: var(
-						--cosmoz-dropdown-button-hover-bg-color,
-						var(--cosmoz-button-hover-bg-color, #3a3f44)
-					);
-				}
-				::slotted(svg) {
-					pointer-events: none;
-				}
-				@-moz-document url-prefix() {
-					#content {
-						left: auto;
-					}
-				}
-			</style>
-			<div class="anchor" part="anchor">
-				<button
-					@click=${onToggle}
-					@mousedown=${preventDefault}
-					part="button"
-					id="dropdownButton"
-				>
-					<slot name="button">...</slot>
-				</button>
-			</div>
-			${when(
-				active,
-				() =>
-					html` <cosmoz-dropdown-content
-						id="content"
-						part="content"
-						exportparts="wrap, content"
-						.anchor=${anchor}
-						.placement=${placement}
-						.render=${render}
-					>
-						<slot></slot>
-					</cosmoz-dropdown-content>`
-			)}
-		`;
-	},
-	List = () => html`
-		<style>
-			:host {
-				display: contents;
-				max-height: var(--cosmoz-dropdown-menu-max-height, calc(96vh - 64px));
-				overflow-y: auto;
-			}
-			::slotted(:not(slot)) {
-				display: block;
-				--paper-button_-_display: block;
-				box-sizing: border-box;
-				padding: 10px 24px;
-				background: transparent;
-				color: var(--cosmoz-dropdown-menu-color, #101010);
-				transition: background 0.25s, color 0.25s;
-				border: none;
-				cursor: pointer;
-				font-size: 14px;
-				line-height: 20px;
-				text-align: left;
-				margin: 0;
-				width: 100%;
-			}
-
-			::slotted(:not(slot):hover) {
-				background: var(
-					--cosmoz-dropdown-menu-hover-color,
-					var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
-				);
-			}
-
-			::slotted(:not(slot)[disabled]) {
-				opacity: 0.5;
-				pointer-events: none;
-			}
-		</style>
-		<slot></slot>
-	`,
-	Menu = ({ placement }) => html` <cosmoz-dropdown
-		.placement=${placement}
-		part="dropdown"
-		exportparts="anchor, button, content, wrap, dropdown"
-	>
-		<slot name="button" slot="button"></slot>
-		<cosmoz-dropdown-list><slot></slot></cosmoz-dropdown-list>
-	</cosmoz-dropdown>`;
-
-customElements.define('cosmoz-dropdown-content', component(Content));
-customElements.define('cosmoz-dropdown', component(Dropdown));
-customElements.define('cosmoz-dropdown-list', component(List));
-customElements.define('cosmoz-dropdown-menu', component(Menu));
-
-export { Dropdown, Content };

package/src/on-scrolled.js

@@ -1,37 +0,0 @@
-/**
- * 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

@@ -1,71 +0,0 @@
-import { useEffect, useState, useCallback } from 'haunted';
-import { useMeta } from '@neovici/cosmoz-utils/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]
-		)
-	};
-};
-
-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;
-};

package/src/use-position.js

@@ -1,51 +0,0 @@
-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 };