@y14e/accordion 1.4.13 → 1.4.15

package/README.md

@@ -10,14 +10,14 @@ npm i @y14e/accordion
 
 ```ts
 // npm
-import Accordion from '@y14e/accordion@1.4.13';
+import Accordion from '@y14e/accordion@1.4.15';
 
 // CDNs
-import Accordion from 'https://esm.sh/@y14e/accordion@1.4.13';
+import Accordion from 'https://esm.sh/@y14e/accordion@1.4.15';
 // or
-import Accordion from 'https://cdn.jsdelivr.net/npm/@y14e/accordion@1.4.13/+esm';
+import Accordion from 'https://cdn.jsdelivr.net/npm/@y14e/accordion@1.4.15/+esm';
 // or
-import Accordion from 'https://esm.unpkg.com/@y14e/accordion@1.4.13';
+import Accordion from 'https://esm.unpkg.com/@y14e/accordion@1.4.15';
 ```
 
 ## Usage

package/dist/index.bundle.cjs

@@ -0,0 +1,292 @@
+'use strict';
+
+var attributesUtils = require('@y14e/attributes-utils');
+var Button = require('@y14e/button');
+var rovingTabindex = require('@y14e/roving-tabindex');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Button__default = /*#__PURE__*/_interopDefault(Button);
+
+// src/index.ts
+var Accordion = class _Accordion {
+  static defaults = {};
+  #rootElement;
+  #defaults = {
+    animation: { duration: 300, easing: "ease" },
+    selector: {
+      content: ":has(> [data-accordion-trigger]) + *",
+      trigger: "[data-accordion-trigger]"
+    }
+  };
+  #settings;
+  #triggerElements;
+  #contentElements;
+  #bindings = /* @__PURE__ */ new WeakMap();
+  #eventController = null;
+  #animationController = null;
+  #cleanupRovingTabIndex = null;
+  #buttons = [];
+  #isDestroyed = false;
+  constructor(root, options = {}) {
+    if (!(root instanceof HTMLElement)) {
+      throw new TypeError("Invalid root element");
+    }
+    if (root.hasAttribute("data-accordion-initialized")) {
+      console.warn("Already initialized");
+      return;
+    }
+    this.#rootElement = root;
+    this.#defaults = this.#mergeOptions(this.#defaults, _Accordion.defaults);
+    this.#settings = this.#mergeOptions(this.#defaults, options);
+    matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
+    const { trigger, content } = this.#settings.selector;
+    const NOT_NESTED = `:not(:scope ${content} *)`;
+    this.#triggerElements = [
+      ...this.#rootElement.querySelectorAll(
+        `${trigger}${NOT_NESTED}`
+      )
+    ];
+    if (!this.#triggerElements.length) {
+      console.warn("Missing trigger elements");
+      return;
+    }
+    this.#contentElements = [
+      ...this.#rootElement.querySelectorAll(
+        `${content}${NOT_NESTED}`
+      )
+    ];
+    if (!this.#contentElements.length) {
+      console.warn("Missing content elements");
+      return;
+    }
+    this.#triggerElements.forEach((trigger2, i) => {
+      const content2 = this.#contentElements[i];
+      if (!content2) {
+        return;
+      }
+      const binding = createBinding(trigger2, content2);
+      this.#bindings.set(trigger2, binding);
+      this.#bindings.set(content2, binding);
+    });
+    this.#initialize();
+  }
+  close(trigger) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    if (!(trigger instanceof HTMLElement) || !this.#bindings.has(trigger)) {
+      console.warn("Invalid trigger element");
+      return;
+    }
+    this.#toggle(trigger, false);
+  }
+  async destroy(force = false) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#eventController?.abort();
+    this.#eventController = null;
+    this.#cleanupRovingTabIndex?.();
+    this.#cleanupRovingTabIndex = null;
+    this.#buttons.forEach((button) => {
+      button.destroy();
+    });
+    this.#buttons.length = 0;
+    !force && await this.#waitAnimationsFinish();
+    this.#contentElements.forEach((content) => {
+      force && this.#bindings.get(content)?.animation?.finish();
+      this.#onAnimationFinish(content);
+    });
+    this.#animationController?.abort();
+    this.#animationController = null;
+    attributesUtils.restoreAttributes([...this.#triggerElements, ...this.#contentElements]);
+    this.#triggerElements.length = 0;
+    this.#contentElements.length = 0;
+    this.#rootElement.removeAttribute("data-accordion-initialized");
+  }
+  open(trigger) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    if (!(trigger instanceof HTMLElement) || !this.#bindings.has(trigger)) {
+      console.warn("Invalid trigger element");
+      return;
+    }
+    this.#toggle(trigger, true);
+  }
+  #initialize() {
+    attributesUtils.saveAttributes(this.#triggerElements, [
+      "aria-controls",
+      "aria-disabled",
+      "id",
+      "style",
+      "tabindex"
+    ]);
+    attributesUtils.saveAttributes(this.#contentElements, ["aria-labelledby", "id", "role"]);
+    this.#eventController = new AbortController();
+    const { signal } = this.#eventController;
+    this.#triggerElements.forEach((trigger2, i) => {
+      const id = Math.random().toString(36).slice(-8);
+      const content2 = this.#contentElements[i];
+      if (!content2) {
+        return;
+      }
+      content2.id ||= `accordion-content-${id}`;
+      attributesUtils.addTokenToAttribute(trigger2, "aria-controls", content2.id);
+      trigger2.setAttribute(
+        "aria-expanded",
+        String(trigger2.ariaExpanded === "true")
+      );
+      trigger2.id ||= `accordion-trigger-${id}`;
+      if (!isFocusable(trigger2)) {
+        trigger2.setAttribute("aria-disabled", "true");
+        trigger2.setAttribute("tabindex", "-1");
+        trigger2.style.setProperty("pointer-events", "none");
+      }
+      trigger2.addEventListener("click", this.#onTriggerClick, { signal });
+      attributesUtils.addTokenToAttribute(content2, "aria-labelledby", trigger2.id);
+      content2.setAttribute("role", "region");
+      content2.addEventListener("beforematch", this.#onContentBeforeMatch, {
+        signal
+      });
+      this.#buttons.push(new Button__default.default(trigger2));
+    });
+    const { trigger, content } = this.#settings.selector;
+    this.#cleanupRovingTabIndex = rovingTabindex.createRovingTabIndex(this.#rootElement, {
+      direction: "vertical",
+      navigationOnly: true,
+      selector: `${trigger}:not(:scope ${content} *)`,
+      wrap: true
+    });
+    this.#rootElement.setAttribute("data-accordion-initialized", "");
+  }
+  #onTriggerClick = (event) => {
+    event.preventDefault();
+    const trigger = event.currentTarget;
+    if (!(trigger instanceof HTMLElement)) {
+      return;
+    }
+    this.#toggle(trigger, trigger.ariaExpanded === "false");
+  };
+  #onContentBeforeMatch = (event) => {
+    const content = event.currentTarget;
+    if (!(content instanceof HTMLElement)) {
+      return;
+    }
+    const binding = this.#bindings.get(content);
+    if (!binding) {
+      return;
+    }
+    binding.trigger.ariaExpanded === "false" && this.#toggle(binding.trigger, true, true);
+  };
+  #toggle(trigger, isOpen, isMatch = false) {
+    if (trigger.ariaExpanded === String(isOpen)) {
+      return;
+    }
+    const name = trigger.getAttribute("data-accordion-name");
+    if (name && isOpen) {
+      const opened = this.#triggerElements.find(
+        (t) => t !== trigger && t.getAttribute("data-accordion-name") === name && t.ariaExpanded === "true"
+      );
+      opened && this.#toggle(opened, false, isMatch);
+    }
+    trigger.setAttribute(
+      "aria-label",
+      trigger.getAttribute(
+        `data-accordion-${isOpen ? "expanded" : "collapsed"}-label`
+      ) ?? trigger.ariaLabel ?? ""
+    );
+    const binding = this.#bindings.get(trigger);
+    if (!binding) {
+      return;
+    }
+    const { content } = binding;
+    const startSize = content.hidden ? 0 : content.offsetHeight;
+    if (content.hidden) {
+      content.hidden = false;
+    }
+    const endSize = isOpen ? content.scrollHeight : 0;
+    binding.animation?.cancel();
+    content.style.setProperty("overflow", "clip");
+    const { duration, easing } = this.#settings.animation;
+    const animation = content.animate(
+      { blockSize: [`${startSize}px`, `${endSize}px`] },
+      { duration: isMatch ? 0 : duration, easing }
+    );
+    binding.animation = animation;
+    trigger.setAttribute("aria-expanded", String(isOpen));
+    function cleanup() {
+      if (binding?.animation === animation) {
+        binding.animation = null;
+      }
+    }
+    this.#animationController = new AbortController();
+    const { signal } = this.#animationController;
+    animation.addEventListener("cancel", cleanup, { once: true, signal });
+    animation.addEventListener(
+      "finish",
+      () => {
+        if (binding?.animation === animation) {
+          this.#onAnimationFinish(content);
+          cleanup();
+        }
+      },
+      { once: true, signal }
+    );
+  }
+  #mergeOptions(target, source) {
+    return {
+      animation: { ...target.animation, ...source.animation ?? {} },
+      selector: { ...target.selector, ...source.selector ?? {} }
+    };
+  }
+  #onAnimationFinish(content) {
+    const trigger = this.#bindings.get(content)?.trigger;
+    if (!trigger) {
+      return;
+    }
+    if (trigger.ariaExpanded === "false") {
+      content.setAttribute("hidden", "until-found");
+    }
+    ["block-size", "overflow"].forEach((name) => {
+      content.style.removeProperty(name);
+    });
+  }
+  async #waitAnimationsFinish() {
+    const promises = [];
+    this.#contentElements.forEach((content) => {
+      const animation = this.#bindings.get(content)?.animation;
+      animation && promises.push(waitAnimationFinish(animation));
+    });
+    await Promise.allSettled(promises);
+  }
+};
+function createBinding(trigger, content) {
+  return { trigger, content, animation: null };
+}
+function isFocusable(element) {
+  return !element.hasAttribute("disabled") && element.tabIndex >= 0;
+}
+function waitAnimationFinish(animation) {
+  if (["idle", "finished"].includes(animation.playState)) {
+    return Promise.resolve();
+  } else {
+    return new Promise(
+      (resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
+    );
+  }
+}
+/**
+ * Accordion
+ * WAI-ARIA compliant accordion pattern implementation in TypeScript.
+ *
+ * @version 1.4.15
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/accordion}
+ */
+
+module.exports = Accordion;

package/dist/index.bundle.js

@@ -0,0 +1,286 @@
+import { restoreAttributes, saveAttributes, addTokenToAttribute } from '@y14e/attributes-utils';
+import Button from '@y14e/button';
+import { createRovingTabIndex } from '@y14e/roving-tabindex';
+
+// src/index.ts
+var Accordion = class _Accordion {
+  static defaults = {};
+  #rootElement;
+  #defaults = {
+    animation: { duration: 300, easing: "ease" },
+    selector: {
+      content: ":has(> [data-accordion-trigger]) + *",
+      trigger: "[data-accordion-trigger]"
+    }
+  };
+  #settings;
+  #triggerElements;
+  #contentElements;
+  #bindings = /* @__PURE__ */ new WeakMap();
+  #eventController = null;
+  #animationController = null;
+  #cleanupRovingTabIndex = null;
+  #buttons = [];
+  #isDestroyed = false;
+  constructor(root, options = {}) {
+    if (!(root instanceof HTMLElement)) {
+      throw new TypeError("Invalid root element");
+    }
+    if (root.hasAttribute("data-accordion-initialized")) {
+      console.warn("Already initialized");
+      return;
+    }
+    this.#rootElement = root;
+    this.#defaults = this.#mergeOptions(this.#defaults, _Accordion.defaults);
+    this.#settings = this.#mergeOptions(this.#defaults, options);
+    matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
+    const { trigger, content } = this.#settings.selector;
+    const NOT_NESTED = `:not(:scope ${content} *)`;
+    this.#triggerElements = [
+      ...this.#rootElement.querySelectorAll(
+        `${trigger}${NOT_NESTED}`
+      )
+    ];
+    if (!this.#triggerElements.length) {
+      console.warn("Missing trigger elements");
+      return;
+    }
+    this.#contentElements = [
+      ...this.#rootElement.querySelectorAll(
+        `${content}${NOT_NESTED}`
+      )
+    ];
+    if (!this.#contentElements.length) {
+      console.warn("Missing content elements");
+      return;
+    }
+    this.#triggerElements.forEach((trigger2, i) => {
+      const content2 = this.#contentElements[i];
+      if (!content2) {
+        return;
+      }
+      const binding = createBinding(trigger2, content2);
+      this.#bindings.set(trigger2, binding);
+      this.#bindings.set(content2, binding);
+    });
+    this.#initialize();
+  }
+  close(trigger) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    if (!(trigger instanceof HTMLElement) || !this.#bindings.has(trigger)) {
+      console.warn("Invalid trigger element");
+      return;
+    }
+    this.#toggle(trigger, false);
+  }
+  async destroy(force = false) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#eventController?.abort();
+    this.#eventController = null;
+    this.#cleanupRovingTabIndex?.();
+    this.#cleanupRovingTabIndex = null;
+    this.#buttons.forEach((button) => {
+      button.destroy();
+    });
+    this.#buttons.length = 0;
+    !force && await this.#waitAnimationsFinish();
+    this.#contentElements.forEach((content) => {
+      force && this.#bindings.get(content)?.animation?.finish();
+      this.#onAnimationFinish(content);
+    });
+    this.#animationController?.abort();
+    this.#animationController = null;
+    restoreAttributes([...this.#triggerElements, ...this.#contentElements]);
+    this.#triggerElements.length = 0;
+    this.#contentElements.length = 0;
+    this.#rootElement.removeAttribute("data-accordion-initialized");
+  }
+  open(trigger) {
+    if (this.#isDestroyed) {
+      return;
+    }
+    if (!(trigger instanceof HTMLElement) || !this.#bindings.has(trigger)) {
+      console.warn("Invalid trigger element");
+      return;
+    }
+    this.#toggle(trigger, true);
+  }
+  #initialize() {
+    saveAttributes(this.#triggerElements, [
+      "aria-controls",
+      "aria-disabled",
+      "id",
+      "style",
+      "tabindex"
+    ]);
+    saveAttributes(this.#contentElements, ["aria-labelledby", "id", "role"]);
+    this.#eventController = new AbortController();
+    const { signal } = this.#eventController;
+    this.#triggerElements.forEach((trigger2, i) => {
+      const id = Math.random().toString(36).slice(-8);
+      const content2 = this.#contentElements[i];
+      if (!content2) {
+        return;
+      }
+      content2.id ||= `accordion-content-${id}`;
+      addTokenToAttribute(trigger2, "aria-controls", content2.id);
+      trigger2.setAttribute(
+        "aria-expanded",
+        String(trigger2.ariaExpanded === "true")
+      );
+      trigger2.id ||= `accordion-trigger-${id}`;
+      if (!isFocusable(trigger2)) {
+        trigger2.setAttribute("aria-disabled", "true");
+        trigger2.setAttribute("tabindex", "-1");
+        trigger2.style.setProperty("pointer-events", "none");
+      }
+      trigger2.addEventListener("click", this.#onTriggerClick, { signal });
+      addTokenToAttribute(content2, "aria-labelledby", trigger2.id);
+      content2.setAttribute("role", "region");
+      content2.addEventListener("beforematch", this.#onContentBeforeMatch, {
+        signal
+      });
+      this.#buttons.push(new Button(trigger2));
+    });
+    const { trigger, content } = this.#settings.selector;
+    this.#cleanupRovingTabIndex = createRovingTabIndex(this.#rootElement, {
+      direction: "vertical",
+      navigationOnly: true,
+      selector: `${trigger}:not(:scope ${content} *)`,
+      wrap: true
+    });
+    this.#rootElement.setAttribute("data-accordion-initialized", "");
+  }
+  #onTriggerClick = (event) => {
+    event.preventDefault();
+    const trigger = event.currentTarget;
+    if (!(trigger instanceof HTMLElement)) {
+      return;
+    }
+    this.#toggle(trigger, trigger.ariaExpanded === "false");
+  };
+  #onContentBeforeMatch = (event) => {
+    const content = event.currentTarget;
+    if (!(content instanceof HTMLElement)) {
+      return;
+    }
+    const binding = this.#bindings.get(content);
+    if (!binding) {
+      return;
+    }
+    binding.trigger.ariaExpanded === "false" && this.#toggle(binding.trigger, true, true);
+  };
+  #toggle(trigger, isOpen, isMatch = false) {
+    if (trigger.ariaExpanded === String(isOpen)) {
+      return;
+    }
+    const name = trigger.getAttribute("data-accordion-name");
+    if (name && isOpen) {
+      const opened = this.#triggerElements.find(
+        (t) => t !== trigger && t.getAttribute("data-accordion-name") === name && t.ariaExpanded === "true"
+      );
+      opened && this.#toggle(opened, false, isMatch);
+    }
+    trigger.setAttribute(
+      "aria-label",
+      trigger.getAttribute(
+        `data-accordion-${isOpen ? "expanded" : "collapsed"}-label`
+      ) ?? trigger.ariaLabel ?? ""
+    );
+    const binding = this.#bindings.get(trigger);
+    if (!binding) {
+      return;
+    }
+    const { content } = binding;
+    const startSize = content.hidden ? 0 : content.offsetHeight;
+    if (content.hidden) {
+      content.hidden = false;
+    }
+    const endSize = isOpen ? content.scrollHeight : 0;
+    binding.animation?.cancel();
+    content.style.setProperty("overflow", "clip");
+    const { duration, easing } = this.#settings.animation;
+    const animation = content.animate(
+      { blockSize: [`${startSize}px`, `${endSize}px`] },
+      { duration: isMatch ? 0 : duration, easing }
+    );
+    binding.animation = animation;
+    trigger.setAttribute("aria-expanded", String(isOpen));
+    function cleanup() {
+      if (binding?.animation === animation) {
+        binding.animation = null;
+      }
+    }
+    this.#animationController = new AbortController();
+    const { signal } = this.#animationController;
+    animation.addEventListener("cancel", cleanup, { once: true, signal });
+    animation.addEventListener(
+      "finish",
+      () => {
+        if (binding?.animation === animation) {
+          this.#onAnimationFinish(content);
+          cleanup();
+        }
+      },
+      { once: true, signal }
+    );
+  }
+  #mergeOptions(target, source) {
+    return {
+      animation: { ...target.animation, ...source.animation ?? {} },
+      selector: { ...target.selector, ...source.selector ?? {} }
+    };
+  }
+  #onAnimationFinish(content) {
+    const trigger = this.#bindings.get(content)?.trigger;
+    if (!trigger) {
+      return;
+    }
+    if (trigger.ariaExpanded === "false") {
+      content.setAttribute("hidden", "until-found");
+    }
+    ["block-size", "overflow"].forEach((name) => {
+      content.style.removeProperty(name);
+    });
+  }
+  async #waitAnimationsFinish() {
+    const promises = [];
+    this.#contentElements.forEach((content) => {
+      const animation = this.#bindings.get(content)?.animation;
+      animation && promises.push(waitAnimationFinish(animation));
+    });
+    await Promise.allSettled(promises);
+  }
+};
+function createBinding(trigger, content) {
+  return { trigger, content, animation: null };
+}
+function isFocusable(element) {
+  return !element.hasAttribute("disabled") && element.tabIndex >= 0;
+}
+function waitAnimationFinish(animation) {
+  if (["idle", "finished"].includes(animation.playState)) {
+    return Promise.resolve();
+  } else {
+    return new Promise(
+      (resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
+    );
+  }
+}
+/**
+ * Accordion
+ * WAI-ARIA compliant accordion pattern implementation in TypeScript.
+ *
+ * @version 1.4.15
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/accordion}
+ */
+
+export { Accordion as default };