@oscarpalmer/oui 0.14.0 → 0.15.0

package/dist/js/popover.js

@@ -0,0 +1,160 @@
+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 { Floatable, deactivate, activate } from "./floatable.js";
+import { createFocusTrap } from "./focus-trap/embedded.js";
+const mapped = /* @__PURE__ */ new Map();
+let index = 0;
+class OuiPopoverElement extends HTMLElement {
+  #floatable;
+  #focusTrap;
+  constructor() {
+    super();
+    const content = this.querySelector(":scope > [oui-popover-content]");
+    const toggle2 = 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 (!(toggle2 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}`);
+    }
+    toggle2.setAttribute("aria-controls", content.id);
+    toggle2.setAttribute("aria-haspopup", "dialog");
+    this.#floatable = new Floatable(toggle2, content);
+    this.#focusTrap = createFocusTrap(content);
+    mapped.set(toggle2, this.#floatable);
+    mapped.set(content, this.#floatable);
+  }
+  close() {
+    this.hidePopover();
+  }
+  hidePopover() {
+    if (this.#floatable.active) {
+      closeAbove(this.#floatable.content);
+      deactivate(this.#floatable, active, order);
+      this.#floatable.anchor.focus();
+    }
+  }
+  open() {
+    this.showPopover();
+  }
+  showPopover() {
+    if (!this.#floatable.active) {
+      toggle(this.#floatable.anchor);
+    }
+  }
+  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;
+  }
+}
+function closeAll() {
+  for (const floatable of active) {
+    deactivate(floatable, active, order);
+  }
+}
+function closeAbove(element) {
+  const index2 = order.findIndex(
+    (floatable) => floatable.anchor === element || floatable.content === element
+  );
+  if (index2 === -1 || index2 === order.length - 1) {
+    return;
+  }
+  while (index2 < order.length - 1) {
+    const floatable = order.pop();
+    if (floatable != null) {
+      deactivate(floatable, active, order);
+    }
+  }
+  order[index2].content.focus();
+}
+function focus(content) {
+  let target = getFocusable(content)[0];
+  if (!(target instanceof HTMLElement)) {
+    target = content;
+  }
+  requestAnimationFrame(() => {
+    target.focus();
+  });
+}
+function onClick(event) {
+  const related = findAncestor(
+    event.target,
+    "[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) {
+  if (event.key !== "Escape" || order.length === 0) {
+    return;
+  }
+  const related = findAncestor(event.target, "[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) {
+  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 = /* @__PURE__ */ new Set();
+const order = [];
+export {
+  OuiPopoverElement
+};

package/dist/js/tooltip.cjs

@@ -112,7 +112,7 @@ function initialize(tooltip) {
         element,
         event$1,
         () => {
-          floatable.activate(floatable$1, active, 250);
+          floatable.activate(floatable$1, active, void 0, 250);
         },
         {
           signal: abortController.signal
@@ -124,7 +124,7 @@ function initialize(tooltip) {
         element,
         event$1,
         () => {
-          floatable.deactivate(floatable$1, active, 250);
+          floatable.deactivate(floatable$1, active, void 0, 250);
         },
         {
           signal: abortController.signal
@@ -138,7 +138,6 @@ function removeTooltip(element) {
   tooltips.delete(element);
 }
 function reset(anchor, attributes) {
-  console.log("reset", anchor, attributes);
   if (attributes.ariaDescribedby == null) {
     anchor.removeAttribute("aria-describedby");
   } else {

package/dist/js/tooltip.js

@@ -111,7 +111,7 @@ function initialize(tooltip) {
         element,
         event,
         () => {
-          activate(floatable, active, 250);
+          activate(floatable, active, void 0, 250);
         },
         {
           signal: abortController.signal
@@ -123,7 +123,7 @@ function initialize(tooltip) {
         element,
         event,
         () => {
-          deactivate(floatable, active, 250);
+          deactivate(floatable, active, void 0, 250);
         },
         {
           signal: abortController.signal
@@ -137,7 +137,6 @@ function removeTooltip(element) {
   tooltips.delete(element);
 }
 function reset(anchor, attributes) {
-  console.log("reset", anchor, attributes);
   if (attributes.ariaDescribedby == null) {
     anchor.removeAttribute("aria-describedby");
   } else {

package/package.json

@@ -41,12 +41,12 @@
 		},
 		"./focus-trap": {
 			"import": {
-				"types": "./types/focus-trap.d.ts",
-				"default": "./dist/js/focus-trap.js"
+				"types": "./types/focus-trap/standalone.d.ts",
+				"default": "./dist/js/focus-trap/standalone.js"
 			},
 			"require": {
-				"types": "./types/focus-trap.d.cts",
-				"default": "./dist/js/focus-trap.cjs"
+				"types": "./types/focus-trap/standalone.d.cts",
+				"default": "./dist/js/focus-trap/standalone.cjs"
 			}
 		},
 		"./tooltip": {
@@ -94,5 +94,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.cts",
-	"version": "0.14.0"
+	"version": "0.15.0"
 }

package/src/css/popover.scss

@@ -0,0 +1,9 @@
+@use 'mixins.scss' as mixins;
+
+:where([oui-popover-content]) {
+	@include mixins.shadowOverlay;
+
+	padding: 1rem;
+	background-color: var(--oui-absolute);
+	border-radius: 0.5rem;
+}

package/src/css/tooltip.scss

@@ -15,7 +15,4 @@
 	background-color: var(--oui-absolute);
 	border-radius: 0.25rem;
 	font-size: 0.875rem;
-	position: fixed;
-	inset: 0 auto auto 0;
-	z-index: 10;
 }

package/src/js/floatable.ts

@@ -1,27 +1,30 @@
 export class Floatable {
-	activate: number | undefined;
-	active = false;
-	deactivate: number | undefined;
-	frame: DOMHighResTimeStamp | undefined;
-
-	constructor(
-		public anchor: HTMLElement,
-		public content: HTMLElement,
-	) {}
-
-	destroy(): void {
-		this.activate = undefined;
-		this.deactivate = undefined;
-		this.frame = undefined;
-
-		this.anchor = undefined as never;
-		this.content = undefined as never;
+		activate: number | undefined;
+		active = false;
+		deactivate: number | undefined;
+		frame: DOMHighResTimeStamp | undefined;
+
+		constructor(
+			public anchor: HTMLElement,
+			public content: HTMLElement,
+		) {
+			setStyles(content);
+		}
+
+		destroy(): void {
+			this.activate = undefined;
+			this.deactivate = undefined;
+			this.frame = undefined;
+
+			this.anchor = undefined as never;
+			this.content = undefined as never;
+		}
 	}
-}
 
 export function activate(
 	floatable: Floatable,
 	active: Set<Floatable>,
+	order?: Floatable[],
 	time?: number,
 ): void {
 	stop(floatable);
@@ -31,10 +34,10 @@ export function activate(
 	}
 
 	if (time == null || time === 0) {
-		onActivate(floatable, active);
+		onActivate(floatable, active, order);
 	} else {
 		floatable.activate = +setTimeout(() => {
-			onActivate(floatable, active);
+			onActivate(floatable, active, order);
 		}, time);
 	}
 }
@@ -42,6 +45,7 @@ export function activate(
 export function deactivate(
 	floatable: Floatable,
 	active: Set<Floatable>,
+	order?: Floatable[],
 	time?: number,
 ): void {
 	stop(floatable);
@@ -51,10 +55,10 @@ export function deactivate(
 	}
 
 	if (time == null || time === 0) {
-		onDeactivate(floatable, active);
+		onDeactivate(floatable, active, order);
 	} else {
 		floatable.deactivate = +setTimeout(() => {
-			onDeactivate(floatable, active);
+			onDeactivate(floatable, active, order);
 		}, time);
 	}
 }
@@ -106,11 +110,19 @@ function getY(anchor: DOMRect, content: DOMRect): number {
 	return anchor.top + (anchor.height - content.height) / 2;
 }
 
-function onActivate(floatable: Floatable, active: Set<Floatable>): void {
+function onActivate(
+	floatable: Floatable,
+	active: Set<Floatable>,
+	order?: Floatable[],
+): void {
 	floatable.active = true;
 
 	active.add(floatable);
 
+	if (order != null) {
+		order.push(floatable);
+	}
+
 	document.body.append(floatable.content);
 
 	floatable.content.hidden = false;
@@ -118,11 +130,21 @@ function onActivate(floatable: Floatable, active: Set<Floatable>): void {
 	update(floatable);
 }
 
-function onDeactivate(floatable: Floatable, active: Set<Floatable>): void {
+function onDeactivate(
+	floatable: Floatable,
+	active: Set<Floatable>,
+	order?: Floatable[],
+): void {
 	floatable.active = false;
 
 	active.delete(floatable);
 
+	const index = order?.indexOf(floatable) ?? -1;
+
+	if (index > -1) {
+		order?.splice(index, 1);
+	}
+
 	floatable.content.hidden = true;
 
 	floatable.anchor.insertAdjacentElement('afterend', floatable.content);
@@ -144,6 +166,12 @@ function update(floatable: Floatable): void {
 	floatable.frame = requestAnimationFrame(run);
 }
 
+function setStyles(content: HTMLElement): void {
+	content.style.position = 'fixed';
+	content.style.inset = '0 auto auto 0';
+	content.style.zIndex = '10';
+}
+
 function stop(floatable: Floatable): void {
 	if (floatable.frame != null) {
 		cancelAnimationFrame(floatable.frame);

package/src/js/focus-trap/embedded.ts

@@ -0,0 +1,215 @@
+import {clamp} from '@oscarpalmer/atoms/number';
+import {on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import {getFocusable} from '@oscarpalmer/toretto/focusable';
+
+export class FocusTrap {
+	active = true;
+
+	constructor(public element: HTMLElement) {
+		element.setAttribute('aria-modal', 'true');
+		element.setAttribute('tabindex', '-1');
+	}
+
+	destroy() {
+		this.element = undefined as never;
+	}
+
+	disable() {
+		if (this.active && !this.element.hasAttribute(`${selector}-noescape`)) {
+			setDisabled(this, true);
+		}
+	}
+
+	enable() {
+		if (!this.active) {
+			setDisabled(this, false);
+		}
+	}
+}
+
+//
+
+export function createFocusTrap(element: HTMLElement): FocusTrap {
+	let focusTrap = focusTraps.get(element);
+
+	if (focusTrap == null) {
+		focusTrap = new FocusTrap(element);
+
+		focusTraps.set(element, focusTrap);
+	}
+
+	return focusTrap;
+}
+
+function onEscape(event: KeyboardEvent): void {
+	focusTraps
+		.get(
+			findAncestor(event.target as HTMLElement, `[${selector}]`) as HTMLElement,
+		)
+		?.disable();
+}
+
+function onFocusIn(event: Event): void {
+	lastTarget =
+		findAncestor(event.target as HTMLElement, `[${selector}]`) == null
+			? undefined
+			: (event.target as HTMLElement);
+}
+
+function onKeydown(event: KeyboardEvent): void {
+	switch (event.key) {
+		case 'Escape':
+			onEscape(event);
+			break;
+
+		case 'Tab':
+			onTab(event);
+			break;
+
+		default:
+			return;
+	}
+}
+
+function onPointerdown(event: MouseEvent | TouchEvent): void {
+	const lastFocusTrap = findAncestor(
+		lastTarget as HTMLElement,
+		`[${selector}]`,
+	) as HTMLElement;
+
+	const nextFocusTrap = findAncestor(
+		event.target as HTMLElement,
+		`[${selector}]`,
+	) as HTMLElement;
+
+	if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
+		event.preventDefault();
+
+		lastTarget?.focus();
+	}
+
+	if (disabled.size === 0) {
+		return;
+	}
+
+	for (const focusTrap of disabled) {
+		if (focusTrap.element !== nextFocusTrap) {
+			focusTrap.enable();
+			return;
+		}
+	}
+}
+
+function onTab(event: KeyboardEvent): void {
+	const element = findAncestor(
+		event.target as HTMLElement,
+		`[${selector}]`,
+	) as HTMLElement;
+
+	const focusTrap = focusTraps.get(element);
+
+	if (focusTrap == null) {
+		return;
+	}
+
+	if (focusTrap.active) {
+		event.preventDefault();
+	}
+
+	const elements = getFocusable(element);
+
+	const index = elements.indexOf(event.target as HTMLElement);
+
+	if (index === -1 || elements.length === 0) {
+		tabToTrap(focusTrap, elements, element);
+	} else {
+		tabToElement(event, focusTrap, elements, index);
+	}
+}
+
+function setDisabled(focusTrap: FocusTrap, value: boolean): void {
+	focusTrap.element.setAttribute('aria-modal', String(!value));
+
+	focusTrap.active = !value;
+
+	if (value) {
+		disabled.add(focusTrap);
+	} else {
+		disabled.delete(focusTrap);
+	}
+}
+
+function tabToElement(
+	event: KeyboardEvent,
+	focusTrap: FocusTrap,
+	elements: Element[],
+	index: number,
+): void {
+	const next = clamp(
+		index + (event.shiftKey ? -1 : 1),
+		0,
+		elements.length - 1,
+		true,
+	);
+
+	if (!focusTrap.active) {
+		if (
+			(index === length - 1 && next === 0) ||
+			(index === 0 && next === length - 1)
+		) {
+			lastTarget = undefined;
+
+			focusTrap.enable();
+		}
+
+		return;
+	}
+
+	(elements[next] as HTMLElement).focus();
+
+	lastTarget = elements[next] as HTMLElement;
+}
+
+function tabToTrap(
+	focusTrap: FocusTrap,
+	elements: Element[],
+	element: HTMLElement,
+): void {
+	if (focusTrap.active) {
+		const next = length === 0 ? element : elements[0];
+
+		(next as HTMLElement).focus();
+
+		lastTarget = next as HTMLElement;
+	} else {
+		lastTarget = undefined;
+
+		focusTrap.enable();
+	}
+}
+
+//
+
+const disabled = new Set<FocusTrap>();
+
+const eventOptions = {
+	capture: true,
+	passive: false,
+};
+
+export const focusTraps = new WeakMap<HTMLElement, FocusTrap>();
+
+let lastTarget: HTMLElement | undefined;
+
+export const selector = 'oui-focus-trap';
+
+//
+
+on(document, 'focusin', onFocusIn, eventOptions);
+
+on(document, 'keydown', onKeydown, eventOptions);
+
+on(document, 'mousedown', onPointerdown, eventOptions);
+
+on(document, 'touchstart', onPointerdown, eventOptions);

package/src/js/focus-trap/standalone.ts

@@ -0,0 +1,9 @@
+import {attributable} from '../attributable';
+import {createFocusTrap, focusTraps, selector} from './embedded';
+
+function removeFocusTraps(element: HTMLElement): void {
+	focusTraps.get(element)?.destroy();
+	focusTraps.delete(element);
+}
+
+attributable(selector, createFocusTrap, removeFocusTraps);

package/src/js/index.ts

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