@oscarpalmer/oui 0.22.0 → 0.23.0

package/src/js/internal/floatable.ts

@@ -1,110 +1,31 @@
-import {on} from '@oscarpalmer/toretto/event';
-import {findAncestor} from '@oscarpalmer/toretto/find';
-
 export class Floatable {
-	active = false;
-
-	disabled = false;
-
-	frame: DOMHighResTimeStamp | undefined;
-
-	ignoreFocus = false;
+	constructor(
+		public anchor: HTMLElement,
+		public content: HTMLElement,
+		public options: FloatableOptions,
+	) {
+		const anchorName = getAnchorName(anchor);
 
-	constructor(readonly options: Options) {
-		initialize(this);
+		anchor.style.anchorName = anchorName;
+		content.style.positionAnchor = anchorName;
 	}
 
 	destroy(): void {
-		stop(this);
-
-		const state = getState();
-
-		state?.active.delete(this);
-		state?.mapped.delete(this.options.anchor);
-		state?.mapped.delete(this.options.content);
-
-		this.options.anchor = undefined as never;
-		this.options.content = undefined as never;
+		this.anchor = null as never;
+		this.content = null as never;
 	}
 
-	disable(): void {
-		if (this.disabled) {
-			return;
-		}
-
-		this.disabled = true;
-
-		stop(this);
-
-		getState()?.active.delete(this);
-	}
-
-	enable(): void {
-		if (!this.disabled) {
-			return;
-		}
-
-		this.disabled = false;
-
-		initialize(this);
-	}
-
-	toggle(active: boolean, ignoreFocus?: boolean): void {
-		if (this.disabled || this.active === active) {
-			return;
-		}
-
-		const state = getState();
-
-		if (state == null) {
-			return;
-		}
-
-		this.ignoreFocus = !active && (ignoreFocus ?? false);
-
-		stop(this);
-
-		if (active) {
-			state.active.add(this);
-		} else {
-			state.active.delete(this);
-		}
-
-		if (this.options.interactive) {
-			if (active) {
-				state.order.push(this);
-			} else {
-				const index = state.order.indexOf(this);
-
-				if (index > -1) {
-					state.order.splice(index, 1);
-				}
-			}
-		}
-
-		if (active) {
-			activate(this);
-		} else {
-			deactivate(this);
-		}
+	update(): void {
+		setPosition(this);
 	}
 }
 
-type FloatableWindow = Window & {
-	_oscarpalmer_oui_floatable: State;
+export type FloatableOptions = {
+	attribute: string;
+	position: FloatablePosition;
 };
 
-type Options = {
-	anchor: HTMLElement;
-	content: HTMLElement;
-	defaultPosition: Position;
-	interactive: boolean;
-	positionAttribute: string;
-	reusable: boolean;
-	onAfter?: (active: boolean) => void;
-};
-
-type Position =
+export type FloatablePosition =
 	| 'above'
 	| 'above-end'
 	| 'above-start'
@@ -118,206 +39,60 @@ type Position =
 	| 'start-bottom'
 	| 'start-top';
 
-type State = {
-	active: Set<Floatable>;
-	mapped: Map<HTMLElement, Floatable>;
-	order: Floatable[];
-};
-
-//
-
-function activate(floatable: Floatable): void {
-	floatable.active = true;
-
-	document.body.append(floatable.options.content);
-
-	floatable.options.content.hidden = false;
-
-	setPosition(floatable);
-}
-
-function closeAbove(element: HTMLElement): void {
-	const state = getState();
-
-	if (state == null) {
+export function createFloatable(
+	anchor: HTMLElement | null,
+	content: HTMLElement,
+	options: FloatableOptions,
+): Floatable | undefined {
+	if (anchor == null) {
 		return;
 	}
 
-	const index = state.order.findIndex(
-		floatable => floatable.options.anchor === element || floatable.options.content === element,
-	);
-
-	if (index === -1 || index === state.order.length - 1) {
-		return;
-	}
-
-	while (index < state.order.length - 1) {
-		state.order.pop()?.toggle(false, true);
-	}
-}
+	let floatable = instances.get(content);
 
-function closeAll(): void {
-	const state = getState();
-
-	const floatables = [...(state?.active ?? [])];
-
-	state?.active.clear();
+	if (floatable == null) {
+		floatable = new Floatable(anchor, content, options);
 
-	for (const floatable of floatables) {
-		floatable.toggle(false, true);
+		instances.set(content, floatable);
 	}
-}
 
-function closeNonInteractive(state: State): void {
-	for (const floatable of state.active) {
-		if (!floatable.options.interactive) {
-			floatable.toggle(false);
-		}
-	}
+	return floatable;
 }
 
-export function deactivate(floatable: Floatable): void {
-	floatable.active = false;
-
-	if (!floatable.options.reusable) {
-		floatable.options.content.hidden = true;
+function getAnchorName(anchor: HTMLElement): string {
+	let {anchorName} = anchor.style;
 
-		floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
+	if (anchorName.length > 0) {
+		return anchorName;
 	}
 
-	floatable.options.onAfter?.(false);
-}
-
-function getAnchorName(): string {
 	index += 1;
 
 	return `--oui-floatable-anchor-${index}`;
 }
 
-function getState(): State {
-	return (window as unknown as FloatableWindow)._oscarpalmer_oui_floatable;
-}
-
-function initialize(floatable: Floatable): void {
-	const {anchor, content, interactive} = floatable.options;
-
-	if (interactive) {
-		anchor.setAttribute(ATTRIBUTE_ANCHOR, '');
-		content.setAttribute(ATTRIBUTE_CONTENT, '');
-	}
-
-	const anchorName = getAnchorName();
-
-	anchor.style.anchorName = anchorName;
-
-	content.style.position = 'absolute';
-	content.style.positionAnchor = anchorName;
-	content.style.positionTry = 'normal flip-start';
-
-	const state = getState();
-
-	state?.mapped.set(anchor, floatable);
-	state?.mapped.set(content, floatable);
-}
-
-function isDisabled(element: HTMLElement): boolean {
-	return (
-		(element as HTMLInputElement).disabled ||
-		(element as HTMLInputElement).readOnly ||
-		element.getAttribute('aria-disabled') === 'true'
-	);
-}
-
-function onClick(event: PointerEvent): void {
-	const related = findAncestor(event, SELECTOR_ALL);
-
-	if (!(related instanceof HTMLElement)) {
-		closeAll();
-	} else if (related.hasAttribute(ATTRIBUTE_CONTENT)) {
-		closeAbove(related);
-	} else if (!isDisabled(related)) {
-		toggle(related);
-	}
-}
-
-function onKeyDown(event: KeyboardEvent): void {
-	if (event.key !== 'Escape') {
-		return;
-	}
-
-	const state = getState();
-
-	if (state == null || state.active.size === 0) {
-		return;
-	}
-
-	closeNonInteractive(state);
-
-	const related = findAncestor(event, SELECTOR_CONTENT);
-
-	if (!(related instanceof HTMLElement)) {
-		return;
-	}
-
-	closeAbove(related);
-
-	const floatable = state.mapped.get(related);
-
-	if (floatable != null) {
-		floatable.toggle(false);
-	}
+export function removeFloatable(content: HTMLElement): void {
+	instances.get(content)?.destroy();
+	instances.delete(content);
 }
 
 function setPosition(floatable: Floatable): void {
-	let position: Position =
-		(floatable.options.anchor.getAttribute(floatable.options.positionAttribute) as Position) ??
-		floatable.options.defaultPosition;
+	let position: FloatablePosition =
+		(floatable.anchor.getAttribute(floatable.options.attribute) as FloatablePosition) ??
+		floatable.options.position;
 
 	if (AREAS[position] == null) {
-		position = floatable.options.defaultPosition;
+		position = floatable.options.position;
 	}
 
 	const area = AREAS[position];
 
-	floatable.options.content.style.positionArea = area;
+	floatable.content.style.positionArea = area;
 
-	floatable.options.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
-
-	floatable.options.onAfter?.(true);
-}
-
-function stop(floatable: Floatable): void {
-	if (floatable.frame != null) {
-		cancelAnimationFrame(floatable.frame);
-	}
-
-	floatable.frame = undefined;
-}
-
-function toggle(anchor: HTMLElement): void {
-	const floatable = getState()?.mapped.get(anchor);
-
-	if (floatable == null) {
-		closeAll();
-
-		return;
-	}
-
-	const active = Boolean(floatable.active);
-	const content = findAncestor(floatable.options.anchor, SELECTOR_CONTENT);
-
-	if (content == null) {
-		closeAll();
-	} else {
-		closeAbove(content as HTMLElement);
-	}
-
-	floatable.toggle(!active);
+	floatable.content.setAttribute(ATTRIBUTE, POSITIONS[area]);
 }
 
-//
-
-const AREAS: Record<Position, string> = {
+const AREAS: Record<FloatablePosition, string> = {
 	above: 'block-start',
 	'above-end': 'start span-start',
 	'above-start': 'start span-end',
@@ -332,42 +107,12 @@ const AREAS: Record<Position, string> = {
 	'start-top': 'span-end start',
 };
 
-const ATTRIBUTE_ANCHOR = 'oui-floatable-anchor';
-
-const ATTRIBUTE_CONTENT = 'oui-floatable-content';
-
-const ATTRIBUTE_POSITION = 'oui-position';
-
-const INSERT_AFTEREND = 'afterend';
+const ATTRIBUTE = 'oui-position';
 
 const POSITIONS = Object.fromEntries(
 	Object.entries(AREAS).map(([position, area]) => [area, position]),
-) as Record<string, Position>;
+) as Record<string, FloatablePosition>;
 
-const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
-
-const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const instances = new WeakMap<HTMLElement, Floatable>();
 
 let index = 0;
-
-//
-
-if ((window as unknown as FloatableWindow)._oscarpalmer_oui_floatable == null) {
-	Object.defineProperty(window, '_oscarpalmer_oui_floatable', {
-		enumerable: false,
-		value: {
-			active: new Set(),
-			mapped: new Map(),
-			order: [],
-		},
-		writable: false,
-	});
-
-	on(document, 'keydown', event => {
-		onKeyDown(event);
-	});
-
-	on(document, 'click', event => {
-		onClick(event);
-	});
-}

package/src/js/popover.ts

@@ -1,158 +1,96 @@
-import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
-import {getFocusable} from '@oscarpalmer/toretto/focusable';
-import {Floatable} from './internal/floatable';
-import {createFocusTrap, type FocusTrap} from './focus-trap/embedded';
-
-declare global {
-	// biome-ignore lint/nursery/useConsistentTypeDefinitions: Extending builtins to allow custom element type help
-	interface HTMLElementTagNameMap {
-		'oui-popover': OuiPopoverElement;
-	}
-}
-
-let index = 0;
-
-export class OuiPopoverElement extends HTMLElement {
-	readonly #floatable: Floatable;
-	readonly #focusTrap: FocusTrap;
-
-	constructor() {
-		super();
-
-		const content = this.querySelector(SELECTOR_CONTENT);
-		const toggle = this.querySelector(SELECTOR_TOGGLE);
-
-		if (!(content instanceof HTMLElement)) {
-			throw new Error(
-				'A oui-popover must have a direct child element with the [oui-popover-content]-attribute',
-			);
-		}
-
-		if (!(toggle instanceof HTMLButtonElement)) {
-			throw new Error(
-				'A oui-popover must have a direct child element with the [oui-popover-toggle]-attribute and be a button',
-			);
-		}
-
-		content.hidden = true;
-
-		content.setAttribute('role', 'dialog');
-		content.setAttribute('aria-modal', 'true');
-
-		if (isNullableOrWhitespace(content.id)) {
-			content.setAttribute('id', `${ATTRIBUTE_ID_PREFIX}_${++index}`);
-		}
-
-		toggle.setAttribute('aria-controls', content.id);
-		toggle.setAttribute('aria-haspopup', 'dialog');
-
-		this.#floatable = new Floatable({
-			content,
-			anchor: toggle,
-			defaultPosition: 'below-start',
-			interactive: true,
-			positionAttribute: 'position',
-			reusable: false,
-			onAfter: (active: boolean): void => {
-				if (active) {
-					focus(content);
-				} else if (!this.#floatable.ignoreFocus) {
-					toggle.focus();
-				}
-			},
-		});
-
-		this.#focusTrap = createFocusTrap(content, {
+import {on} from '@oscarpalmer/toretto/event';
+import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
+import {createFocusTrap, removeFocusTrap, type FocusTrap} from './focus-trap/embedded';
+import {attributable} from './internal/attributable';
+import {
+	createFloatable,
+	removeFloatable,
+	type Floatable,
+	type FloatableOptions,
+} from './internal/floatable';
+
+class Popover {
+	anchor: HTMLElement | null;
+	floatable?: Floatable;
+	focusTrap?: FocusTrap;
+	listener: RemovableEventListener;
+
+	constructor(public element: HTMLElement) {
+		this.anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
+
+		this.floatable = createFloatable(this.anchor as HTMLElement, element, options);
+
+		this.focusTrap = createFocusTrap(element, {
 			noescape: true,
 		});
 
-		POPOVERS.set(toggle, this.#floatable);
-		POPOVERS.set(content, this.#floatable);
-	}
+		this.listener = on(element, EVENT_TOGGLE, event => {
+			if (event.newState === STATE_OPEN) {
+				ignoreFocus = false;
 
-	close(): void {
-		this.hidePopover();
-	}
-
-	connectedCallback(): void {
-		this.#floatable.enable();
-		this.#focusTrap.connect();
-	}
-
-	disconnectedCallback(): void {
-		this.#floatable.disable();
-		this.#focusTrap.disconnect();
-	}
-
-	override hidePopover(): void {
-		if (this.#floatable.active && this.isConnected) {
-			this.#floatable.toggle(false);
-		}
-	}
+				this.floatable?.update();
 
-	open(): void {
-		this.showPopover();
-	}
+				element.focus();
+			} else if (!ignoreFocus) {
+				this.anchor?.focus();
+			}
+		});
 
-	override showPopover(): void {
-		if (!this.#floatable.active && this.isConnected) {
-			this.#floatable.toggle(true);
-		}
-	}
+		this.element.setAttribute(ATTRIBUTE_CONTENT, '');
 
-	toggle(): void {
-		this.togglePopover();
+		this.floatable?.update();
 	}
 
-	override togglePopover(options?: boolean): boolean {
-		if (typeof options === 'boolean') {
-			if (options === true) {
-				this.showPopover();
-			} else {
-				this.hidePopover();
-			}
-
-			return options;
-		}
-
-		if (this.#floatable.active) {
-			this.hidePopover();
+	destroy(): void {
+		this.focusTrap?.destroy();
 
-			return false;
-		}
+		removeFloatable(this.element);
+		removeFocusTrap(this.element);
 
-		this.showPopover();
+		this.element.removeAttribute(ATTRIBUTE_CONTENT);
 
-		return true;
+		this.anchor = null;
+		this.element = null as never;
 	}
 }
 
-//
+function onAdd(element: HTMLElement): void {
+	if (!instances.has(element) && element.getAttribute(ATTRIBUTE) !== POPOVER_HINT) {
+		instances.set(element, new Popover(element));
+	}
+}
 
-function focus(content: HTMLElement): void {
-	let target = getFocusable(content)[0];
+function onPointerdown(): void {
+	ignoreFocus = true;
+}
 
-	if (!(target instanceof HTMLElement)) {
-		target = content;
-	}
+function onRemove(element: HTMLElement): void {
+	instances.get(element)?.destroy();
 
-	requestAnimationFrame(() => {
-		(target as HTMLElement).focus();
-	});
+	instances.delete(element);
 }
 
-//
+const ATTRIBUTE = 'popover';
+
+const ATTRIBUTE_CONTENT = 'oui-popover-content';
+
+const EVENT_TOGGLE = 'toggle';
 
-const ATTRIBUTE_ID_PREFIX = 'oui_popover_content_';
+const POPOVER_HINT = 'hint';
 
-const POPOVERS: Map<HTMLElement, Floatable> = new Map();
+const STATE_OPEN = 'open';
 
-const SELECTOR = 'oui-popover';
+const instances = new WeakMap<HTMLElement, Popover>();
 
-const SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
+const options: FloatableOptions = {
+	attribute: 'position',
+	position: 'below-start',
+};
 
-const SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
+let ignoreFocus = false;
 
-//
+on(document, 'pointerdown', onPointerdown, {
+	capture: true,
+});
 
-customElements.define(SELECTOR, OuiPopoverElement);
+attributable(ATTRIBUTE, onAdd, onRemove);