@oscarpalmer/oui 0.38.0 → 0.40.0

package/src/js/internal/navigable.ts

@@ -1,317 +0,0 @@
-import {clamp} from '@oscarpalmer/atoms/number';
-import {getAria, setAria, setRole} from '@oscarpalmer/toretto/aria';
-import {getAttribute} from '@oscarpalmer/toretto/attribute';
-import {on} from '@oscarpalmer/toretto/event';
-import {findAncestor} from '@oscarpalmer/toretto/find';
-import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-import type {AriaRole, RemovableEventListener} from '@oscarpalmer/toretto/models';
-
-// #region Types
-
-export class OuiNavigable {
-	active: OuiNavigableActive = {
-		index: 0,
-	};
-
-	element: HTMLElement;
-
-	listeners: RemovableEventListener[];
-
-	options: OuiNavigableOptions;
-
-	orientation: OuiNavigableOrientation;
-
-	constructor(element: HTMLElement, options: OuiNavigableOptions) {
-		this.element = element;
-		this.options = options;
-
-		this.listeners = [
-			on(
-				element,
-				'click',
-				event => {
-					onClick(this, event);
-				},
-				{
-					passive: false,
-				},
-			),
-			on(element, 'focusin', event => {
-				onFocusin(this, event);
-			}),
-			on(
-				element,
-				'keydown',
-				event => {
-					onKeydown(this, event);
-				},
-				{
-					passive: false,
-				},
-			),
-		];
-
-		this.orientation = options?.orientation ?? getNavigableOrientation(element, options.vertical);
-
-		setAria(element, 'orientation', this.orientation);
-
-		if (options.role != null) {
-			setRole(element, options.role);
-		}
-	}
-
-	destroy(): void {
-		const listeners = this.listeners.splice(0);
-
-		for (const listener of listeners) {
-			listener();
-		}
-
-		this.active.element = undefined;
-		this.element = undefined as never;
-	}
-
-	navigate(index: number, focus?: boolean): void {
-		const items = getItems(this.element, this.options.selector);
-
-		if (index >= 0 && index < items.length) {
-			onNavigate(this, index, items, focus ?? false);
-		}
-	}
-}
-
-type OuiNavigableActive = {
-	element?: HTMLElement;
-	index: number;
-};
-
-type OuiNavigableCallback<ReturnType> = (
-	event: KeyboardEvent,
-	navigable: OuiNavigable,
-) => ReturnType;
-
-export type OuiNavigableOptions = {
-	orientation?: OuiNavigableOrientation;
-	role?: AriaRole;
-	selector: string;
-	vertical: boolean;
-	onActivate?: (navigable: OuiNavigable) => void;
-	onDeactivate?: OuiNavigableCallback<void>;
-	onNavigation?: (navigable: OuiNavigable) => void;
-	onPreventNavigation?: OuiNavigableCallback<boolean>;
-	onShouldActivate?: OuiNavigableCallback<boolean>;
-	onShouldDeactivate?: OuiNavigableCallback<boolean | undefined>;
-};
-
-export type OuiNavigableOrientation = 'horizontal' | 'vertical';
-
-// #endregion
-
-// #region Functions
-
-function getItems(container: HTMLElement, selector: string): HTMLElement[] {
-	return [...container.querySelectorAll(selector)].filter(isValidItem);
-}
-
-export function getNavigable(element: HTMLElement, options: OuiNavigableOptions): OuiNavigable {
-	return new OuiNavigable(element, options);
-}
-
-export function getNavigableOrientation(
-	element: HTMLElement,
-	vertical: boolean,
-	aria?: boolean,
-): OuiNavigableOrientation {
-	const attribute =
-		(aria ?? true) ? getAria(element, 'orientation') : getAttribute(element, 'orientation');
-
-	return ORIENTATIONS.has(attribute as OuiNavigableOrientation)
-		? (attribute as OuiNavigableOrientation)
-		: vertical
-			? ORIENTATION_VERTICAL
-			: ORIENTATION_HORIZONTAL;
-}
-
-function isValidItem(element: Element): element is HTMLElement {
-	return 'disabled' in element ? element.disabled !== true : true;
-}
-
-function onClick(navigable: OuiNavigable, event: Event): void {
-	const item = findAncestor(event, navigable.options.selector) as HTMLElement;
-	const items = getItems(navigable.element, navigable.options.selector);
-
-	const index = items.indexOf(item);
-
-	if (index === -1) {
-		return;
-	}
-
-	if (index !== navigable.active.index) {
-		onNavigate(navigable, index, items, false);
-	}
-
-	navigable.options.onActivate?.(navigable);
-
-	item.focus();
-}
-
-function onNavigate(
-	navigable: OuiNavigable,
-	index: number,
-	items: HTMLElement[],
-	focus: boolean,
-): void {
-	navigable.active.element = items[index];
-	navigable.active.index = index;
-
-	updateNavigableFocus(navigable, focus, items);
-
-	navigable.options.onNavigation?.(navigable);
-}
-
-function onFocusin(navigable: OuiNavigable, event: FocusEvent): void {
-	const item = findAncestor(event, navigable.options.selector);
-
-	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) {
-		return;
-	}
-
-	const items = getItems(navigable.element, navigable.options.selector);
-	const index = items.indexOf(item);
-
-	if (index === -1) {
-		return;
-	}
-
-	navigable.active.element = item;
-	navigable.active.index = index;
-
-	updateNavigableFocus(navigable, false, items);
-}
-
-function onKeydown(navigable: OuiNavigable, event: KeyboardEvent): void {
-	const escaped = event.key === 'Escape';
-	const stopPropagation = navigable.options.onShouldDeactivate?.(event, navigable);
-
-	if (escaped || stopPropagation != null) {
-		if (escaped || stopPropagation) {
-			event.stopPropagation();
-		}
-
-		navigable.options.onDeactivate?.(event, navigable);
-
-		return;
-	}
-
-	if (!KEYS_ALL.has(event.key)) {
-		return;
-	}
-
-	const mustActivate = KEYS_ACTIVATE.has(event.key);
-	const shouldActivate = navigable.options.onShouldActivate?.(event, navigable) === true;
-
-	if (
-		mustActivate ||
-		shouldActivate ||
-		navigable.options.onPreventNavigation?.(event, navigable) === true
-	) {
-		event.stopPropagation();
-	}
-
-	if (mustActivate || shouldActivate) {
-		navigable.options.onActivate?.(navigable);
-
-		return;
-	}
-
-	const items = getItems(navigable.element, navigable.options.selector);
-	const {length} = items;
-
-	if (length === 0) {
-		return;
-	}
-
-	event.preventDefault();
-
-	let index: number | undefined;
-
-	if (KEYS_ABSOLUTE.has(event.key)) {
-		index = event.key === 'Home' ? 0 : items.length - 1;
-	} else {
-		const direction = NAVIGABLE_KEYS_HORIZONTAL.has(event.key)
-			? ORIENTATION_HORIZONTAL
-			: ORIENTATION_VERTICAL;
-
-		if (navigable.orientation === direction) {
-			if (navigable.active.element instanceof HTMLSelectElement) {
-				event.preventDefault();
-			}
-
-			index = clamp(
-				navigable.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1),
-				0,
-				length - 1,
-				true,
-			);
-		}
-	}
-
-	if (index != null && index !== navigable.active.index) {
-		onNavigate(navigable, index, items, true);
-	}
-}
-
-export function updateNavigableFocus(
-	navigable: OuiNavigable,
-	focus: boolean,
-	items?: HTMLElement[],
-): void {
-	const updated = items ?? getItems(navigable.element, navigable.options.selector);
-	const {length} = updated;
-
-	if (length === 0) {
-		return;
-	}
-
-	for (let index = 0; index < length; index += 1) {
-		updated[index].tabIndex = index === navigable.active.index ? 0 : -1;
-	}
-
-	navigable.active.element ??= updated[navigable.active.index];
-
-	if (focus) {
-		navigable.active.element?.focus();
-	}
-}
-
-// #endregion
-
-// #region Variables
-
-const KEYS_ABSOLUTE = new Set(['End', 'Home']);
-
-const KEYS_ACTIVATE = new Set(['Enter', ' ']);
-
-export const NAVIGABLE_KEYS_HORIZONTAL = new Set(['ArrowRight', 'ArrowLeft']);
-
-export const NAVIGABLE_KEYS_VERTICAL = new Set(['ArrowDown', 'ArrowUp']);
-
-const KEYS_ALL = new Set([
-	...KEYS_ABSOLUTE,
-	...KEYS_ACTIVATE,
-	...NAVIGABLE_KEYS_HORIZONTAL,
-	...NAVIGABLE_KEYS_VERTICAL,
-]);
-
-const KEYS_NEXT = new Set(['ArrowDown', 'ArrowRight']);
-
-const ORIENTATION_HORIZONTAL: OuiNavigableOrientation = 'horizontal';
-
-const ORIENTATION_VERTICAL: OuiNavigableOrientation = 'vertical';
-
-const ORIENTATIONS = new Set<OuiNavigableOrientation>([
-	ORIENTATION_HORIZONTAL,
-	ORIENTATION_VERTICAL,
-]);
-
-// #endregion

