@oscarpalmer/oui 0.28.0 → 0.29.1

package/src/js/internal/navigable.ts

@@ -0,0 +1,247 @@
+import {clamp} from '@oscarpalmer/atoms/number';
+import {getAria, setRole} from '@oscarpalmer/toretto/aria';
+import {on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import type {AriaRole, RemovableEventListener} from '@oscarpalmer/toretto/models';
+
+// #region Types
+
+export class OuiNavigable {
+	active: OuiNavigableActive = {
+		index: 0,
+	};
+
+	element: HTMLElement;
+
+	listeners: RemovableEventListener[];
+
+	options: OuiNavigableOptions;
+
+	orientation: OuiNavigableOrientation;
+
+	constructor(element: HTMLElement, options: OuiNavigableOptions) {
+		this.element = element;
+		this.options = options;
+
+		this.listeners = [
+			on(element, 'focusin', event => {
+				onFocusin(this, event);
+			}),
+			on(element, 'keydown', event => {
+				onKeydown(this, event);
+			}),
+		];
+
+		this.orientation = getOrientation(element, options);
+
+		if (options.role != null) {
+			setRole(element, options.role);
+		}
+	}
+
+	destroy(): void {
+		const listeners = this.listeners.splice(0);
+
+		for (const listener of listeners) {
+			listener();
+		}
+
+		this.active.element = undefined;
+		this.element = undefined as never;
+	}
+}
+
+type OuiNavigableActive = {
+	element?: HTMLElement;
+	index: number;
+};
+
+export type OuiNavigableOptions = {
+	role?: AriaRole;
+	selector: string;
+	vertical: boolean;
+	onDeactivate?: (event: KeyboardEvent, navigable: OuiNavigable) => void;
+	onPreventNavigation?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean;
+	onShouldActivate?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean;
+	onShouldDeactivate?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean | undefined;
+};
+
+type OuiNavigableOrientation = 'horizontal' | 'vertical';
+
+// #endregion
+
+// #region Functions
+
+function getItems(container: HTMLElement, selector: string): HTMLElement[] {
+	return [...container.querySelectorAll(selector)].filter(isValidItem);
+}
+
+export function getNavigable(element: HTMLElement, options: OuiNavigableOptions): OuiNavigable {
+	return new OuiNavigable(element, options);
+}
+
+function getOrientation(
+	element: HTMLElement,
+	options: OuiNavigableOptions,
+): OuiNavigableOrientation {
+	const attribute = getAria(element, 'orientation');
+
+	return ORIENTATIONS.has(attribute as OuiNavigableOrientation)
+		? (attribute as OuiNavigableOrientation)
+		: options.vertical
+			? ORIENTATION_VERTICAL
+			: ORIENTATION_HORIZONTAL;
+}
+
+function isValidItem(element: Element): element is HTMLElement {
+	return 'disabled' in element ? element.disabled !== true : true;
+}
+
+function onFocusin(navigable: OuiNavigable, event: FocusEvent): void {
+	const item = findAncestor(event, navigable.options.selector);
+
+	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) {
+		return;
+	}
+
+	const items = getItems(navigable.element, navigable.options.selector);
+	const index = items.indexOf(item);
+
+	if (index === -1) {
+		return;
+	}
+
+	navigable.active.element = item;
+	navigable.active.index = index;
+
+	updateNavigableFocus(navigable, false, items);
+}
+
+function onKeydown(navigable: OuiNavigable, event: KeyboardEvent): void {
+	const escaped = event.key === 'Escape';
+	const stopPropagation = navigable.options.onShouldDeactivate?.(event, navigable);
+
+	if (escaped || stopPropagation != null) {
+		if (escaped || stopPropagation) {
+			event.stopPropagation();
+		}
+
+		navigable.options.onDeactivate?.(event, navigable);
+
+		return;
+	}
+
+	if (!KEYS_ALL.has(event.key)) {
+		return;
+	}
+
+	const mustActivate = KEYS_ACTIVATE.has(event.key);
+	const shouldActivate = navigable.options.onShouldActivate?.(event, navigable) === true;
+
+	if (
+		mustActivate ||
+		shouldActivate ||
+		navigable.options.onPreventNavigation?.(event, navigable) === true
+	) {
+		event.stopPropagation();
+	}
+
+	if (mustActivate || shouldActivate) {
+		return;
+	}
+
+	const items = getItems(navigable.element, navigable.options.selector);
+	const {length} = items;
+
+	if (length === 0) {
+		return;
+	}
+
+	let index: number | undefined;
+
+	if (KEYS_ABSOLUTE.has(event.key)) {
+		index = event.key === 'Home' ? 0 : items.length - 1;
+	} else {
+		const direction = NAVIGABLE_KEYS_HORIZONTAL.has(event.key)
+			? ORIENTATION_HORIZONTAL
+			: ORIENTATION_VERTICAL;
+
+		if (navigable.orientation === direction) {
+			if (navigable.active.element instanceof HTMLSelectElement) {
+				event.preventDefault();
+			}
+
+			index = clamp(
+				navigable.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1),
+				0,
+				length - 1,
+				true,
+			);
+		}
+	}
+
+	if (index == null || index === navigable.active.index) {
+		return;
+	}
+
+	navigable.active.element = items[index];
+	navigable.active.index = index;
+
+	updateNavigableFocus(navigable, true, items);
+}
+
+export function updateNavigableFocus(
+	navigable: OuiNavigable,
+	focus: boolean,
+	items?: HTMLElement[],
+): void {
+	const updated = items ?? getItems(navigable.element, navigable.options.selector);
+	const {length} = updated;
+
+	if (length === 0) {
+		return;
+	}
+
+	for (let index = 0; index < length; index += 1) {
+		updated[index].tabIndex = index === navigable.active.index ? 0 : -1;
+	}
+
+	navigable.active.element ??= updated[navigable.active.index];
+
+	if (focus) {
+		navigable.active.element?.focus();
+	}
+}
+
+// #endregion
+
+// #region Variables
+
+const KEYS_ABSOLUTE = new Set(['End', 'Home']);
+
+const KEYS_ACTIVATE = new Set(['Enter', ' ']);
+
+export const NAVIGABLE_KEYS_HORIZONTAL = new Set(['ArrowRight', 'ArrowLeft']);
+
+export const NAVIGABLE_KEYS_VERTICAL = new Set(['ArrowDown', 'ArrowUp']);
+
+const KEYS_ALL = new Set([
+	...KEYS_ABSOLUTE,
+	...KEYS_ACTIVATE,
+	...NAVIGABLE_KEYS_HORIZONTAL,
+	...NAVIGABLE_KEYS_VERTICAL,
+]);
+
+const KEYS_NEXT = new Set(['ArrowDown', 'ArrowRight']);
+
+const ORIENTATION_HORIZONTAL: OuiNavigableOrientation = 'horizontal';
+
+const ORIENTATION_VERTICAL: OuiNavigableOrientation = 'vertical';
+
+const ORIENTATIONS = new Set<OuiNavigableOrientation>([
+	ORIENTATION_HORIZONTAL,
+	ORIENTATION_VERTICAL,
+]);
+
+// #endregion

