@oscarpalmer/oui 0.35.0 → 0.36.0

package/src/js/combobox/misc.combobox.ts

@@ -1,70 +1,28 @@
-import {getAria} from '@oscarpalmer/toretto/aria';
-import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
-import type {AnyAriaBooleanAttribute} from '@oscarpalmer/toretto/models';
-import type {OuiComboboxElement} from '.';
-import {updateLocalizations} from '../l10n';
-import {COMBOBOX_AUTOCOMPLETES} from './constants.combobox';
-import {
-	updateComboboxAnchor,
-	updateComboboxMessage,
-	updateComboboxSelectionItems,
-} from './dom.combobox';
-import {onComboboxFilter} from './event.combobox';
-import {updateComboboxValidity} from './form.combobox';
+import {updateListboxMessage, updateListboxValueLabel} from '../internal/listbox/listbox.dom';
 import type {
-	OuiComboboxAutoComplete,
-	OuiComboboxAutoCompleteType,
-	OuiComboboxLocalizations,
-	OuiComboboxState,
-} from './models.combobox';
+	OuiListboxAutoComplete,
+	OuiListboxAutoCompleteType,
+	OuiListboxLocalizations,
+} from '../internal/listbox/listbox.model';
+import {getAttributeValue} from '../internal/misc';
+import {OuiLocalizations, updateLocalizations} from '../l10n';
+import {COMBOBOX_AUTOCOMPLETES} from './constants.combobox';
+import {updateComboboxSelectionItems} from './dom.combobox';
+import type {OuiComboboxElement} from './index';
 import {comboboxLocalizations, comboboxStates} from './state.combobox';
 
 // #region Functions
 
