@y14e/disclosure 2.2.0 → 2.2.3

package/dist/index.bundle.cjs

@@ -344,6 +344,64 @@ function isFocusable(element, options = {}) {
 }
 
 // node_modules/@y14e/roving-tabindex/dist/index.js
+function getCellCoords(cell) {
+  const { left, top, width, height } = cell.getBoundingClientRect();
+  return { x: left + width / 2, y: top + height / 2 };
+}
+function getCellsOfActiveRow(cells) {
+  const active = getActiveElement();
+  if (!(active instanceof Element)) {
+    return [];
+  }
+  const activeRect = active.getBoundingClientRect();
+  return cells.filter((cell) => {
+    const cellRect = cell.getBoundingClientRect();
+    return cellRect.top < activeRect.bottom && cellRect.bottom > activeRect.top;
+  });
+}
+function getNextCell(cells, key, wrap) {
+  const active = getActiveElement();
+  if (!(active instanceof Element)) {
+    return null;
+  }
+  const activeCoords = getCellCoords(active);
+  let min = Infinity;
+  let result = null;
+  for (const cell of cells) {
+    if (cell === active) {
+      continue;
+    }
+    const cellCoords = getCellCoords(cell);
+    const distances = {
+      x: Math.abs(cellCoords.x - activeCoords.x),
+      y: Math.abs(cellCoords.y - activeCoords.y)
+    };
+    if (key === "ArrowUp" && cellCoords.y < activeCoords.y && distances.x < distances.y || key === "ArrowDown" && cellCoords.y > activeCoords.y && distances.x < distances.y) {
+      const distance = distances.x ** 2 + distances.y ** 2;
+      if (distance < min) {
+        min = distance;
+        result = cell;
+      }
+    }
+  }
+  if (!result && wrap) {
+    let max = -Infinity;
+    for (const cell of cells) {
+      if (cell === active) {
+        continue;
+      }
+      const cellCoords = getCellCoords(cell);
+      if (Math.abs(cellCoords.x - activeCoords.x) < cell.getBoundingClientRect().width / 2) {
+        const distance = key === "ArrowUp" ? cellCoords.y - activeCoords.y : activeCoords.y - cellCoords.y;
+        if (distance > max) {
+          max = distance;
+          result = cell;
+        }
+      }
+    }
+  }
+  return result;
+}
 var DIRECTIONS = ["both", "grid", "horizontal", "vertical"];
 function resolveOptions3(options) {
   let {
@@ -601,20 +659,8 @@ var RovingTabIndex = class _RovingTabIndex {
     const { selector } = this.#settings;
     return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
   }
-  #getCellCoords(cell) {
-    const { left, top, width, height } = cell.getBoundingClientRect();
-    return { x: left + width / 2, y: top + height / 2 };
-  }
   #getCellsOfActiveRow() {
-    const active = getActiveElement();
-    if (!(active instanceof Element)) {
-      return [];
-    }
-    const activeRect = active.getBoundingClientRect();
-    return this.#getFocusables().filter((cell) => {
-      const cellRect = cell.getBoundingClientRect();
-      return cellRect.top < activeRect.bottom && cellRect.bottom > activeRect.top;
-    });
+    return getCellsOfActiveRow(this.#getFocusables());
   }
   #getFocusables() {
     return getFocusables(this.#container, {
@@ -625,48 +671,7 @@ var RovingTabIndex = class _RovingTabIndex {
     });
   }
   #getNextCell(key, wrap) {
-    const cells = this.#getFocusables();
-    const active = getActiveElement();
-    if (!(active instanceof Element)) {
-      return null;
-    }
-    const activeCoords = this.#getCellCoords(active);
-    let min = Infinity;
-    let result = null;
-    for (const cell of cells) {
-      if (cell === active) {
-        continue;
-      }
-      const cellCoords = this.#getCellCoords(cell);
-      const distances = {
-        x: Math.abs(cellCoords.x - activeCoords.x),
-        y: Math.abs(cellCoords.y - activeCoords.y)
-      };
-      if (key === "ArrowUp" && cellCoords.y < activeCoords.y && distances.x < distances.y || key === "ArrowDown" && cellCoords.y > activeCoords.y && distances.x < distances.y) {
-        const distance = distances.x ** 2 + distances.y ** 2;
-        if (distance < min) {
-          min = distance;
-          result = cell;
-        }
-      }
-    }
-    if (!result && wrap) {
-      let max = -Infinity;
-      for (const cell of cells) {
-        if (cell === active) {
-          continue;
-        }
-        const cellCoords = this.#getCellCoords(cell);
-        if (Math.abs(cellCoords.x - activeCoords.x) < cell.getBoundingClientRect().width / 2) {
-          const distance = key === "ArrowUp" ? cellCoords.y - activeCoords.y : activeCoords.y - cellCoords.y;
-          if (distance > max) {
-            max = distance;
-            result = cell;
-          }
-        }
-      }
-    }
-    return result;
+    return getNextCell(this.#getFocusables(), key, wrap);
   }
 };
 
