@oscarpalmer/oui 0.35.0 → 0.37.0

package/src/js/internal/listbox/listbox.misc.ts

@@ -0,0 +1,135 @@
+import {setAria} from '@oscarpalmer/toretto/aria';
+import {setAttribute} from '@oscarpalmer/toretto/attribute';
+import {filterListbox} from './listbox.data';
+import {updateListboxValidity} from './listbox.form';
+import type {OuiListboxState} from './listbox.model';
+
+// #region Functions
+
+export function generateListboxIds(prefix: string, select: HTMLSelectElement): void {
+	const elements = [...select.children].flatMap(child =>
+		child instanceof HTMLOptGroupElement
+			? [
+					child,
+					...[...child.children].filter(groupChild => groupChild instanceof HTMLOptionElement),
+				]
+			: child instanceof HTMLOptionElement
+				? [child]
+				: [],
+	);
+
+	const {length} = elements;
+
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+
+		if (element.id === '') {
+			element.id = `${prefix}${element instanceof HTMLOptGroupElement ? '_group_' : '_option_'}${index}`;
+		}
+	}
+}
+
+export function getListboxVisibleOptions(state: OuiListboxState): HTMLElement[] {
+	return state.options.all.filter(option => !option.hidden);
+}
+
+export function setListboxDisabled<State extends OuiListboxState>(
+	state: State,
+	value: boolean,
+): void {
+	state.filter.element.readOnly = state.readonly || value;
+
+	setProperties('disabled', state, value);
+}
+
+export function setListboxFilter<State extends OuiListboxState>(
+	state: State,
+	value: unknown,
+): void {
+	if (typeof value !== 'string') {
+		return;
+	}
+
+	const type: InputEvent['inputType'] =
+		value.length < state.filter.element.value.length ? 'deleteContentBackward' : 'insertText';
+
+	state.filter.element.value = value;
+
+	filterListbox(type, state);
+}
+
+export function setListboxLimit<State extends OuiListboxState>(
+	type: 'max' | 'min',
+	state: State,
+	value?: unknown,
+): void {
+	let actual = value;
+
+	if (typeof actual === 'string') {
+		actual = Number.parseInt(actual, 10);
+	}
+
+	const updateLimit =
+		typeof actual === 'number' && !Number.isNaN(actual) && actual >= 0
+			? actual !== state[type]
+			: actual == null;
+
+	if (updateLimit) {
+		state[type] = actual as number | undefined;
+
+		setAttribute(state.host, type, actual);
+
+		updateListboxValidity(state);
+	}
+}
+
+export function setListboxMultiple(element: HTMLElement, value: boolean): void {
+	if (value) {
+		element.setAttribute('multiple', '');
+	} else {
+		element.removeAttribute('multiple');
+	}
+}
+
+function setProperties<State extends OuiListboxState>(
+	key: 'disabled' | 'readonly' | 'required',
+	state: State,
+	value: boolean,
+): void {
+	state[key] = value;
+
+	const {length} = state.elements;
+
+	for (let index = 0; index < length; index += 1) {
+		const element = state.elements[index];
+
+		if (element == null) {
+			continue;
+		}
+
+		setAria(
+			element,
+			key,
+			key !== 'readonly' || !(element instanceof HTMLButtonElement) ? value : undefined,
+		);
+	}
+}
+
+export function setListboxReadonly<State extends OuiListboxState>(
+	state: State,
+	value: boolean,
+): void {
+	state.filter.element.readOnly = state.disabled || value;
+
+	setProperties('readonly', state, value);
+}
+
+export function setListboxRequired<State extends OuiListboxState>(
+	state: State,
+	value: boolean,
+): void {
+	setProperties('required', state, value);
+	updateListboxValidity(state);
+}
+
+// #endregion

package/src/js/internal/listbox/listbox.model.ts

