@oscarpalmer/oui 0.24.0 → 0.25.0

package/src/js/popover.ts

@@ -4,75 +4,133 @@ import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 import {
 	ATTRIBUTE_FLOATABLE,
 	createFloatable,
-	removeFloatable,
-	type Floatable,
-	type FloatableOptions,
-} from './floatable';
-import {createFocusTrap, removeFocusTrap, type FocusTrap} from './focus-trap/embedded';
+	getOnBeforeToggleListener,
+	type OuiFloatable,
+	type OuiFloatableOptions,
+} from './floatable/embedded';
+import {createFocusTrap, type FocusTrap} from './focus-trap/embedded';
 import {attributable} from './internal/attributable';
 
-class Popover {
-	anchor: HTMLElement | null;
-	floatable?: Floatable;
-	focusTrap?: FocusTrap;
-	listener: RemovableEventListener;
+// #region Types
 
-	constructor(public element: HTMLElement) {
-		const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
+class OuiPopover {
+	readonly #state: OuiPopoverState;
 
-		if (!isHTMLOrSVGElement(anchor)) {
-			throw new Error(`No anchor found for popover with id '${element.id}'.`);
-		}
+	/**
+	 * Is the popover open?
+	 */
+	get open(): boolean {
+		return this.#state.content.checkVisibility();
+	}
 
-		if (element.contains(anchor)) {
-			throw new Error('Popover content cannot contain its anchor.');
-		}
+	constructor(state: OuiPopoverState) {
+		this.#state = state;
 
-		this.anchor = anchor as HTMLElement;
+		this.#state.floatable.update();
+	}
 
-		this.floatable = createFloatable(this.anchor, element, options, false);
+	/**
+	 * Closes the popover
+	 */
+	hide(): void {
+		this.#state.floatable.hide();
+	}
 
-		this.focusTrap = createFocusTrap(element, {
-			noescape: true,
-		});
+	/**
+	 * Opens the popover
+	 */
+	show(): void {
+		this.#state.floatable.show();
+	}
+}
 
-		this.listener = on(element, EVENT_TOGGLE, event => {
-			if (event.newState === STATE_OPEN) {
-				ignoreFocus = false;
+type OuiPopoverState = {
+	anchor: HTMLElement;
+	content: HTMLElement;
+	floatable: OuiFloatable;
+	focusTrap?: FocusTrap;
+	listeners: RemovableEventListener[];
+	popover: OuiPopover;
+};
 
-				this.floatable?.update();
+// #endregion
 
-				element.focus();
-			} else if (!ignoreFocus) {
-				this.anchor?.focus();
-			}
-		});
+// #region Functions
 
-		this.element.setAttribute(ATTRIBUTE_CONTENT, '');
+function destroyPopover(state: OuiPopoverState): void {
+	state.floatable.destroy();
+	state.focusTrap?.destroy();
 
-		this.floatable?.update();
+	for (const listener of state.listeners) {
+		listener();
 	}
 
-	destroy(): void {
-		this.focusTrap?.destroy();
-
-		removeFloatable(this.element);
-		removeFocusTrap(this.element);
+	state.anchor = undefined as never;
+	state.content = undefined as never;
+	state.floatable = undefined as never;
+	state.focusTrap = undefined as never;
+	state.listeners = undefined as never;
+	state.popover = undefined as never;
+}
 
-		this.element.removeAttribute(ATTRIBUTE_CONTENT);
+/**
+ * Get the _OuiPopover_ for an element
+ *
+ * @param element Element to get _OuiPopover_ for
+ * @returns _OuiPopover_ instance
+ */
+function getPopover(element: HTMLElement): OuiPopover | undefined {
+	return states.get(element)?.popover;
+}
 
-		this.anchor = null;
-		this.element = null as never;
-	}
+function getState(anchor: HTMLElement, content: HTMLElement): OuiPopoverState {
+	const state: OuiPopoverState = {
+		anchor,
+		content,
+		floatable: createFloatable(anchor, content, options, false),
+		focusTrap:
+			content.getAttribute(ARIA_MODAL) === TRUE
+				? createFocusTrap(content, {
+						noescape: true,
+					})
+				: undefined,
+		listeners: [
+			getOnBeforeToggleListener(content),
+			on(content, EVENT_TOGGLE, event => {
+				if (event.newState === STATE_OPEN) {
+					ignoreFocus = false;
+
+					state.floatable?.update();
+
+					content.setAttribute(ATTRIBUTE_OPEN, '');
+
+					content.focus();
+				} else {
+					content.removeAttribute(ATTRIBUTE_OPEN);
+
+					if (!ignoreFocus) {
+						anchor?.focus();
+					}
+				}
+			}),
+		],
+		popover: undefined as never,
+	};
+
+	state.popover = new OuiPopover(state);
+
+	return state;
 }
 
 function onAdd(element: HTMLElement): void {
-	if (
-		!instances.has(element) &&
-		element.getAttribute(ATTRIBUTE) !== POPOVER_HINT &&
-		!element.hasAttribute(ATTRIBUTE_FLOATABLE)
-	) {
-		instances.set(element, new Popover(element));
+	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));
 	}
 }
 
