@oscarpalmer/oui 0.13.0 → 0.15.0

package/dist/js/tooltip.js

@@ -1,144 +1,120 @@
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { on } from "@oscarpalmer/toretto/event";
 import { attributable } from "./attributable.js";
+import { deactivate, Floatable, activate } from "./floatable.js";
 class Tooltip {
-  constructor(parent) {
-    this.parent = parent;
-    this.element = getContent(parent);
-    if (this.element != null) {
-      parent.insertAdjacentElement("afterend", this.element);
-      initialize(this);
-    }
-  }
   abortController = new AbortController();
-  activate;
-  active = false;
-  deactivate;
-  element;
-  frame;
+  attributes;
+  floatable;
+  constructor(anchor, content) {
+    this.attributes = content.attributes;
+    this.floatable = new Floatable(anchor, content.element);
+    initialize(this);
+  }
   destroy() {
-    deactivate(this);
+    deactivate(this.floatable, active);
+    reset(this.floatable.anchor, this.attributes);
     this.abortController.abort();
+    this.floatable.content.remove();
+    this.floatable.destroy();
     this.abortController = void 0;
-    this.activate = void 0;
-    this.deactivate = void 0;
-    this.element = void 0;
-    this.frame = void 0;
-    this.parent = void 0;
+    this.attributes = void 0;
+    this.floatable = void 0;
   }
 }
