@oscarpalmer/oui 0.32.0 → 0.34.0

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

@@ -0,0 +1,235 @@
+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 {
+	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 {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 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/internal/navigable.ts

@@ -28,9 +28,16 @@ export class OuiNavigable {
 			on(element, 'focusin', event => {
 				onFocusin(this, event);
 			}),
-			on(element, 'keydown', event => {
-				onKeydown(this, event);
-			}),
+			on(
+				element,
+				'keydown',
+				event => {
+					onKeydown(this, event);
+				},
+				{
+					passive: false,
+				},
+			),
 		];
 
 		this.orientation = getOrientation(element, options);

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 };