@oscarpalmer/oui 0.34.0 → 0.36.0

package/src/js/combobox/dom.combobox.ts

@@ -2,32 +2,26 @@ import {setAria} from '@oscarpalmer/toretto/aria';
 import {setAttribute} from '@oscarpalmer/toretto/attribute';
 import {createElement} from '@oscarpalmer/toretto/create';
 import {getData} from '@oscarpalmer/toretto/data';
+import {
+	createListboxFilter,
+	createListboxInput,
+	createListboxList,
+	createListboxMessage,
+	createListboxValueLabel,
+	type CreateListboxContent,
+	type CreateListboxContentParameters,
+} from '../internal/listbox/listbox.dom';
+import type {OuiListboxPreview} from '../internal/listbox/listbox.model';
+import {getLocalization, localize} from '../l10n';
 import {
 	COMBOBOX_ATTRIBUTE_ANCHOR,
-	COMBOBOX_ATTRIBUTE_CONTENT,
-	COMBOBOX_ATTRIBUTE_FILTER,
-	COMBOBOX_ATTRIBUTE_FILTER_INPUT,
-	COMBOBOX_ATTRIBUTE_HEADER,
-	COMBOBOX_ATTRIBUTE_HIDDEN,
-	COMBOBOX_ATTRIBUTE_LIST,
-	COMBOBOX_ATTRIBUTE_MESSAGE,
-	COMBOBOX_ATTRIBUTE_OPTION,
-	COMBOBOX_ATTRIBUTE_OPTION_ACTIVE,
 	COMBOBOX_ATTRIBUTE_SELECTION,
 	COMBOBOX_ATTRIBUTE_SELECTION_ITEM,
-	comboboxScrollOptions,
 } from './constants.combobox';
-import {updateComboboxValidity} from './form.combobox';
-import {getComboboxLocalization} from './i18n.combobox';
 import type {
-	OuiComboboxAutoComplete,
-	OuiComboboxAutoCompleteType,
-	OuiComboboxGroup,
-	OuiComboboxPreview,
 	OuiComboboxSelection,
 	OuiComboboxSelectionItem,
 	OuiComboboxState,
-	OuiComboboxType,
 } from './models.combobox';
 
 // #region Types
@@ -38,88 +32,6 @@ type CreateAnchor = {
 	selection?: OuiComboboxSelection;
 };
 
