@oscarpalmer/oui 0.35.0 → 0.36.0

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

@@ -1,23 +1,22 @@
 import {getString} from '@oscarpalmer/atoms/string';
 import {setAria} from '@oscarpalmer/toretto/aria';
+import {setAttribute} from '@oscarpalmer/toretto/attribute';
 import {getData} from '@oscarpalmer/toretto/data';
-import {
-	updateComboboxMessage,
-	updateComboboxPreview,
-	updateComboboxSelection,
-} from './dom.combobox';
-import {onComboboxFilter} from './event.combobox';
-import {updateComboboxForm} from './form.combobox';
-import type {OuiComboboxState} from './models.combobox';
+import {dispatch} from '@oscarpalmer/toretto/event';
+import {updateListboxMessage, updateListboxPreview, updateListboxValueLabel} from './listbox.dom';
+import {updateListboxForm} from './listbox.form';
+import {setListboxFilter} from './listbox.misc';
+import type {OuiListboxPreview, OuiListboxState} from './listbox.model';
 
 // #region Types
 
-type ApplySelectionParameters = {
+type ApplySelectionParameters<State extends OuiListboxState = OuiListboxState> = {
 	added: boolean;
 	emit?: boolean;
 	option?: HTMLElement;
+	scroll?: boolean;
 	selected?: HTMLElement[];
-	state: OuiComboboxState;
+	state: State;
 	values?: string[];
 };
 
@@ -25,20 +24,26 @@ type ApplySelectionParameters = {
 
 // #region Functions
 
-export function applyComboboxSelection(parameters: ApplySelectionParameters): void {
-	const {added, emit, option, selected, state} = parameters;
-
+export function applyListboxSelection<State extends OuiListboxState>(
+	parameters: ApplySelectionParameters<State>,
+): void {
+	const {added, emit, option, scroll, selected, state} = parameters;
 	const {length} = state.options.all;
 
 	for (let index = 0; index < length; index += 1) {
 		const option = state.options.all[index];
 
-		setAria(option, 'selected', (selected ?? state.options.selected).includes(option));
+		setAria(
+			option,
+			'selected',
+			(state.type === 'select' || !state.autocomplete.none) &&
+				(selected ?? state.options.selected).includes(option),
+		);
 	}
 
 	const values =
 		parameters.values ??
-		(state.autocomplete.none
+		(state.autocomplete.none && !state.listbox
 			? [state.filter.element.value]
 			: (selected ?? state.options.selected).map(option => getData(option, 'value', false) ?? ''));
 
@@ -59,13 +64,44 @@ export function applyComboboxSelection(parameters: ApplySelectionParameters): vo
 		return;
 	}
 
-	updateComboboxForm(state, values, emit);
-	updateComboboxPreview('set', state, option);
-	updateComboboxSelection(state, option, added, selected);
+	updateListboxForm(state, values, emit);
+	updateListboxMessage(state);
+	updateListboxPreview('set', state, option, scroll);
+	updateListboxValueLabel(state);
+
+	state.callbacks.data.onApply(state, option, values, added, selected, emit);
 }
 
-export function filterComboboxOption(
-	state: OuiComboboxState,
+export function filterListbox(type: InputEvent['inputType'], state: OuiListboxState): void {
+	if (state.disabled || state.readonly) {
+		return;
+	}
+
+	const update = state.filter.element.value !== state.filter.value;
+
+	const option = filterListboxOptions(state);
+
+	let preview: OuiListboxPreview | undefined;
+
+	if (type.includes('delete')) {
+		preview = 'none';
+	} else if (type.includes('insert')) {
+		preview = 'typed';
+	}
+
+	if (preview != null) {
+		state.callbacks.data.onFilter(preview, state, update, option);
+	}
+
+	if (update) {
+		state.filter.value = state.filter.element.value;
+
+		dispatch(state.host, 'input');
+	}
+}
+
+export function filterListboxOption(
+	state: OuiListboxState,
 	value: unknown,
 	textContent?: boolean,
 ): HTMLElement | undefined {
@@ -73,9 +109,10 @@ export function filterComboboxOption(
 
 	const filter = getString(value).toLocaleLowerCase();
 
-	filterComboboxOptions(state);
+	filterListboxOptions(state);
 
 	const {length} = state.options.all;
+
 	let match: HTMLElement | undefined;
 
 	for (let index = 0; index < length; index += 1) {
@@ -95,7 +132,7 @@ export function filterComboboxOption(
 	return match;
 }
 
-export function filterComboboxOptions(state: OuiComboboxState): HTMLElement | undefined {
+export function filterListboxOptions(state: OuiListboxState): HTMLElement | undefined {
 	function filter(options: HTMLElement[]): boolean {
 		const {length} = options;
 
@@ -105,7 +142,8 @@ export function filterComboboxOptions(state: OuiComboboxState): HTMLElement | un
 			const option = options[index];
 
 			option.hidden =
-				!state.autocomplete.none && !option.textContent.toLocaleLowerCase().includes(value);
+				(state.type === 'select' || !state.autocomplete.none) &&
+				!option.textContent.toLocaleLowerCase().includes(value);
 
 			if (!option.hidden) {
 				count += 1;
@@ -133,28 +171,36 @@ export function filterComboboxOptions(state: OuiComboboxState): HTMLElement | un
 		}
 	}
 
-	updateComboboxMessage(state, visible.length);
+	setAttribute(state.list, state.attributes.empty, visible.length === 0 ? '' : undefined);
+
+	updateListboxMessage(state);
 
 	return state.active != null && visible.includes(state.active) ? state.active : visible[0];
 }
 
-export function setComboboxValue(state: OuiComboboxState, value: unknown, emit?: boolean): void {
-	if (state.autocomplete.none) {
-		state.filter.element.value = getString(value);
-
-		onComboboxFilter('insertText', state, true, emit);
+export function setListboxValue<State extends OuiListboxState>(
+	state: State,
+	value: unknown,
+	emit?: boolean,
+): void {
+	if (state.autocomplete.none && !state.listbox) {
+		setListboxFilter(state, getString(value));
 
 		return;
 	}
 
-	const option = filterComboboxOption(state, value);
+	const option = filterListboxOption(state, value);
 
 	if (option != null) {
-		setComboboxValues(state, [value], emit);
+		setListboxValues(state, [value], emit);
 	}
 }
 
-export function setComboboxValues(state: OuiComboboxState, value: unknown, emit?: boolean): void {
+export function setListboxValues<State extends OuiListboxState>(
+	state: State,
+	value: unknown[],
+	emit?: boolean,
+): void {
 	if (!Array.isArray(value)) {
 		return;
 	}
@@ -167,8 +213,8 @@ export function setComboboxValues(state: OuiComboboxState, value: unknown, emit?
 		values.push('');
 	}
 
-	if (state.autocomplete.none) {
-		setComboboxValue(state, values[0], emit);
+	if (state.autocomplete.none && !state.listbox) {
+		setListboxValue(state, values[0], emit);
 
 		return;
 	}
@@ -185,19 +231,22 @@ export function setComboboxValues(state: OuiComboboxState, value: unknown, emit?
 		}
 	}
 
-	applyComboboxSelection({
+	applyListboxSelection({
 		emit,
 		selected,
 		state,
 		added: true,
 		option: selected[0] ?? state.options.all[0],
-		values: state.autocomplete.none ? values : undefined,
+		values: state.autocomplete.none && !state.listbox ? values : undefined,
 	});
 }
 
-export function toggleComboboxOption(state: OuiComboboxState, option?: HTMLElement): void {
+export function toggleListboxOption<State extends OuiListboxState>(
+	state: State,
+	option?: HTMLElement,
+): void {
 	if (option == null || (!state.multiple && state.options.selected.includes(option))) {
-		state.floatable.hide();
+		state.callbacks.data.onToggle(state);
 
 		return;
 	}
@@ -220,17 +269,19 @@ export function toggleComboboxOption(state: OuiComboboxState, option?: HTMLEleme
 		selected.splice(0, selected.length, option);
 	}
 
-	applyComboboxSelection({
+	applyListboxSelection({
 		added,
 		option,
 		selected,
 		state,
-		values: state.autocomplete.none && option != null ? [option.textContent] : undefined,
+		scroll: false,
+		values:
+			state.autocomplete.none && !state.listbox && option != null
+				? [option.textContent]
+				: undefined,
 	});
 
-	if (!state.multiple) {
-		state.floatable.hide();
-	}
+	state.callbacks.data.onToggle(state);
 }
 
 // #endregion

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