@@ -0,0 +1,169 @@
+import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
+import type {OuiLocalizations, OuiLocalizationsValues} from '../../l10n';
+
+// #region Types
+
+export type OuiListboxAttributes = {
+	active: string;
+	content: string;
+	empty: string;
+	filter: string;
+	group: string;
+	header: string;
+	hidden: string;
+	input: string;
+	list: string;
+	message: string;
+	option: string;
+};
+
+export type OuiListboxAutoComplete = Record<OuiListboxAutoCompleteType, boolean> & {
+	value?: OuiListboxAutoCompleteType;
+};
+
+export type OuiListboxAutoCompleteType = 'both' | 'inline' | 'list' | 'none';
+
+export type OuiListboxCallbacks<State extends OuiListboxState = OuiListboxState> = {
+	data: OuiListboxCallbacksData<State>;
+	keydown: OuiListboxCallbacksKeydown<State>;
+};
+
+type OuiListboxCallbacksData<State extends OuiListboxState = OuiListboxState> = {
+	onApply: OuiListboxCallbacksDataOnApply<State>;
+	onFilter: OuiListboxCallbacksDataOnFilter<State>;
+	onForm: (state: State) => void;
+	onPreview: OuiListboxCallbacksDataOnPreview<State>;
+	onToggle: (state: State) => void;
+};
+
+type OuiListboxCallbacksDataOnApply<State extends OuiListboxState = OuiListboxState> = (
+	state: State,
+	option: HTMLElement | undefined,
+	values: string[],
+	added: boolean,
+	selected?: HTMLElement[],
+	emit?: boolean,
+) => void;
+
+type OuiListboxCallbacksDataOnFilter<State extends OuiListboxState = OuiListboxState> = (
+	preview: OuiListboxPreview,
+	state: State,
+	update: boolean,
+	active?: HTMLElement,
+	emit?: boolean,
+) => void;
+
+type OuiListboxCallbacksDataOnPreview<State extends OuiListboxState = OuiListboxState> = (
+	preview: OuiListboxPreview,
+	state: State,
+	active?: HTMLElement,
+) => void;
+
+type OuiListboxCallbacksKeydown<State extends OuiListboxState = OuiListboxState> = {
+	onActivation?: (state: State) => void;
+	onEnter?: (state: State) => void;
+	onEscape?: (state: State) => void;
+	onNavigation: OuiListboxCallbacksDataOnNavigation<State>;
+	onSelection?: (state: State) => void;
+	onTab?: (state: State) => void;
+	onToggle?: (state: State) => void;
+	preventActivation?: (state: State) => boolean;
+	skipNavigation?: (state: State) => boolean;
+};
+
+type OuiListboxCallbacksDataOnNavigation<State extends OuiListboxState = OuiListboxState> = (
+	preview: OuiListboxPreview,
+	state: State,
+	active?: HTMLElement,
+) => void;
+
+type OuiListboxFilter = {
+	element: HTMLInputElement;
+	value: string;
+};
+
+type OuiListboxFooter = {
+	container: HTMLElement;
+	message: HTMLElement;
+};
+
+export type OuiListboxGroup = {
+	element: HTMLElement;
+	header: HTMLElement;
+	options: HTMLElement[];
+};
+
+type OuiListboxLabel = {
+	element: HTMLLabelElement;
+	id: string;
+};
+
+type OuiListboxLocalization<Localizations extends OuiLocalizationsValues> = {
+	component: Record<string, Partial<Localizations>>;
+	global: OuiLocalizations<Localizations>;
+};
+
+export type OuiListboxLocalizations = {
+	empty: string | (() => string);
+	input: string | (() => string);
+	invalid: string | (() => string);
+	max: string | ((max: number) => string);
+	min: string | ((min: number) => string);
+	remove: string | ((label: string, value: string) => string);
+	results: string | ((amount: number) => string);
+	selected: string | ((amount: number) => string);
+};
+
+export type OuiListboxOptions = {
+	all: HTMLElement[];
+	selected: HTMLElement[];
+};
+
+export type OuiListboxPreview = 'none' | 'set' | 'typed';
+
+export type OuiListboxState = {
+	active?: HTMLElement;
+	attributes: OuiListboxAttributes;
+	autocomplete: OuiListboxAutoComplete;
+	callbacks: OuiListboxCallbacks;
+	content: HTMLDivElement;
+	disabled: boolean;
+	elements: Array<HTMLElement | undefined>;
+	filter: OuiListboxFilter;
+	footer?: OuiListboxFooter;
+	groups?: OuiListboxGroup[];
+	host: HTMLElement;
+	id: string;
+	internals: ElementInternals;
+	label: OuiListboxLabel;
+	list: HTMLUListElement;
+	listbox: boolean;
+	listeners: RemovableEventListener[];
+	localizations: OuiListboxLocalization<OuiListboxLocalizations>;
+	max?: number;
+	min?: number;
+	message: HTMLElement;
+	multiple: boolean;
+	name: string;
+	options: OuiListboxOptions;
+	readonly: boolean;
+	required: boolean;
+	select: HTMLSelectElement;
+	type: OuiListboxType;
+	values: OuiListboxValues;
+};
+
+export type OuiListboxStates<State extends OuiListboxState = OuiListboxState> = {
+	map: WeakMap<HTMLElement, State>;
+	set: Set<State>;
+};
+
+export type OuiListboxType = 'autocomplete' | 'select';
+
+type OuiListboxValues = {
+	current: string[];
+	initial: string[];
+	label: HTMLElement;
+};
+
+// #endregion

package/src/js/internal/listbox/listbox.state.ts

