@oscarpalmer/oui 0.35.0 → 0.36.0

package/src/js/combobox/event.combobox.ts

@@ -1,33 +1,49 @@
 import {clamp} from '@oscarpalmer/atoms/number';
-import {dispatch, findAncestor, getData} from '@oscarpalmer/toretto';
+import {findAncestor, getData} from '@oscarpalmer/toretto';
 import {on} from '@oscarpalmer/toretto/event';
+import {LISTBOX_KEYS} from '../internal/listbox/listbox.constants';
+import {
+	applyListboxSelection,
+	filterListbox,
+	filterListboxOption,
+	filterListboxOptions,
+	toggleListboxOption,
+} from '../internal/listbox/listbox.data';
+import {updateListboxPreview} from '../internal/listbox/listbox.dom';
+import {processListboxKeydown} from '../internal/listbox/listbox.event';
+import type {OuiListboxPreview} from '../internal/listbox/listbox.model';
 import {
 	COMBOBOX_ATTRIBUTE_SELECTION_ITEM,
-	COMBOBOX_KEYS_ACTIVATION,
-	COMBOBOX_KEYS_NAVIGATION,
-	COMBOBOX_KEYS_SELECTION,
-	COMBOBOX_SELECTOR_ANCHOR,
-	COMBOBOX_SELECTOR_OPTION,
-	COMBOBOX_SELECTOR_SELECTION_ITEM,
+	COMBOBOX_SELECTORS,
 	COMBOBOX_TAGNAME,
 } from './constants.combobox';
 import {
-	applyComboboxSelection,
-	filterComboboxOption,
-	filterComboboxOptions,
-	toggleComboboxOption,
-} from './data.combobox';
-import {updateComboboxPreview, updateComboboxTabindices} from './dom.combobox';
+	updateComboboxAutocomplete,
+	updateComboboxSelection,
+	updateComboboxTabindices,
+} from './dom.combobox';
 import type {OuiComboboxElement} from './index';
-import {getComboboxVisibleOptions, hasTextSelection} from './misc.combobox';
-import type {OuiComboboxPreview, OuiComboboxState} from './models.combobox';
+import {hasTextSelection} from './misc.combobox';
+import type {OuiComboboxState} from './models.combobox';
 import {comboboxStates} from './state.combobox';
 
 // #region Functions
 
