@oscarpalmer/oui 0.14.0 → 0.16.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);
+    }
+  }
+  focus(order[index2].content);
+}
+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);
+    }
+  }
+  focus(order[index2].content);
+}
+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/splitter.cjs

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const number = require("@oscarpalmer/atoms/number");
+const event = require("@oscarpalmer/toretto/event");
+const find = require("@oscarpalmer/toretto/find");
+class OuiSplitterElement extends HTMLElement {
+  #splitter;
+  constructor() {
+    super();
+    const panels = [...this.children].filter(
+      (child) => child instanceof HTMLElement
+    );
+    if (panels.length !== 2) {
+      throw new Error("oui-splitter must have exactly two panels.");
+    }
+    this.#splitter = new Splitter(this, panels);
+  }
+  connectedCallback() {
+    if (this.#splitter.types.auto) {
+      observer.observe(this);
+    }
+  }
+  disconnectedCallback() {
+    if (this.#splitter.types.auto) {
+      observer.unobserve(this);
+    }
+  }
+}
+class Splitter {
+  constructor(element, panels) {
+    this.element = element;
+    this.panels = panels;
+    this.handle = createHandle();
+    this.rectangle = element.getBoundingClientRect();
+    this.separator = createSeparator();
+    this.separator.append(this.handle);
+    panels[0].insertAdjacentElement("afterend", this.separator);
+    mapped.set(element, this);
+    mapped.set(this.handle, this);
+    setSize(this, this.flex.value);
+    this.types = getTypes(this);
+    if (this.types.horizontal) {
+      this.element.setAttribute("oui-splitter-horizontal", "");
+    }
+  }
+  flex = {
+    previous: 0.5,
+    value: 0.5
+  };
+  handle;
+  rectangle;
+  separator;
+  types;
+}
+function createHandle() {
+  const handle = document.createElement("span");
+  handle.tabIndex = 0;
+  handle.setAttribute("aria-label", "Resize panels");
+  handle.setAttribute("oui-splitter-handle", "");
+  return handle;
+}
+function createSeparator() {
+  const separator = document.createElement("div");
+  separator.setAttribute("oui-splitter-separator", "");
+  return separator;
+}
+function getFlex(splitter2, value) {
+  const { height, left, top, width } = splitter2.rectangle;
+  const offset = value - (splitter2.types.horizontal ? top : left);
+  const fraction = offset / (splitter2.types.horizontal ? height : width);
+  return number.clamp(fraction, 0.1, 0.9);
+}
+function getTypes(splitter2, width, height) {
+  const type = splitter2.element.getAttribute("type")?.trim() ?? "";
+  if (type === "horizontal") {
+    return {
+      auto: false,
+      horizontal: true
+    };
+  }
+  if (type === "auto") {
+    return {
+      auto: true,
+      horizontal: (height ?? splitter2.rectangle.height) > (width ?? splitter2.rectangle.width)
+    };
+  }
+  return {
+    auto: false,
+    horizontal: false
+  };
+}
+function onEnd(reset) {
+  if (splitter != null) {
+    splitter.handle.removeAttribute("oui-splitter-active");
+    splitter.separator.removeAttribute("oui-splitter-active");
+    if (reset) {
+      setSize(splitter, splitter.flex.previous);
+    } else {
+      splitter.flex.previous = splitter.flex.value;
+    }
+  }
+  splitter = void 0;
+}
+function onKeydown(event2) {
+  switch (true) {
+    case allKeys.has(event2.key):
+      onNavigate(event2);
+      break;
+    case event2.key === "Escape":
+      onEnd(true);
+      break;
+  }
+}
+function onMousedown(event2) {
+  splitter = mapped.get(
+    find.findAncestor(
+      event2.target,
+      "[oui-splitter-handle]"
+    )
+  );
+  if (splitter == null) {
+    return;
+  }
+  splitter.handle.setAttribute("oui-splitter-active", "");
+  splitter.separator.setAttribute("oui-splitter-active", "");
+  splitter.rectangle = splitter.element.getBoundingClientRect();
+}
+function onMousemove(event$1) {
+  if (splitter == null) {
+    return;
+  }
+  const position = event.getPosition(event$1);
+  if (position != null) {
+    splitter.flex.value = getFlex(
+      splitter,
+      splitter.types.horizontal ? position.y : position.x
+    );
+    setSize(splitter, splitter.flex.value);
+  }
+}
+function onMouseup() {
+  if (splitter != null) {
+    onEnd(false);
+  }
+}
+function onNavigate(event2) {
+  const splitter2 = mapped.get(
+    find.findAncestor(
+      event2.target,
+      "[oui-splitter-handle]"
+    )
+  );
+  if (splitter2 == null) {
+    return;
+  }
+  if (absoluteKeys.has(event2.key)) {
+    setSize(splitter2, event2.key === "End" ? 0.9 : 0.1, true);
+    return;
+  }
+  if (splitter2.types.horizontal && !horizontalKeys.has(event2.key) || !splitter2.types.horizontal && !verticalKeys.has(event2.key)) {
+    return;
+  }
+  const modifier = negativeKeys.has(event2.key) ? -1 : 1;
+  setSize(splitter2, splitter2.flex.value + modifier * 0.05, true);
+}
+function onObservation(entries) {
+  if (frame != null) {
+    cancelAnimationFrame(frame);
+  }
+  frame = requestAnimationFrame(() => {
+    for (const entry of entries) {
+      const splitter2 = mapped.get(entry.target);
+      if (splitter2 == null) {
+        return;
+      }
+      splitter2.types = getTypes(
+        splitter2,
+        entry.contentRect.width,
+        entry.contentRect.height
+      );
+      if (splitter2.types.horizontal) {
+        splitter2.element.setAttribute("oui-splitter-horizontal", "");
+      } else {
+        splitter2.element.removeAttribute("oui-splitter-horizontal");
+      }
+    }
+    frame = void 0;
+  });
+}
+function setSize(splitter2, size, previous) {
+  splitter2.flex.value = size;
+  if (previous) {
+    splitter2.flex.previous = size;
+  }
+  splitter2.element.style.setProperty("--oui-splitter-size", `${size}`);
+}
+const absoluteKeys = /* @__PURE__ */ new Set(["End", "Home"]);
+const horizontalKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
+const mapped = /* @__PURE__ */ new WeakMap();
+const observer = new ResizeObserver(onObservation);
+const negativeKeys = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+const verticalKeys = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight"]);
+const allKeys = /* @__PURE__ */ new Set([...absoluteKeys, ...horizontalKeys, ...verticalKeys]);
+let frame;
+let splitter;
+customElements.define("oui-splitter", OuiSplitterElement);
+event.on(document, "keydown", onKeydown);
+event.on(document, "mousedown", onMousedown);
+event.on(document, "mousemove", onMousemove);
+event.on(document, "mouseup", onMouseup);
+exports.OuiSplitterElement = OuiSplitterElement;