@oscarpalmer/oui 0.25.0 → 0.26.0

package/src/js/floatable/embedded.ts

@@ -5,18 +5,40 @@ import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 
 // #region Types
 
+type CreateOuiFloatableOptions = {
+	/**
+	 * Open the _OuiFloatable_ when created? _(defaults to `true`)_
+	 */
+	open?: boolean;
+	/**
+	 * Position of the _OuiFloatable_ _(defaults to `below`)_
+	 */
+	position?: OuiFloatablePosition;
+};
+
 export class OuiFloatable {
 	#destroyed = false;
 
 	readonly #state: OuiFloatableState;
 
 	/**
-	 * Is the _Floatable_ open?
+	 * Is the _OuiFloatable_ open?
 	 */
 	get open(): boolean {
 		return this.#state.content.checkVisibility();
 	}
 
+	/**
+	 * Open or close the _OuiFloatable_
+	 */
+	set open(value: boolean) {
+		if (value === true) {
+			this.show();
+		} else if (value === false) {
+			this.hide();
+		}
+	}
+
 	constructor(state: OuiFloatableState, standalone: boolean) {
 		this.#state = state;
 
@@ -105,42 +127,10 @@ type OuiFloatableState = {
 	options: OuiFloatableOptions;
 };
 
-type GetOuiFloatableOptions = {
-	/**
-	 * Open the _OuiFloatable_ when created? _(defaults to `true`)_
-	 */
-	open?: boolean;
-	/**
-	 * Position of the _OuiFloatable_ _(defaults to `below`)_
-	 */
-	position?: OuiFloatablePosition;
-};
-
 // #endregion
 
 // #region Functions
 
-export function createFloatable(
-	anchor: HTMLElement,
-	content: HTMLElement,
-	options: OuiFloatableOptions,
-	standalone: boolean,
-): OuiFloatable {
-	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) {
-		throw new TypeError('Anchor and content must be an HTMLElement or SVGElement.');
-	}
-
-	let floatable = instances.get(content);
-
-	if (floatable == null) {
-		floatable = new OuiFloatable(getState(anchor, content, options), standalone);
-
-		instances.set(content, floatable);
-	}
-
-	return floatable;
-}
-
 function getAnchorName(anchor: HTMLElement): string {
 	let {anchorName} = anchor.style;
 
@@ -153,24 +143,32 @@ function getAnchorName(anchor: HTMLElement): string {
 	return `--oui-floatable-anchor-${index}`;
 }
 
+export function createEmbeddedFloatable(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options: OuiFloatableOptions,
+): OuiFloatable {
+	return createInstance(anchor, content, options, false);
+}
+
 /**
- * Create a _Floatable_ for an anchor and content element
+ * Create a _OuiFloatable_ for an anchor and content element
  *
  * @param anchor Anchor element
  * @param content Content element
- * @param options _Floatable_ options
- * @returns _Floatable_ instance
+ * @param options _OuiFloatable_ options
+ * @returns _OuiFloatable_ instance
  */
-export function getFloatable(
-	anchor: HTMLElement | SVGElement,
-	content: HTMLElement | SVGElement,
-	options?: GetOuiFloatableOptions,
+export function createFloatable(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options?: CreateOuiFloatableOptions,
 ): OuiFloatable {
 	const {open, position} = getOptions(options);
 
-	const floatable = createFloatable(
-		anchor as HTMLElement,
-		content as HTMLElement,
+	const floatable = createInstance(
+		anchor,
+		content,
 		{
 			position,
 		},
@@ -186,6 +184,27 @@ export function getFloatable(
 	return floatable;
 }
 
+function createInstance(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options: OuiFloatableOptions,
+	standalone: boolean,
+): OuiFloatable {
+	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) {
+		throw new TypeError(MESSAGE);
+	}
+
+	let floatable = instances.get(content);
+
+	if (floatable == null) {
+		floatable = new OuiFloatable(getState(anchor, content, options), standalone);
+
+		instances.set(content, floatable);
+	}
+
+	return floatable;
+}
+
 export function getOnBeforeToggleListener(element: HTMLElement): RemovableEventListener {
 	return on(
 		element,
@@ -203,7 +222,7 @@ export function getOnBeforeToggleListener(element: HTMLElement): RemovableEventL
 	);
 }
 
-function getOptions(input?: GetOuiFloatableOptions): Required<GetOuiFloatableOptions> {
+function getOptions(input?: CreateOuiFloatableOptions): Required<CreateOuiFloatableOptions> {
 	const object = isPlainObject(input) ? input : {};
 
 	return {
@@ -287,6 +306,8 @@ const ATTRIBUTE_POSITION = 'oui-position';
 
 const EVENT_BEFORE = 'beforetoggle';
 
+const MESSAGE = 'Anchor and content must be an HTMLElement or SVGElement';
+
 const POSITIONS = Object.fromEntries(
 	Object.entries(AREAS).map(([position, area]) => [area, position]),
 ) as Record<string, OuiFloatablePosition>;

package/src/js/floatable/standalone.ts

@@ -1 +1 @@
-export {getFloatable, type OuiFloatable, type OuiFloatablePosition} from './embedded';
+export {createFloatable, type OuiFloatable, type OuiFloatablePosition} from './embedded';

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

@@ -1,118 +1,239 @@
+import {isPlainObject} from '@oscarpalmer/atoms/is';
 import {clamp} from '@oscarpalmer/atoms/number';
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {getFocusable} from '@oscarpalmer/toretto/focusable';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 
-export class FocusTrap {
-	disabled = false;
+// #region Types
 
-	connected = true;
+export class OuiFocusTrap {
+	#destroyed = false;
+	#tabIndex: number;
 
-	element: HTMLElement;
-
-	embedded: boolean;
+	readonly #state: OuiFocusTrapState;
 
+	/**
+	 * Is focused maintained within the _FocusTrap_ when clicking outside of it?
+	 */
 	get contain(): boolean {
-		return this.element.hasAttribute(FOCUS_TRAP_CONTAIN);
+		return this.#state.element.hasAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN);
 	}
 
-	get noescape(): boolean {
-		return this.element.hasAttribute(FOCUS_TRAP_NOESCAPE);
+	/**
+	 * Should focus be maintained within the _FocusTrap_ when clicking outside of it?
+	 */
+	set contain(value: boolean) {
+		if (value === true) {
+			this.#state.element.setAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN, '');
+		} else if (value === false) {
+			this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN);
+		}
 	}
 
-	constructor(element: HTMLElement, options?: Options) {
-		this.element = element;
-		this.embedded = options != null;
-
-		element.setAttribute('tabindex', '-1');
+	/**
+	 * Is the _FocusTrap_ disabled?
+	 */
+	get disabled(): boolean {
+		return this.#state.disabled;
+	}
 
-		if (options != null) {
-			element.setAttribute(FOCUS_TRAP_SELECTOR, '');
+	/**
+	 * Should the _FocusTrap_ be disabled?
+	 */
+	set disabled(value: boolean) {
+		if (value === true) {
+			this.disable();
+		} else if (value === false) {
+			this.enable();
 		}
+	}
+
+	/**
+	 * Is focus allowed to escape when pressing _Escape_ within the _FocusTrap_?
+	 */
+	get noescape(): boolean {
+		return this.#state.element.hasAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE);
+	}
 
-		if (options?.noescape) {
-			element.setAttribute(FOCUS_TRAP_NOESCAPE, '');
+	/**
+	 * Should the _FocusTrap_ allow focus to escape when pressing _Escape_?
+	 */
+	set noescape(value: boolean) {
+		if (value === true) {
+			this.#state.element.setAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE, '');
+		} else if (value === false) {
+			this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE);
 		}
 	}
 
-	connect(): void {
-		setConnected(this, true);
+	constructor(state: OuiFocusTrapState) {
+		this.#state = state;
+		this.#tabIndex = state.element.tabIndex;
+
+		state.element.tabIndex = -1;
+
+		state.element.setAttribute(ATTRIBUTE_FOCUSTRAP, '');
+
+		this.contain = state.options.contain;
+		this.noescape = state.options.noescape;
+
+		states.set(this, state);
 	}
 
+	/**
+	 * Destroys the _FocusTrap_
+	 */
 	destroy(): void {
-		this.element = undefined as never;
+		if (this.#destroyed) {
+			return;
+		}
+
+		this.#destroyed = true;
+
+		disabled.delete(this);
+		instances.delete(this.#state.element);
+		states.delete(this);
+
+		this.#state.element.tabIndex = this.#tabIndex;
+
+		this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP);
+		this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN);
+		this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE);
+
+		this.#state.element = undefined as never;
 	}
 
+	/**
+	 * Disables the _FocusTrap_
+	 */
 	disable(): void {
-		if (!(this.disabled || this.noescape)) {
-			setDisabled(this, true);
+		if (!this.#destroyed && !(this.disabled || this.#state.options.noescape)) {
+			setDisabled(this, this.#state, true);
 		}
 	}
 
-	disconnect(): void {
-		setConnected(this, false);
-	}
-
+	/**
+	 * Enables the _FocusTrap_
+	 */
 	enable(): void {
-		if (this.disabled) {
-			setDisabled(this, false);
+		if (!this.#destroyed && this.disabled) {
+			setDisabled(this, this.#state, false);
 		}
 	}
 
+	/**
+	 * Focuses the _FocusTrap_
+	 *
+	 * @param last When `true`, focuses the last focusable element within the _FocusTrap_ instead of the first
+	 */
 	focus(last: boolean): void {
-		tabToTrap(this, getFocusable(this.element), this.element, last ? -1 : 0);
+		if (!this.#destroyed && !this.disabled) {
+			tabToTrap(this, getFocusable(this.#state.element), this.#state.element, last ? -1 : 0);
+		}
 	}
 }
 
-type Options = {
-	noescape: boolean;
+type OuiFocusTrapOptions = {
+	/**
+	 * Should focus be maintained within the _FocusTrap_ when clicking outside of it?
+	 */
+	contain?: boolean;
+	/**
+	 * Should the _FocusTrap_ allow focus to escape when pressing _Escape_?
+	 */
+	noescape?: boolean;
+};
+
+type OuiFocusTrapState = {
+	disabled: boolean;
+	element: HTMLElement;
+	options: Required<OuiFocusTrapOptions>;
 };
 
-//
+// #endregion
+
+// #region Functions
+
+/**
+ * Creates _(or retrieves)_ a _FocusTrap_ for an element
+ *
+ * @param element Element to trap focus within
+ * @param options _FocusTrap_ options
+ * @returns _FocusTrap_ instance
+ */
+export function createFocusTrap(element: HTMLElement, options?: OuiFocusTrapOptions): OuiFocusTrap {
+	if (!isHTMLOrSVGElement(element)) {
+		throw new TypeError(MESSAGE);
+	}
 
-export function createFocusTrap(element: HTMLElement, options?: Options): FocusTrap {
-	let focusTrap = FOCUSTRAPS_ALL.get(element);
+	let instance = instances.get(element);
 
-	if (focusTrap == null) {
-		focusTrap = new FocusTrap(element, options);
+	if (instance == null) {
+		instance = new OuiFocusTrap(getState(element, options));
 
-		FOCUSTRAPS_ALL.set(element, focusTrap);
+		instances.set(element, instance);
 	}
 
-	return focusTrap;
+	return instance;
+}
+
+function getOptions(
+	element: HTMLElement,
+	input?: OuiFocusTrapOptions,
+): Required<OuiFocusTrapOptions> {
+	const options = isPlainObject(input) ? input : {};
+
+	return {
+		contain:
+			typeof options.contain === 'boolean'
+				? options.contain
+				: element.hasAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN),
+		noescape:
+			typeof options.noescape === 'boolean'
+				? options.noescape
+				: element.hasAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE),
+	};
+}
+
+function getState(element: HTMLElement, options?: OuiFocusTrapOptions): OuiFocusTrapState {
+	return {
+		element,
+		disabled: false,
+		options: getOptions(element, options),
+	};
 }
 
 function onEscape(event: KeyboardEvent): void {
-	let element = findAncestor(event, ATTRIBUTE_SELECTOR) as HTMLElement;
+	let element = findAncestor(event, SELECTOR) as HTMLElement;
 
-	let focusTrap = FOCUSTRAPS_ALL.get(element);
+	let instance = instances.get(element);
+	let state = states.get(instance!);
 
-	if (element == null || focusTrap == null) {
+	if (element == null || instance == null || state == null) {
 		return;
 	}
 
-	while (focusTrap.disabled) {
-		element = findAncestor(
-			focusTrap.element.parentElement as HTMLElement,
-			ATTRIBUTE_SELECTOR,
-		) as HTMLElement;
+	while (state.disabled) {
+		element = findAncestor(state.element.parentElement as HTMLElement, SELECTOR) as HTMLElement;
 
-		focusTrap = FOCUSTRAPS_ALL.get(element);
+		instance = instances.get(element);
+		state = states.get(instance!);
 
-		if (element == null || focusTrap == null) {
+		if (element == null || instance == null || state == null) {
 			return;
 		}
 
-		if (!focusTrap.disabled) {
+		if (!state.disabled) {
 			break;
 		}
 	}
 
-	focusTrap?.disable();
+	instance?.disable();
 }
 
 function onFocusIn(event: Event): void {
-	const focusTrap = FOCUSTRAPS_ALL.get(findAncestor(event, ATTRIBUTE_SELECTOR) as HTMLElement);
+	const focusTrap = instances.get(findAncestor(event, SELECTOR) as HTMLElement);
 
 	lastTarget = focusTrap == null ? undefined : (event.target as HTMLElement);
 }
@@ -133,38 +254,40 @@ function onKeydown(event: KeyboardEvent): void {
 }
 
 function onPointerdown(event: MouseEvent | TouchEvent): void {
-	const lastFocusTrap = findAncestor(lastTarget as HTMLElement, ATTRIBUTE_SELECTOR) as HTMLElement;
-	const nextFocusTrap = findAncestor(event, ATTRIBUTE_SELECTOR) as HTMLElement;
+	const last = findAncestor(lastTarget as HTMLElement, SELECTOR) as HTMLElement;
+	const next = findAncestor(event, SELECTOR) as HTMLElement;
 
-	if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
-		if (FOCUSTRAPS_ALL.get(lastFocusTrap)?.contain ?? false) {
+	if (last != null && next !== last) {
+		if (states.get(instances.get(last)!)?.options.contain ?? false) {
 			event.preventDefault();
 
 			lastTarget?.focus();
 		}
 	}
 
-	if (FOCUSTRAPS_DISABLED.size === 0) {
+	if (disabled.size === 0) {
 		return;
 	}
 
-	for (const focusTrap of FOCUSTRAPS_DISABLED) {
-		if (focusTrap.element !== nextFocusTrap) {
+	for (const focusTrap of disabled) {
+		const state = states.get(focusTrap);
+
+		if (state != null && state.element !== next) {
 			focusTrap.enable();
 		}
 	}
 }
 
 function onTab(event: KeyboardEvent): void {
-	const element = findAncestor(event, ATTRIBUTE_SELECTOR) as HTMLElement;
+	const element = findAncestor(event, SELECTOR) as HTMLElement;
 
-	const focusTrap = FOCUSTRAPS_ALL.get(element);
+	const instance = instances.get(element);
 
-	if (focusTrap == null) {
+	if (instance == null) {
 		return;
 	}
 
-	if (!focusTrap.disabled) {
+	if (!instance.disabled) {
 		event.preventDefault();
 	}
 
@@ -173,37 +296,30 @@ function onTab(event: KeyboardEvent): void {
 	const index = elements.indexOf(event.target as HTMLElement);
 
 	if (index === -1 || elements.length === 0) {
-		tabToTrap(focusTrap, elements, element);
+		tabToTrap(instance, elements, element);
 	} else {
-		tabToElement(focusTrap, elements, index, event.shiftKey ? -1 : 1);
+		tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
 	}
 }
 
 export function removeFocusTrap(element: HTMLElement): void {
-	FOCUSTRAPS_ALL.get(element)?.destroy();
-	FOCUSTRAPS_ALL.delete(element);
-}
-
-function setConnected(focusTrap: FocusTrap, value: boolean): void {
-	if (!focusTrap.embedded || focusTrap.connected === value) {
-		return;
-	}
+	instances.get(element)?.destroy();
 
-	focusTrap.connected = value;
+	instances.delete(element);
 }
 
-function setDisabled(focusTrap: FocusTrap, value: boolean): void {
-	focusTrap.disabled = value;
+function setDisabled(focusTrap: OuiFocusTrap, state: OuiFocusTrapState, value: boolean): void {
+	state.disabled = value;
 
 	if (value) {
-		FOCUSTRAPS_DISABLED.add(focusTrap);
+		disabled.add(focusTrap);
 	} else {
-		FOCUSTRAPS_DISABLED.delete(focusTrap);
+		disabled.delete(focusTrap);
 	}
 }
 
 function tabToElement(
-	focusTrap: FocusTrap,
+	instance: OuiFocusTrap,
 	elements: Element[],
 	index: number,
 	modifier: number,
@@ -211,18 +327,18 @@ function tabToElement(
 	const {length} = elements;
 	const next = clamp(index + modifier, 0, length - 1, true);
 
-	if (focusTrap.disabled) {
+	if (instance.disabled) {
 		if ((index === length - 1 && next === 0) || (index === 0 && next === length - 1)) {
 			lastTarget = undefined;
 
-			focusTrap.enable();
+			instance.enable();
 		}
 
 		return;
 	}
 
 	const element = elements[next] as HTMLElement;
-	const elementFocusTrap = FOCUSTRAPS_ALL.get(element);
+	const elementFocusTrap = instances.get(element);
 
 	if (elementFocusTrap != null) {
 		elementFocusTrap.focus(modifier === -1);
@@ -234,15 +350,15 @@ function tabToElement(
 }
 
 function tabToTrap(
-	focusTrap: FocusTrap,
+	instance: OuiFocusTrap,
 	elements: Element[],
 	element: HTMLElement,
 	index?: number,
 ): void {
-	if (focusTrap.disabled) {
+	if (instance.disabled) {
 		lastTarget = undefined;
 
-		focusTrap.enable();
+		instance.enable();
 	} else {
 		const next = elements.length === 0 ? element : elements.at(index ?? 0);
 
@@ -252,30 +368,40 @@ function tabToTrap(
 	}
 }
 
-//
+// #endregion
 
-export const FOCUS_TRAP_SELECTOR = 'oui-focus-trap';
+// #region Variables
 
-const ATTRIBUTE_SELECTOR = `[${FOCUS_TRAP_SELECTOR}]`;
+export const ATTRIBUTE_FOCUSTRAP = 'oui-focus-trap';
+
+export const ATTRIBUTE_FOCUSTRAP_CONTAIN = `${ATTRIBUTE_FOCUSTRAP}-contain`;
+
+export const ATTRIBUTE_FOCUSTRAP_NOESCAPE = `${ATTRIBUTE_FOCUSTRAP}-noescape`;
 
 const EVENT_OPTIONS: AddEventListenerOptions = {
 	capture: true,
 	passive: false,
 };
 
-export const FOCUS_TRAP_CONTAIN = `${FOCUS_TRAP_SELECTOR}-contain`;
+const MESSAGE = 'Element must be an HTMLElement or SVGElement';
+
+const SELECTOR = `[${ATTRIBUTE_FOCUSTRAP}]`;
 
-export const FOCUS_TRAP_NOESCAPE = `${FOCUS_TRAP_SELECTOR}-noescape`;
+const disabled = new Set<OuiFocusTrap>();
 
-const FOCUSTRAPS_ALL: WeakMap<HTMLElement, FocusTrap> = new WeakMap();
+const instances = new WeakMap<HTMLElement, OuiFocusTrap>();
 
-const FOCUSTRAPS_DISABLED: Set<FocusTrap> = new Set();
+const states = new WeakMap<OuiFocusTrap, OuiFocusTrapState>();
 
 let lastTarget: HTMLElement | undefined;
 
-//
+// #endregion
+
+// #region Initialization
 
 on(document, 'focusin', onFocusIn, EVENT_OPTIONS);
 on(document, 'keydown', onKeydown, EVENT_OPTIONS);
 on(document, 'mousedown', onPointerdown, EVENT_OPTIONS);
 on(document, 'touchstart', onPointerdown, EVENT_OPTIONS);
+
+// #endregion

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

@@ -1,4 +1,6 @@
 import {attributable} from '../internal/attributable';
-import {createFocusTrap, FOCUS_TRAP_SELECTOR, removeFocusTrap} from './embedded';
+import {ATTRIBUTE_FOCUSTRAP, createFocusTrap, removeFocusTrap, type OuiFocusTrap} from './embedded';
 
-attributable(FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTrap);
+attributable(ATTRIBUTE_FOCUSTRAP, createFocusTrap, removeFocusTrap);
+
+export {createFocusTrap, type OuiFocusTrap};

package/src/js/index.ts

@@ -1,5 +1,6 @@
 import './movable';
 import './sortable';
+import './toolbar';
 
 export * from './dialog';
 export * from './floatable/standalone';