@oscarpalmer/oui 0.33.0 → 0.35.0

package/src/js/combobox/state.combobox.ts

@@ -0,0 +1,247 @@
+import {setAria} from '@oscarpalmer/toretto/aria';
+import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
+import {getData} from '@oscarpalmer/toretto/data';
+import {on} from '@oscarpalmer/toretto/event';
+import {createEmbeddedFloatable} from '../floatable/floatable.embedded';
+import {getLocalizations} from '../l10n';
+import {
+	COMBOBOX_MESSAGE_LABEL,
+	COMBOBOX_MESSAGE_SELECT,
+	COMBOBOX_TYPES,
+} from './constants.combobox';
+import {filterComboboxOptions} from './data.combobox';
+import {
+	createComboboxAnchor,
+	createComboboxContent,
+	setComboboxDisabled,
+	setComboboxReadonly,
+	setComboboxRequired,
+	updateComboboxMessage,
+	updateComboboxPreview,
+	updateComboboxSelectionItems,
+} from './dom.combobox';
+import {onComboboxClickContent, onComboboxFocusout} from './event.combobox';
+import {updateComboboxForm} from './form.combobox';
+import type {OuiComboboxElement} from './index';
+import {
+	generateComboboxIds,
+	getComboboxAttributeValue,
+	getComboboxAutoComplete,
+	getComboboxBooleanAria,
+	getComboboxId,
+	getComboboxVisibleOptions,
+	setComboboxLimit,
+} from './misc.combobox';
+import type {OuiComboboxLocalizations, OuiComboboxState} from './models.combobox';
+
+// #region Functions
+
+export function attachCombobox(state: OuiComboboxState): void {
+	const {anchor, content, filter, label, listeners, select} = state;
+
+	label.element.htmlFor = filter.element.id;
+	label.element.id = `${state.id}_label`;
+
+	select.hidden = true;
+
+	select.insertAdjacentElement('afterend', anchor.container ?? anchor.element);
+	(anchor.container ?? anchor.element).insertAdjacentElement('afterend', content);
+
+	select.remove();
+
+	state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.element, content, {
+		position: 'below-start',
+		reusable: false,
+	});
+
+	state.floatable.update();
+
+	listeners.push(
+		on(state.host, 'focusout', () => {
+			setTimeout(() => {
+				onComboboxFocusout(state);
+			});
+		}),
+		on(content, 'click', event => {
+			onComboboxClickContent(event, content);
+		}),
+		on(content, 'toggle', () => {
+			setAria(anchor.element, 'expanded', state.floatable.open);
+
+			setAria(
+				filter.element,
+				'activedescendant',
+				state.floatable.open ? state.active?.id : undefined,
+			);
+
+			if (state.floatable.open) {
+				filter.element.focus();
+			}
+		}),
+	);
+
+	comboboxStates.map.set(state.host, state);
+	comboboxStates.map.set(state.content, state);
+	comboboxStates.set.add(state);
+}
+
+export function createComboboxState(
+	element: OuiComboboxElement,
+	internals: ElementInternals,
+): OuiComboboxState {
+	const select = element.querySelector('select');
+
+	if (select == null || select.id === '') {
+		throw new Error(COMBOBOX_MESSAGE_SELECT);
+	}
+
+	const label = element.querySelector(`label[for="${select.id}"]`) as HTMLLabelElement;
+
+	if (label == null) {
+		throw new Error(COMBOBOX_MESSAGE_LABEL);
+	}
+
+	element.id = select.id;
+
+	setAttribute(element, 'name', select.name === '' ? select.id : select.name);
+
+	const disabled = getComboboxBooleanAria(element, 'disabled') || select.disabled;
+	const multiple = element.multiple || select.multiple;
+	const readonly = getComboboxBooleanAria(element, 'readonly');
+	const required = getComboboxBooleanAria(element, 'required') || select.required;
+
+	const id = getComboboxId();
+	const type = multiple
+		? 'select'
+		: getComboboxAttributeValue(element, 'type', COMBOBOX_TYPES, 'select');
+
+	const autocomplete = getComboboxAutoComplete(element, type === 'select');
+
+	const labelId = label.id;
+
+	label.htmlFor = id;
+	label.id = `${id}_label`;
+
+	generateComboboxIds(id, select);
+
+	const anchor = createComboboxAnchor({autocomplete, id, label, multiple, select, type});
+	const content = createComboboxContent({autocomplete, id, label, multiple, select, type});
+
+	const values =
+		content.list.selected.length === 0
+			? ['']
+			: content.list.selected.map(option => getData(option, 'value', false) ?? '');
+
+	const state: OuiComboboxState = {
+		autocomplete,
+		disabled,
+		id,
+		internals,
+		multiple,
+		readonly,
+		required,
+		select,
+		type,
+		anchor: {
+			container: anchor.container,
+			element: anchor.element,
+		},
+		active: content.list.selected[0],
+		content: content.element,
+		filter: {
+			element: content.filter?.element ?? (anchor.element as HTMLInputElement),
+			value: '',
+		},
+		floatable: undefined as never,
+		groups: content.list.groups,
+		host: element,
+		label: {
+			element: label,
+			id: labelId,
+		},
+		listeners: [],
+		localizations: {},
+		message: content.message,
+		name: element.name,
+		options: {
+			all: content.list.options,
+			selected: content.list.selected,
+		},
+		selection: anchor.selection,
+		values: {
+			current: values.slice(),
+			initial: values.slice(),
+		},
+	};
+
+	attachCombobox(state);
+
+	setComboboxDisabled(state, disabled);
+	setComboboxLimit('max', state, getAttribute(element, 'max'));
+	setComboboxLimit('min', state, getAttribute(element, 'min'));
+	setComboboxReadonly(state, readonly);
+	setComboboxRequired(state, required);
+
+	filterComboboxOptions(state);
+
+	if (content.list.selected.length > 0) {
+		updateComboboxPreview('set', state, content.list.selected[0]);
+	}
+
+	updateComboboxForm(state, state.values.current, false);
+	updateComboboxMessage(state, getComboboxVisibleOptions(state).length);
+	updateComboboxSelectionItems(state);
+
+	return state;
+}
+
+export function detachCombobox(state: OuiComboboxState): void {
+	const {content, floatable, host, label, select} = state;
+
+	const listeners = state.listeners.splice(0);
+	const {length} = listeners;
+
+	for (let index = 0; index < length; index += 1) {
+		listeners[index]();
+	}
+
+	floatable.destroy();
+
+	const anchor = state.anchor.container ?? state.anchor.element;
+
+	anchor.insertAdjacentElement('beforebegin', select);
+
+	anchor.remove();
+	content.remove();
+
+	label.element.htmlFor = select.id;
+	label.element.id = state.label.id;
+
+	select.hidden = false;
+
+	comboboxStates.map.delete(host);
+	comboboxStates.map.delete(content);
+	comboboxStates.set.delete(state);
+}
+
+// #endregion
+
+// #region Variables
+
+export const comboboxLocalizations = getLocalizations<OuiComboboxLocalizations>({
+	empty: 'No results found',
+	input: 'Please enter a value',
+	invalid: 'Please select an option from the list',
+	max: max => `Please select fewer options (maximum is ${max})`,
+	min: min => `Please select more options (minimum is ${min})`,
+	remove: label => `Remove ${label}`,
+	results: amount => `${amount} results available`,
+	selected: amount => `${amount} selected`,
+});
+
+export const comboboxStates = {
+	map: new WeakMap<HTMLElement, OuiComboboxState>(),
+	set: new Set<OuiComboboxState>(),
+};
+
+// #endregion

