@graupl/core 1.0.0-beta.20 → 1.0.0-beta.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/core",
-  "version": "1.0.0-beta.20",
+  "version": "1.0.0-beta.22",
   "description": "The core module of Graupl, providing essential styles and utilities.",
   "main": "dist/js/graupl.cjs.js",
   "module": "dist/js/graupl.es.js",

package/src/js/disclosure/Disclosure.js

@@ -120,6 +120,15 @@ class Disclosure {
    */
   _open = new TransactionalValue(false);
 
+  /**
+   * A value to force the disclosure open when the breakpoint width is passed.
+   *
+   * @protected
+   *
+   * @type {boolean}
+   */
+  _shouldOpen = false;
+
   /**
    * Whether or not to close the disclosure when it loses focus in the DOM.
    *
@@ -190,6 +199,15 @@ class Disclosure {
    */
   _prefix = "graupl-";
 
+  /**
+   * The key used to generate IDs throughout the disclosure.
+   *
+   * @protected
+   *
+   * @type {string}
+   */
+  _key = "";
+
   /**
    * An array of error messages generated by the disclosure.
    *
@@ -213,7 +231,8 @@ class Disclosure {
    * @param {boolean}            [options.openDuration = -1]                               - The duration of the transition from "closed" to "open" states (in milliseconds).
    * @param {boolean}            [options.closeDuration = -1]                              - The duration of the transition from "open" to "closed" states (in milliseconds).
    * @param {boolean}            [options.closeOnBlur = false]                             - Whether to close the disclosure when it loses focus in the dom.
-   * @param {boolean}            [options.minWidth = -1]                               - The width of the screen (in pixels) that the disclosure will automatically open/close itself.
+   * @param {boolean}            [options.minWidth = -1]                                   - The width of the screen (in pixels) that the disclosure will automatically open/close itself.
+   * @param {boolean}            [options.autoOpen = false]                                - Whether to automatically open when above the minWidth.
    * @param {?string}            [options.prefix = graupl-]                                - The prefix to use for CSS custom properties.
    * @param {?(string|string[])} [options.initializeClass = initializing]                  - The class to apply when a disclosure is initialzing.
    * @param {boolean}            [options.initialize = false]                              - Whether to initialize the disclosure upon construction.
@@ -230,6 +249,7 @@ class Disclosure {
     closeDuration = -1,
     closeOnBlur = false,
     minWidth = -1,
+    autoOpen = false,
     prefix = "graupl-",
     initializeClass = "initializing",
     initialize = false,
@@ -255,8 +275,9 @@ class Disclosure {
     // Set close on blur.
     this._closeOnBlur = closeOnBlur;
 
-    // Set collapse width.
+    // Set collapse width and auto open functionality.
     this._breakpointWidth = minWidth;
+    this._shouldOpen = autoOpen;
 
     // Set the prefix.
     this._prefix = prefix;
@@ -301,10 +322,13 @@ class Disclosure {
       storage.initializeStorage("disclosures");
       storage.pushToStorage("disclosures", this.dom.disclosure.id, this);
 
-      if (this.dom.controller.getAttribute("aria-expanded") === "true") {
-        this._expand(false, false);
+      if (
+        this.dom.controller.getAttribute("aria-expanded") === "true" ||
+        (this.shouldOpen && window.matchMedia(this.openQuery).matches)
+      ) {
+        this._expand({ emit: false, transition: false });
       } else {
-        this._collapse(false, false);
+        this._collapse({ emit: false, transition: false });
       }
 
       requestAnimationFrame(() => {
@@ -613,6 +637,59 @@ class Disclosure {
     return this._open.committed;
   }
 
+  /**
+   * A value to force opening reguardless of user interaction.
+   *
+   * @type {boolean}
+   *
+   * @see _shouldOpen
+   */
+  get shouldOpen() {
+    return this._shouldOpen;
+  }
+
+  set shouldOpen(value) {
+    isValidType("boolean", { value });
+
+    if (this._shouldOpen !== value) {
+      this._shouldOpen = value;
+    }
+  }
+
+  /**
+   * A media query for when the disclosure should open.
+   *
+   * Will return an empty string if no min width is set.
+   *
+   * @readonly
+   *
+   * @type {string}
+   */
+  get openQuery() {
+    if (this.minWidth === -1) {
+      return "";
+    }
+
+    return `(width > ${this.minWidth}px)`;
+  }
+
+  /**
+   * A media query for when the disclosure should close.
+   *
+   * Will return an empty string if no min width is set.
+   *
+   * @readonly
+   *
+   * @type {string}
+   */
+  get closeQuery() {
+    if (this.minWidth === -1) {
+      return "";
+    }
+
+    return `(width <= ${this.minWidth}px)`;
+  }
+
   /**
    * A flag to check if the disclosure's focus methods should _actually_ move the focus in the DOM.
    *
@@ -633,6 +710,17 @@ class Disclosure {
     return check;
   }
 
+  /**
+   * The key used to generate IDs throughout the disclosure.
+   *
+   * @type {string}
+   *
+   * @see _key
+   */
+  get key() {
+    return this._key;
+  }
+
   /**
    * An array of error messages generated by the disclosure.
    *
@@ -668,12 +756,17 @@ class Disclosure {
     }
 
     // Query selector checks.
-    const querySelectorChecks = isQuerySelector({
-      disclosureContentSelector: this._selectors.content,
-    });
+    const querySelectors = {};
 
-    if (!querySelectorChecks.status) {
-      this._errors.push(querySelectorChecks.error.message);
+    for (const querySelector of Object.keys(this._selectors)) {
+      querySelectors[`${querySelector}Selector`] =
+        this._selectors[querySelector];
+    }
+
+    const querySelectorChecks = isQuerySelector(querySelectors);
+
+    if (!querySelectorChecks) {
+      this._errors.push(querySelectorChecks.message);
       check = false;
     }
 
@@ -721,13 +814,14 @@ class Disclosure {
   }
 
   /**
-   * Generates a key for the disclosure.
+   * Generates a key for the tabs.
    *
-   * @param {boolean} [regenerate = false] - A flag to determine if the key should be regenerated.
+   * @param {Object<boolean>} [options = {}]               - Options for generating the key.
+   * @param {boolean}         [options.regenerate = false] - A flag to determine if the key should be regenerated.
    */
-  _generateKey(regenerate = false) {
+  _generateKey({ regenerate = false } = {}) {
     if (this.key === "" || regenerate) {
-      this.key = Math.random()
+      this._key = Math.random()
         .toString(36)
         .replace(/[^a-z]+/g, "")
         .substring(0, 10);
@@ -916,38 +1010,28 @@ class Disclosure {
    *
    * @fires grauplDisclosureExpand
    *
-   * @param {boolean} [emit = true]       - Emit the expand event once expanded.
-   * @param {boolean} [transition = true] - Respect the transition class.
+   * @param {Object<boolean>} [options = {}]              - Options for expanding the disclosure.
+   * @param {boolean}         [options.emit = true]       - Emit the expand event once expanded.
+   * @param {boolean}         [options.transition = true] - Respect the transition class.
    */
-  _expand(emit = true, transition = true) {
+  _expand({ emit = true, transition = true } = {}) {
     this.dom.controller.setAttribute("aria-expanded", "true");
 
     // If we're dealing with transition classes, then we need to utilize
     // requestAnimationFrame to add the transition class, remove the close class,
     // add the open class, and finally remove the transition class.
     if (transition && this.transitionlass !== "") {
-      // this.dom.disclosure.style.height = `${this.dom.disclosure.getBoundingClientRect().height}px`;
-      // console.log(this.dom.disclosure.style.height);
       addClass(this.transitionClass, this.dom.disclosure);
 
       requestAnimationFrame(() => {
         removeClass(this.closeClass, this.dom.disclosure);
 
-        // this.dom.disclosure.style.height = `${this.dom.disclosure.getBoundingClientRect().height}px`;
-        // console.log(this.dom.disclosure.style.height);
-
         requestAnimationFrame(() => {
           addClass(this.openClass, this.dom.disclosure);
 
-          // this.dom.disclosure.style.height = `${this.dom.content.getBoundingClientRect().height}px`;
-          // console.log(this.dom.disclosure.style.height);
-
           requestAnimationFrame(() => {
             setTimeout(() => {
               removeClass(this.transitionClass, this.dom.disclosure);
-
-              // this.dom.disclosure.style.height = "";
-              // console.log(this.dom.disclosure.style.height);
             }, this.openDuration);
           });
         });
@@ -977,41 +1061,30 @@ class Disclosure {
    *
    * @fires grauplDisclosureCollapse
    *
-   * @param {boolean} [emit = true]       - Emit the collapse event once collapsed.
-   * @param {boolean} [transition = true] - Respect the transition class.
+   * @param {Object<boolean>} [options = {}]              - Options for collapsing the disclosure.
+   * @param {boolean}         [options.emit = true]       - Emit the collapse event once collapsed.
+   * @param {boolean}         [options.transition = true] - Respect the transition class.
    */
-  _collapse(emit = true, transition = true) {
+  _collapse({ emit = true, transition = true } = {}) {
     this.dom.controller.setAttribute("aria-expanded", "false");
 
     // If we're dealing with transition classes, then we need to utilize
     // requestAnimationFrame to add the transition class, remove the open class,
     // add the close class, and finally remove the transition class.
     if (transition && this.transitionClass !== "") {
-      // this.dom.disclosure.style.height = `${this.dom.content.getBoundingClientRect().height}px`;
-      // console.log(this.dom.disclosure.style.height);
-
       addClass(this.transitionClass, this.dom.disclosure);
 
       requestAnimationFrame(() => {
         removeClass(this.openClass, this.dom.disclosure);
 
-        // this.dom.disclosure.style.height = `${this.dom.content.getBoundingClientRect().height}px`;
-        // console.log(this.dom.disclosure.style.height);
-
         requestAnimationFrame(() => {
           addClass(this.closeClass, this.dom.disclosure);
 
-          // this.dom.disclosure.style.height = `${this.dom.disclosure.getBoundingClientRect().height}px`;
-          // console.log(this.dom.disclosure.style.height);
-
           requestAnimationFrame(() => {
             setTimeout(() => {
               removeClass(this.transitionClass, this.dom.disclosure);
 
               this.dom.content.innert = true;
-
-              // this.dom.disclosure.style.height = "";
-              // console.log(this.dom.disclosure.style.height);
             }, this.closeDuration);
           });
         });
@@ -1036,6 +1109,8 @@ class Disclosure {
       return;
     }
 
+    let width = 0;
+
     this._observer = new ResizeObserver((entries) => {
       requestAnimationFrame(() => {
         for (const entry of entries) {
@@ -1049,14 +1124,22 @@ class Disclosure {
 
           if (typeof inlineSize !== "number") continue;
 
+          if (width === inlineSize) continue;
+
           const belowBreakpoint = inlineSize <= this.minWidth;
           const aboveBreakpoint = inlineSize > this.minWidth;
 
           if (belowBreakpoint && this.isOpen) {
             this.close({ preserveState: true });
-          } else if (aboveBreakpoint && !this.isOpen && this.hasOpened) {
+          } else if (
+            aboveBreakpoint &&
+            !this.isOpen &&
+            (this.hasOpened || this.shouldOpen)
+          ) {
             this.open();
           }
+
+          width = inlineSize;
         }
       });
     });