@oscarpalmer/oui 0.17.0 → 0.19.0

package/dist/js/focus-trap/embedded.cjs

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

package/dist/js/focus-trap/standalone.cjs

@@ -1,8 +0,0 @@
-"use strict";
-const attributable = require("../attributable.cjs");
-const focusTrap_embedded = require("./embedded.cjs");
-function removeFocusTraps(element) {
-  focusTrap_embedded.focusTraps.get(element)?.destroy();
-  focusTrap_embedded.focusTraps.delete(element);
-}
-attributable.attributable(focusTrap_embedded.selector, focusTrap_embedded.createFocusTrap, removeFocusTraps);

package/dist/js/index.cjs

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("./focus-trap/standalone.cjs");
-const popover = require("./popover.cjs");
-require("./tooltip.cjs");
-exports.OuiPopoverElement = popover.OuiPopoverElement;

package/dist/js/popover.cjs

@@ -1,166 +0,0 @@
-"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,
-      "position",
-      "below-start",
-      false
-    );
-    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/splitter.cjs

@@ -1,272 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const is = require("@oscarpalmer/atoms/is");
-const math = require("@oscarpalmer/atoms/math");
-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);
-    }
-  }
-}
-let index = 0;
-class Splitter {
-  constructor(element, panels) {
-    this.element = element;
-    this.panels = panels;
-    if (is.isNullableOrWhitespace(element.id)) {
-      element.id = `oui_splitter_${++index}`;
-    }
-    this.values = getValues(element);
-    this.handle = createHandle();
-    this.rectangle = element.getBoundingClientRect();
-    this.separator = createSeparator(this);
-    this.separator.append(this.handle);
-    panels[0].insertAdjacentElement("afterend", this.separator);
-    mapped.set(element, this);
-    mapped.set(this.handle, this);
-    setSize(this, this.values.now.current);
-    this.types = getTypes(this);
-    if (this.types.horizontal) {
-      this.element.setAttribute("oui-splitter-horizontal", "");
-    }
-    setAriaOrientation(this);
-    setAriaValue(this);
-  }
-  handle;
-  rectangle;
-  separator;
-  types;
-  values;
-}
-function createHandle() {
-  const handle = document.createElement("span");
-  handle.setAttribute("aria-hidden", "true");
-  handle.setAttribute("oui-splitter-handle", "");
-  return handle;
-}
-function createSeparator(splitter2) {
-  const separator = document.createElement("div");
-  separator.role = "separator";
-  separator.tabIndex = 0;
-  separator.setAttribute("aria-controls", splitter2.element.id);
-  separator.setAttribute("aria-label", "Resize panels");
-  separator.setAttribute("oui-splitter-separator", "");
-  return separator;
-}
-function getContained(min, value, max) {
-  return math.round(number.clamp(value, min, max), 6);
-}
-function getSize(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 getContained(splitter2.values.min, fraction, splitter2.values.max);
-}
-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 getValue(element, name, defaultValue) {
-  const value = element.getAttribute(name);
-  if (is.isNullableOrWhitespace(value)) {
-    return defaultValue;
-  }
-  const parsed = Number.parseFloat(value);
-  if (Number.isNaN(parsed)) {
-    return defaultValue;
-  }
-  return parsed < 0 ? defaultValue : parsed > 1 ? parsed / 100 : parsed;
-}
-function getValues(element) {
-  const values = {
-    max: getValue(element, "max", 0.9),
-    min: getValue(element, "min", 0.1),
-    now: {
-      current: 0.5,
-      previous: 0.5
-    }
-  };
-  const value = getContained(
-    values.min,
-    getValue(element, "size", values.now.current),
-    values.max
-  );
-  values.now.current = value;
-  values.now.previous = value;
-  return values;
-}
-function onEnd(reset) {
-  if (splitter != null) {
-    splitter.handle.removeAttribute("oui-splitter-active");
-    splitter.separator.removeAttribute("oui-splitter-active");
-    if (reset) {
-      setSize(splitter, splitter.values.now.previous);
-    } else {
-      splitter.values.now.previous = splitter.values.now.current;
-    }
-  }
-  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.values.now.current = getSize(
-      splitter,
-      splitter.types.horizontal ? position.y : position.x
-    );
-    setSize(splitter, splitter.values.now.current);
-  }
-}
-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" ? splitter2.values.max : splitter2.values.min,
-      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.values.now.current + 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");
-      }
-      setAriaOrientation(splitter2);
-    }
-    frame = void 0;
-  });
-}
-function setAriaOrientation(splitter2) {
-  splitter2.separator.setAttribute(
-    "aria-orientation",
-    splitter2.types.horizontal ? "horizontal" : "vertical"
-  );
-}
-function setAriaValue(splitter2) {
-  splitter2.separator.setAttribute("aria-valuemax", String(splitter2.values.max));
-  splitter2.separator.setAttribute("aria-valuemin", String(splitter2.values.min));
-  splitter2.separator.setAttribute(
-    "aria-valuenow",
-    String(splitter2.values.now.current)
-  );
-}
-function setSize(splitter2, size, previous) {
-  splitter2.values.now.current = size;
-  if (previous) {
-    splitter2.values.now.previous = size;
-  }
-  splitter2.element.style.setProperty("--oui-splitter-size", `${size}`);
-  setAriaValue(splitter2);
-}
-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;