@oscarpalmer/oui 0.37.0 → 0.39.0

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

@@ -1,129 +0,0 @@
-import {clamp} from '@oscarpalmer/atoms/number';
-import {LISTBOX_KEYS} from './listbox.constants';
-import {getListboxVisibleOptions} from './listbox.misc';
-import type {OuiListboxPreview, OuiListboxState} from './listbox.model';
-
-// #region Functions
-
-export function processListboxKeydown<State extends OuiListboxState>(
-	event: KeyboardEvent,
-	state: State,
-): void {
-	const ignore = state.disabled || state.readonly;
-	const isSelect = state.type === 'select';
-
-	let preventDefault = ignore;
-
-	switch (true) {
-		case event.key === ' ': {
-			if (!state.disabled) {
-				state.callbacks.keydown.onActivation?.(state);
-			}
-
-			break;
-		}
-
-		case event.key === 'Enter': {
-			preventDefault = state.callbacks.keydown.preventActivation?.(state) ?? true;
-
-			if (preventDefault) {
-				state.callbacks.keydown.onEnter?.(state);
-			} else if (!ignore && state.type === 'select') {
-				state.callbacks.keydown.onActivation?.(state);
-			} else if (!ignore) {
-				state.internals.form?.requestSubmit();
-			}
-
-			break;
-		}
-
-		case event.key === 'Escape': {
-			preventDefault = false;
-
-			state.callbacks.keydown.onEscape?.(state);
-
-			break;
-		}
-
-		case !isSelect && LISTBOX_KEYS.selection.has(event.key): {
-			if (!ignore) {
-				state.callbacks.keydown.onSelection?.(state);
-			}
-
-			break;
-		}
-
-		case LISTBOX_KEYS.navigation.has(event.key): {
-			if (!state.disabled) {
-				onNavigation(event, state);
-			}
-
-			break;
-		}
-
-		default: {
-			preventDefault = false;
-
-			if (event.key === 'Tab') {
-				state.callbacks.keydown.onTab?.(state);
-			}
-
-			break;
-		}
-	}
-
-	if (preventDefault) {
-		event.preventDefault();
-		event.stopPropagation();
-	}
-}
-
-function onNavigation<State extends OuiListboxState>(event: KeyboardEvent, state: State): void {
-	const skip = state.callbacks.keydown.skipNavigation?.(state) ?? false;
-	const visible = getListboxVisibleOptions(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 '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: OuiListboxPreview;
-
-	if (state.type === 'autocomplete' && (state.autocomplete.both || state.autocomplete.inline)) {
-		preview = 'set';
-	} else {
-		preview = 'none';
-	}
-
-	state.callbacks.keydown.onNavigation(preview, state, next ?? state.active ?? visible[0]);
-}
-
-// #endregion

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

@@ -1,115 +0,0 @@
-import {dispatch} from '@oscarpalmer/toretto/event';
-import {getLocalization, localize} from '../../l10n';
-import type {OuiListboxState} from './listbox.model';
-
-// #region Functions
-
-export function updateListboxForm<State extends OuiListboxState>(
-	state: State,
-	values: string[],
-	emit?: boolean,
-): void {
-	let value: string | FormData;
-
-	if (state.multiple) {
-		const {length} = values;
-
-		value = new FormData();
-
-		for (let index = 0; index < length; index += 1) {
-			(value as FormData).append(state.name, values[index]);
-		}
-	} else {
-		value = values[0];
-	}
-
-	state.values.current = values;
-
-	state.internals.setFormValue(value, JSON.stringify(values));
-
-	state.callbacks.data.onForm(state);
-
-	updateListboxValidity(state);
-
-	if (emit ?? true) {
-		dispatch(state.host, 'oui:change');
-	}
-}
-
-export function updateListboxValidity(state: OuiListboxState): void {
-	if (state.autocomplete.none && !state.listbox) {
-		const valueMissing = state.required && state.filter.element.value.length === 0;
-
-		const localization = getLocalization(
-			state.localizations.global,
-			state.host,
-			'invalid',
-			state.localizations.component,
-		);
-
-		state.internals.setValidity({valueMissing}, localize(localization, {}, []));
-
-		state.internals.checkValidity();
-
-		return;
-	}
-
-	let data: Record<string, unknown> = {};
-	let error: 'badInput' | 'rangeOverflow' | 'rangeUnderflow' | undefined;
-	let key: 'input' | 'max' | 'min' | undefined;
-	let parameters: unknown[] = [];
-
-	switch (true) {
-		case state.required && state.options.selected.length === 0: {
-			error = 'badInput';
-			key = 'input';
-
-			break;
-		}
-
-		case state.multiple &&
-			typeof state.max === 'number' &&
-			state.options.selected.length > state.max: {
-			data = {amount: state.max};
-			error = 'rangeOverflow';
-			key = 'max';
-			parameters = [state.max];
-
-			break;
-		}
-
-		case state.multiple &&
-			typeof state.min === 'number' &&
-			state.options.selected.length < state.min: {
-			data = {amount: state.min};
-			error = 'rangeUnderflow';
-			key = 'min';
-			parameters = [state.min];
-
-			break;
-		}
-
-		default:
-			break;
-	}
-
-	const localization =
-		key == null
-			? undefined
-			: getLocalization(state.localizations.global, state.host, key, state.localizations.component);
-
-	const message = localization == null ? undefined : localize(localization, data, parameters);
-
-	state.internals.setValidity(
-		error == null
-			? {}
-			: {
-					[error]: true,
-				},
-		message,
-	);
-
-	state.internals.checkValidity();
-}
-
-// #endregion

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

@@ -1,135 +0,0 @@
-import {setAria} from '@oscarpalmer/toretto/aria';
-import {setAttribute} from '@oscarpalmer/toretto/attribute';
-import {filterListbox} from './listbox.data';
-import {updateListboxValidity} from './listbox.form';
-import type {OuiListboxState} from './listbox.model';
-
-// #region Functions
-
-export function generateListboxIds(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 getListboxVisibleOptions(state: OuiListboxState): HTMLElement[] {
-	return state.options.all.filter(option => !option.hidden);
-}
-
-export function setListboxDisabled<State extends OuiListboxState>(
-	state: State,
-	value: boolean,
-): void {
-	state.filter.element.readOnly = state.readonly || value;
-
-	setProperties('disabled', state, value);
-}
-
-export function setListboxFilter<State extends OuiListboxState>(
-	state: State,
-	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;
-
-	filterListbox(type, state);
-}
-
-export function setListboxLimit<State extends OuiListboxState>(
-	type: 'max' | 'min',
-	state: State,
-	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);
-
-		updateListboxValidity(state);
-	}
-}
-
-export function setListboxMultiple(element: HTMLElement, value: boolean): void {
-	if (value) {
-		element.setAttribute('multiple', '');
-	} else {
-		element.removeAttribute('multiple');
-	}
-}
-
-function setProperties<State extends OuiListboxState>(
-	key: 'disabled' | 'readonly' | 'required',
-	state: State,
-	value: boolean,
-): void {
-	state[key] = value;
-
-	const {length} = state.elements;
-
-	for (let index = 0; index < length; index += 1) {
-		const element = state.elements[index];
-
-		if (element == null) {
-			continue;
-		}
-
-		setAria(
-			element,
-			key,
-			key !== 'readonly' || !(element instanceof HTMLButtonElement) ? value : undefined,
-		);
-	}
-}
-
-export function setListboxReadonly<State extends OuiListboxState>(
-	state: State,
-	value: boolean,
-): void {
-	state.filter.element.readOnly = state.disabled || value;
-
-	setProperties('readonly', state, value);
-}
-
-export function setListboxRequired<State extends OuiListboxState>(
-	state: State,
-	value: boolean,
-): void {
-	setProperties('required', state, value);
-	updateListboxValidity(state);
-}
-
-// #endregion

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

