@oscarpalmer/oui 0.23.1 → 0.25.0

package/src/js/popover.ts

@@ -1,62 +1,136 @@
 import {on} from '@oscarpalmer/toretto/event';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import {createFocusTrap, removeFocusTrap, type FocusTrap} from './focus-trap/embedded';
-import {attributable} from './internal/attributable';
 import {
+	ATTRIBUTE_FLOATABLE,
 	createFloatable,
-	removeFloatable,
-	type Floatable,
-	type FloatableOptions,
-} from './internal/floatable';
-
-class Popover {
-	anchor: HTMLElement | null;
-	floatable?: Floatable;
-	focusTrap?: FocusTrap;
-	listener: RemovableEventListener;
-
-	constructor(public element: HTMLElement) {
-		this.anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
+	getOnBeforeToggleListener,
+	type OuiFloatable,
+	type OuiFloatableOptions,
+} from './floatable/embedded';
+import {createFocusTrap, type FocusTrap} from './focus-trap/embedded';
+import {attributable} from './internal/attributable';
 
-		this.floatable = createFloatable(this.anchor as HTMLElement, element, options);
+// #region Types
 
-		this.focusTrap = createFocusTrap(element, {
-			noescape: true,
-		});
+class OuiPopover {
+	readonly #state: OuiPopoverState;
 
-		this.listener = on(element, EVENT_TOGGLE, event => {
-			if (event.newState === STATE_OPEN) {
-				ignoreFocus = false;
+	/**
+	 * Is the popover open?
+	 */
+	get open(): boolean {
+		return this.#state.content.checkVisibility();
+	}
 
-				this.floatable?.update();
+	constructor(state: OuiPopoverState) {
+		this.#state = state;
 
-				element.focus();
-			} else if (!ignoreFocus) {
-				this.anchor?.focus();
-			}
-		});
+		this.#state.floatable.update();
+	}
 
-		this.element.setAttribute(ATTRIBUTE_CONTENT, '');
+	/**
+	 * Closes the popover
+	 */
+	hide(): void {
+		this.#state.floatable.hide();
+	}
 
-		this.floatable?.update();
+	/**
+	 * Opens the popover
+	 */
+	show(): void {
+		this.#state.floatable.show();
 	}
+}
 
-	destroy(): void {
-		this.focusTrap?.destroy();
+type OuiPopoverState = {
+	anchor: HTMLElement;
+	content: HTMLElement;
+	floatable: OuiFloatable;
+	focusTrap?: FocusTrap;
+	listeners: RemovableEventListener[];
+	popover: OuiPopover;
+};
+
+// #endregion
 
-		removeFloatable(this.element);
-		removeFocusTrap(this.element);
+// #region Functions
 
-		this.element.removeAttribute(ATTRIBUTE_CONTENT);
+function destroyPopover(state: OuiPopoverState): void {
+	state.floatable.destroy();
+	state.focusTrap?.destroy();
 
-		this.anchor = null;
-		this.element = null as never;
+	for (const listener of state.listeners) {
+		listener();
 	}
+
+	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;
+}
+
+/**
+ * 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;
+}
+
+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) {
-		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));
 	}
 }
 
@@ -65,32 +139,56 @@ function onPointerdown(): void {
 }
 
 function onRemove(element: HTMLElement): void {
-	instances.get(element)?.destroy();
+	const state = states.get(element);
+
+	if (state == null) {
+		return;
+	}
 
-	instances.delete(element);
+	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 ARIA_MODAL = 'aria-modal';
+
+const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
 
-const POPOVER_HINT = 'hint';
+const EVENT_TOGGLE = 'toggle';
 
 const STATE_OPEN = 'open';
 
-const instances = new WeakMap<HTMLElement, Popover>();
+const TRUE = 'true';
 
-const options: FloatableOptions = {
-	attribute: 'position',
+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/sortable.ts

@@ -2,6 +2,7 @@ import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
 import {createElement} from '@oscarpalmer/toretto/create';
 import {getPosition} from '@oscarpalmer/toretto/event';
 import {findAncestor, getElementFromPosition} from '@oscarpalmer/toretto/find';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {attributable} from './internal/attributable';
 import {
 	addDraggable,
@@ -333,17 +334,19 @@ function setPlaceholder(state: DraggableState, sortable: Sortable, origin: HTMLE
 			parent: sortable.element,
 			placeholder: element,
 			create: (value: unknown) => {
-				if (!(value instanceof HTMLElement)) {
+				if (!isHTMLOrSVGElement(value)) {
 					return;
 				}
 
-				placeholder.drag.custom = value;
+				const element = value as HTMLElement;
 
-				updatePlaceholder(sortable, value);
+				placeholder.drag.custom = element;
+
+				updatePlaceholder(sortable, element);
 
 				state.element = {
-					rectangle: value.getBoundingClientRect(),
-					node: value,
+					rectangle: element.getBoundingClientRect(),
+					node: element,
 				};
 			},
 		},

package/src/js/splitter.ts

@@ -12,8 +12,21 @@ declare global {
 	}
 }
 
+const ATTRIBUTE_MAX = 'max';
+
+const ATTRIBUTE_MIN = 'min';
+
+const ATTRIBUTE_SIZE = 'size';
+
+const ATTRIBUTE_TYPE = 'type';
+
 export class OuiSplitterElement extends HTMLElement {
-	static readonly observedAttributes = ['max', 'min', 'size', 'type'];
+	static readonly observedAttributes = [
+		ATTRIBUTE_MAX,
+		ATTRIBUTE_MIN,
+		ATTRIBUTE_SIZE,
+		ATTRIBUTE_TYPE,
+	];
 
 	readonly #splitter: Splitter;
 
@@ -24,7 +37,7 @@ export class OuiSplitterElement extends HTMLElement {
 	}
 
 	set max(value: number) {
-		this.setAttribute('max', String(value));
+		this.setAttribute(ATTRIBUTE_MAX, String(value));
 	}
 
 	get min(): number {
@@ -77,13 +90,13 @@ export class OuiSplitterElement extends HTMLElement {
 
 	attributeChangedCallback(name: string): void {
 		switch (name) {
-			case 'max':
-			case 'min':
-			case 'size':
+			case ATTRIBUTE_MAX:
+			case ATTRIBUTE_MIN:
+			case ATTRIBUTE_SIZE:
 				this.#splitter.updateValues();
 				break;
 
-			case 'type':
+			case ATTRIBUTE_TYPE:
 				this.#splitter.updateOrientation();
 				break;
 
@@ -271,15 +284,19 @@ function getValue(element: HTMLElement, name: string, defaultValue: number): num
 
 function getValues(element: OuiSplitterElement): Values {
 	const values: Values = {
-		max: getValue(element, 'max', NAVIGATION_MAXIMUM_PERCENTAGE),
-		min: getValue(element, 'min', NAVIGATION_MINIMUM_PERCENTAGE),
+		max: getValue(element, ATTRIBUTE_MAX, NAVIGATION_MAXIMUM_PERCENTAGE),
+		min: getValue(element, ATTRIBUTE_MIN, NAVIGATION_MINIMUM_PERCENTAGE),
 		now: {
 			current: 0.5,
 			previous: 0.5,
 		},
 	};
 
-	const value = getContained(values.min, getValue(element, 'size', values.now.current), values.max);
+	const value = getContained(
+		values.min,
+		getValue(element, ATTRIBUTE_SIZE, values.now.current),
+		values.max,
+	);
 
 	values.now.current = value;
 	values.now.previous = value;

package/src/js/tooltip.ts

@@ -2,97 +2,136 @@ import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 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 './internal/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);
+	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,
+			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[] {
@@ -106,7 +145,7 @@ function findElements(attribute: string | null): HTMLElement[] {
 
 		const element = document.querySelector(`#${id}`);
 
-		if (element instanceof HTMLElement) {
+		if (isHTMLOrSVGElement(element)) {
 			const cloned = element.cloneNode(true) as HTMLElement;
 
 			cloned.hidden = false;
@@ -168,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);
 	}
 }
@@ -179,7 +235,7 @@ function onFocusin(event: Event): void {
 }
 
 function onFocusout(): void {
-	if (active == null) {
+	if (activeTooltip == null) {
 		return;
 	}
 
@@ -189,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;
 	});
 }
 
@@ -207,17 +264,33 @@ 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);
 }
 
-export function setTooltipDelay(value: number): void {
+/**
+ * Set the delay before showing the tooltip, in milliseconds
+ *
+ * _(Default delay is half a second, or 500 milliseconds)_
+ * @param value Delay in milliseconds
+ */
+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';
@@ -234,16 +307,16 @@ 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 = {
-	attribute: 'oui-tooltip-position',
+const options: OuiFloatableOptions = {
+	attribute: `${ATTRIBUTE}-position`,
 	position: 'above',
 };
 
@@ -251,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;
-}
-
-