@@ -715,7 +720,6 @@ function resolveOptions4(defaults2, source) {
 var Disclosure = class _Disclosure {
   static defaults = {};
   #rootElement;
-  #defaults = defaults;
   #settings;
   #detailsElements;
   #summaryElements;
@@ -735,9 +739,13 @@ var Disclosure = class _Disclosure {
       return;
     }
     this.#rootElement = root;
-    this.#defaults = resolveOptions4(this.#defaults, _Disclosure.defaults);
-    this.#settings = resolveOptions4(this.#defaults, options);
-    matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
+    this.#settings = resolveOptions4(
+      resolveOptions4(defaults, _Disclosure.defaults),
+      options
+    );
+    if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      this.#settings.animation.duration = 0;
+    }
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -773,9 +781,9 @@ var Disclosure = class _Disclosure {
         return;
       }
       const binding = this.#createBinding(details, summary, content);
-      this.#bindings.set(details, binding);
-      this.#bindings.set(summary, binding);
-      this.#bindings.set(content, binding);
+      [details, summary, content].forEach((element) => {
+        this.#bindings.set(element, binding);
+      });
     });
     this.#initialize();
   }

package/dist/index.bundle.js

@@ -342,6 +342,64 @@ function isFocusable(element, options = {}) {
 }
 
 // node_modules/@y14e/roving-tabindex/dist/index.js
+function getCellCoords(cell) {
+  const { left, top, width, height } = cell.getBoundingClientRect();
+  return { x: left + width / 2, y: top + height / 2 };
+}
+function getCellsOfActiveRow(cells) {
+  const active = getActiveElement();
+  if (!(active instanceof Element)) {
+    return [];
+  }
+  const activeRect = active.getBoundingClientRect();
+  return cells.filter((cell) => {
+    const cellRect = cell.getBoundingClientRect();
+    return cellRect.top < activeRect.bottom && cellRect.bottom > activeRect.top;
+  });
+}
+function getNextCell(cells, key, wrap) {
+  const active = getActiveElement();
+  if (!(active instanceof Element)) {
+    return null;
+  }
+  const activeCoords = getCellCoords(active);
+  let min = Infinity;
+  let result = null;
+  for (const cell of cells) {
+    if (cell === active) {
+      continue;
+    }
+    const cellCoords = getCellCoords(cell);
+    const distances = {
+      x: Math.abs(cellCoords.x - activeCoords.x),
+      y: Math.abs(cellCoords.y - activeCoords.y)
+    };
+    if (key === "ArrowUp" && cellCoords.y < activeCoords.y && distances.x < distances.y || key === "ArrowDown" && cellCoords.y > activeCoords.y && distances.x < distances.y) {
+      const distance = distances.x ** 2 + distances.y ** 2;
+      if (distance < min) {
+        min = distance;
+        result = cell;
+      }
+    }
+  }
+  if (!result && wrap) {
+    let max = -Infinity;
+    for (const cell of cells) {
+      if (cell === active) {
+        continue;
+      }
+      const cellCoords = getCellCoords(cell);
+      if (Math.abs(cellCoords.x - activeCoords.x) < cell.getBoundingClientRect().width / 2) {
+        const distance = key === "ArrowUp" ? cellCoords.y - activeCoords.y : activeCoords.y - cellCoords.y;
+        if (distance > max) {
+          max = distance;
+          result = cell;
+        }
+      }
+    }
+  }
+  return result;
+}
 var DIRECTIONS = ["both", "grid", "horizontal", "vertical"];
 function resolveOptions3(options) {
   let {
@@ -599,20 +657,8 @@ var RovingTabIndex = class _RovingTabIndex {
     const { selector } = this.#settings;
     return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
   }
-  #getCellCoords(cell) {
-    const { left, top, width, height } = cell.getBoundingClientRect();
-    return { x: left + width / 2, y: top + height / 2 };
-  }
   #getCellsOfActiveRow() {
-    const active = getActiveElement();
-    if (!(active instanceof Element)) {
-      return [];
-    }
-    const activeRect = active.getBoundingClientRect();
-    return this.#getFocusables().filter((cell) => {
-      const cellRect = cell.getBoundingClientRect();
-      return cellRect.top < activeRect.bottom && cellRect.bottom > activeRect.top;
-    });
+    return getCellsOfActiveRow(this.#getFocusables());
   }
   #getFocusables() {
     return getFocusables(this.#container, {
@@ -623,48 +669,7 @@ var RovingTabIndex = class _RovingTabIndex {
     });
   }
   #getNextCell(key, wrap) {
