@oscarpalmer/oui 0.13.0 → 0.15.0

package/dist/js/popover.cjs

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const is = require("@oscarpalmer/atoms/is");
+const event = require("@oscarpalmer/toretto/event");
+const find = require("@oscarpalmer/toretto/find");
+const focusable = require("@oscarpalmer/toretto/focusable");
+const floatable = require("./floatable.cjs");
+const focusTrap_embedded = require("./focus-trap/embedded.cjs");
+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 (is.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.Floatable(toggle2, content);
+    this.#focusTrap = focusTrap_embedded.createFocusTrap(content);
+    mapped.set(toggle2, this.#floatable);
+    mapped.set(content, this.#floatable);
+  }
+  close() {
+    this.hidePopover();
+  }
+  hidePopover() {
+    if (this.#floatable.active) {
+      closeAbove(this.#floatable.content);
+      floatable.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$1 of active) {
+    floatable.deactivate(floatable$1, active, order);
+  }
+}
+function closeAbove(element) {
+  const index2 = order.findIndex(
+    (floatable2) => floatable2.anchor === element || floatable2.content === element
+  );
+  if (index2 === -1 || index2 === order.length - 1) {
+    return;
+  }
+  while (index2 < order.length - 1) {
+    const floatable$1 = order.pop();
+    if (floatable$1 != null) {
+      floatable.deactivate(floatable$1, active, order);
+    }
+  }
+  order[index2].content.focus();
+}
+function focus(content) {
+  let target = focusable.getFocusable(content)[0];
+  if (!(target instanceof HTMLElement)) {
+    target = content;
+  }
+  requestAnimationFrame(() => {
+    target.focus();
+  });
+}
+function onClick(event2) {
+  const related = find.findAncestor(
+    event2.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(event2) {
+  if (event2.key !== "Escape" || order.length === 0) {
+    return;
+  }
+  const related = find.findAncestor(event2.target, "[oui-popover-content]");
+  if (!(related instanceof HTMLElement)) {
+    return;
+  }
+  closeAbove(related);
+  const floatable$1 = mapped.get(related);
+  if (floatable$1 != null) {
+    floatable.deactivate(floatable$1, active, order);
+    floatable$1.anchor.focus();
+  }
+}
+function toggle(anchor) {
+  const content = find.findAncestor(anchor, "[oui-popover-content]");
+  if (content instanceof HTMLElement) {
+    closeAbove(content);
+  } else {
+    closeAll();
+  }
+  const floatable$1 = mapped.get(anchor);
+  if (floatable$1 == null) {
+    return;
+  }
+  if (floatable$1.active) {
+    floatable.deactivate(floatable$1, active, order);
+  } else {
+    floatable.activate(floatable$1, active, order);
+    focus(floatable$1.content);
+  }
+}
+customElements.define("oui-popover", OuiPopoverElement);
+event.on(document, "click", onClick);
+event.on(document, "keydown", onKeydown);
+const active = /* @__PURE__ */ new Set();
+const order = [];
+exports.OuiPopoverElement = OuiPopoverElement;

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

@@ -2,144 +2,120 @@
 const is = require("@oscarpalmer/atoms/is");
 const event = require("@oscarpalmer/toretto/event");
 const attributable = require("./attributable.cjs");
+const floatable = require("./floatable.cjs");
 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.Floatable(anchor, content.element);
+    initialize(this);
+  }
   destroy() {
-    deactivate(this);
+    floatable.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) => is.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 (is.isNullableOrWhitespace(content)) {
-    content = parent.getAttribute("aria-label");
-    if (is.isNullableOrWhitespace(content)) {
-      return;
-    }
+    content = anchor.getAttribute("aria-description");
+  }
+  if (is.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 (is.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: floatable$1 } = tooltip;
+  const { anchor, content } = floatable$1;
+  anchor.insertAdjacentElement("afterend", content);
+  const elements = [anchor, content];
   for (const element of elements) {
     for (const event$1 of activateEvents) {
       event.on(
         element,
         event$1,
         () => {
-          activate(tooltip);
+          floatable.activate(floatable$1, active, void 0, 250);
         },
         {
-          signal: tooltip.abortController.signal
+          signal: abortController.signal
         }
       );
     }
@@ -148,10 +124,10 @@ function initialize(tooltip) {
         element,
         event$1,
         () => {
-          deactivate(tooltip);
+          floatable.deactivate(floatable$1, active, void 0, 250);
         },
         {
-          signal: tooltip.abortController.signal
+          signal: abortController.signal
         }
       );
     }
@@ -161,43 +137,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.attributable(selector, addTooltip, removeTooltip);
 event.on(document, "keydown", (event2) => {
   if (event2.key === "Escape") {
-    for (const tooltip of active) {
-      deactivate(tooltip, 0);
+    for (const floatable$1 of active) {
+      floatable.deactivate(floatable$1, active);
     }
   }
 });