[terra-clinical-result] Fix useEffect infinite re-render

packages/terra-clinical-result/CHANGELOG.md

@@ -2,9 +2,15 @@
 
 ## Unreleased
 
+* Added
+  * Added back `width: 100%` to flowsheet result cell styles removed in 1.17.0.
+
+* Fixed
+  * Fixed infinite re-render bug.
+
 ## 1.21.0 - (August 2, 2023)
 
-* Changed  
+* Changed
   * Locked `uuid` dependency to `3.4.0` for maximum consistency across Terra packages.
   * Updated translations.
 

packages/terra-clinical-result/src/flowsheet-result-cell/FlowsheetResultCell.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useLayoutEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import classNamesBind from 'classnames/bind';
@@ -391,27 +391,24 @@ const FlowsheetResultCell = (props) => {
     ...customProps
   } = props;
   const containerDiv = useRef(null);
-  const [contentWidth, setContentWidth] = useState(null);
   const [numericOverflow, setNumericOverflow] = useState(false);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!containerDiv.current || !resultDataSet[0]) {
       return;
     }
 
     if (checkTypeNumeric(resultDataSet[0])) {
-      if (!contentWidth) {
-        setContentWidth(containerDiv.current.children[0].getBoundingClientRect().width);
-      }
-
+      const contentWidth = containerDiv.current.children[0].getBoundingClientRect().width;
       const containerWidth = containerDiv.current.getBoundingClientRect().width;
-      if (containerWidth <= contentWidth && !numericOverflow) {
+
+      if (containerWidth <= contentWidth) {
         setNumericOverflow(true);
       } else if (containerWidth > contentWidth) {
         setNumericOverflow(false);
       }
     }
-  }, [resultDataSet, contentWidth, numericOverflow]);
+  }, [resultDataSet]);
 
   let flowsheetResultCellDisplay;
 

packages/terra-clinical-result/src/flowsheet-result-cell/FlowsheetResultCell.module.scss

@@ -10,6 +10,7 @@
     max-width: 100%;  // Needed for IE10 truncation
     overflow-x: hidden;
     padding: 0;
+    width: 100%;
   }
 
   .combined-display {

packages/terra-clinical-result/src/terra-dev-site/doc/ClinicalResult/AccessibilityGuide.6.doc.mdx

@@ -64,7 +64,14 @@ This example shows how to set up the optional `fullResultName` and `fullUnit` pr
 
 #### Accessibility of Cell Components
 
-Flowsheet Result Cell, Result Name Header Cell, and Result Time Header Cell all return their content using HTML table elements. Flowsheet Result Cell utilizes the `<td>` element while both of the header cell components utilize the `<th>` element. As such, the best way to consume these components for true accessibility is in a semantic HTML table. Otherwise, the context of being a cell/header cell will not be understood by screen reader users. The [Terra HTML Table](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/html-table/about) component can be used to create a semantic HTML table for this purpose.
+Flowsheet Result Cell, Result Name Header Cell, and Result Time Header Cell all return their content using HTML table elements.
+Flowsheet Result Cell utilizes the `<td>` element while both of the header cell components utilize the `<th>` element.
+As such, the best way to consume these components for true accessibility is in a semantic HTML table.
+Otherwise, the context of being a cell/header cell will not be understood by screen reader users.
+The [Terra HTML Table](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/html-table/about) component can be used to create a semantic HTML table for this purpose.
+
+
+**NOTE:** When using a semantic HTML table, use `table-layout: 'fixed'` or otherwise ensure the styling for column widths is preserved.
 
 ### Other Considerations
 

packages/terra-clinical-result/src/terra-dev-site/doc/example/Examples.module.scss

@@ -36,6 +36,16 @@
     padding: 0;
   }
 
