@oscarpalmer/oui 0.24.0 → 0.26.0

package/src/js/tooltip.ts

@@ -3,97 +3,145 @@ import {createElement} from '@oscarpalmer/toretto/create';
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import {
+	createEmbeddedFloatable,
+	type OuiFloatable,
+	type OuiFloatableOptions,
+} from './floatable/embedded';
 import {attributable} from './internal/attributable';
-import {Floatable, type FloatableOptions} from './floatable';
 
-class Tooltip {
-	floatable: Floatable;
+// #region Types
 
-	timer: number | undefined;
+class OuiTooltip {
+	readonly #state: OuiTooltipState;
 
-	constructor(
-		public anchor: HTMLElement,
-		public content: HTMLElement,
-	) {
-		instances.set(content, this);
-
-		anchor.insertAdjacentElement('afterend', content);
+	/**
+	 * Is the tooltip open?
+	 */
+	get open(): boolean {
+		return this.#state.content.checkVisibility();
+	}
 
-		this.floatable = new Floatable(anchor, content, options, false);
+	constructor(state: OuiTooltipState) {
+		this.#state = state;
 
-		this.floatable.update();
+		state.floatable.update();
 	}
 
-	destroy(): void {
-		instances.delete(this.content);
+	/**
+	 * Closes the tooltip
+	 */
+	hide(): void {
+		this.#state.floatable.hide();
+	}
 
-		this.anchor = null as never;
-		this.content = null as never;
+	/**
+	 * Opens the tooltip
+	 */
+	show(): void {
+		this.#state.floatable.show();
 	}
 }
 
+type OuiTooltipState = {
+	anchor: HTMLElement;
+	content: HTMLElement;
+	floatable: OuiFloatable;
+	timer?: number;
+	tooltip: OuiTooltip;
+};
+
+// #endregion
+
+// #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;
 
 	if (anchor == null && content == null) {
 		if (!focused) {
-			closeTooltip(active);
+			closeTooltip(activeState);
 
-			active = undefined;
+			activeState = undefined;
+			activeTooltip = undefined;
 		}
 
 		return;
 	}
 
-	const instance = instances.get((anchor ?? content)!);
+	const state = states.get((anchor ?? content)!);
 
-	if (instance == null || instance === active) {
+	if (state == null || state.tooltip === activeTooltip) {
 		return;
 	}
 
-	const shouldDelay = active == null;
+	const shouldDelay = activeTooltip == null;
+
+	closeTooltip(activeState);
 
-	closeTooltip(active);
+	activeState = state;
+	activeTooltip = state.tooltip;
 
-	active = instance;
 	focused = focus;
 
-	instance.timer = setTimeout(
+	state.timer = setTimeout(
 		() => {
-			instance.content.showPopover({
-				source: instance.anchor as HTMLElement,
+			state.content.showPopover({
+				source: state.anchor as HTMLElement,
 			});
 
 			setTimeout(() => {
-				instance.floatable.update();
+				state.floatable.update();
 
-				instance.content.setAttribute(ATTRIBUTE_CONTENT_ACTIVE, '');
+				state.content.setAttribute(ATTRIBUTE_CONTENT_OPEN, '');
 			});
 		},
 		shouldDelay ? delay : 0,
 	);
 }
 
-function closeTooltip(instance?: Tooltip): void {
-	if (instance == null) {
+function addTooltip(element: HTMLElement): void {
+	if (!states.has(element)) {
+		createTooltip(element);
+	}
+}
+
+function closeTooltip(state?: OuiTooltipState): void {
+	if (state == null) {
 		return;
 	}
 
-	if (instance.timer != null) {
-		clearTimeout(instance.timer);
+	if (state.timer != null) {
+		clearTimeout(state.timer);
 	}
 
-	instance.content?.hidePopover();
-	instance.content?.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
+	state.content?.hidePopover();
+	state.content?.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
 }
 
 function createTooltip(anchor: HTMLElement): void {
 	const content = getContent(anchor);
 
-	if (content != null) {
-		instances.set(anchor, new Tooltip(anchor, content));
+	if (content == null) {
+		return;
 	}
+
+	anchor.insertAdjacentElement('afterend', content);
+
+	states.set(anchor, getState(anchor, content));
+}
+
+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.floatable = undefined as never;
+	state.tooltip = undefined as never;
 }
 
 function findElements(attribute: string | null): HTMLElement[] {
@@ -169,10 +217,21 @@ function getElements(anchor: HTMLElement): HTMLElement[] | undefined {
 	return [paragraph];
 }
 
-function onAdd(element: HTMLElement): void {
-	if (!instances.has(element)) {
-		createTooltip(element);
-	}
+function getState(anchor: HTMLElement, content: HTMLElement): OuiTooltipState {
+	const state: OuiTooltipState = {
+		anchor,
+		content,
+		floatable: createEmbeddedFloatable(anchor, content, options),
+		tooltip: null as never,
+	};
+
+	state.tooltip = new OuiTooltip(state);
+
+	return state;
+}
+
+function getTooltip(element: HTMLElement): OuiTooltip | undefined {
+	return states.get(element)?.tooltip;
 }
 
 function onFocusin(event: Event): void {
@@ -180,7 +239,7 @@ function onFocusin(event: Event): void {
 }
 
 function onFocusout(): void {
-	if (active == null) {
+	if (activeTooltip == null) {
 		return;
 	}
 
@@ -190,16 +249,17 @@ function onFocusout(): void {
 
 	focusTimer = setTimeout(() => {
 		if (
-			active == null ||
+			activeTooltip == null ||
 			document.activeElement == null ||
 			findAncestor(document.activeElement, SELECTOR) != null
 		) {
 			return;
 		}
 
-		closeTooltip(active);
+		closeTooltip(activeState);
 
-		active = undefined;
+		activeState = undefined;
+		activeTooltip = undefined;
 	});
 }
 
@@ -207,10 +267,16 @@ function onPointermove(event: Event): void {
 	activate(event, false);
 }
 
-function onRemove(element: HTMLElement): void {
-	instances.get(element)?.destroy();
+function removeTooltip(element: HTMLElement): void {
+	const state = states.get(element);
+
+	if (state == null) {
+		return;
+	}
+
+	destroyTooltip(state);
 
-	instances.delete(element);
+	states.delete(element);
 }
 
 /**
@@ -219,12 +285,16 @@ function onRemove(element: HTMLElement): void {
  * _(Default delay is half a second, or 500 milliseconds)_
  * @param value Delay in milliseconds
  */
-export function setTooltipDelay(value: number): void {
+function setTooltipDelay(value: number): void {
 	if (typeof value === 'number' && !Number.isNaN(value) && value >= 0) {
 		delay = value;
 	}
 }
 
+// #endregion
+
+// #region Variables
+
 const ARIA_DESCRIBEDBY = 'aria-describedby';
 
 const ARIA_DESCRIPTION = 'aria-description';
@@ -241,15 +311,15 @@ const ATTRIBUTE = 'oui-tooltip';
 
 const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;
 
-const ATTRIBUTE_CONTENT_ACTIVE = `${ATTRIBUTE_CONTENT}-active`;
+const ATTRIBUTE_CONTENT_OPEN = `${ATTRIBUTE_CONTENT}-open`;
 
 const SELECTOR = `[${ATTRIBUTE}]`;
 
 const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
 
-const instances = new WeakMap<HTMLElement, Tooltip>();
+const states = new WeakMap<HTMLElement, OuiTooltipState>();
 
-const options: FloatableOptions = {
+const options: OuiFloatableOptions = {
 	attribute: `${ATTRIBUTE}-position`,
 	position: 'above',
 };
@@ -258,12 +328,26 @@ let delay = 500;
 
 let focused = false;
 
-let active: Tooltip | undefined;
+let activeState: OuiTooltipState | undefined;
+
+let activeTooltip: OuiTooltip | undefined;
 
 let focusTimer: number | undefined;
 
+// #endregion
+
+// #region Initialization
+
 on(document, 'focusin', onFocusin);
 on(document, 'focusout', onFocusout);
 on(document, 'pointermove', onPointermove);
 
-attributable(ATTRIBUTE, onAdd, onRemove);
+attributable(ATTRIBUTE, addTooltip, removeTooltip);
+
+// #endregion
+
+// #region Exports
+
+export {getTooltip, setTooltipDelay, type OuiTooltip};
+
+// #endregion

package/dist/css/popover.css

@@ -1,30 +0,0 @@
-
-:where([oui-popover-content]) {
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
-  --margin-bottom: 0.5em;
-  --margin-left: 0.5em;
-  --margin-right: 0.5em;
-  --margin-top: 0.5em;
-  inset-block: var(--margin-top) var(--margin-bottom);
-  inset-inline: var(--margin-left) var(--margin-right);
-}
-:where([oui-popover-content])[oui-position$=bottom] {
-  --margin-bottom: 0;
-}
-:where([oui-popover-content])[oui-position$=end] {
-  --margin-right: 0;
-}
-:where([oui-popover-content])[oui-position$=start] {
-  --margin-left: 0;
-}
-:where([oui-popover-content])[oui-position$=top] {
-  --margin-top: 0;
-}
-:where([oui-popover-content]) {
-  padding: 1rem;
-  background-color: var(--oui-absolute);
-  border: none;
-  border-radius: 0.25rem;
-}
-
-

package/dist/js/floatable.d.mts

@@ -1,59 +0,0 @@
-//#region src/js/floatable.d.ts
-declare class Floatable {
-  #private;
-  anchor: HTMLElement;
-  content: HTMLElement;
-  options: FloatableOptions;
-  /**
-   * Is the _Floatable_ open?
-   */
-  get open(): boolean;
-  constructor(anchor: HTMLElement, content: HTMLElement, options: FloatableOptions, standalone: boolean);
-  /**
-   * Destroy the floatable, removing it from the DOM and cleaning up references
-   */
-  destroy(): void;
-  /**
-   * Hide the floatable
-   */
-  hide(): void;
-  /**
-   * Show the floatable
-   */
-  show(): void;
-  /**
-   * Update the position of the floatable, with an optional new position
-   *
-   * @param position Optional new position
-   */
-  update(position?: FloatablePosition): void;
-}
-type FloatableOptions = {
-  attribute?: string;
-  position: FloatablePosition;
-};
-type FloatablePosition = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'start' | 'start-bottom' | 'start-top';
-type GetFloatableOptions = {
-  /**
-   * Open the _Floatable_ when created? _(defaults to `true`)_
-   */
-  open?: boolean;
-  /**
-   * Position of the _Floatable_ _(defaults to `below`)_
-   */
-  position?: FloatablePosition;
-};
-declare function createFloatable(anchor: HTMLElement, content: HTMLElement, options: FloatableOptions, standalone: boolean): Floatable;
-/**
- * Create a _Floatable_ for an anchor and content element
- *
- * @param anchor Anchor element
- * @param content Content element
- * @param options _Floatable_ options
- * @returns _Floatable_ instance
- */
-declare function getFloatable(anchor: HTMLElement | SVGElement, content: HTMLElement | SVGElement, options?: GetFloatableOptions): Floatable;
-declare function removeFloatable(content: HTMLElement): void;
-declare const ATTRIBUTE_FLOATABLE = "oui-floatable";
-//#endregion
-export { ATTRIBUTE_FLOATABLE, Floatable, FloatableOptions, FloatablePosition, createFloatable, getFloatable, removeFloatable };

package/dist/js/floatable.mjs

@@ -1,130 +0,0 @@
-import { isPlainObject } from "@oscarpalmer/atoms/is";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-//#region src/js/floatable.ts
-var Floatable = class {
-	anchor;
-	content;
-	options;
-	#destroyed = false;
-	/**
-	* Is the _Floatable_ open?
-	*/
-	get open() {
-		return this.content.checkVisibility();
-	}
-	constructor(anchor, content, options, standalone) {
-		this.anchor = anchor;
-		this.content = content;
-		this.options = options;
-		if (standalone) {
-			content.setAttribute(ATTRIBUTE_FLOATABLE, "");
-			content.popover = "manual";
-		}
-		const anchorName = getAnchorName(anchor);
-		anchor.style.anchorName = anchorName;
-		content.style.positionAnchor = anchorName;
-	}
-	/**
-	* Destroy the floatable, removing it from the DOM and cleaning up references
-	*/
-	destroy() {
-		if (this.#destroyed) return;
-		this.#destroyed = true;
-		removeFloatable(this.content);
-		this.anchor = null;
-		this.content = null;
-	}
-	/**
-	* Hide the floatable
-	*/
-	hide() {
-		if (!this.#destroyed) this.content.hidePopover();
-	}
-	/**
-	* Show the floatable
-	*/
-	show() {
-		if (!this.#destroyed) this.content.showPopover();
-	}
-	/**
-	* Update the position of the floatable, with an optional new position
-	*
-	* @param position Optional new position
-	*/
-	update(position) {
-		if (!this.#destroyed) setPosition(this, position);
-	}
-};
-function createFloatable(anchor, content, options, standalone) {
-	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) throw new TypeError("Anchor and content must be an HTMLElement or SVGElement.");
-	let floatable = instances.get(content);
-	if (floatable == null) {
-		floatable = new Floatable(anchor, content, options, standalone);
-		instances.set(content, floatable);
-	}
-	return floatable;
-}
-function getAnchorName(anchor) {
-	let { anchorName } = anchor.style;
-	if (anchorName.length > 0) return anchorName;
-	index += 1;
-	return `--oui-floatable-anchor-${index}`;
-}
-/**
-* Create a _Floatable_ for an anchor and content element
-*
-* @param anchor Anchor element
-* @param content Content element
-* @param options _Floatable_ options
-* @returns _Floatable_ instance
-*/
-function getFloatable(anchor, content, options) {
-	const { open, position } = getOptions(options);
-	const floatable = createFloatable(anchor, content, { position }, true);
-	floatable?.update(position);
-	if (open) floatable?.show();
-	return floatable;
-}
-function getOptions(input) {
-	const object = isPlainObject(input) ? input : {};
-	return {
-		open: typeof object.open === "boolean" ? object.open : true,
-		position: object.position != null && object.position in AREAS ? object.position : "below"
-	};
-}
-function getPosition(floatable, override) {
-	if (override != null && override in AREAS) return override;
-	if (floatable.options.attribute == null) return floatable.options.position;
-	const attribute = floatable.anchor.getAttribute(floatable.options.attribute) ?? "";
-	return attribute in AREAS ? attribute : floatable.options.position;
-}
-function removeFloatable(content) {
-	instances.get(content)?.destroy();
-	instances.delete(content);
-}
-function setPosition(floatable, override) {
-	const area = AREAS[getPosition(floatable, override)];
-	floatable.content.style.positionArea = area;
-	floatable.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
-}
-const AREAS = {
-	above: "block-start",
-	"above-end": "start span-start",
-	"above-start": "start span-end",
-	below: "block-end",
-	"below-end": "end span-start",
-	"below-start": "end span-end",
-	end: "center end",
-	"end-bottom": "span-start end",
-	"end-top": "span-end end",
-	start: "center start",
-	"start-bottom": "span-start start",
-	"start-top": "span-end start"
-};
-const ATTRIBUTE_FLOATABLE = "oui-floatable";
-const ATTRIBUTE_POSITION = "oui-position";
-const POSITIONS = Object.fromEntries(Object.entries(AREAS).map(([position, area]) => [area, position]));
-const instances = /* @__PURE__ */ new WeakMap();
-let index = 0;
-//#endregion
-export { ATTRIBUTE_FLOATABLE, Floatable, createFloatable, getFloatable, removeFloatable };

package/src/css/popover.scss

@@ -1,10 +0,0 @@
-@use 'mixins.scss' as mixins;
-
-:where([oui-popover-content]) {
-	@include mixins.floatable;
-
-	padding: 1rem;
-	background-color: var(--oui-absolute);
-	border: none;
-	border-radius: 0.25rem;
-}