-export function onComboboxClickContent(event: PointerEvent, content: HTMLElement): void {
-	const state = comboboxStates.map.get(content);
+export function onComboboxActivation(state: OuiComboboxState): void {
+	state.floatable.show();
+}
+
+export function onComboboxApply(
+	state: OuiComboboxState,
+	option: HTMLElement | undefined,
+	_: string[],
+	added: boolean,
+	selected?: HTMLElement[],
+): void {
+	updateComboboxSelection(state, option, added, selected);
+}
 
+export function onComboboxClickContent(event: PointerEvent, state: OuiComboboxState): void {
 	if (state == null) {
 		return;
 	}
@@ -36,25 +52,31 @@ export function onComboboxClickContent(event: PointerEvent, content: HTMLElement
 		return;
 	}
 
-	const option = findAncestor(event, COMBOBOX_SELECTOR_OPTION);
+	const option = findAncestor(event, COMBOBOX_SELECTORS.option);
 
 	if (!(option instanceof HTMLElement)) {
 		state.filter.element.focus();
 	} else if (state.readonly) {
-		updateComboboxPreview('set', state, option);
+		onComboboxPreview('set', state, option);
 	} else {
-		toggleComboboxOption(state, option);
+		toggleListboxOption(state, option);
 	}
 }
 
-export function onComboboxClickDocument(event: PointerEvent): void {
-	const combobox = findAncestor(event, COMBOBOX_TAGNAME) as OuiComboboxElement | null;
+function onComboboxClickDocument(event: PointerEvent): void {
+	const combobox = findAncestor(event, COMBOBOX_TAGNAME);
 	const state = comboboxStates.map.get(combobox!);
 
 	if (combobox == null || state == null) {
 		return;
 	}
 
+	if (findAncestor(event, COMBOBOX_SELECTORS.content) != null) {
+		onComboboxClickContent(event, state);
+
+		return;
+	}
+
 	const label = findAncestor(event, 'label');
 
 	if (label != null) {
@@ -81,13 +103,13 @@ export function onComboboxClickDocument(event: PointerEvent): void {
 		} else if (state.readonly) {
 			updateComboboxTabindices(state, option);
 		} else {
-			toggleComboboxOption(state, option);
+			toggleListboxOption(state, option);
 		}
 
 		return;
 	}
 
-	const anchor = findAncestor(event, COMBOBOX_SELECTOR_ANCHOR);
+	const anchor = findAncestor(event, COMBOBOX_SELECTORS.anchor);
 
 	if (anchor != null && !state.disabled) {
 		state.floatable.show();
@@ -102,9 +124,9 @@ export function onComboboxEnter(state: OuiComboboxState): void {
 	}
 
 	if (hasTextSelection(state.anchor.element)) {
-		onComboboxSelection(state);
+		onComboboxSelection(state, true);
 	} else {
-		toggleComboboxOption(state, state.active);
+		toggleListboxOption(state, state.active);
 	}
 }
 
@@ -113,66 +135,48 @@ export function onComboboxEscape(state: OuiComboboxState): void {
 }
 
 export function onComboboxFilter(
-	type: InputEvent['inputType'],
+	preview: OuiListboxPreview,
 	state: OuiComboboxState,
-	manual?: boolean,
+	update: boolean,
+	active?: HTMLElement,
 	emit?: boolean,
 ): void {
-	if (state.disabled || state.readonly) {
-		return;
-	}
-
-	const diff = state.filter.value !== state.filter.element.value;
-
-	if (!state.autocomplete.inline && state.filter.element.value.length > 0 && !(manual ?? false)) {
-		state.floatable.show();
+	if (state.autocomplete.none) {
+		applyListboxSelection({
+			state,
+			added: false,
+			emit: (emit ?? true) && update,
+		});
+	} else {
+		updateListboxPreview(preview, state, active);
 	}
+}
 
-	const option = state.autocomplete.none
-		? (state.active ?? state.options.all[0])
-		: filterComboboxOptions(state);
-
-	let update: OuiComboboxPreview | undefined;
-
-	if (type.includes('delete')) {
-		update = 'none';
-	} else if (type.includes('insert')) {
-		update = 'typed';
-	}
+export function onComboboxFocusout(event: FocusEvent): void {
+	setTimeout(() => {
+		const combobox = findAncestor(event, COMBOBOX_TAGNAME);
+		const state = comboboxStates.map.get(combobox!);
 
-	if (update != null) {
-		if (state.autocomplete.none) {
-			applyComboboxSelection({state, added: false, emit: (emit ?? true) && diff});
-		} else {
-			updateComboboxPreview(update, state, option);
+		if (
+			combobox == null ||
+			state == null ||
+			state.disabled ||
+			state.readonly ||
+			state.type === 'select' ||
+			state.host === document.activeElement ||
+			state.host.contains(document.activeElement)
+		) {
+			return;
 		}
-	}
-
-	if (diff) {
-		state.filter.value = state.filter.element.value;
-
-		dispatch(state.host, 'input');
-	}
-}
 
-export function onComboboxFocusout(state: OuiComboboxState): void {
-	if (
-		state.disabled ||
-		state.readonly ||
-		state.type === 'select' ||
-		state.host === document.activeElement ||
-		state.host.contains(document.activeElement)
-	) {
-		return;
-	}
+		const option = filterListboxOption(state, state.filter.element.value, true);
 
-	const option = filterComboboxOption(state, state.filter.element.value, true);
-
-	applyComboboxSelection({
-		option,
-		state,
-		added: false,
-		selected: option == null ? [] : [option],
+		applyListboxSelection({
+			option,
+			state,
+			added: false,
+			selected: option == null ? [] : [option],
+		});
 	});
 }
 
@@ -181,7 +185,7 @@ export function onComboboxInput(event: InputEvent): void {
 	const state = comboboxStates.map.get(combobox!);
 
 	if (combobox != null && state != null && event.target === state.filter.element) {
-		onComboboxFilter(event.inputType, state);
+		filterListbox(event.inputType, state);
 	}
 }
 
@@ -193,84 +197,12 @@ export function onComboboxKeydown(event: KeyboardEvent): void {
 		return;
 	}
 
-	const item = findAncestor(event, COMBOBOX_SELECTOR_SELECTION_ITEM);
+	const item = findAncestor(event, COMBOBOX_SELECTORS.selectionItem);
 
 	if (item instanceof HTMLElement) {
 		onComboboxKeydownSelection(event, state, item);
-
-		return;
-	}
-
-	onComboboxKeydownFilter(event, state);
-}
-
-function onComboboxKeydownFilter(event: KeyboardEvent, state: OuiComboboxState): void {
-	const ignore = state.disabled || state.readonly;
-	const isSelect = state.type === 'select';
-
-	let preventDefault = ignore;
-
-	switch (true) {
-		case event.key === ' ': {
-			if (!state.disabled) {
-				state.floatable.show();
-			}
-
-			break;
-		}
-
-		case event.key === 'Enter': {
-			preventDefault = state.floatable.open;
-
-			if (preventDefault) {
-				onComboboxEnter(state);
-			} else if (!ignore && state.type === 'select') {
-				state.floatable.show();
-			} else if (!ignore) {
-				state.internals.form?.requestSubmit();
-			}
-
-			break;
-		}
-
-		case event.key === 'Escape': {
-			preventDefault = false;
-
-			onComboboxEscape(state);
-
-			break;
-		}
-
-		case !isSelect && COMBOBOX_KEYS_SELECTION.has(event.key): {
-			if (!ignore && hasTextSelection(state.anchor.element)) {
-				onComboboxSelection(state);
-			}
-
-			break;
-		}
-
-		case COMBOBOX_KEYS_NAVIGATION.has(event.key): {
-			if (!state.disabled) {
-				onComboboxNavigation(event, state);
-			}
-
-			break;
-		}
-
-		default: {
-			preventDefault = false;
-
-			if (event.key === 'Tab') {
-				onComboboxTab(state);
-			}
-
-			break;
-		}
-	}
-
-	if (preventDefault) {
-		event.preventDefault();
-		event.stopPropagation();
+	} else {
+		processListboxKeydown(event, state);
 	}
 }
 
@@ -279,7 +211,7 @@ export function onComboboxKeydownSelection(
 	state: OuiComboboxState,
 	item: HTMLElement,
 ): void {
-	if (COMBOBOX_KEYS_ACTIVATION.has(event.key)) {
+	if (LISTBOX_KEYS.activation.has(event.key)) {
 		event.preventDefault();
 
 		onComboboxRemoveSelection(state, item);
@@ -338,67 +270,12 @@ export function onComboboxKeydownSelection(
 	}
 }
 
-export function onComboboxNavigation(event: KeyboardEvent, state: OuiComboboxState): void {
-	let skip = false;
-
-	if (!state.floatable.open) {
-		skip = true;
-
-		state.floatable.show();
-	}
-
-	const visible = getComboboxVisibleOptions(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 'End':
-				index = visible.length - 1;
-				break;
-
-			case 'Home':
-				index = 0;
-				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: OuiComboboxPreview;
-
-	if (state.type === 'autocomplete' && (state.autocomplete.both || state.autocomplete.inline)) {
-		preview = 'set';
-	} else {
-		preview = 'none';
-	}
-
-	updateComboboxPreview(preview, state, next ?? state.active ?? visible[0]);
+export function onComboboxPreview(
+	preview: OuiListboxPreview,
+	state: OuiComboboxState,
+	active?: HTMLElement,
+): void {
+	updateComboboxAutocomplete(preview, state, active);
 }
 
 export function onComboboxRemoveSelection(state: OuiComboboxState, item: HTMLElement): void {
@@ -411,15 +288,27 @@ export function onComboboxRemoveSelection(state: OuiComboboxState, item: HTMLEle
 	);
 
 	if (option != null) {
-		toggleComboboxOption(state, option);
+		toggleListboxOption(state, option);
 	}
 }
 
-export function onComboboxSelection(state: OuiComboboxState): void {
+export function onComboboxNavigation(
+	preview: OuiListboxPreview,
+	state: OuiComboboxState,
+	active?: HTMLElement,
+): void {
+	updateListboxPreview(preview, state, active);
+}
+
+export function onComboboxSelection(state: OuiComboboxState, hasSelection?: boolean): void {
+	if (!(hasSelection ?? hasTextSelection(state.anchor.element))) {
+		return;
+	}
+
 	state.filter.value =
 		state.anchor.element === state.filter.element ? state.filter.element.value : '';
 
-	toggleComboboxOption(state, filterComboboxOptions(state) ?? state.active);
+	toggleListboxOption(state, filterListboxOptions(state) ?? state.active);
 }
 
 export function onComboboxTab(state: OuiComboboxState): void {
@@ -437,12 +326,34 @@ export function onComboboxTab(state: OuiComboboxState): void {
 	});
 }
 
+export function onComboboxToggle(state: OuiComboboxState): void {
+	if (!state.multiple) {
+		state.floatable.hide();
+	}
+}
+
+export function preventComboboxActivation(state: OuiComboboxState): boolean {
+	return state.floatable.open;
+}
+
+export function skipComboboxNavigation(state: OuiComboboxState): boolean {
+	if (state.floatable.open) {
+		return false;
+	}
+
+	state.floatable.show();
+
+	return true;
+}
+
 // #endregion
 
 // #region Initialization
 
 on(document, 'click', onComboboxClickDocument);
 
+on(document, 'focusout', onComboboxFocusout);
+
 on(document, 'input', onComboboxInput, {
 	passive: false,
 });

package/src/js/combobox/index.ts

@@ -1,16 +1,23 @@
 import {parse} from '@oscarpalmer/atoms/string';
 import {getAttribute} from '@oscarpalmer/toretto/attribute';
+import {setListboxValue, setListboxValues} from '../internal/listbox/listbox.data';
+import {
+	setListboxDisabled,
+	setListboxFilter,
+	setListboxLimit,
+	setListboxReadonly,
+	setListboxRequired,
+} from '../internal/listbox/listbox.misc';
+import type {OuiListboxLocalizations, OuiListboxType} from '../internal/listbox/listbox.model';
+import {attachListbox, detachListbox} from '../internal/listbox/listbox.state';
 import {updateLocalizations} from '../l10n';
 import {COMBOBOX_TAGNAME} from './constants.combobox';
-import {setComboboxValue, setComboboxValues} from './data.combobox';
-import {setComboboxDisabled, setComboboxReadonly, setComboboxRequired} from './dom.combobox';
-import {setComboboxFilter, setComboboxLimit} from './misc.combobox';
-import type {OuiComboboxLocalizations, OuiComboboxState, OuiComboboxType} from './models.combobox';
+import type {OuiComboboxState} from './models.combobox';
 import {
-	attachCombobox,
-	comboboxLocalizations,
+	comboboxStates,
 	createComboboxState,
-	detachCombobox,
+	onAttachCombobox,
+	onDetachCombobox,
 } from './state.combobox';
 
 // #region Types
@@ -44,7 +51,7 @@ export class OuiComboboxElement extends HTMLElement {
 	 */
 	set disabled(value: boolean) {
 		if (typeof value === 'boolean' && value !== this.disabled) {
-			setComboboxDisabled(this.#state, value);
+			setListboxDisabled(this.#state, value);
 		}
 	}
 
@@ -59,7 +66,7 @@ export class OuiComboboxElement extends HTMLElement {
 	 * Set the filter value
 	 */
 	set filter(value: string) {
-		setComboboxFilter(this.#state, value);
+		setListboxFilter(this.#state, value);
 	}
 
 	/**
@@ -73,7 +80,7 @@ export class OuiComboboxElement extends HTMLElement {
 	 * Set the maximum number of selected options
 	 */
 	set max(value: number) {
-		setComboboxLimit('max', this.#state, value);
+		setListboxLimit('max', this.#state, value);
 	}
 
 	/**
@@ -87,7 +94,7 @@ export class OuiComboboxElement extends HTMLElement {
 	 * Set the minimum number of selected options
 	 */
 	set min(value: number) {
-		setComboboxLimit('min', this.#state, value);
+		setListboxLimit('min', this.#state, value);
 	}
 
 	/**
@@ -116,7 +123,7 @@ export class OuiComboboxElement extends HTMLElement {
 	 */
 	set readonly(value: boolean) {
 		if (typeof value === 'boolean' && value !== this.readonly) {
-			setComboboxReadonly(this.#state, value);
+			setListboxReadonly(this.#state, value);
 		}
 	}
 
@@ -132,7 +139,7 @@ export class OuiComboboxElement extends HTMLElement {
 	 */
 	set required(value: boolean) {
 		if (typeof value === 'boolean' && value !== this.required) {
-			setComboboxRequired(this.#state, value);
+			setListboxRequired(this.#state, value);
 		}
 	}
 
@@ -146,7 +153,7 @@ export class OuiComboboxElement extends HTMLElement {
 	/**
 	 * Type of combobox
 	 */
-	get type(): OuiComboboxType {
+	get type(): OuiListboxType {
 		return this.#state.type;
 	}
 
@@ -161,7 +168,7 @@ export class OuiComboboxElement extends HTMLElement {
 	 * Set the value
 	 */
 	set value(value: unknown) {
-		setComboboxValue(this.#state, value);
+		setListboxValue(this.#state, value);
 	}
 
 	/**
@@ -174,8 +181,8 @@ export class OuiComboboxElement extends HTMLElement {
 	/**
 	 * Set the values
 	 */
-	set values(value: unknown[]) {
-		setComboboxValues(this.#state, value);
+	set values(values: unknown[]) {
+		setListboxValues(this.#state, values);
 	}
 
 	constructor() {
@@ -196,7 +203,7 @@ export class OuiComboboxElement extends HTMLElement {
 
 			case 'max':
 			case 'min':
-				setComboboxLimit(name, this.#state, value);
+				setListboxLimit(name, this.#state, value);
 				break;
 
 			case 'value':
@@ -212,20 +219,20 @@ export class OuiComboboxElement extends HTMLElement {
 	 * Clear all selected options
 	 */
 	clear(): void {
-		setComboboxValues(this.#state, []);
+		setListboxValues(this.#state, []);
 	}
 
 	connectedCallback(): void {
 		if (this.#state == null) {
 			this.#initialize();
 		} else {
-			attachCombobox(this.#state);
+			attachListbox(this.#state, comboboxStates, onAttachCombobox);
 		}
 	}
 
 	disconnectedCallback(): void {
 		if (this.#state != null) {
-			detachCombobox(this.#state);
+			detachListbox(this.#state, comboboxStates, onDetachCombobox);
 		}
 	}
 
@@ -234,7 +241,7 @@ export class OuiComboboxElement extends HTMLElement {
 	}
 
 	formResetCallback(): void {
-		setComboboxValues(this.#state, this.#state.values.initial, false);
+		setListboxValues(this.#state, this.#state.values.initial);
 	}
 
 	formStateRestoreCallback(state: string | File | FormData, reason: unknown): void {
@@ -251,7 +258,7 @@ export class OuiComboboxElement extends HTMLElement {
 		if (this.#state == null) {
 			this.#restored = parsed;
 		} else {
-			setComboboxValues(this.#state, parsed);
+			setListboxValues(this.#state, parsed);
 		}
 	}
 
@@ -261,27 +268,27 @@ export class OuiComboboxElement extends HTMLElement {
 	 * @param language Language code
 	 * @param localizations Localizations for language
 	 */
-	setLocalizations(language: string, localizations: Partial<OuiComboboxLocalizations>): void;
+	setLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
 
 	/**
 	 * Set combobox localizations for one or more languages
 	 *
 	 * @param localizations Localizations for one or more languages
 	 */
-	setLocalizations(localizations: Record<string, Partial<OuiComboboxLocalizations>>): void;
+	setLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
 
 	setLocalizations(
-		first: string | Record<string, Partial<OuiComboboxLocalizations>>,
-		second?: Partial<OuiComboboxLocalizations>,
+		first: string | Record<string, Partial<OuiListboxLocalizations>>,
+		second?: Partial<OuiListboxLocalizations>,
 	): void {
 		updateLocalizations(
-			comboboxLocalizations,
+			this.#state.localizations.global,
 			typeof first === 'string'
 				? {
 						[first]: second!,
 					}
 				: first,
-			this.#state.localizations,
+			this.#state.localizations.component,
 		);
 	}
 
@@ -291,7 +298,7 @@ export class OuiComboboxElement extends HTMLElement {
 		this.#state = createComboboxState(this, this.#internals);
 
 		if (this.#restored != null) {
-			setComboboxValues(this.#state, this.#restored, false);
+			setListboxValues(this.#state, this.#restored);
 
 			this.#restored = undefined;
 		}