@oscarpalmer/oui 0.35.0 → 0.37.0

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

@@ -0,0 +1,196 @@
+import {noop} from '@oscarpalmer/atoms/function';
+import {setAttribute, setAttributes} from '@oscarpalmer/toretto/attribute';
+import {getData} from '@oscarpalmer/toretto/data';
+import {createListboxContent} from '../internal/listbox/listbox.dom';
+import {generateListboxIds} from '../internal/listbox/listbox.misc';
+import type {
+	OuiListboxAutoCompleteType,
+	OuiListboxCallbacks,
+	OuiListboxLocalizations,
+	OuiListboxState,
+	OuiListboxStates,
+} from '../internal/listbox/listbox.model';
+import {initializeListboxState} from '../internal/listbox/listbox.state';
+import {getBooleanAriaValue} from '../internal/misc';
+import {getLocalizations} from '../l10n';
+import {LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES} from './constants.listbox';
+import {
+	onListboxEnter,
+	onListboxFilter,
+	onListboxNavigation,
+	onListboxToggle,
+} from './event.listbox';
+import type {OuiListboxElement} from './index';
+import {getListboxId} from './misc.listbox';
+
+// #region Functions
+
+export function createListboxState(
+	element: OuiListboxElement,
+	internals: ElementInternals,
+): OuiListboxState {
+	const select = element.querySelector('select');
+
+	if (select == null) {
+		throw new Error(LISTBOX_MESSAGES.select);
+	}
+
+	const label = element.querySelector(`label[for="${select.id}"]`) as HTMLLabelElement;
+
+	if (label == null) {
+		throw new Error(LISTBOX_MESSAGES.label);
+	}
+
+	element.id = select.id;
+
+	setAttribute(element, 'name', select.name === '' ? select.id : select.name);
+
+	const disabled = getBooleanAriaValue(element, 'disabled') || select.disabled;
+	const multiple = element.multiple || select.multiple;
+	const readonly = getBooleanAriaValue(element, 'readonly');
+	const required = getBooleanAriaValue(element, 'required') || select.required;
+
+	setAttributes(element, {
+		autocomplete: 'none',
+		name: select.name === '' ? select.id : select.name,
+	});
+
+	const id = getListboxId();
+
+	const labelId = label.id;
+
+	label.htmlFor = id;
+	label.id = `${id}_label`;
+
+	generateListboxIds(id, select);
+
+	const type = 'select';
+
+	const content = createListboxContent({
+		element,
+		id,
+		label,
+		multiple,
+		select,
+		type,
+		attributes: LISTBOX_ATTRIBUTES,
+		autocomplete: listboxAutoComplete,
+		listbox: true,
+	});
+
+	const {selected} = content.list.options;
+
+	const values =
+		selected.length === 0 ? [''] : selected.map(option => getData(option, 'value', false) ?? '');
+
+	const state: OuiListboxState = {
+		disabled,
+		id,
+		internals,
+		message: content.message,
+		multiple,
+		readonly,
+		required,
+		select,
+		type,
+		active: selected[0],
+		attributes: LISTBOX_ATTRIBUTES,
+		autocomplete: listboxAutoComplete,
+		callbacks: listboxCallbacks,
+		content: content.element,
+		elements: [element, content.filter!.element],
+		filter: {
+			element: content.filter!.element,
+			value: '',
+		},
+		host: element,
+		label: {
+			id: labelId,
+			element: label,
+		},
+		list: content.list.element,
+		listeners: [],
+		listbox: true,
+		localizations: {
+			component: {},
+			global: listboxLocalizations,
+		},
+		name: element.name,
+		options: content.list.options,
+		values: {
+			current: values.slice(),
+			initial: values.slice(),
+			label: content.value,
+		},
+	};
+
+	return initializeListboxState(state, listboxStates, onAttachListbox);
+}
+
+// #endregion
+
+// #region Functions
+
+export function onAttachListbox(state: OuiListboxState): void {
+	const {content, select} = state;
+
+	select.hidden = true;
+
+	select.insertAdjacentElement('afterend', content);
+
+	select.remove();
+}
+
+export function onDetachListbox(state: OuiListboxState): void {
+	const {content, select} = state;
+
+	content.insertAdjacentElement('beforebegin', select);
+
+	content.remove();
+
+	select.hidden = false;
+}
+
+// #endregion
+
+// #region Variables
+
+const listboxAutoComplete: Record<OuiListboxAutoCompleteType, boolean> = {
+	both: false,
+	inline: false,
+	list: false,
+	none: true,
+};
+
+const listboxCallbacks: OuiListboxCallbacks = {
+	data: {
+		onApply: noop,
+		onFilter: onListboxFilter,
+		onForm: noop,
+		onPreview: noop,
+		onToggle: onListboxToggle,
+	},
+	keydown: {
+		onEnter: onListboxEnter,
+		onNavigation: onListboxNavigation,
+		onToggle: onListboxToggle,
+	},
+};
+
+export const listboxLocalizations = getLocalizations<OuiListboxLocalizations>({
+	empty: 'No results found',
+	input: '',
+	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: '',
+	results: amount => `${amount} results available`,
+	selected: amount => `${amount} selected`,
+});
+
+export const listboxStates: OuiListboxStates = {
+	map: new WeakMap(),
+	set: new Set(),
+};
+
+// #endregion

