@oscarpalmer/oui 0.27.0 → 0.29.0

package/src/js/floatable/floatable.embedded.ts

@@ -1,7 +1,10 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
+import {getAria} from '@oscarpalmer/toretto/aria';
+import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
 import {on} from '@oscarpalmer/toretto/event';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
+import {setStyle, setStyles} from '@oscarpalmer/toretto/style';
 
 // #region Types
 
@@ -45,13 +48,15 @@ export class OuiFloatable {
 		const {anchor, content} = state;
 
 		if (standalone) {
-			content.setAttribute(ATTRIBUTE_FLOATABLE, '');
+			setAttribute(content, ATTRIBUTE_FLOATABLE, '');
 
 			content.popover = 'manual';
+		} else {
+			content.popover ??= 'auto';
 		}
 
-		anchor.style.anchorName = state.name;
-		content.style.positionAnchor = state.name;
+		setStyle(anchor, 'anchorName', state.name);
+		setStyle(content, 'positionAnchor', state.name);
 	}
 
 	/**
@@ -211,11 +216,11 @@ function createInstance(
 export function getOnBeforeToggleListener(element: HTMLElement): RemovableEventListener {
 	return on(
 		element,
-		EVENT_BEFORE,
+		'beforetoggle',
 		event => {
 			const {newState, source} = event;
 
-			if (newState === FLOATABLE_STATE_OPEN && source?.getAttribute(ARIA_DISABLED) === TRUE) {
+			if (newState === 'open' && source != null && getAria(source, 'disabled') === 'true') {
 				event.preventDefault();
 			}
 		},
@@ -248,9 +253,11 @@ function getPosition(
 		return options.position;
 	}
 
-	const attribute = anchor.getAttribute(options.attribute) ?? '';
+	const attribute = getAttribute(anchor, options.attribute);
 
-	return attribute in AREAS ? (attribute as OuiFloatablePosition) : options.position;
+	return attribute != null && attribute in AREAS
+		? (attribute as OuiFloatablePosition)
+		: options.position;
 }
 
 function getState(
@@ -281,10 +288,12 @@ function setPosition(state: OuiFloatableState, override?: OuiFloatablePosition):
 
 	const area = AREAS[position];
 
-	state.content.style.positionAnchor = state.name;
-	state.content.style.positionArea = area;
+	setAttribute(state.content, ATTRIBUTE_POSITION, POSITIONS[area]);
 
-	state.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
+	setStyles(state.content, {
+		positionAnchor: state.name,
+		positionArea: area,
+	});
 }
 
 // #endregion
@@ -306,24 +315,16 @@ const AREAS: Record<OuiFloatablePosition, string> = {
 	'start-top': 'span-end start',
 };
 
-const ARIA_DISABLED = 'aria-disabled';
-
 export const ATTRIBUTE_FLOATABLE = 'oui-floatable';
 
 const ATTRIBUTE_POSITION = 'oui-position';
 
-const EVENT_BEFORE = 'beforetoggle';
-
-export const FLOATABLE_STATE_OPEN = 'open';
-
 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>;
 
-const TRUE = 'true';
-
 const instances = new WeakMap<HTMLElement, OuiFloatable>();
 
 let index = 0;

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

@@ -1,5 +1,6 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
 import {clamp} from '@oscarpalmer/atoms/number';
+import {setAttribute} from '@oscarpalmer/toretto/attribute';
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {getFocusable} from '@oscarpalmer/toretto/focusable';
@@ -26,9 +27,9 @@ export class OuiFocusTrap {
 	 */
 	set contain(value: boolean) {
 		if (value === true) {
-			this.#state.element.setAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN, '');
+			setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_CONTAIN, '');
 		} else if (value === false) {
-			this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN);
+			setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_CONTAIN, undefined);
 		}
 	}
 
@@ -62,9 +63,9 @@ export class OuiFocusTrap {
 	 */
 	set noescape(value: boolean) {
 		if (value === true) {
-			this.#state.element.setAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE, '');
+			setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_NOESCAPE, '');
 		} else if (value === false) {
-			this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE);
+			setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_NOESCAPE, undefined);
 		}
 	}
 
