@oscarpalmer/oui 0.13.0 → 0.15.0

package/src/js/focus-trap/embedded.ts

@@ -0,0 +1,215 @@
+import {clamp} from '@oscarpalmer/atoms/number';
+import {on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import {getFocusable} from '@oscarpalmer/toretto/focusable';
+
+export class FocusTrap {
+	active = true;
+
+	constructor(public element: HTMLElement) {
+		element.setAttribute('aria-modal', 'true');
+		element.setAttribute('tabindex', '-1');
+	}
+
+	destroy() {
+		this.element = undefined as never;
+	}
+
+	disable() {
+		if (this.active && !this.element.hasAttribute(`${selector}-noescape`)) {
+			setDisabled(this, true);
+		}
+	}
+
+	enable() {
+		if (!this.active) {
+			setDisabled(this, false);
+		}
+	}
+}
+
+//
+
+export function createFocusTrap(element: HTMLElement): FocusTrap {
+	let focusTrap = focusTraps.get(element);
+
+	if (focusTrap == null) {
+		focusTrap = new FocusTrap(element);
+
+		focusTraps.set(element, focusTrap);
+	}
+
+	return focusTrap;
+}
+
+function onEscape(event: KeyboardEvent): void {
+	focusTraps
+		.get(
+			findAncestor(event.target as HTMLElement, `[${selector}]`) as HTMLElement,
+		)
+		?.disable();
+}
+
+function onFocusIn(event: Event): void {
+	lastTarget =
+		findAncestor(event.target as HTMLElement, `[${selector}]`) == null
+			? undefined
+			: (event.target as HTMLElement);
+}
+
+function onKeydown(event: KeyboardEvent): void {
+	switch (event.key) {
+		case 'Escape':
+			onEscape(event);
+			break;
+
+		case 'Tab':
+			onTab(event);
+			break;
+
+		default:
+			return;
+	}
+}
+
+function onPointerdown(event: MouseEvent | TouchEvent): void {
+	const lastFocusTrap = findAncestor(
+		lastTarget as HTMLElement,
+		`[${selector}]`,
+	) as HTMLElement;
+
+	const nextFocusTrap = findAncestor(
+		event.target as HTMLElement,
+		`[${selector}]`,
+	) as HTMLElement;
+
+	if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
+		event.preventDefault();
+
+		lastTarget?.focus();
+	}
+
+	if (disabled.size === 0) {
+		return;
+	}
+
+	for (const focusTrap of disabled) {
+		if (focusTrap.element !== nextFocusTrap) {
+			focusTrap.enable();
+			return;
+		}
+	}
+}
+
+function onTab(event: KeyboardEvent): void {
+	const element = findAncestor(
+		event.target as HTMLElement,
+		`[${selector}]`,
+	) as HTMLElement;
+
+	const focusTrap = focusTraps.get(element);
+
+	if (focusTrap == null) {
+		return;
+	}
+
+	if (focusTrap.active) {
+		event.preventDefault();
+	}
+
+	const elements = getFocusable(element);
+
+	const index = elements.indexOf(event.target as HTMLElement);
+
+	if (index === -1 || elements.length === 0) {
+		tabToTrap(focusTrap, elements, element);
+	} else {
+		tabToElement(event, focusTrap, elements, index);
+	}
+}
+
+function setDisabled(focusTrap: FocusTrap, value: boolean): void {
+	focusTrap.element.setAttribute('aria-modal', String(!value));
+
+	focusTrap.active = !value;
+
+	if (value) {
+		disabled.add(focusTrap);
+	} else {
+		disabled.delete(focusTrap);
+	}
+}
+
+function tabToElement(
+	event: KeyboardEvent,
+	focusTrap: FocusTrap,
+	elements: Element[],
+	index: number,
+): void {
+	const next = clamp(
+		index + (event.shiftKey ? -1 : 1),
+		0,
+		elements.length - 1,
+		true,
+	);
+
+	if (!focusTrap.active) {
+		if (
+			(index === length - 1 && next === 0) ||
+			(index === 0 && next === length - 1)
+		) {
+			lastTarget = undefined;
+
+			focusTrap.enable();
+		}
+
+		return;
+	}
+
+	(elements[next] as HTMLElement).focus();
+
+	lastTarget = elements[next] as HTMLElement;
+}
+
+function tabToTrap(
+	focusTrap: FocusTrap,
+	elements: Element[],
+	element: HTMLElement,
+): void {
+	if (focusTrap.active) {
+		const next = length === 0 ? element : elements[0];
+
+		(next as HTMLElement).focus();
+
+		lastTarget = next as HTMLElement;
+	} else {
+		lastTarget = undefined;
+
+		focusTrap.enable();
+	}
+}
+
+//
+
+const disabled = new Set<FocusTrap>();
+
+const eventOptions = {
+	capture: true,
+	passive: false,
+};
+
+export const focusTraps = new WeakMap<HTMLElement, FocusTrap>();
+
+let lastTarget: HTMLElement | undefined;
+
+export const selector = 'oui-focus-trap';
+
+//
+
+on(document, 'focusin', onFocusIn, eventOptions);
+
+on(document, 'keydown', onKeydown, eventOptions);
+
+on(document, 'mousedown', onPointerdown, eventOptions);
+
+on(document, 'touchstart', onPointerdown, eventOptions);

package/src/js/focus-trap/standalone.ts

