@oscarpalmer/oui 0.35.0 → 0.37.0

package/src/js/index.ts

@@ -5,9 +5,11 @@ export * from './combobox/index';
 export * from './dialog';
 export * from './floatable/floatable.standalone';
 export * from './focus-trap/focus-trap.standalone';
+export * from './listbox/index';
 export * from './movable/movable.standalone';
 export * from './popover';
 export * from './resizable/resizable.standalone';
 export * from './sortable/sortable.standalone';
 export * from './splitter';
+export * from './tabs';
 export * from './tooltip';

package/src/js/internal/draggable.ts

@@ -258,7 +258,7 @@ function cancelDrag(item?: OuiDraggableItem): void {
 
 	item.state.options.drag.onCancel?.(globals, item);
 
-	dispatch(item.state.element, `${item.state.name}:cancel`, {
+	dispatch(item.state.element, `oui:${item.state.name}:cancel`, {
 		detail: {
 			element: item.state.options.getOrigin(),
 		},
@@ -406,35 +406,33 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 	globals.offset = item.state.options.position.getOffset(globals, item, element, position);
 	globals.original = item.state.options.position.getOriginal(globals, item, position);
 
-	const dispatched = dispatch(item.state.element, `${item.state.name}:begin`, {
-		detail: {
-			element,
-			position: {...globals.original},
-		},
-	});
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			item.state.options.drag.onCancel?.(globals, item);
+	if (
+		dispatch(item.state.element, `oui:${item.state.name}:begin`, {
+			detail: {
+				element,
+				position: {...globals.original},
+			},
+		}).defaultPrevented
+	) {
+		item.state.options.drag.onCancel?.(globals, item);
 
-			reset();
+		reset();
 
-			return;
-		}
+		return;
+	}
 
-		const next = getNextPosition(item, position);
+	const next = getNextPosition(item, position);
 
-		setStyles(dragged, {
-			position: 'fixed',
-			inset: `${next.y}px auto auto ${next.x}px`,
-			transform: 'translate3d(0, 0, 0)',
-		});
+	setStyles(dragged, {
+		position: 'fixed',
+		inset: `${next.y}px auto auto ${next.x}px`,
+		transform: 'translate3d(0, 0, 0)',
+	});
 
-		item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
+	item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
 
-		item.state.styling.set();
-		styleToggler.set();
-	});
+	item.state.styling.set();
+	styleToggler.set();
 }
 
 function onPointermove(event: MouseEvent | TouchEvent): void {
@@ -459,15 +457,13 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 		original: position,
 	});
 