package/src/js/l10n.ts

@@ -1,192 +0,0 @@
-import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {getString} from '@oscarpalmer/atoms/string';
-
-// #region Types
-
-type LocalizationParameters<Localization> = Localization extends GenericCallback
-	? Parameters<Localization>
-	: never;
-
-export class OuiLocalizations<Localizations extends OuiLocalizationsValues> {
-	readonly defaults: Localizations;
-
-	readonly keys: Set<keyof Localizations>;
-
-	readonly values: Record<string, Partial<Localizations>> = {};
-
-	constructor(defaults: Localizations) {
-		this.defaults = defaults;
-		this.keys = new Set(Object.keys(defaults) as Array<keyof Localizations>);
-	}
-
-	get<Key extends keyof Localizations>(
-		element: Element,
-		key: Key,
-		localizations: Record<string, Partial<Localizations>>,
-	): string | GenericCallback {
-		return getLocalization(this, element, key, localizations);
-	}
-
-	set(language: string, localizations: Partial<Localizations>): void;
-
-	set(localizations: Record<string, Partial<Localizations>>): void;
-
-	set(
-		first: string | Record<string, Partial<Localizations>>,
-		second?: Partial<Localizations>,
-	): void {
-		updateLocalizations(
-			this,
-			typeof first === 'string'
-				? {
-						[first]: second!,
-					}
-				: first,
-			this.values,
-		);
-	}
-}
-
-export type OuiLocalizationsValues = Record<string, string | GenericCallback>;
-
-// #endregion
-
-// #region Functions
-
-export function getLanguage(element: Element): string {
-	return (
-		element.closest('[lang]')?.getAttribute('lang') ?? document.documentElement.lang
-	).toLowerCase();
-}
-
-export function getLocalization<
-	Localizations extends OuiLocalizationsValues,
-	Key extends keyof Localizations,
->(
-	localizations: OuiLocalizations<Localizations>,
-	element: Element,
-	key: Key,
-	value: Record<string, Partial<Localizations>>,
-): Localizations[Key] | GenericCallback {
-	const language = getLanguage(element);
-
-	const values = [value, localizations.values];
-	const {length} = values;
-
-	let localization: Localizations[Key] | undefined;
-	let shortLanguage: string | undefined;
-
-	for (let index = 0; index < length; index += 1) {
-		const value = values[index];
-
-		localization = value?.[language]?.[key];
-
-		if (localization != null) {
-			break;
-		}
-
-		shortLanguage ??= language.split('-')[0];
-
-		if (shortLanguage === language) {
-			continue;
-		}
-
-		localization = value?.[shortLanguage]?.[key];
-
-		if (localization != null) {
-			break;
-		}
-	}
-
-	return localization ?? localizations.defaults[key];
-}
-
-export function getLocalizations<Localizations extends OuiLocalizationsValues>(
-	defaults: Localizations,
-): OuiLocalizations<Localizations> {
-	return new OuiLocalizations(defaults);
-}
-
-export function localize<
-	Localizations extends OuiLocalizationsValues,
-	Key extends keyof Localizations,
-	Localization extends Localizations[Key],
->(
-	localization: Localization,
-	data: Record<string, unknown>,
-	parameters: LocalizationParameters<Localization>,
-): string {
-	if (typeof localization === 'function') {
-		return localization(...parameters);
-	}
-
-	const keys = Object.keys(data);
-	const {length} = keys;
-
-	let localized = localization as string;
-
-	for (let index = 0; index < length; index += 1) {
-		const key = keys[index];
-		const value = data[key];
-
-		localized = localized.replaceAll(`{${key}}`, getString(value));
-	}
-
-	return localized;
-}
-
-export function updateLocalizations<Localizations extends OuiLocalizationsValues>(
-	instance: OuiLocalizations<Localizations>,
-	values: Record<string, Partial<Localizations>>,
-	destination: Record<string, Partial<Localizations>>,
-	onAfter?: () => void,
-): void {
-	if (typeof values !== 'object' || values == null) {
-		return;
-	}
-
-	const localizations = destination ?? instance.values;
-
-	const languages = Object.keys(values);
-	const languagesLength = languages.length;
-
-	let updated = false;
-
-	for (let languagesIndex = 0; languagesIndex < languagesLength; languagesIndex += 1) {
-		const language = languages[languagesIndex];
-		const languageValue = values[language];
-
-		if (typeof languageValue !== 'object' || languageValue == null) {
-			continue;
-		}
-
-		const normalizedLanguage = language.toLowerCase();
-
-		localizations[normalizedLanguage] ??= {};
-
-		const keys = Object.keys(languageValue);
-		const keysLength = keys.length;
-
-		for (let keysIndex = 0; keysIndex < keysLength; keysIndex += 1) {
-			const key = keys[keysIndex];
-			const keyValue = languageValue[key];
-
-			const normalizedKey = key.toLowerCase() as keyof Localizations;
-
-			if (
-				instance.keys.has(normalizedKey) &&
-				(typeof keyValue === 'string' || typeof keyValue === 'function')
-			) {
-				updated = true;
-
-				localizations[normalizedLanguage][normalizedKey] = keyValue as never;
-			}
-		}
-	}
-
-	if (updated && typeof onAfter === 'function') {
-		onAfter();
-	}
-}
-
-// #endregion

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