package/src/js/index.ts

@@ -1,7 +1,7 @@
 import './menu';
 import './toolbar';
 
-export * from './combobox';
+export * from './combobox/index';
 export * from './dialog';
 export * from './floatable/floatable.standalone';
 export * from './focus-trap/focus-trap.standalone';

package/src/js/internal/draggable.ts

@@ -1,7 +1,7 @@
 import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
 import {clamp} from '@oscarpalmer/atoms/number';
 import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
-import {dispatch, getPosition, on} from '@oscarpalmer/toretto/event';
+import {dispatch, getEventPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {setStyle, setStyles, toggleStyles, type StyleToggler} from '@oscarpalmer/toretto/style';
@@ -392,7 +392,7 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 	const dragged = item.state.options.getDragged();
 	const rectangle = dragged.getBoundingClientRect();
 
-	const position = getPosition(event) ?? {x: 0, y: 0};
+	const position = getEventPosition(event) ?? {x: 0, y: 0};
 
 	current = item;
 
@@ -442,7 +442,7 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 		return;
 	}
 
-	const position = getPosition(event);
+	const position = getEventPosition(event);
 
 	if (position == null) {
 		return;

package/src/js/l10n.ts

@@ -0,0 +1,192 @@
+import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import {getString} from '@oscarpalmer/atoms/string';
+
+// #region Types
+
+type LocalizationParameters<Localization> = Localization extends GenericCallback
+	? Parameters<Localization>
+	: never;
+
+type OuiLocalizationValues = Record<string, string | GenericCallback>;
+
+export class OuiLocalizations<Localizations extends OuiLocalizationValues> {
+	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,
+		);
+	}
+}
+
+// #endregion
+
+// #region Functions
+
+export function getLanguage(element: Element): string {
+	return (
+		element.closest('[lang]')?.getAttribute('lang') ?? document.documentElement.lang
+	).toLowerCase();
+}
+
+export function getLocalization<
+	Localizations extends OuiLocalizationValues,
+	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 OuiLocalizationValues>(
+	defaults: Localizations,
+): OuiLocalizations<Localizations> {
+	return new OuiLocalizations(defaults);
+}
+
+export function localize<
+	Localizations extends OuiLocalizationValues,
+	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 OuiLocalizationValues>(
+	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/movable/movable.embedded.ts

@@ -1,6 +1,6 @@
 import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
 import {setAttribute} from '@oscarpalmer/toretto/attribute';
-import {dispatch, getPosition, on} from '@oscarpalmer/toretto/event';
+import {dispatch, getEventPosition, on} from '@oscarpalmer/toretto/event';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {getStyles, setStyle, setStyles} from '@oscarpalmer/toretto/style';
 import {attributable} from '../internal/attributable';
@@ -202,7 +202,7 @@ function onEnd(
 	const dispatched = dispatch(state.element, 'movable:end', {
 		detail: {
 			from: {...globals.original},
-			to: getPosition(event),
+			to: getEventPosition(event),
 		},
 	});
 

package/src/js/resizable/resizable.embedded.ts

@@ -2,7 +2,7 @@ import {isPlainObject} from '@oscarpalmer/atoms/is';
 import type {EventPosition} from '@oscarpalmer/atoms/models';
 import {getNumber} from '@oscarpalmer/atoms/number';
 import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
-import {dispatch, getPosition, on} from '@oscarpalmer/toretto/event';
+import {dispatch, getEventPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {setStyles, toggleStyles, type StyleToggler} from '@oscarpalmer/toretto/style';
@@ -279,7 +279,7 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 	const handle = findAncestor(event, SELECTOR_HANDLE);
 	const element = handle && findAncestor(handle, SELECTOR);
 	const stored = element && items.get(element as HTMLElement);
-	const position = getPosition(event);
+	const position = getEventPosition(event);
 
 	if (stored == null || position == null) {
 		return;
@@ -309,7 +309,7 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 		return;
 	}
 
-	const {x, y} = getPosition(event) ?? {};
+	const {x, y} = getEventPosition(event) ?? {};
 
 	if (x == null || y == null) {
 		return;

package/src/js/sortable/sortable.embedded.ts

@@ -1,7 +1,7 @@
 import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
 import {getAttribute, setAttribute, setAttributes} from '@oscarpalmer/toretto/attribute';
 import {createElement} from '@oscarpalmer/toretto/create';
-import {dispatch, getPosition} from '@oscarpalmer/toretto/event';
+import {dispatch, getEventPosition} from '@oscarpalmer/toretto/event';
 import {findAncestor, getElementFromPosition} from '@oscarpalmer/toretto/find';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {setStyle} from '@oscarpalmer/toretto/style';
@@ -214,7 +214,7 @@ function onEnd(
 ): void {
 	const {origin} = item.state;
 
-	const position = getPosition(event) ?? {x: 0, y: 0};
+	const position = getEventPosition(event) ?? {x: 0, y: 0};
 
 	const target = getElementFromPosition(position)[0];
 

package/src/js/splitter.ts

@@ -3,7 +3,7 @@ import {round} from '@oscarpalmer/atoms/math';
 import {clamp} from '@oscarpalmer/atoms/number';
 import {setAria} from '@oscarpalmer/toretto/aria';
 import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
-import {getPosition, on} from '@oscarpalmer/toretto/event';
+import {getEventPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {setStyle, toggleStyles} from '@oscarpalmer/toretto/style';
 import supportsTouch from '@oscarpalmer/toretto/touch';
@@ -464,7 +464,7 @@ function onPointermove(event: MouseEvent): void {
 		return;
 	}
 
-	const position = getPosition(event);
+	const position = getEventPosition(event);
 
 	if (position != null) {
 		splitter.values.now.current = getSize(

package/dist/js/combobox.d.mts

@@ -1,91 +0,0 @@
-//#region src/js/combobox.d.ts
-declare global {
-  interface HTMLElementTagNameMap {
-    [TAGNAME]: OuiComboboxElement;
-  }
-}
-declare class OuiComboboxElement extends HTMLElement {
-  #private;
-  static formAssociated: boolean;
-  static observedAttributes: string[];
-  /**
-   * Is the combobox disabled?
-   */
-  get disabled(): boolean;
-  /**
-   * Should the combobox be disabled?
-   */
-  set disabled(value: boolean);
-  /**
-   * Maximum number of selected options
-   */
-  get max(): number | undefined;
-  /**
-   * Set the maximum number of selected options
-   */
-  set max(value: number);
-  /**
-   * Minimum number of selected options
-   */
-  get min(): number | undefined;
-  /**
-   * Set the minimum number of selected options
-   */
-  set min(value: number);
-  /**
-   * Does the combobox allow multiple values?
-   */
-  get multiple(): boolean;
-  /**
-   * Name of the combobox
-   */
-  get name(): string;
-  /**
-   * Is the combobox readonly?
-   */
-  get readonly(): boolean;
-  /**
-   * Should the combobox be readonly?
-   */
-  set readonly(value: boolean);
-  /**
-   * Is the combobox required?
-   */
-  get required(): boolean;
-  /**
-   * Should the combobox be required?
-   */
-  set required(value: boolean);
-  /**
-   * Selected options
-   */
-  get selected(): HTMLElement[];
-  /**
-   * Type of combobox
-   */
-  get type(): OuiComboboxType;
-  /**
-   * Current value
-   */
-  get value(): string;
-  /**
-   * Set the value
-   */
-  set value(value: unknown);
-  /**
-   * Current values
-   */
-  get values(): string[];
-  /**
-   * Set the values
-   */
-  set values(value: unknown[]);
-  constructor();
-  attributeChangedCallback(name: string, _: string | null, value: string | null): void;
-  clear(): void;
-  formResetCallback(): void;
-}
-type OuiComboboxType = 'autocomplete' | 'select';
-declare const TAGNAME = "oui-combobox";
-//#endregion
-export { OuiComboboxElement };