@oscarpalmer/oui 0.37.0 → 0.39.0

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

@@ -1,365 +0,0 @@
-import {clamp} from '@oscarpalmer/atoms/number';
-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_SELECTORS,
-	COMBOBOX_TAGNAME,
-} from './constants.combobox';
-import {
-	updateComboboxAutocomplete,
-	updateComboboxSelection,
-	updateComboboxTabindices,
-} from './dom.combobox';
-import type {OuiComboboxElement} from './index';
-import {hasTextSelection} from './misc.combobox';
-import type {OuiComboboxState} from './models.combobox';
-import {comboboxStates} from './state.combobox';
-
-// #region Functions
-
-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;
-	}
-
-	if (state.disabled) {
-		return;
-	}
-
-	const option = findAncestor(event, COMBOBOX_SELECTORS.option);
-
-	if (!(option instanceof HTMLElement)) {
-		state.filter.element.focus();
-	} else if (state.readonly) {
-		onComboboxPreview('set', state, option);
-	} else {
-		toggleListboxOption(state, option);
-	}
-}
-
-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) {
-		if (label === state.label.element && combobox.type === 'select') {
-			state.anchor.element.focus();
-
-			if (!state.disabled) {
-				state.floatable.show();
-			}
-		}
-
-		return;
-	}
-
-	const selection = findAncestor(event, `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`);
-
-	if (selection != null) {
-		const option = state.options.selected.find(
-			option => option.id === getData(selection, 'option', false),
-		);
-
-		if (state.disabled) {
-			state.anchor.element.focus();
-		} else if (state.readonly) {
-			updateComboboxTabindices(state, option);
-		} else {
-			toggleListboxOption(state, option);
-		}
-
-		return;
-	}
-
-	const anchor = findAncestor(event, COMBOBOX_SELECTORS.anchor);
-
-	if (anchor != null && !state.disabled) {
-		state.floatable.show();
-
-		return;
-	}
-}
-
-export function onComboboxEnter(state: OuiComboboxState): void {
-	if (state.disabled || state.readonly) {
-		return;
-	}
-
-	if (hasTextSelection(state.anchor.element)) {
-		onComboboxSelection(state, true);
-	} else {
-		toggleListboxOption(state, state.active);
-	}
-}
-
-export function onComboboxEscape(state: OuiComboboxState): void {
-	state.floatable.hide();
-}
-
-export function onComboboxFilter(
-	preview: OuiListboxPreview,
-	state: OuiComboboxState,
-	update: boolean,
-	active?: HTMLElement,
-	emit?: boolean,
-): void {
-	if (state.autocomplete.none) {
-		applyListboxSelection({
-			state,
-			added: false,
-			emit: (emit ?? true) && update,
-		});
-	} else {
-		updateListboxPreview(preview, state, active);
-	}
-}
-
-export function onComboboxFocusout(event: FocusEvent): void {
-	setTimeout(() => {
-		const combobox = findAncestor(event, COMBOBOX_TAGNAME);
-		const state = comboboxStates.map.get(combobox!);
-
-		if (
-			combobox == null ||
-			state == null ||
-			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);
-
-		applyListboxSelection({
-			option,
-			state,
-			added: false,
-			selected: option == null ? [] : [option],
-		});
-	});
-}
-
-export function onComboboxInput(event: InputEvent): void {
-	const combobox = findAncestor(event, COMBOBOX_TAGNAME) as OuiComboboxElement | null;
-	const state = comboboxStates.map.get(combobox!);
-
-	if (combobox != null && state != null && event.target === state.filter.element) {
-		filterListbox(event.inputType, state);
-	}
-}
-
-export function onComboboxKeydown(event: KeyboardEvent): void {
-	const combobox = findAncestor(event, COMBOBOX_TAGNAME) as OuiComboboxElement | null;
-	const state = comboboxStates.map.get(combobox!);
-
-	if (combobox == null || state == null) {
-		return;
-	}
-
-	const item = findAncestor(event, COMBOBOX_SELECTORS.selectionItem);
-
-	if (item instanceof HTMLElement) {
-		onComboboxKeydownSelection(event, state, item);
-	} else {
-		processListboxKeydown(event, state);
-	}
-}
-
-export function onComboboxKeydownSelection(
-	event: KeyboardEvent,
-	state: OuiComboboxState,
-	item: HTMLElement,
-): void {
-	if (LISTBOX_KEYS.activation.has(event.key)) {
-		event.preventDefault();
-
-		onComboboxRemoveSelection(state, item);
-
-		return;
-	}
-
-	if (state.disabled || state.selection == null) {
-		return;
-	}
-
-	const {length} = state.selection.items;
-
-	const index = state.selection.items.findIndex(selection => selection.button === item);
-
-	let next: number | undefined;
-
-	switch (event.key) {
-		case 'ArrowDown':
-			state.anchor.element.focus();
-			state.anchor.element.click();
-			return;
-
-		case 'ArrowRight':
-		case 'ArrowLeft':
-			next = clamp(index + (event.key === 'ArrowRight' ? 1 : -1), 0, length - 1, true);
-			break;
-
-		case 'End':
-			next = length - 1;
-			break;
-
-		case 'Home':
-			next = 0;
-			break;
-
-		default:
-			break;
-	}
-
-	if (next == null) {
-		return;
-	}
-
-	event.preventDefault();
-
-	for (let index = 0; index < length; index += 1) {
-		const {button} = state.selection.items[index];
-		const selected = index === next;
-
-		button.tabIndex = selected ? 0 : -1;
-
-		if (selected) {
-			button.focus();
-		}
-	}
-}
-
-export function onComboboxPreview(
-	preview: OuiListboxPreview,
-	state: OuiComboboxState,
-	active?: HTMLElement,
-): void {
-	updateComboboxAutocomplete(preview, state, active);
-}
-
-export function onComboboxRemoveSelection(state: OuiComboboxState, item: HTMLElement): void {
-	if (state.disabled || state.readonly) {
-		return;
-	}
-
-	const option = state.options.selected.find(
-		option => option.id === getData(item, 'option', false),
-	);
-
-	if (option != null) {
-		toggleListboxOption(state, option);
-	}
-}
-
-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 : '';
-
-	toggleListboxOption(state, filterListboxOptions(state) ?? state.active);
-}
-
-export function onComboboxTab(state: OuiComboboxState): void {
-	setTimeout(() => {
-		if (state.host === document.activeElement) {
-			return;
-		}
-
-		if (
-			state.selection?.container.contains(document.activeElement) ||
-			!state.host.contains(document.activeElement)
-		) {
-			state.floatable.hide();
-		}
-	});
-}
-
-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,
-});
-
-on(document, 'keydown', onComboboxKeydown, {
-	passive: false,
-});
-
-// #endregion

