@oscarpalmer/oui 0.26.0 → 0.27.0

package/src/js/tooltip.ts

@@ -5,9 +5,10 @@ import {findAncestor} from '@oscarpalmer/toretto/find';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {
 	createEmbeddedFloatable,
+	FLOATABLE_STATE_OPEN,
 	type OuiFloatable,
 	type OuiFloatableOptions,
-} from './floatable/embedded';
+} from './floatable/floatable.embedded';
 import {attributable} from './internal/attributable';
 
 // #region Types
@@ -19,7 +20,18 @@ class OuiTooltip {
 	 * Is the tooltip open?
 	 */
 	get open(): boolean {
-		return this.#state.content.checkVisibility();
+		return this === activeTooltip && content.checkVisibility();
+	}
+
+	/**
+	 * Open or close the tooltip
+	 */
+	set open(value: boolean) {
+		if (value === true) {
+			this.show();
+		} else if (value === false) {
+			this.hide();
+		}
 	}
 
 	constructor(state: OuiTooltipState) {
@@ -45,7 +57,7 @@ class OuiTooltip {
 
 type OuiTooltipState = {
 	anchor: HTMLElement;
-	content: HTMLElement;
+	elements: HTMLElement[];
 	floatable: OuiFloatable;
 	timer?: number;
 	tooltip: OuiTooltip;
@@ -56,12 +68,12 @@ type OuiTooltipState = {
 // #region Functions
 
 function activate(event: Event, focus: boolean): void {
-	const anchor = findAncestor(event, SELECTOR) as HTMLElement | null;
-	const content = findAncestor(event, SELECTOR_CONTENT) as HTMLElement | null;
+	const targetAnchor = findAncestor(event, SELECTOR) as HTMLElement | null;
+	const targetContent = findAncestor(event, SELECTOR_CONTENT) as HTMLElement | null;
 
-	if (anchor == null && content == null) {
+	if (targetAnchor == null && targetContent == null) {
 		if (!focused) {
-			closeTooltip(activeState);
+			closeTooltip(true, activeState);
 
 			activeState = undefined;
 			activeTooltip = undefined;
@@ -70,7 +82,7 @@ function activate(event: Event, focus: boolean): void {
 		return;
 	}
 
-	const state = states.get((anchor ?? content)!);
+	const state = states.get((targetAnchor ?? targetContent)!);
 
 	if (state == null || state.tooltip === activeTooltip) {
 		return;
@@ -78,7 +90,7 @@ function activate(event: Event, focus: boolean): void {
 
 	const shouldDelay = activeTooltip == null;
 
-	closeTooltip(activeState);
+	closeTooltip(false, activeState);
 
 	activeState = state;
 	activeTooltip = state.tooltip;
@@ -87,14 +99,14 @@ function activate(event: Event, focus: boolean): void {
 
 	state.timer = setTimeout(
 		() => {
-			state.content.showPopover({
-				source: state.anchor as HTMLElement,
-			});
+			content.innerHTML = '';
+
+			content.append(...state.elements);
+
+			state.floatable.show();
 
 			setTimeout(() => {
 				state.floatable.update();
-
-				state.content.setAttribute(ATTRIBUTE_CONTENT_OPEN, '');
 			});
 		},
 		shouldDelay ? delay : 0,
@@ -107,7 +119,7 @@ function addTooltip(element: HTMLElement): void {
 	}
 }
 
-function closeTooltip(state?: OuiTooltipState): void {
+function closeTooltip(clear: boolean, state?: OuiTooltipState): void {
 	if (state == null) {
 		return;
 	}
@@ -116,30 +128,28 @@ function closeTooltip(state?: OuiTooltipState): void {
 		clearTimeout(state.timer);
 	}
 
-	state.content?.hidePopover();
-	state.content?.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
+	if (clear) {
+		content?.hidePopover();
+	}
 }
 
 function createTooltip(anchor: HTMLElement): void {
-	const content = getContent(anchor);
+	const elements = getElements(anchor);
 
-	if (content == null) {
+	if (elements == null) {
 		return;
 	}
 
-	anchor.insertAdjacentElement('afterend', content);
-
-	states.set(anchor, getState(anchor, content));
+	states.set(anchor, getState(anchor, elements));
 }
 
 function destroyTooltip(state: OuiTooltipState): void {
 	clearTimeout(state.timer);
 
-	state.content.remove();
 	state.floatable.destroy();
 
 	state.anchor = undefined as never;
-	state.content = undefined as never;
+	state.elements = undefined as never;
 	state.floatable = undefined as never;
 	state.tooltip = undefined as never;
 }
@@ -167,13 +177,7 @@ function findElements(attribute: string | null): HTMLElement[] {
 	return elements;
 }
 
-function getContent(anchor: HTMLElement): HTMLElement | undefined {
-	const elements = getElements(anchor);
-
-	if (elements == null) {
-		return;
-	}
-
+function getContent(): HTMLElement {
 	const content = createElement(CONTENT_TAGNAME, {
 		popover: 'hint',
 		role: 'tooltip',
@@ -182,8 +186,6 @@ function getContent(anchor: HTMLElement): HTMLElement | undefined {
 
 	content.setAttribute(ATTRIBUTE_CONTENT, '');
 
-	content.append(...elements);
-
 	return content;
 }
 
@@ -191,36 +193,36 @@ function getElements(anchor: HTMLElement): HTMLElement[] | undefined {
 	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
 
 	if (elements.length > 0) {
-		return elements.map(element => element.cloneNode(true)) as HTMLElement[];
+		return elements;
 	}
 
 	elements = findElements(anchor.getAttribute(ARIA_DESCRIBEDBY));
 
 	if (elements.length > 0) {
-		return elements.map(element => element.cloneNode(true)) as HTMLElement[];
+		return elements;
 	}
 
-	let content = anchor.getAttribute(ARIA_LABEL);
+	let text = anchor.getAttribute(ARIA_LABEL);
 
-	if (isNullableOrWhitespace(content)) {
-		content = anchor.getAttribute(ARIA_DESCRIPTION);
+	if (isNullableOrWhitespace(text)) {
+		text = anchor.getAttribute(ARIA_DESCRIPTION);
 	}
 
-	if (isNullableOrWhitespace(content)) {
+	if (isNullableOrWhitespace(text)) {
 		return;
 	}
 
 	const paragraph = document.createElement('p');
 
-	paragraph.textContent = content;
+	paragraph.textContent = text;
 
 	return [paragraph];
 }
 
-function getState(anchor: HTMLElement, content: HTMLElement): OuiTooltipState {
+function getState(anchor: HTMLElement, elements: HTMLElement[]): OuiTooltipState {
 	const state: OuiTooltipState = {
 		anchor,
-		content,
+		elements,
 		floatable: createEmbeddedFloatable(anchor, content, options),
 		tooltip: null as never,
 	};
@@ -230,6 +232,12 @@ function getState(anchor: HTMLElement, content: HTMLElement): OuiTooltipState {
 	return state;
 }
 
+/**
+ * Get the _OuiTooltip_ for an element
+ *
+ * @param element Element to get _OuiTooltip_ for
+ * @returns _OuiTooltip_ instance
+ */
 function getTooltip(element: HTMLElement): OuiTooltip | undefined {
 	return states.get(element)?.tooltip;
 }
@@ -256,7 +264,7 @@ function onFocusout(): void {
 			return;
 		}
 
-		closeTooltip(activeState);
+		closeTooltip(true, activeState);
 
 		activeState = undefined;
 		activeTooltip = undefined;
@@ -267,6 +275,14 @@ function onPointermove(event: Event): void {
 	activate(event, false);
 }
 
+function onToggle(event: ToggleEvent): void {
+	if (event.newState === FLOATABLE_STATE_OPEN) {
+		content.setAttribute(ATTRIBUTE_CONTENT_OPEN, '');
+	} else {
+		content.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
+	}
+}
+
 function removeTooltip(element: HTMLElement): void {
 	const state = states.get(element);
 
@@ -317,11 +333,14 @@ const SELECTOR = `[${ATTRIBUTE}]`;
 
 const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
 
+const content = getContent();
+
 const states = new WeakMap<HTMLElement, OuiTooltipState>();
 
 const options: OuiFloatableOptions = {
 	attribute: `${ATTRIBUTE}-position`,
 	position: 'above',
+	reusable: true,
 };
 
 let delay = 500;
@@ -338,6 +357,10 @@ let focusTimer: number | undefined;
 
 // #region Initialization
 
+document.body.append(content);
+
+on(content, 'toggle', onToggle);
+
 on(document, 'focusin', onFocusin);
 on(document, 'focusout', onFocusout);
 on(document, 'pointermove', onPointermove);

package/dist/js/floatable/embedded.d.mts

@@ -1,2 +0,0 @@
-import { a as createEmbeddedFloatable, c as removeFloatable, i as OuiFloatablePosition, n as OuiFloatable, o as createFloatable, r as OuiFloatableOptions, s as getOnBeforeToggleListener, t as ATTRIBUTE_FLOATABLE } from "../embedded-ai6cqURc.mjs";
-export { ATTRIBUTE_FLOATABLE, OuiFloatable, OuiFloatableOptions, OuiFloatablePosition, createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };

package/dist/js/floatable/standalone.d.mts

@@ -1,2 +0,0 @@
-import { i as OuiFloatablePosition, n as OuiFloatable, o as createFloatable } from "../embedded-ai6cqURc.mjs";
-export { type OuiFloatable, type OuiFloatablePosition, createFloatable };

package/dist/js/floatable/standalone.mjs

@@ -1,2 +0,0 @@
-import { createFloatable } from "./embedded.mjs";
-export { createFloatable };

package/dist/js/focus-trap/embedded.d.mts

@@ -1,2 +0,0 @@
-import { a as createFocusTrap, i as OuiFocusTrap, n as ATTRIBUTE_FOCUSTRAP_CONTAIN, o as removeFocusTrap, r as ATTRIBUTE_FOCUSTRAP_NOESCAPE, t as ATTRIBUTE_FOCUSTRAP } from "../embedded-CHK82Uh5.mjs";
-export { ATTRIBUTE_FOCUSTRAP, ATTRIBUTE_FOCUSTRAP_CONTAIN, ATTRIBUTE_FOCUSTRAP_NOESCAPE, OuiFocusTrap, createFocusTrap, removeFocusTrap };

package/dist/js/focus-trap/standalone.d.mts

@@ -1,2 +0,0 @@
-import { a as createFocusTrap, i as OuiFocusTrap } from "../embedded-CHK82Uh5.mjs";
-export { type OuiFocusTrap, createFocusTrap };

package/dist/js/focus-trap/standalone.mjs

@@ -1,6 +0,0 @@
-import { attributable } from "../internal/attributable.mjs";
-import { ATTRIBUTE_FOCUSTRAP, createFocusTrap, removeFocusTrap } from "./embedded.mjs";
-//#region src/js/focus-trap/standalone.ts
-attributable(ATTRIBUTE_FOCUSTRAP, createFocusTrap, removeFocusTrap);
-//#endregion
-export { createFocusTrap };

package/dist/js/movable-dNqBctx3.d.mts

@@ -1,101 +0,0 @@
-import { EventPosition, PlainObject } from "@oscarpalmer/atoms/models";
-
-//#region src/js/sortable.d.ts
-declare class OuiSortable extends OuiDraggable {
-  connections: string | null;
-  origin: HTMLElement | undefined;
-  get dragged(): HTMLElement;
-  constructor(element: HTMLElement);
-}
-//#endregion
-//#region src/js/internal/draggable.d.ts
-declare abstract class OuiDraggable {
-  prefix: string;
-  element: HTMLElement;
-  options: DraggableOptions;
-  container: HTMLElement | undefined;
-  hasHandles: boolean | undefined;
-  horizontal: boolean;
-  vertical: boolean;
-  abstract readonly dragged: HTMLElement;
-  abstract origin: HTMLElement | undefined;
-  constructor(prefix: string, element: HTMLElement, options: DraggableOptions);
-  destroy(): void;
-}
-type DragBegin = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: OuiDraggable, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
-type DragCancel = (state: DraggableState, draggable: OuiDraggable) => void;
-type DragEnd = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: OuiDraggable, reset: () => void) => void;
-type DragMove = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: OuiDraggable, position: DragMovePosition) => PlainObject | undefined;
-type DragMovePosition = {
-  calculated: EventPosition;
-  original: EventPosition;
-};
-type DraggableBound<Property extends keyof DraggableInstances = keyof DraggableInstances, Instance extends DraggableInstances[Property] = DraggableInstances[Property]> = {
-  constructor: new (element: HTMLElement) => Instance;
-  property: Property;
-};
-type DraggableInstances = {
-  movable?: OuiMovable;
-  sortable?: OuiSortable;
-};
-type DraggableOptions = {
-  container: DraggableOptionsContainer;
-  direction: DraggableOptionsDirection;
-  drag: DraggableOptionsDrag;
-  position: DraggableOptionsPosition;
-};
-type DraggableOptionsContainer = {
-  attribute: string;
-  map: Map<HTMLElement, Set<OuiDraggable>>;
-  onDestroy?: DraggableOptionsContainerOnDestroy;
-  onInitialize?: DraggableOptionsContainerOnInitialize;
-};
-type DraggableOptionsContainerOnDestroy = (draggable: OuiDraggable, container: HTMLElement, empty: boolean) => void;
-type DraggableOptionsContainerOnInitialize = (draggable: OuiDraggable) => void;
-type DraggableOptionsDirection = {
-  attribute: string;
-  onAfter?: DraggableOptionsDirectionOnAfter;
-};
-type DraggableOptionsDirectionOnAfter = (draggable: OuiDraggable) => void;
-type DraggableOptionsDrag = {
-  onBegin: DragBegin;
-  onCancel: DragCancel;
-  onEnd: DragEnd;
-  onMove: DragMove;
-};
-type DraggableOptionsPosition = {
-  getOffset: DraggableOptionsPositionGetOffset;
-  getOriginal: DraggableOptionsPositionGetOriginal;
-};
-type DraggableOptionsPositionGetOffset = (state: DraggableState, draggable: OuiDraggable, element: HTMLElement, position: EventPosition) => EventPosition;
-type DraggableOptionsPositionGetOriginal = (state: DraggableState, draggable: OuiDraggable, position: EventPosition) => EventPosition;
-type DraggableState = {
-  container: DOMRect | undefined;
-  element: DraggableStateElement | undefined;
-  instances: WeakMap<HTMLElement, DraggableInstances>;
-  offset: EventPosition | undefined;
-  original: EventPosition | undefined;
-};
-type DraggableStateElement = {
-  node: HTMLElement;
-  rectangle: DOMRect;
-};
-declare function addDraggable<Property extends keyof DraggableInstances, Instance extends DraggableInstances[Property]>(this: DraggableBound<Property, Instance>, element: HTMLElement): void;
-declare function removeDraggable<Property extends keyof DraggableInstances, Instance extends DraggableInstances[Property]>(this: {
-  constructor: new (element: HTMLElement) => Instance;
-  property: Property;
-}, element: HTMLElement): void;
-//#endregion
-//#region src/js/movable.d.ts
-declare class OuiMovable extends OuiDraggable {
-  inset: string;
-  moved: boolean;
-  offset: Partial<EventPosition> | undefined;
-  position: string;
-  get dragged(): HTMLElement;
-  get origin(): HTMLElement | undefined;
-  constructor(element: HTMLElement);
-  destroy(): void;
-}
-//#endregion
-export { OuiDraggable as a, OuiSortable as c, DraggableState as i, DragMovePosition as n, addDraggable as o, DraggableBound as r, removeDraggable as s, OuiMovable as t };

package/dist/js/movable.d.mts

@@ -1,2 +0,0 @@
-import { t as OuiMovable } from "./movable-dNqBctx3.mjs";
-export { OuiMovable };

package/dist/js/movable.mjs

@@ -1,152 +0,0 @@
-import { attributable } from "./internal/attributable.mjs";
-import { OuiDraggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
-import { getPosition, on } from "@oscarpalmer/toretto/event";
-//#region src/js/movable.ts
-var OuiMovable = class extends OuiDraggable {
-	inset;
-	moved = false;
-	offset;
-	position;
-	get dragged() {
-		return this.element;
-	}
-	get origin() {
-		return this.element;
-	}
-	constructor(element) {
-		super("move", element, {
-			container: {
-				attribute: ATTRIBUTE_CONTAINER,
-				map: CONTAINERS,
-				onDestroy: destroyContainer,
-				onInitialize: initializeContainer
-			},
-			direction: {
-				attribute: ATTRIBUTE_DIRECTION,
-				onAfter: afterDirection
-			},
-			drag: {
-				onBegin,
-				onCancel,
-				onEnd,
-				onMove
-			},
-			position: {
-				getOffset: getOffsetPosition,
-				getOriginal: getOriginalPosition
-			}
-		});
-		this.hasHandles = element.querySelector(SELECTOR_HANDLE) != null;
-		this.inset = element.style.inset;
-		this.position = element.style.position;
-	}
-	destroy() {
-		super.destroy();
-		MOVED.delete(this);
-		this.element.style.inset = this.inset;
-		this.element.style.position = this.position;
-	}
-};
-function afterDirection(draggable) {
-	const container = draggable.container?.getBoundingClientRect();
-	if (container != null) setOffset(draggable, container);
-}
-function destroyContainer(_, container, empty) {
-	if (empty) resizer.unobserve(container);
-}
-function getOffsetPosition(state, _, __, position) {
-	return {
-		x: position.x - (state.element?.rectangle.left ?? 0),
-		y: position.y - (state.element?.rectangle.top ?? 0)
-	};
-}
-function getOriginalPosition(state) {
-	return {
-		x: state.element?.rectangle.left ?? 0,
-		y: state.element?.rectangle.top ?? 0
-	};
-}
-function initializeContainer(draggable) {
-	resizer.observe(draggable.container);
-}
-function onBegin() {}
-function onCancel(state, draggable) {
-	const { element, inset, moved, position } = draggable;
-	const { x, y } = state.original ?? {
-		x: 0,
-		y: 0
-	};
-	if (moved) element.style.inset = `${y}px auto auto ${x}px`;
-	else {
-		element.style.position = position;
-		element.style.inset = inset;
-	}
-}
-function onEnd(event, state, draggable, reset) {
-	const movable = draggable;
-	if (!movable.moved) {
-		movable.moved = true;
-		if (movable.container != null) MOVED.add(movable);
-	}
-	const container = movable.container?.getBoundingClientRect();
-	if (container != null) setOffset(movable, container);
-	const end = new CustomEvent(EVENT_END, {
-		detail: {
-			from: { ...state.original },
-			to: getPosition(event)
-		},
-		cancelable: true
-	});
-	movable.element.dispatchEvent(end);
-	setTimeout(() => {
-		if (end.defaultPrevented) onCancel(state, draggable);
-		reset();
-	});
-}
-function onMove(_, state, __, position) {
-	return {
-		from: { ...state.original },
-		to: { ...position.calculated }
-	};
-}
-function onResize(entries) {
-	const { length } = entries;
-	for (let index = 0; index < length; index += 1) {
-		const entry = entries[index];
-		const set = CONTAINERS.get(entry.target);
-		if (set == null) continue;
-		for (const movable of set) reposition(movable);
-	}
-}
-function onScroll() {
-	for (const moved of MOVED) reposition(moved);
-}
-function reposition(movable) {
-	if (!movable.moved || movable.container == null) return;
-	const container = movable.container.getBoundingClientRect();
-	const x = container.left + (movable.offset?.x ?? 0);
-	const y = container.top + (movable.offset?.y ?? 0);
-	movable.element.style.inset = `${y}px auto auto ${x}px`;
-}
-function setOffset(movable, container) {
-	movable.offset = {};
-	const element = movable.element.getBoundingClientRect();
-	movable.offset.y = element.top - container.top;
-	movable.offset.x = element.left - container.left;
-}
-const ATTRIBUTE = "oui-movable";
-const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
-const ATTRIBUTE_DIRECTION = `${ATTRIBUTE}-direction`;
-const CONTAINERS = /* @__PURE__ */ new Map();
-const EVENT_END = "move:end";
-const MOVED = /* @__PURE__ */ new Set();
-const SELECTOR_HANDLE = `[${ATTRIBUTE}-handle]`;
-const bound = {
-	constructor: OuiMovable,
-	property: "movable"
-};
-const resizer = new ResizeObserver(onResize);
-attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
-on(document, "scroll", onScroll);
-//#endregion
-export { OuiMovable };

package/dist/js/sortable.d.mts

@@ -1,2 +0,0 @@
-import { c as OuiSortable } from "./movable-dNqBctx3.mjs";
-export { OuiSortable };

package/src/js/floatable/standalone.ts

@@ -1 +0,0 @@
-export {createFloatable, type OuiFloatable, type OuiFloatablePosition} from './embedded';

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

@@ -1,6 +0,0 @@
-import {attributable} from '../internal/attributable';
-import {ATTRIBUTE_FOCUSTRAP, createFocusTrap, removeFocusTrap, type OuiFocusTrap} from './embedded';
-
-attributable(ATTRIBUTE_FOCUSTRAP, createFocusTrap, removeFocusTrap);
-
-export {createFocusTrap, type OuiFocusTrap};