@oscarpalmer/oui 0.29.0 → 0.30.0

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

@@ -289,19 +289,31 @@ function onTab(event: KeyboardEvent): void {
 		return;
 	}
 
-	if (!instance.disabled) {
-		event.preventDefault();
-	}
+	const dispatch = new CustomEvent('focus-trap:tab', {
+		cancelable: true,
+	});
 
-	const elements = getFocusable(element);
+	element.dispatchEvent(dispatch);
 
-	const index = elements.indexOf(event.target as HTMLElement);
+	setTimeout(() => {
+		if (dispatch.defaultPrevented) {
+			return;
+		}
 
-	if (index === -1 || elements.length === 0) {
-		tabToTrap(instance, elements, element);
-	} else {
-		tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
-	}
+		if (!instance.disabled) {
+			event.preventDefault();
+		}
+
+		const elements = getFocusable(element);
+
+		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);
+		}
+	});
 }
 
 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,7 +406,7 @@ 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 dispatch = new CustomEvent(`${item.state.name}:begin`, {
 		detail: {
 			element,
 			position: {...globals.original},
@@ -413,10 +414,10 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 		cancelable: true,
 	});
 
-	item.state.element.dispatchEvent(begin);
+	item.state.element.dispatchEvent(dispatch);
 
 	setTimeout(() => {
-		if (begin.defaultPrevented) {
+		if (dispatch.defaultPrevented) {
 			item.state.options.drag.onCancel?.(globals, item);
 
 			reset();
@@ -461,11 +462,18 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 		original: position,
 	});
 
-	current.state.element.dispatchEvent(
-		new CustomEvent(`${current.state.event}:move`, {
-			detail,
-		}),
-	);
+	const dispatch = new CustomEvent(`${current.state.name}:move`, {
+		detail,
+		cancelable: true,
+	});
+
+	current.state.element.dispatchEvent(dispatch);
+
+	setTimeout(() => {
+		if (dispatch.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/movable/movable.embedded.ts

@@ -199,7 +199,7 @@ function onEnd(
 		setOffset(state, container);
 	}
 
-	const end = new CustomEvent(EVENT_END, {
+	const end = new CustomEvent('movable:end', {
 		detail: {
 			from: {...globals.original},
 			to: getPosition(event),
@@ -295,8 +295,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/popover.ts

@@ -199,7 +199,7 @@ const ATTRIBUTE = 'oui-popover';
 const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
 
 const options: OuiFloatableOptions = {
-	attribute: `${ATTRIBUTE}position`,
+	attribute: `${ATTRIBUTE}-position`,
 	position: 'below-start',
 	reusable: false,
 };

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';
@@ -91,6 +91,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 +260,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 +291,23 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 		event.preventDefault();
 	}
 
-	current = stored;
-	start = position;
+	const dispatch = new CustomEvent('resizable:begin', {
+		cancelable: true,
+	});
+
+	element!.dispatchEvent(dispatch);
 
-	current.state.styles.set();
-	styleToggler.set();
+	setTimeout(() => {
+		if (dispatch.defaultPrevented) {
+			return;
+		}
+
+		current = stored;
+		start = position;
+
+		current.state.styles.set();
+		styleToggler.set();
+	});
 }
 
 function onPointermove(event: MouseEvent | TouchEvent): void {
@@ -305,6 +325,22 @@ 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 dispatch = new CustomEvent('resizable:resize', {
+		cancelable: true,
+		detail: {
+			height,
+			width,
+		},
+	});
+
+	current.state.element.dispatchEvent(dispatch);
+
+	setTimeout(() => {
+		if (dispatch.defaultPrevented) {
+			cancelResize(current);
+		}
+	});
 }
 
 function onPointerup(): void {
@@ -312,12 +348,26 @@ function onPointerup(): void {
 		return;
 	}
 
-	const {height, width} = current.state.element.getBoundingClientRect();
+	const dispatch = new CustomEvent('resizable:end', {
+		cancelable: true,
+	});
 
-	current.state.height = height;
-	current.state.width = width;
+	current.state.element.dispatchEvent(dispatch);
 
-	resetResizable();
+	setTimeout(() => {
+		if (current == null || dispatch.defaultPrevented) {
+			cancelResize(current);
+
+			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

@@ -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,8 +277,8 @@ function onEnd(
 		cancelable: true,
 	};
 
-	const fromEvent = new CustomEvent(EVENT_END, options);
-	const toEvent = new CustomEvent(EVENT_END, options);
+	const fromEvent = new CustomEvent('sortable:end', options);
+	const toEvent = new CustomEvent('sortable:end', options);
 
 	item.instance.element.dispatchEvent(fromEvent);
 
@@ -340,11 +340,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,7 +383,7 @@ function setPlaceholder(
 
 	updatePlaceholder(item, element);
 
-	const event = new CustomEvent(EVENT_PLACEHOLDER, {
+	const event = new CustomEvent('sortable:placeholder', {
 		cancelable: true,
 		detail: {
 			origin,
@@ -492,14 +492,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