package/src/js/combobox/index.ts

@@ -1,320 +0,0 @@
-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 type {OuiComboboxState} from './models.combobox';
-import {
-	comboboxStates,
-	createComboboxState,
-	onAttachCombobox,
-	onDetachCombobox,
-} from './state.combobox';
-
-// #region Types
-
-declare global {
-	interface HTMLElementTagNameMap {
-		[COMBOBOX_TAGNAME]: OuiComboboxElement;
-	}
-}
-
-export class OuiComboboxElement extends HTMLElement {
-	static formAssociated = true;
-
-	static observedAttributes = ['max', 'min', 'required', 'value'];
-
-	readonly #internals: ElementInternals;
-
-	#restored?: string[];
-
-	#state!: OuiComboboxState;
-
-	/**
-	 * Is the combobox disabled?
-	 */
-	get disabled(): boolean {
-		return this.#state?.disabled ?? false;
-	}
-
-	/**
-	 * Should the combobox be disabled?
-	 */
-	set disabled(value: boolean) {
-		if (typeof value === 'boolean' && value !== this.disabled) {
-			setListboxDisabled(this.#state, value);
-		}
-	}
-
-	/**
-	 * Current filter value
-	 */
-	get filter(): string {
-		return this.#state.filter.element.value;
-	}
-
-	/**
-	 * Set the filter value
-	 */
-	set filter(value: string) {
-		setListboxFilter(this.#state, value);
-	}
-
-	/**
-	 * Maximum number of selected options
-	 */
-	get max(): number | undefined {
-		return this.#state?.max;
-	}
-
-	/**
-	 * Set the maximum number of selected options
-	 */
-	set max(value: number) {
-		setListboxLimit('max', this.#state, value);
-	}
-
-	/**
-	 * Minimum number of selected options
-	 */
-	get min(): number | undefined {
-		return this.#state?.min;
-	}
-
-	/**
-	 * Set the minimum number of selected options
-	 */
-	set min(value: number) {
-		setListboxLimit('min', this.#state, value);
-	}
-
-	/**
-	 * Does the combobox allow multiple values?
-	 */
-	get multiple(): boolean {
-		return this.hasAttribute('multiple');
-	}
-
-	/**
-	 * Name of the combobox
-	 */
-	get name(): string {
-		return getAttribute(this, 'name') ?? '';
-	}
-
-	/**
-	 * Is the combobox readonly?
-	 */
-	get readonly(): boolean {
-		return this.#state?.readonly ?? false;
-	}
-
-	/**
-	 * Should the combobox be readonly?
-	 */
-	set readonly(value: boolean) {
-		if (typeof value === 'boolean' && value !== this.readonly) {
-			setListboxReadonly(this.#state, value);
-		}
-	}
-
-	/**
-	 * Is the combobox required?
-	 */
-	get required(): boolean {
-		return this.#state?.required ?? false;
-	}
-
-	/**
-	 * Should the combobox be required?
-	 */
-	set required(value: boolean) {
-		if (typeof value === 'boolean' && value !== this.required) {
-			setListboxRequired(this.#state, value);
-		}
-	}
-
-	/**
-	 * Selected options
-	 */
-	get selected(): HTMLElement[] {
-		return this.#state.options.selected.slice();
-	}
-
-	/**
-	 * Type of combobox
-	 */
-	get type(): OuiListboxType {
-		return this.#state.type;
-	}
-
-	/**
-	 * Current value
-	 */
-	get value(): string {
-		return this.#state.values.current[0];
-	}
-
-	/**
-	 * Set the value
-	 */
-	set value(value: unknown) {
-		setListboxValue(this.#state, value);
-	}
-
-	/**
-	 * Current values
-	 */
-	get values(): string[] {
-		return this.#state.values.current.slice();
-	}
-
-	/**
-	 * Set the values
-	 */
-	set values(values: unknown[]) {
-		setListboxValues(this.#state, values);
-	}
-
-	constructor() {
-		super();
-
-		this.#internals = this.attachInternals();
-	}
-
-	attributeChangedCallback(name: string, _: string | null, value: string | null): void {
-		if (this.#state == null) {
-			return;
-		}
-
-		switch (name) {
-			case 'required':
-				this[name] = this.hasAttribute(name);
-				break;
-
-			case 'max':
-			case 'min':
-				setListboxLimit(name, this.#state, value);
-				break;
-
-			case 'value':
-				this.value = value ?? '';
-				break;
-
-			default:
-				break;
-		}
-	}
-
-	/**
-	 * Clear all selected options
-	 */
-	clear(): void {
-		setListboxValues(this.#state, []);
-	}
-
-	connectedCallback(): void {
-		if (this.#state == null) {
-			this.#initialize();
-		} else {
-			attachListbox(this.#state, comboboxStates, onAttachCombobox);
-		}
-	}
-
-	disconnectedCallback(): void {
-		if (this.#state != null) {
-			detachListbox(this.#state, comboboxStates, onDetachCombobox);
-		}
-	}
-
-	formDisabledCallback(disabled: boolean): void {
-		this.disabled = disabled;
-	}
-
-	formResetCallback(): void {
-		setListboxValues(this.#state, this.#state.values.initial);
-	}
-
-	formStateRestoreCallback(state: string | File | FormData, reason: unknown): void {
-		if (reason !== 'restore') {
-			return;
-		}
-
-		const parsed = typeof state === 'string' ? parse(state) : undefined;
-
-		if (!Array.isArray(parsed)) {
-			return;
-		}
-
-		if (this.#state == null) {
-			this.#restored = parsed;
-		} else {
-			setListboxValues(this.#state, parsed);
-		}
-	}
-
-	/**
-	 * Set combobox localizations for a specific language
-	 *
-	 * @param language Language code
-	 * @param localizations Localizations for language
-	 */
-	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<OuiListboxLocalizations>>): void;
-
-	setLocalizations(
-		first: string | Record<string, Partial<OuiListboxLocalizations>>,
-		second?: Partial<OuiListboxLocalizations>,
-	): void {
-		updateLocalizations(
-			this.#state.localizations.global,
-			typeof first === 'string'
-				? {
-						[first]: second!,
-					}
-				: first,
-			this.#state.localizations.component,
-		);
-	}
-
-	#initialize(): void {
-		this.tabIndex = -1;
-
-		this.#state = createComboboxState(this, this.#internals);
-
-		if (this.#restored != null) {
-			setListboxValues(this.#state, this.#restored);
-
-			this.#restored = undefined;
-		}
-	}
-}
-
-// #endregion
-
-// #region Initialization
-
-customElements.define(COMBOBOX_TAGNAME, OuiComboboxElement);
-
-// #endregion
-
-// #region Exports
-
-export {setComboboxLocalizations} from './misc.combobox';
-
-// #endregion