@oscarpalmer/oui 0.38.0 → 0.40.0

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

@@ -1,287 +0,0 @@
-import {getString} from '@oscarpalmer/atoms/string';
-import {setAria} from '@oscarpalmer/toretto/aria';
-import {setAttribute} from '@oscarpalmer/toretto/attribute';
-import {getData} from '@oscarpalmer/toretto/data';
-import {dispatch} from '@oscarpalmer/toretto/event';
-import {updateListboxMessage, updateListboxPreview, updateListboxValueLabel} from './listbox.dom';
-import {updateListboxForm} from './listbox.form';
-import {setListboxFilter} from './listbox.misc';
-import type {OuiListboxPreview, OuiListboxState} from './listbox.model';
-
-// #region Types
-
-type ApplySelectionParameters<State extends OuiListboxState = OuiListboxState> = {
-	added: boolean;
-	emit?: boolean;
-	option?: HTMLElement;
-	scroll?: boolean;
-	selected?: HTMLElement[];
-	state: State;
-	values?: string[];
-};
-
-// #endregion
-
-// #region Functions
-
-export function applyListboxSelection<State extends OuiListboxState>(
-	parameters: ApplySelectionParameters<State>,
-): void {
-	const {added, emit, option, scroll, selected, state} = parameters;
-	const {length} = state.options.all;
-
-	for (let index = 0; index < length; index += 1) {
-		const option = state.options.all[index];
-
-		setAria(
-			option,
-			'selected',
-			(state.type === 'select' || !state.autocomplete.none) &&
-				(selected ?? state.options.selected).includes(option),
-		);
-	}
-
-	const values =
-		parameters.values ??
-		(state.autocomplete.none && !state.listbox
-			? [state.filter.element.value]
-			: (selected ?? state.options.selected).map(option => getData(option, 'value', false) ?? ''));
-
-	if (values.length === 0) {
-		values.push('');
-	}
-
-	if (selected != null) {
-		state.options.selected = selected;
-	}
-
-	const update =
-		values.length === state.values.current.length
-			? values.some(value => !state.values.current.includes(value))
-			: true;
-
-	if (!update) {
-		return;
-	}
-
-	updateListboxForm(state, values, emit);
-	updateListboxMessage(state);
-	updateListboxPreview('set', state, option, scroll);
-	updateListboxValueLabel(state);
-
-	state.callbacks.data.onApply(state, option, values, added, selected, emit);
-}
-
-export function filterListbox(type: InputEvent['inputType'], state: OuiListboxState): void {
-	if (state.disabled || state.readonly) {
-		return;
-	}
-
-	const update = state.filter.element.value !== state.filter.value;
-
-	const option = filterListboxOptions(state);
-
-	let preview: OuiListboxPreview | undefined;
-
-	if (type.includes('delete')) {
-		preview = 'none';
-	} else if (type.includes('insert')) {
-		preview = 'typed';
-	}
-
-	if (preview != null) {
-		state.callbacks.data.onFilter(preview, state, update, option);
-	}
-
-	if (update) {
-		state.filter.value = state.filter.element.value;
-
-		dispatch(state.host, 'input');
-	}
-}
-
-export function filterListboxOption(
-	state: OuiListboxState,
-	value: unknown,
-	textContent?: boolean,
-): HTMLElement | undefined {
-	const filterTextContent = textContent ?? false;
-
-	const filter = getString(value).toLocaleLowerCase();
-
-	filterListboxOptions(state);
-
-	const {length} = state.options.all;
-
-	let match: HTMLElement | undefined;
-
-	for (let index = 0; index < length; index += 1) {
-		const option = state.options.all[index];
-
-		const value = (
-			filterTextContent ? option.textContent : (getData(option, 'value', false) ?? '')
-		).toLocaleLowerCase();
-
-		if (value === filter) {
-			match = option;
-
-			break;
-		}
-	}
-
-	return match;
-}
-
-export function filterListboxOptions(state: OuiListboxState): HTMLElement | undefined {
-	function filter(options: HTMLElement[]): boolean {
-		const {length} = options;
-
-		let count = 0;
-
-		for (let index = 0; index < length; index += 1) {
-			const option = options[index];
-
-			option.hidden =
-				(state.type === 'select' || !state.autocomplete.none) &&
-				!option.textContent.toLocaleLowerCase().includes(value);
-
-			if (!option.hidden) {
-				count += 1;
-
-				visible.push(option);
-			}
-		}
-
-		return count === 0;
-	}
-
-	const value = state.filter.element.value.toLocaleLowerCase();
-
-	const visible: HTMLElement[] = [];
-
-	if (state.groups == null) {
-		filter(state.options.all);
-	} else {
-		const groupsLength = state.groups.length;
-
-		for (let groupIndex = 0; groupIndex < groupsLength; groupIndex += 1) {
-			const {element, options} = state.groups[groupIndex];
-
-			element.hidden = filter(options);
-		}
-	}
-
-	setAttribute(state.list, state.attributes.empty, visible.length === 0 ? '' : undefined);
-
-	updateListboxMessage(state);
-
-	return state.active != null && visible.includes(state.active) ? state.active : visible[0];
-}
-
-export function setListboxValue<State extends OuiListboxState>(
-	state: State,
-	value: unknown,
-	emit?: boolean,
-): void {
-	if (state.autocomplete.none && !state.listbox) {
-		setListboxFilter(state, getString(value));
-
-		return;
-	}
-
-	const option = filterListboxOption(state, value);
-
-	if (option != null) {
-		setListboxValues(state, [value], emit);
-	}
-}
-
-export function setListboxValues<State extends OuiListboxState>(
-	state: State,
-	value: unknown[],
-	emit?: boolean,
-): void {
-	if (!Array.isArray(value)) {
-		return;
-	}
-
-	const values = (state.multiple ? value : value.slice(0, 1)).map(value =>
-		getString(value).toLocaleLowerCase(),
-	);
-
-	if (values.length === 0) {
-		values.push('');
-	}
-
-	if (state.autocomplete.none && !state.listbox) {
-		setListboxValue(state, values[0], emit);
-
-		return;
-	}
-
-	const {length} = state.options.all;
-
-	const selected: HTMLElement[] = [];
-
-	for (let index = 0; index < length; index += 1) {
-		const option = state.options.all[index];
-
-		if (values.includes(getData(option, 'value', false)?.toLocaleLowerCase() ?? '')) {
-			selected.push(option);
-		}
-	}
-
-	applyListboxSelection({
-		emit,
-		selected,
-		state,
-		added: true,
-		option: selected[0] ?? state.options.all[0],
-		values: state.autocomplete.none && !state.listbox ? values : undefined,
-	});
-}
-
-export function toggleListboxOption<State extends OuiListboxState>(
-	state: State,
-	option?: HTMLElement,
-): void {
-	if (option == null || (!state.multiple && state.options.selected.includes(option))) {
-		state.callbacks.data.onToggle(state);
-
-		return;
-	}
-
-	const selected = state.options.selected.slice();
-
-	let added = true;
-
-	if (state.multiple) {
-		const index = selected.indexOf(option);
-
-		if (index === -1) {
-			selected.push(option);
-		} else {
-			added = false;
-
-			selected.splice(index, 1);
-		}
-	} else {
-		selected.splice(0, selected.length, option);
-	}
-
-	applyListboxSelection({
-		added,
-		option,
-		selected,
-		state,
-		scroll: false,
-		values:
-			state.autocomplete.none && !state.listbox && option != null
-				? [option.textContent]
-				: undefined,
-	});
-
-	state.callbacks.data.onToggle(state);
-}
-
-// #endregion

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