-	const dispatched = dispatch(current.state.element, `${current.state.name}:move`, {
-		detail,
-	});
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			cancelDrag(current);
-		}
-	});
+	if (
+		dispatch(current.state.element, `oui:${current.state.name}:move`, {
+			detail,
+		}).defaultPrevented
+	) {
+		cancelDrag(current);
+	}
 }
 
 function onPointerup(event: MouseEvent | TouchEvent): void {

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

@@ -0,0 +1,25 @@
+import type {OuiListboxType} from './listbox.model';
+
+// #region Variables
+
+const keysActivation = new Set([' ', 'Backspace', 'Delete', 'Enter']);
+
+const keysNavigation = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
+
+const keysSelection = new Set(['ArrowRight', 'End']);
+
+export const LISTBOX_KEYS = {
+	activation: keysActivation,
+	navigation: keysNavigation,
+	selection: keysSelection,
+};
+
+export const LISTBOX_TYPES = new Set<OuiListboxType>(['autocomplete', 'select']);
+
+export const listboxScrollOptions: ScrollIntoViewOptions = {
+	behavior: 'auto',
+	block: 'nearest',
+	inline: 'nearest',
+};
+
+// #endregion

package/src/js/{combobox/data.combobox.ts → internal/listbox/listbox.data.ts}

@@ -1,23 +1,22 @@
 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 {
-	updateComboboxMessage,
-	updateComboboxPreview,
-	updateComboboxSelection,
-} from './dom.combobox';
-import {onComboboxFilter} from './event.combobox';
-import {updateComboboxForm} from './form.combobox';
-import type {OuiComboboxState} from './models.combobox';
+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 = {
+type ApplySelectionParameters<State extends OuiListboxState = OuiListboxState> = {
 	added: boolean;
 	emit?: boolean;
 	option?: HTMLElement;
+	scroll?: boolean;
 	selected?: HTMLElement[];
-	state: OuiComboboxState;
+	state: State;
 	values?: string[];
 };
 
@@ -25,20 +24,26 @@ type ApplySelectionParameters = {
 
 // #region Functions
 
-export function applyComboboxSelection(parameters: ApplySelectionParameters): void {
-	const {added, emit, option, selected, state} = parameters;
-
+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', (selected ?? state.options.selected).includes(option));
+		setAria(
+			option,
+			'selected',
+			(state.type === 'select' || !state.autocomplete.none) &&
+				(selected ?? state.options.selected).includes(option),
+		);
 	}
 
 	const values =
 		parameters.values ??
-		(state.autocomplete.none
+		(state.autocomplete.none && !state.listbox
 			? [state.filter.element.value]
 			: (selected ?? state.options.selected).map(option => getData(option, 'value', false) ?? ''));
 
@@ -59,13 +64,44 @@ export function applyComboboxSelection(parameters: ApplySelectionParameters): vo
 		return;
 	}
 
-	updateComboboxForm(state, values, emit);
-	updateComboboxPreview('set', state, option);
-	updateComboboxSelection(state, option, added, selected);
+	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 filterComboboxOption(
-	state: OuiComboboxState,
+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 {
@@ -73,9 +109,10 @@ export function filterComboboxOption(
 
 	const filter = getString(value).toLocaleLowerCase();
 
-	filterComboboxOptions(state);
+	filterListboxOptions(state);
 
 	const {length} = state.options.all;
+
 	let match: HTMLElement | undefined;
 
 	for (let index = 0; index < length; index += 1) {
@@ -95,7 +132,7 @@ export function filterComboboxOption(
 	return match;
 }
 
-export function filterComboboxOptions(state: OuiComboboxState): HTMLElement | undefined {
+export function filterListboxOptions(state: OuiListboxState): HTMLElement | undefined {
 	function filter(options: HTMLElement[]): boolean {
 		const {length} = options;
 
@@ -105,7 +142,8 @@ export function filterComboboxOptions(state: OuiComboboxState): HTMLElement | un
 			const option = options[index];
 
 			option.hidden =
-				!state.autocomplete.none && !option.textContent.toLocaleLowerCase().includes(value);
+				(state.type === 'select' || !state.autocomplete.none) &&
+				!option.textContent.toLocaleLowerCase().includes(value);
 
 			if (!option.hidden) {
 				count += 1;
@@ -133,28 +171,36 @@ export function filterComboboxOptions(state: OuiComboboxState): HTMLElement | un
 		}
 	}
 
-	updateComboboxMessage(state, visible.length);
+	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 setComboboxValue(state: OuiComboboxState, value: unknown, emit?: boolean): void {
-	if (state.autocomplete.none) {
-		state.filter.element.value = getString(value);
-
-		onComboboxFilter('insertText', state, true, emit);
+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 = filterComboboxOption(state, value);
+	const option = filterListboxOption(state, value);
 
 	if (option != null) {
-		setComboboxValues(state, [value], emit);
+		setListboxValues(state, [value], emit);
 	}
 }
 
-export function setComboboxValues(state: OuiComboboxState, value: unknown, emit?: boolean): void {
+export function setListboxValues<State extends OuiListboxState>(
+	state: State,
+	value: unknown[],
+	emit?: boolean,
+): void {
 	if (!Array.isArray(value)) {
 		return;
 	}
@@ -167,8 +213,8 @@ export function setComboboxValues(state: OuiComboboxState, value: unknown, emit?
 		values.push('');
 	}
 
-	if (state.autocomplete.none) {
-		setComboboxValue(state, values[0], emit);
+	if (state.autocomplete.none && !state.listbox) {
+		setListboxValue(state, values[0], emit);
 
 		return;
 	}
@@ -185,19 +231,22 @@ export function setComboboxValues(state: OuiComboboxState, value: unknown, emit?
 		}
 	}
 
-	applyComboboxSelection({
+	applyListboxSelection({
 		emit,
 		selected,
 		state,
 		added: true,
 		option: selected[0] ?? state.options.all[0],
-		values: state.autocomplete.none ? values : undefined,
+		values: state.autocomplete.none && !state.listbox ? values : undefined,
 	});
 }
 
-export function toggleComboboxOption(state: OuiComboboxState, option?: HTMLElement): void {
+export function toggleListboxOption<State extends OuiListboxState>(
+	state: State,
+	option?: HTMLElement,
+): void {
 	if (option == null || (!state.multiple && state.options.selected.includes(option))) {
-		state.floatable.hide();
+		state.callbacks.data.onToggle(state);
 
 		return;
 	}
@@ -220,17 +269,19 @@ export function toggleComboboxOption(state: OuiComboboxState, option?: HTMLEleme
 		selected.splice(0, selected.length, option);
 	}
 
-	applyComboboxSelection({
+	applyListboxSelection({
 		added,
 		option,
 		selected,
 		state,
-		values: state.autocomplete.none && option != null ? [option.textContent] : undefined,
+		scroll: false,
+		values:
+			state.autocomplete.none && !state.listbox && option != null
+				? [option.textContent]
+				: undefined,
 	});
 
-	if (!state.multiple) {
-		state.floatable.hide();
-	}
+	state.callbacks.data.onToggle(state);
 }
 
 // #endregion