@@ -0,0 +1,82 @@
+import {getAttribute} from '@oscarpalmer/toretto/attribute';
+import {filterListboxOptions} from './listbox.data';
+import {updateListboxMessage, updateListboxPreview, updateListboxValueLabel} from './listbox.dom';
+import {updateListboxForm} from './listbox.form';
+import {
+	setListboxDisabled,
+	setListboxLimit,
+	setListboxMultiple,
+	setListboxReadonly,
+	setListboxRequired,
+} from './listbox.misc';
+import type {OuiListboxState, OuiListboxStates} from './listbox.model';
+
+// #region Functions
+
+export function attachListbox<State extends OuiListboxState>(
+	state: State,
+	states: OuiListboxStates<State>,
+	onAttach: (state: State) => void,
+): void {
+	const {filter, host, label} = state;
+
+	label.element.htmlFor = filter.element.id;
+	label.element.id = `${state.id}_label`;
+
+	onAttach(state);
+
+	states.map.set(host, state);
+	states.set.add(state);
+}
+
+export function detachListbox<State extends OuiListboxState>(
+	state: State,
+	states: OuiListboxStates<State>,
+	onDetach: (state: State) => void,
+): void {
+	const {host, label, select} = state;
+
+	const listeners = state.listeners.splice(0);
+	const {length} = listeners;
+
+	for (let index = 0; index < length; index += 1) {
+		listeners[index]();
+	}
+
+	label.element.htmlFor = select.id;
+	label.element.id = label.id;
+
+	onDetach(state);
+
+	states.map.delete(host);
+	states.set.delete(state);
+}
+
+export function initializeListboxState<State extends OuiListboxState>(
+	state: State,
+	states: OuiListboxStates<State>,
+	onAttach: (state: State) => void,
+): State {
+	attachListbox(state, states, onAttach);
+
+	setListboxDisabled(state, state.disabled);
+	setListboxLimit('max', state, getAttribute(state.host, 'max'));
+	setListboxLimit('min', state, getAttribute(state.host, 'min'));
+	setListboxMultiple(state.host, state.multiple);
+	setListboxReadonly(state, state.readonly);
+	setListboxRequired(state, state.required);
+
+	filterListboxOptions(state);
+
+	updateListboxForm(state, state.values.current, false);
+	updateListboxMessage(state);
+	updateListboxValueLabel(state);
+
+	if (state.options.selected.length > 0) {
+		updateListboxPreview('none', state, state.options.selected[0], false);
+	}
+
+	return state;
+}
+
+// #endregion

package/src/js/internal/misc.ts

@@ -0,0 +1,27 @@
+import {getAria} from '@oscarpalmer/toretto/aria';
+import {getAttribute} from '@oscarpalmer/toretto/attribute';
+import type {AnyAriaBooleanAttribute} from '@oscarpalmer/toretto/models';
+
+// #region Functions
+
+export function getAttributeValue<Value>(
+	element: HTMLElement,
+	attribute: string,
+	possible: Set<Value>,
+	defaultValue: Value,
+): Value {
+	const value = getAttribute(element, attribute);
+
+	return possible.has(value as Value) ? (value as Value) : defaultValue;
+}
+
+export function getBooleanAriaValue(
+	element: HTMLElement,
+	attribute: AnyAriaBooleanAttribute,
+): boolean {
+	const value = getAria(element, attribute);
+
+	return value === true || value === 'true';
+}
+
+// #endregion

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/l10n.ts

@@ -7,9 +7,7 @@ type LocalizationParameters<Localization> = Localization extends GenericCallback
 	? Parameters<Localization>
 	: never;
 
-type OuiLocalizationValues = Record<string, string | GenericCallback>;
-
-export class OuiLocalizations<Localizations extends OuiLocalizationValues> {
+export class OuiLocalizations<Localizations extends OuiLocalizationsValues> {
 	readonly defaults: Localizations;
 
 	readonly keys: Set<keyof Localizations>;
@@ -49,6 +47,8 @@ export class OuiLocalizations<Localizations extends OuiLocalizationValues> {
 	}
 }
 
+export type OuiLocalizationsValues = Record<string, string | GenericCallback>;
+
 // #endregion
 
 // #region Functions
@@ -60,7 +60,7 @@ export function getLanguage(element: Element): string {
 }
 
 export function getLocalization<
-	Localizations extends OuiLocalizationValues,
+	Localizations extends OuiLocalizationsValues,
 	Key extends keyof Localizations,
 >(
 	localizations: OuiLocalizations<Localizations>,
@@ -101,14 +101,14 @@ export function getLocalization<
 	return localization ?? localizations.defaults[key];
 }
 
-export function getLocalizations<Localizations extends OuiLocalizationValues>(
+export function getLocalizations<Localizations extends OuiLocalizationsValues>(
 	defaults: Localizations,
 ): OuiLocalizations<Localizations> {
 	return new OuiLocalizations(defaults);
 }
 
 export function localize<
-	Localizations extends OuiLocalizationValues,
+	Localizations extends OuiLocalizationsValues,
 	Key extends keyof Localizations,
 	Localization extends Localizations[Key],
 >(
@@ -135,10 +135,10 @@ export function localize<
 	return localized;
 }
 
-export function updateLocalizations<Localizations extends OuiLocalizationValues>(
+export function updateLocalizations<Localizations extends OuiLocalizationsValues>(
 	instance: OuiLocalizations<Localizations>,
 	values: Record<string, Partial<Localizations>>,
-	destination?: Record<string, Partial<Localizations>>,
+	destination: Record<string, Partial<Localizations>>,
 	onAfter?: () => void,
 ): void {
 	if (typeof values !== 'object' || values == null) {