@@ -0,0 +1,9 @@
+import {attributable} from '../attributable';
+import {createFocusTrap, focusTraps, selector} from './embedded';
+
+function removeFocusTraps(element: HTMLElement): void {
+	focusTraps.get(element)?.destroy();
+	focusTraps.delete(element);
+}
+
+attributable(selector, createFocusTrap, removeFocusTraps);

package/src/js/index.ts

@@ -1 +1,3 @@
-export * from './focus-trap';
+export * from './focus-trap/standalone';
+export * from './popover';
+export * from './tooltip';

package/src/js/popover.ts

@@ -0,0 +1,221 @@
+import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import {getFocusable} from '@oscarpalmer/toretto/focusable';
+import {activate, deactivate, Floatable} from './floatable';
+import {createFocusTrap, type FocusTrap} from './focus-trap/embedded';
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'oui-popover': OuiPopoverElement;
+	}
+}
+
+const mapped = new Map<HTMLElement, Floatable>();
+
+let index = 0;
+
+export class OuiPopoverElement extends HTMLElement {
+	#floatable: Floatable;
+	#focusTrap: FocusTrap;
+
+	constructor() {
+		super();
+
+		const content = this.querySelector(':scope > [oui-popover-content]');
+		const toggle = this.querySelector(':scope > [oui-popover-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('oui-focus-trap', '');
+		content.setAttribute('oui-focus-trap-noescape', '');
+
+		if (isNullableOrWhitespace(content.id)) {
+			content.setAttribute('id', `oui-popover-content-${++index}`);
+		}
+
+		toggle.setAttribute('aria-controls', content.id);
+		toggle.setAttribute('aria-haspopup', 'dialog');
+
+		this.#floatable = new Floatable(toggle, content);
+		this.#focusTrap = createFocusTrap(content);
+
+		mapped.set(toggle, this.#floatable);
+		mapped.set(content, this.#floatable);
+	}
+
+	close(): void {
+		this.hidePopover();
+	}
+
+	hidePopover(): void {
+		if (this.#floatable.active) {
+			closeAbove(this.#floatable.content);
+			deactivate(this.#floatable, active, order);
+
+			this.#floatable.anchor.focus();
+		}
+	}
+
+	open(): void {
+		this.showPopover();
+	}
+
+	showPopover(): void {
+		if (!this.#floatable.active) {
+			toggle(this.#floatable.anchor);
+		}
+	}
+
+	toggle(): void {
+		this.togglePopover();
+	}
+
+	togglePopover(options?: boolean): boolean {
+		if (typeof options === 'boolean') {
+			if (options === true) {
+				this.showPopover();
+			} else {
+				this.hidePopover();
+			}
+
+			return options;
+		}
+
+		if (this.#floatable.active) {
+			this.hidePopover();
+
+			return false;
+		}
+
+		this.showPopover();
+
+		return true;
+	}
+}
+
+//
+
+function closeAll(): void {
+	for (const floatable of active) {
+		deactivate(floatable, active, order);
+	}
+}
+
+function closeAbove(element: HTMLElement): void {
+	const index = order.findIndex(
+		floatable => floatable.anchor === element || floatable.content === element,
+	);
+
+	if (index === -1 || index === order.length - 1) {
+		return;
+	}
+
+	while (index < order.length - 1) {
+		const floatable = order.pop();
+
+		if (floatable != null) {
+			deactivate(floatable, active, order);
+		}
+	}
+
+	order[index].content.focus();
+}
+
+function focus(content: HTMLElement): void {
+	let target = getFocusable(content)[0];
+
+	if (!(target instanceof HTMLElement)) {
+		target = content;
+	}
+
+	requestAnimationFrame(() => {
+		(target as HTMLElement).focus();
+	});
+}
+
+function onClick(event: MouseEvent): void {
+	const related = findAncestor(
+		event.target as never,
+		'[oui-popover-toggle], [oui-popover-content]',
+	);
+
+	if (!(related instanceof HTMLElement)) {
+		closeAll();
+	} else if (related.hasAttribute('oui-popover-content')) {
+		closeAbove(related);
+	} else {
+		toggle(related);
+	}
+}
+
+function onKeydown(event: KeyboardEvent): void {
+	if (event.key !== 'Escape' || order.length === 0) {
+		return;
+	}
+
+	const related = findAncestor(event.target as never, '[oui-popover-content]');
+
+	if (!(related instanceof HTMLElement)) {
+		return;
+	}
+
+	closeAbove(related);
+
+	const floatable = mapped.get(related);
+
+	if (floatable != null) {
+		deactivate(floatable, active, order);
+
+		floatable.anchor.focus();
+	}
+}
+
+function toggle(anchor: HTMLElement): void {
+	const content = findAncestor(anchor, '[oui-popover-content]');
+
+	if (content instanceof HTMLElement) {
+		closeAbove(content);
+	} else {
+		closeAll();
+	}
+
+	const floatable = mapped.get(anchor);
+
+	if (floatable == null) {
+		return;
+	}
+
+	if (floatable.active) {
+		deactivate(floatable, active, order);
+	} else {
+		activate(floatable, active, order);
+		focus(floatable.content);
+	}
+}
+
+//
+
+customElements.define('oui-popover', OuiPopoverElement);
+
+on(document, 'click', onClick);
+on(document, 'keydown', onKeydown);
+
+//
+
+const active = new Set<Floatable>();
+
+const order: Floatable[] = [];