@@ -81,32 +139,56 @@ function onPointerdown(): void {
 }
 
 function onRemove(element: HTMLElement): void {
-	instances.get(element)?.destroy();
+	const state = states.get(element);
 
-	instances.delete(element);
+	if (state == null) {
+		return;
+	}
+
+	destroyPopover(state);
+
+	states.delete(element);
 }
 
-const ATTRIBUTE = 'popover';
+// #endregion
 
-const ATTRIBUTE_CONTENT = 'oui-popover-content';
+// #region Variables
 
-const EVENT_TOGGLE = 'toggle';
+const ATTRIBUTE = 'oui-popover';
 
-const POPOVER_HINT = 'hint';
+const ARIA_MODAL = 'aria-modal';
+
+const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
+
+const EVENT_TOGGLE = 'toggle';
 
 const STATE_OPEN = 'open';
 
-const instances = new WeakMap<HTMLElement, Popover>();
+const TRUE = 'true';
 
-const options: FloatableOptions = {
+const options: OuiFloatableOptions = {
 	attribute: `${ATTRIBUTE}position`,
 	position: 'below-start',
 };
 
+const states = new WeakMap<HTMLElement, OuiPopoverState>();
+
 let ignoreFocus = false;
 
+// #endregion
+
+// #region Initialization
+
 on(document, 'pointerdown', onPointerdown, {
 	capture: true,
 });
 
 attributable(ATTRIBUTE, onAdd, onRemove);
+
+// #endregion
+
+// #region Exports
+
+export {getPopover, type OuiPopover};
+
+// #endregion

package/src/js/tooltip.ts

@@ -3,97 +3,135 @@ 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 {createFloatable, 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(active);
+	closeTooltip(activeState);
+
+	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 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,8 +207,25 @@ function getElements(anchor: HTMLElement): HTMLElement[] | undefined {
 	return [paragraph];
 }
 
+function getState(anchor: HTMLElement, content: HTMLElement): OuiTooltipState {
+	const state: OuiTooltipState = {
+		anchor,
+		content,
+		floatable: createFloatable(anchor, content, options, false),
+		tooltip: null as never,
+	};
+
+	state.tooltip = new OuiTooltip(state);
+
+	return state;
+}
+
+function getTooltip(element: HTMLElement): OuiTooltip | undefined {
+	return states.get(element)?.tooltip;
+}
+
 function onAdd(element: HTMLElement): void {
-	if (!instances.has(element)) {
+	if (!states.has(element)) {
 		createTooltip(element);
 	}
 }
@@ -180,7 +235,7 @@ function onFocusin(event: Event): void {
 }
 
 function onFocusout(): void {
-	if (active == null) {
+	if (activeTooltip == null) {
 		return;
 	}
 
@@ -190,16 +245,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;
 	});
 }
 
@@ -208,9 +264,15 @@ function onPointermove(event: Event): void {
 }
 
 function onRemove(element: HTMLElement): void {
-	instances.get(element)?.destroy();
+	const state = states.get(element);
 
-	instances.delete(element);
+	if (state == null) {
+		return;
+	}
+
+	destroyTooltip(state);
+
+	states.delete(element);
 }
 
 /**
@@ -219,12 +281,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 +307,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 +324,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);
+
+// #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/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;
-}