-type CreatAnchorParameters = {
-	autocomplete: OuiComboboxAutoComplete;
-	id: string;
-	label: HTMLLabelElement;
-	multiple: boolean;
-	select: HTMLSelectElement;
-	type: OuiComboboxType;
-};
-
-type CreateContent = {
-	element: HTMLElement;
-	filter?: CreateFilter;
-	list: CreateList;
-	message: HTMLElement;
-};
-
-type CreateContentParameters = {
-	autocomplete: OuiComboboxAutoComplete;
-	id: string;
-	label: HTMLLabelElement;
-	multiple: boolean;
-	select: HTMLSelectElement;
-	type: OuiComboboxType;
-};
-
-type CreateFilter = {
-	container: HTMLElement;
-	element: HTMLInputElement;
-};
-
-type CreateFilterParameters = {
-	autocomplete: OuiComboboxAutoCompleteType;
-	id: string;
-	label: HTMLLabelElement;
-	type: OuiComboboxType;
-};
-
-type CreateGroupParameters = {
-	autocomplete: OuiComboboxAutoComplete;
-	group: HTMLOptGroupElement;
-	groupOptions: HTMLOptionElement[];
-	selected: HTMLElement[];
-};
-
-type CreateInputParameters = {
-	autocomplete: OuiComboboxAutoCompleteType;
-	id: string;
-	label: HTMLLabelElement;
-	type: OuiComboboxType;
-	value: string;
-};
-
-type CreateList = {
-	element: HTMLElement;
-	groups?: OuiComboboxGroup[];
-	options: HTMLElement[];
-	selected: HTMLElement[];
-};
-
-type CreateListParameters = {
-	autocomplete: OuiComboboxAutoComplete;
-	id: string;
-	label: HTMLLabelElement;
-	multiple: boolean;
-	select: HTMLSelectElement;
-};
-
-type CreateOptionParameters = {
-	autocomplete: OuiComboboxAutoComplete;
-	group?: string;
-	index: number;
-	option: HTMLOptionElement;
-};
-
-type CreateOptionsParameters = {
-	autocomplete: OuiComboboxAutoComplete;
-	group?: string;
-	list: HTMLElement;
-	options: HTMLOptionElement[];
-	selected: HTMLElement[];
-};
-
 type CreateSelectionItemsParameters = {
 	container: HTMLElement;
 	items: OuiComboboxSelectionItem[];
@@ -131,21 +43,15 @@ type CreateSelectionItemsParameters = {
 
 // #region Functions
 
-export function createComboboxAnchor(parameters: CreatAnchorParameters): CreateAnchor {
-	const {autocomplete, id, label, select, type} = parameters;
+export function createComboboxAnchor(parameters: CreateListboxContentParameters): CreateAnchor {
+	const {select} = parameters;
 
 	let container: HTMLElement | undefined;
 	let element: HTMLElement;
 	let selection: OuiComboboxSelection | undefined;
 
 	if (parameters.type === 'autocomplete') {
-		element = createComboboxInput({
-			id,
-			label,
-			type,
-			autocomplete: autocomplete.value,
-			value: select.selectedOptions[0]?.textContent ?? '',
-		});
+		element = createListboxInput(parameters, select.selectedOptions[0]?.textContent ?? '');
 	} else {
 		({container, element, selection} = createComboboxButton(parameters));
 	}
@@ -155,7 +61,7 @@ export function createComboboxAnchor(parameters: CreatAnchorParameters): CreateA
 	return {container, element, selection};
 }
 
-export function createComboboxButton(parameters: CreatAnchorParameters): CreateAnchor {
+export function createComboboxButton(parameters: CreateListboxContentParameters): CreateAnchor {
 	const {id, label, multiple, select} = parameters;
 
 	const element = createElement('button', {
@@ -163,7 +69,7 @@ export function createComboboxButton(parameters: CreatAnchorParameters): CreateA
 			controls: `${id}_content`,
 			expanded: false,
 			haspopup: 'listbox',
-			labelledby: `${label.id} ${id}`,
+			labelledby: `${label.id} ${id}_value`, // Non-input anchor, so no implicit value label, so we need to explicitly reference the value label
 		},
 		property: {
 			textContent: multiple ? '' : (select.selectedOptions[0]?.textContent ?? ''),
@@ -182,15 +88,17 @@ export function createComboboxButton(parameters: CreatAnchorParameters): CreateA
 	return {container, element, selection};
 }
 
-export function createComboboxContent(parameters: CreateContentParameters): CreateContent {
-	const {autocomplete, id, label, multiple, select, type} = parameters;
+export function createComboboxContent(
+	parameters: CreateListboxContentParameters,
+): CreateListboxContent {
+	const {id, label} = parameters;
 
 	const element = createElement('div', {
 		aria: {
 			labelledby: label.id,
 		},
 		attribute: {
-			[COMBOBOX_ATTRIBUTE_CONTENT]: '',
+			[parameters.attributes.content]: '',
 			popover: '',
 		},
 		property: {
@@ -199,241 +107,18 @@ export function createComboboxContent(parameters: CreateContentParameters): Crea
 		},
 	});
 
-	const filter = createComboboxFilter({id, label, type, autocomplete: autocomplete.value});
-	const list = createComboboxList({autocomplete, id, label, multiple, select});
-	const message = createComboboxMessage();
+	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);
-
-	return {element, filter, list, message};
-}
-
-export function createComboboxFilter(parameters: CreateFilterParameters): CreateFilter | undefined {
-	const {autocomplete, id, label, type} = parameters;
-
-	if (type === 'autocomplete') {
-		return;
-	}
-
-	const container = createElement('div', {
-		attribute: {
-			[COMBOBOX_ATTRIBUTE_FILTER]: '',
-		},
-	});
-
-	const element = createComboboxInput({autocomplete, id, label, type, value: ''});
-
-	setAttribute(element, COMBOBOX_ATTRIBUTE_FILTER_INPUT, '');
-
-	container.append(element);
-
-	return {container, element};
-}
-
-export function createComboboxGroup(parameters: CreateGroupParameters): OuiComboboxGroup {
-	const {autocomplete, group, groupOptions, selected} = parameters;
-
-	const element = createElement('li', {
-		aria: {
-			label: group.label,
-		},
-		property: {
-			role: 'group',
-		},
-	});
-
-	const list = createElement('ul', {
-		property: {
-			role: 'none',
-		},
-	});
-
-	const header = createComboboxHeader(group);
-
-	element.append(header, list);
-
-	return {
-		element,
-		header,
-		options: createComboboxOptions({
-			autocomplete,
-			list,
-			selected,
-			group: header.id,
-			options: groupOptions,
-		}),
-	};
-}
-
-export function createComboboxHeader(group: HTMLOptGroupElement): HTMLElement {
-	return createElement('div', {
-		aria: {
-			hidden: true,
-		},
-		attribute: {
-			[COMBOBOX_ATTRIBUTE_HEADER]: '',
-		},
-		property: {
-			id: group.id,
-			textContent: group.label,
-		},
-	});
-}
-
-export function createComboboxInput(parameters: CreateInputParameters): HTMLInputElement {
-	const {autocomplete, id, label, type, value} = parameters;
-
-	return createElement('input', {
-		aria: {
-			autocomplete: autocomplete,
-			controls: `${id}_list`,
-			expanded: type === 'select',
-			haspopup: 'listbox',
-			labelledby: label.id,
-		},
-		attribute: {
-			autocorrect: 'off',
-			autocomplete: 'off',
-			form: '',
-			spellcheck: 'false',
-			type: 'text',
-		},
-		property: {
-			id,
-			value,
-			role: 'combobox',
-		},
-	});
-}
-
-export function createComboboxList(parameters: CreateListParameters): CreateList {
-	const {autocomplete, id, label, multiple, select} = parameters;
-
-	const element = createElement('ul', {
-		aria: {
-			labelledby: label.id,
-			multiselectable: multiple,
-		},
-		attribute: {
-			[COMBOBOX_ATTRIBUTE_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: OuiComboboxGroup[] | undefined;
-
-	for (let childIndex = 0; childIndex < childrenLength; childIndex += 1) {
-		const child = children[childIndex];
-
-		if (child instanceof HTMLOptionElement) {
-			const option = createComboboxOption({
-				autocomplete,
-				index: childIndex,
-				option: child,
-			});
-
-			element.append(option);
-			options.push(option);
-
-			if (child.selected) {
-				selected.push(option);
-			}
-
-			continue;
-		}
-
-		if (!(child instanceof HTMLOptGroupElement)) {
-			continue;
-		}
-
-		const group = createComboboxGroup({
-			autocomplete,
-			selected,
-			group: child,
-			groupOptions: [...child.children] as HTMLOptionElement[],
-		});
-
-		groups ??= [];
-
-		element.append(group.element, ...group.options);
-		groups.push(group);
-		options.push(...group.options);
-	}
-
-	return {element, groups, options, selected};
-}
-
-export function createComboboxMessage(): HTMLElement {
-	return createElement('div', {
-		aria: {
-			live: 'polite',
-		},
-		attribute: {
-			[COMBOBOX_ATTRIBUTE_MESSAGE]: '',
-		},
-		property: {
-			hidden: true,
-			role: 'status',
-		},
-	});
-}
-
-export function createComboboxOption(parameters: CreateOptionParameters): HTMLElement {
-	const {autocomplete, group, option} = parameters;
+	element.append(list.element, message, value);
 
-	return createElement('li', {
-		aria: {
-			selected: !autocomplete.none && option.selected,
-		},
-		attribute: {
-			[COMBOBOX_ATTRIBUTE_OPTION]: '',
-		},
-		data: {
-			group,
-			value: option.value,
-		},
-		property: {
-			id: option.id,
-			role: 'option',
-			textContent: option.textContent,
-		},
-	});
-}
-
-export function createComboboxOptions(parameters: CreateOptionsParameters): HTMLElement[] {
-	const {autocomplete, group, list, options, selected} = parameters;
-
-	const items: HTMLElement[] = [];
-
-	for (let index = 0; index < options.length; index += 1) {
-		const option = options[index];
-
-		const item = createComboboxOption({autocomplete, group, index, option});
-
-		items.push(item);
-
-		if (option.selected) {
-			selected.push(item);
-		}
-
-		list.append(item);
-	}
-
-	return items;
+	return {element, filter, list, message, value};
 }
 
 export function createComboboxSelection(
@@ -471,17 +156,31 @@ export function createComboboxSelectionItem(
 	option: HTMLElement,
 	state?: OuiComboboxState,
 ): OuiComboboxSelectionItem {
+	const optionLabel = option.textContent;
+	const optionValue = getData(option, 'value', false) ?? '';
+
 	const element = createElement('li');
 
 	const localization =
-		state == null ? option.textContent : getComboboxLocalization('remove', state);
+		state == null
+			? option.textContent
+			: getLocalization(
+					state.localizations.global,
+					state.host,
+					'remove',
+					state.localizations.component,
+				);
 
 	const button = createElement('button', {
 		aria: {
-			label:
-				typeof localization === 'function'
-					? localization(option.textContent ?? '', getData(option, 'value', false) ?? '')
-					: localization,
+			label: localize(
+				localization,
+				{
+					label: optionLabel,
+					value: optionValue,
+				},
+				[optionLabel, optionValue],
+			),
 		},
 		attribute: {
 			[COMBOBOX_ATTRIBUTE_SELECTION_ITEM]: '',
@@ -531,44 +230,6 @@ export function createComboboxSelectionItems(parameters: CreateSelectionItemsPar
 	}
 }
 
-export function setComboboxDisabled(state: OuiComboboxState, value: boolean): void {
-	state.filter.element.readOnly = state.readonly || value;
-
-	setProperties('disabled', state, value);
-}
-
-function setProperties(
-	key: 'disabled' | 'readonly' | 'required',
-	state: OuiComboboxState,
-	value: boolean,
-): void {
-	state[key] = value;
-
-	const elements = [state.host, state.anchor.element, state.filter.element];
-	const {length} = elements;
-
-	for (let index = 0; index < length; index += 1) {
-		const element = elements[index];
-
-		setAria(
-			element,
-			key,
-			key !== 'readonly' || !(element instanceof HTMLButtonElement) ? value : undefined,
-		);
-	}
-}
-
-export function setComboboxReadonly(state: OuiComboboxState, value: boolean): void {
-	state.filter.element.readOnly = state.disabled || value;
-
-	setProperties('readonly', state, value);
-}
-
-export function setComboboxRequired(state: OuiComboboxState, value: boolean): void {
-	setProperties('required', state, value);
-	updateComboboxValidity(state);
-}
-
 export function updateComboboxTabindices(state: OuiComboboxState, active?: HTMLElement): void {
 	if (active == null || state.selection == null) {
 		return;
@@ -593,24 +254,8 @@ export function updateComboboxTabindices(state: OuiComboboxState, active?: HTMLE
 	next.button.focus();
 }
 
-export function updateComboboxAnchor(state: OuiComboboxState): void {
-	if (!state.multiple) {
-		return;
-	}
-
-	const localization = getComboboxLocalization('selected', state);
-
-	setAria(
-		state.anchor.element,
-		'label',
-		typeof localization === 'function'
-			? localization(state.options.selected.length)
-			: localization.replace('{amount}', state.options.selected.length.toString()),
-	);
-}
-
 export function updateComboboxAutocomplete(
-	preview: OuiComboboxPreview,
+	preview: OuiListboxPreview,
 	state: OuiComboboxState,
 	active?: HTMLElement,
 ): void {
@@ -644,51 +289,6 @@ export function updateComboboxAutocomplete(
 	}
 }
 
-export function updateComboboxMessage(state: OuiComboboxState, visible: number): void {
-	setAttribute(state.message, COMBOBOX_ATTRIBUTE_HIDDEN, visible > 0 ? '' : undefined);
-
-	if (visible === 0) {
-		const localization = getComboboxLocalization('empty', state);
-
-		state.message.textContent = typeof localization === 'function' ? localization() : localization;
-	} else {
-		const localization = getComboboxLocalization('results', state);
-
-		state.message.textContent =
-			typeof localization === 'function'
-				? localization(visible)
-				: localization.replace('{amount}', visible.toString());
-	}
-
-	state.message.hidden = false;
-}
-
-export function updateComboboxPreview(
-	preview: OuiComboboxPreview,
-	state: OuiComboboxState,
-	active?: HTMLElement,
-): void {
-	const {length} = state.options.all;
-
-	for (let index = 0; index < length; index += 1) {
-		const option = state.options.all[index];
-
-		setAttribute(option, COMBOBOX_ATTRIBUTE_OPTION_ACTIVE, option === active ? '' : undefined);
-	}
-
-	state.active = active;
-
-	setAria(state.filter.element, 'activedescendant', state.floatable.open ? active?.id : undefined);
-
-	if (state.floatable.open) {
-		active?.scrollIntoView(comboboxScrollOptions);
-	}
-
-	if (preview !== 'none') {
-		updateComboboxAutocomplete(preview, state, active);
-	}
-}
-
 export function updateComboboxSelection(
 	state: OuiComboboxState,
 	active: HTMLElement | undefined,
@@ -701,7 +301,7 @@ export function updateComboboxSelection(
 
 	let options = active == null ? [] : [active];
 
-	if (selected != null) {
+	if (added && selected != null) {
 		options = selected;
 
 		const {length} = state.selection.items;
@@ -766,7 +366,12 @@ export function updateComboboxSelectionItems(state: OuiComboboxState): void {
 		return;
 	}
 
-	const localization = getComboboxLocalization('remove', state);
+	const localization = getLocalization(
+		state.localizations.global,
+		state.host,
+		'remove',
+		state.localizations.component,
+	);
 
 	const {length} = state.selection.items;
 
@@ -781,12 +386,20 @@ export function updateComboboxSelectionItems(state: OuiComboboxState): void {
 			continue;
 		}
 
+		const optionLabel = option.textContent;
+		const optionValue = getData(option, 'value', false) ?? '';
+
 		setAria(
 			item.button,
 			'label',
-			typeof localization === 'function'
-				? localization(option?.textContent ?? '', getData(option, 'value', false) ?? '')
-				: localization.replace('{label}', option?.textContent ?? ''),
+			localize(
+				localization,
+				{
+					label: optionLabel,
+					value: optionValue,
+				},
+				[optionLabel, optionValue],
+			),
 		);
 	}
 }