@oscarpalmer/oui 0.25.0 → 0.26.0

package/src/js/internal/draggable.ts

@@ -4,14 +4,14 @@ import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {toggleStyles} from '@oscarpalmer/toretto/style';
 import supportsTouch from '@oscarpalmer/toretto/touch';
-import type {Movable} from '../movable';
-import type {Sortable} from '../sortable';
+import type {OuiMovable} from '../movable';
+import type {OuiSortable} from '../sortable';
 
 // #region Types
 
 type Direction = 'horizontal' | 'vertical' | 'x' | 'y';
 
-export abstract class Draggable {
+export abstract class OuiDraggable {
 	container: HTMLElement | undefined;
 
 	hasHandles: boolean | undefined;
@@ -45,25 +45,25 @@ export abstract class Draggable {
 type DragBegin = (
 	event: MouseEvent | TouchEvent,
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	element: HTMLElement,
 	handle: HTMLElement,
 	position: EventPosition,
 ) => void;
 
-type DragCancel = (state: DraggableState, draggable: Draggable) => void;
+type DragCancel = (state: DraggableState, draggable: OuiDraggable) => void;
 
 type DragEnd = (
 	event: MouseEvent | TouchEvent,
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	reset: () => void,
 ) => void;
 
 type DragMove = (
 	event: MouseEvent | TouchEvent,
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	position: DragMovePosition,
 ) => PlainObject | undefined;
 
@@ -81,8 +81,8 @@ export type DraggableBound<
 };
 
 type DraggableInstances = {
-	movable?: Movable;
-	sortable?: Sortable;
+	movable?: OuiMovable;
+	sortable?: OuiSortable;
 };
 
 type DraggableOptions = {
@@ -94,25 +94,25 @@ type DraggableOptions = {
 
 type DraggableOptionsContainer = {
 	attribute: string;
-	map: Map<HTMLElement, Set<Draggable>>;
+	map: Map<HTMLElement, Set<OuiDraggable>>;
 	onDestroy?: DraggableOptionsContainerOnDestroy;
 	onInitialize?: DraggableOptionsContainerOnInitialize;
 };
 
 type DraggableOptionsContainerOnDestroy = (
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	container: HTMLElement,
 	empty: boolean,
 ) => void;
 
-type DraggableOptionsContainerOnInitialize = (draggable: Draggable) => void;
+type DraggableOptionsContainerOnInitialize = (draggable: OuiDraggable) => void;
 
 type DraggableOptionsDirection = {
 	attribute: string;
 	onAfter?: DraggableOptionsDirectionOnAfter;
 };
 
-type DraggableOptionsDirectionOnAfter = (draggable: Draggable) => void;
+type DraggableOptionsDirectionOnAfter = (draggable: OuiDraggable) => void;
 
 type DraggableOptionsDrag = {
 	onBegin: DragBegin;
@@ -128,14 +128,14 @@ type DraggableOptionsPosition = {
 
 type DraggableOptionsPositionGetOffset = (
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	element: HTMLElement,
 	position: EventPosition,
 ) => EventPosition;
 
 type DraggableOptionsPositionGetOriginal = (
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	position: EventPosition,
 ) => EventPosition;
 
@@ -178,7 +178,7 @@ function getHandle(event: Event, isMovable: boolean): HTMLElement | null {
 	) as HTMLElement;
 }
 
-function getNextPosition(draggable: Draggable, position: EventPosition): EventPosition {
+function getNextPosition(draggable: OuiDraggable, position: EventPosition): EventPosition {
 	let x = state.original?.x ?? 0;
 	let y = state.original?.y ?? 0;
 
@@ -394,7 +394,7 @@ function reset(): void {
 	styleToggler.remove();
 }
 
-function setContainer(draggable: Draggable, options: DraggableOptions): void {
+function setContainer(draggable: OuiDraggable, options: DraggableOptions): void {
 	const selector = draggable.element.getAttribute(options.container.attribute);
 
 	if (typeof selector !== 'string') {
@@ -420,7 +420,7 @@ function setContainer(draggable: Draggable, options: DraggableOptions): void {
 	options.container.onInitialize?.(draggable);
 }
 
-function setDirection(draggable: Draggable, options: DraggableOptions): void {
+function setDirection(draggable: OuiDraggable, options: DraggableOptions): void {
 	const direction = draggable.element.getAttribute(options.direction.attribute);
 
 	if (horizontals.has(direction as Direction)) {
@@ -432,7 +432,7 @@ function setDirection(draggable: Draggable, options: DraggableOptions): void {
 	options.direction.onAfter?.(draggable);
 }
 
-function unsetContainer(draggable: Draggable, options: DraggableOptions): void {
+function unsetContainer(draggable: OuiDraggable, options: DraggableOptions): void {
 	const {container} = draggable;
 
 	if (container == null) {
@@ -499,7 +499,7 @@ const styleToggler = toggleStyles(document.body, {
 
 const verticals = new Set<Direction>(['vertical', 'y']);
 
-let current: Movable | Sortable | undefined;
+let current: OuiMovable | OuiSortable | undefined;
 
 // #endregion
 

package/src/js/movable.ts

@@ -3,7 +3,7 @@ import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {attributable} from './internal/attributable';
 import {
 	addDraggable,
-	Draggable,
+	OuiDraggable,
 	removeDraggable,
 	type DraggableBound,
 	type DraggableState,
@@ -12,7 +12,7 @@ import {
 
 // #region Types
 
-export class Movable extends Draggable {
+export class OuiMovable extends OuiDraggable {
 	inset: string;
 
 	moved = false;
@@ -73,15 +73,15 @@ export class Movable extends Draggable {
 
 // #region Functions
 
-function afterDirection(draggable: Draggable): void {
+function afterDirection(draggable: OuiDraggable): void {
 	const container = draggable.container?.getBoundingClientRect();
 
 	if (container != null) {
-		setOffset(draggable as Movable, container);
+		setOffset(draggable as OuiMovable, container);
 	}
 }
 
-function destroyContainer(_: Draggable, container: HTMLElement, empty: boolean): void {
+function destroyContainer(_: OuiDraggable, container: HTMLElement, empty: boolean): void {
 	if (empty) {
 		resizer.unobserve(container);
 	}
@@ -89,7 +89,7 @@ function destroyContainer(_: Draggable, container: HTMLElement, empty: boolean):
 
 function getOffsetPosition(
 	state: DraggableState,
-	_: Draggable,
+	_: OuiDraggable,
 	__: HTMLElement,
 	position: EventPosition,
 ): EventPosition {
@@ -106,14 +106,14 @@ function getOriginalPosition(state: DraggableState): EventPosition {
 	};
 }
 
-function initializeContainer(draggable: Draggable): void {
+function initializeContainer(draggable: OuiDraggable): void {
 	resizer.observe(draggable.container!);
 }
 
 function onBegin(): void {}
 
-function onCancel(state: DraggableState, draggable: Draggable): void {
-	const movable = draggable as Movable;
+function onCancel(state: DraggableState, draggable: OuiDraggable): void {
+	const movable = draggable as OuiMovable;
 
 	const {element, inset, moved, position} = movable;
 	const {x, y} = state.original ?? {x: 0, y: 0};
@@ -129,10 +129,10 @@ function onCancel(state: DraggableState, draggable: Draggable): void {
 function onEnd(
 	event: MouseEvent | TouchEvent,
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	reset: () => void,
 ): void {
-	const movable = draggable as Movable;
+	const movable = draggable as OuiMovable;
 
 	if (!movable.moved) {
 		movable.moved = true;
@@ -170,7 +170,7 @@ function onEnd(
 function onMove(
 	_: MouseEvent | TouchEvent,
 	state: DraggableState,
-	__: Draggable,
+	__: OuiDraggable,
 	position: DragMovePosition,
 ): PlainObject | undefined {
 	return {
@@ -202,7 +202,7 @@ function onScroll(): void {
 	}
 }
 
-function reposition(movable: Movable): void {
+function reposition(movable: OuiMovable): void {
 	if (!movable.moved || movable.container == null) {
 		return;
 	}
@@ -215,7 +215,7 @@ function reposition(movable: Movable): void {
 	movable.element.style.inset = `${y}px auto auto ${x}px`;
 }
 
-function setOffset(movable: Movable, container: DOMRect): void {
+function setOffset(movable: OuiMovable, container: DOMRect): void {
 	movable.offset = {};
 
 	const element = movable.element.getBoundingClientRect();
@@ -234,16 +234,16 @@ const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
 
 const ATTRIBUTE_DIRECTION = `${ATTRIBUTE}-direction`;
 
-const CONTAINERS = new Map<HTMLElement, Set<Movable>>();
+const CONTAINERS = new Map<HTMLElement, Set<OuiMovable>>();
 
 const EVENT_END = 'move:end';
 
-const MOVED = new Set<Movable>();
+const MOVED = new Set<OuiMovable>();
 
 const SELECTOR_HANDLE = `[${ATTRIBUTE}-handle]`;
 
 const bound: DraggableBound = {
-	constructor: Movable,
+	constructor: OuiMovable,
 	property: 'movable',
 };
 

package/src/js/popover.ts

@@ -3,12 +3,12 @@ import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 import {
 	ATTRIBUTE_FLOATABLE,
-	createFloatable,
+	createEmbeddedFloatable,
 	getOnBeforeToggleListener,
 	type OuiFloatable,
 	type OuiFloatableOptions,
 } from './floatable/embedded';
-import {createFocusTrap, type FocusTrap} from './focus-trap/embedded';
+import {createFocusTrap, type OuiFocusTrap} from './focus-trap/embedded';
 import {attributable} from './internal/attributable';
 
 // #region Types
@@ -48,7 +48,7 @@ type OuiPopoverState = {
 	anchor: HTMLElement;
 	content: HTMLElement;
 	floatable: OuiFloatable;
-	focusTrap?: FocusTrap;
+	focusTrap?: OuiFocusTrap;
 	listeners: RemovableEventListener[];
 	popover: OuiPopover;
 };
@@ -57,6 +57,18 @@ type OuiPopoverState = {
 
 // #region Functions
 
+function addPopover(element: HTMLElement): void {
+	if (states.has(element) || element.hasAttribute(ATTRIBUTE_FLOATABLE)) {
+		return;
+	}
+
+	const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
+
+	if (isHTMLOrSVGElement(anchor)) {
+		states.set(element, getState(anchor, element));
+	}
+}
+
 function destroyPopover(state: OuiPopoverState): void {
 	state.floatable.destroy();
 	state.focusTrap?.destroy();
@@ -87,7 +99,7 @@ function getState(anchor: HTMLElement, content: HTMLElement): OuiPopoverState {
 	const state: OuiPopoverState = {
 		anchor,
 		content,
-		floatable: createFloatable(anchor, content, options, false),
+		floatable: createEmbeddedFloatable(anchor, content, options),
 		focusTrap:
 			content.getAttribute(ARIA_MODAL) === TRUE
 				? createFocusTrap(content, {
@@ -122,23 +134,11 @@ function getState(anchor: HTMLElement, content: HTMLElement): OuiPopoverState {
 	return state;
 }
 
-function onAdd(element: HTMLElement): void {
-	if (states.has(element) || element.hasAttribute(ATTRIBUTE_FLOATABLE)) {
-		return;
-	}
-
-	const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
-
-	if (isHTMLOrSVGElement(anchor)) {
-		states.set(element, getState(anchor, element));
-	}
-}
-
 function onPointerdown(): void {
 	ignoreFocus = true;
 }
 
-function onRemove(element: HTMLElement): void {
+function removePopover(element: HTMLElement): void {
 	const state = states.get(element);
 
 	if (state == null) {
@@ -183,7 +183,7 @@ on(document, 'pointerdown', onPointerdown, {
 	capture: true,
 });
 
-attributable(ATTRIBUTE, onAdd, onRemove);
+attributable(ATTRIBUTE, addPopover, removePopover);
 
 // #endregion
 

package/src/js/sortable.ts

@@ -6,7 +6,7 @@ import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {attributable} from './internal/attributable';
 import {
 	addDraggable,
-	Draggable,
+	OuiDraggable,
 	removeDraggable,
 	type DraggableBound,
 	type DraggableState,
@@ -15,7 +15,7 @@ import {
 
 // #region Types
 
-export class Sortable extends Draggable {
+export class OuiSortable extends OuiDraggable {
 	connections: string | null;
 
 	origin: HTMLElement | undefined;
@@ -49,12 +49,12 @@ export class Sortable extends Draggable {
 	}
 }
 
-type SortablePlaceholder = {
-	drag: SortablePlaceholderDrag;
+type OuiSortablePlaceholder = {
+	drag: OuiSortablePlaceholderDrag;
 	position: HTMLElement | undefined;
 };
 
-type SortablePlaceholderDrag = {
+type OuiSortablePlaceholderDrag = {
 	custom: HTMLElement | undefined;
 	default: HTMLElement | undefined;
 };
@@ -65,7 +65,7 @@ type SortablePlaceholderDrag = {
 
 function afterEnd(
 	insert: 'append' | 'insert' | 'prepend' | undefined,
-	from: Sortable,
+	from: OuiSortable,
 	events: CustomEvent[],
 	elements: {origin?: HTMLElement; target: HTMLElement},
 	position: EventPosition | undefined,
@@ -114,7 +114,7 @@ function getDragPlaceholder(): HTMLElement {
 
 function getOffsetPosition(
 	_: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	element: HTMLElement,
 	position: EventPosition,
 ): EventPosition {
@@ -128,13 +128,13 @@ function getOffsetPosition(
 
 function getOriginalPosition(
 	_: DraggableState,
-	__: Draggable,
+	__: OuiDraggable,
 	position: EventPosition,
 ): EventPosition {
 	return position;
 }
 
-function getPositionPlaceholder(sortable: Sortable): HTMLElement {
+function getPositionPlaceholder(sortable: OuiSortable): HTMLElement {
 	placeholder.position ??= createElement('div');
 
 	placeholder.position.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, '');
@@ -152,10 +152,10 @@ function getPositionPlaceholder(sortable: Sortable): HTMLElement {
 function onBegin(
 	_: MouseEvent | TouchEvent,
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	element: HTMLElement,
 ): void {
-	const sortable = draggable as Sortable;
+	const sortable = draggable as OuiSortable;
 
 	sortable.origin = element;
 
@@ -166,8 +166,8 @@ function onBegin(
 	document.body.setAttribute(ATTRIBUTE_ACTIVE, '');
 }
 
-function onCancel(_: DraggableState, draggable: Draggable): void {
-	const sortable = draggable as Sortable;
+function onCancel(_: DraggableState, draggable: OuiDraggable): void {
+	const sortable = draggable as OuiSortable;
 
 	const {origin} = sortable;
 
@@ -183,10 +183,10 @@ function onCancel(_: DraggableState, draggable: Draggable): void {
 function onEnd(
 	event: MouseEvent | TouchEvent,
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	reset: () => void,
 ): void {
-	const from = draggable as Sortable;
+	const from = draggable as OuiSortable;
 	const {origin} = from;
 
 	const position = getPosition(event) ?? {x: 0, y: 0};
@@ -206,7 +206,7 @@ function onEnd(
 	}
 
 	let insert: 'append' | 'insert' | 'prepend' | undefined = 'insert';
-	let to: Sortable | undefined;
+	let to: OuiSortable | undefined;
 
 	if (element == null) {
 		element = findAncestor(target, SELECTOR) as HTMLElement;
@@ -258,15 +258,15 @@ function onEnd(
 function onMove(
 	event: MouseEvent | TouchEvent,
 	state: DraggableState,
-	draggable: Draggable,
+	draggable: OuiDraggable,
 	position: DragMovePosition,
 ): PlainObject | undefined {
-	const from = draggable as Sortable;
+	const from = draggable as OuiSortable;
 
 	const fromElement = from.origin;
 	const toElement = findAncestor(event, SELECTOR_ITEM) as HTMLElement;
 
-	let to: Sortable | undefined;
+	let to: OuiSortable | undefined;
 
 	if (toElement == null) {
 		to = state.instances.get(findAncestor(event, SELECTOR) as HTMLElement)?.sortable;
@@ -320,7 +320,7 @@ function resetPlaceholders(): void {
 	placeholder.drag.custom = undefined;
 }
 
-function setPlaceholder(state: DraggableState, sortable: Sortable, origin: HTMLElement): void {
+function setPlaceholder(state: DraggableState, sortable: OuiSortable, origin: HTMLElement): void {
 	const element = getDragPlaceholder();
 
 	placeholder.drag.default!.innerHTML = '';
@@ -363,7 +363,7 @@ function setPlaceholder(state: DraggableState, sortable: Sortable, origin: HTMLE
 	});
 }
 
-function updatePlaceholder(sortable: Sortable, element: HTMLElement): void {
+function updatePlaceholder(sortable: OuiSortable, element: HTMLElement): void {
 	element.style.position = 'fixed';
 
 	element.setAttribute(ATTRIBUTE_PLACEHOLDER_DRAG, '');
@@ -383,8 +383,8 @@ function updatePlaceholder(sortable: Sortable, element: HTMLElement): void {
 
 function validatePosition(
 	_: DraggableState,
-	from: Sortable,
-	to: Sortable | undefined,
+	from: OuiSortable,
+	to: OuiSortable | undefined,
 	position: EventPosition,
 ): boolean {
 	let valid = true;
@@ -434,7 +434,7 @@ const ATTRIBUTE_PLACEHOLDER_POSITION = `${ATTRIBUTE}-placeholder-position`;
 
 const ATTRIBUTE_VERTICAL = `${ATTRIBUTE}-vertical`;
 
-const CONTAINERS = new Map<HTMLElement, Set<Sortable>>();
+const CONTAINERS = new Map<HTMLElement, Set<OuiSortable>>();
 
 const EVENT_END = 'sort:end';
 
@@ -449,11 +449,11 @@ const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;
 
 const bound: DraggableBound = {
-	constructor: Sortable,
+	constructor: OuiSortable,
 	property: 'sortable',
 };
 
-const placeholder: SortablePlaceholder = {
+const placeholder: OuiSortablePlaceholder = {
 	drag: {
 		custom: undefined,
 		default: undefined,