@oscarpalmer/oui 0.16.0 → 0.18.0

package/dist/js/popover.js

@@ -1,160 +1,87 @@
+import { Floatable } from "./floatable.js";
+import { createFocusTrap } from "./focus-trap/embedded.js";
 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);
-}
+var index = 0;
+var OuiPopoverElement = class extends HTMLElement {
+	#floatable;
+	#focusTrap;
+	constructor() {
+		super();
+		const content = this.querySelector(SELECTOR_CONTENT);
+		const toggle = this.querySelector(SELECTOR_TOGGLE);
+		if (!(content instanceof HTMLElement)) throw new Error("A oui-popover must have a direct child element with the [oui-popover-content]-attribute");
+		if (!(toggle 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("aria-modal", "true");
+		if (isNullableOrWhitespace(content.id)) content.setAttribute("id", `${ATTRIBUTE_ID_PREFIX}_${++index}`);
+		toggle.setAttribute("aria-controls", content.id);
+		toggle.setAttribute("aria-haspopup", "dialog");
+		this.#floatable = new Floatable({
+			content,
+			anchor: toggle,
+			defaultPosition: "below-start",
+			interactive: true,
+			positionAttribute: "position",
+			preferAbove: false,
+			onAfter: (active) => {
+				if (active) focus(content);
+				else if (!this.#floatable.ignoreFocus) toggle.focus();
+			}
+		});
+		this.#focusTrap = createFocusTrap(content, { noescape: true });
+		POPOVERS.set(toggle, this.#floatable);
+		POPOVERS.set(content, this.#floatable);
+	}
+	close() {
+		this.hidePopover();
+	}
+	connectedCallback() {
+		this.#floatable.enable();
+		this.#focusTrap.connect();
+	}
+	disconnectedCallback() {
+		this.#floatable.disable();
+		this.#focusTrap.disconnect();
+	}
+	hidePopover() {
+		if (this.#floatable.active && this.isConnected) this.#floatable.toggle(false);
+	}
+	open() {
+		this.showPopover();
+	}
+	showPopover() {
+		if (!this.#floatable.active && this.isConnected) this.#floatable.toggle(true);
+	}
+	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 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();
-  }
+	let target = getFocusable(content)[0];
+	if (!(target instanceof HTMLElement)) target = content;
+	requestAnimationFrame(() => {
+		target.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
-};
+var ATTRIBUTE_ID_PREFIX = "oui_popover_content_";
+var POPOVERS = /* @__PURE__ */ new Map();
+var SELECTOR = "oui-popover";
+var SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
+var SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
+customElements.define(SELECTOR, OuiPopoverElement);
+export { OuiPopoverElement };