@oscarpalmer/oui 0.16.0 → 0.18.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,160 +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);
-    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,211 +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");
-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;

package/dist/js/tooltip.cjs

@@ -1,160 +0,0 @@
-"use strict";
-const is = require("@oscarpalmer/atoms/is");
-const event = require("@oscarpalmer/toretto/event");
-const attributable = require("./attributable.cjs");
-const floatable = require("./floatable.cjs");
-class Tooltip {
-  abortController = new AbortController();
-  attributes;
-  floatable;
-  constructor(anchor, content) {
-    this.attributes = content.attributes;
-    this.floatable = new floatable.Floatable(anchor, content.element);
-    initialize(this);
-  }
-  destroy() {
-    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.attributes = void 0;
-    this.floatable = void 0;
-  }
-}
-function addTooltip(anchor) {
-  if (tooltips.has(anchor)) {
-    return;
-  }
-  const content = getContent(anchor);
-  if (content != null) {
-    tooltips.set(anchor, new Tooltip(anchor, content));
-  }
-}
-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
-    };
-  }
-  const describedElements = getElements(attributes.ariaDescribedby);
-  if (describedElements.length > 0) {
-    anchor.setAttribute("aria-describedby", wrapper.id);
-    for (const element of describedElements) {
-      wrapper.append(element);
-    }
-    return {
-      attributes,
-      element: wrapper
-    };
-  }
-  let content = anchor.getAttribute("aria-label");
-  if (is.isNullableOrWhitespace(content)) {
-    content = anchor.getAttribute("aria-description");
-  }
-  if (is.isNullableOrWhitespace(content)) {
-    return;
-  }
-  const paragraph = document.createElement("p");
-  paragraph.textContent = content;
-  wrapper.append(paragraph);
-  return {
-    attributes,
-    element: wrapper
-  };
-}
-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 elements;
-}
-function getWrapper(anchor) {
-  const wrapper = document.createElement("div");
-  wrapper.setAttribute(`${selector}-content`, "");
-  wrapper.className = anchor.getAttribute(`${selector}-class`) ?? "";
-  wrapper.hidden = true;
-  wrapper.id = `${selector}-${++index}`;
-  wrapper.role = "tooltip";
-  wrapper.tabIndex = -1;
-  return wrapper;
-}
-function initialize(tooltip) {
-  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,
-        () => {
-          floatable.activate(floatable$1, active, void 0, 250);
-        },
-        {
-          signal: abortController.signal
-        }
-      );
-    }
-    for (const event$1 of deactivateEvents) {
-      event.on(
-        element,
-        event$1,
-        () => {
-          floatable.deactivate(floatable$1, active, void 0, 250);
-        },
-        {
-          signal: abortController.signal
-        }
-      );
-    }
-  }
-}
-function removeTooltip(element) {
-  tooltips.get(element)?.destroy();
-  tooltips.delete(element);
-}
-function reset(anchor, attributes) {
-  if (attributes.ariaDescribedby == null) {
-    anchor.removeAttribute("aria-describedby");
-  } else {
-    anchor.setAttribute("aria-describedby", attributes.ariaDescribedby);
-  }
-}
-const active = /* @__PURE__ */ new Set();
-const activateEvents = ["focus", "mouseenter", "touchstart"];
-const deactivateEvents = ["blur", "mouseleave"];
-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 floatable$1 of active) {
-      floatable.deactivate(floatable$1, active);
-    }
-  }
-});

package/types/attributable.d.cts

@@ -1,5 +0,0 @@
-// Generated by dts-bundle-generator v9.5.1
-
-export declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
-
-export {};