@cfpb/cfpb-atomic-component - npm Package Compare versions

Comparing version 0.21.6 to 0.21.9

package.json

 {
   "name": "@cfpb/cfpb-atomic-component",
-  "version": "0.21.6",
+  "version": "0.21.9",
   "description": "Design System atomic component utilities",
@@ -17,4 +17,4 @@ "less": "src/cfpb-atomic-component.less",
   ],
-  "gitHead": "8b3bcf2570ddb04cf1b25296da34e8f67933f424",
+  "gitHead": "65a92d43e0eddb171684e512f6cf8fad6d28d8fd",
   "type": "module"
 }

src/utilities/behavior/behavior.js

@@ -19,4 +19,5 @@ /* ==========================================================================
    <div data-js-hook="behavior_flyout-menu">
-   <button data-js-hook="behavior_flyout-menu_trigger">
-   <div data-js-hook="behavior_flyout-menu_content">
+     <button data-js-hook="behavior_flyout-menu_trigger">
+     <div data-js-hook="behavior_flyout-menu_content">…</div>
+   </div>
    ========================================================================== */
@@ -23,0 +24,0 @@

src/utilities/behavior/FlyoutMenu.js

@@ -33,5 +33,7 @@ /* eslint-disable no-use-before-define */
  * @param {HTMLElement} element - The DOM element to attach FlyoutMenu behavior.
+ * @param {boolean} autoHideContent - Whether to add `hidden` attribute to
+ *   content when it is collapsed.
  * @returns {FlyoutMenu} An instance.
  */
-function FlyoutMenu(element) {
+function FlyoutMenu(element, autoHideContent = true) {
   // Verify that the expected dom attributes are present.
@@ -131,2 +133,5 @@ const _dom = checkBehaviorDom(element, BASE_CLASS);
 
+    _contentDom.setAttribute('data-open', isExpanded ? 'true' : 'false');
+    if (autoHideContent && !isExpanded) _contentDom.setAttribute('hidden', '');
+
     resume();
@@ -233,2 +238,3 @@
     _state = EXPANDING;
+    if (autoHideContent) _contentDom.removeAttribute('hidden');
     this.dispatchEvent('expandbegin', { target: this, type: 'expandbegin' });
@@ -272,2 +278,4 @@
 
+    _contentDom.setAttribute('data-open', 'false');
+
     _state = COLLAPSING;
@@ -309,2 +317,3 @@ this.dispatchEvent('collapsebegin', {
     _state = EXPANDED;
+    _contentDom.setAttribute('data-open', 'true');
     if (_transition) {
@@ -328,2 +337,5 @@ _transition.removeEventListener(
     _state = COLLAPSED;
+
+    if (autoHideContent) _contentDom.setAttribute('hidden', '');
+
     if (_transition) {
@@ -330,0 +342,0 @@ _transition.removeEventListener(

No alert changes

Improved metrics

Total package byte prevSize

72588

increased by0.76%

Lines of code

1783

increased by0.51%

No dependency changes