@@ -1,446 +0,0 @@
-import {createElement, setAria, setAttribute} from '@oscarpalmer/toretto';
-import {getLocalization, localize} from '../../l10n';
-import {listboxScrollOptions} from './listbox.constants';
-import {getListboxVisibleOptions} from './listbox.misc';
-import type {
-	OuiListboxAttributes,
-	OuiListboxAutoComplete,
-	OuiListboxGroup,
-	OuiListboxLocalizations,
-	OuiListboxOptions,
-	OuiListboxPreview,
-	OuiListboxState,
-	OuiListboxType,
-} from './listbox.model';
-
-// #region Types
-
-export type CreateListboxContent = {
-	element: HTMLDivElement;
-	filter?: CreateListboxFilter;
-	list: CreateListboxList;
-	message: HTMLDivElement;
-	value: HTMLSpanElement;
-};
-
-export type CreateListboxContentParameters = {
-	attributes: OuiListboxAttributes;
-	autocomplete: OuiListboxAutoComplete;
-	element: HTMLElement;
-	id: string;
-	label: HTMLLabelElement;
-	listbox: boolean;
-	multiple: boolean;
-	select: HTMLSelectElement;
-	type: OuiListboxType;
-};
-
-export type CreateListboxFilter = {
-	container: HTMLElement;
-	element: HTMLInputElement;
-};
-
-type CreateListboxGroupParameters = {
-	group: HTMLOptGroupElement;
-	groupOptions: HTMLOptionElement[];
-	original: CreateListboxContentParameters;
-	selected: HTMLElement[];
-	type: OuiListboxType;
-};
-
-export type CreateListboxList = {
-	element: HTMLUListElement;
-	groups?: OuiListboxGroup[];
-	options: OuiListboxOptions;
-};
-
-type CreateListboxOptionParameters = {
-	group?: string;
-	index: number;
-	option: HTMLOptionElement;
-	original: CreateListboxContentParameters;
-	type: OuiListboxType;
-};
-
-type CreateListboxOptionsParameters = {
-	group?: string;
-	list: HTMLElement;
-	options: HTMLOptionElement[];
-	original: CreateListboxContentParameters;
-	selected: HTMLElement[];
-	type: OuiListboxType;
-};
-
-// #endregion
-
-// #region Functions
-
-export function createListboxContent(
-	parameters: CreateListboxContentParameters,
-): CreateListboxContent {
-	const element = createElement('div', {
-		attribute: {
-			[parameters.attributes.content]: '',
-		},
-	});
-
-	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, value);
-
-	return {
-		element,
-		filter,
-		list,
-		message,
-		value,
-	};
-}
-
-export function createListboxFilter(
-	parameters: CreateListboxContentParameters,
-): CreateListboxFilter | undefined {
-	if (parameters.type === 'autocomplete') {
-		return;
-	}
-
-	const container = createElement('div', {
-		attribute: {
-			[parameters.attributes.filter]: '',
-		},
-	});
-
-	const element = createListboxInput(parameters, '');
-
-	setAttribute(element, parameters.attributes.input, '');
-
-	container.append(element);
-
-	return {container, element};
-}
-
-export function createListboxGroup(parameters: CreateListboxGroupParameters): OuiListboxGroup {
-	const {group, groupOptions, selected, type} = parameters;
-
-	const element = createElement('li', {
-		aria: {
-			label: group.label,
-		},
-		property: {
-			role: 'group',
-		},
-	});
-
-	const list = createElement('ul', {
-		property: {
-			role: 'none',
-		},
-	});
-
-	const header = createListboxHeader(parameters, group);
-
-	element.append(header, list);
-
-	return {
-		element,
-		header,
-		options: createListboxOptions({
-			list,
-			selected,
-			type,
-			group: header.id,
-			options: groupOptions,
-			original: parameters.original,
-		}),
-	};
-}
-
-export function createListboxHeader(
-	parameters: CreateListboxGroupParameters,
-	group: HTMLOptGroupElement,
-): HTMLElement {
-	return createElement('div', {
-		aria: {
-			hidden: true,
-		},
-		attribute: {
-			[parameters.original.attributes.header]: '',
-		},
-		property: {
-			id: group.id,
-			textContent: group.label,
-		},
-	});
-}
-
-export function createListboxInput(
-	parameters: CreateListboxContentParameters,
-	value: string,
-): HTMLInputElement {
-	const {autocomplete, id, label, listbox, type} = parameters;
-
-	const isAutocomplete = type === 'autocomplete';
-
-	const input = createElement('input', {
-		aria: {
-			autocomplete: autocomplete.value,
-			controls: `${id}_list`,
-			haspopup: isAutocomplete ? 'listbox' : undefined,
-			labelledby: label.id,
-		},
-		attribute: {
-			autocorrect: 'off',
-			autocomplete: 'off',
-			form: '',
-			inputmode: 'text',
-			spellcheck: 'false',
-		},
-		property: {
-			id,
-			value,
-			role: isAutocomplete || listbox ? 'combobox' : 'searchbox',
-			type: 'text',
-		},
-	});
-
-	if (isAutocomplete || listbox) {
-		setAria(input, 'expanded', listbox);
-	}
-
-	return input;
-}
-
-export function createListboxList(parameters: CreateListboxContentParameters): CreateListboxList {
-	const {attributes, id, label, multiple, select, type} = parameters;
-
-	const element = createElement('ul', {
-		aria: {
-			labelledby: label.id,
-			multiselectable: multiple,
-		},
-		attribute: {
-			[attributes.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: OuiListboxGroup[] | undefined;
-
-	for (let childIndex = 0; childIndex < childrenLength; childIndex += 1) {
-		const child = children[childIndex];
-
-		if (child instanceof HTMLOptionElement) {
-			const option = createListboxOption({
-				type,
-				option: child,
-				original: parameters,
-				index: childIndex,
-			});
-
-			element.append(option);
-			options.push(option);
-
-			if (child.selected) {
-				selected.push(option);
-			}
-
-			continue;
-		}
-
-		if (!(child instanceof HTMLOptGroupElement)) {
-			continue;
-		}
-
-		const group = createListboxGroup({
-			selected,
-			type,
-			group: child,
-			groupOptions: [...child.children] as HTMLOptionElement[],
-			original: parameters,
-		});
-
-		groups ??= [];
-
-		element.append(group.element);
-		groups.push(group);
-		options.push(...group.options);
-	}
-
-	return {
-		element,
-		groups,
-		options: {
-			selected,
-			all: options,
-		},
-	};
-}
-
-export function createListboxMessage(attribute: string): HTMLDivElement {
-	return createElement('div', {
-		aria: {
-			live: 'polite',
-		},
-		attribute: {
-			[attribute]: '',
-		},
-		property: {
-			hidden: true,
-			role: 'status',
-		},
-	});
-}
-
-export function createListboxOption(parameters: CreateListboxOptionParameters): HTMLElement {
-	const {group, option, original} = parameters;
-
-	return createElement('li', {
-		aria: {
-			selected: (parameters.type === 'select' || !original.autocomplete.none) && option.selected,
-		},
-		attribute: {
-			[original.attributes.option]: '',
-		},
-		data: {
-			group,
-			value: option.value,
-		},
-		property: {
-			id: option.id,
-			role: 'option',
-			textContent: option.textContent,
-		},
-	});
-}
-
-export function createListboxOptions(parameters: CreateListboxOptionsParameters): HTMLElement[] {
-	const {group, list, options, original, selected, type} = parameters;
-
-	const items: HTMLElement[] = [];
-
-	for (let index = 0; index < options.length; index += 1) {
-		const option = options[index];
-
-		const item = createListboxOption({group, index, option, original, type});
-
-		items.push(item);
-
-		if (option.selected) {
-			selected.push(item);
-		}
-
-		list.append(item);
-	}
-
-	return items;
-}
-
-export function createListboxValueLabel(id: string): HTMLSpanElement {
-	return createElement('span', {
-		property: {
-			hidden: true,
-			id: `${id}_value`,
-		},
-	});
-}
-
-export function updateListboxMessage(state: OuiListboxState): void {
-	const {attributes, host, localizations, message} = state;
-
-	const visible = getListboxVisibleOptions(state).length;
-
-	setAttribute(message, attributes.hidden, visible > 0 ? '' : undefined);
-
-	let data: Record<string, unknown> = {};
-	let parameters: unknown[] = [];
-
-	let key: keyof OuiListboxLocalizations | undefined;
-
-	if (visible === 0) {
-		key = 'empty';
-	} else {
-		data = {amount: visible};
-		key = 'results';
-		parameters = [visible];
-	}
-
-	const localization = getLocalization(localizations.global, host, key, localizations.component);
-
-	message.textContent = localize(localization, data, parameters);
-
-	message.hidden = false;
-}
-
-export function updateListboxPreview<State extends OuiListboxState>(
-	preview: OuiListboxPreview,
-	state: State,
-	active?: HTMLElement,
-	scroll?: boolean,
-): void {
-	const {length} = state.options.all;
-
-	for (let index = 0; index < length; index += 1) {
-		const option = state.options.all[index];
-
-		setAttribute(option, state.attributes.active, option === active ? '' : undefined);
-	}
-
-	state.active = active;
-
-	setAria(
-		state.filter.element,
-		'activedescendant',
-		state.content.checkVisibility() ? active?.id : undefined,
-	);
-
-	if (scroll ?? true) {
-		active?.scrollIntoView(listboxScrollOptions);
-	}
-
-	if (preview !== 'none') {
-		state.callbacks.data.onPreview(preview, state, active);
-	}
-}
-
-export function updateListboxValueLabel<State extends OuiListboxState>(state: State): void {
-	let label: string;
-
-	if (state.multiple) {
-		const localization = getLocalization(
-			state.localizations.global,
-			state.host,
-			'selected',
-			state.localizations.component,
-		);
-
-		const {length} = state.options.selected;
-
-		label = localize(localization, {amount: length}, [length]);
-	} else {
-		label =
-			state.autocomplete.none && !state.listbox
-				? state.filter.element.value
-				: (state.options.selected[0]?.textContent ?? '');
-	}
-
-	state.values.label.textContent = label;
-}
-
-// #endregion