@oscarpalmer/oui 0.29.1 → 0.31.0

package/src/js/focus-trap/focus-trap.embedded.ts

@@ -1,7 +1,7 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
 import {clamp} from '@oscarpalmer/atoms/number';
 import {setAttribute} from '@oscarpalmer/toretto/attribute';
-import {on} from '@oscarpalmer/toretto/event';
+import {dispatch, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {getFocusable} from '@oscarpalmer/toretto/focusable';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
@@ -289,19 +289,27 @@ function onTab(event: KeyboardEvent): void {
 		return;
 	}
 
-	if (!instance.disabled) {
-		event.preventDefault();
-	}
+	const dispatched = dispatch(element, 'focus-trap');
+
+	setTimeout(() => {
+		if (dispatched.defaultPrevented) {
+			return;
+		}
+
+		if (!instance.disabled) {
+			event.preventDefault();
+		}
 
-	const elements = getFocusable(element);
+		const elements = getFocusable(element);
 
-	const index = elements.indexOf(event.target as HTMLElement);
+		const index = elements.indexOf(event.target as HTMLElement);
 
-	if (index === -1 || elements.length === 0) {
-		tabToTrap(instance, elements, element);
-	} else {
-		tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
-	}
+		if (index === -1 || elements.length === 0) {
+			tabToTrap(instance, elements, element);
+		} else {
+			tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
+		}
+	});
 }
 
 export function removeFocusTrap(element: HTMLElement): void {

package/src/js/index.ts

@@ -1,6 +1,7 @@
 import './menu';
 import './toolbar';
 
+export * from './combobox';
 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 {getPosition, on} from '@oscarpalmer/toretto/event';
+import {dispatch, getPosition, 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';
@@ -27,8 +27,6 @@ type OuiDraggableDirection = 'horizontal' | 'vertical' | 'x' | 'y';
 export abstract class OuiDraggable<ExtraState extends PlainObject = PlainObject> {
 	#destroyed = false;
 
-	#name: keyof OuiDraggableStates;
-
 	readonly #state: OuiDraggableState & ExtraState;
 
 	get element(): HTMLElement {
@@ -43,13 +41,12 @@ export abstract class OuiDraggable<ExtraState extends PlainObject = PlainObject>
 		options: OuiDraggableOptions<ExtraState>,
 		extras: ExtraState,
 	) {
-		this.#name = name;
-
 		this.#state = {
 			...extras,
 			attribute,
 			element,
 			event,
+			name,
 			options,
 			horizontal: true,
 			vertical: true,
@@ -70,7 +67,7 @@ export abstract class OuiDraggable<ExtraState extends PlainObject = PlainObject>
 
 		states ??= {};
 
-		states[this.#name] = this.#state;
+		states[this.#state.name] = this.#state;
 
 		globals.states.set(element, states);
 	}
@@ -216,9 +213,9 @@ export type OuiDraggableState = {
 	attribute: string;
 	container?: HTMLElement;
 	element: HTMLElement;
-	event: string;
 	hasHandles?: boolean;
 	horizontal: boolean;
+	name: keyof OuiDraggableStates;
 	options: OuiDraggableOptions;
 	styling: StyleToggler;
 	vertical: boolean;
@@ -254,6 +251,22 @@ export function addDraggable<
 	return instances[this.property] as Instance;
 }
 
+function cancelDrag(item?: OuiDraggableItem): void {
+	if (item == null) {
+		return;
+	}
+
+	item.state.options.drag.onCancel?.(globals, item);
+
+	dispatch(item.state.element, `${item.state.name}:cancel`, {
+		detail: {
+			element: item.state.options.getOrigin(),
+		},
+	});
+
+	reset();
+}
+
 function destroyInstance(instance: OuiDraggable, state: OuiDraggableState): void {
 	unsetContainer({
 		instance,
@@ -312,21 +325,9 @@ function getNextPosition(item: OuiDraggableItem, position: EventPosition): Event
 }
 
 function onKeydown(event: KeyboardEvent): void {
-	if (current == null || event.key !== KEY_ESCAPE) {
-		return;
+	if (current != null && event.key === KEY_ESCAPE) {
+		cancelDrag(current);
 	}
-
-	current.state.options.drag.onCancel?.(globals, current);
-
-	current.state.element.dispatchEvent(
-		new CustomEvent(`${current.state.event}:cancel`, {
-			detail: {
-				element: current.state.options.getOrigin(),
-			},
-		}),
-	);
-
-	reset();
 }
 
 function onPointerdown(event: MouseEvent | TouchEvent): void {
@@ -405,18 +406,15 @@ 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 begin = new CustomEvent(`${item.state.event}:begin`, {
+	const dispatched = dispatch(item.state.element, `${item.state.name}:begin`, {
 		detail: {
 			element,
 			position: {...globals.original},
 		},
-		cancelable: true,
 	});
 
-	item.state.element.dispatchEvent(begin);
-
 	setTimeout(() => {
-		if (begin.defaultPrevented) {
+		if (dispatched.defaultPrevented) {
 			item.state.options.drag.onCancel?.(globals, item);
 
 			reset();
@@ -461,11 +459,15 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 		original: position,
 	});
 
-	current.state.element.dispatchEvent(
-		new CustomEvent(`${current.state.event}:move`, {
-			detail,
-		}),
-	);
+	const dispatched = dispatch(current.state.element, `${current.state.name}:move`, {
+		detail,
+	});
+
+	setTimeout(() => {
+		if (dispatched.defaultPrevented) {
+			cancelDrag(current);
+		}
+	});
 }
 
 function onPointerup(event: MouseEvent | TouchEvent): void {

package/src/js/internal/navigable.ts

@@ -1,6 +1,6 @@
 import {clamp} from '@oscarpalmer/atoms/number';
 import {getAria, setRole} from '@oscarpalmer/toretto/aria';
-import {on} from '@oscarpalmer/toretto/event';
+import {dispatch, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import type {AriaRole, RemovableEventListener} from '@oscarpalmer/toretto/models';
@@ -212,6 +212,10 @@ export function updateNavigableFocus(
 	if (focus) {
 		navigable.active.element?.focus();
 	}
+
+	dispatch(navigable.active.element, 'navigable:change', {
+		detail: {...navigable.active},
+	});
 }
 
 // #endregion

package/src/js/menu.ts

@@ -1,5 +1,5 @@
 import {setAria, setRole} from '@oscarpalmer/toretto/aria';
-import {setAttribute} from '@oscarpalmer/toretto/attribute';
+import {setAttribute, setAttributes} from '@oscarpalmer/toretto/attribute';
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {createEmbeddedFloatable, getOnBeforeToggleListener} from './floatable/floatable.embedded';
@@ -197,7 +197,10 @@ function initializeMenu(menu: OuiMenu): void {
 		haspopup: 'menu',
 	});
 
-	setAttribute(menu.content, 'tabindex', '-1');
+	setAttributes(menu.content, {
+		popover: '',
+		tabindex: '-1'
+	});
 
 	setRole(menu.content, 'menu');
 }

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 {getPosition, on} from '@oscarpalmer/toretto/event';
+import {dispatch, getPosition, on} from '@oscarpalmer/toretto/event';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {getStyles, setStyle, setStyles} from '@oscarpalmer/toretto/style';
 import {attributable} from '../internal/attributable';
@@ -199,18 +199,15 @@ function onEnd(
 		setOffset(state, container);
 	}
 
-	const end = new CustomEvent(EVENT_END, {
+	const dispatched = dispatch(state.element, 'movable:end', {
 		detail: {
 			from: {...globals.original},
 			to: getPosition(event),
 		},
-		cancelable: true,
 	});
 
-	state.element.dispatchEvent(end);
-
 	setTimeout(() => {
-		if (end.defaultPrevented) {
+		if (dispatched.defaultPrevented) {
 			onCancel(globals, item);
 		}
 
@@ -295,8 +292,6 @@ const ATTRIBUTE_MOVING = `${ATTRIBUTE_MOVABLE}-moving`;
 
 const CONTAINERS = new Map<HTMLElement, Set<OuiMovable>>();
 
-const EVENT_END = 'move:end';
-
 const MESSAGE = 'The element must be an instance of HTMLElement or SVGElement';
 
 const MOVED = new Set<OuiMovable>();

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 {getPosition, on} from '@oscarpalmer/toretto/event';
+import {dispatch, getPosition, 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';
@@ -32,8 +32,6 @@ export class OuiResizable {
 	set(): void {
 		const [width, height] = getAndSetDimensions(this.#state.element, this.#state.options);
 
-		console.log('set', width, height);
-
 		this.#state.width = width;
 		this.#state.height = height;
 	}
@@ -91,6 +89,21 @@ function addResizable(
 	return item?.instance;
 }
 
+function cancelResize(item?: OuiResizableItem): void {
+	if (item == null) {
+		return;
+	}
+
+	setStyles(item.state.element, {
+		height: `${item.state.height}px`,
+		width: `${item.state.width}px`,
+	});
+
+	resetResizable();
+
+	dispatch(item.state.element, 'resizable:cancel');
+}
+
 /**
  * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
  *
@@ -245,16 +258,9 @@ function getXAndY(first: unknown, second?: unknown): [number, number] {
 }
 
 function onKeydown(event: KeyboardEvent): void {
-	if (current == null || event.key !== 'Escape') {
-		return;
+	if (current != null && event.key === 'Escape') {
+		cancelResize(current);
 	}
-
-	setStyles(current.state.element, {
-		height: `${current.state.height}px`,
-		width: `${current.state.width}px`,
-	});
-
-	resetResizable();
 }
 
 function onPointerdown(event: MouseEvent | TouchEvent): void {
@@ -283,11 +289,19 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 		event.preventDefault();
 	}
 
-	current = stored;
-	start = position;
+	const dispatched = dispatch(element!, 'resizable:begin');
 
-	current.state.styles.set();
-	styleToggler.set();
+	setTimeout(() => {
+		if (dispatched.defaultPrevented) {
+			return;
+		}
+
+		current = stored;
+		start = position;
+
+		current.state.styles.set();
+		styleToggler.set();
+	});
 }
 
 function onPointermove(event: MouseEvent | TouchEvent): void {
@@ -305,6 +319,19 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 	const height = current.state.height + (y - (start?.y ?? 0));
 
 	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);
+		}
+	});
 }
 
 function onPointerup(): void {
@@ -312,12 +339,22 @@ function onPointerup(): void {
 		return;
 	}
 
-	const {height, width} = current.state.element.getBoundingClientRect();
+	const dispatched = dispatch(current.state.element, 'resizable:end');
 
-	current.state.height = height;
-	current.state.width = width;
+	setTimeout(() => {
+		if (current == null || dispatched.defaultPrevented) {
+			cancelResize(current);
 
-	resetResizable();
+			return;
+		}
+
+		const {height, width} = current.state.element.getBoundingClientRect();
+
+		current.state.height = height;
+		current.state.width = width;
+
+		resetResizable();
+	});
 }
 
 function removeResizable(element: HTMLElement): void {

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 {getPosition} from '@oscarpalmer/toretto/event';
+import {dispatch, getPosition} from '@oscarpalmer/toretto/event';
 import {findAncestor, getElementFromPosition} from '@oscarpalmer/toretto/find';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {setStyle} from '@oscarpalmer/toretto/style';
@@ -80,7 +80,7 @@ type OuiSortableState = {
 function afterEnd(
 	insert: 'append' | 'insert' | 'prepend' | undefined,
 	from: OuiDraggableItem<OuiSortableState>,
-	events: CustomEvent[],
+	events: [CustomEvent, CustomEvent | undefined],
 	elements: {origin?: HTMLElement; target: HTMLElement},
 	position: EventPosition | undefined,
 	valid: boolean,
@@ -91,7 +91,7 @@ function afterEnd(
 
 	resetPlaceholders();
 
-	if (!valid || events.some(event => event.defaultPrevented)) {
+	if (!valid || events.some(event => event?.defaultPrevented)) {
 		return;
 	}
 
@@ -110,9 +110,9 @@ function afterEnd(
 	let insertion: 'afterend' | 'beforebegin';
 
 	if (position.y < top + height / 2) {
-		insertion = INSERT_BEFORE;
+		insertion = 'beforebegin';
 	} else {
-		insertion = INSERT_AFTER;
+		insertion = 'afterend';
 	}
 
 	elements.target?.insertAdjacentElement(insertion, elements.origin!);
@@ -277,17 +277,23 @@ function onEnd(
 		cancelable: true,
 	};
 
-	const fromEvent = new CustomEvent(EVENT_END, options);
-	const toEvent = new CustomEvent(EVENT_END, options);
+	const dispatchedFrom = dispatch(item.instance.element, 'sortable:end', options);
 
-	item.instance.element.dispatchEvent(fromEvent);
+	let dispatchedTo: CustomEvent | undefined;
 
-	if (item.instance !== toInstance) {
-		toInstance?.element.dispatchEvent(toEvent);
+	if (item.instance !== toInstance && toInstance != null) {
+		dispatchedTo = dispatch(toInstance.element, 'sortable:end', options);
 	}
 
 	setTimeout(() => {
-		afterEnd(insert, item, [fromEvent, toEvent], {origin, target: element}, position, valid);
+		afterEnd(
+			insert,
+			item,
+			[dispatchedFrom, dispatchedTo],
+			{origin, target: element},
+			position,
+			valid,
+		);
 
 		reset();
 	});
@@ -340,11 +346,11 @@ function onMove(
 		if (position.calculated.y < top + height / 2) {
 			place = 'before';
 
-			toElement.insertAdjacentElement(INSERT_BEFORE, placeholder);
+			toElement.insertAdjacentElement('beforebegin', placeholder);
 		} else {
 			place = 'after';
 
-			toElement.insertAdjacentElement(INSERT_AFTER, placeholder);
+			toElement.insertAdjacentElement('afterend', placeholder);
 		}
 
 		setAttribute(placeholder, ATTRIBUTE_PLACEHOLDER_POSITION, place);
@@ -383,8 +389,7 @@ function setPlaceholder(
 
 	updatePlaceholder(item, element);
 
-	const event = new CustomEvent(EVENT_PLACEHOLDER, {
-		cancelable: true,
+	const dispatched = dispatch(item.instance.element, 'sortable:placeholder', {
 		detail: {
 			origin,
 			parent: item.state.element,
@@ -408,10 +413,8 @@ function setPlaceholder(
 		},
 	});
 
-	item.instance.element.dispatchEvent(event);
-
 	setTimeout(() => {
-		if (!event.defaultPrevented && placeholder.drag.custom == null) {
+		if (!dispatched.defaultPrevented && placeholder.drag.custom == null) {
 			placeholder.drag.default?.append(element.cloneNode(true));
 		}
 
@@ -492,14 +495,6 @@ const ATTRIBUTE_VERTICAL = `${ATTRIBUTE}-vertical`;
 
 const CONTAINERS = new Map<HTMLElement, Set<OuiSortable>>();
 
-const EVENT_END = 'sort:end';
-
-const EVENT_PLACEHOLDER = 'sort:placeholder';
-
-const INSERT_AFTER = 'afterend';
-
-const INSERT_BEFORE = 'beforebegin';
-
 const MESSAGE = 'The element must be an instance of HTMLElement or SVGElement';
 
 const SELECTOR = `[${ATTRIBUTE}]`;

package/src/js/splitter.ts

@@ -5,14 +5,10 @@ import {setAria} from '@oscarpalmer/toretto/aria';
 import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
 import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
-import {setStyle, type StyleToggler, toggleStyles} from '@oscarpalmer/toretto/style';
+import {setStyle, toggleStyles} from '@oscarpalmer/toretto/style';
 import supportsTouch from '@oscarpalmer/toretto/touch';
 
-declare global {
-	interface HTMLElementTagNameMap {
-		[SELECTOR]: OuiSplitterElement;
-	}
-}
+// #region Special variables
 
 const ATTRIBUTE_MAX = 'max';
 
@@ -22,6 +18,16 @@ const ATTRIBUTE_SIZE = 'size';
 
 const ATTRIBUTE_TYPE = 'type';
 
+// #endregion
+
+// #region Types
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[TAGNAME]: OuiSplitterElement;
+	}
+}
+
 class OuiSplitter {
 	element: OuiSplitterElement;
 
@@ -227,7 +233,9 @@ type OuiSplitterValuesNow = {
 	previous: number;
 };
 
-//
+// #endregion
+
+// #region Functions
 
 function createHandle(): HTMLSpanElement {
 	const handle = document.createElement('span');
@@ -498,31 +506,33 @@ function setSize(splitter: OuiSplitter, size: number, previous?: boolean): void
 	setAriaValue(splitter);
 }
 
-//
+// #endregion
 
-const SELECTOR = 'oui-splitter';
+// #region Variables
 
-const ATTRIBUTE_ACTIVE = `${SELECTOR}-active`;
+const TAGNAME = 'oui-splitter';
 
-const ATTRIBUTE_HANDLE = `${SELECTOR}-handle`;
+const ATTRIBUTE_ACTIVE = `${TAGNAME}-active`;
 
-const ATTRIBUTE_HORIZONTAL = `${SELECTOR}-horizontal`;
+const ATTRIBUTE_HANDLE = `${TAGNAME}-handle`;
 
-const ATTRIBUTE_SEPARATOR = `${SELECTOR}-separator`;
+const ATTRIBUTE_HORIZONTAL = `${TAGNAME}-horizontal`;
 
-const KEYS_ABSOLUTE: Set<string> = new Set(['End', 'Home']);
+const ATTRIBUTE_SEPARATOR = `${TAGNAME}-separator`;
 
-const KEYS_HORIZONTAL: Set<string> = new Set(['ArrowDown', 'ArrowUp']);
+const KEYS_ABSOLUTE = new Set(['End', 'Home']);
 
-const KEYS_NEGATIVE: Set<string> = new Set(['ArrowLeft', 'ArrowUp']);
+const KEYS_HORIZONTAL = new Set(['ArrowDown', 'ArrowUp']);
 
-const KEYS_VERTICAL: Set<string> = new Set(['ArrowLeft', 'ArrowRight']);
+const KEYS_NEGATIVE = new Set(['ArrowLeft', 'ArrowUp']);
 
-const KEYS_ALL: Set<string> = new Set([...KEYS_ABSOLUTE, ...KEYS_HORIZONTAL, ...KEYS_VERTICAL]);
+const KEYS_VERTICAL = new Set(['ArrowLeft', 'ArrowRight']);
 
-const MAPPED_ELEMENTS: WeakMap<HTMLElement, OuiSplitter> = new WeakMap();
+const KEYS_ALL = new Set([...KEYS_ABSOLUTE, ...KEYS_HORIZONTAL, ...KEYS_VERTICAL]);
 
-const MESSAGE = `<${SELECTOR}> must have exactly two panels.`;
+const MAPPED_ELEMENTS = new WeakMap<HTMLElement, OuiSplitter>();
+
+const MESSAGE = `<${TAGNAME}> must have exactly two panels.`;
 
 const METHODS_CONNECT = ['delete', 'set'] as const;
 
@@ -540,7 +550,7 @@ const RESIZE_OBSERVER: ResizeObserver = new ResizeObserver(onObservation);
 
 const SELECTOR_HANDLE = `[${ATTRIBUTE_HANDLE}]`;
 
-const STYLING_TOGGLER: StyleToggler = toggleStyles(document.body, {
+const STYLING_TOGGLER = toggleStyles(document.body, {
 	touchAction: 'none',
 	userSelect: 'none',
 	webkitUserSelect: 'none',
@@ -554,9 +564,9 @@ let frame: DOMHighResTimeStamp | undefined;
 
 let splitter: OuiSplitter | undefined;
 
-//
+// #endregion
 
-customElements.define(SELECTOR, OuiSplitterElement);
+// #region Initialization
 
 on(document, 'keydown', onKeydown);
 on(document, 'mousedown', onPointerdown);
@@ -564,3 +574,7 @@ on(document, 'pointermove', onPointermove);
 on(document, 'pointerup', onPointerup);
 on(document, 'touchcancel', onPointerup);
 on(document, 'touchstart', onPointerdown, {passive: false});
+
+customElements.define(TAGNAME, OuiSplitterElement);
+
+// #endregion