@@ -1,169 +0,0 @@
-import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import type {OuiLocalizations, OuiLocalizationsValues} from '../../l10n';
-
-// #region Types
-
-export type OuiListboxAttributes = {
-	active: string;
-	content: string;
-	empty: string;
-	filter: string;
-	group: string;
-	header: string;
-	hidden: string;
-	input: string;
-	list: string;
-	message: string;
-	option: string;
-};
-
-export type OuiListboxAutoComplete = Record<OuiListboxAutoCompleteType, boolean> & {
-	value?: OuiListboxAutoCompleteType;
-};
-
-export type OuiListboxAutoCompleteType = 'both' | 'inline' | 'list' | 'none';
-
-export type OuiListboxCallbacks<State extends OuiListboxState = OuiListboxState> = {
-	data: OuiListboxCallbacksData<State>;
-	keydown: OuiListboxCallbacksKeydown<State>;
-};
-
-type OuiListboxCallbacksData<State extends OuiListboxState = OuiListboxState> = {
-	onApply: OuiListboxCallbacksDataOnApply<State>;
-	onFilter: OuiListboxCallbacksDataOnFilter<State>;
-	onForm: (state: State) => void;
-	onPreview: OuiListboxCallbacksDataOnPreview<State>;
-	onToggle: (state: State) => void;
-};
-
-type OuiListboxCallbacksDataOnApply<State extends OuiListboxState = OuiListboxState> = (
-	state: State,
-	option: HTMLElement | undefined,
-	values: string[],
-	added: boolean,
-	selected?: HTMLElement[],
-	emit?: boolean,
-) => void;
-
-type OuiListboxCallbacksDataOnFilter<State extends OuiListboxState = OuiListboxState> = (
-	preview: OuiListboxPreview,
-	state: State,
-	update: boolean,
-	active?: HTMLElement,
-	emit?: boolean,
-) => void;
-
-type OuiListboxCallbacksDataOnPreview<State extends OuiListboxState = OuiListboxState> = (
-	preview: OuiListboxPreview,
-	state: State,
-	active?: HTMLElement,
-) => void;
-
-type OuiListboxCallbacksKeydown<State extends OuiListboxState = OuiListboxState> = {
-	onActivation?: (state: State) => void;
-	onEnter?: (state: State) => void;
-	onEscape?: (state: State) => void;
-	onNavigation: OuiListboxCallbacksDataOnNavigation<State>;
-	onSelection?: (state: State) => void;
-	onTab?: (state: State) => void;
-	onToggle?: (state: State) => void;
-	preventActivation?: (state: State) => boolean;
-	skipNavigation?: (state: State) => boolean;
-};
-
-type OuiListboxCallbacksDataOnNavigation<State extends OuiListboxState = OuiListboxState> = (
-	preview: OuiListboxPreview,
-	state: State,
-	active?: HTMLElement,
-) => void;
-
-type OuiListboxFilter = {
-	element: HTMLInputElement;
-	value: string;
-};
-
-type OuiListboxFooter = {
-	container: HTMLElement;
-	message: HTMLElement;
-};
-
-export type OuiListboxGroup = {
-	element: HTMLElement;
-	header: HTMLElement;
-	options: HTMLElement[];
-};
-
-type OuiListboxLabel = {
-	element: HTMLLabelElement;
-	id: string;
-};
-
-type OuiListboxLocalization<Localizations extends OuiLocalizationsValues> = {
-	component: Record<string, Partial<Localizations>>;
-	global: OuiLocalizations<Localizations>;
-};
-
-export type OuiListboxLocalizations = {
-	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 OuiListboxOptions = {
-	all: HTMLElement[];
-	selected: HTMLElement[];
-};
-
-export type OuiListboxPreview = 'none' | 'set' | 'typed';
-
-export type OuiListboxState = {
-	active?: HTMLElement;
-	attributes: OuiListboxAttributes;
-	autocomplete: OuiListboxAutoComplete;
-	callbacks: OuiListboxCallbacks;
-	content: HTMLDivElement;
-	disabled: boolean;
-	elements: Array<HTMLElement | undefined>;
-	filter: OuiListboxFilter;
-	footer?: OuiListboxFooter;
-	groups?: OuiListboxGroup[];
-	host: HTMLElement;
-	id: string;
-	internals: ElementInternals;
-	label: OuiListboxLabel;
-	list: HTMLUListElement;
-	listbox: boolean;
-	listeners: RemovableEventListener[];
-	localizations: OuiListboxLocalization<OuiListboxLocalizations>;
-	max?: number;
-	min?: number;
-	message: HTMLElement;
-	multiple: boolean;
-	name: string;
-	options: OuiListboxOptions;
-	readonly: boolean;
-	required: boolean;
-	select: HTMLSelectElement;
-	type: OuiListboxType;
-	values: OuiListboxValues;
-};
-
-export type OuiListboxStates<State extends OuiListboxState = OuiListboxState> = {
-	map: WeakMap<HTMLElement, State>;
-	set: Set<State>;
-};
-
-export type OuiListboxType = 'autocomplete' | 'select';
-
-type OuiListboxValues = {
-	current: string[];
-	initial: string[];
-	label: HTMLElement;
-};
-
-// #endregion

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

@@ -1,82 +0,0 @@
-import {getAttribute} from '@oscarpalmer/toretto/attribute';
-import {filterListboxOptions} from './listbox.data';
-import {updateListboxMessage, updateListboxPreview, updateListboxValueLabel} from './listbox.dom';
-import {updateListboxForm} from './listbox.form';
-import {
-	setListboxDisabled,
-	setListboxLimit,
-	setListboxMultiple,
-	setListboxReadonly,
-	setListboxRequired,
-} from './listbox.misc';
-import type {OuiListboxState, OuiListboxStates} from './listbox.model';
-
-// #region Functions
-
-export function attachListbox<State extends OuiListboxState>(
-	state: State,
-	states: OuiListboxStates<State>,
-	onAttach: (state: State) => void,
-): void {
-	const {filter, host, label} = state;
-
-	label.element.htmlFor = filter.element.id;
-	label.element.id = `${state.id}_label`;
-
-	onAttach(state);
-
-	states.map.set(host, state);
-	states.set.add(state);
-}
-
-export function detachListbox<State extends OuiListboxState>(
-	state: State,
-	states: OuiListboxStates<State>,
-	onDetach: (state: State) => void,
-): void {
-	const {host, label, select} = state;
-
-	const listeners = state.listeners.splice(0);
-	const {length} = listeners;
-
-	for (let index = 0; index < length; index += 1) {
-		listeners[index]();
-	}
-
-	label.element.htmlFor = select.id;
-	label.element.id = label.id;
-
-	onDetach(state);
-
-	states.map.delete(host);
-	states.set.delete(state);
-}
-
-export function initializeListboxState<State extends OuiListboxState>(
-	state: State,
-	states: OuiListboxStates<State>,
-	onAttach: (state: State) => void,
-): State {
-	attachListbox(state, states, onAttach);
-
-	setListboxDisabled(state, state.disabled);
-	setListboxLimit('max', state, getAttribute(state.host, 'max'));
-	setListboxLimit('min', state, getAttribute(state.host, 'min'));
-	setListboxMultiple(state.host, state.multiple);
-	setListboxReadonly(state, state.readonly);
-	setListboxRequired(state, state.required);
-
-	filterListboxOptions(state);
-
-	updateListboxForm(state, state.values.current, false);
-	updateListboxMessage(state);
-	updateListboxValueLabel(state);
-
-	if (state.options.selected.length > 0) {
-		updateListboxPreview('none', state, state.options.selected[0], false);
-	}
-
-	return state;
-}
-
-// #endregion

package/src/js/internal/misc.ts

@@ -1,27 +0,0 @@
-import {getAria} from '@oscarpalmer/toretto/aria';
-import {getAttribute} from '@oscarpalmer/toretto/attribute';
-import type {AnyAriaBooleanAttribute} from '@oscarpalmer/toretto/models';
-
-// #region Functions
-
-export function getAttributeValue<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 getBooleanAriaValue(
-	element: HTMLElement,
-	attribute: AnyAriaBooleanAttribute,
-): boolean {
-	const value = getAria(element, attribute);
-
-	return value === true || value === 'true';
-}
-
-// #endregion