@oscarpalmer/oui 0.35.0 → 0.37.0

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

@@ -0,0 +1,445 @@
+import {createElement, setAria, setAttribute} from '@oscarpalmer/toretto';
+import {getLocalization, localize} from '../../l10n';
+import {listboxScrollOptions} from './listbox.constants';
+import {getListboxVisibleOptions} from './listbox.misc';
+import type {
+	OuiListboxAttributes,
+	OuiListboxAutoComplete,
+	OuiListboxGroup,
+	OuiListboxLocalizations,
+	OuiListboxOptions,
+	OuiListboxPreview,
+	OuiListboxState,
+	OuiListboxType,
+} from './listbox.model';
+
+// #region Types
+
+export type CreateListboxContent = {
+	element: HTMLDivElement;
+	filter?: CreateListboxFilter;
+	list: CreateListboxList;
+	message: HTMLDivElement;
+	value: HTMLSpanElement;
+};
+
+export type CreateListboxContentParameters = {
+	attributes: OuiListboxAttributes;
+	autocomplete: OuiListboxAutoComplete;
+	element: HTMLElement;
+	id: string;
+	label: HTMLLabelElement;
+	listbox: boolean;
+	multiple: boolean;
+	select: HTMLSelectElement;
+	type: OuiListboxType;
+};
+
+export type CreateListboxFilter = {
+	container: HTMLElement;
+	element: HTMLInputElement;
+};
+
+type CreateListboxGroupParameters = {
+	group: HTMLOptGroupElement;
+	groupOptions: HTMLOptionElement[];
+	original: CreateListboxContentParameters;
+	selected: HTMLElement[];
+	type: OuiListboxType;
+};
+
+export type CreateListboxList = {
+	element: HTMLUListElement;
+	groups?: OuiListboxGroup[];
+	options: OuiListboxOptions;
+};
+
+type CreateListboxOptionParameters = {
+	group?: string;
+	index: number;
+	option: HTMLOptionElement;
+	original: CreateListboxContentParameters;
+	type: OuiListboxType;
+};
+
+type CreateListboxOptionsParameters = {
+	group?: string;
+	list: HTMLElement;
+	options: HTMLOptionElement[];
+	original: CreateListboxContentParameters;
+	selected: HTMLElement[];
+	type: OuiListboxType;
+};
+
+// #endregion
+
+// #region Functions
+
+export function createListboxContent(
+	parameters: CreateListboxContentParameters,
+): CreateListboxContent {
+	const element = createElement('div', {
+		attribute: {
+			[parameters.attributes.content]: '',
+		},
+	});
+
+	const filter = createListboxFilter(parameters);
+	const list = createListboxList(parameters);
+	const message = createListboxMessage(parameters.attributes.message);
+	const value = createListboxValueLabel(parameters.id);
+
+	if (filter != null) {
+		element.append(filter.container);
+	}
+
+	element.append(list.element, message, value);
+
+	return {
+		element,
+		filter,
+		list,
+		message,
+		value,
+	};
+}
+
+export function createListboxFilter(
+	parameters: CreateListboxContentParameters,
+): CreateListboxFilter | undefined {
+	if (parameters.type === 'autocomplete') {
+		return;
+	}
+
+	const container = createElement('div', {
+		attribute: {
+			[parameters.attributes.filter]: '',
+		},
+	});
+
+	const element = createListboxInput(parameters, '');
+
+	setAttribute(element, parameters.attributes.input, '');
+
+	container.append(element);
+
+	return {container, element};
+}
+
+export function createListboxGroup(parameters: CreateListboxGroupParameters): OuiListboxGroup {
+	const {group, groupOptions, selected, type} = parameters;
+
+	const element = createElement('li', {
+		aria: {
+			label: group.label,
+		},
+		property: {
+			role: 'group',
+		},
+	});
+
+	const list = createElement('ul', {
+		property: {
+			role: 'none',
+		},
+	});
+
+	const header = createListboxHeader(parameters, group);
+
+	element.append(header, list);
+
+	return {
+		element,
+		header,
+		options: createListboxOptions({
+			list,
+			selected,
+			type,
+			group: header.id,
+			options: groupOptions,
+			original: parameters.original,
+		}),
+	};
+}
+
+export function createListboxHeader(
+	parameters: CreateListboxGroupParameters,
+	group: HTMLOptGroupElement,
+): HTMLElement {
+	return createElement('div', {
+		aria: {
+			hidden: true,
+		},
+		attribute: {
+			[parameters.original.attributes.header]: '',
+		},
+		property: {
+			id: group.id,
+			textContent: group.label,
+		},
+	});
+}
+
+export function createListboxInput(
+	parameters: CreateListboxContentParameters,
+	value: string,
+): HTMLInputElement {
+	const {autocomplete, id, label, listbox, type} = parameters;
+
+	const isAutocomplete = type === 'autocomplete';
+
+	const input = createElement('input', {
+		aria: {
+			autocomplete: autocomplete.value,
+			controls: `${id}_list`,
+			haspopup: isAutocomplete ? 'listbox' : undefined,
+			labelledby: label.id,
+		},
+		attribute: {
+			autocorrect: 'off',
+			autocomplete: 'off',
+			form: '',
+			spellcheck: 'false',
+			type: 'text',
+		},
+		property: {
+			id,
+			value,
+			role: isAutocomplete || listbox ? 'combobox' : 'searchbox',
+		},
+	});
+
+	if (isAutocomplete || listbox) {
+		setAria(input, 'expanded', listbox);
+	}
+
+	return input;
+}
+
+export function createListboxList(parameters: CreateListboxContentParameters): CreateListboxList {
+	const {attributes, id, label, multiple, select, type} = parameters;
+
+	const element = createElement('ul', {
+		aria: {
+			labelledby: label.id,
+			multiselectable: multiple,
+		},
+		attribute: {
+			[attributes.list]: '',
+			tabindex: -1,
+		},
+		property: {
+			id: `${id}_list`,
+			role: 'listbox',
+		},
+	});
+
+	const children = [...select.children];
+	const childrenLength = children.length;
+
+	const options: HTMLElement[] = [];
+	const selected: HTMLElement[] = [];
+
+	let groups: OuiListboxGroup[] | undefined;
+
+	for (let childIndex = 0; childIndex < childrenLength; childIndex += 1) {
+		const child = children[childIndex];
+
+		if (child instanceof HTMLOptionElement) {
+			const option = createListboxOption({
+				type,
+				option: child,
+				original: parameters,
+				index: childIndex,
+			});
+
+			element.append(option);
+			options.push(option);
+
+			if (child.selected) {
+				selected.push(option);
+			}
+
+			continue;
+		}
+
+		if (!(child instanceof HTMLOptGroupElement)) {
+			continue;
+		}
+
+		const group = createListboxGroup({
+			selected,
+			type,
+			group: child,
+			groupOptions: [...child.children] as HTMLOptionElement[],
+			original: parameters,
+		});
+
+		groups ??= [];
+
+		element.append(group.element);
+		groups.push(group);
+		options.push(...group.options);
+	}
+
+	return {
+		element,
+		groups,
+		options: {
+			selected,
+			all: options,
+		},
+	};
+}
+
+export function createListboxMessage(attribute: string): HTMLDivElement {
+	return createElement('div', {
+		aria: {
+			live: 'polite',
+		},
+		attribute: {
+			[attribute]: '',
+		},
+		property: {
+			hidden: true,
+			role: 'status',
+		},
+	});
+}
+
+export function createListboxOption(parameters: CreateListboxOptionParameters): HTMLElement {
+	const {group, option, original} = parameters;
+
+	return createElement('li', {
+		aria: {
+			selected: (parameters.type === 'select' || !original.autocomplete.none) && option.selected,
+		},
+		attribute: {
+			[original.attributes.option]: '',
+		},
+		data: {
+			group,
+			value: option.value,
+		},
+		property: {
+			id: option.id,
+			role: 'option',
+			textContent: option.textContent,
+		},
+	});
+}
+
+export function createListboxOptions(parameters: CreateListboxOptionsParameters): HTMLElement[] {
+	const {group, list, options, original, selected, type} = parameters;
+
+	const items: HTMLElement[] = [];
+
+	for (let index = 0; index < options.length; index += 1) {
+		const option = options[index];
+
+		const item = createListboxOption({group, index, option, original, type});
+
+		items.push(item);
+
+		if (option.selected) {
+			selected.push(item);
+		}
+
+		list.append(item);
+	}
+
+	return items;
+}
+
+export function createListboxValueLabel(id: string): HTMLSpanElement {
+	return createElement('span', {
+		property: {
+			hidden: true,
+			id: `${id}_value`,
+		},
+	});
+}
+
+export function updateListboxMessage(state: OuiListboxState): void {
+	const {attributes, host, localizations, message} = state;
+
+	const visible = getListboxVisibleOptions(state).length;
+
+	setAttribute(message, attributes.hidden, visible > 0 ? '' : undefined);
+
+	let data: Record<string, unknown> = {};
+	let parameters: unknown[] = [];
+
+	let key: keyof OuiListboxLocalizations | undefined;
+
+	if (visible === 0) {
+		key = 'empty';
+	} else {
+		data = {amount: visible};
+		key = 'results';
+		parameters = [visible];
+	}
+
+	const localization = getLocalization(localizations.global, host, key, localizations.component);
+
+	message.textContent = localize(localization, data, parameters);
+
+	message.hidden = false;
+}
+
+export function updateListboxPreview<State extends OuiListboxState>(
+	preview: OuiListboxPreview,
+	state: State,
+	active?: HTMLElement,
+	scroll?: boolean,
+): void {
+	const {length} = state.options.all;
+
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+
+		setAttribute(option, state.attributes.active, option === active ? '' : undefined);
+	}
+
+	state.active = active;
+
+	setAria(
+		state.filter.element,
+		'activedescendant',
+		state.content.checkVisibility() ? active?.id : undefined,
+	);
+
+	if (scroll ?? true) {
+		active?.scrollIntoView(listboxScrollOptions);
+	}
+
+	if (preview !== 'none') {
+		state.callbacks.data.onPreview(preview, state, active);
+	}
+}
+
+export function updateListboxValueLabel<State extends OuiListboxState>(state: State): void {
+	let label: string;
+
+	if (state.multiple) {
+		const localization = getLocalization(
+			state.localizations.global,
+			state.host,
+			'selected',
+			state.localizations.component,
+		);
+
+		const {length} = state.options.selected;
+
+		label = localize(localization, {amount: length}, [length]);
+	} else {
+		label =
+			state.autocomplete.none && !state.listbox
+				? state.filter.element.value
+				: (state.options.selected[0]?.textContent ?? '');
+	}
+
+	state.values.label.textContent = label;
+}
+
+// #endregion

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,13 +1,11 @@
 import {dispatch} from '@oscarpalmer/toretto/event';
-import {getLocalization, localize} from '../l10n';
-import {updateComboboxAnchor} from './dom.combobox';
-import type {OuiComboboxState} from './models.combobox';
-import {comboboxLocalizations} from './state.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 {
@@ -29,23 +27,24 @@ 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');
+		dispatch(state.host, 'oui: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 = getLocalization(
-			comboboxLocalizations,
+			state.localizations.global,
 			state.host,
 			'invalid',
-			state.localizations,
+			state.localizations.component,
 		);
 
 		state.internals.setValidity({valueMissing}, localize(localization, {}, []));
@@ -97,7 +96,7 @@ export function updateComboboxValidity(state: OuiComboboxState): void {
 	const localization =
 		key == null
 			? undefined
-			: getLocalization(comboboxLocalizations, state.host, key, state.localizations);
+			: getLocalization(state.localizations.global, state.host, key, state.localizations.component);
 
 	const message = localization == null ? undefined : localize(localization, data, parameters);