-function activate(tooltip) {
-  stop(tooltip);
-  if (tooltip.active) {
+function addTooltip(anchor) {
+  if (tooltips.has(anchor)) {
     return;
   }
-  tooltip.activate = +setTimeout(() => {
-    tooltip.active = true;
-    active.add(tooltip);
-    document.body.append(tooltip.element);
-    tooltip.element.hidden = false;
-    update(tooltip);
-  }, 250);
-}
-function addTooltip(element) {
-  if (!tooltips.has(element)) {
-    tooltips.set(element, new Tooltip(element));
+  const content = getContent(anchor);
+  if (content != null) {
+    tooltips.set(anchor, new Tooltip(anchor, content));
   }
 }
-function deactivate(tooltip, time) {
-  stop(tooltip);
-  if (!tooltip.active) {
-    return;
+function getContent(anchor) {
+  const attributes = {
+    ariaDescribedby: anchor.getAttribute("aria-describedby"),
+    ariaLabelledBy: anchor.getAttribute("aria-labelledby")
+  };
+  const wrapper = getWrapper(anchor);
+  const labelledElements = getElements(attributes.ariaLabelledBy);
+  if (labelledElements.length > 0) {
+    anchor.setAttribute("aria-labelledby", wrapper.id);
+    for (const element of labelledElements) {
+      wrapper.append(element);
+    }
+    return {
+      attributes,
+      element: wrapper
+    };
   }
-  tooltip.deactivate = +setTimeout(() => {
-    tooltip.active = false;
-    active.delete(tooltip);
-    tooltip.element.hidden = true;
-    tooltip.parent.insertAdjacentElement("afterend", tooltip.element);
-  }, time ?? 250);
-}
-function getContent(parent) {
-  const wrapper = getWrapper(parent);
-  const ids = (parent.getAttribute("aria-describedby") ?? "").split(/\s+/);
-  parent.setAttribute("aria-describedby", wrapper.id);
-  const elements = ids.map(
-    (id) => isNullableOrWhitespace(id) ? void 0 : document.querySelector(`#${id}`)
-  ).filter((element) => element instanceof HTMLElement);
-  if (elements.length > 0) {
-    for (const element of elements) {
-      element.hidden = false;
+  const describedElements = getElements(attributes.ariaDescribedby);
+  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");
-    if (isNullableOrWhitespace(content)) {
-      return;
-    }
+    content = anchor.getAttribute("aria-description");
+  }
+  if (isNullableOrWhitespace(content)) {
+    return;
   }
   const paragraph = document.createElement("p");
   paragraph.textContent = content;
   wrapper.append(paragraph);
-  return wrapper;
+  return {
+    attributes,
+    element: wrapper
+  };
 }
-function getTop(parent, content) {
-  let top = parent.top - content.height - margin;
-  if (top - margin >= 0) {
-    return top;
-  }
-  top = parent.bottom + margin;
-  if (top + content.height + margin <= window.innerHeight) {
-    return top;
+function getElements(attribute) {
+  const ids = attribute?.split(/\s+/) ?? [];
+  const elements = [];
+  for (const id of ids) {
+    if (isNullableOrWhitespace(id)) {
+      continue;
+    }
+    const element = document.querySelector(`#${id}`);
+    if (element instanceof HTMLElement) {
+      const cloned = element.cloneNode(true);
+      cloned.hidden = false;
+      elements.push(cloned);
+    }
   }
-  return parent.top + (parent.height - content.height) / 2;
+  return elements;
 }
-function getWrapper(parent) {
+function getWrapper(anchor) {
   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";
   wrapper.tabIndex = -1;
   return wrapper;
 }
-function getX(parent, content) {
-  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
-    };
-  }
-  return {
-    left
-  };
-}
 function initialize(tooltip) {
-  const elements = [tooltip.parent, tooltip.element];
+  const { abortController, floatable } = tooltip;
+  const { anchor, content } = floatable;
+  anchor.insertAdjacentElement("afterend", content);
+  const elements = [anchor, content];
   for (const element of elements) {
     for (const event of activateEvents) {
       on(
         element,
         event,
         () => {
-          activate(tooltip);
+          activate(floatable, active, void 0, 250);
         },
         {
-          signal: tooltip.abortController.signal
+          signal: abortController.signal
         }
       );
     }
@@ -147,10 +123,10 @@ function initialize(tooltip) {
         element,
         event,
         () => {
-          deactivate(tooltip);
+          deactivate(floatable, active, void 0, 250);
         },
         {
-          signal: tooltip.abortController.signal
+          signal: abortController.signal
         }
       );
     }
@@ -160,43 +136,24 @@ function removeTooltip(element) {
   tooltips.get(element)?.destroy();
   tooltips.delete(element);
 }
-function stop(tooltip) {
-  if (tooltip.frame != null) {
-    cancelAnimationFrame(tooltip.frame);
-    tooltip.frame = void 0;
-  }
-  if (tooltip.activate != null) {
-    clearTimeout(tooltip.activate);
-    tooltip.activate = void 0;
-  }
-  if (tooltip.deactivate != null) {
-    clearTimeout(tooltip.deactivate);
-    tooltip.deactivate = void 0;
-  }
-}
-function update(tooltip) {
-  function run() {
-    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, attributes) {
+  if (attributes.ariaDescribedby == null) {
+    anchor.removeAttribute("aria-describedby");
+  } else {
+    anchor.setAttribute("aria-describedby", attributes.ariaDescribedby);
   }
-  tooltip.frame = requestAnimationFrame(run);
 }
 const active = /* @__PURE__ */ new Set();
 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 = /* @__PURE__ */ new WeakMap();
 let index = 0;
 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/package.json

@@ -22,7 +22,7 @@
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
 		"sass": "^1.89",
-		"stylelint": "^16.21",
+		"stylelint": "^16.22",
 		"tslib": "^2.8",
 		"typescript": "^5.8",
 		"vite": "^7",
@@ -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": {
@@ -85,7 +85,7 @@
 		"build:postcss": "npx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
 		"build:js": "npx vite build && npm run types",
 		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
-		"rollup": "npx rollup -c",
+		"rollup": "npx rollup -c --watch",
 		"test": "npx vitest --coverage",
 		"types": "npx tsc && npx dts-bundle-generator --config ./dts.config.cts --silent",
 		"watch:css": "npx sass ./postcss:./dist/css --no-source-map --watch",
@@ -94,5 +94,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.cts",
-	"version": "0.13.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

@@ -1,5 +1,12 @@
 @use 'mixins.scss' as mixins;
 
+:where([oui-tooltip]:is(abbr, b, cite, dfn, code, em, i, kbd, mark, q, samp, small, span, strong, sub, sup, time, var)) {
+	text-decoration: underline dotted;
+	text-decoration-skip-ink: auto;
+	text-underline-offset: 0.25em;
+	cursor: help;
+}
+
 :where([oui-tooltip-content]) {
 	@include mixins.shadowOverlay;
 
@@ -8,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

@@ -0,0 +1,196 @@
+export class Floatable {
+		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);
+
+	if (floatable.active) {
+		return;
+	}
+
+	if (time == null || time === 0) {
+		onActivate(floatable, active, order);
+	} else {
+		floatable.activate = +setTimeout(() => {
+			onActivate(floatable, active, order);
+		}, time);
+	}
+}
+
+export function deactivate(
+	floatable: Floatable,
+	active: Set<Floatable>,
+	order?: Floatable[],
+	time?: number,
+): void {
+	stop(floatable);
+
+	if (!floatable.active) {
+		return;
+	}
+
+	if (time == null || time === 0) {
+		onDeactivate(floatable, active, order);
+	} else {
+		floatable.deactivate = +setTimeout(() => {
+			onDeactivate(floatable, active, order);
+		}, time);
+	}
+}
+
+function getX(
+	anchor: DOMRect,
+	content: DOMRect,
+): {left?: number; right?: number} {
+	if (content.width + 2 * margin >= window.innerWidth) {
+		return {
+			left: margin,
+			right: margin,
+		};
+	}
+
+	const left = anchor.left + (anchor.width - content.width) / 2;
+	const right = window.innerWidth - margin;
+
+	if (left < margin) {
+		return {
+			left: margin,
+		};
+	}
+
+	if (left + content.width > right) {
+		return {
+			right: margin,
+		};
+	}
+
+	return {
+		left,
+	};
+}
+
+function getY(anchor: DOMRect, content: DOMRect): number {
+	let top = anchor.top - content.height - margin;
+
+	if (top - margin >= 0) {
+		return top;
+	}
+
+	top = anchor.bottom + margin;
+
+	if (top + content.height + margin <= window.innerHeight) {
+		return top;
+	}
+
+	return anchor.top + (anchor.height - content.height) / 2;
+}
+
+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;
+
+	update(floatable);
+}
+
+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);
+}
+
+function update(floatable: Floatable): void {
+	function run(): void {
+		const anchor = floatable.anchor.getBoundingClientRect();
+		const content = floatable.content.getBoundingClientRect();
+
+		const {left, right} = getX(anchor, content);
+		const top = getY(anchor, content);
+
+		floatable.content.style.inset = `${top}px ${right == null ? 'auto' : `${right}px`} auto ${left == null ? 'auto' : `${left}px`}`;
+
+		floatable.frame = requestAnimationFrame(run);
+	}
+
+	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);
+	}
+
+	if (floatable.activate != null) {
+		clearTimeout(floatable.activate);
+	}
+
+	if (floatable.deactivate != null) {
+		clearTimeout(floatable.deactivate);
+	}
+
+	floatable.activate = undefined;
+	floatable.deactivate = undefined;
+	floatable.frame = undefined;
+}
+
+//
+
+const margin =
+	Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;