+  .mock-flowsheet-table {
+    table-layout: fixed;
+    width: 40%;
+  }
+
+  .mock-flowsheet-table-full {
+    table-layout: fixed;
+    width: 100%;
+  }
+
   .mock-flowsheet-header {
     background-color: var(--terra-clinical-result-examples-mock-flowsheet-header-background-color, #f1f1f1);
     border: var(--terra-clinical-result-examples-mock-flowsheet-header-border, 1px solid #dedfe0);
@@ -53,7 +63,7 @@
     display: inline-block;
     margin-right: -1px;
     width: 120px;
-    
+
     &.new-date {
       border-left: var(--terra-clinical-result-examples-mock-flowsheet-header-cell-new-date-border-left, 2px solid #4e5558);
     }
@@ -119,7 +129,7 @@
       overflow: auto;
       white-space: normal;
       word-wrap: normal;
-    }  
+    }
 
     &.empty {
       height: 33px;
@@ -140,7 +150,7 @@
     &.with-padding {
       padding: 7px 7px 0;
     }
-    
+
     &.zebra {
       background-color: var(--terra-clinical-result-examples-mock-flowsheet-resultcolumn-cell-zebra-background-color, #f1f1f1);
     }

packages/terra-clinical-result/src/terra-dev-site/doc/example/flowsheet-result-cell/FlowsheetResultCellBloodPressure.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
-import { FlowsheetResultCell } from 'terra-clinical-result/lib/index';
-import classNames from 'classnames';
+import { FlowsheetResultCell, ResultNameHeaderCell } from 'terra-clinical-result/lib/index';
+import Table, {
+  Header,
+  Row,
+  Body,
+} from 'terra-html-table';
 import classNamesBind from 'classnames/bind';
-import ThemeContext from 'terra-theme-context';
 import styles from '../Examples.module.scss';
 
 const cx = classNamesBind.bind(styles);
@@ -28,27 +31,16 @@ const bloodpressureResultValue = [
   },
 ];
 
-export default () => {
-  const theme = React.useContext(ThemeContext);
-  const mockFlowsheetClassnames = classNames(
-    cx(
-      'mock-flowsheet-example',
-      theme.className,
-    ),
-  );
-
-  return (
-    <div className={mockFlowsheetClassnames}>
-      <div className={cx('mock-flowsheet-resultcolumn')}>
-        <div className={cx('mock-flowsheet-resultcolumn-cell')}>
-          <FlowsheetResultCell resultDataSet={bloodpressureResultValue} hideUnit />
-        </div>
-        <div className={cx(['mock-flowsheet-resultcolumn-cell', 'empty'])} />
-      </div>
-      <div className={cx('mock-flowsheet-resultcolumn')}>
-        <div className={cx(['mock-flowsheet-resultcolumn-cell', 'empty'])} />
-        <div className={cx(['mock-flowsheet-resultcolumn-cell', 'empty'])} />
-      </div>
-    </div>
-  );
-};
+export default () => (
+  <Table className={cx('mock-flowsheet-table')}>
+    <Header>
+      <ResultNameHeaderCell className={cx('mock-flowsheet-resultcolumn')} resultName="" />
+      <ResultNameHeaderCell className={cx('mock-flowsheet-resultcolumn')} resultName="" />
+    </Header>
+    <Body>
+      <Row>
+        <FlowsheetResultCell resultDataSet={bloodpressureResultValue} hideUnit />
+      </Row>
+    </Body>
+  </Table>
+);

packages/terra-clinical-result/src/terra-dev-site/doc/example/flowsheet-result-cell/FlowsheetResultCellKnownAndPartialNoData.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import { FlowsheetResultCell } from 'terra-clinical-result/lib/index';
-import classNames from 'classnames';
 import classNamesBind from 'classnames/bind';
-import ThemeContext from 'terra-theme-context';
+import Table, {
+  Header,
+  Row,
+  Body,
+  HeaderCell,
+} from 'terra-html-table';
 import styles from '../Examples.module.scss';
 
 const cx = classNamesBind.bind(styles);
@@ -43,35 +47,22 @@ const partialResultValueWithNoDataPropDiastolic = [
   },
 ];
 
-export default () => {
-  const theme = React.useContext(ThemeContext);
-  const mockFlowsheetClassnames = classNames(
-    cx(
-      'mock-flowsheet-example',
-      theme.className,
-    ),
-  );
-
-  return (
-    <div className={mockFlowsheetClassnames}>
-      {/* This example column shows a standard result with the `hasResultNoData` prop or `result: { value: null, }` */}
-      <div className={cx('mock-flowsheet-resultcolumn')}>
-        <div className={cx('mock-flowsheet-resultcolumn-cell')}>
-          <FlowsheetResultCell hasResultNoData />
-        </div>
-      </div>
-      {/* This example column shows a partial Blood Pressure no data display using the `resultNoData` property name */}
-      <div className={cx('mock-flowsheet-resultcolumn')}>
-        <div className={cx('mock-flowsheet-resultcolumn-cell')}>
-          <FlowsheetResultCell resultDataSet={partialResultValueWithNoDataPropSystolic} hideUnit />
-        </div>
-      </div>
-      {/* This example column shows a partial Blood Pressure no data display using `result: { value: null, }` */}
-      <div className={cx('mock-flowsheet-resultcolumn')}>
-        <div className={cx('mock-flowsheet-resultcolumn-cell')}>
-          <FlowsheetResultCell resultDataSet={partialResultValueWithNoDataPropDiastolic} hideUnit />
-        </div>
-      </div>
-    </div>
-  );
-};
+export default () => (
+  <Table className={cx('mock-flowsheet-table')}>
+    <Header>
+      <HeaderCell className={cx('mock-flowsheet-resultcolumn')} />
+      <HeaderCell className={cx('mock-flowsheet-resultcolumn')} />
+      <HeaderCell className={cx('mock-flowsheet-resultcolumn')} />
+    </Header>
+    <Body>
+      <Row>
+        {/* This example cell shows a standard result with the `hasResultNoData` prop or `result: { value: null, }` */}
+        <FlowsheetResultCell hasResultNoData />
+        {/* This example cell shows a partial Blood Pressure no data display using the `resultNoData` property name */}
+        <FlowsheetResultCell resultDataSet={partialResultValueWithNoDataPropSystolic} hideUnit />
+        {/* This example cell shows a partial Blood Pressure no data display using `result: { value: null, }` */}
+        <FlowsheetResultCell resultDataSet={partialResultValueWithNoDataPropDiastolic} hideUnit />
+      </Row>
+    </Body>
+  </Table>
+);

packages/terra-clinical-result/src/terra-dev-site/doc/example/flowsheet-result-cell/FlowsheetResultCellKnownErrorAndPartialError.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import { FlowsheetResultCell } from 'terra-clinical-result/lib/index';
-import classNames from 'classnames';
 import classNamesBind from 'classnames/bind';
-import ThemeContext from 'terra-theme-context';
+import Table, {
+  Header,
+  Row,
+  Body,
+  HeaderCell,
+} from 'terra-html-table';
 import styles from '../Examples.module.scss';
 
 const cx = classNamesBind.bind(styles);
@@ -35,35 +39,22 @@ const partialResultValueWithNoDiastolic = [
   },
 ];
 
-export default () => {
-  const theme = React.useContext(ThemeContext);
-  const mockFlowsheetClassnames = classNames(
-    cx(
-      'mock-flowsheet-example',
-      theme.className,
-    ),
-  );
-
-  return (
-    <div className={mockFlowsheetClassnames}>
-      {/* This example column shows how to use the `hasResultError` prop */}
-      <div className={cx('mock-flowsheet-resultcolumn')}>
-        <div className={cx('mock-flowsheet-resultcolumn-cell')}>
-          <FlowsheetResultCell hasResultError />
-        </div>
-      </div>
-      {/* This example column shows the error display when the Systolic property name is not present */}
-      <div className={cx('mock-flowsheet-resultcolumn')}>
-        <div className={cx('mock-flowsheet-resultcolumn-cell')}>
-          <FlowsheetResultCell resultDataSet={partialResultValueWithNoSystolic} hideUnit />
-        </div>
-      </div>
-      {/* This example column shows the error display when the Diastolic property name is not present */}
-      <div className={cx('mock-flowsheet-resultcolumn')}>
-        <div className={cx('mock-flowsheet-resultcolumn-cell')}>
-          <FlowsheetResultCell resultDataSet={partialResultValueWithNoDiastolic} hideUnit />
-        </div>
-      </div>
-    </div>
-  );
-};
+export default () => (
+  <Table className={cx('mock-flowsheet-table')}>
+    <Header>
+      <HeaderCell className={cx('mock-flowsheet-resultcolumn')} />
+      <HeaderCell className={cx('mock-flowsheet-resultcolumn')} />
+      <HeaderCell className={cx('mock-flowsheet-resultcolumn')} />
+    </Header>
+    <Body>
+      <Row>
+        {/* This example cell shows how to use the `hasResultError` prop */}
+        <FlowsheetResultCell hasResultError />
+        {/* This example cell shows the error display when the Systolic property name is not present */}
+        <FlowsheetResultCell resultDataSet={partialResultValueWithNoSystolic} hideUnit />
+        {/* This example cell shows the error display when the Diastolic property name is not present */}
+        <FlowsheetResultCell resultDataSet={partialResultValueWithNoDiastolic} hideUnit />
+      </Row>
+    </Body>
+  </Table>
+);

packages/terra-clinical-result/src/terra-dev-site/doc/example/flowsheet-result-cell/FlowsheetResultCellMultipleBloodPressures.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
-import { FlowsheetResultCell } from 'terra-clinical-result/lib/index';
-import classNames from 'classnames';
+import { FlowsheetResultCell, ResultNameHeaderCell } from 'terra-clinical-result/lib/index';
+import Table, {
+  Header,
+  Row,
+  Body,
+} from 'terra-html-table';
+
 import classNamesBind from 'classnames/bind';
-import ThemeContext from 'terra-theme-context';
 import styles from '../Examples.module.scss';
 
 const cx = classNamesBind.bind(styles);
@@ -77,27 +81,16 @@ const multipleResultBPValues = [
   },
 ];
 
