@oscarpalmer/oui 0.30.0 → 0.32.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,14 +289,10 @@ function onTab(event: KeyboardEvent): void {
 		return;
 	}
 
-	const dispatch = new CustomEvent('focus-trap:tab', {
-		cancelable: true,
-	});
-
-	element.dispatchEvent(dispatch);
+	const dispatched = dispatch(element, 'focus-trap');
 
 	setTimeout(() => {
-		if (dispatch.defaultPrevented) {
+		if (dispatched.defaultPrevented) {
 			return;
 		}
 

package/src/js/internal/draggable.ts

@@ -406,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 dispatch = new CustomEvent(`${item.state.name}:begin`, {
+	const dispatched = dispatch(item.state.element, `${item.state.name}:begin`, {
 		detail: {
 			element,
 			position: {...globals.original},
 		},
-		cancelable: true,
 	});
 
-	item.state.element.dispatchEvent(dispatch);
-
 	setTimeout(() => {
-		if (dispatch.defaultPrevented) {
+		if (dispatched.defaultPrevented) {
 			item.state.options.drag.onCancel?.(globals, item);
 
 			reset();
@@ -462,15 +459,12 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 		original: position,
 	});
 
-	const dispatch = new CustomEvent(`${current.state.name}:move`, {
+	const dispatched = dispatch(current.state.element, `${current.state.name}:move`, {
 		detail,
-		cancelable: true,
 	});
 
-	current.state.element.dispatchEvent(dispatch);
-
 	setTimeout(() => {
-		if (dispatch.defaultPrevented) {
+		if (dispatched.defaultPrevented) {
 			cancelDrag(current);
 		}
 	});

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('movable: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);
 		}
 

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

@@ -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;
 	}
@@ -291,14 +289,10 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 		event.preventDefault();
 	}
 
-	const dispatch = new CustomEvent('resizable:begin', {
-		cancelable: true,
-	});
-
-	element!.dispatchEvent(dispatch);
+	const dispatched = dispatch(element!, 'resizable:begin');
 
 	setTimeout(() => {
-		if (dispatch.defaultPrevented) {
+		if (dispatched.defaultPrevented) {
 			return;
 		}
 
@@ -326,18 +320,15 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 
 	getAndSetDimensions(current.state.element, current.state.options, {height, width});
 
-	const dispatch = new CustomEvent('resizable:resize', {
-		cancelable: true,
+	const dispatched = dispatch(current.state.element, 'resizable:resize', {
 		detail: {
 			height,
 			width,
 		},
 	});
 
-	current.state.element.dispatchEvent(dispatch);
-
 	setTimeout(() => {
-		if (dispatch.defaultPrevented) {
+		if (dispatched.defaultPrevented) {
 			cancelResize(current);
 		}
 	});
@@ -348,14 +339,10 @@ function onPointerup(): void {
 		return;
 	}
 
-	const dispatch = new CustomEvent('resizable:end', {
-		cancelable: true,
-	});
-
-	current.state.element.dispatchEvent(dispatch);
+	const dispatched = dispatch(current.state.element, 'resizable:end');
 
 	setTimeout(() => {
-		if (current == null || dispatch.defaultPrevented) {
+		if (current == null || dispatched.defaultPrevented) {
 			cancelResize(current);
 
 			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 {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;
 	}
 
@@ -277,17 +277,23 @@ function onEnd(
 		cancelable: true,
 	};
 
-	const fromEvent = new CustomEvent('sortable:end', options);
-	const toEvent = new CustomEvent('sortable: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();
 	});
@@ -383,8 +389,7 @@ function setPlaceholder(
 
 	updatePlaceholder(item, element);
 
-	const event = new CustomEvent('sortable: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));
 		}