[terra-collapsible-menu-view] Flicker issue when wrapped with clinica…

…l header (#1965)

packages/terra-collapsible-menu-view/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed flicker issue when `collapsible-menu-view` is wrapped with `terra-clinical-header`.
+
 ## 6.87.0 - (December 18, 2023)
 
 * Added

packages/terra-collapsible-menu-view/src/CollapsibleMenuView.jsx

@@ -100,6 +100,13 @@ class CollapsibleMenuView extends React.Component {
     this.resizeObserver.observe(this.container);
   }
 
+  shouldComponentUpdate(nextProps) {
+    if (React.Children.toArray(this.props.children).length === React.Children.toArray(nextProps.children).length && this.isContainerWidthUsedtoResize) {
+      this.resetCache();
+    }
+    return true;
+  }
+
   componentDidUpdate() {
     if (this.isCalculating) {
       this.isCalculating = false;
@@ -114,9 +121,21 @@ class CollapsibleMenuView extends React.Component {
   }
 
   handleResize(width) {
-    const menuButtonWidth = this.menuButton.getBoundingClientRect().width;
-    const availableWidth = width - menuButtonWidth;
     const childrenArray = React.Children.toArray(this.props.children);
+    const menuButtonWidth = childrenArray.length > 1 ? this.menuButton.getBoundingClientRect().width : 0;
+    const menuButtonContainerWidth = this.menuButton.parentElement.getBoundingClientRect().width;
+    let availableWidth = width - menuButtonWidth;
+    this.isContainerWidthUsedtoResize = false;
+    // if no wrapper is used on top of collapsiblemenuview, use observer width value to calculate availableWidth space,
+    // or use menuButtonContainerWidth value to calculate availableWidth space
+    if (width < menuButtonContainerWidth) {
+      availableWidth = Math.abs(menuButtonContainerWidth - menuButtonWidth);
+      this.isContainerWidthUsedtoResize = true;
+    }
+    // to calculate available space when resized only when menuButtonContainerWidth is used
+    if (Math.abs(window.innerWidth - menuButtonWidth) < availableWidth) {
+      availableWidth = Math.abs(window.innerWidth - menuButtonWidth);
+    }
     let hiddenStartIndex = -1;
     let calcWidth = 0;
     let menuHidden = true;
@@ -129,7 +148,7 @@ class CollapsibleMenuView extends React.Component {
 
         if (calcWidth > availableWidth) {
           // If last child fits in the available space, leave it face up
-          if (!this.collapsedMenuAlwaysShown && i === childrenArray.length - 1 && calcWidth <= width) {
+          if (!this.collapsedMenuAlwaysShown && i === childrenArray.length - 1 && calcWidth <= availableWidth) {
             break;
           }
 

packages/terra-file-path/tests/wdio/file-path-spec.js

@@ -37,4 +37,12 @@ Terra.describeViewports('On Click File Path', ['tiny', 'small'], () => {
     browser.keys('Enter');
     Terra.validates.element('on click first displayed link clicked', { selector: '#root', rules: ignoredA11y });
   });
+
+  it('should display file path with clinical header', () => {
+    browser.url('/raw/tests/cerner-terra-framework-docs/file-path/file-pathwith-action-header');
+    browser.keys('Tab');
+    Terra.validates.element('file path with header');
+    browser.keys('Enter');
+    Terra.validates.element('add file path with header', { selector: '#root', rules: ignoredA11y });
+  });
 });

packages/terra-framework-docs/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Added
+  * Added test example for `terra-file-path`.
   * Added `terra-compact-interactive-list` cell content example.
 
 * Changed

packages/terra-framework-docs/src/terra-dev-site/test/file-path/FilePathwithActionHeader.test.jsx

@@ -0,0 +1,32 @@
+/* eslint-disable react/forbid-dom-props */
+import React, { useState } from 'react';
+import FilePath from 'terra-file-path';
+import ActionHeader from 'terra-action-header';
+
+const FilePathwithActionHeader = () => {
+  const path = [
+    {
+      key: 'link-0',
+      text: 'Link 0',
+    },
+    {
+      key: 'link-1',
+      text: 'Link 1',
+    },
+  ];
+
+  const [items, setItems] = useState(path);
+
+  const handleClick = () => {
+    setItems([...items, { key: `link${items.length}`, text: `Link${items.length}` }]);
+  };
+
+  return (
+    <>
+      <button id="add-path" type="button" onClick={handleClick}>Click Me</button>
+      <ActionHeader text={<FilePath items={items} />} />
+    </>
+  );
+};
+
+export default FilePathwithActionHeader;