@y14e/disclosure-css 2.2.1 → 2.2.2

package/dist/index.bundle.cjs

@@ -344,6 +344,7 @@ 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 };
@@ -402,7 +403,6 @@ function getNextCell(cells, key, wrap) {
   }
   return result;
 }
-var DIRECTIONS = ["both", "grid", "horizontal", "vertical"];
 function resolveOptions3(options) {
   let {
     direction = "both",
@@ -416,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";
   }
@@ -516,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) {
@@ -524,6 +524,7 @@ var RovingTabIndex = class _RovingTabIndex {
     }
     const isBoth = direction === "both";
     const isHorizontal = direction === "horizontal";
+    const { typeahead, wrap = false } = this.#settings;
     if (![
       "End",
       "Home",
@@ -662,6 +663,14 @@ var RovingTabIndex = class _RovingTabIndex {
   #getCellsOfActiveRow() {
     return getCellsOfActiveRow(this.#getFocusables());
   }
+  #getDirection() {
+    const { direction } = this.#settings;
+    if (typeof direction === "string") {
+      return direction;
+    }
+    const d = direction();
+    return DIRECTIONS.includes(d) ? d : "both";
+  }
   #getFocusables() {
     return getFocusables(this.#container, {
       composed: true,
@@ -749,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();
   }
@@ -820,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

@@ -342,6 +342,7 @@ 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 };
@@ -400,7 +401,6 @@ function getNextCell(cells, key, wrap) {
   }
   return result;
 }
-var DIRECTIONS = ["both", "grid", "horizontal", "vertical"];
 function resolveOptions3(options) {
   let {
     direction = "both",
@@ -414,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";
   }
@@ -514,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) {
@@ -522,6 +522,7 @@ var RovingTabIndex = class _RovingTabIndex {
     }
     const isBoth = direction === "both";
     const isHorizontal = direction === "horizontal";
+    const { typeahead, wrap = false } = this.#settings;
     if (![
       "End",
       "Home",
@@ -660,6 +661,14 @@ var RovingTabIndex = class _RovingTabIndex {
   #getCellsOfActiveRow() {
     return getCellsOfActiveRow(this.#getFocusables());
   }
+  #getDirection() {
+    const { direction } = this.#settings;
+    if (typeof direction === "string") {
+      return direction;
+    }
+    const d = direction();
+    return DIRECTIONS.includes(d) ? d : "both";
+  }
   #getFocusables() {
     return getFocusables(this.#container, {
       composed: true,
@@ -747,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();
   }
@@ -818,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

@@ -79,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();
   }
@@ -150,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

@@ -77,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();
   }
@@ -148,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.1",
+  "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.1"
+    "@y14e/attribute-utils": "^2.0.18",
+    "@y14e/roving-tabindex": "^3.5.1"
   }
 }