@oscarpalmer/oui 0.22.0 → 0.23.0

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

@@ -1,26 +1,18 @@
 //#region src/js/internal/floatable.d.ts
 declare class Floatable {
-  readonly options: Options;
-  active: boolean;
-  disabled: boolean;
-  frame: DOMHighResTimeStamp | undefined;
-  ignoreFocus: boolean;
-  constructor(options: Options);
-  destroy(): void;
-  disable(): void;
-  enable(): void;
-  toggle(active: boolean, ignoreFocus?: boolean): void;
-}
-type Options = {
   anchor: HTMLElement;
   content: HTMLElement;
-  defaultPosition: Position;
-  interactive: boolean;
-  positionAttribute: string;
-  reusable: boolean;
-  onAfter?: (active: boolean) => void;
+  options: FloatableOptions;
+  constructor(anchor: HTMLElement, content: HTMLElement, options: FloatableOptions);
+  destroy(): void;
+  update(): void;
+}
+type FloatableOptions = {
+  attribute: string;
+  position: FloatablePosition;
 };
-type Position = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'start' | 'start-bottom' | 'start-top';
-declare function deactivate(floatable: Floatable): void;
+type FloatablePosition = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'start' | 'start-bottom' | 'start-top';
+declare function createFloatable(anchor: HTMLElement | null, content: HTMLElement, options: FloatableOptions): Floatable | undefined;
+declare function removeFloatable(content: HTMLElement): void;
 //#endregion
-export { Floatable, deactivate };
+export { Floatable, FloatableOptions, FloatablePosition, createFloatable, removeFloatable };

package/dist/js/internal/floatable.mjs