-export default () => {
-  const theme = React.useContext(ThemeContext);
-  const mockFlowsheetClassnames = classNames(
-    cx(
-      'mock-flowsheet-example',
-      theme.className,
-    ),
-  );
-
-  return (
-    <div className={mockFlowsheetClassnames}>
-      <div className={cx('mock-flowsheet-resultcolumn')}>
-        <div className={cx('mock-flowsheet-resultcolumn-cell')}>
-          <FlowsheetResultCell resultDataSet={multipleResultBPValues} hideUnit />
-        </div>
-        <div className={cx(['mock-flowsheet-resultcolumn-cell', 'empty'])} />
-      </div>
-      <div className={cx('mock-flowsheet-resultcolumn')}>
-        <div className={cx(['mock-flowsheet-resultcolumn-cell', 'empty'])} />
-        <div className={cx(['mock-flowsheet-resultcolumn-cell', 'empty'])} />
-      </div>
-    </div>
-  );
-};
+export default () => (
+  <Table className={cx('mock-flowsheet-table')}>
+    <Header>
+      <ResultNameHeaderCell className={cx('mock-flowsheet-resultcolumn')} resultName="" />
+      <ResultNameHeaderCell className={cx('mock-flowsheet-resultcolumn')} resultName="" />
+    </Header>
+    <Body>
+      <Row>
+        <FlowsheetResultCell resultDataSet={multipleResultBPValues} hideUnit />
+      </Row>
+    </Body>
+  </Table>
+);