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

package/src/js/disclosure/Disclosure.js

@@ -139,22 +139,22 @@ class Disclosure {
   _closeOnBlur = false;
 
   /**
-   * The width of the screen (in pixels) that the disclosure will automatically open/close itself.
+   * The width of the screen that the disclosure will automatically open/close itself.
    *
    * @protected
    *
-   * @type {number}
+   * @type {string}
    */
-  _breakpointWidth = -1;
+  _breakpointWidth = "";
 
   /**
-   * This ResizeObserver for the disclosure.
+   * This MediaQueryList for the disclosure.
    *
    * @protected
    *
-   * @type {ResizeObserver|null}
+   * @type {MediaQueryList|null}
    */
-  _observer = null;
+  _mediaQueryList = null;
 
   /**
    * The event that is triggered when the disclosure expands.
@@ -231,7 +231,7 @@ 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 {?string}            [options.minWidth = ""]                                   - The width of the screen 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.
@@ -248,7 +248,7 @@ class Disclosure {
     openDuration = -1,
     closeDuration = -1,
     closeOnBlur = false,
-    minWidth = -1,
+    minWidth = "",
     autoOpen = false,
     prefix = "graupl-",
     initializeClass = "initializing",
@@ -276,7 +276,7 @@ class Disclosure {
     this._closeOnBlur = closeOnBlur;
 
     // Set collapse width and auto open functionality.
-    this._breakpointWidth = minWidth;
+    this._breakpointWidth = minWidth || "";
     this._shouldOpen = autoOpen;
 
     // Set the prefix.
@@ -516,7 +516,7 @@ class Disclosure {
   }
 
   /**
-   * The width of the screen (in pixels) that the disclosure will automatically open/close itself.
+   * The width of the screen that the disclosure will automatically open/close itself.
    *
    * @type {number}
    *
@@ -527,7 +527,7 @@ class Disclosure {
   }
 
   set minWidth(value) {
-    isValidType("number", { value });
+    isValidType("string", { value });
 
     if (this._breakpointWidth !== value) {
       this._breakpointWidth = value;
@@ -1105,45 +1105,25 @@ class Disclosure {
   }
 
   _handleResize() {
-    if (this._breakpointWidth <= 0) {
+    if (this._breakpointWidth === "") {
       return;
     }
 
-    let width = 0;
+    this._mediaQueryList = window.matchMedia(
+      `(width <= ${this._breakpointWidth})`
+    );
 
-    this._observer = new ResizeObserver((entries) => {
-      requestAnimationFrame(() => {
-        for (const entry of entries) {
-          const boxSize = Array.isArray(entry.contentBoxSize)
-            ? entry.contentBoxSize[0]
-            : entry.contentBoxSize;
-          const inlineSize =
-            boxSize && typeof boxSize.inlineSize === "number"
-              ? boxSize.inlineSize
-              : entry.contentRect.width;
-
-          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 || this.shouldOpen)
-          ) {
-            this.open();
-          }
-
-          width = inlineSize;
-        }
-      });
+    this._mediaQueryList.addEventListener("change", (event) => {
+      if (event.matches && this.isOpen) {
+        this.close({ preserveState: true });
+      } else if (
+        !event.matches &&
+        !this.isOpen &&
+        (this.hasOpened || this.shouldOpen)
+      ) {
+        this.open();
+      }
     });
-    this._observer.observe(document.body);
   }
 
   /**

package/src/js/domHelpers.js

@@ -39,10 +39,11 @@ export function removeClass(className, element) {
 /**
  * Select all focusable elements within a given context.
  *
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement[]} - An array of focusable elements.
+ * @param  {HTMLElement}                     [context = document] - The context in which to search for focusable elements.
+ * @param  {?function(HTMLElement): boolean} [fn = null]          - An optional addition filter function to process out focusable elements.
+ * @return {HTMLElement[]}                                        - An array of focusable elements.
  */
-export function selectAllFocusableElements(context = document) {
+export function selectAllFocusableElements(context = document, fn = null) {
   const querySelector =
     "a[href],area[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),[tabindex]";
   const elements = Array.from(context.querySelectorAll(querySelector));
@@ -55,17 +56,22 @@ export function selectAllFocusableElements(context = document) {
     return check;
   });
 
-  return tabbableElements;
+  if (fn !== null) {
+    return tabbableElements.filter(fn);
+  } else {
+    return tabbableElements;
+  }
 }
 
 /**
  * Select the first focusable element within a given context.
  *
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement|boolean} - The first focusable element or false if none found.
+ * @param  {HTMLElement}                     [context = document] - The context in which to search for focusable elements.
+ * @param  {?function(HTMLElement): boolean} [fn = null]          - An optional addition filter function to process out focusable elements.
+ * @return {HTMLElement|boolean}                                  - The first focusable element or false if none found.
  */
-export function selectFirstFocusableElement(context = document) {
-  const tabbableElements = selectAllFocusableElements(context);
+export function selectFirstFocusableElement(context = document, fn = null) {
+  const tabbableElements = selectAllFocusableElements(context, fn);
 
   return tabbableElements[0] || false;
 }
@@ -73,11 +79,12 @@ export function selectFirstFocusableElement(context = document) {
 /**
  * Select the last focusable element within a given context.
  *
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement|boolean} - The last focusable element or false if none found.
+ * @param  {HTMLElement}                     [context = document] - The context in which to search for focusable elements.
+ * @param  {?function(HTMLElement): boolean} [fn = null]          - An optional addition filter function to process out focusable elements.
+ * @return {HTMLElement|boolean}                                  - The last focusable element or false if none found.
  */
-export function selectLastFocusableElement(context = document) {
-  const tabbableElements = selectAllFocusableElements(context);
+export function selectLastFocusableElement(context = document, fn = null) {
+  const tabbableElements = selectAllFocusableElements(context, fn);
 
   return tabbableElements[tabbableElements.length - 1] || false;
 }
@@ -85,12 +92,17 @@ export function selectLastFocusableElement(context = document) {
 /**
  * Select the next focusable element relative to the given element within a context.
  *
- * @param {HTMLElement} element - The reference element.
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement|boolean} - The next focusable element or false if none found.
+ * @param  {HTMLElement}                     element              - The reference element.
+ * @param  {HTMLElement}                     [context = document] - The context in which to search for focusable elements.
+ * @param  {?function(HTMLElement): boolean} [fn = null]          - An optional addition filter function to process out focusable elements.
+ * @return {HTMLElement|boolean}                                  - The next focusable element or false if none found.
  */
-export function selectNextFocusableElement(element, context = document) {
-  const tabbableElements = selectAllFocusableElements(context);
+export function selectNextFocusableElement(
+  element,
+  context = document,
+  fn = null
+) {
+  const tabbableElements = selectAllFocusableElements(context, fn);
   const index = tabbableElements.indexOf(element);
 
   return index === tabbableElements.length - 1
@@ -101,12 +113,17 @@ export function selectNextFocusableElement(element, context = document) {
 /**
  * Select the previous focusable element relative to the given element within a context.
  *
- * @param {HTMLElement} element - The reference element.
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement|boolean} - The previous focusable element or false if none found.
+ * @param  {HTMLElement}                     element              - The reference element.
+ * @param  {HTMLElement}                     [context = document] - The context in which to search for focusable elements.
+ * @param  {?function(HTMLElement): boolean} [fn = null]          - An optional addition filter function to process out focusable elements.
+ * @return {HTMLElement|boolean}                                  - The previous focusable element or false if none found.
  */
-export function selectPreviousFocusableElement(element, context = document) {
-  const tabbableElements = selectAllFocusableElements(context);
+export function selectPreviousFocusableElement(
+  element,
+  context = document,
+  fn = null
+) {
+  const tabbableElements = selectAllFocusableElements(context, fn);
   const index = tabbableElements.indexOf(element);
 
   return index === 0 ? false : tabbableElements[index - 1];

package/src/js/tabs/TabToggle.js

@@ -0,0 +1,378 @@
+/* global Tabs */
+
+import { addClass, removeClass } from "@graupl/core/src/domHelpers.js";
+import { TransactionalValue } from "../TransactionalValue.js";
+
+class TabToggle {
+  /**
+   * The DOM elements within the tab toggle.
+   *
+   * @protected
+   *
+   * @type {Object<HTMLElement>}
+   *
+   * @property {HTMLElement} toggle  - The toggle element.
+   * @property {HTMLElement} content - The content element.
+   */
+  _dom = {
+    toggle: null,
+    content: null,
+  };
+
+  /**
+   * The declared elements within the tab toggle.
+   *
+   * @protected
+   *
+   * @type {Object<Tabs>}
+   *
+   * @property {Tabs} parent - The parent tabs element.
+   */
+  _elements = {
+    parent: null,
+  };
+
+  /**
+   * The active state of the tab toggle.
+   *
+   * @protected
+   *
+   * @type {TransactionalValue}
+   */
+  _active = new TransactionalValue(false);
+
+  /**
+   * The event that is triggered when the tab toggle is shown.
+   *
+   * @protected
+   *
+   * @event grauplTabToggleActivate
+   *
+   * @type {CustomEvent}
+   *
+   * @property {boolean}           bubbles - A flag to bubble the event.
+   * @property {Object<TabToggle>} detail  - The details object containing the Accordion item itself.
+   */
+  _activateEvent = new CustomEvent("grauplTabToggleActivate", {
+    bubbles: true,
+    detail: { item: this },
+  });
+
+  /**
+   * The event that is triggered when the tab toggle is hidden.
+   *
+   * @protected
+   *
+   * @event grauplTabToggleDeactivate
+   *
+   * @type {CustomEvent}
+   *
+   * @property {boolean}           bubbles - A flag to bubble the event.
+   * @property {Object<TabToggle>} detail  - The details object containing the Accordion item itself.
+   */
+  _deactivateEvent = new CustomEvent("grauplTabToggleDeactivate", {
+    bubbles: true,
+    detail: { item: this },
+  });
+
+  constructor({ toggleElement, contentElement, parentTab }) {
+    // Set DOM elements.
+    this._dom.toggle = toggleElement;
+    this._dom.content = contentElement;
+
+    // Set the parent tab instance.
+    this._elements.parent = parentTab;
+  }
+
+  /**
+   * Initializes the tab toggle.
+   */
+  initialize() {
+    // Set up the DOM.
+    this._setIds();
+    this._setAriaAttributes();
+
+    if (this.dom.toggle.getAttribute("aria-selected") === "true") {
+      this.show();
+    } else {
+      this._deactivate({ emit: false, transition: false });
+    }
+  }
+
+  /**
+   * The DOM elements of the tab toggle.
+   *
+   * @readonly
+   *
+   * @type {Object<HTMLElement>}
+   *
+   * @see _dom
+   */
+  get dom() {
+    return this._dom;
+  }
+
+  /**
+   * The declared elements in the tab toggle.
+   *
+   * @protected
+   *
+   * @type {Object<Tabs>}
+   *
+   * @see _elements
+   */
+  get elements() {
+    return this._elements;
+  }
+
+  /**
+   * The active state of the tab toggle.
+   *
+   * @readonly
+   *
+   * @type {TransactionalValue}
+   *
+   * @see _active
+   */
+  get isActive() {
+    return this._active.value;
+  }
+
+  /**
+   * Sets the IDs of the tab toggle and it's content if they do not already exist.
+   *
+   * The generated IDs use the following format:
+   *   - toggle: `tab-toggle-${key}-${index}`
+   *   - content: `tab-content-${key}-${index}`
+   *
+   * Where `${key}` is the parent's key and `${index}` is the toggles index in the list of the parent's toggles.
+   *
+   * @protected
+   */
+  _setIds() {
+    // Get the required information for IDs.
+    const { key } = this.elements.parent;
+    const index = this.elements.parent.dom.tabToggle.indexOf(this.dom.toggle);
+
+    this.dom.toggle.id = this.dom.toggle.id || `tab-toggle-${key}-${index}`;
+    this.dom.content.id = this.dom.content.id || `tab-content-${key}-${index}`;
+  }
+
+  /**
+   * Sets the ARIA attributes on the disclosure and it's content.
+   */
+  _setAriaAttributes() {
+    // Set the ARIA attributes for the tab item toggle.
+    this.dom.toggle.setAttribute("role", "tab");
+
+    // If aria-selected is not explicitly set to "true", then set it to "false".
+    if (this.dom.toggle.getAttribute("aria-selected") !== "true") {
+      this.dom.toggle.setAttribute("aria-selected", "false");
+    }
+
+    // Set the aria-controls attribute for the toggle.
+    this.dom.toggle.setAttribute("aria-controls", this.dom.content.id);
+
+    // Set the role for the content.
+    this.dom.content.setAttribute("role", "tabpanel");
+  }
+
+  /**
+   * Activate the toggle.
+   *
+   * Sets the toggles's `aria-selected` to "true", adds the
+   * open class to the content, and removes the closed class from the content.
+   *
+   * @protected
+   *
+   * @fires grauplTabToggleActivate
+   *
+   * @param {Object<boolean>} [options = {}]              - Options for activating the toggle.
+   * @param {boolean}         [options.emit = true]       - Emit the activat event once activated.
+   * @param {boolean}         [options.transition = true] - Respect the transition class.
+   */
+  _activate({ emit = true, transition = true } = {}) {
+    const { closeClass, openClass, transitionClass, openDuration } =
+      this.elements.parent;
+
+    // Set aria-selected to true when hiding accordion item.
+    this.dom.toggle.setAttribute("aria-selected", "true");
+
+    // If we're dealing with transition classes, then we need to utilize
+    // requestAnimationFrame to add the transition class, remove the hide class,
+    // add the show class, and finally remove the transition class.
+    //
+    // If `transition` is false, then it doesn't matter if the transition class
+    // is set. Do not use the transition.
+    if (transition && transitionClass !== "") {
+      addClass(transitionClass, this.dom.content);
+
+      requestAnimationFrame(() => {
+        removeClass(closeClass, this.dom.content);
+
+        requestAnimationFrame(() => {
+          addClass(openClass, this.dom.content);
+
+          requestAnimationFrame(() => {
+            setTimeout(() => {
+              removeClass(transitionClass, this.dom.content);
+            }, openDuration);
+          });
+        });
+      });
+    } else {
+      // Add the show class
+      addClass(openClass, this.dom.content);
+
+      // Remove the hide class.
+      removeClass(closeClass, this.dom.content);
+    }
+
+    if (emit) {
+      this.dom.toggle.dispatchEvent(this._activateEvent);
+    }
+  }
+
+  /**
+   * Deactivates the disclosure.
+   *
+   * Sets the toggles's `aria-expanded` to "false", adds the
+   * close class to the content, and removes the open class from the content.
+   *
+   * @protected
+   *
+   * @fires grauplTabToggleDeactivate
+   *
+   * @param {Object<boolean>} [options = {}]              - Options for collapsing the toggle.
+   * @param {boolean}         [options.emit = true]       - Emit the deactivate event once deactivated.
+   * @param {boolean}         [options.transition = true] - Respect the transition class.
+   */
+  _deactivate({ emit = true, transition = true } = {}) {
+    const { closeClass, openClass, transitionClass, closeDuration } =
+      this.elements.parent;
+
+    // Set aria-selected to false when hiding accordion item.
+    this.dom.toggle.setAttribute("aria-selected", "false");
+
+    // If we're dealing with transition classes, then we need to utilize
+    // requestAnimationFrame to add the transition class, remove the show class,
+    // add the hide class, and finally remove the transition class.
+    //
+    // If `transition` is false, then it doesn't matter if the transition class
+    // is set. Do not use the transition.
+    if (transition && transitionClass !== "") {
+      addClass(transitionClass, this.dom.content);
+
+      requestAnimationFrame(() => {
+        removeClass(openClass, this.dom.content);
+
+        requestAnimationFrame(() => {
+          addClass(closeClass, this.dom.content);
+
+          requestAnimationFrame(() => {
+            setTimeout(() => {
+              removeClass(transitionClass, this.dom.content);
+            }, closeDuration);
+          });
+        });
+      });
+    } else {
+      // Add the hide class
+      addClass(closeClass, this.dom.content);
+
+      // Remove the show class.
+      removeClass(openClass, this.dom.content);
+    }
+
+    if (emit) {
+      this.dom.toggle.dispatchEvent(this._deactivateEvent);
+    }
+  }
+
+  /**
+   * Shows the tab toggle's content.
+   *
+   * @param {Object<boolean>} [options = {}]                  - Options for showing the toggle.
+   * @param {boolean}         [options.force = false]         - Whether to force the show action.
+   * @param {boolean}         [options.preserveState = false] - Whether to preserve the active state.
+   */
+  show({ force = false, preserveState = false } = {}) {
+    if (this.isActive && !force) return;
+
+    // Set the focus state of the parent tabs element.
+    this.elements.parent.focusState = "self";
+
+    // Activate the toggle.
+    this._activate();
+
+    // Set the active state
+    this._active.value = true;
+
+    if (!preserveState) {
+      this._active.commit();
+    }
+
+    // Set the tabindex to 0 so it can be focused.
+    this.dom.toggle.setAttribute("tabindex", "0");
+
+    // Deactivate all sibling tab toggles.
+    this.deactivateSiblings();
+  }
+
+  /**
+   * Hides the tab toggle's content.
+   *
+   * @param {Object<boolean>} [options = {}]                  - Options for hiding the toggle.
+   * @param {boolean}         [options.force = false]         - Whether to force the show action.
+   * @param {boolean}         [options.preserveState = false] - Whether to preserve the active state.
+   */
+  hide({ force = false, preserveState = false } = {}) {
+    if (!this.isActive && !force) return;
+
+    // Set the focus state of the parent tabs element.
+    this.elements.parent.focusState = "none";
+
+    // Deactivate the toggle.
+    this._deactivate();
+
+    // Set the active state
+    this._active.value = false;
+
+    if (!preserveState) {
+      this._active.commit();
+    }
+
+    // Set the tabindex to -1.
+    this.dom.toggle.setAttribute("tabindex", "-1");
+  }
+
+  /**
+   * Focuses the accordion item.
+   *
+   * @public
+   */
+  focus() {
+    this.dom.toggle.focus();
+  }
+
+  /**
+   * Blurs the accordion item.
+   *
+   * @public
+   */
+  blur() {
+    this.dom.toggle.blur();
+  }
+
+  deactivateSiblings() {
+    if (this.elements.parent) {
+      this.elements.parent.elements.tabToggle.forEach((toggle) => {
+        if (toggle !== this) {
+          toggle.hide();
+        }
+      });
+    }
+  }
+}
+
+export default TabToggle;