@@ -1,148 +1,49 @@
-import { on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 //#region src/js/internal/floatable.ts
 var Floatable = class {
+	anchor;
+	content;
 	options;
-	active = false;
-	disabled = false;
-	frame;
-	ignoreFocus = false;
-	constructor(options) {
+	constructor(anchor, content, options) {
+		this.anchor = anchor;
+		this.content = content;
 		this.options = options;
-		initialize(this);
+		const anchorName = getAnchorName(anchor);
+		anchor.style.anchorName = anchorName;
+		content.style.positionAnchor = anchorName;
 	}
 	destroy() {
-		stop(this);
-		const state = getState();
-		state?.active.delete(this);
-		state?.mapped.delete(this.options.anchor);
-		state?.mapped.delete(this.options.content);
-		this.options.anchor = void 0;
-		this.options.content = void 0;
+		this.anchor = null;
+		this.content = null;
 	}
-	disable() {
-		if (this.disabled) return;
-		this.disabled = true;
-		stop(this);
-		getState()?.active.delete(this);
-	}
-	enable() {
-		if (!this.disabled) return;
-		this.disabled = false;
-		initialize(this);
-	}
-	toggle(active, ignoreFocus) {
-		if (this.disabled || this.active === active) return;
-		const state = getState();
-		if (state == null) return;
-		this.ignoreFocus = !active && (ignoreFocus ?? false);
-		stop(this);
-		if (active) state.active.add(this);
-		else state.active.delete(this);
-		if (this.options.interactive) if (active) state.order.push(this);
-		else {
-			const index = state.order.indexOf(this);
-			if (index > -1) state.order.splice(index, 1);
-		}
-		if (active) activate(this);
-		else deactivate(this);
+	update() {
+		setPosition(this);
 	}
 };
-function activate(floatable) {
-	floatable.active = true;
-	document.body.append(floatable.options.content);
-	floatable.options.content.hidden = false;
-	setPosition(floatable);
-}
-function closeAbove(element) {
-	const state = getState();
-	if (state == null) return;
-	const index = state.order.findIndex((floatable) => floatable.options.anchor === element || floatable.options.content === element);
-	if (index === -1 || index === state.order.length - 1) return;
-	while (index < state.order.length - 1) state.order.pop()?.toggle(false, true);
-}
-function closeAll() {
-	const state = getState();
-	const floatables = [...state?.active ?? []];
-	state?.active.clear();
-	for (const floatable of floatables) floatable.toggle(false, true);
-}
-function closeNonInteractive(state) {
-	for (const floatable of state.active) if (!floatable.options.interactive) floatable.toggle(false);
-}
-function deactivate(floatable) {
-	floatable.active = false;
-	if (!floatable.options.reusable) {
-		floatable.options.content.hidden = true;
-		floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
+function createFloatable(anchor, content, options) {
+	if (anchor == null) return;
+	let floatable = instances.get(content);
+	if (floatable == null) {
+		floatable = new Floatable(anchor, content, options);
+		instances.set(content, floatable);
 	}
-	floatable.options.onAfter?.(false);
+	return floatable;
 }
-function getAnchorName() {
+function getAnchorName(anchor) {
+	let { anchorName } = anchor.style;
+	if (anchorName.length > 0) return anchorName;
 	index += 1;
 	return `--oui-floatable-anchor-${index}`;
 }
-function getState() {
-	return window._oscarpalmer_oui_floatable;
-}
-function initialize(floatable) {
-	const { anchor, content, interactive } = floatable.options;
-	if (interactive) {
-		anchor.setAttribute(ATTRIBUTE_ANCHOR, "");
-		content.setAttribute(ATTRIBUTE_CONTENT, "");
-	}
-	const anchorName = getAnchorName();
-	anchor.style.anchorName = anchorName;
-	content.style.position = "absolute";
-	content.style.positionAnchor = anchorName;
-	content.style.positionTry = "normal flip-start";
-	const state = getState();
-	state?.mapped.set(anchor, floatable);
-	state?.mapped.set(content, floatable);
-}
-function isDisabled(element) {
-	return element.disabled || element.readOnly || element.getAttribute("aria-disabled") === "true";
-}
-function onClick(event) {
-	const related = findAncestor(event, SELECTOR_ALL);
-	if (!(related instanceof HTMLElement)) closeAll();
-	else if (related.hasAttribute(ATTRIBUTE_CONTENT)) closeAbove(related);
-	else if (!isDisabled(related)) toggle(related);
-}
-function onKeyDown(event) {
-	if (event.key !== "Escape") return;
-	const state = getState();
-	if (state == null || state.active.size === 0) return;
-	closeNonInteractive(state);
-	const related = findAncestor(event, SELECTOR_CONTENT);
-	if (!(related instanceof HTMLElement)) return;
-	closeAbove(related);
-	const floatable = state.mapped.get(related);
-	if (floatable != null) floatable.toggle(false);
+function removeFloatable(content) {
+	instances.get(content)?.destroy();
+	instances.delete(content);
 }
 function setPosition(floatable) {
-	let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute) ?? floatable.options.defaultPosition;
-	if (AREAS[position] == null) position = floatable.options.defaultPosition;
+	let position = floatable.anchor.getAttribute(floatable.options.attribute) ?? floatable.options.position;
+	if (AREAS[position] == null) position = floatable.options.position;
 	const area = AREAS[position];
-	floatable.options.content.style.positionArea = area;
-	floatable.options.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
-	floatable.options.onAfter?.(true);
-}
-function stop(floatable) {
-	if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
-	floatable.frame = void 0;
-}
-function toggle(anchor) {
-	const floatable = getState()?.mapped.get(anchor);
-	if (floatable == null) {
-		closeAll();
-		return;
-	}
-	const active = Boolean(floatable.active);
-	const content = findAncestor(floatable.options.anchor, SELECTOR_CONTENT);
-	if (content == null) closeAll();
-	else closeAbove(content);
-	floatable.toggle(!active);
+	floatable.content.style.positionArea = area;
+	floatable.content.setAttribute(ATTRIBUTE, POSITIONS[area]);
 }
 const AREAS = {
 	above: "block-start",
@@ -158,30 +59,9 @@ const AREAS = {
 	"start-bottom": "span-start start",
 	"start-top": "span-end start"
 };
-const ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
-const ATTRIBUTE_CONTENT = "oui-floatable-content";
-const ATTRIBUTE_POSITION = "oui-position";
-const INSERT_AFTEREND = "afterend";
+const ATTRIBUTE = "oui-position";
 const POSITIONS = Object.fromEntries(Object.entries(AREAS).map(([position, area]) => [area, position]));
-const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
-const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const instances = /* @__PURE__ */ new WeakMap();
 let index = 0;
-if (window._oscarpalmer_oui_floatable == null) {
-	Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
-		enumerable: false,
-		value: {
-			active: /* @__PURE__ */ new Set(),
-			mapped: /* @__PURE__ */ new Map(),
-			order: []
-		},
-		writable: false
-	});
-	on(document, "keydown", (event) => {
-		onKeyDown(event);
-	});
-	on(document, "click", (event) => {
-		onClick(event);
-	});
-}
 //#endregion
-export { Floatable, deactivate };
+export { Floatable, createFloatable, removeFloatable };

package/dist/js/popover.d.mts

@@ -1,20 +1 @@
-//#region src/js/popover.d.ts
-declare global {
-  interface HTMLElementTagNameMap {
-    'oui-popover': OuiPopoverElement;
-  }
-}
-declare class OuiPopoverElement extends HTMLElement {
-  #private;
-  constructor();
-  close(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  hidePopover(): void;
-  open(): void;
-  showPopover(): void;
-  toggle(): void;
-  togglePopover(options?: boolean): boolean;
-}
-//#endregion
-export { OuiPopoverElement };
+export { };

package/dist/js/popover.mjs

@@ -1,89 +1,60 @@
-import { createFocusTrap } from "./focus-trap/embedded.mjs";
-import { Floatable } from "./internal/floatable.mjs";
-import { getFocusable } from "@oscarpalmer/toretto/focusable";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { attributable } from "./internal/attributable.mjs";
+import { createFocusTrap, removeFocusTrap } from "./focus-trap/embedded.mjs";
+import { createFloatable, removeFloatable } from "./internal/floatable.mjs";
+import { on } from "@oscarpalmer/toretto/event";
 //#region src/js/popover.ts
-let index = 0;
-var OuiPopoverElement = class extends HTMLElement {
-	#floatable;
-	#focusTrap;
-	constructor() {
-		super();
-		const content = this.querySelector(SELECTOR_CONTENT);
-		const toggle = this.querySelector(SELECTOR_TOGGLE);
-		if (!(content instanceof HTMLElement)) throw new Error("A oui-popover must have a direct child element with the [oui-popover-content]-attribute");
-		if (!(toggle instanceof HTMLButtonElement)) throw new Error("A oui-popover must have a direct child element with the [oui-popover-toggle]-attribute and be a button");
-		content.hidden = true;
-		content.setAttribute("role", "dialog");
-		content.setAttribute("aria-modal", "true");
-		if (isNullableOrWhitespace(content.id)) content.setAttribute("id", `${ATTRIBUTE_ID_PREFIX}_${++index}`);
-		toggle.setAttribute("aria-controls", content.id);
-		toggle.setAttribute("aria-haspopup", "dialog");
-		this.#floatable = new Floatable({
-			content,
-			anchor: toggle,
-			defaultPosition: "below-start",
-			interactive: true,
-			positionAttribute: "position",
-			reusable: false,
-			onAfter: (active) => {
-				if (active) focus(content);
-				else if (!this.#floatable.ignoreFocus) toggle.focus();
-			}
+var Popover = class {
+	element;
+	anchor;
+	floatable;
+	focusTrap;
+	listener;
+	constructor(element) {
+		this.element = element;
+		this.anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
+		this.floatable = createFloatable(this.anchor, element, options);
+		this.focusTrap = createFocusTrap(element, { noescape: true });
+		this.listener = on(element, EVENT_TOGGLE, (event) => {
+			if (event.newState === STATE_OPEN) {
+				ignoreFocus = false;
+				this.floatable?.update();
+				element.focus();
+			} else if (!ignoreFocus) this.anchor?.focus();
 		});
-		this.#focusTrap = createFocusTrap(content, { noescape: true });
-		POPOVERS.set(toggle, this.#floatable);
-		POPOVERS.set(content, this.#floatable);
+		this.element.setAttribute(ATTRIBUTE_CONTENT, "");
+		this.floatable?.update();
 	}
-	close() {
-		this.hidePopover();
-	}
-	connectedCallback() {
-		this.#floatable.enable();
-		this.#focusTrap.connect();
-	}
-	disconnectedCallback() {
-		this.#floatable.disable();
-		this.#focusTrap.disconnect();
-	}
-	hidePopover() {
-		if (this.#floatable.active && this.isConnected) this.#floatable.toggle(false);
-	}
-	open() {
-		this.showPopover();
-	}
-	showPopover() {
-		if (!this.#floatable.active && this.isConnected) this.#floatable.toggle(true);
-	}
-	toggle() {
-		this.togglePopover();
-	}
-	togglePopover(options) {
-		if (typeof options === "boolean") {
-			if (options === true) this.showPopover();
-			else this.hidePopover();
-			return options;
-		}
-		if (this.#floatable.active) {
-			this.hidePopover();
-			return false;
-		}
-		this.showPopover();
-		return true;
+	destroy() {
+		this.focusTrap?.destroy();
+		removeFloatable(this.element);
+		removeFocusTrap(this.element);
+		this.element.removeAttribute(ATTRIBUTE_CONTENT);
+		this.anchor = null;
+		this.element = null;
 	}
 };
-function focus(content) {
-	let target = getFocusable(content)[0];
-	if (!(target instanceof HTMLElement)) target = content;
-	requestAnimationFrame(() => {
-		target.focus();
-	});
+function onAdd(element) {
+	if (!instances.has(element) && element.getAttribute(ATTRIBUTE) !== POPOVER_HINT) instances.set(element, new Popover(element));
+}
+function onPointerdown() {
+	ignoreFocus = true;
 }
-const ATTRIBUTE_ID_PREFIX = "oui_popover_content_";
-const POPOVERS = /* @__PURE__ */ new Map();
-const SELECTOR = "oui-popover";
-const SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
-const SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
-customElements.define(SELECTOR, OuiPopoverElement);
+function onRemove(element) {
+	instances.get(element)?.destroy();
+	instances.delete(element);
+}
+const ATTRIBUTE = "popover";
+const ATTRIBUTE_CONTENT = "oui-popover-content";
+const EVENT_TOGGLE = "toggle";
+const POPOVER_HINT = "hint";
+const STATE_OPEN = "open";
+const instances = /* @__PURE__ */ new WeakMap();
+const options = {
+	attribute: "position",
+	position: "below-start"
+};
+let ignoreFocus = false;
+on(document, "pointerdown", onPointerdown, { capture: true });
+attributable(ATTRIBUTE, onAdd, onRemove);
 //#endregion
-export { OuiPopoverElement };
+export {};

package/dist/js/tooltip.d.mts

@@ -1,4 +1,4 @@
 //#region src/js/tooltip.d.ts
-declare function setTooltipDelay(open?: number, close?: number): void;
+declare function setTooltipDelay(value: number): void;
 //#endregion
 export { setTooltipDelay };