@oscarpalmer/oui 0.33.0 → 0.34.0

package/dist/js/internal/draggable.mjs

@@ -1,9 +1,9 @@
-import { clamp } from "@oscarpalmer/atoms/number";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { dispatch, getPosition, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/internal/draggable.ts
 var OuiDraggable = class {
@@ -118,7 +118,7 @@ function onPointerdown(event) {
 	if (handle == null) return;
 	const dragged = item.state.options.getDragged();
 	const rectangle = dragged.getBoundingClientRect();
-	const position = getPosition(event) ?? {
+	const position = getEventPosition(event) ?? {
 		x: 0,
 		y: 0
 	};
@@ -153,7 +153,7 @@ function onPointerdown(event) {
 }
 function onPointermove(event) {
 	if (current == null) return;
-	const position = getPosition(event);
+	const position = getEventPosition(event);
 	if (position == null) return;
 	const next = getNextPosition(current, position);
 	if (globals.element != null) setStyle(globals.element.node, "inset", `${next.y}px auto auto ${next.x}px`);

package/dist/js/internal/navigable.mjs

@@ -1,8 +1,8 @@
-import { clamp } from "@oscarpalmer/atoms/number";
 import { getAria, setRole } from "@oscarpalmer/toretto/aria";
 import { dispatch, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 //#region src/js/internal/navigable.ts
 var OuiNavigable = class {
 	active = { index: 0 };
@@ -17,7 +17,7 @@ var OuiNavigable = class {
 			onFocusin(this, event);
 		}), on(element, "keydown", (event) => {
 			onKeydown(this, event);
-		})];
+		}, { passive: false })];
 		this.orientation = getOrientation(element, options);
 		if (options.role != null) setRole(element, options.role);
 	}

package/dist/js/menu.d.mts

@@ -1 +1 @@
-export { };
+export {}

package/dist/js/menu.mjs

@@ -2,8 +2,8 @@ import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/
 import { attributable } from "./internal/attributable.mjs";
 import { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
 import { setAria, setRole } from "@oscarpalmer/toretto/aria";
-import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
+import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 //#region src/js/menu.ts
 var OuiMenu = class {
@@ -120,7 +120,8 @@ function onDeactivate(_, navigable) {
 	if (instance != null) updateNavigableFocus(instance.navigable, true);
 }
 function onPreventNavigation(_, navigable) {
-	return findAncestor((menubars.get(navigable.element) ?? menus.get(navigable.element))?.element.parentElement, SELECTORS) != null;
+	const instance = menubars.get(navigable.element) ?? menus.get(navigable.element);
+	return findAncestor(instance?.element.parentElement, SELECTORS) != null;
 }
 function onShouldActivate(event, navigable) {
 	let activate = false;

package/dist/js/movable/movable.embedded.mjs

@@ -1,9 +1,9 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { dispatch, getPosition, on } from "@oscarpalmer/toretto/event";
-import { getStyles, setStyle, setStyles } from "@oscarpalmer/toretto/style";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { getStyles, setStyle, setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/movable/movable.embedded.ts
 var OuiMovable = class extends OuiDraggable {
 	#element;
@@ -112,7 +112,7 @@ function onEnd(event, globals, item, reset) {
 	if (container != null) setOffset(state, container);
 	const dispatched = dispatch(state.element, "movable:end", { detail: {
 		from: { ...globals.original },
-		to: getPosition(event)
+		to: getEventPosition(event)
 	} });
 	setTimeout(() => {
 		if (dispatched.defaultPrevented) onCancel(globals, item);

package/dist/js/popover.mjs

@@ -2,8 +2,8 @@ import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/
 import { attributable } from "./internal/attributable.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import { getAria, setAria } from "@oscarpalmer/toretto/aria";
-import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/popover.ts
 var OuiPopover = class {

package/dist/js/resizable/resizable.embedded.mjs

@@ -1,11 +1,11 @@
 import { attributable } from "../internal/attributable.mjs";
-import { getNumber } from "@oscarpalmer/atoms/number";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { dispatch, getPosition, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
+import { getNumber } from "@oscarpalmer/atoms/number";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/resizable/resizable.embedded.ts
 var OuiResizable = class {
@@ -127,7 +127,7 @@ function onPointerdown(event) {
 	const handle = findAncestor(event, SELECTOR_HANDLE);
 	const element = handle && findAncestor(handle, SELECTOR);
 	const stored = element && items.get(element);
-	const position = getPosition(event);
+	const position = getEventPosition(event);
 	if (stored == null || position == null) return;
 	if (supportsTouch.value) event.preventDefault();
 	const dispatched = dispatch(element, "resizable:begin");
@@ -141,7 +141,7 @@ function onPointerdown(event) {
 }
 function onPointermove(event) {
 	if (current == null) return;
-	const { x, y } = getPosition(event) ?? {};
+	const { x, y } = getEventPosition(event) ?? {};
 	if (x == null || y == null) return;
 	const width = current.state.width + (x - (start?.x ?? 0));
 	const height = current.state.height + (y - (start?.y ?? 0));

package/dist/js/sortable/sortable.embedded.mjs

@@ -1,11 +1,11 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
+import { dispatch, getEventPosition } from "@oscarpalmer/toretto/event";
 import { getAttribute, setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
-import { createElement } from "@oscarpalmer/toretto/create";
-import { dispatch, getPosition } from "@oscarpalmer/toretto/event";
-import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
-import { setStyle } from "@oscarpalmer/toretto/style";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyle } from "@oscarpalmer/toretto/style";
+import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
+import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/sortable/sortable.embedded.ts
 var OuiSortable = class extends OuiDraggable {
 	constructor(element, options) {
@@ -92,7 +92,7 @@ function onCancel(_, item) {
 }
 function onEnd(event, globals, item, reset) {
 	const { origin } = item.state;
-	const position = getPosition(event) ?? {
+	const position = getEventPosition(event) ?? {
 		x: 0,
 		y: 0
 	};
@@ -258,6 +258,7 @@ const placeholder = {
 	position: void 0
 };
 const addSortable = addDraggable.bind(bound);
-attributable(ATTRIBUTE, addSortable, removeDraggable.bind(bound));
+const removeSortable = removeDraggable.bind(bound);
+attributable(ATTRIBUTE, addSortable, removeSortable);
 //#endregion
 export { OuiSortable, createSortable };

package/dist/js/splitter.mjs

@@ -1,10 +1,10 @@
-import { clamp } from "@oscarpalmer/atoms/number";
 import { setAria } from "@oscarpalmer/toretto/aria";
+import { getEventPosition, on } from "@oscarpalmer/toretto/event";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { getPosition, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 import { round } from "@oscarpalmer/atoms/math";
 //#region src/js/splitter.ts
@@ -130,10 +130,7 @@ var OuiSplitterElement = class extends HTMLElement {
 			case ATTRIBUTE_SIZE:
 				this.#splitter.updateValues();
 				break;
-			case ATTRIBUTE_TYPE:
-				this.#splitter.updateOrientation();
-				break;
-			default: break;
+			case ATTRIBUTE_TYPE: this.#splitter.updateOrientation();
 		}
 	}
 };
@@ -213,10 +210,7 @@ function onKeydown(event) {
 		case KEYS_ALL.has(event.key):
 			onNavigate(event);
 			break;
-		case event.key === "Escape":
-			onEnd(true);
-			break;
-		default: break;
+		case event.key === "Escape": onEnd(true);
 	}
 }
 function onNavigate(event) {
@@ -256,7 +250,7 @@ function onPointerdown(event) {
 }
 function onPointermove(event) {
 	if (splitter == null) return;
-	const position = getPosition(event);
+	const position = getEventPosition(event);
 	if (position != null) {
 		splitter.values.now.current = getSize(splitter, splitter.types.horizontal ? position.y : position.x);
 		setSize(splitter, splitter.values.now.current);

package/dist/js/toolbar.d.mts

@@ -1 +1 @@
-export { };
+export {}

package/dist/js/tooltip.mjs

@@ -1,11 +1,11 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { getAria } from "@oscarpalmer/toretto/aria";
-import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { createElement } from "@oscarpalmer/toretto/create";
 import { on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/tooltip.ts
 var OuiTooltip = class {
 	#state;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.33.0",
+	"version": "0.34.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -34,8 +34,8 @@
 			"default": "./dist/js/index.mjs"
 		},
 		"./combobox": {
-			"types": "./dist/js/combobox.d.mts",
-			"default": "./dist/js/combobox.mjs"
+			"types": "./dist/js/combobox/index.d.mts",
+			"default": "./dist/js/combobox/index.mjs"
 		},
 		"./dialog": {
 			"types": "./dist/js/dialog.d.mts",
@@ -95,7 +95,7 @@
 	},
 	"dependencies": {
 		"@oscarpalmer/atoms": "^0.188.1",
-		"@oscarpalmer/toretto": "^0.49.1"
+		"@oscarpalmer/toretto": "^0.50.1"
 	},
 	"devDependencies": {
 		"@oxlint/plugins": "^1.77",

package/src/js/combobox/constants.combobox.ts

@@ -0,0 +1,62 @@
+import type {OuiComboboxAutoCompleteType, OuiComboboxType} from './models.combobox';
+
+// #region Variables
+
+export const COMBOBOX_TAGNAME = 'oui-combobox';
+
+export const COMBOBOX_ATTRIBUTE_ANCHOR = `${COMBOBOX_TAGNAME}-anchor`;
+
+export const COMBOBOX_ATTRIBUTE_CONTENT = `${COMBOBOX_TAGNAME}-content`;
+
+export const COMBOBOX_ATTRIBUTE_FILTER = `${COMBOBOX_TAGNAME}-filter`;
+
+export const COMBOBOX_ATTRIBUTE_FILTER_INPUT = `${COMBOBOX_ATTRIBUTE_FILTER}-input`;
+
+export const COMBOBOX_ATTRIBUTE_HEADER = `${COMBOBOX_TAGNAME}-header`;
+
+export const COMBOBOX_ATTRIBUTE_HIDDEN = `${COMBOBOX_TAGNAME}-hidden`;
+
+export const COMBOBOX_ATTRIBUTE_LIST = `${COMBOBOX_TAGNAME}-list`;
+
+export const COMBOBOX_ATTRIBUTE_MESSAGE = `${COMBOBOX_TAGNAME}-message`;
+
+export const COMBOBOX_ATTRIBUTE_OPTION = `${COMBOBOX_TAGNAME}-option`;
+
+export const COMBOBOX_ATTRIBUTE_OPTION_ACTIVE = `${COMBOBOX_TAGNAME}-option-active`;
+
+export const COMBOBOX_ATTRIBUTE_SELECTION = `${COMBOBOX_TAGNAME}-selection`;
+
+export const COMBOBOX_ATTRIBUTE_SELECTION_ITEM = `${COMBOBOX_TAGNAME}-selection-item`;
+
+export const COMBOBOX_AUTOCOMPLETES = new Set<OuiComboboxAutoCompleteType>([
+	'both',
+	'inline',
+	'list',
+	'none',
+]);
+
+export const COMBOBOX_KEYS_ACTIVATION = new Set([' ', 'Backspace', 'Delete', 'Enter']);
+
+export const COMBOBOX_KEYS_NAVIGATION = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
+
+export const COMBOBOX_KEYS_SELECTION = new Set(['ArrowRight', 'End']);
+
+export const COMBOBOX_MESSAGE_LABEL = `<${COMBOBOX_TAGNAME}> must contain a <label> element for the <select> element`;
+
+export const COMBOBOX_MESSAGE_SELECT = `<${COMBOBOX_TAGNAME}> must contain a valid <select> element`;
+
+export const COMBOBOX_SELECTOR_ANCHOR = `[${COMBOBOX_ATTRIBUTE_ANCHOR}]`;
+
+export const COMBOBOX_SELECTOR_SELECTION_ITEM = `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`;
+
+export const COMBOBOX_SELECTOR_OPTION = `[${COMBOBOX_ATTRIBUTE_OPTION}]`;
+
+export const COMBOBOX_TYPES = new Set<OuiComboboxType>(['autocomplete', 'select']);
+
+export const comboboxScrollOptions: ScrollIntoViewOptions = {
+	behavior: 'auto',
+	block: 'nearest',
+	inline: 'nearest',
+};
+
+// #endregion

package/src/js/combobox/data.combobox.ts

@@ -0,0 +1,236 @@
+import {getString} from '@oscarpalmer/atoms/string';
+import {setAria} from '@oscarpalmer/toretto/aria';
+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';
+
+// #region Types
+
+type ApplySelectionParameters = {
+	added: boolean;
+	emit?: boolean;
+	option?: HTMLElement;
+	selected?: HTMLElement[];
+	state: OuiComboboxState;
+	values?: string[];
+};
+
+// #endregion
+
+// #region Functions
+
+export function applyComboboxSelection(parameters: ApplySelectionParameters): void {
+	const {added, emit, option, 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));
+	}
+
+	const values =
+		parameters.values ??
+		(state.autocomplete.none
+			? [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;
+	}
+
+	updateComboboxForm(state, values, emit);
+	updateComboboxPreview('set', state, option);
+	updateComboboxSelection(state, option, added, selected);
+}
+
+export function filterComboboxOption(
+	state: OuiComboboxState,
+	value: unknown,
+	textContent?: boolean,
+): HTMLElement | undefined {
+	const filterTextContent = textContent ?? false;
+
+	const filter = getString(value).toLocaleLowerCase();
+
+	filterComboboxOptions(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 filterComboboxOptions(state: OuiComboboxState): 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.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);
+		}
+	}
+
+	updateComboboxMessage(state, visible.length);
+
+	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);
+
+		return;
+	}
+
+	const option = filterComboboxOption(state, value);
+
+	if (option != null) {
+		setComboboxValues(state, [value], emit);
+	}
+}
+
+export function setComboboxValues(state: OuiComboboxState, 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) {
+		setComboboxValue(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);
+		}
+	}
+
+	applyComboboxSelection({
+		emit,
+		selected,
+		state,
+		added: true,
+		option: selected[0] ?? state.options.all[0],
+		values: state.autocomplete.none ? values : undefined,
+	});
+}
+
+export function toggleComboboxOption(state: OuiComboboxState, option?: HTMLElement): void {
+	if (option == null || (!state.multiple && state.options.selected.includes(option))) {
+		state.floatable.hide();
+
+		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);
+	}
+
+	applyComboboxSelection({
+		added,
+		option,
+		selected,
+		state,
+		values: state.autocomplete.none && option != null ? [option.textContent] : undefined,
+	});
+
+	if (!state.multiple) {
+		state.floatable.hide();
+	}
+}
+
+// #endregion