@y14e/disclosure-css 2.2.0 → 2.2.2

package/dist/index.bundle.cjs

@@ -345,6 +345,64 @@ function isFocusable(element, options = {}) {
 
 // node_modules/@y14e/roving-tabindex/dist/index.js
 var DIRECTIONS = ["both", "grid", "horizontal", "vertical"];
+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;
+}
 function resolveOptions3(options) {
   let {
     direction = "both",
@@ -358,7 +416,7 @@ function resolveOptions3(options) {
   if (typeof direction === "string") {
     direction = direction.toLowerCase();
   }
-  if (!DIRECTIONS.includes(direction)) {
+  if (typeof direction === "string" && !DIRECTIONS.includes(direction) || typeof direction === "function" && !DIRECTIONS.includes(direction())) {
     console.warn("Invalid direction option. Fallback: 'both'.");
     direction = "both";
   }
@@ -458,7 +516,7 @@ var RovingTabIndex = class _RovingTabIndex {
     (!(target instanceof Element) || !this.#focusables.has(target)) && this.#update();
   };
   #onKeyDown = (event) => {
-    const { direction, typeahead, wrap = false } = this.#settings;
+    const direction = this.#getDirection();
     const isGrid = direction === "grid";
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
     if (!(isGrid && ["End", "Home"].includes(key)) && ctrlKey || altKey || metaKey || shiftKey) {
@@ -466,6 +524,7 @@ var RovingTabIndex = class _RovingTabIndex {
     }
     const isBoth = direction === "both";
     const isHorizontal = direction === "horizontal";
+    const { typeahead, wrap = false } = this.#settings;
     if (![
       "End",
       "Home",
@@ -601,20 +660,16 @@ 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 [];
+    return getCellsOfActiveRow(this.#getFocusables());
+  }
+  #getDirection() {
+    const { direction } = this.#settings;
+    if (typeof direction === "string") {
+      return direction;
     }
-    const activeRect = active.getBoundingClientRect();
-    return this.#getFocusables().filter((cell) => {
-      const cellRect = cell.getBoundingClientRect();
-      return cellRect.top < activeRect.bottom && cellRect.bottom > activeRect.top;
-    });
+    const d = direction();
+    return DIRECTIONS.includes(d) ? d : "both";
   }
   #getFocusables() {
     return getFocusables(this.#container, {
@@ -625,48 +680,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);
   }
 };
 
@@ -688,7 +702,6 @@ function resolveOptions4(defaults2, source) {
 var Disclosure = class _Disclosure {
   static defaults = {};
   #rootElement;
-  #defaults = defaults;
   #settings;
   #detailsElements;
   #summaryElements;
@@ -706,8 +719,10 @@ var Disclosure = class _Disclosure {
       return;
     }
     this.#rootElement = root;
-    this.#defaults = resolveOptions4(this.#defaults, _Disclosure.defaults);
-    this.#settings = resolveOptions4(this.#defaults, options);
+    this.#settings = resolveOptions4(
+      resolveOptions4(defaults, _Disclosure.defaults),
+      options
+    );
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -743,9 +758,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();
   }
@@ -814,12 +829,8 @@ var Disclosure = class _Disclosure {
     if (!(summary instanceof HTMLElement)) {
       return;
     }
-    const binding = this.#bindings.get(summary);
-    if (!binding) {
-      return;
-    }
-    const { details } = binding;
-    this.#toggle(details, !details.open);
+    const details = this.#bindings.get(summary)?.details;
+    details && this.#toggle(details, !details.open);
   };
   #toggle(details, isExpand) {
     if (details.open === isExpand) {

package/dist/index.bundle.js

@@ -343,6 +343,64 @@ function isFocusable(element, options = {}) {
 
 // node_modules/@y14e/roving-tabindex/dist/index.js
 var DIRECTIONS = ["both", "grid", "horizontal", "vertical"];
+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;
+}
 function resolveOptions3(options) {
   let {
     direction = "both",
@@ -356,7 +414,7 @@ function resolveOptions3(options) {
   if (typeof direction === "string") {
     direction = direction.toLowerCase();
   }
-  if (!DIRECTIONS.includes(direction)) {
+  if (typeof direction === "string" && !DIRECTIONS.includes(direction) || typeof direction === "function" && !DIRECTIONS.includes(direction())) {
     console.warn("Invalid direction option. Fallback: 'both'.");
     direction = "both";
   }
@@ -456,7 +514,7 @@ var RovingTabIndex = class _RovingTabIndex {
     (!(target instanceof Element) || !this.#focusables.has(target)) && this.#update();
   };
   #onKeyDown = (event) => {
-    const { direction, typeahead, wrap = false } = this.#settings;
+    const direction = this.#getDirection();
     const isGrid = direction === "grid";
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
     if (!(isGrid && ["End", "Home"].includes(key)) && ctrlKey || altKey || metaKey || shiftKey) {
@@ -464,6 +522,7 @@ var RovingTabIndex = class _RovingTabIndex {
     }
     const isBoth = direction === "both";
     const isHorizontal = direction === "horizontal";
+    const { typeahead, wrap = false } = this.#settings;
     if (![
       "End",
       "Home",
@@ -599,20 +658,16 @@ 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 [];
+    return getCellsOfActiveRow(this.#getFocusables());
+  }
+  #getDirection() {
+    const { direction } = this.#settings;
+    if (typeof direction === "string") {
+      return direction;
     }
-    const activeRect = active.getBoundingClientRect();
-    return this.#getFocusables().filter((cell) => {
-      const cellRect = cell.getBoundingClientRect();
-      return cellRect.top < activeRect.bottom && cellRect.bottom > activeRect.top;
-    });
+    const d = direction();
+    return DIRECTIONS.includes(d) ? d : "both";
   }
   #getFocusables() {
     return getFocusables(this.#container, {
@@ -623,48 +678,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);
   }
 };
 
@@ -686,7 +700,6 @@ function resolveOptions4(defaults2, source) {
 var Disclosure = class _Disclosure {
   static defaults = {};
   #rootElement;
-  #defaults = defaults;
   #settings;
   #detailsElements;
   #summaryElements;
@@ -704,8 +717,10 @@ var Disclosure = class _Disclosure {
       return;
     }
     this.#rootElement = root;
-    this.#defaults = resolveOptions4(this.#defaults, _Disclosure.defaults);
-    this.#settings = resolveOptions4(this.#defaults, options);
+    this.#settings = resolveOptions4(
+      resolveOptions4(defaults, _Disclosure.defaults),
+      options
+    );
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -741,9 +756,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();
   }
@@ -812,12 +827,8 @@ var Disclosure = class _Disclosure {
     if (!(summary instanceof HTMLElement)) {
       return;
     }
-    const binding = this.#bindings.get(summary);
-    if (!binding) {
-      return;
-    }
-    const { details } = binding;
-    this.#toggle(details, !details.open);
+    const details = this.#bindings.get(summary)?.details;
+    details && this.#toggle(details, !details.open);
   };
   #toggle(details, isExpand) {
     if (details.open === isExpand) {

package/dist/index.cjs

@@ -23,7 +23,6 @@ function resolveOptions(defaults2, source) {
 var Disclosure = class _Disclosure {
   static defaults = {};
   #rootElement;
-  #defaults = defaults;
   #settings;
   #detailsElements;
   #summaryElements;
@@ -41,8 +40,10 @@ var Disclosure = class _Disclosure {
       return;
     }
     this.#rootElement = root;
-    this.#defaults = resolveOptions(this.#defaults, _Disclosure.defaults);
-    this.#settings = resolveOptions(this.#defaults, options);
+    this.#settings = resolveOptions(
+      resolveOptions(defaults, _Disclosure.defaults),
+      options
+    );
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -78,9 +79,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();
   }
@@ -149,12 +150,8 @@ var Disclosure = class _Disclosure {
     if (!(summary instanceof HTMLElement)) {
       return;
     }
-    const binding = this.#bindings.get(summary);
-    if (!binding) {
-      return;
-    }
-    const { details } = binding;
-    this.#toggle(details, !details.open);
+    const details = this.#bindings.get(summary)?.details;
+    details && this.#toggle(details, !details.open);
   };
   #toggle(details, isExpand) {
     if (details.open === isExpand) {

package/dist/index.js

@@ -21,7 +21,6 @@ function resolveOptions(defaults2, source) {
 var Disclosure = class _Disclosure {
   static defaults = {};
   #rootElement;
-  #defaults = defaults;
   #settings;
   #detailsElements;
   #summaryElements;
@@ -39,8 +38,10 @@ var Disclosure = class _Disclosure {
       return;
     }
     this.#rootElement = root;
-    this.#defaults = resolveOptions(this.#defaults, _Disclosure.defaults);
-    this.#settings = resolveOptions(this.#defaults, options);
+    this.#settings = resolveOptions(
+      resolveOptions(defaults, _Disclosure.defaults),
+      options
+    );
     const NOT_NESTED = ":not(:scope summary + * *)";
     this.#detailsElements = [
       ...this.#rootElement.querySelectorAll(
@@ -76,9 +77,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();
   }
@@ -147,12 +148,8 @@ var Disclosure = class _Disclosure {
     if (!(summary instanceof HTMLElement)) {
       return;
     }
-    const binding = this.#bindings.get(summary);
-    if (!binding) {
-      return;
-    }
-    const { details } = binding;
-    this.#toggle(details, !details.open);
+    const details = this.#bindings.get(summary)?.details;
+    details && this.#toggle(details, !details.open);
   };
   #toggle(details, isExpand) {
     if (details.open === isExpand) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/disclosure-css",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "WAI-ARIA compliant disclosure pattern implementation in TypeScript",
   "keywords": [
     "a11y",
@@ -54,7 +54,7 @@
     "esbuild": true
   },
   "dependencies": {
-    "@y14e/attribute-utils": "^2.0.16",
-    "@y14e/roving-tabindex": "^3.4.0"
+    "@y14e/attribute-utils": "^2.0.18",
+    "@y14e/roving-tabindex": "^3.5.1"
   }
 }