-    const cells = this.#getFocusables();
-    const active = getActiveElement();
-    if (!(active instanceof Element)) {
-      return null;
-    }
-    const activeCoords = this.#getCellCoords(active);
-    let min = Infinity;
-    let result = null;
-    for (const cell of cells) {
-      if (cell === active) {
-        continue;
-      }
-      const cellCoords = this.#getCellCoords(cell);
-      const distances = {
-        x: Math.abs(cellCoords.x - activeCoords.x),
-        y: Math.abs(cellCoords.y - activeCoords.y)
-      };
-      if (key === "ArrowUp" && cellCoords.y < activeCoords.y && distances.x < distances.y || key === "ArrowDown" && cellCoords.y > activeCoords.y && distances.x < distances.y) {
-        const distance = distances.x ** 2 + distances.y ** 2;
-        if (distance < min) {
-          min = distance;
-          result = cell;
-        }
-      }
-    }
-    if (!result && wrap) {
-      let max = -Infinity;
-      for (const cell of cells) {
-        if (cell === active) {
-          continue;
-        }
-        const cellCoords = this.#getCellCoords(cell);
-        if (Math.abs(cellCoords.x - activeCoords.x) < cell.getBoundingClientRect().width / 2) {
-          const distance = key === "ArrowUp" ? cellCoords.y - activeCoords.y : activeCoords.y - cellCoords.y;
-          if (distance > max) {
-            max = distance;
-            result = cell;
-          }
-        }
-      }
-    }
-    return result;
+    return getNextCell(this.#getFocusables(), key, wrap);
   }
 };
 
@@ -713,7 +718,6 @@ function resolveOptions4(defaults2, source) {
 var Disclosure = class _Disclosure {
   static defaults = {};
   #rootElement;
-  #defaults = defaults;
   #settings;
   #detailsElements;
   #summaryElements;
@@ -733,9 +737,13 @@ var Disclosure = class _Disclosure {
       return;
     }
     this.#rootElement = root;
-    this.#defaults = resolveOptions4(this.#defaults, _Disclosure.defaults);
-    this.#settings = resolveOptions4(this.#defaults, options);
-    matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
+    this.#settings = resolveOptions4(
+      resolveOptions4(defaults, _Disclosure.defaults),
+      options
+    );
+    if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      this.#settings.animation.duration = 0;
+    }
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -771,9 +779,9 @@ var Disclosure = class _Disclosure {
         return;
       }
       const binding = this.#createBinding(details, summary, content);
-      this.#bindings.set(details, binding);
-      this.#bindings.set(summary, binding);
-      this.#bindings.set(content, binding);
+      [details, summary, content].forEach((element) => {
+        this.#bindings.set(element, binding);
+      });
     });
     this.#initialize();
   }

package/dist/index.cjs

@@ -50,7 +50,6 @@ function resolveOptions(defaults2, source) {
 var Disclosure = class _Disclosure {
   static defaults = {};
   #rootElement;
-  #defaults = defaults;
   #settings;
   #detailsElements;
   #summaryElements;
@@ -70,9 +69,13 @@ var Disclosure = class _Disclosure {
       return;
     }
     this.#rootElement = root;
-    this.#defaults = resolveOptions(this.#defaults, _Disclosure.defaults);
-    this.#settings = resolveOptions(this.#defaults, options);
-    matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
+    this.#settings = resolveOptions(
+      resolveOptions(defaults, _Disclosure.defaults),
+      options
+    );
+    if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      this.#settings.animation.duration = 0;
+    }
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -108,9 +111,9 @@ var Disclosure = class _Disclosure {
         return;
       }
       const binding = this.#createBinding(details, summary, content);
-      this.#bindings.set(details, binding);
-      this.#bindings.set(summary, binding);
-      this.#bindings.set(content, binding);
+      [details, summary, content].forEach((element) => {
+        this.#bindings.set(element, binding);
+      });
     });
     this.#initialize();
   }

package/dist/index.js

@@ -48,7 +48,6 @@ function resolveOptions(defaults2, source) {
 var Disclosure = class _Disclosure {
   static defaults = {};
   #rootElement;
-  #defaults = defaults;
   #settings;
   #detailsElements;
   #summaryElements;
@@ -68,9 +67,13 @@ var Disclosure = class _Disclosure {
       return;
     }
     this.#rootElement = root;
-    this.#defaults = resolveOptions(this.#defaults, _Disclosure.defaults);
-    this.#settings = resolveOptions(this.#defaults, options);
-    matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
+    this.#settings = resolveOptions(
+      resolveOptions(defaults, _Disclosure.defaults),
+      options
+    );
+    if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      this.#settings.animation.duration = 0;
+    }
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -106,9 +109,9 @@ var Disclosure = class _Disclosure {
         return;
       }
       const binding = this.#createBinding(details, summary, content);
-      this.#bindings.set(details, binding);
-      this.#bindings.set(summary, binding);
-      this.#bindings.set(content, binding);
+      [details, summary, content].forEach((element) => {
+        this.#bindings.set(element, binding);
+      });
     });
     this.#initialize();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/disclosure",
-  "version": "2.2.0",
+  "version": "2.2.3",
   "description": "WAI-ARIA compliant disclosure pattern implementation in TypeScript",
   "keywords": [
     "a11y",
@@ -55,6 +55,6 @@
   },
   "dependencies": {
     "@y14e/attribute-utils": "^2.0.16",
-    "@y14e/roving-tabindex": "^3.4.0"
+    "@y14e/roving-tabindex": "^3.4.1"
   }
 }