From 57925778cd659ed8e7bccdb06f11d83447e74a40 Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Mon, 30 Sep 2024 08:47:40 -0500
Subject: [PATCH] STCOM-1343 refactor away from `findDOMNode` (#2352)

* provide refs where able

* remove wrapping elements from RowMeasurer and CellMeasurer

* metasection header

* fix useImperativeHandle in meta-accordion

* resolve MCL tests, point at srh branch with fix...

* have accordion supply its own container for header/hotkey catching.

* switch from branch of stripes-react-hotkeys

* update yarn.lock to use updated stripes-react-hotkeys

* consistently use renderprops for CellMeasurer

* Update CHANGELOG.md
---
 CHANGELOG.md                                  |  4 ++
 lib/Accordion/Accordion.js                    | 11 ++--
 .../headers/DefaultAccordionHeader.js         |  8 +--
 .../headers/FilterAccordionHeader.js          | 10 +--
 .../AdvancedSearchModal.js                    |  6 +-
 lib/Commander/CommandList.js                  | 11 +++-
 lib/MetaSection/MetaAccordionHeader.js        | 19 +++---
 lib/MultiColumnList/CellMeasurer.js           | 25 +++++---
 lib/MultiColumnList/MCLRenderer.js            | 63 ++++++++++---------
 lib/MultiColumnList/RowMeasurer.js            | 45 ++++++++++---
 .../tests/MultiColumnList-test.js             |  2 +-
 package.json                                  |  2 +-
 yarn.lock                                     |  8 +--
 13 files changed, 135 insertions(+), 79 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 828e6cded..73454122b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,10 @@
 * Apply `inert` attribute to header and siblings of `div#OverlayContainer` when modals are open. Refs STCOM-1334.
 * Expand focus trapping of modal to the `div#OverlayContainer` so that overlay components can function within `<Modal>` using the `usePortal` prop. Refs STCOM-1334.
 * Render string for `FilterGroups` clear button. Refs STCOM-1337.
+* Refactored away from `findDOMNode` in codebase for React 19 preparation. Refs STCOM-1343.
+* AdvancedSearch - added a wrapping div to ref for a HotKeys ref. Refs STCOM-1343.
+* `<MultiColumnList>` components `<CellMeasurer>` and `<RowMeasurer>` updated to use refs vs `findDOMNode`. Refs STCOM-1343.
+* `<AccordionHeaders>` are wrapped with a div for use as a HotKeys ref. Refs STCOM-1343.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)
diff --git a/lib/Accordion/Accordion.js b/lib/Accordion/Accordion.js
index 33382fcf2..77c8c0cf7 100644
--- a/lib/Accordion/Accordion.js
+++ b/lib/Accordion/Accordion.js
@@ -26,7 +26,7 @@ const propTypes = {
   disabled: PropTypes.bool,
   displayWhenClosed: PropTypes.element, // eslint-disable-line react/no-unused-prop-types
   displayWhenOpen: PropTypes.element, // eslint-disable-line react/no-unused-prop-types
-  header: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]),
+  header: PropTypes.elementType,
   headerProps: PropTypes.object,
   id: PropTypes.string,
   label: PropTypes.oneOfType([ // eslint-disable-line react/no-unused-prop-types
@@ -120,7 +120,7 @@ const Accordion = (props) => {
   const contentId = useRef(contentIdProp || uniqueId('accordion')).current;
   const trackingId = useRef(id || uniqueId('acc')).current;
   const labelId = useRef(headerProps?.labelId || `accordion-toggle-button-${trackingId}`).current;
-
+  const headerRef = useRef(null);
 
   const getRef = useRef(() => toggle.current).current;
   const [isOpen, updateOpen] = useState(open || !closedByDefault);
@@ -139,7 +139,7 @@ const Accordion = (props) => {
     if (!focused) {
       updateFocused(true);
       updateZIndex((cur) => {
-        if(content.current.matches(':focus-within')) {
+        if (content.current.matches(':focus-within')) {
           // we assign one greater than the highest z-index value.
           const highest = getHighestStackOrder() + 1;
           if (cur !== highest) {
@@ -215,9 +215,12 @@ const Accordion = (props) => {
         id={`${trackingId}-hotkeys`}
         keyMap={toggleKeyMap}
         handlers={toggleKeyHandlers}
+        attach={headerRef.current}
         noWrapper
       >
-        {headerElement}
+        <div ref={headerRef} style={{ width: '100%', display: 'flex' }}>
+          {headerElement}
+        </div>
       </HotKeys>
       <div className={getWrapClass(isOpen)} style={{ zIndex }}>
         <div
diff --git a/lib/Accordion/headers/DefaultAccordionHeader.js b/lib/Accordion/headers/DefaultAccordionHeader.js
index 4743251de..80b8bb494 100644
--- a/lib/Accordion/headers/DefaultAccordionHeader.js
+++ b/lib/Accordion/headers/DefaultAccordionHeader.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {forwardRef} from 'react';
 import PropTypes from 'prop-types';
 import Headline from '../../Headline';
 import Icon from '../../Icon';
@@ -19,7 +19,7 @@ const propTypes = {
   toggleRef: PropTypes.func,
 };
 
-const DefaultAccordionHeader = ({ headerProps = { headingLevel: 3 }, ...rest }) => {
+const DefaultAccordionHeader = forwardRef(({ headerProps = { headingLevel: 3 }, ...rest }, ref) => {
   const props = { headerProps, ...rest };
   function handleHeaderClick(e) {
     const { id, label } = props;
@@ -52,7 +52,7 @@ const DefaultAccordionHeader = ({ headerProps = { headingLevel: 3 }, ...rest })
   }
 
   return (
-    <div className={css.headerWrapper}>
+    <div className={css.headerWrapper} ref={ref}>
       <div className={`${css.header} ${css.default}`}>
         <Headline size="medium" margin="none" tag={headingLevel ? `h${headingLevel}` : 'div'} block>
           <button
@@ -84,7 +84,7 @@ const DefaultAccordionHeader = ({ headerProps = { headingLevel: 3 }, ...rest })
       { headerRight }
     </div>
   );
-};
+});
 
 DefaultAccordionHeader.propTypes = propTypes;
 
diff --git a/lib/Accordion/headers/FilterAccordionHeader.js b/lib/Accordion/headers/FilterAccordionHeader.js
index 5acfd6950..41f53c4f2 100644
--- a/lib/Accordion/headers/FilterAccordionHeader.js
+++ b/lib/Accordion/headers/FilterAccordionHeader.js
@@ -1,4 +1,4 @@
-import { useCallback, useRef, useImperativeHandle } from 'react';
+import { useCallback, useRef, useImperativeHandle, forwardRef } from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -7,7 +7,7 @@ import Headline from '../../Headline';
 import IconButton from '../../IconButton';
 import css from '../Accordion.css';
 
-const FilterAccordionHeader = ({
+const FilterAccordionHeader = forwardRef(({
   autoFocus,
   contentId,
   disabled,
@@ -24,7 +24,7 @@ const FilterAccordionHeader = ({
   onToggle,
   open,
   toggleRef: toggleRefProp,
-}) => {
+}, ref) => {
   const { formatMessage } = useIntl();
   const toggleRef = useRef(null);
   useImperativeHandle(toggleRefProp, () => toggleRef.current);
@@ -56,7 +56,7 @@ const FilterAccordionHeader = ({
   );
 
   return (
-    <div className={css.headerWrapper}>
+    <div className={css.headerWrapper} ref={ref}>
       <Headline size="small" tag={`h${headingLevel}`} block={!clearButtonVisible}>
         <button
           type="button"
@@ -99,7 +99,7 @@ const FilterAccordionHeader = ({
       {open ? displayWhenOpen : displayWhenClosed}
     </div>
   );
-}
+});
 
 FilterAccordionHeader.propTypes = {
   autoFocus: PropTypes.bool,
diff --git a/lib/AdvancedSearch/components/AdvancedSearchModal/AdvancedSearchModal.js b/lib/AdvancedSearch/components/AdvancedSearchModal/AdvancedSearchModal.js
index be20cfa7d..bc462d5e6 100644
--- a/lib/AdvancedSearch/components/AdvancedSearchModal/AdvancedSearchModal.js
+++ b/lib/AdvancedSearch/components/AdvancedSearchModal/AdvancedSearchModal.js
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
@@ -23,6 +23,7 @@ const AdvancedSearchModal = ({
   onSearch,
   onCancel,
 }) => {
+  const shortcutsRef = useRef(null);
   const intl = useIntl();
   const modalTitle = intl.formatMessage({ id: 'stripes-components.advancedSearch.title' });
 
@@ -75,8 +76,11 @@ const AdvancedSearchModal = ({
       <HotKeys
         keyMap={hotKeys}
         handlers={handlers}
+        attach={shortcutsRef.current}
       >
+        <div ref={shortcutsRef}>
         {children}
+        </div>
       </HotKeys>
     </Modal>
   );
diff --git a/lib/Commander/CommandList.js b/lib/Commander/CommandList.js
index ba50e2a34..b03d05660 100644
--- a/lib/Commander/CommandList.js
+++ b/lib/Commander/CommandList.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
 import { HotKeys } from '../HotKeys';
 
@@ -16,6 +16,11 @@ class CommandList extends Component {
     id: PropTypes.string,
   };
 
+  constructor(props) {
+    super(props);
+    this.shortcutRef = createRef(null);
+  }
+
   generateHotKeysProps() {
     const {
       commands
@@ -43,8 +48,10 @@ class CommandList extends Component {
     } = this.props;
 
     return (
-      <HotKeys id={id} {...this.generateHotKeysProps()} noWrapper>
+      <HotKeys id={id} {...this.generateHotKeysProps()} attach={this.shortcutRef.current} noWrapper>
+        <div ref={this.shortcutRef}>
         {children}
+        </div>
       </HotKeys>
     );
   }
diff --git a/lib/MetaSection/MetaAccordionHeader.js b/lib/MetaSection/MetaAccordionHeader.js
index 169c598e6..a3e42ad1c 100644
--- a/lib/MetaSection/MetaAccordionHeader.js
+++ b/lib/MetaSection/MetaAccordionHeader.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import Icon from '../Icon';
@@ -16,11 +16,12 @@ const propTypes = {
   open: PropTypes.bool,
 };
 
-const MetaAccordionHeader = ({ headingLevel = 4, ...rest }) => {
+const MetaAccordionHeader = forwardRef(({ headingLevel = 4, ...rest }, ref) => {
   const props = { headingLevel, ...rest };
-  let toggleElem = null;
-  let labelElem = null;
-  let containerElem = null;
+  const toggleElem = useRef(null);
+  const labelElem = useRef(null);
+  const containerElem = useRef(null);
+  useImperativeHandle(ref, (elem) => { containerElem.current = elem });
 
   function handleHeaderClick(e) {
     const { id, label } = props;
@@ -41,7 +42,7 @@ const MetaAccordionHeader = ({ headingLevel = 4, ...rest }) => {
   const { label, open, displayWhenOpen, displayWhenClosed, contentId } = props;
 
   return (
-    <div className={css.headerWrapper} ref={(ref) => { containerElem = ref; }}>
+    <div className={css.headerWrapper} ref={containerElem}>
       <Headline className="sr-only" size="small" margin="none" tag={`h${props.headingLevel}`}>
         <FormattedMessage id="stripes-components.metaSection.screenReaderLabel" />
       </Headline>
@@ -53,11 +54,11 @@ const MetaAccordionHeader = ({ headingLevel = 4, ...rest }) => {
         onKeyPress={handleKeyPress}
         aria-controls={contentId}
         aria-expanded={open}
-        ref={(ref) => { toggleElem = ref; }}
+        ref={toggleElem}
       >
         <div className={css.metaHeader}>
           <Icon size="small" icon={props.open ? 'caret-up' : 'caret-down'} />
-          <div ref={(ref) => { labelElem = ref; }}>
+          <div ref={labelElem}>
             <div className={css.metaHeaderLabel}>{label}</div>
           </div>
         </div>
@@ -65,7 +66,7 @@ const MetaAccordionHeader = ({ headingLevel = 4, ...rest }) => {
       {open ? displayWhenOpen : displayWhenClosed}
     </div>
   );
-};
+});
 
 MetaAccordionHeader.propTypes = propTypes;
 
diff --git a/lib/MultiColumnList/CellMeasurer.js b/lib/MultiColumnList/CellMeasurer.js
index b4c4a4d87..153a73652 100644
--- a/lib/MultiColumnList/CellMeasurer.js
+++ b/lib/MultiColumnList/CellMeasurer.js
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
 
 class CellMeasurer extends React.Component {
   static propTypes = {
-    children: PropTypes.node,
+    children: PropTypes.func,
     columnName: PropTypes.string,
     onMeasure: PropTypes.func,
     rowIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -17,6 +17,11 @@ class CellMeasurer extends React.Component {
     onMeasure: noop
   }
 
+  constructor(props) {
+    super(props);
+    this.element = createRef(null);
+  }
+
   componentDidMount() {
     this.measureNode();
   }
@@ -25,14 +30,12 @@ class CellMeasurer extends React.Component {
     this.measureNode();
   }
 
-  element = React.createRef();
-
   measureNode = () => {
     const { widthCache, rowIndex, shouldMeasure, onMeasure, columnName } = this.props;
     if (shouldMeasure) {
-      const elem = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
-      if (elem && elem.offsetParent !== null) {
-        const width = elem.offsetWidth;
+      // const elem = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
+      if (this.element.current && this.element.current.offsetParent !== null) {
+        const width = this.element.current.offsetWidth;
         widthCache.set(rowIndex, width);
         if (onMeasure) onMeasure(rowIndex, columnName, width);
       }
@@ -40,7 +43,13 @@ class CellMeasurer extends React.Component {
   };
 
   render() {
-    return this.props.children;
+    const { children } = this.props;
+
+    if (typeof children === 'function') {
+      return children(this.element);
+    }
+
+    return null;
   }
 }
 
diff --git a/lib/MultiColumnList/MCLRenderer.js b/lib/MultiColumnList/MCLRenderer.js
index f1b29f773..f6b233e12 100644
--- a/lib/MultiColumnList/MCLRenderer.js
+++ b/lib/MultiColumnList/MCLRenderer.js
@@ -315,6 +315,7 @@ class MCLRenderer extends React.Component {
     this.endOfList = React.createRef();
     this.pageButton = React.createRef();
     this.status = React.createRef();
+    this.shortcutsRef = React.createRef();
 
     this.headerHeight = 0;
     this.paginationHeight = 40;
@@ -1142,19 +1143,13 @@ class MCLRenderer extends React.Component {
               measure={!staticBody && (columns.length <= Object.keys(columnWidths).length)}
               onMeasure={this.checkForMaxHeight}
               key={`row-measurer-${localRowIndex}-${this.keyId}`}
+              className={css.mclRowFormatterContainer}
+              onClick={onRowClick ? this.handleRowClick : undefined}
+              onFocus={(e) => this.handleRowFocus(e, localRowIndex + 2)}
+              onBlur={this.handleRowBlur}
+              positionedRowStyle={positionedRowStyle}
             >
-              <div // eslint-disable-line
-                data-row-index={`row-${localRowIndex}`}
-                className={css.mclRowFormatterContainer}
-                aria-rowindex={localRowIndex + 2}
-                onClick={onRowClick ? this.handleRowClick : undefined}
-                onFocus={(e) => this.handleRowFocus(e, localRowIndex + 2)}
-                onBlur={this.handleRowBlur}
-                style={positionedRowStyle}
-                role="row"
-              >
-                {rowFormatter(injectedRowProps)}
-              </div>
+              {rowFormatter(injectedRowProps)}
             </RowMeasurer>
           );
         }}
@@ -1476,14 +1471,17 @@ class MCLRenderer extends React.Component {
           onMeasure={this.maybeUpdateColumnWidths}
           key={`cell-${col}-row-${rowIndex}-${this.keyId}`}
         >
-          <div
-            role="gridcell"
-            key={`${col}-${rowIndex}-${this.keyId}`}
-            className={classnames(css.mclCell, showOverflow, cellStyleClass, stickyClasses)}
-            style={cellStyle}
-          >
-            {value}
-          </div>
+          {(elementRef) => (
+            <div
+              role="gridcell"
+              key={`${col}-${rowIndex}-${this.keyId}`}
+              className={classnames(css.mclCell, showOverflow, cellStyleClass, stickyClasses)}
+              style={cellStyle}
+              ref={elementRef}
+            >
+              {value}
+            </div>
+          )}
         </CellMeasurer>
       ));
     });
@@ -1688,15 +1686,18 @@ class MCLRenderer extends React.Component {
           columnName={header}
           shouldMeasure={shouldMeasure}
         >
-          <div
-            role="columnheader"
-            className={headerCellClass}
-            aria-sort={isSortHeader ? sortDirection : 'none'}
-            style={headerStyle}
-            id={columnId}
-          >
-            {headerInner}
-          </div>
+          {(elemRef) => (
+            <div
+              role="columnheader"
+              className={headerCellClass}
+              aria-sort={isSortHeader ? sortDirection : 'none'}
+              style={headerStyle}
+              id={columnId}
+              ref={elemRef}
+            >
+              {headerInner}
+            </div>
+          )}
         </CellMeasurer>
       );
     });
@@ -1929,8 +1930,8 @@ class MCLRenderer extends React.Component {
       : css.mclRowContainer;
 
     return (
-      <HotKeys handlers={this.handlers} noWrapper>
-        <div className={css.mclContainer} style={this.getOuterElementStyle()}>
+      <HotKeys handlers={this.handlers} attach={this.shortcutsRef} noWrapper>
+        <div className={css.mclContainer} ref={this.shortcutsRef} style={this.getOuterElementStyle()}>
           <SRStatus ref={this.status} />
           <div
             tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
diff --git a/lib/MultiColumnList/RowMeasurer.js b/lib/MultiColumnList/RowMeasurer.js
index d99f1d157..a9b0b7183 100644
--- a/lib/MultiColumnList/RowMeasurer.js
+++ b/lib/MultiColumnList/RowMeasurer.js
@@ -1,22 +1,30 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
 
 class RowMeasurer extends React.Component {
   static propTypes = {
     children: PropTypes.node,
+    className: PropTypes.string,
     heightCache: PropTypes.object,
     measure: PropTypes.bool,
+    onBlur: PropTypes.func,
+    onClick: PropTypes.func,
     onFocus: PropTypes.func,
     onMeasure: PropTypes.func,
+    positionedRowStyle: PropTypes.object,
     rowIndex: PropTypes.number,
-    staticPosition: PropTypes.bool,
+    staticPosition: PropTypes.bool
   }
 
   static defaultProps = {
     onMeasure: () => {}
   }
 
+  constructor(props) {
+    super(props);
+    this.element = createRef(null);
+  }
+
   componentDidMount() {
     if (!this.props.staticPosition) this.measureNode();
   }
@@ -42,11 +50,8 @@ class RowMeasurer extends React.Component {
     const { rowIndex, heightCache, measure, onMeasure } = this.props;
     if (measure) {
       if (!heightCache.request(rowIndex)) {
-        // findDOMNode is more dependable here than using refs.
-        const elem = findDOMNode(this); // eslint-disable-line
-        // container is visibly hidden. No measurement
-        if (elem.offsetParent === null) return;
-        const elemHeight = elem.offsetHeight;
+        if (this.element.current === null) return;
+        const elemHeight = this.element.current.offsetHeight;
         heightCache.set(rowIndex, elemHeight);
         onMeasure(elemHeight);
       }
@@ -54,7 +59,29 @@ class RowMeasurer extends React.Component {
   }
 
   render() {
-    return this.props.children;
+    const {
+      rowIndex,
+      onClick,
+      className,
+      onFocus,
+      onBlur,
+      positionedRowStyle
+    } = this.props;
+    return (
+      <div // eslint-disable-line
+        data-row-index={`row-${rowIndex}`}
+        className={className}
+        aria-rowindex={rowIndex + 2}
+        onClick={onClick}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        style={positionedRowStyle}
+        role="row"
+        ref={this.element}
+      >
+        {this.props.children}
+      </div>
+    );
   }
 }
 
diff --git a/lib/MultiColumnList/tests/MultiColumnList-test.js b/lib/MultiColumnList/tests/MultiColumnList-test.js
index e6954a898..498425ab2 100644
--- a/lib/MultiColumnList/tests/MultiColumnList-test.js
+++ b/lib/MultiColumnList/tests/MultiColumnList-test.js
@@ -27,7 +27,7 @@ import { generate, sparseGenerate } from './generate';
 
 const generator = () => (
   {
-    status: faker.random.boolean(),
+    status: faker.random.boolean() ? 'true' : 'false',
     id: faker.random.number(),
     orderer: faker.random.words(3),
     sender: faker.random.words(3),
diff --git a/package.json b/package.json
index 66de8ecc4..a7302604c 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,7 @@
   },
   "dependencies": {
     "@csstools/postcss-global-data": "^2.1.1",
-    "@folio/stripes-react-hotkeys": "^3.0.5",
+    "@folio/stripes-react-hotkeys": "^3.1.5",
     "classnames": "^2.2.5",
     "currency-codes": "^2.1.0",
     "dayjs": "^1.11.10",
diff --git a/yarn.lock b/yarn.lock
index 304a429cb..96bd38fd2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1933,10 +1933,10 @@
     webpack-bundle-analyzer "^4.4.2"
     yargs "^17.3.1"
 
-"@folio/stripes-react-hotkeys@^3.0.5":
-  version "3.0.100000034"
-  resolved "https://repository.folio.org/repository/npm-folioci/@folio/stripes-react-hotkeys/-/stripes-react-hotkeys-3.0.100000034.tgz#1cb28756933a83b45074d15f2e266ba90f07166b"
-  integrity sha512-1v/yHpe0GuuTpi6q1WLnbmG3sWI/ccxh/2ldAcU+xjDoKd4YdhfN/QKM/iug9xjoYmdfj3RyiTOwDo+E/P0hCA==
+"@folio/stripes-react-hotkeys@^3.1.5":
+  version "3.1.10990000000033"
+  resolved "https://repository.folio.org/repository/npm-folioci/@folio/stripes-react-hotkeys/-/stripes-react-hotkeys-3.1.10990000000033.tgz#ca5e58a89cf9dbd1d9b5c1b7e5daf9c635289dc0"
+  integrity sha512-IyMnHi0WJqdWQaNiNF/O+HtilF/OrIFdC58Ru539SnTFgfE1kMODmCAKKStfNravjGpazZrF7puJTSCP/X5sig==
   dependencies:
     core-js "^3.0.0"
     keyboardjs "~2.5.1"