@oscarpalmer/oui 0.36.0 → 0.37.0

package/src/js/internal/navigable.ts

@@ -1,6 +1,7 @@
 import {clamp} from '@oscarpalmer/atoms/number';
-import {getAria, setRole} from '@oscarpalmer/toretto/aria';
-import {dispatch, on} from '@oscarpalmer/toretto/event';
+import {getAria, setAria, setRole} from '@oscarpalmer/toretto/aria';
+import {getAttribute} from '@oscarpalmer/toretto/attribute';
+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';
@@ -25,6 +26,16 @@ export class OuiNavigable {
 		this.options = options;
 
 		this.listeners = [
+			on(
+				element,
+				'click',
+				event => {
+					onClick(this, event);
+				},
+				{
+					passive: false,
+				},
+			),
 			on(element, 'focusin', event => {
 				onFocusin(this, event);
 			}),
@@ -40,7 +51,9 @@ export class OuiNavigable {
 			),
 		];
 
-		this.orientation = getOrientation(element, options);
+		this.orientation = options?.orientation ?? getNavigableOrientation(element, options.vertical);
+
+		setAria(element, 'orientation', this.orientation);
 
 		if (options.role != null) {
 			setRole(element, options.role);
@@ -57,6 +70,14 @@ export class OuiNavigable {
 		this.active.element = undefined;
 		this.element = undefined as never;
 	}
+
+	navigate(index: number, focus?: boolean): void {
+		const items = getItems(this.element, this.options.selector);
+
+		if (index >= 0 && index < items.length) {
+			onNavigate(this, index, items, focus ?? false);
+		}
+	}
 }
 
 type OuiNavigableActive = {
@@ -64,17 +85,25 @@ type OuiNavigableActive = {
 	index: number;
 };
 
+type OuiNavigableCallback<ReturnType> = (
+	event: KeyboardEvent,
+	navigable: OuiNavigable,
+) => ReturnType;
+
 export type OuiNavigableOptions = {
+	orientation?: OuiNavigableOrientation;
 	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;
+	onActivate?: (navigable: OuiNavigable) => void;
+	onDeactivate?: OuiNavigableCallback<void>;
+	onNavigation?: (navigable: OuiNavigable) => void;
+	onPreventNavigation?: OuiNavigableCallback<boolean>;
+	onShouldActivate?: OuiNavigableCallback<boolean>;
+	onShouldDeactivate?: OuiNavigableCallback<boolean | undefined>;
 };
 
-type OuiNavigableOrientation = 'horizontal' | 'vertical';
+export type OuiNavigableOrientation = 'horizontal' | 'vertical';
 
 // #endregion
 
@@ -88,15 +117,17 @@ export function getNavigable(element: HTMLElement, options: OuiNavigableOptions)
 	return new OuiNavigable(element, options);
 }
 
-function getOrientation(
+export function getNavigableOrientation(
 	element: HTMLElement,
-	options: OuiNavigableOptions,
+	vertical: boolean,
+	aria?: boolean,
 ): OuiNavigableOrientation {
-	const attribute = getAria(element, 'orientation');
+	const attribute =
+		(aria ?? true) ? getAria(element, 'orientation') : getAttribute(element, 'orientation');
 
 	return ORIENTATIONS.has(attribute as OuiNavigableOrientation)
 		? (attribute as OuiNavigableOrientation)
-		: options.vertical
+		: vertical
 			? ORIENTATION_VERTICAL
 			: ORIENTATION_HORIZONTAL;
 }
@@ -105,6 +136,39 @@ function isValidItem(element: Element): element is HTMLElement {
 	return 'disabled' in element ? element.disabled !== true : true;
 }
 
+function onClick(navigable: OuiNavigable, event: Event): void {
+	const item = findAncestor(event, navigable.options.selector) as HTMLElement;
+	const items = getItems(navigable.element, navigable.options.selector);
+
+	const index = items.indexOf(item);
+
+	if (index === -1) {
+		return;
+	}
+
+	if (index !== navigable.active.index) {
+		onNavigate(navigable, index, items, false);
+	}
+
+	navigable.options.onActivate?.(navigable);
+
+	item.focus();
+}
+
+function onNavigate(
+	navigable: OuiNavigable,
+	index: number,
+	items: HTMLElement[],
+	focus: boolean,
+): void {
+	navigable.active.element = items[index];
+	navigable.active.index = index;
+
+	updateNavigableFocus(navigable, focus, items);
+
+	navigable.options.onNavigation?.(navigable);
+}
+
 function onFocusin(navigable: OuiNavigable, event: FocusEvent): void {
 	const item = findAncestor(event, navigable.options.selector);
 
@@ -155,6 +219,8 @@ function onKeydown(navigable: OuiNavigable, event: KeyboardEvent): void {
 	}
 
 	if (mustActivate || shouldActivate) {
+		navigable.options.onActivate?.(navigable);
+
 		return;
 	}
 
@@ -188,14 +254,9 @@ function onKeydown(navigable: OuiNavigable, event: KeyboardEvent): void {
 		}
 	}
 
-	if (index == null || index === navigable.active.index) {
-		return;
+	if (index != null && index !== navigable.active.index) {
+		onNavigate(navigable, index, items, true);
 	}
-
-	navigable.active.element = items[index];
-	navigable.active.index = index;
-
-	updateNavigableFocus(navigable, true, items);
 }
 
 export function updateNavigableFocus(
@@ -219,10 +280,6 @@ export function updateNavigableFocus(
 	if (focus) {
 		navigable.active.element?.focus();
 	}
-
-	dispatch(navigable.active.element, 'navigable:change', {
-		detail: {...navigable.active},
-	});
 }
 
 // #endregion

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

@@ -199,20 +199,18 @@ function onEnd(
 		setOffset(state, container);
 	}
 
-	const dispatched = dispatch(state.element, 'movable:end', {
-		detail: {
-			from: {...globals.original},
-			to: getEventPosition(event),
-		},
-	});
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			onCancel(globals, item);
-		}
+	if (
+		dispatch(state.element, 'oui:movable:end', {
+			detail: {
+				from: {...globals.original},
+				to: getEventPosition(event),
+			},
+		}).defaultPrevented
+	) {
+		onCancel(globals, item);
+	}
 
-		reset();
-	});
+	reset();
 }
 
 function onMove(

package/src/js/resizable/resizable.embedded.ts

@@ -101,7 +101,7 @@ function cancelResize(item?: OuiResizableItem): void {
 
 	resetResizable();
 
-	dispatch(item.state.element, 'resizable:cancel');
+	dispatch(item.state.element, 'oui:resizable:cancel');
 }
 
 /**
@@ -289,19 +289,15 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 		event.preventDefault();
 	}
 
-	const dispatched = dispatch(element!, 'resizable:begin');
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			return;
-		}
+	if (dispatch(element!, 'oui:resizable:begin').defaultPrevented) {
+		return;
+	}
 
-		current = stored;
-		start = position;
+	current = stored;
+	start = position;
 
-		current.state.styles.set();
-		styleToggler.set();
-	});
+	current.state.styles.set();
+	styleToggler.set();
 }
 
 function onPointermove(event: MouseEvent | TouchEvent): void {
@@ -320,41 +316,31 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 
 	getAndSetDimensions(current.state.element, current.state.options, {height, width});
 
-	const dispatched = dispatch(current.state.element, 'resizable:resize', {
-		detail: {
-			height,
-			width,
-		},
-	});
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			cancelResize(current);
-		}
-	});
+	if (
+		dispatch(current.state.element, 'oui:resizable:resize', {
+			detail: {
+				height,
+				width,
+			},
+		}).defaultPrevented
+	) {
+		cancelResize(current);
+	}
 }
 
 function onPointerup(): void {
-	if (current == null) {
+	if (current == null || dispatch(current.state.element, 'oui:resizable:end').defaultPrevented) {
+		cancelResize(current);
+
 		return;
 	}
 
-	const dispatched = dispatch(current.state.element, 'resizable:end');
-
-	setTimeout(() => {
-		if (current == null || dispatched.defaultPrevented) {
-			cancelResize(current);
+	const {height, width} = current.state.element.getBoundingClientRect();
 
-			return;
-		}
-
-		const {height, width} = current.state.element.getBoundingClientRect();
+	current.state.height = height;
+	current.state.width = width;
 
-		current.state.height = height;
-		current.state.width = width;
-
-		resetResizable();
-	});
+	resetResizable();
 }
 
 function removeResizable(element: HTMLElement): void {

package/src/js/splitter.ts

@@ -3,6 +3,7 @@ import {round} from '@oscarpalmer/atoms/math';
 import {clamp} from '@oscarpalmer/atoms/number';
 import {setAria} from '@oscarpalmer/toretto/aria';
 import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
+import {createElement} from '@oscarpalmer/toretto/create';
 import {getEventPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {setStyle, toggleStyles} from '@oscarpalmer/toretto/style';
@@ -238,28 +239,30 @@ type OuiSplitterValuesNow = {
 // #region Functions
 
 function createHandle(): HTMLSpanElement {
-	const handle = document.createElement('span');
-
-	setAria(handle, 'hidden', 'true');
-	setAttribute(handle, ATTRIBUTE_HANDLE, '');
-
-	return handle;
+	return createElement('span', {
+		aria: {
+			hidden: true,
+		},
+		attribute: {
+			[ATTRIBUTE_HANDLE]: '',
+		},
+	});
 }
 
 function createSeparator(splitter: OuiSplitter): HTMLDivElement {
-	const separator = document.createElement('div');
-
-	separator.role = 'separator';
-	separator.tabIndex = 0;
-
-	setAria(separator, {
-		controls: splitter.element.id,
-		label: 'Resize panels',
+	return createElement('div', {
+		aria: {
+			controls: splitter.element.id,
+			label: 'Resize panels',
+		},
+		attribute: {
+			[ATTRIBUTE_SEPARATOR]: '',
+		},
+		property: {
+			role: 'separator',
+			tabIndex: 0,
+		},
 	});
-
-	setAttribute(separator, ATTRIBUTE_SEPARATOR, '');
-
-	return separator;
 }
 
 function getContained(min: number, value: number, max: number): number {