@@ -1,61 +0,0 @@
-import type {OuiListboxAttributes} from '../internal/listbox/listbox.model';
-
-// #region Variables
-
-export const LISTBOX_TAGNAME = 'oui-listbox';
-
-const attributeContent = `${LISTBOX_TAGNAME}-content`;
-
-const attributeFilter = `${LISTBOX_TAGNAME}-filter`;
-
-const attributeFilterInput = `${attributeFilter}-input`;
-
-const attributeGroup = `${LISTBOX_TAGNAME}-group`;
-
-const attributeHeader = `${LISTBOX_TAGNAME}-header`;
-
-const attributeHidden = `${LISTBOX_TAGNAME}-hidden`;
-
-const attributeList = `${LISTBOX_TAGNAME}-list`;
-
-const attributeListEmpty = `${attributeList}-empty`;
-
-const attributeMessage = `${LISTBOX_TAGNAME}-message`;
-
-const attributeOption = `${LISTBOX_TAGNAME}-option`;
-
-const attributeOptionActive = `${LISTBOX_TAGNAME}-option-active`;
-
-const messageLabel = `<${LISTBOX_TAGNAME}> must contain a <label> element for the <select> element`;
-
-const messageSelect = `<${LISTBOX_TAGNAME}> must contain a valid <select> element`;
-
-const selectorFilter = `[${attributeFilterInput}]`;
-
-const selectorOption = `[${attributeOption}]`;
-
-export const LISTBOX_ATTRIBUTES: OuiListboxAttributes = {
-	active: attributeOptionActive,
-	content: attributeContent,
-	empty: attributeListEmpty,
-	filter: attributeFilter,
-	group: attributeGroup,
-	header: attributeHeader,
-	hidden: attributeHidden,
-	input: attributeFilterInput,
-	list: attributeList,
-	message: attributeMessage,
-	option: attributeOption,
-};
-
-export const LISTBOX_MESSAGES = {
-	label: messageLabel,
-	select: messageSelect,
-};
-
-export const LISTBOX_SELECTORS = {
-	filter: selectorFilter,
-	option: selectorOption,
-};
-
-// #endregion

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