package/src/js/movable/movable.embedded.ts

@@ -199,20 +199,18 @@ function onEnd(
 		setOffset(state, container);
 	}
 
-	const dispatched = dispatch(state.element, 'movable:end', {
-		detail: {
-			from: {...globals.original},
-			to: getEventPosition(event),
-		},
-	});
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			onCancel(globals, item);
-		}
+	if (
+		dispatch(state.element, 'oui:movable:end', {
+			detail: {
+				from: {...globals.original},
+				to: getEventPosition(event),
+			},
+		}).defaultPrevented
+	) {
+		onCancel(globals, item);
+	}
 
-		reset();
-	});
+	reset();
 }
 
 function onMove(

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

@@ -101,7 +101,7 @@ function cancelResize(item?: OuiResizableItem): void {
 
 	resetResizable();
 
-	dispatch(item.state.element, 'resizable:cancel');
+	dispatch(item.state.element, 'oui:resizable:cancel');
 }
 
 /**
@@ -289,19 +289,15 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 		event.preventDefault();
 	}
 
-	const dispatched = dispatch(element!, 'resizable:begin');
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			return;
-		}
+	if (dispatch(element!, 'oui:resizable:begin').defaultPrevented) {
+		return;
+	}
 
-		current = stored;
-		start = position;
+	current = stored;
+	start = position;
 
-		current.state.styles.set();
-		styleToggler.set();
-	});
+	current.state.styles.set();
+	styleToggler.set();
 }
 
 function onPointermove(event: MouseEvent | TouchEvent): void {
@@ -320,41 +316,31 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 
 	getAndSetDimensions(current.state.element, current.state.options, {height, width});
 
-	const dispatched = dispatch(current.state.element, 'resizable:resize', {
-		detail: {
-			height,
-			width,
-		},
-	});
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			cancelResize(current);
-		}
-	});
+	if (
+		dispatch(current.state.element, 'oui:resizable:resize', {
+			detail: {
+				height,
+				width,
+			},
+		}).defaultPrevented
+	) {
+		cancelResize(current);
+	}
 }
 
 function onPointerup(): void {
-	if (current == null) {
+	if (current == null || dispatch(current.state.element, 'oui:resizable:end').defaultPrevented) {
+		cancelResize(current);
+
 		return;
 	}
 
-	const dispatched = dispatch(current.state.element, 'resizable:end');
-
-	setTimeout(() => {
-		if (current == null || dispatched.defaultPrevented) {
-			cancelResize(current);
+	const {height, width} = current.state.element.getBoundingClientRect();
 
-			return;
-		}
-
-		const {height, width} = current.state.element.getBoundingClientRect();
+	current.state.height = height;
+	current.state.width = width;
 
-		current.state.height = height;
-		current.state.width = width;
-
-		resetResizable();
-	});
+	resetResizable();
 }
 
 function removeResizable(element: HTMLElement): void {

package/src/js/splitter.ts

@@ -3,6 +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 {createElement} from '@oscarpalmer/toretto/create';
 import {getEventPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {setStyle, toggleStyles} from '@oscarpalmer/toretto/style';
@@ -238,28 +239,30 @@ type OuiSplitterValuesNow = {
 // #region Functions
 
 function createHandle(): HTMLSpanElement {
-	const handle = document.createElement('span');
-
-	setAria(handle, 'hidden', 'true');
-	setAttribute(handle, ATTRIBUTE_HANDLE, '');
-
-	return handle;
+	return createElement('span', {
+		aria: {
+			hidden: true,
+		},
+		attribute: {
+			[ATTRIBUTE_HANDLE]: '',
+		},
+	});
 }
 
 function createSeparator(splitter: OuiSplitter): HTMLDivElement {
-	const separator = document.createElement('div');
-
-	separator.role = 'separator';
-	separator.tabIndex = 0;
-
-	setAria(separator, {
-		controls: splitter.element.id,
-		label: 'Resize panels',
+	return createElement('div', {
+		aria: {
+			controls: splitter.element.id,
+			label: 'Resize panels',
+		},
+		attribute: {
+			[ATTRIBUTE_SEPARATOR]: '',
+		},
+		property: {
+			role: 'separator',
+			tabIndex: 0,
+		},
 	});
-
-	setAttribute(separator, ATTRIBUTE_SEPARATOR, '');
-
-	return separator;
 }
 
 function getContained(min: number, value: number, max: number): number {