package/src/js/menu.ts

@@ -0,0 +1,345 @@
+import {setAria, setRole} from '@oscarpalmer/toretto/aria';
+import {setAttribute} from '@oscarpalmer/toretto/attribute';
+import {on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import {createEmbeddedFloatable, getOnBeforeToggleListener} from './floatable/floatable.embedded';
+import type {OuiFloatable} from './floatable/floatable.standalone';
+import {attributable} from './internal/attributable';
+import {
+	NAVIGABLE_KEYS_HORIZONTAL,
+	NAVIGABLE_KEYS_VERTICAL,
+	type OuiNavigable,
+	type OuiNavigableOptions,
+	getNavigable,
+	updateNavigableFocus,
+} from './internal/navigable';
+
+// #region Types
+
+type OuiBasicMenu = {
+	destroy(): void;
+};
+
+type OuiBasicMenuOptions = Pick<OuiNavigableOptions, 'role' | 'selector' | 'vertical'>;
+
+class OuiMenu {
+	content: HTMLElement;
+
+	element: HTMLElement;
+
+	floatable: OuiFloatable;
+
+	navigable: OuiNavigable;
+
+	toggle: HTMLElement;
+
+	get open(): boolean {
+		return this.floatable.open;
+	}
+
+	constructor(element: HTMLElement, navigable: OuiNavigable) {
+		this.element = element;
+		this.navigable = navigable;
+
+		this.content = navigable.element;
+
+		this.toggle = element.querySelector(SELECTOR_MENU_TOGGLE)!;
+
+		this.floatable = createEmbeddedFloatable(this.toggle, this.content, {
+			attribute: ATTRIBUTE_MENU_POSITION,
+			position:
+				findAncestor(element.parentElement!, SELECTOR_MENU_CONTENT) == null
+					? 'below-start'
+					: 'end-top',
+			reusable: false,
+		});
+
+		this.navigable.listeners.push(
+			getOnBeforeToggleListener(this.content),
+			on(this.content, 'click', event => {
+				event.stopPropagation();
+
+				const toggle = findAncestor(event, SELECTOR_MENU_TOGGLE);
+
+				if (toggle != null) {
+					return;
+				}
+
+				const elements = document.querySelectorAll(SELECTOR_MENU_CONTENT);
+
+				for (const element of elements) {
+					menus.get(element as HTMLElement)?.floatable.hide();
+				}
+
+				const menu = menus.get(elements[0] as HTMLElement);
+
+				if (menu != null && event.pointerId === -1) {
+					updateNavigableFocus(menu.navigable, true);
+				}
+			}),
+			on(this.content, 'toggle', event => {
+				const expanded = event.newState === 'open';
+
+				if (expanded) {
+					this.floatable?.update();
+
+					updateNavigableFocus(this.navigable, true);
+				} else {
+				}
+
+				setAria(this.toggle, 'expanded', expanded);
+			}),
+		);
+
+		this.floatable.update();
+
+		initializeMenu(this);
+
+		updateNavigableFocus(this.navigable, false);
+	}
+
+	destroy(): void {
+		this.floatable.destroy();
+		this.navigable.destroy();
+
+		this.floatable = undefined as never;
+		this.navigable = undefined as never;
+	}
+}
+
+class OuiMenubar {
+	element: HTMLElement;
+
+	navigable: OuiNavigable;
+
+	constructor(element: HTMLElement, navigable: OuiNavigable) {
+		this.element = element;
+		this.navigable = navigable;
+
+		updateNavigableFocus(this.navigable, false);
+	}
+
+	destroy(): void {
+		this.navigable.destroy();
+
+		this.navigable = undefined as never;
+	}
+}
+
+// #endregion
+
+// #region Functions
+
+function addInstance<Instance>(
+	instances: WeakMap<HTMLElement, Instance>,
+	ctor: new (element: HTMLElement, navigable: OuiNavigable) => Instance,
+	element: HTMLElement,
+	content: HTMLElement,
+	options: OuiBasicMenuOptions,
+): void {
+	if (!instances.has(content)) {
+		instances.set(
+			content,
+			new ctor(
+				element,
+				getNavigable(content, {
+					...options,
+					onDeactivate,
+					onPreventNavigation,
+					onShouldActivate,
+					onShouldDeactivate,
+				}),
+			),
+		);
+	}
+}
+
+function addMenu(element: HTMLElement): void {
+	const content = element.querySelector(SELECTOR_MENU_CONTENT);
+	const toggle = element.querySelector(SELECTOR_MENU_TOGGLE);
+
+	if (content != null && toggle != null) {
+		addInstance(menus, OuiMenu, element, content as never, {
+			selector: SELECTOR_MENU_ITEM,
+			vertical: true,
+		});
+	}
+}
+
+function addMenubar(element: HTMLElement): void {
+	addInstance(menubars, OuiMenubar, element, element, {
+		role: 'menubar',
+		selector: SELECTOR_MENUBAR_ITEM,
+		vertical: false,
+	});
+}
+
+function getId(element: HTMLElement, value?: string): string {
+	let {id} = element;
+
+	if (id == null || id.trim().length === 0) {
+		id = value == null ? `oui_menu_${++index}` : `${value}_toggle`;
+
+		element.id = id;
+	}
+
+	return id;
+}
+
+function initializeMenu(menu: OuiMenu): void {
+	const id = getId(menu.content);
+
+	setAttribute(menu.toggle, 'popovertarget', id);
+
+	setAria(menu.toggle, {
+		controls: id,
+		expanded: 'false',
+		haspopup: 'menu',
+	});
+
+	setAttribute(menu.content, 'tabindex', '-1');
+
+	setRole(menu.content, 'menu');
+}
+
+function onDeactivate(_: KeyboardEvent, navigable: OuiNavigable): void {
+	const menu = menus.get(navigable.element);
+
+	if (menu == null) {
+		return;
+	}
+
+	menu.floatable.hide();
+
+	const element = findAncestor(menu.element.parentElement!, SELECTORS) as HTMLElement | null;
+
+	if (element == null) {
+		return;
+	}
+
+	const instance = menubars.get(element) ?? menus.get(element);
+
+	if (instance != null) {
+		updateNavigableFocus(instance.navigable, true);
+	}
+}
+
+function onPreventNavigation(_: KeyboardEvent, navigable: OuiNavigable): boolean {
+	const instance = menubars.get(navigable.element) ?? menus.get(navigable.element);
+
+	return findAncestor(instance?.element.parentElement!, SELECTORS) != null;
+}
+
+function onShouldActivate(event: KeyboardEvent, navigable: OuiNavigable): boolean {
+	let activate = false;
+
+	if (menubars.has(navigable.element)) {
+		activate =
+			navigable.orientation === 'horizontal'
+				? NAVIGABLE_KEYS_VERTICAL.has(event.key)
+				: NAVIGABLE_KEYS_HORIZONTAL.has(event.key);
+	} else if (menus.has(navigable.element)) {
+		activate =
+			navigable.orientation === 'horizontal'
+				? NAVIGABLE_KEYS_VERTICAL.has(event.key)
+				: event.key === 'ArrowRight';
+	}
+
+	if (activate) {
+		const target =
+			event.target instanceof HTMLElement && event.target.matches(SELECTOR_MENU_TOGGLE)
+				? event.target
+				: undefined;
+
+		if (target == null) {
+			activate = false;
+		} else {
+			target.click();
+		}
+	}
+
+	return activate;
+}
+
+function onShouldDeactivate(event: KeyboardEvent, navigable: OuiNavigable): boolean | undefined {
+	if (menubars.has(navigable.element)) {
+		return;
+	}
+
+	const menu = menus.get(navigable.element);
+
+	if (menu == null) {
+		return;
+	}
+
+	const horizontal = navigable.orientation === 'horizontal';
+
+	const altKey = horizontal ? 'ArrowDown' : 'ArrowRight';
+	const baseKey = horizontal ? 'ArrowUp' : 'ArrowLeft';
+
+	if (event.key === baseKey) {
+		return findAncestor(menu.element.parentElement!, SELECTOR_MENU_CONTENT) != null;
+	}
+
+	if (
+		event.key === altKey &&
+		event.target instanceof HTMLElement &&
+		!event.target.hasAttribute('popovertarget')
+	) {
+		return false;
+	}
+}
+
+function removeInstance<Instance extends OuiBasicMenu>(
+	instances: WeakMap<HTMLElement, Instance>,
+	element: HTMLElement,
+): void {
+	instances.get(element)?.destroy();
+
+	instances.delete(element);
+}
+
+function removeMenu(element: HTMLElement): void {
+	removeInstance(menus, element);
+}
+
+function removeMenubar(element: HTMLElement): void {
+	removeInstance(menubars, element);
+}
+
+// #endregion
+
+// #region Variables
+
+const ATTRIBUTE_MENU = 'oui-menu';
+
+const ATTRIBUTE_MENU_POSITION = 'oui-menu-position';
+
+const ATTRIBUTE_MENUBAR = 'oui-menubar';
+
+const SELECTOR_MENUBAR = `[${ATTRIBUTE_MENUBAR}]`;
+
+const SELECTOR_MENUBAR_ITEM = `:scope > [${ATTRIBUTE_MENUBAR}-item], :scope > * > [${ATTRIBUTE_MENUBAR}-item]`;
+
+const SELECTOR_MENU_CONTENT = `[${ATTRIBUTE_MENU}-content]`;
+
+const SELECTOR_MENU_ITEM = `:scope > [${ATTRIBUTE_MENU}-item], :scope > * > [${ATTRIBUTE_MENU}-item]`;
+
+const SELECTOR_MENU_TOGGLE = `[${ATTRIBUTE_MENU}-toggle]`;
+
+const SELECTORS = `${SELECTOR_MENUBAR}, ${SELECTOR_MENU_CONTENT}`;
+
+const menubars = new WeakMap<HTMLElement, OuiMenubar>();
+
+const menus = new WeakMap<HTMLElement, OuiMenu>();
+
+let index = 0;
+
+// #endregion
+
+// #region Initialization
+
+attributable(ATTRIBUTE_MENU, addMenu, removeMenu);
+attributable(ATTRIBUTE_MENUBAR, addMenubar, removeMenubar);
+
+// #endregion

package/src/js/movable/movable.embedded.ts

@@ -1,6 +1,8 @@
 import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
+import {setAttribute} from '@oscarpalmer/toretto/attribute';
 import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import {getStyles, setStyle, setStyles} from '@oscarpalmer/toretto/style';
 import {attributable} from '../internal/attributable';
 import {
 	addDraggable,
@@ -23,10 +25,7 @@ export class OuiMovable extends OuiDraggable<OuiMovableState> {
 	#style: OuiMovableStyle;
 
 	constructor(element: HTMLElement, options?: CreateOuiDraggableOptions) {
-		const style = {
-			inset: element.style.inset,
-			position: element.style.position,
-		};
+		const style = getStyles(element, ['inset', 'position']);
 
 		super(
 			'movable',
@@ -80,8 +79,7 @@ export class OuiMovable extends OuiDraggable<OuiMovableState> {
 	override destroy(): void {
 		MOVED.delete(this);
 
-		this.#element.style.inset = this.#style.inset;
-		this.#element.style.position = this.#style.position;
+		setStyles(this.#element, this.#style);
 
 		this.#element = undefined as never;
 		this.#style = undefined as never;
@@ -98,8 +96,8 @@ type OuiMovableState = {
 };
 
 type OuiMovableStyle = {
-	inset: string;
-	position: string;
+	inset: string | undefined;
+	position: string | undefined;
 };
 
 // #endregion
@@ -168,10 +166,9 @@ function onCancel(globals: OuiDraggableGlobals, item: OuiDraggableItem): void {
 	const {x, y} = globals.original ?? {x: 0, y: 0};
 
 	if (moved) {
-		element.style.inset = `${y}px auto auto ${x}px`;
+		setStyle(element, 'inset', `${y}px auto auto ${x}px`);
 	} else {
-		element.style.position = style.position;
-		element.style.inset = style.inset;
+		setStyles(element, style);
 	}
 
 	element.removeAttribute(ATTRIBUTE_MOVING);
@@ -227,7 +224,7 @@ function onMove(
 	__: OuiDraggableItem,
 	position: OuiDragMovePosition,
 ): PlainObject | undefined {
-	globals.element?.node.setAttribute(ATTRIBUTE_MOVING, '');
+	setAttribute(globals.element?.node as never, ATTRIBUTE_MOVING, '');
 
 	return {
 		from: {...globals.original},
@@ -270,7 +267,7 @@ function reposition(movable: OuiMovable): void {
 	const x = container.left + (state.offset?.x ?? 0);
 	const y = container.top + (state.offset?.y ?? 0);
 
-	state.element.style.inset = `${y}px auto auto ${x}px`;
+	setStyle(state.element, 'inset', `${y}px auto auto ${x}px`);
 }
 
 function setOffset(state: OuiDraggableState & OuiMovableState, container: DOMRect): void {