@oscarpalmer/oui 0.17.0 → 0.18.0

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

@@ -4,57 +4,128 @@ import {findAncestor} from '@oscarpalmer/toretto/find';
 import {getFocusable} from '@oscarpalmer/toretto/focusable';
 
 export class FocusTrap {
-	active = true;
+	disabled = false;
+
+	connected = true;
+
+	element: HTMLElement;
+
+	embedded: boolean;
+
+	get contain(): boolean {
+		return this.element.hasAttribute(FOCUS_TRAP_CONTAIN);
+	}
+
+	get noescape(): boolean {
+		return this.element.hasAttribute(FOCUS_TRAP_NOESCAPE);
+	}
+
+	constructor(element: HTMLElement, options?: Options) {
+		this.element = element;
+		this.embedded = options != null;
 
-	constructor(public element: HTMLElement) {
-		element.setAttribute('aria-modal', 'true');
 		element.setAttribute('tabindex', '-1');
+
+		if (options != null) {
+			element.setAttribute(FOCUS_TRAP_SELECTOR, '');
+		}
+
+		if (options?.noescape) {
+			element.setAttribute(FOCUS_TRAP_NOESCAPE, '');
+		}
+	}
+
+	connect(): void {
+		setConnected(this, true);
 	}
 
-	destroy() {
+	destroy(): void {
 		this.element = undefined as never;
 	}
 
-	disable() {
-		if (this.active && !this.element.hasAttribute(`${selector}-noescape`)) {
+	disable(): void {
+		if (!(this.disabled || this.noescape)) {
 			setDisabled(this, true);
 		}
 	}
 
-	enable() {
-		if (!this.active) {
+	disconnect(): void {
+		setConnected(this, false);
+	}
+
+	enable(): void {
+		if (this.disabled) {
 			setDisabled(this, false);
 		}
 	}
+
+	focus(last: boolean): void {
+		tabToTrap(this, getFocusable(this.element), this.element, last ? -1 : 0);
+	}
 }
 
+type Options = {
+	noescape: boolean;
+};
+
 //
 
-export function createFocusTrap(element: HTMLElement): FocusTrap {
-	let focusTrap = focusTraps.get(element);
+export function createFocusTrap(
+	element: HTMLElement,
+	options?: Options,
+): FocusTrap {
+	let focusTrap = FOCUSTRAPS_ALL.get(element);
 
 	if (focusTrap == null) {
-		focusTrap = new FocusTrap(element);
+		focusTrap = new FocusTrap(element, options);
 
-		focusTraps.set(element, focusTrap);
+		FOCUSTRAPS_ALL.set(element, focusTrap);
 	}
 
 	return focusTrap;
 }
 
 function onEscape(event: KeyboardEvent): void {
-	focusTraps
-		.get(
-			findAncestor(event.target as HTMLElement, `[${selector}]`) as HTMLElement,
-		)
-		?.disable();
+	let element = findAncestor(
+		event.target as HTMLElement,
+		ATTRIBUTE_SELECTOR,
+	) as HTMLElement;
+
+	let focusTrap = FOCUSTRAPS_ALL.get(element);
+
+	if (element == null || focusTrap == null) {
+		return;
+	}
+
+	while (focusTrap.disabled) {
+		element = findAncestor(
+			focusTrap.element.parentElement as HTMLElement,
+			ATTRIBUTE_SELECTOR,
+		) as HTMLElement;
+
+		focusTrap = FOCUSTRAPS_ALL.get(element);
+
+		if (element == null || focusTrap == null) {
+			return;
+		}
+
+		if (!focusTrap.disabled) {
+			break;
+		}
+	}
+
+	focusTrap?.disable();
 }
 
 function onFocusIn(event: Event): void {
-	lastTarget =
-		findAncestor(event.target as HTMLElement, `[${selector}]`) == null
-			? undefined
-			: (event.target as HTMLElement);
+	const focusTrap = FOCUSTRAPS_ALL.get(
+		findAncestor(
+			event.target as HTMLElement,
+			ATTRIBUTE_SELECTOR,
+		) as HTMLElement,
+	);
+
+	lastTarget = focusTrap == null ? undefined : (event.target as HTMLElement);
 }
 
 function onKeydown(event: KeyboardEvent): void {
@@ -75,28 +146,29 @@ function onKeydown(event: KeyboardEvent): void {
 function onPointerdown(event: MouseEvent | TouchEvent): void {
 	const lastFocusTrap = findAncestor(
 		lastTarget as HTMLElement,
-		`[${selector}]`,
+		ATTRIBUTE_SELECTOR,
 	) as HTMLElement;
 
 	const nextFocusTrap = findAncestor(
 		event.target as HTMLElement,
-		`[${selector}]`,
+		ATTRIBUTE_SELECTOR,
 	) as HTMLElement;
 
 	if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
-		event.preventDefault();
+		if (FOCUSTRAPS_ALL.get(lastFocusTrap)?.contain ?? false) {
+			event.preventDefault();
 
-		lastTarget?.focus();
+			lastTarget?.focus();
+		}
 	}
 
-	if (disabled.size === 0) {
+	if (FOCUSTRAPS_DISABLED.size === 0) {
 		return;
 	}
 
-	for (const focusTrap of disabled) {
+	for (const focusTrap of FOCUSTRAPS_DISABLED) {
 		if (focusTrap.element !== nextFocusTrap) {
 			focusTrap.enable();
-			return;
 		}
 	}
 }
@@ -104,16 +176,16 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 function onTab(event: KeyboardEvent): void {
 	const element = findAncestor(
 		event.target as HTMLElement,
-		`[${selector}]`,
+		ATTRIBUTE_SELECTOR,
 	) as HTMLElement;
 
-	const focusTrap = focusTraps.get(element);
+	const focusTrap = FOCUSTRAPS_ALL.get(element);
 
 	if (focusTrap == null) {
 		return;
 	}
 
-	if (focusTrap.active) {
+	if (!focusTrap.disabled) {
 		event.preventDefault();
 	}
 
@@ -124,36 +196,38 @@ function onTab(event: KeyboardEvent): void {
 	if (index === -1 || elements.length === 0) {
 		tabToTrap(focusTrap, elements, element);
 	} else {
-		tabToElement(event, focusTrap, elements, index);
+		tabToElement(focusTrap, elements, index, event.shiftKey ? -1 : 1);
 	}
 }
 
-function setDisabled(focusTrap: FocusTrap, value: boolean): void {
-	focusTrap.element.setAttribute('aria-modal', String(!value));
+function setConnected(focusTrap: FocusTrap, value: boolean): void {
+	if (!focusTrap.embedded || focusTrap.connected === value) {
+		return;
+	}
+
+	focusTrap.connected = value;
+}
 
-	focusTrap.active = !value;
+function setDisabled(focusTrap: FocusTrap, value: boolean): void {
+	focusTrap.disabled = value;
 
 	if (value) {
-		disabled.add(focusTrap);
+		FOCUSTRAPS_DISABLED.add(focusTrap);
 	} else {
-		disabled.delete(focusTrap);
+		FOCUSTRAPS_DISABLED.delete(focusTrap);
 	}
 }
 
 function tabToElement(
-	event: KeyboardEvent,
 	focusTrap: FocusTrap,
 	elements: Element[],
 	index: number,
+	modifier: number,
 ): void {
-	const next = clamp(
-		index + (event.shiftKey ? -1 : 1),
-		0,
-		elements.length - 1,
-		true,
-	);
+	const {length} = elements;
+	const next = clamp(index + modifier, 0, length - 1, true);
 
-	if (!focusTrap.active) {
+	if (focusTrap.disabled) {
 		if (
 			(index === length - 1 && next === 0) ||
 			(index === 0 && next === length - 1)
@@ -166,50 +240,61 @@ function tabToElement(
 		return;
 	}
 
-	(elements[next] as HTMLElement).focus();
+	const element = elements[next] as HTMLElement;
+	const elementFocusTrap = FOCUSTRAPS_ALL.get(element);
 
-	lastTarget = elements[next] as HTMLElement;
+	if (elementFocusTrap != null) {
+		elementFocusTrap.focus(modifier === -1);
+	} else {
+		(elements[next] as HTMLElement).focus();
+
+		lastTarget = elements[next] as HTMLElement;
+	}
 }
 
 function tabToTrap(
 	focusTrap: FocusTrap,
 	elements: Element[],
 	element: HTMLElement,
+	index?: number,
 ): void {
-	if (focusTrap.active) {
-		const next = length === 0 ? element : elements[0];
+	if (focusTrap.disabled) {
+		lastTarget = undefined;
+
+		focusTrap.enable();
+	} else {
+		const next = elements.length === 0 ? element : elements.at(index ?? 0);
 
 		(next as HTMLElement).focus();
 
 		lastTarget = next as HTMLElement;
-	} else {
-		lastTarget = undefined;
-
-		focusTrap.enable();
 	}
 }
 
 //
 
-const disabled = new Set<FocusTrap>();
+export const FOCUS_TRAP_SELECTOR = 'oui-focus-trap';
 
-const eventOptions = {
+const ATTRIBUTE_SELECTOR = `[${FOCUS_TRAP_SELECTOR}]`;
+
+const EVENT_OPTIONS: AddEventListenerOptions = {
 	capture: true,
 	passive: false,
 };
 
-export const focusTraps = new WeakMap<HTMLElement, FocusTrap>();
-
-let lastTarget: HTMLElement | undefined;
+export const FOCUS_TRAP_CONTAIN = `${FOCUS_TRAP_SELECTOR}-contain`;
 
-export const selector = 'oui-focus-trap';
+export const FOCUS_TRAP_NOESCAPE = `${FOCUS_TRAP_SELECTOR}-noescape`;
 
-//
+export const FOCUSTRAPS_ALL: WeakMap<HTMLElement, FocusTrap> = new WeakMap();
 
-on(document, 'focusin', onFocusIn, eventOptions);
+const FOCUSTRAPS_DISABLED: Set<FocusTrap> = new Set();
 
-on(document, 'keydown', onKeydown, eventOptions);
+let lastTarget: HTMLElement | undefined;
 
-on(document, 'mousedown', onPointerdown, eventOptions);
+//
 
-on(document, 'touchstart', onPointerdown, eventOptions);
+on(document, 'focusin', onFocusIn, EVENT_OPTIONS);
+on(document, 'keydown', onKeydown, EVENT_OPTIONS);
+on(document, 'mousedown', onPointerdown, EVENT_OPTIONS);
+on(document, 'touchstart', onPointerdown, EVENT_OPTIONS);

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

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

package/src/js/index.ts

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

package/src/js/popover.ts

@@ -1,29 +1,26 @@
 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 {Floatable} from './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;
 	}
 }
 
-const mapped = new Map<HTMLElement, Floatable>();
-
 let index = 0;
 
 export class OuiPopoverElement extends HTMLElement {
-	#floatable: Floatable;
-	#focusTrap: FocusTrap;
+	readonly #floatable: Floatable;
+	readonly #focusTrap: FocusTrap;
 
 	constructor() {
 		super();
 
-		const content = this.querySelector(':scope > [oui-popover-content]');
-		const toggle = this.querySelector(':scope > [oui-popover-toggle]');
+		const content = this.querySelector(SELECTOR_CONTENT);
+		const toggle = this.querySelector(SELECTOR_TOGGLE);
 
 		if (!(content instanceof HTMLElement)) {
 			throw new Error(
@@ -40,40 +37,56 @@ export class OuiPopoverElement extends HTMLElement {
 		content.hidden = true;
 
 		content.setAttribute('role', 'dialog');
-		content.setAttribute('oui-focus-trap', '');
-		content.setAttribute('oui-focus-trap-noescape', '');
+		content.setAttribute('aria-modal', 'true');
 
 		if (isNullableOrWhitespace(content.id)) {
-			content.setAttribute('id', `oui-popover-content-${++index}`);
+			content.setAttribute('id', `${ATTRIBUTE_ID_PREFIX}_${++index}`);
 		}
 
 		toggle.setAttribute('aria-controls', content.id);
 		toggle.setAttribute('aria-haspopup', 'dialog');
 
-		this.#floatable = new Floatable(
-			toggle,
+		this.#floatable = new Floatable({
 			content,
-			'position',
-			'below-start',
-			false,
-		);
-
-		this.#focusTrap = createFocusTrap(content);
-
-		mapped.set(toggle, this.#floatable);
-		mapped.set(content, this.#floatable);
+			anchor: toggle,
+			defaultPosition: 'below-start',
+			interactive: true,
+			positionAttribute: 'position',
+			preferAbove: false,
+			onAfter: (active: boolean): void => {
+				if (active) {
+					focus(content);
+				} else if (!this.#floatable.ignoreFocus) {
+					toggle.focus();
+				}
+			},
+		});
+
+		this.#focusTrap = createFocusTrap(content, {
+			noescape: true,
+		});
+
+		POPOVERS.set(toggle, this.#floatable);
+		POPOVERS.set(content, this.#floatable);
 	}
 
 	close(): void {
 		this.hidePopover();
 	}
 
-	hidePopover(): void {
-		if (this.#floatable.active) {
-			closeAbove(this.#floatable.content);
-			deactivate(this.#floatable, active, order);
+	connectedCallback(): void {
+		this.#floatable.enable();
+		this.#focusTrap.connect();
+	}
 
-			this.#floatable.anchor.focus();
+	disconnectedCallback(): void {
+		this.#floatable.disable();
+		this.#focusTrap.disconnect();
+	}
+
+	hidePopover(): void {
+		if (this.#floatable.active && this.isConnected) {
+			this.#floatable.toggle(false);
 		}
 	}
 
@@ -82,8 +95,8 @@ export class OuiPopoverElement extends HTMLElement {
 	}
 
 	showPopover(): void {
-		if (!this.#floatable.active) {
-			toggle(this.#floatable.anchor);
+		if (!this.#floatable.active && this.isConnected) {
+			this.#floatable.toggle(true);
 		}
 	}
 
@@ -116,32 +129,6 @@ export class OuiPopoverElement extends HTMLElement {
 
 //
 
-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);
-		}
-	}
-
-	focus(order[index].content);
-}
-
 function focus(content: HTMLElement): void {
 	let target = getFocusable(content)[0];
 
@@ -154,75 +141,18 @@ function focus(content: HTMLElement): void {
 	});
 }
 
-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 ATTRIBUTE_ID_PREFIX = 'oui_popover_content_';
 
-	const floatable = mapped.get(anchor);
+const POPOVERS: Map<HTMLElement, Floatable> = new Map();
 
-	if (floatable == null) {
-		return;
-	}
+const SELECTOR = 'oui-popover';
 
-	if (floatable.active) {
-		deactivate(floatable, active, order);
-	} else {
-		activate(floatable, active, order);
-		focus(floatable.content);
-	}
-}
-
-//
+const SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
 
-customElements.define('oui-popover', OuiPopoverElement);
-
-on(document, 'click', onClick);
-on(document, 'keydown', onKeydown);
+const SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
 
 //
 
-const active = new Set<Floatable>();
-
-const order: Floatable[] = [];
+customElements.define(SELECTOR, OuiPopoverElement);