@oscarpalmer/oui 0.34.0 → 0.36.0

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

@@ -0,0 +1,129 @@
+import {clamp} from '@oscarpalmer/atoms/number';
+import {LISTBOX_KEYS} from './listbox.constants';
+import {getListboxVisibleOptions} from './listbox.misc';
+import type {OuiListboxPreview, OuiListboxState} from './listbox.model';
+
+// #region Functions
+
+export function processListboxKeydown<State extends OuiListboxState>(
+	event: KeyboardEvent,
+	state: State,
+): void {
+	const ignore = state.disabled || state.readonly;
+	const isSelect = state.type === 'select';
+
+	let preventDefault = ignore;
+
+	switch (true) {
+		case event.key === ' ': {
+			if (!state.disabled) {
+				state.callbacks.keydown.onActivation?.(state);
+			}
+
+			break;
+		}
+
+		case event.key === 'Enter': {
+			preventDefault = state.callbacks.keydown.preventActivation?.(state) ?? true;
+
+			if (preventDefault) {
+				state.callbacks.keydown.onEnter?.(state);
+			} else if (!ignore && state.type === 'select') {
+				state.callbacks.keydown.onActivation?.(state);
+			} else if (!ignore) {
+				state.internals.form?.requestSubmit();
+			}
+
+			break;
+		}
+
+		case event.key === 'Escape': {
+			preventDefault = false;
+
+			state.callbacks.keydown.onEscape?.(state);
+
+			break;
+		}
+
+		case !isSelect && LISTBOX_KEYS.selection.has(event.key): {
+			if (!ignore) {
+				state.callbacks.keydown.onSelection?.(state);
+			}
+
+			break;
+		}
+
+		case LISTBOX_KEYS.navigation.has(event.key): {
+			if (!state.disabled) {
+				onNavigation(event, state);
+			}
+
+			break;
+		}
+
+		default: {
+			preventDefault = false;
+
+			if (event.key === 'Tab') {
+				state.callbacks.keydown.onTab?.(state);
+			}
+
+			break;
+		}
+	}
+
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
+
+function onNavigation<State extends OuiListboxState>(event: KeyboardEvent, state: State): void {
+	const skip = state.callbacks.keydown.skipNavigation?.(state) ?? false;
+	const visible = getListboxVisibleOptions(state);
+
+	if (visible.length === 0) {
+		return;
+	}
+
+	let next: HTMLElement | undefined;
+
+	if (skip || state.active == null) {
+		next = state.active ?? visible.at(event.key === 'ArrowDown' ? 0 : -1);
+	} else {
+		const current = visible.findIndex(option => option.id === state.active?.id);
+
+		let index: number | undefined;
+
+		switch (event.key) {
+			case 'ArrowDown':
+			case 'ArrowUp':
+				index = clamp(current + (event.key === 'ArrowDown' ? 1 : -1), 0, visible.length - 1, true);
+				break;
+
+			case 'PageDown':
+			case 'PageUp':
+				index = clamp(current + (event.key === 'PageDown' ? 10 : -10), 0, visible.length - 1);
+				break;
+
+			default:
+				break;
+		}
+
+		if (index != null) {
+			next = visible[index];
+		}
+	}
+
+	let preview: OuiListboxPreview;
+
+	if (state.type === 'autocomplete' && (state.autocomplete.both || state.autocomplete.inline)) {
+		preview = 'set';
+	} else {
+		preview = 'none';
+	}
+
+	state.callbacks.keydown.onNavigation(preview, state, next ?? state.active ?? visible[0]);
+}
+
+// #endregion

package/src/js/{combobox/form.combobox.ts → internal/listbox/listbox.form.ts}

@@ -1,12 +1,11 @@
 import {dispatch} from '@oscarpalmer/toretto/event';
-import {updateComboboxAnchor} from './dom.combobox';
-import {getComboboxLocalization} from './i18n.combobox';
-import type {OuiComboboxState} from './models.combobox';
+import {getLocalization, localize} from '../../l10n';
+import type {OuiListboxState} from './listbox.model';
 
 // #region Functions
 
-export function updateComboboxForm(
-	state: OuiComboboxState,
+export function updateListboxForm<State extends OuiListboxState>(
+	state: State,
 	values: string[],
 	emit?: boolean,
 ): void {
@@ -28,40 +27,42 @@ export function updateComboboxForm(
 
 	state.internals.setFormValue(value, JSON.stringify(values));
 
-	updateComboboxAnchor(state);
-	updateComboboxValidity(state);
+	state.callbacks.data.onForm(state);
+
+	updateListboxValidity(state);
 
 	if (emit ?? true) {
 		dispatch(state.host, 'change');
 	}
 }
 
-export function updateComboboxValidity(state: OuiComboboxState): void {
-	if (state.autocomplete.none) {
+export function updateListboxValidity(state: OuiListboxState): void {
+	if (state.autocomplete.none && !state.listbox) {
 		const valueMissing = state.required && state.filter.element.value.length === 0;
 
-		const localization = getComboboxLocalization('invalid', state);
-
-		state.internals.setValidity(
-			{valueMissing},
-			typeof localization === 'function' ? localization() : localization,
+		const localization = getLocalization(
+			state.localizations.global,
+			state.host,
+			'invalid',
+			state.localizations.component,
 		);
 
+		state.internals.setValidity({valueMissing}, localize(localization, {}, []));
+
 		state.internals.checkValidity();
 
 		return;
 	}
 
+	let data: Record<string, unknown> = {};
 	let error: 'badInput' | 'rangeOverflow' | 'rangeUnderflow' | undefined;
-	let message: string | undefined;
+	let key: 'input' | 'max' | 'min' | undefined;
+	let parameters: unknown[] = [];
 
 	switch (true) {
 		case state.required && state.options.selected.length === 0: {
 			error = 'badInput';
-
-			const localization = getComboboxLocalization('input', state);
-
-			message = typeof localization === 'function' ? localization() : localization;
+			key = 'input';
 
 			break;
 		}
@@ -69,14 +70,10 @@ export function updateComboboxValidity(state: OuiComboboxState): void {
 		case state.multiple &&
 			typeof state.max === 'number' &&
 			state.options.selected.length > state.max: {
+			data = {amount: state.max};
 			error = 'rangeOverflow';
-
-			const localization = getComboboxLocalization('max', state);
-
-			message =
-				typeof localization === 'function'
-					? localization(state.max)
-					: localization.replace('{max}', state.max.toString());
+			key = 'max';
+			parameters = [state.max];
 
 			break;
 		}
@@ -84,14 +81,10 @@ export function updateComboboxValidity(state: OuiComboboxState): void {
 		case state.multiple &&
 			typeof state.min === 'number' &&
 			state.options.selected.length < state.min: {
+			data = {amount: state.min};
 			error = 'rangeUnderflow';
-
-			const localization = getComboboxLocalization('min', state);
-
-			message =
-				typeof localization === 'function'
-					? localization(state.min)
-					: localization.replace('{min}', state.min.toString());
+			key = 'min';
+			parameters = [state.min];
 
 			break;
 		}
@@ -100,6 +93,13 @@ export function updateComboboxValidity(state: OuiComboboxState): void {
 			break;
 	}
 
+	const localization =
+		key == null
+			? undefined
+			: getLocalization(state.localizations.global, state.host, key, state.localizations.component);
+
+	const message = localization == null ? undefined : localize(localization, data, parameters);
+
 	state.internals.setValidity(
 		error == null
 			? {}

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]);
+	}
+
+	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