@@ -74,7 +75,7 @@ export class OuiFocusTrap {
 
 		state.element.tabIndex = -1;
 
-		state.element.setAttribute(ATTRIBUTE_FOCUSTRAP, '');
+		setAttribute(state.element, ATTRIBUTE_FOCUSTRAP, '');
 
 		this.contain = state.options.contain;
 		this.noescape = state.options.noescape;

package/src/js/index.ts

@@ -1,4 +1,4 @@
-import './sortable/sortable.embedded';
+import './menu';
 import './toolbar';
 
 export * from './dialog';
@@ -6,5 +6,7 @@ export * from './floatable/floatable.standalone';
 export * from './focus-trap/focus-trap.standalone';
 export * from './movable/movable.standalone';
 export * from './popover';
+export * from './resizable/resizable.standalone';
+export * from './sortable/sortable.standalone';
 export * from './splitter';
 export * from './tooltip';

package/src/js/internal/attributable.ts

@@ -1,5 +1,3 @@
-import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-
 export function attributable(
 	attribute: string,
 	add: (element: HTMLElement) => void,
@@ -11,7 +9,7 @@ export function attributable(
 		for (let index = 0; index < length; index += 1) {
 			const entry = entries[index];
 
-			if (entry.type === 'attributes' && isHTMLOrSVGElement(entry.target)) {
+			if (entry.type === 'attributes' && entry.target instanceof Element) {
 				if (entry.target.hasAttribute(attribute)) {
 					handleAdded(attribute, [entry.target], add);
 				} else {
@@ -41,7 +39,7 @@ function handleAdded(
 	nodes: Node[] | NodeList,
 	add: (element: HTMLElement) => void,
 ): void {
-	const elements = [...nodes].filter(isHTMLOrSVGElement) as HTMLElement[];
+	const elements = [...nodes].filter(node => node instanceof Element) as HTMLElement[];
 
 	const {length} = elements;
 
@@ -59,7 +57,7 @@ function handleAdded(
 }
 
 function handleRemoved(nodes: Node[] | NodeList, remove: (element: HTMLElement) => void): void {
-	const elements = [...nodes].filter(isHTMLOrSVGElement) as HTMLElement[];
+	const elements = [...nodes].filter(node => node instanceof Element) as HTMLElement[];
 
 	const {length} = elements;
 

package/src/js/internal/draggable.ts

@@ -1,12 +1,13 @@
 import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
 import {clamp} from '@oscarpalmer/atoms/number';
+import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
 import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
-import {toggleStyles, type StyleToggler} from '@oscarpalmer/toretto/style';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import {setStyle, setStyles, toggleStyles, type StyleToggler} from '@oscarpalmer/toretto/style';
 import supportsTouch from '@oscarpalmer/toretto/touch';
 import type {OuiMovable} from '../movable/movable.embedded';
 import type {OuiSortable} from '../sortable/sortable.embedded';
-import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 
 // #region Types
 
@@ -63,7 +64,7 @@ export abstract class OuiDraggable<ExtraState extends PlainObject = PlainObject>
 		setContainer(item);
 		setDirection(item);
 
-		element.setAttribute(attribute, '');
+		setAttribute(element, attribute, '');
 
 		let states = globals.states.get(element);
 
@@ -425,9 +426,11 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 
 		const next = getNextPosition(item, position);
 
-		dragged.style.position = 'fixed';
-		dragged.style.inset = `${next.y}px auto auto ${next.x}px`;
-		dragged.style.transform = 'translate3d(0, 0, 0)';
+		setStyles(dragged, {
+			position: 'fixed',
+			inset: `${next.y}px auto auto ${next.x}px`,
+			transform: 'translate3d(0, 0, 0)',
+		});
 
 		item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
 
@@ -450,7 +453,7 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 	const next = getNextPosition(current, position);
 
 	if (globals.element != null) {
-		globals.element.node.style.inset = `${next.y}px auto auto ${next.x}px`;
+		setStyle(globals.element.node, 'inset', `${next.y}px auto auto ${next.x}px`);
 	}
 
 	const detail = current.state.options.drag.onMove(event, globals, current, {
@@ -529,7 +532,7 @@ function setContainer(item: OuiDraggableItem): void {
 	}
 
 	const selector =
-		container ?? item.instance.element.getAttribute(item.state.options.container.attribute);
+		container ?? getAttribute(item.instance.element, item.state.options.container.attribute);
 
 	if (typeof selector !== 'string') {
 		return;
@@ -559,7 +562,7 @@ function setContainerElement(item: OuiDraggableItem, element: HTMLElement): void
 }
 
 function setDirection(item: OuiDraggableItem): void {
-	const direction = item.state.element.getAttribute(item.state.options.direction.attribute);
+	const direction = getAttribute(item.state.element, item.state.options.direction.attribute);
 
 	if (horizontals.has(direction as OuiDraggableDirection)) {
 		item.state.vertical = false;
@@ -650,7 +653,7 @@ on(document, 'keydown', onKeydown);
 on(document, 'mousedown', onPointerdown);
 on(document, 'pointermove', onPointermove);
 on(document, 'pointerup', onPointerup);
-on(document, 'touchcancel', onPointerup, {passive: false});
+on(document, 'touchcancel', onPointerup);
 on(document, 'touchstart', onPointerdown, {passive: false});
 
 // #endregion

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