@oscarpalmer/oui 0.27.0 → 0.29.0

package/src/js/toolbar.ts

@@ -1,153 +1,41 @@
-import {clamp} from '@oscarpalmer/atoms/number';
-import {on} from '@oscarpalmer/toretto/event';
-import {findAncestor} from '@oscarpalmer/toretto/find';
-import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 import {attributable} from './internal/attributable';
+import {getNavigable, OuiNavigable, updateNavigableFocus} from './internal/navigable';
+
+// #region Types
 
 class OuiToolbar {
-	readonly #state: OuiToolbarState;
+	#navigable: OuiNavigable;
 
-	constructor(state: OuiToolbarState) {
-		this.#state = state;
+	constructor(navigable: OuiNavigable) {
+		this.#navigable = navigable;
 
-		updateFocus(this.#state, false);
+		updateNavigableFocus(this.#navigable, false);
 	}
 
 	destroy(): void {
-		for (const listener of this.#state.listeners) {
-			listener();
-		}
+		this.#navigable.destroy();
 
-		this.#state.active = undefined as never;
-		this.#state.element = undefined as never;
-		this.#state.listeners = undefined as never;
+		this.#navigable = undefined as never;
 	}
 }
 
-type OuiToolbarOrientation = 'horizontal' | 'vertical';
-
-type OuiToolbarState = {
-	active: OuiToolbarStateActive;
-	element: HTMLElement;
-	listeners: RemovableEventListener[];
-	orientation: OuiToolbarOrientation;
-};
+// #endregion
 
-type OuiToolbarStateActive = {
-	element?: HTMLElement;
-	index: number;
-};
+// #region Functions
 
 function addToolbar(element: HTMLElement): void {
 	if (!instances.has(element)) {
-		instances.set(element, new OuiToolbar(getState(element)));
-	}
-}
-
-function getItems(element: HTMLElement): HTMLElement[] {
-	return [...element.querySelectorAll<HTMLElement>(SELECTOR)].filter(isValidItem);
-}
-
-function getOrientation(element: HTMLElement): OuiToolbarOrientation {
-	const attribute = element.getAttribute(ARIA_ORIENTATION);
-
-	return ORIENTATIONS.has(attribute as OuiToolbarOrientation)
-		? (attribute as OuiToolbarOrientation)
-		: ORIENTATION_HORIZONTAL;
-}
-
-function getState(element: HTMLElement): OuiToolbarState {
-	const state: OuiToolbarState = {
-		element,
-		active: {
-			index: 0,
-		},
-		listeners: [
-			on(element, EVENT_FOCUSIN, event => {
-				onFocusin(state, event);
-			}),
-			on(
-				element,
-				EVENT_KEYDOWN,
-				event => {
-					onKeydown(state, event);
-				},
-				{
-					passive: false,
-				},
+		instances.set(
+			element,
+			new OuiToolbar(
+				getNavigable(element, {
+					role: 'toolbar',
+					selector: SELECTOR,
+					vertical: false,
+				}),
 			),
-		],
-		orientation: getOrientation(element),
-	};
-
-	return state;
-}
-
-function isValidItem(element: HTMLElement): boolean {
-	return PROPERTY_DISABLED in element ? element.disabled !== true : true;
-}
-
-function onKeydown(state: OuiToolbarState, event: KeyboardEvent): void {
-	if (!KEYS_ALL.has(event.key)) {
-		return;
-	}
-
-	const items = getItems(state.element);
-
-	if (items.length === 0) {
-		return;
-	}
-
-	let index: number | undefined;
-
-	if (KEYS_ABSOLUTE.has(event.key)) {
-		index = event.key === KEY_HOME ? 0 : items.length - 1;
-	} else if (
-		state.orientation === ORIENTATION_HORIZONTAL
-			? KEYS_HORIZONTAL.has(event.key)
-			: KEYS_VERTICAL.has(event.key)
-	) {
-		if (state.active.element instanceof HTMLSelectElement) {
-			event.preventDefault();
-		}
-
-		index = clamp(
-			state.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1),
-			0,
-			items.length - 1,
-			true,
 		);
 	}
-
-	if (index == null || index === state.active.index) {
-		return;
-	}
-
-	state.active.element = items[index];
-	state.active.index = index;
-
-	updateFocus(state, true, items);
-}
-
-function onFocusin(state: OuiToolbarState, event: FocusEvent): void {
-	const item = findAncestor(event, SELECTOR);
-
-	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) {
-		return;
-	}
-
-	const items = getItems(state.element);
-	const index = items.indexOf(item);
-
-	if (index === -1) {
-		return;
-	}
-
-	state.active.element = item;
-	state.active.index = index;
-
-	updateFocus(state, false, items);
 }
 
 function removeToolbar(element: HTMLElement): void {
@@ -156,59 +44,20 @@ function removeToolbar(element: HTMLElement): void {
 	instances.delete(element);
 }
 
-function updateFocus(state: OuiToolbarState, focus: boolean, items?: HTMLElement[]): void {
-	const updated = items ?? getItems(state.element);
-	const {length} = updated;
-
-	if (length === 0) {
-		return;
-	}
-
-	for (let index = 0; index < length; index += 1) {
-		updated[index].tabIndex = index === state.active.index ? 0 : -1;
-	}
+// #endregion
 
-	state.active.element ??= updated[state.active.index];
-
-	if (focus) {
-		state.active.element?.focus();
-	}
-}
-
-const ARIA_ORIENTATION = 'aria-orientation';
+// #region Variables
 
 const ATTRIBUTE = 'oui-toolbar';
 
-const EVENT_KEYDOWN = 'keydown';
-
-const EVENT_FOCUSIN = 'focusin';
-
-const KEY_ARROW_DOWN = 'ArrowDown';
-
-const KEY_ARROW_RIGHT = 'ArrowRight';
-
-const KEY_END = 'End';
-
-const KEY_HOME = 'Home';
-
-const KEYS_ABSOLUTE = new Set([KEY_END, KEY_HOME]);
-
-const KEYS_HORIZONTAL = new Set([KEY_ARROW_RIGHT, 'ArrowLeft']);
-
-const KEYS_VERTICAL = new Set([KEY_ARROW_DOWN, 'ArrowUp']);
-
-const KEYS_ALL = new Set([...KEYS_ABSOLUTE, ...KEYS_HORIZONTAL, ...KEYS_VERTICAL]);
-
-const KEYS_NEXT = new Set([KEY_ARROW_DOWN, KEY_ARROW_RIGHT]);
-
-const ORIENTATION_HORIZONTAL: OuiToolbarOrientation = 'horizontal';
-
-const ORIENTATIONS = new Set<OuiToolbarOrientation>([ORIENTATION_HORIZONTAL, 'vertical']);
-
-const PROPERTY_DISABLED = 'disabled';
-
 const SELECTOR = `[${ATTRIBUTE}-item]`;
 
 const instances = new WeakMap<HTMLElement, OuiToolbar>();
 
+// #endregion
+
+// #region Initialization
+
 attributable(ATTRIBUTE, addToolbar, removeToolbar);
+
+// #endregion

package/src/js/tooltip.ts

@@ -1,11 +1,11 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {getAria} from '@oscarpalmer/toretto/aria';
+import {setAttribute} from '@oscarpalmer/toretto/attribute';
 import {createElement} from '@oscarpalmer/toretto/create';
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
-import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {
 	createEmbeddedFloatable,
-	FLOATABLE_STATE_OPEN,
 	type OuiFloatable,
 	type OuiFloatableOptions,
 } from './floatable/floatable.embedded';
@@ -154,7 +154,11 @@ function destroyTooltip(state: OuiTooltipState): void {
 	state.tooltip = undefined as never;
 }
 
-function findElements(attribute: string | null): HTMLElement[] {
+function findElements(attribute?: string): HTMLElement[] | undefined {
+	if (attribute == null) {
+		return;
+	}
+
 	const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
 	const elements: HTMLElement[] = [];
 
@@ -165,7 +169,7 @@ function findElements(attribute: string | null): HTMLElement[] {
 
 		const element = document.querySelector(`#${id}`);
 
-		if (isHTMLOrSVGElement(element)) {
+		if (element != null) {
 			const cloned = element.cloneNode(true) as HTMLElement;
 
 			cloned.hidden = false;
@@ -178,34 +182,32 @@ function findElements(attribute: string | null): HTMLElement[] {
 }
 
 function getContent(): HTMLElement {
-	const content = createElement(CONTENT_TAGNAME, {
+	const content = createElement('div', {
 		popover: 'hint',
 		role: 'tooltip',
 		tabIndex: -1,
 	});
 
-	content.setAttribute(ATTRIBUTE_CONTENT, '');
+	setAttribute(content, ATTRIBUTE_CONTENT, '');
 
 	return content;
 }
 
 function getElements(anchor: HTMLElement): HTMLElement[] | undefined {
-	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
+	let elements = findElements(getAria(anchor, 'labelledby'));
 
-	if (elements.length > 0) {
-		return elements;
+	if (elements == null || elements.length === 0) {
+		elements = findElements(getAria(anchor, 'describedby'));
 	}
 
-	elements = findElements(anchor.getAttribute(ARIA_DESCRIBEDBY));
-
-	if (elements.length > 0) {
-		return elements;
+	if (elements != null && elements.length > 0) {
+		return elements as HTMLElement[];
 	}
 
-	let text = anchor.getAttribute(ARIA_LABEL);
+	let text = getAria(anchor, 'label');
 
 	if (isNullableOrWhitespace(text)) {
-		text = anchor.getAttribute(ARIA_DESCRIPTION);
+		text = getAria(anchor, 'description');
 	}
 
 	if (isNullableOrWhitespace(text)) {
@@ -276,11 +278,7 @@ function onPointermove(event: Event): void {
 }
 
 function onToggle(event: ToggleEvent): void {
-	if (event.newState === FLOATABLE_STATE_OPEN) {
-		content.setAttribute(ATTRIBUTE_CONTENT_OPEN, '');
-	} else {
-		content.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
-	}
+	setAttribute(content, ATTRIBUTE_CONTENT_OPEN, event.newState === 'open' ? '' : undefined);
 }
 
 function removeTooltip(element: HTMLElement): void {
@@ -311,16 +309,6 @@ function setTooltipDelay(value: number): void {
 
 // #region Variables
 
-const ARIA_DESCRIBEDBY = 'aria-describedby';
-
-const ARIA_DESCRIPTION = 'aria-description';
-
-const ARIA_LABEL = 'aria-label';
-
-const ARIA_LABELLEDBY = 'aria-labelledby';
-
-const CONTENT_TAGNAME = 'div';
-
 const EXPRESSION_WHITESPACE = /\s+/;
 
 const ATTRIBUTE = 'oui-tooltip';