@oscarpalmer/oui 0.14.0 → 0.15.0

package/src/js/popover.ts

@@ -0,0 +1,221 @@
+import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import {on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import {getFocusable} from '@oscarpalmer/toretto/focusable';
+import {activate, deactivate, Floatable} from './floatable';
+import {createFocusTrap, type FocusTrap} from './focus-trap/embedded';
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'oui-popover': OuiPopoverElement;
+	}
+}
+
+const mapped = new Map<HTMLElement, Floatable>();
+
+let index = 0;
+
+export class OuiPopoverElement extends HTMLElement {
+	#floatable: Floatable;
+	#focusTrap: FocusTrap;
+
+	constructor() {
+		super();
+
+		const content = this.querySelector(':scope > [oui-popover-content]');
+		const toggle = this.querySelector(':scope > [oui-popover-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('oui-focus-trap', '');
+		content.setAttribute('oui-focus-trap-noescape', '');
+
+		if (isNullableOrWhitespace(content.id)) {
+			content.setAttribute('id', `oui-popover-content-${++index}`);
+		}
+
+		toggle.setAttribute('aria-controls', content.id);
+		toggle.setAttribute('aria-haspopup', 'dialog');
+
+		this.#floatable = new Floatable(toggle, content);
+		this.#focusTrap = createFocusTrap(content);
+
+		mapped.set(toggle, this.#floatable);
+		mapped.set(content, this.#floatable);
+	}
+
+	close(): void {
+		this.hidePopover();
+	}
+
+	hidePopover(): void {
+		if (this.#floatable.active) {
+			closeAbove(this.#floatable.content);
+			deactivate(this.#floatable, active, order);
+
+			this.#floatable.anchor.focus();
+		}
+	}
+
+	open(): void {
+		this.showPopover();
+	}
+
+	showPopover(): void {
+		if (!this.#floatable.active) {
+			toggle(this.#floatable.anchor);
+		}
+	}
+
+	toggle(): void {
+		this.togglePopover();
+	}
+
+	togglePopover(options?: boolean): boolean {
+		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;
+	}
+}
+
+//
+
+function closeAll(): void {
+	for (const floatable of active) {
+		deactivate(floatable, active, order);
+	}
+}
+
+function closeAbove(element: HTMLElement): void {
+	const index = order.findIndex(
+		floatable => floatable.anchor === element || floatable.content === element,
+	);
+
+	if (index === -1 || index === order.length - 1) {
+		return;
+	}
+
+	while (index < order.length - 1) {
+		const floatable = order.pop();
+
+		if (floatable != null) {
+			deactivate(floatable, active, order);
+		}
+	}
+
+	order[index].content.focus();
+}
+
+function focus(content: HTMLElement): void {
+	let target = getFocusable(content)[0];
+
+	if (!(target instanceof HTMLElement)) {
+		target = content;
+	}
+
+	requestAnimationFrame(() => {
+		(target as HTMLElement).focus();
+	});
+}
+
+function onClick(event: MouseEvent): void {
+	const related = findAncestor(
+		event.target as never,
+		'[oui-popover-toggle], [oui-popover-content]',
+	);
+
+	if (!(related instanceof HTMLElement)) {
+		closeAll();
+	} else if (related.hasAttribute('oui-popover-content')) {
+		closeAbove(related);
+	} else {
+		toggle(related);
+	}
+}
+
+function onKeydown(event: KeyboardEvent): void {
+	if (event.key !== 'Escape' || order.length === 0) {
+		return;
+	}
+
+	const related = findAncestor(event.target as never, '[oui-popover-content]');
+
+	if (!(related instanceof HTMLElement)) {
+		return;
+	}
+
+	closeAbove(related);
+
+	const floatable = mapped.get(related);
+
+	if (floatable != null) {
+		deactivate(floatable, active, order);
+
+		floatable.anchor.focus();
+	}
+}
+
+function toggle(anchor: HTMLElement): void {
+	const content = findAncestor(anchor, '[oui-popover-content]');
+
+	if (content instanceof HTMLElement) {
+		closeAbove(content);
+	} else {
+		closeAll();
+	}
+
+	const floatable = mapped.get(anchor);
+
+	if (floatable == null) {
+		return;
+	}
+
+	if (floatable.active) {
+		deactivate(floatable, active, order);
+	} else {
+		activate(floatable, active, order);
+		focus(floatable.content);
+	}
+}
+
+//
+
+customElements.define('oui-popover', OuiPopoverElement);
+
+on(document, 'click', onClick);
+on(document, 'keydown', onKeydown);
+
+//
+
+const active = new Set<Floatable>();
+
+const order: Floatable[] = [];

package/src/js/tooltip.ts

@@ -162,7 +162,7 @@ function initialize(tooltip: Tooltip): void {
 				element,
 				event,
 				() => {
-					activate(floatable, active, 250);
+					activate(floatable, active, undefined, 250);
 				},
 				{
 					signal: abortController.signal,
@@ -175,7 +175,7 @@ function initialize(tooltip: Tooltip): void {
 				element,
 				event,
 				() => {
-					deactivate(floatable, active, 250);
+					deactivate(floatable, active, undefined, 250);
 				},
 				{
 					signal: abortController.signal,
@@ -191,8 +191,6 @@ function removeTooltip(element: HTMLElement): void {
 }
 
 function reset(anchor: HTMLElement, attributes: Attributes): void {
-	console.log('reset', anchor, attributes);
-
 	if (attributes.ariaDescribedby == null) {
 		anchor.removeAttribute('aria-describedby');
 	} else {

package/types/floatable.d.cts

@@ -10,7 +10,7 @@ export declare class Floatable {
 	constructor(anchor: HTMLElement, content: HTMLElement);
 	destroy(): void;
 }
-export declare function activate(floatable: Floatable, active: Set<Floatable>, time?: number): void;
-export declare function deactivate(floatable: Floatable, active: Set<Floatable>, time?: number): 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

@@ -8,5 +8,5 @@ export declare class Floatable {
     constructor(anchor: HTMLElement, content: HTMLElement);
     destroy(): void;
 }
-export declare function activate(floatable: Floatable, active: Set<Floatable>, time?: number): void;
-export declare function deactivate(floatable: Floatable, active: Set<Floatable>, time?: number): 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
-});

package/src/js/focus-trap.ts

@@ -1,133 +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';
-
-class FocusTrap {
-	active = true;
-
-	constructor(private element: HTMLElement) {
-		element.setAttribute('aria-modal', 'true');
-		element.setAttribute('tabindex', '-1');
-	}
-
-	activate() {
-		this.element.setAttribute('aria-modal', 'true');
-
-		this.active = true;
-	}
-
-	destroy() {
-		this.active = false;
-		this.element = undefined as never;
-	}
-
-	inactivate() {
-		this.element.setAttribute('aria-modal', 'false');
-
-		this.active = false;
-
-		inactive.add(this);
-	}
-}
-
-function addFocusTrap(element: HTMLElement): void {
-	if (!focusTraps.has(element)) {
-		focusTraps.set(element, new FocusTrap(element));
-	}
-}
-
-function onEscape(event: KeyboardEvent): void {
-	if (event.key !== 'Escape') {
-		return;
-	}
-
-	const element = findAncestor(
-		document.activeElement as never,
-		`[${selector}]`,
-	) as HTMLElement;
-
-	focusTraps.get(element)?.inactivate();
-}
-
-function onFocusOut(): void {
-	if (inactive.size === 0) {
-		return;
-	}
-
-	requestAnimationFrame(() => {
-		const element = findAncestor(
-			document.activeElement as never,
-			`[${selector}]`,
-		) as HTMLElement;
-
-		if (!focusTraps.has(element)) {
-			for (const focusTrap of inactive) {
-				focusTrap.activate();
-			}
-		}
-	});
-}
-
-function onTab(event: KeyboardEvent): void {
-	if (event.key !== 'Tab') {
-		return;
-	}
-
-	const element = findAncestor(
-		event.target as never,
-		`[${selector}]`,
-	) as HTMLElement;
-
-	if (!(focusTraps.get(element)?.active ?? false)) {
-		return;
-	}
-
-	event.preventDefault();
-
-	const elements = getFocusable(element);
-	const {length} = elements;
-
-	const index = elements.indexOf(event.target as HTMLElement);
-
-	if (index === -1 || length === 0) {
-		if (length === 0) {
-			element.focus();
-		} else {
-			(elements[0] as HTMLElement).focus();
-		}
-
-		return;
-	}
-
-	const next = clamp(index + (event.shiftKey ? -1 : 1), 0, length - 1, true);
-
-	if (next !== index) {
-		(elements[next] as HTMLElement).focus();
-	}
-}
-
-function removeFocusTraps(element: HTMLElement): void {
-	focusTraps.get(element)?.destroy();
-	focusTraps.delete(element);
-}
-
-const focusTraps = new WeakMap<HTMLElement, FocusTrap>();
-const inactive = new Set<FocusTrap>();
-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,
-});