-export function generateComboboxIds(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 getComboboxAttributeValue<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 getComboboxAutoComplete(
 	element: OuiComboboxElement,
 	select: boolean,
-): OuiComboboxAutoComplete {
-	let value: OuiComboboxAutoCompleteType;
+): OuiListboxAutoComplete {
+	let value: OuiListboxAutoCompleteType;
 
 	if (select) {
 		value = 'list';
 	} else {
-		value = getComboboxAttributeValue(element, 'autocomplete', COMBOBOX_AUTOCOMPLETES, 'none');
+		value = getAttributeValue(element, 'autocomplete', COMBOBOX_AUTOCOMPLETES, 'none');
 	}
 
 	return {
@@ -76,67 +34,16 @@ export function getComboboxAutoComplete(
 	};
 }
 
-export function getComboboxBooleanAria(
-	element: HTMLElement,
-	attribute: AnyAriaBooleanAttribute,
-): boolean {
-	const value = getAria(element, attribute);
-
-	return value === true || value === 'true';
-}
-
 export function getComboboxId(): string {
 	index += 1;
 
 	return `oui_combobox_${index}`;
 }
 
-export function getComboboxVisibleOptions(state: OuiComboboxState): HTMLElement[] {
-	return state.options.all.filter(option => !option.hidden);
-}
-
 export function hasTextSelection(element: HTMLElement): element is HTMLInputElement {
 	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
 }
 
-export function setComboboxFilter(state: OuiComboboxState, 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;
-
-	onComboboxFilter(type, state);
-}
-
-export function setComboboxLimit(
-	type: 'max' | 'min',
-	state: OuiComboboxState,
-	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);
-
-		updateComboboxValidity(state);
-	}
-}
-
 /**
  * Set combobox localizations for a specific language
  *
@@ -145,7 +52,7 @@ export function setComboboxLimit(
  */
 export function setComboboxLocalizations(
 	language: string,
-	localizations: Partial<OuiComboboxLocalizations>,
+	localizations: Partial<OuiListboxLocalizations>,
 ): void;
 
 /**
@@ -154,25 +61,34 @@ export function setComboboxLocalizations(
  * @param localizations Localizations for one or more languages
  */
 export function setComboboxLocalizations(
-	localizations: Record<string, Partial<OuiComboboxLocalizations>>,
+	localizations: Record<string, Partial<OuiListboxLocalizations>>,
 ): void;
 
 export function setComboboxLocalizations(
-	first: string | Record<string, Partial<OuiComboboxLocalizations>>,
-	second?: Partial<OuiComboboxLocalizations>,
+	first: string | Record<string, Partial<OuiListboxLocalizations>>,
+	second?: Partial<OuiListboxLocalizations>,
+): void {
+	updateComboboxLocalizations(comboboxLocalizations, comboboxLocalizations.values, first, second);
+}
+
+export function updateComboboxLocalizations(
+	instance: OuiLocalizations<OuiListboxLocalizations>,
+	destination: Record<string, Partial<OuiListboxLocalizations>>,
+	first: string | Record<string, Partial<OuiListboxLocalizations>>,
+	second?: Partial<OuiListboxLocalizations>,
 ): void {
 	updateLocalizations(
-		comboboxLocalizations,
+		instance,
 		typeof first === 'string'
 			? {
 					[first]: second!,
 				}
 			: first,
-		comboboxLocalizations.values,
+		destination,
 		() => {
 			for (const state of comboboxStates.set) {
-				updateComboboxAnchor(state);
-				updateComboboxMessage(state, getComboboxVisibleOptions(state).length);
+				updateListboxMessage(state);
+				updateListboxValueLabel(state);
 				updateComboboxSelectionItems(state);
 			}
 		},

package/src/js/combobox/models.combobox.ts

@@ -1,18 +1,13 @@
-import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 import type {OuiFloatable} from '../floatable/floatable.embedded';
-import type {OuiComboboxElement} from './index';
+import type {OuiListboxState, OuiListboxType} from '../internal/listbox/listbox.model';
+
+// #region Types
 
 export type OuiComboboxAnchor = {
 	container?: HTMLElement;
 	element: HTMLElement;
 };
 
-export type OuiComboboxAutoComplete = Record<OuiComboboxAutoCompleteType, boolean> & {
-	value: OuiComboboxAutoCompleteType;
-};
-
-export type OuiComboboxAutoCompleteType = 'both' | 'inline' | 'list' | 'none';
-
 export type OuiComboboxFilter = {
 	element: HTMLInputElement;
 	value: string;
@@ -29,24 +24,11 @@ export type OuiComboboxLabel = {
 	id: string;
 };
 
-export type OuiComboboxLocalizations = {
-	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 OuiComboboxOptions = {
 	all: HTMLElement[];
 	selected: HTMLElement[];
 };
 
-export type OuiComboboxPreview = 'none' | 'set' | 'typed';
-
 export type OuiComboboxSelection = {
 	container: HTMLElement;
 	items: OuiComboboxSelectionItem[];
@@ -58,37 +40,15 @@ export type OuiComboboxSelectionItem = {
 };
 
 export type OuiComboboxState = {
-	active?: HTMLElement;
 	anchor: OuiComboboxAnchor;
-	autocomplete: OuiComboboxAutoComplete;
-	content: HTMLElement;
-	disabled: boolean;
-	filter: OuiComboboxFilter;
 	floatable: OuiFloatable;
-	groups?: OuiComboboxGroup[];
-	host: OuiComboboxElement;
-	id: string;
-	internals: ElementInternals;
-	label: OuiComboboxLabel;
-	listeners: RemovableEventListener[];
-	localizations: Record<string, Partial<OuiComboboxLocalizations>>;
-	max?: number;
-	min?: number;
-	message: HTMLElement;
-	name: string;
-	multiple: boolean;
-	options: OuiComboboxOptions;
-	readonly: boolean;
-	required: boolean;
-	select: HTMLSelectElement;
 	selection?: OuiComboboxSelection;
-	type: OuiComboboxType;
-	values: OuiComboboxValues;
-};
-
-export type OuiComboboxType = 'autocomplete' | 'select';
+	type: OuiListboxType;
+} & OuiListboxState;
 
 export type OuiComboboxValues = {
 	current: string[];
 	initial: string[];
 };
+
+// #endregion

package/src/js/combobox/state.combobox.ts

@@ -1,90 +1,41 @@
+import {noop} from '@oscarpalmer/atoms/function';
 import {setAria} from '@oscarpalmer/toretto/aria';
-import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
+import {setAttributes} from '@oscarpalmer/toretto/attribute';
 import {getData} from '@oscarpalmer/toretto/data';
 import {on} from '@oscarpalmer/toretto/event';
 import {createEmbeddedFloatable} from '../floatable/floatable.embedded';
+import {LISTBOX_TYPES} from '../internal/listbox/listbox.constants';
+import {generateListboxIds} from '../internal/listbox/listbox.misc';
+import type {
+	OuiListboxCallbacks,
+	OuiListboxLocalizations,
+	OuiListboxStates,
+} from '../internal/listbox/listbox.model';
+import {initializeListboxState} from '../internal/listbox/listbox.state';
+import {getAttributeValue, getBooleanAriaValue} from '../internal/misc';
 import {getLocalizations} from '../l10n';
+import {COMBOBOX_ATTRIBUTES, COMBOBOX_MESSAGES} from './constants.combobox';
+import {createComboboxAnchor, createComboboxContent} from './dom.combobox';
 import {
-	COMBOBOX_MESSAGE_LABEL,
-	COMBOBOX_MESSAGE_SELECT,
-	COMBOBOX_TYPES,
-} from './constants.combobox';
-import {filterComboboxOptions} from './data.combobox';
-import {
-	createComboboxAnchor,
-	createComboboxContent,
-	setComboboxDisabled,
-	setComboboxReadonly,
-	setComboboxRequired,
-	updateComboboxMessage,
-	updateComboboxPreview,
-	updateComboboxSelectionItems,
-} from './dom.combobox';
-import {onComboboxClickContent, onComboboxFocusout} from './event.combobox';
-import {updateComboboxForm} from './form.combobox';
+	onComboboxActivation,
+	onComboboxApply,
+	onComboboxEnter,
+	onComboboxEscape,
+	onComboboxFilter,
+	onComboboxNavigation,
+	onComboboxPreview,
+	onComboboxSelection,
+	onComboboxTab,
+	onComboboxToggle,
+	preventComboboxActivation,
+	skipComboboxNavigation,
+} from './event.combobox';
 import type {OuiComboboxElement} from './index';
-import {
-	generateComboboxIds,
-	getComboboxAttributeValue,
-	getComboboxAutoComplete,
-	getComboboxBooleanAria,
-	getComboboxId,
-	getComboboxVisibleOptions,
-	setComboboxLimit,
-} from './misc.combobox';
-import type {OuiComboboxLocalizations, OuiComboboxState} from './models.combobox';
+import {getComboboxAutoComplete, getComboboxId} from './misc.combobox';
+import type {OuiComboboxState} from './models.combobox';
 
 // #region Functions
 
-export function attachCombobox(state: OuiComboboxState): void {
-	const {anchor, content, filter, label, listeners, select} = state;
-
-	label.element.htmlFor = filter.element.id;
-	label.element.id = `${state.id}_label`;
-
-	select.hidden = true;
-
-	select.insertAdjacentElement('afterend', anchor.container ?? anchor.element);
-	(anchor.container ?? anchor.element).insertAdjacentElement('afterend', content);
-
-	select.remove();
-
-	state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.element, content, {
-		position: 'below-start',
-		reusable: false,
-	});
-
-	state.floatable.update();
-
-	listeners.push(
-		on(state.host, 'focusout', () => {
-			setTimeout(() => {
-				onComboboxFocusout(state);
-			});
-		}),
-		on(content, 'click', event => {
-			onComboboxClickContent(event, content);
-		}),
-		on(content, 'toggle', () => {
-			setAria(anchor.element, 'expanded', state.floatable.open);
-
-			setAria(
-				filter.element,
-				'activedescendant',
-				state.floatable.open ? state.active?.id : undefined,
-			);
-
-			if (state.floatable.open) {
-				filter.element.focus();
-			}
-		}),
-	);
-
-	comboboxStates.map.set(state.host, state);
-	comboboxStates.map.set(state.content, state);
-	comboboxStates.set.add(state);
-}
-
 export function createComboboxState(
 	element: OuiComboboxElement,
 	internals: ElementInternals,
@@ -92,45 +43,58 @@ export function createComboboxState(
 	const select = element.querySelector('select');
 
 	if (select == null || select.id === '') {
-		throw new Error(COMBOBOX_MESSAGE_SELECT);
+		throw new Error(COMBOBOX_MESSAGES.select);
 	}
 
 	const label = element.querySelector(`label[for="${select.id}"]`) as HTMLLabelElement;
 
 	if (label == null) {
-		throw new Error(COMBOBOX_MESSAGE_LABEL);
+		throw new Error(COMBOBOX_MESSAGES.label);
 	}
 
 	element.id = select.id;
 
-	setAttribute(element, 'name', select.name === '' ? select.id : select.name);
-
-	const disabled = getComboboxBooleanAria(element, 'disabled') || select.disabled;
+	const disabled = getBooleanAriaValue(element, 'disabled') || select.disabled;
 	const multiple = element.multiple || select.multiple;
-	const readonly = getComboboxBooleanAria(element, 'readonly');
-	const required = getComboboxBooleanAria(element, 'required') || select.required;
+	const readonly = getBooleanAriaValue(element, 'readonly');
+	const required = getBooleanAriaValue(element, 'required') || select.required;
 
 	const id = getComboboxId();
-	const type = multiple
-		? 'select'
-		: getComboboxAttributeValue(element, 'type', COMBOBOX_TYPES, 'select');
+	const type = multiple ? 'select' : getAttributeValue(element, 'type', LISTBOX_TYPES, 'select');
 
 	const autocomplete = getComboboxAutoComplete(element, type === 'select');
 
+	setAttributes(element, {
+		autocomplete: autocomplete.value,
+		name: select.name === '' ? select.id : select.name,
+	});
+
 	const labelId = label.id;
 
 	label.htmlFor = id;
 	label.id = `${id}_label`;
 
-	generateComboboxIds(id, select);
+	generateListboxIds(id, select);
 
-	const anchor = createComboboxAnchor({autocomplete, id, label, multiple, select, type});
-	const content = createComboboxContent({autocomplete, id, label, multiple, select, type});
+	const parameters = {
+		autocomplete,
+		element,
+		id,
+		label,
+		multiple,
+		select,
+		type,
+		attributes: COMBOBOX_ATTRIBUTES,
+		listbox: false,
+	};
+
+	const anchor = createComboboxAnchor(parameters);
+	const content = createComboboxContent(parameters);
+
+	const {selected} = content.list.options;
 
 	const values =
-		content.list.selected.length === 0
-			? ['']
-			: content.list.selected.map(option => getData(option, 'value', false) ?? '');
+		selected.length === 0 ? [''] : selected.map(option => getData(option, 'value', false) ?? '');
 
 	const state: OuiComboboxState = {
 		autocomplete,
@@ -142,12 +106,15 @@ export function createComboboxState(
 		required,
 		select,
 		type,
+		active: selected[0],
 		anchor: {
 			container: anchor.container,
 			element: anchor.element,
 		},
-		active: content.list.selected[0],
+		attributes: COMBOBOX_ATTRIBUTES,
+		callbacks: comboboxCallbacks as OuiComboboxState['callbacks'],
 		content: content.element,
+		elements: [element, anchor.element, content.filter?.element],
 		filter: {
 			element: content.filter?.element ?? (anchor.element as HTMLInputElement),
 			value: '',
@@ -159,51 +126,66 @@ export function createComboboxState(
 			element: label,
 			id: labelId,
 		},
+		list: content.list.element,
+		listbox: false,
 		listeners: [],
-		localizations: {},
+		localizations: {
+			component: {},
+			global: comboboxLocalizations,
+		},
 		message: content.message,
 		name: element.name,
 		options: {
-			all: content.list.options,
-			selected: content.list.selected,
+			selected,
+			all: content.list.options.all,
 		},
 		selection: anchor.selection,
 		values: {
 			current: values.slice(),
 			initial: values.slice(),
+			label: content.value,
 		},
 	};
 
-	attachCombobox(state);
+	return initializeListboxState(state, comboboxStates, onAttachCombobox);
+}
 
-	setComboboxDisabled(state, disabled);
-	setComboboxLimit('max', state, getAttribute(element, 'max'));
-	setComboboxLimit('min', state, getAttribute(element, 'min'));
-	setComboboxReadonly(state, readonly);
-	setComboboxRequired(state, required);
+export function onAttachCombobox(state: OuiComboboxState): void {
+	const {anchor, content, filter, select} = state;
 
-	filterComboboxOptions(state);
+	select.hidden = true;
 
-	if (content.list.selected.length > 0) {
-		updateComboboxPreview('set', state, content.list.selected[0]);
-	}
+	select.insertAdjacentElement('afterend', anchor.container ?? anchor.element);
+	(anchor.container ?? anchor.element).insertAdjacentElement('afterend', content);
 
-	updateComboboxForm(state, state.values.current, false);
-	updateComboboxMessage(state, getComboboxVisibleOptions(state).length);
-	updateComboboxSelectionItems(state);
+	select.remove();
 
-	return state;
-}
+	state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.element, content, {
+		position: 'below-start',
+		reusable: false,
+	});
 
-export function detachCombobox(state: OuiComboboxState): void {
-	const {content, floatable, host, label, select} = state;
+	state.floatable.update();
 
-	const listeners = state.listeners.splice(0);
-	const {length} = listeners;
+	state.listeners.push(
+		on(content, 'toggle', () => {
+			setAria(anchor.element, 'expanded', state.floatable.open);
 
-	for (let index = 0; index < length; index += 1) {
-		listeners[index]();
-	}
+			setAria(
+				filter.element,
+				'activedescendant',
+				state.floatable.open ? state.active?.id : undefined,
+			);
+
+			if (state.floatable.open) {
+				filter.element.focus();
+			}
+		}),
+	);
+}
+
+export function onDetachCombobox(state: OuiComboboxState): void {
+	const {content, floatable, label, select} = state;
 
 	floatable.destroy();
 
@@ -218,17 +200,34 @@ export function detachCombobox(state: OuiComboboxState): void {
 	label.element.id = state.label.id;
 
 	select.hidden = false;
-
-	comboboxStates.map.delete(host);
-	comboboxStates.map.delete(content);
-	comboboxStates.set.delete(state);
 }
 
 // #endregion
 
 // #region Variables
 
-export const comboboxLocalizations = getLocalizations<OuiComboboxLocalizations>({
+const comboboxCallbacks: OuiListboxCallbacks<OuiComboboxState> = {
+	data: {
+		onApply: onComboboxApply,
+		onFilter: onComboboxFilter,
+		onForm: noop,
+		onPreview: onComboboxPreview,
+		onToggle: onComboboxToggle,
+	},
+	keydown: {
+		onActivation: onComboboxActivation,
+		onEnter: onComboboxEnter,
+		onEscape: onComboboxEscape,
+		onNavigation: onComboboxNavigation,
+		onSelection: onComboboxSelection,
+		onTab: onComboboxTab,
+		onToggle: onComboboxToggle,
+		preventActivation: preventComboboxActivation,
+		skipNavigation: skipComboboxNavigation,
+	},
+};
+
+export const comboboxLocalizations = getLocalizations<OuiListboxLocalizations>({
 	empty: 'No results found',
 	input: 'Please enter a value',
 	invalid: 'Please select an option from the list',
@@ -239,9 +238,9 @@ export const comboboxLocalizations = getLocalizations<OuiComboboxLocalizations>(
 	selected: amount => `${amount} selected`,
 });
 
-export const comboboxStates = {
-	map: new WeakMap<HTMLElement, OuiComboboxState>(),
-	set: new Set<OuiComboboxState>(),
+export const comboboxStates: OuiListboxStates<OuiComboboxState> = {
+	map: new WeakMap(),
+	set: new Set(),
 };
 
 // #endregion

package/src/js/index.ts

@@ -5,6 +5,7 @@ export * from './combobox/index';
 export * from './dialog';
 export * from './floatable/floatable.standalone';
 export * from './focus-trap/focus-trap.standalone';
+export * from './listbox/index';
 export * from './movable/movable.standalone';
 export * from './popover';
 export * from './resizable/resizable.standalone';

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

@@ -0,0 +1,25 @@
+import type {OuiListboxType} from './listbox.model';
+
+// #region Variables
+
+const keysActivation = new Set([' ', 'Backspace', 'Delete', 'Enter']);
+
+const keysNavigation = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
+
+const keysSelection = new Set(['ArrowRight', 'End']);
+
+export const LISTBOX_KEYS = {
+	activation: keysActivation,
+	navigation: keysNavigation,
+	selection: keysSelection,
+};
+
+export const LISTBOX_TYPES = new Set<OuiListboxType>(['autocomplete', 'select']);
+
+export const listboxScrollOptions: ScrollIntoViewOptions = {
+	behavior: 'auto',
+	block: 'nearest',
+	inline: 'nearest',
+};
+
+// #endregion