@aurodesignsystem/auro-library 3.0.7 → 3.0.9

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Semantic Release Automated Changelog
 
+## [3.0.9](https://github.com/AlaskaAirlines/auro-library/compare/v3.0.8...v3.0.9) (2025-02-17)
+
+
+### Bug Fixes
+
+* fix runtime error on floatingui with no trigger slot ([060c30f](https://github.com/AlaskaAirlines/auro-library/commit/060c30f3da32004e5e0d978949e7d65c661ddfed))
+* lock body scroll only when bib is open in fullscreen mode ([ce5df91](https://github.com/AlaskaAirlines/auro-library/commit/ce5df91b981d7b41b9e938b7d41cc114a279cb59))
+* simplify the strategy logic on `floatingUI` ([42c89db](https://github.com/AlaskaAirlines/auro-library/commit/42c89dbdf9cb48756928143b09b25aa82989dfd4))
+
+
+### Performance Improvements
+
+* lock body's scroll while bib is open ([d78b46e](https://github.com/AlaskaAirlines/auro-library/commit/d78b46ecc689f45b75b3a5317ae029d8b3061c1e))
+
+## [3.0.8](https://github.com/AlaskaAirlines/auro-library/compare/v3.0.7...v3.0.8) (2025-02-05)
+
+
+### Bug Fixes
+
+* temporarily comment out aria-expanded code [#105](https://github.com/AlaskaAirlines/auro-library/issues/105) ([b7cd263](https://github.com/AlaskaAirlines/auro-library/commit/b7cd2632047641d92b3557beef9450d4d9f109c2))
+
 ## [3.0.7](https://github.com/AlaskaAirlines/auro-library/compare/v3.0.6...v3.0.7) (2025-01-13)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-library",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "description": "This repository holds shared scripts, utilities, and workflows utilized across repositories along the Auro Design System.",
   "repository": {
     "type": "git",

package/scripts/runtime/floatingUI.mjs

@@ -16,37 +16,23 @@ export default class AuroFloatingUI {
   }
 
   /**
-   * @private
-   * Adjusts the size of the bib content based on the bibSizer dimensions.
-   *
-   * This method retrieves the computed styles of the bibSizer element and applies them to the bib content.
-   * If the fullscreen parameter is true, it resets the dimensions to their default values. Otherwise, it
-   * mirrors the width and height from the bibSizer, ensuring that they are not set to zero.
-   *
-   * @param {boolean} fullscreen - A flag indicating whether to reset the dimensions for fullscreen mode.
-   *                               If true, the bib content dimensions are cleared; if false, they are set
-   *                               based on the bibSizer's computed styles.
+   * Mirrors the size of the bibSizer element to the bib content.
+   * Copies the width, height, max-width, and max-height styles from the bibSizer element to the bib content container.
+   * This ensures that the bib content has the same dimensions as the sizer element.
    */
-  mirrorSize(fullscreen) {
+  mirrorSize() {
     // mirror the boxsize from bibSizer
     if (this.element.bibSizer) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
-      if (fullscreen) {
-        bibContent.style.width = '';
-        bibContent.style.height = '';
-        bibContent.style.maxWidth = '';
-        bibContent.style.maxHeight = '';
-      } else {
-        if (sizerStyle.width !== '0px') {
-          bibContent.style.width = sizerStyle.width;
-        }
-        if (sizerStyle.height !== '0px') {
-          bibContent.style.height = sizerStyle.height;
-        }
-        bibContent.style.maxWidth = sizerStyle.maxWidth;
-        bibContent.style.maxHeight = sizerStyle.maxHeight;
+      if (sizerStyle.width !== '0px') {
+        bibContent.style.width = sizerStyle.width;
+      }
+      if (sizerStyle.height !== '0px') {
+        bibContent.style.height = sizerStyle.height;
       }
+      bibContent.style.maxWidth = sizerStyle.maxWidth;
+      bibContent.style.maxHeight = sizerStyle.maxHeight;
     }
   }
 
@@ -62,11 +48,12 @@ export default class AuroFloatingUI {
   getPositioningStrategy() {
     let strategy = 'floating';
     if (this.element.bib.mobileFullscreenBreakpoint) {
-      const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches;
-      if (isMobile) {
+      const smallerThanBreakpoint = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches;
+      if (smallerThanBreakpoint) {
         strategy = 'fullscreen';
       }
     }
+
     return strategy;
   }
 
@@ -80,13 +67,10 @@ export default class AuroFloatingUI {
    */
   position() {
     const strategy = this.getPositioningStrategy();
-    if (strategy === 'fullscreen') {
-      this.configureBibFullscreen(true);
-      this.mirrorSize(true);
-    } else {
-      this.configureBibFullscreen(false);
-      this.mirrorSize(false);
+    this.configureBibStrategy(strategy);
 
+    if (strategy === 'floating') {
+      this.mirrorSize();
       // Define the middlware for the floater configuration
       const middleware = [
         offset(this.element.floaterConfig.offset || 0),
@@ -109,28 +93,56 @@ export default class AuroFloatingUI {
 
   /**
    * @private
-   * Configures the bib element for fullscreen mode based on the mobile status.
+   * Configures the bib element's display strategy.
    *
-   * This method sets the 'isFullscreen' attribute on the bib element to "true" if the `isMobile` parameter is true, 
-   * and resets its position to the top-left corner of the viewport. If `isMobile` is false, it removes the 
-   * 'isFullscreen' attribute, indicating that the bib is not in fullscreen mode.
+   * Sets the bib to fullscreen or floating mode based on the provided strategy.
+   * Dispatches a 'strategy-change' event if the strategy changes.
    *
-   * @param {boolean} isMobile - A flag indicating whether the current device is mobile.
+   * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
    */
-  configureBibFullscreen(isMobile) {
-    if (isMobile) {
-      this.element.bib.setAttribute('isFullscreen', "true");
+  configureBibStrategy(strategy) {
+    const prevStrategy = this.element.isBibFullscreen ? 'fullscreen' : 'floating';
+    if (strategy === 'fullscreen') {
+      this.element.isBibFullscreen = true;
       // reset the prev position
       this.element.bib.style.top = "0px";
       this.element.bib.style.left = "0px";
+
+      // reset the size that was mirroring `size` css-part
+      const bibContent = this.element.bib.shadowRoot.querySelector(".container");
+      bibContent.style.width = '';
+      bibContent.style.height = '';
+      bibContent.style.maxWidth = '';
+      bibContent.style.maxHeight = '';
+
+      if (this.element.isPopoverVisible) {
+        document.body.style.overflow = 'hidden';
+      }
     } else {
-      this.element.bib.removeAttribute('isFullscreen');
+      this.element.isBibFullscreen = false;
+
+      document.body.style.overflow = '';
+    }
+
+    if (prevStrategy !== strategy) {
+      const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-strategy-change` : 'strategy-change', {
+        detail: {
+          strategy,
+        },
+        composed: true
+      });
+
+      this.element.dispatchEvent(event);
     }
   }
 
   updateState() {
     const isVisible = this.element.isPopoverVisible;
-    this.element.trigger.setAttribute('aria-expanded', isVisible);
+
+    // Refactor this to apply attribute to correct focusable element
+    // Reference Issue: https://github.com/AlaskaAirlines/auro-library/issues/105
+    //
+    // this.element.trigger.setAttribute('aria-expanded', isVisible);
 
     if (isVisible) {
       this.element.bib.setAttribute('data-show', true);
@@ -226,6 +238,7 @@ export default class AuroFloatingUI {
       this.updateCurrentExpandedDropdown();
       this.element.isPopoverVisible = true;
       this.element.triggerChevron?.setAttribute('data-expanded', true);
+      
       this.dispatchEventDropdownToggle();
       this.position();
       
@@ -243,6 +256,7 @@ export default class AuroFloatingUI {
   hideBib() {
     if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
       this.element.isPopoverVisible = false;
+      document.body.style.overflow = '';
       this.element.triggerChevron?.removeAttribute('data-expanded');
       this.dispatchEventDropdownToggle();
     }
@@ -255,7 +269,7 @@ export default class AuroFloatingUI {
   dispatchEventDropdownToggle() {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
-        expanded: this.isPopoverVisible,
+        expanded: this.element.isPopoverVisible,
       },
       composed: true
     });
@@ -272,7 +286,7 @@ export default class AuroFloatingUI {
 
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick", {
       composed: true,
-      details: {
+      detail: {
         expanded: this.element.isPopoverVisible
       }
     });
@@ -325,6 +339,12 @@ export default class AuroFloatingUI {
     }
   }
 
+  /**
+   * Manages the tabIndex of the trigger element based on its focusability.
+   *
+   * If the trigger element or any of its children are inherently focusable, the tabIndex of the component is set to -1.
+   * This prevents the component itself from being focusable when the trigger element already handles focus.
+   */
   handleTriggerTabIndex() {
     const focusableElementSelectors = [
       'a',
@@ -339,6 +359,9 @@ export default class AuroFloatingUI {
     ];
 
     const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
+    if (!triggerNode) {
+      return;
+    }
     const triggerNodeTagName = triggerNode.tagName.toLowerCase();
 
     focusableElementSelectors.forEach((selector) => {
@@ -367,12 +390,13 @@ export default class AuroFloatingUI {
 
     this.handleTriggerTabIndex();
 
-    this.element.trigger.addEventListener('keydown', (event) => this.handleEvent(event));
-    this.element.trigger.addEventListener('click', (event) => this.handleEvent(event));
-    this.element.trigger.addEventListener('mouseenter', (event) => this.handleEvent(event));
-    this.element.trigger.addEventListener('mouseleave', (event) => this.handleEvent(event));
-    this.element.trigger.addEventListener('focus', (event) => this.handleEvent(event));
-    this.element.trigger.addEventListener('blur', (event) => this.handleEvent(event));
+    this.handleEvent = this.handleEvent.bind(this);
+    this.element.trigger.addEventListener('keydown', this.handleEvent);
+    this.element.trigger.addEventListener('click', this.handleEvent);
+    this.element.trigger.addEventListener('mouseenter', this.handleEvent);
+    this.element.trigger.addEventListener('mouseleave', this.handleEvent);
+    this.element.trigger.addEventListener('focus', this.handleEvent);
+    this.element.trigger.addEventListener('blur', this.handleEvent);
   }
 
   disconnect() {
@@ -381,12 +405,12 @@ export default class AuroFloatingUI {
     
     // Remove event & keyboard listeners
     if (this.element?.trigger) {
-      this.element.trigger.removeEventListener('keydown', (event) => this.handleEvent(event));
-      this.element.trigger.removeEventListener('click', (event) => this.handleEvent(event));
-      this.element.trigger.removeEventListener('mouseenter', (event) => this.handleEvent(event));
-      this.element.trigger.removeEventListener('mouseleave', (event) => this.handleEvent(event));
-      this.element.trigger.removeEventListener('focus', (event) => this.handleEvent(event));
-      this.element.trigger.removeEventListener('blur', (event) => this.handleEvent(event));
+      this.element.trigger.removeEventListener('keydown', this.handleEvent);
+      this.element.trigger.removeEventListener('click', this.handleEvent);
+      this.element.trigger.removeEventListener('mouseenter', this.handleEvent);
+      this.element.trigger.removeEventListener('mouseleave', this.handleEvent);
+      this.element.trigger.removeEventListener('focus', this.handleEvent);
+      this.element.trigger.removeEventListener('blur', this.handleEvent);
     }
   }
 }

package/scripts/utils/auroTemplateFiller.mjs

@@ -55,10 +55,15 @@ export class AuroTemplateFiller {
     const npmStart = pName.indexOf('@');
     const namespaceStart = pName.indexOf('/');
     const nameStart = pName.indexOf('-');
+    const packageNamespace = pName.substring(namespaceStart + 1, nameStart);
+
+    if (nameStart === -1) {
+      throw new Error(`No name can be derived from package.json "name" field: '${pName}'. Expected pattern with \`-\` split like [\`@aurodesignsystem/auro-component\` or \`@aurodesignsystem/eslint-config\`, etc.]`);
+    }
 
     this.values = {
       'npm': pName.substring(npmStart, namespaceStart),
-      'namespace': pName.substring(namespaceStart + 1, nameStart),
+      'namespace': packageNamespace,
       'namespaceCap': pName.substring(namespaceStart + 1)[0].toUpperCase() + pName.substring(namespaceStart + 2, nameStart),
       'name': pName.substring(nameStart + 1),
       'nameCap': pName.substring(nameStart + 1)[0].toUpperCase() + pName.substring(nameStart + 2),
@@ -90,7 +95,10 @@ export class AuroTemplateFiller {
     }, {
       helpers: {
         'capitalize': (str) => str.charAt(0).toUpperCase() + str.slice(1),
+        // Hard codes `auro-*` with whatever string is passed in.
         'withAuroNamespace': (str) => `auro-${str}`,
+        // Recreats the string from package.json: auro-component, eslint-config, etc.
+        'packageName': () => `${this.values['namespace']}-${this.values['name']}`
       }
     })