@oscarpalmer/oui 0.13.0 → 0.15.0

package/src/js/tooltip.ts

@@ -1,119 +1,102 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import {on} from '@oscarpalmer/toretto/event';
 import {attributable} from './attributable';
+import {activate, deactivate, Floatable} from './floatable';
 
-class Tooltip {
-	abortController = new AbortController();
-
-	activate: number | undefined;
-
-	active = false;
-
-	deactivate: number | undefined;
+type Attributes = {
+	ariaDescribedby: string | null;
+	ariaLabelledBy: string | null;
+};
 
+type Content = {
+	attributes: Attributes;
 	element: HTMLElement;
+};
 
-	frame: DOMHighResTimeStamp | undefined;
-
-	constructor(public parent: HTMLElement) {
-		this.element = getContent(parent) as HTMLElement;
+class Tooltip {
+	abortController = new AbortController();
+	attributes: Attributes;
+	floatable: Floatable;
 
-		if (this.element != null) {
-			parent.insertAdjacentElement('afterend', this.element);
+	constructor(anchor: HTMLElement, content: Content) {
+		this.attributes = content.attributes;
+		this.floatable = new Floatable(anchor, content.element);
 
-			initialize(this);
-		}
+		initialize(this);
 	}
 
-	destroy() {
-		deactivate(this);
+	destroy(): void {
+		deactivate(this.floatable, active);
+		reset(this.floatable.anchor, this.attributes);
 
 		this.abortController.abort();
+		this.floatable.content.remove();
+		this.floatable.destroy();
 
 		this.abortController = undefined as never;
-		this.activate = undefined as never;
-		this.deactivate = undefined as never;
-		this.element = undefined as never;
-		this.frame = undefined as never;
-		this.parent = undefined as never;
+		this.attributes = undefined as never;
+		this.floatable = undefined as never;
 	}
 }
 
-function activate(tooltip: Tooltip): void {
-	stop(tooltip);
-
-	if (tooltip.active) {
+function addTooltip(anchor: HTMLElement): void {
+	if (tooltips.has(anchor)) {
 		return;
 	}
 
-	tooltip.activate = +setTimeout(() => {
-		tooltip.active = true;
+	const content = getContent(anchor);
 
-		active.add(tooltip);
-
-		document.body.append(tooltip.element);
-
-		tooltip.element.hidden = false;
-
-		update(tooltip);
-	}, 250);
-}
-
-function addTooltip(element: HTMLElement): void {
-	if (!tooltips.has(element)) {
-		tooltips.set(element, new Tooltip(element));
+	if (content != null) {
+		tooltips.set(anchor, new Tooltip(anchor, content));
 	}
 }
 
-function deactivate(tooltip: Tooltip, time?: number): void {
-	stop(tooltip);
-
-	if (!tooltip.active) {
-		return;
-	}
-
-	tooltip.deactivate = +setTimeout(() => {
-		tooltip.active = false;
-
-		active.delete(tooltip);
+function getContent(anchor: HTMLElement): Content | undefined {
+	const attributes = {
+		ariaDescribedby: anchor.getAttribute('aria-describedby'),
+		ariaLabelledBy: anchor.getAttribute('aria-labelledby'),
+	};
 
-		tooltip.element.hidden = true;
+	const wrapper = getWrapper(anchor);
 
-		tooltip.parent.insertAdjacentElement('afterend', tooltip.element);
-	}, time ?? 250);
-}
+	const labelledElements = getElements(attributes.ariaLabelledBy);
 
-function getContent(parent: HTMLElement): HTMLElement | undefined {
-	const wrapper = getWrapper(parent);
+	if (labelledElements.length > 0) {
+		anchor.setAttribute('aria-labelledby', wrapper.id);
 
-	const ids = (parent.getAttribute('aria-describedby') ?? '').split(/\s+/);
+		for (const element of labelledElements) {
+			wrapper.append(element);
+		}
 
-	parent.setAttribute('aria-describedby', wrapper.id);
+		return {
+			attributes,
+			element: wrapper,
+		};
+	}
 
-	const elements = ids
-		.map(id =>
-			isNullableOrWhitespace(id) ? undefined : document.querySelector(`#${id}`),
-		)
-		.filter(element => element instanceof HTMLElement);
+	const describedElements = getElements(attributes.ariaDescribedby);
 
-	if (elements.length > 0) {
-		for (const element of elements) {
-			element.hidden = false;
+	if (describedElements.length > 0) {
+		anchor.setAttribute('aria-describedby', wrapper.id);
 
+		for (const element of describedElements) {
 			wrapper.append(element);
 		}
 
-		return wrapper;
+		return {
+			attributes,
+			element: wrapper,
+		};
 	}
 
-	let content = parent.getAttribute('aria-description');
+	let content = anchor.getAttribute('aria-label');
 
 	if (isNullableOrWhitespace(content)) {
-		content = parent.getAttribute('aria-label');
+		content = anchor.getAttribute('aria-description');
+	}
 
-		if (isNullableOrWhitespace(content)) {
-			return;
-		}
+	if (isNullableOrWhitespace(content)) {
+		return;
 	}
 
 	const paragraph = document.createElement('p');
@@ -122,31 +105,41 @@ function getContent(parent: HTMLElement): HTMLElement | undefined {
 
 	wrapper.append(paragraph);
 
-	return wrapper;
+	return {
+		attributes,
+		element: wrapper,
+	};
 }
 
-function getTop(parent: DOMRect, content: DOMRect): number {
-	let top = parent.top - content.height - margin;
+function getElements(attribute: string | null): HTMLElement[] {
+	const ids = attribute?.split(/\s+/) ?? [];
+	const elements: HTMLElement[] = [];
 
-	if (top - margin >= 0) {
-		return top;
-	}
+	for (const id of ids) {
+		if (isNullableOrWhitespace(id)) {
+			continue;
+		}
+
+		const element = document.querySelector(`#${id}`);
+
+		if (element instanceof HTMLElement) {
+			const cloned = element.cloneNode(true) as HTMLElement;
 
-	top = parent.bottom + margin;
+			cloned.hidden = false;
 
-	if (top + content.height + margin <= window.innerHeight) {
-		return top;
+			elements.push(cloned);
+		}
 	}
 
-	return parent.top + (parent.height - content.height) / 2;
+	return elements;
 }
 
-function getWrapper(parent: HTMLElement): HTMLElement {
+function getWrapper(anchor: HTMLElement): HTMLElement {
 	const wrapper = document.createElement('div');
 
 	wrapper.setAttribute(`${selector}-content`, '');
 
-	wrapper.className = parent.getAttribute(`${selector}-class`) ?? '';
+	wrapper.className = anchor.getAttribute(`${selector}-class`) ?? '';
 	wrapper.hidden = true;
 	wrapper.id = `${selector}-${++index}`;
 	wrapper.role = 'tooltip';
@@ -155,39 +148,13 @@ function getWrapper(parent: HTMLElement): HTMLElement {
 	return wrapper;
 }
 
-function getX(
-	parent: DOMRect,
-	content: DOMRect,
-): {left?: number; right?: number} {
-	if (content.width + 2 * margin >= window.innerWidth) {
-		return {
-			left: margin,
-			right: margin,
-		};
-	}
-
-	const left = parent.left + (parent.width - content.width) / 2;
-	const right = window.innerWidth - margin;
-
-	if (left < margin) {
-		return {
-			left: margin,
-		};
-	}
-
-	if (left + content.width > right) {
-		return {
-			right: margin,
-		};
-	}
+function initialize(tooltip: Tooltip): void {
+	const {abortController, floatable} = tooltip;
+	const {anchor, content} = floatable;
 
-	return {
-		left,
-	};
-}
+	anchor.insertAdjacentElement('afterend', content);
 
-function initialize(tooltip: Tooltip): void {
-	const elements = [tooltip.parent, tooltip.element];
+	const elements = [anchor, content];
 
 	for (const element of elements) {
 		for (const event of activateEvents) {
@@ -195,10 +162,10 @@ function initialize(tooltip: Tooltip): void {
 				element,
 				event,
 				() => {
-					activate(tooltip);
+					activate(floatable, active, undefined, 250);
 				},
 				{
-					signal: tooltip.abortController.signal,
+					signal: abortController.signal,
 				},
 			);
 		}
@@ -208,10 +175,10 @@ function initialize(tooltip: Tooltip): void {
 				element,
 				event,
 				() => {
-					deactivate(tooltip);
+					deactivate(floatable, active, undefined, 250);
 				},
 				{
-					signal: tooltip.abortController.signal,
+					signal: abortController.signal,
 				},
 			);
 		}
@@ -223,53 +190,22 @@ function removeTooltip(element: HTMLElement): void {
 	tooltips.delete(element);
 }
 
-function stop(tooltip: Tooltip): void {
-	if (tooltip.frame != null) {
-		cancelAnimationFrame(tooltip.frame);
-
-		tooltip.frame = undefined;
-	}
-
-	if (tooltip.activate != null) {
-		clearTimeout(tooltip.activate);
-
-		tooltip.activate = undefined;
-	}
-
-	if (tooltip.deactivate != null) {
-		clearTimeout(tooltip.deactivate);
-
-		tooltip.deactivate = undefined;
-	}
-}
-
-function update(tooltip: Tooltip): void {
-	function run(): void {
-		const parentRect = tooltip.parent.getBoundingClientRect();
-		const contentRect = tooltip.element.getBoundingClientRect();
-
-		const top = getTop(parentRect, contentRect);
-		const {left, right} = getX(parentRect, contentRect);
-
-		tooltip.element.style.inset = `${top}px ${right == null ? 'auto' : `${right}px`} auto ${left == null ? 'auto' : `${left}px`}`;
-
-		tooltip.frame = requestAnimationFrame(run);
+function reset(anchor: HTMLElement, attributes: Attributes): void {
+	if (attributes.ariaDescribedby == null) {
+		anchor.removeAttribute('aria-describedby');
+	} else {
+		anchor.setAttribute('aria-describedby', attributes.ariaDescribedby);
 	}
-
-	tooltip.frame = requestAnimationFrame(run);
 }
 
 //
 
-const active = new Set<Tooltip>();
+const active = new Set<Floatable>();
 
 const activateEvents = ['focus', 'mouseenter', 'touchstart'];
 
 const deactivateEvents = ['blur', 'mouseleave'];
 
-const margin =
-	Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
-
 const selector = 'oui-tooltip';
 
 const tooltips = new WeakMap<HTMLElement, Tooltip>();
@@ -282,8 +218,8 @@ attributable(selector, addTooltip, removeTooltip);
 
 on(document, 'keydown', event => {
 	if (event.key === 'Escape') {
-		for (const tooltip of active) {
-			deactivate(tooltip, 0);
+		for (const floatable of active) {
+			deactivate(floatable, active);
 		}
 	}
 });

package/types/floatable.d.cts

@@ -0,0 +1,16 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export declare class Floatable {
+	anchor: HTMLElement;
+	content: HTMLElement;
+	activate: number | undefined;
+	active: boolean;
+	deactivate: number | undefined;
+	frame: DOMHighResTimeStamp | undefined;
+	constructor(anchor: HTMLElement, content: HTMLElement);
+	destroy(): void;
+}
+export declare function activate(floatable: Floatable, active: Set<Floatable>, order?: Floatable[], time?: number): void;
+export declare function deactivate(floatable: Floatable, active: Set<Floatable>, order?: Floatable[], time?: number): void;
+
+export {};

package/types/floatable.d.ts

@@ -0,0 +1,12 @@
+export declare class Floatable {
+    anchor: HTMLElement;
+    content: HTMLElement;
+    activate: number | undefined;
+    active: boolean;
+    deactivate: number | undefined;
+    frame: DOMHighResTimeStamp | undefined;
+    constructor(anchor: HTMLElement, content: HTMLElement);
+    destroy(): void;
+}
+export declare function activate(floatable: Floatable, active: Set<Floatable>, order?: Floatable[], time?: number): void;
+export declare function deactivate(floatable: Floatable, active: Set<Floatable>, order?: Floatable[], time?: number): void;

package/types/focus-trap/embedded.d.cts

@@ -0,0 +1,15 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export declare class FocusTrap {
+	element: HTMLElement;
+	active: boolean;
+	constructor(element: HTMLElement);
+	destroy(): void;
+	disable(): void;
+	enable(): void;
+}
+export declare function createFocusTrap(element: HTMLElement): FocusTrap;
+export declare const focusTraps: WeakMap<HTMLElement, FocusTrap>;
+export declare const selector = "oui-focus-trap";
+
+export {};

package/types/focus-trap/embedded.d.ts

@@ -0,0 +1,11 @@
+export declare class FocusTrap {
+    element: HTMLElement;
+    active: boolean;
+    constructor(element: HTMLElement);
+    destroy(): void;
+    disable(): void;
+    enable(): void;
+}
+export declare function createFocusTrap(element: HTMLElement): FocusTrap;
+export declare const focusTraps: WeakMap<HTMLElement, FocusTrap>;
+export declare const selector = "oui-focus-trap";

package/types/index.d.cts

@@ -1,3 +1,14 @@
 // Generated by dts-bundle-generator v9.5.1
 
+export declare class OuiPopoverElement extends HTMLElement {
+	#private;
+	constructor();
+	close(): void;
+	hidePopover(): void;
+	open(): void;
+	showPopover(): void;
+	toggle(): void;
+	togglePopover(options?: boolean): boolean;
+}
+
 export {};

package/types/index.d.ts

@@ -1 +1,3 @@
-export * from './focus-trap';
+export * from './focus-trap/standalone';
+export * from './popover';
+export * from './tooltip';

package/types/popover.d.cts

@@ -0,0 +1,14 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export declare class OuiPopoverElement extends HTMLElement {
+	#private;
+	constructor();
+	close(): void;
+	hidePopover(): void;
+	open(): void;
+	showPopover(): void;
+	toggle(): void;
+	togglePopover(options?: boolean): boolean;
+}
+
+export {};

package/types/popover.d.ts

@@ -0,0 +1,15 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        'oui-popover': OuiPopoverElement;
+    }
+}
+export declare class OuiPopoverElement extends HTMLElement {
+    #private;
+    constructor();
+    close(): void;
+    hidePopover(): void;
+    open(): void;
+    showPopover(): void;
+    toggle(): void;
+    togglePopover(options?: boolean): boolean;
+}

package/dist/js/focus-trap.cjs

@@ -1,104 +0,0 @@
-"use strict";
-const number = require("@oscarpalmer/atoms/number");
-const event = require("@oscarpalmer/toretto/event");
-const find = require("@oscarpalmer/toretto/find");
-const focusable = require("@oscarpalmer/toretto/focusable");
-const attributable = require("./attributable.cjs");
-class FocusTrap {
-  constructor(element) {
-    this.element = element;
-    element.setAttribute("aria-modal", "true");
-    element.setAttribute("tabindex", "-1");
-  }
-  active = true;
-  activate() {
-    this.element.setAttribute("aria-modal", "true");
-    this.active = true;
-  }
-  destroy() {
-    this.active = false;
-    this.element = void 0;
-  }
-  inactivate() {
-    this.element.setAttribute("aria-modal", "false");
-    this.active = false;
-    inactive.add(this);
-  }
-}
-function addFocusTrap(element) {
-  if (!focusTraps.has(element)) {
-    focusTraps.set(element, new FocusTrap(element));
-  }
-}
-function onEscape(event2) {
-  if (event2.key !== "Escape") {
-    return;
-  }
-  const element = find.findAncestor(
-    document.activeElement,
-    `[${selector}]`
-  );
-  focusTraps.get(element)?.inactivate();
-}
-function onFocusOut() {
-  if (inactive.size === 0) {
-    return;
-  }
-  requestAnimationFrame(() => {
-    const element = find.findAncestor(
-      document.activeElement,
-      `[${selector}]`
-    );
-    if (!focusTraps.has(element)) {
-      for (const focusTrap of inactive) {
-        focusTrap.activate();
-      }
-    }
-  });
-}
-function onTab(event2) {
-  if (event2.key !== "Tab") {
-    return;
-  }
-  const element = find.findAncestor(
-    event2.target,
-    `[${selector}]`
-  );
-  if (!(focusTraps.get(element)?.active ?? false)) {
-    return;
-  }
-  event2.preventDefault();
-  const elements = focusable.getFocusable(element);
-  const { length } = elements;
-  const index = elements.indexOf(event2.target);
-  if (index === -1 || length === 0) {
-    if (length === 0) {
-      element.focus();
-    } else {
-      elements[0].focus();
-    }
-    return;
-  }
-  const next = number.clamp(index + (event2.shiftKey ? -1 : 1), 0, length - 1, true);
-  if (next !== index) {
-    elements[next].focus();
-  }
-}
-function removeFocusTraps(element) {
-  focusTraps.get(element)?.destroy();
-  focusTraps.delete(element);
-}
-const focusTraps = /* @__PURE__ */ new WeakMap();
-const inactive = /* @__PURE__ */ new Set();
-const selector = "oui-focus-trap";
-attributable.attributable(selector, addFocusTrap, removeFocusTraps);
-event.on(document, "focusout", onFocusOut, {
-  capture: true
-});
-event.on(document, "keydown", onTab, {
-  capture: true,
-  passive: false
-});
-event.on(document, "keydown", onEscape, {
-  passive: false
-});

package/dist/js/focus-trap.js

@@ -1,103 +0,0 @@
-import { clamp } from "@oscarpalmer/atoms/number";
-import { on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-import { getFocusable } from "@oscarpalmer/toretto/focusable";
-import { attributable } from "./attributable.js";
-class FocusTrap {
-  constructor(element) {
-    this.element = element;
-    element.setAttribute("aria-modal", "true");
-    element.setAttribute("tabindex", "-1");
-  }
-  active = true;
-  activate() {
-    this.element.setAttribute("aria-modal", "true");
-    this.active = true;
-  }
-  destroy() {
-    this.active = false;
-    this.element = void 0;
-  }
-  inactivate() {
-    this.element.setAttribute("aria-modal", "false");
-    this.active = false;
-    inactive.add(this);
-  }
-}
-function addFocusTrap(element) {
-  if (!focusTraps.has(element)) {
-    focusTraps.set(element, new FocusTrap(element));
-  }
-}
-function onEscape(event) {
-  if (event.key !== "Escape") {
-    return;
-  }
-  const element = findAncestor(
-    document.activeElement,
-    `[${selector}]`
-  );
-  focusTraps.get(element)?.inactivate();
-}
-function onFocusOut() {
-  if (inactive.size === 0) {
-    return;
-  }
-  requestAnimationFrame(() => {
-    const element = findAncestor(
-      document.activeElement,
-      `[${selector}]`
-    );
-    if (!focusTraps.has(element)) {
-      for (const focusTrap of inactive) {
-        focusTrap.activate();
-      }
-    }
-  });
-}
-function onTab(event) {
-  if (event.key !== "Tab") {
-    return;
-  }
-  const element = findAncestor(
-    event.target,
-    `[${selector}]`
-  );
-  if (!(focusTraps.get(element)?.active ?? false)) {
-    return;
-  }
-  event.preventDefault();
-  const elements = getFocusable(element);
-  const { length } = elements;
-  const index = elements.indexOf(event.target);
-  if (index === -1 || length === 0) {
-    if (length === 0) {
-      element.focus();
-    } else {
-      elements[0].focus();
-    }
-    return;
-  }
-  const next = clamp(index + (event.shiftKey ? -1 : 1), 0, length - 1, true);
-  if (next !== index) {
-    elements[next].focus();
-  }
-}
-function removeFocusTraps(element) {
-  focusTraps.get(element)?.destroy();
-  focusTraps.delete(element);
-}
-const focusTraps = /* @__PURE__ */ new WeakMap();
-const inactive = /* @__PURE__ */ new Set();
-const selector = "oui-focus-trap";
-attributable(selector, addFocusTrap, removeFocusTraps);
-on(document, "focusout", onFocusOut, {
-  capture: true
-});
-on(document, "keydown", onTab, {
-  capture: true,
-  passive: false
-});
-on(document, "keydown", onEscape, {
-  passive: false
-});