@@ -1,106 +0,0 @@
-import {on} from '@oscarpalmer/toretto/event';
-import {findAncestor} from '@oscarpalmer/toretto/find';
-import {
-	applyListboxSelection,
-	filterListbox,
-	toggleListboxOption,
-} from '../internal/listbox/listbox.data';
-import {updateListboxPreview} from '../internal/listbox/listbox.dom';
-import {processListboxKeydown} from '../internal/listbox/listbox.event';
-import type {OuiListboxPreview, OuiListboxState} from '../internal/listbox/listbox.model';
-import {LISTBOX_SELECTORS, LISTBOX_TAGNAME} from './constants.listbox';
-import {listboxStates} from './state.listbox';
-
-// #region Types
-
-// #region Functions
-
-function onListboxClick(event: Event): void {
-	const listbox = findAncestor(event, LISTBOX_TAGNAME);
-	const state = listboxStates.map.get(listbox!);
-
-	if (listbox == null || state == null) {
-		return;
-	}
-
-	const option = findAncestor(event, LISTBOX_SELECTORS.option) as HTMLElement | null;
-
-	if (option == null) {
-		return;
-	}
-
-	if (state.disabled) {
-		state.filter.element.focus();
-	} else if (state.readonly) {
-		updateListboxPreview('none', state, option, false);
-	} else {
-		toggleListboxOption(state, option);
-	}
-}
-
-export function onListboxEnter(state: OuiListboxState): void {
-	if (!state.disabled && !state.readonly) {
-		toggleListboxOption(state, state.active);
-	}
-}
-
-export function onListboxFilter(
-	preview: OuiListboxPreview,
-	state: OuiListboxState,
-	_: boolean,
-	active?: HTMLElement,
-): void {
-	updateListboxPreview(preview, state, active);
-}
-
-function onListboxInput(event: InputEvent): void {
-	const listbox = findAncestor(event, LISTBOX_TAGNAME);
-	const state = listboxStates.map.get(listbox!);
-
-	if (state?.filter.element === event.target) {
-		filterListbox(event.inputType, state);
-	}
-}
-
-function onListboxKeydown(event: KeyboardEvent): void {
-	const listbox = findAncestor(event, LISTBOX_TAGNAME);
-	const state = listboxStates.map.get(listbox!);
-
-	if (state?.filter.element === event.target) {
-		processListboxKeydown(event, state);
-	}
-}
-
-export function onListboxNavigation(
-	preview: OuiListboxPreview,
-	state: OuiListboxState,
-	active?: HTMLElement,
-): void {
-	if (state.multiple || state.readonly) {
-		updateListboxPreview(preview, state, active);
-	} else {
-		applyListboxSelection({
-			state,
-			option: active,
-			added: true,
-			selected: active == null ? [] : [active],
-		});
-	}
-}
-
-export function onListboxToggle(state: OuiListboxState): void {
-	state.filter.element.focus();
-}
-
-// #endregion
-
-// #region Initialization
-
-on(document, 'click', onListboxClick);
-on(document, 'input', onListboxInput);
-
-on(document, 'keydown', onListboxKeydown, {
-	passive: false,
-});
-
-// #endregion