From eb81408577f2a7de06b3d8482286fc197d623fea Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Fri, 12 Mar 2021 14:38:08 -0600
Subject: [PATCH 1/4] fix(StructuredList): refactor es6 class components

---
 .../StructuredList/StructuredList.js          | 583 +++++++++---------
 1 file changed, 286 insertions(+), 297 deletions(-)

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index d303b4373851..4c4039f5388e 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
@@ -14,312 +14,301 @@ import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
 
-export class StructuredListWrapper extends Component {
-  static propTypes = {
-    /**
-     * Specify a label to be read by screen readers on the container node
-     */
-    ariaLabel: PropTypes.string,
-
-    /**
-     * Specify whether a border should be added to your StructuredListWrapper
-     */
-    border: deprecate(
-      PropTypes.bool,
-      `\nThe prop \`border\` will be removed in the next major version of Carbon.`
-    ),
-
-    /**
-     * Provide the contents of your StructuredListWrapper
-     */
-    children: PropTypes.node,
-
-    /**
-     * Specify an optional className to be applied to the container node
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify whether your StructuredListWrapper should have selections
-     */
-    selection: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    selection: false,
-    ariaLabel: 'Structured list section',
-  };
-
-  render() {
-    const {
-      children,
-      selection,
-      className,
-      ariaLabel,
-      border: _border,
-      ...other
-    } = this.props;
-
-    const classes = classNames(`${prefix}--structured-list`, className, {
-      [`${prefix}--structured-list--selection`]: selection,
-    });
-
-    return (
-      <div className={classes} {...other} aria-label={ariaLabel}>
-        {children}
-      </div>
-    );
-  }
+export function StructuredListWrapper(props) {
+  const {
+    children,
+    selection,
+    className,
+    ariaLabel,
+    border: _border,
+    ...other
+  } = props;
+  const classes = classNames(`${prefix}--structured-list`, className, {
+    [`${prefix}--structured-list--selection`]: selection,
+  });
+
+  return (
+    <div className={classes} {...other} aria-label={ariaLabel}>
+      {children}
+    </div>
+  );
 }
 
-export class StructuredListHead extends Component {
-  static propTypes = {
-    /**
-     * Provide the contents of your StructuredListHead
-     */
-    children: PropTypes.node,
-
-    /**
-     * Specify an optional className to be applied to the node
-     */
-    className: PropTypes.string,
-  };
-
-  render() {
-    const { children, className, ...other } = this.props;
-
-    const classes = classNames(`${prefix}--structured-list-thead`, className);
-    return (
-      <div className={classes} {...other}>
-        {children}
-      </div>
-    );
-  }
+StructuredListWrapper.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   */
+  ariaLabel: PropTypes.string,
+
+  /**
+   * Specify whether a border should be added to your StructuredListWrapper
+   */
+  border: deprecate(
+    PropTypes.bool,
+    `\nThe prop \`border\` will be removed in the next major version of Carbon.`
+  ),
+
+  /**
+   * Provide the contents of your StructuredListWrapper
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether your StructuredListWrapper should have selections
+   */
+  selection: PropTypes.bool,
+};
+
+StructuredListWrapper.defaultProps = {
+  selection: false,
+  ariaLabel: 'Structured list section',
+};
+
+export function StructuredListHead(props) {
+  const { children, className, ...other } = props;
+  const classes = classNames(`${prefix}--structured-list-thead`, className);
+
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
 }
 
+StructuredListHead.propTypes = {
+  /**
+   * Provide the contents of your StructuredListHead
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the node
+   */
+  className: PropTypes.string,
+};
+
 const getInstanceId = setupGetInstanceId();
 
-export class StructuredListInput extends Component {
-  static propTypes = {
-    /**
-     * Specify an optional className to be applied to the input
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify whether the underlying input should be checked by default
-     */
-    defaultChecked: PropTypes.bool,
-
-    /**
-     * Specify a custom `id` for the input
-     */
-    id: PropTypes.string,
-
-    /**
-     * Provide a `name` for the input
-     */
-    name: PropTypes.string,
-
-    /**
-     * Provide an optional hook that is called each time the input is updated
-     */
-    onChange: PropTypes.func,
-
-    /**
-     * Provide a `title` for the input
-     */
-    title: PropTypes.string,
-
-    /**
-     * Specify the value of the input
-     */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  };
-
-  static defaultProps = {
-    onChange: () => {},
-    value: 'value',
-    title: 'title',
-  };
-
-  constructor(props) {
-    super(props);
-    this.uid = this.props.id || getInstanceId();
-  }
-
-  render() {
-    const { className, value, name, title, ...other } = this.props;
-    const classes = classNames(`${prefix}--structured-list-input`, className);
-    return (
-      <input
-        {...other}
-        type="radio"
-        tabIndex={-1}
-        id={this.uid}
-        className={classes}
-        value={value}
-        name={name}
-        title={title}
-      />
-    );
-  }
+export function StructuredListBody(props) {
+  const { children, className, ...other } = props;
+  const classes = classNames(`${prefix}--structured-list-tbody`, className);
+  const { labelRows, setLabelRows } = useState(null);
+  const { rowSelected, setRowSelected } = useState(0);
+
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
 }
 
-export class StructuredListRow extends Component {
-  static propTypes = {
-    /**
-     * Provide the contents of your StructuredListRow
-     */
-    children: PropTypes.node,
-
-    /**
-     * Specify an optional className to be applied to the container node
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify whether your StructuredListRow should be used as a header row
-     */
-    head: PropTypes.bool,
-
-    /**
-     * Specify whether a `<label>` should be used
-     */
-    label: PropTypes.bool,
-
-    /**
-     * Provide a handler that is invoked on the key down event for the control,
-     * if `<label>` is in use
-     */
-    onKeyDown: PropTypes.func,
-
-    /**
-     * Specify the tab index of the container node, if `<label>` is in use
-     */
-    tabIndex: PropTypes.number,
-  };
-
-  static defaultProps = {
-    head: false,
-    label: false,
-    tabIndex: 0,
-    onKeyDown: () => {},
-  };
-
-  render() {
-    const {
-      onKeyDown,
-      tabIndex,
-      children,
-      className,
-      head,
-      label,
-      ...other
-    } = this.props;
-
-    const classes = classNames(`${prefix}--structured-list-row`, className, {
-      [`${prefix}--structured-list-row--header-row`]: head,
-    });
-
-    return label ? (
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      <label
-        {...other}
-        tabIndex={tabIndex}
-        className={classes}
-        onKeyDown={onKeyDown}>
-        {children}
-      </label>
-    ) : (
-      <div {...other} className={classes}>
-        {children}
-      </div>
-    );
-  }
+StructuredListBody.propTypes = {
+  /**
+   * Provide the contents of your StructuredListBody
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  head: PropTypes.bool,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control
+   */
+  onKeyDown: PropTypes.func,
+};
+
+StructuredListBody.defaultProps = {
+  onKeyDown: () => {},
+};
+
+export function StructuredListRow(props) {
+  const {
+    onKeyDown,
+    tabIndex,
+    children,
+    className,
+    head,
+    label,
+    ...other
+  } = props;
+  const classes = classNames(`${prefix}--structured-list-row`, className, {
+    [`${prefix}--structured-list-row--header-row`]: head,
+  });
+
+  return label ? (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    <label
+      {...other}
+      tabIndex={tabIndex}
+      className={classes}
+      onKeyDown={onKeyDown}>
+      {children}
+    </label>
+  ) : (
+    <div {...other} className={classes}>
+      {children}
+    </div>
+  );
 }
 
-export class StructuredListBody extends Component {
-  static propTypes = {
-    /**
-     * Provide the contents of your StructuredListBody
-     */
-    children: PropTypes.node,
-
-    /**
-     * Specify an optional className to be applied to the container node
-     */
-    className: PropTypes.string,
-
-    head: PropTypes.bool,
-
-    /**
-     * Provide a handler that is invoked on the key down event for the control
-     */
-    onKeyDown: PropTypes.func,
-  };
-
-  static defaultProps = {
-    onKeyDown: () => {},
-  };
-
-  state = {
-    labelRows: null,
-    rowSelected: 0,
-  };
-
-  render() {
-    const { children, className, ...other } = this.props;
-    const classes = classNames(`${prefix}--structured-list-tbody`, className);
-    return (
-      <div className={classes} {...other}>
-        {children}
-      </div>
-    );
-  }
+StructuredListRow.propTypes = {
+  /**
+   * Provide the contents of your StructuredListRow
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether your StructuredListRow should be used as a header row
+   */
+  head: PropTypes.bool,
+
+  /**
+   * Specify whether a `<label>` should be used
+   */
+  label: PropTypes.bool,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control,
+   * if `<label>` is in use
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Specify the tab index of the container node, if `<label>` is in use
+   */
+  tabIndex: PropTypes.number,
+};
+
+StructuredListRow.defaultProps = {
+  head: false,
+  label: false,
+  tabIndex: 0,
+  onKeyDown: () => {},
+};
+
+export function StructuredListInput(props) {
+  const { className, value, name, title, ...other } = props;
+  const uid = props.id || getInstanceId();
+  const classes = classNames(`${prefix}--structured-list-input`, className);
+
+  return (
+    <input
+      {...other}
+      type="radio"
+      tabIndex={-1}
+      id={uid}
+      className={classes}
+      value={value}
+      name={name}
+      title={title}
+    />
+  );
 }
 
-export class StructuredListCell extends Component {
-  static propTypes = {
-    /**
-     * Provide the contents of your StructuredListCell
-     */
-    children: PropTypes.node,
-
-    /**
-     * Specify an optional className to be applied to the container node
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify whether your StructuredListCell should be used as a header cell
-     */
-    head: PropTypes.bool,
-
-    /**
-     * Specify whether your StructuredListCell should have text wrapping
-     */
-    noWrap: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    head: false,
-    noWrap: false,
-  };
-
-  render() {
-    const { children, className, head, noWrap, ...other } = this.props;
-
-    const classes = classNames(className, {
-      [`${prefix}--structured-list-th`]: head,
-      [`${prefix}--structured-list-td`]: !head,
-      [`${prefix}--structured-list-content--nowrap`]: noWrap,
-    });
-
-    return (
-      <div className={classes} {...other}>
-        {children}
-      </div>
-    );
-  }
+StructuredListInput.propTypes = {
+  /**
+   * Specify an optional className to be applied to the input
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the underlying input should be checked by default
+   */
+  defaultChecked: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string,
+
+  /**
+   * Provide a `name` for the input
+   */
+  name: PropTypes.string,
+
+  /**
+   * Provide an optional hook that is called each time the input is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide a `title` for the input
+   */
+  title: PropTypes.string,
+
+  /**
+   * Specify the value of the input
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+StructuredListInput.defaultProps = {
+  onChange: () => {},
+  value: 'value',
+  title: 'title',
+};
+
+export function StructuredListCell(props) {
+  const { children, className, head, noWrap, ...other } = props;
+  const classes = classNames(className, {
+    [`${prefix}--structured-list-th`]: head,
+    [`${prefix}--structured-list-td`]: !head,
+    [`${prefix}--structured-list-content--nowrap`]: noWrap,
+  });
+
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
 }
+
+StructuredListCell.propTypes = {
+  /**
+   * Provide the contents of your StructuredListCell
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether your StructuredListCell should be used as a header cell
+   */
+  head: PropTypes.bool,
+
+  /**
+   * Specify whether your StructuredListCell should have text wrapping
+   */
+  noWrap: PropTypes.bool,
+};
+
+StructuredListCell.defaultProps = {
+  head: false,
+  noWrap: false,
+};
+
+export default {
+  StructuredListWrapper,
+  StructuredListHead,
+  StructuredListBody,
+  StructuredListRow,
+  StructuredListInput,
+  StructuredListCell,
+};

From 70eba6eeffa8326993e3392e434001130f1a25d5 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Fri, 12 Mar 2021 18:08:18 -0600
Subject: [PATCH 2/4] fix(StructuredList): add aria table roles

---
 .../StructuredList/StructuredList.js          | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index 4c4039f5388e..1f91f353e177 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
@@ -13,6 +13,7 @@ import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
+const getInstanceId = setupGetInstanceId();
 
 export function StructuredListWrapper(props) {
   const {
@@ -28,7 +29,7 @@ export function StructuredListWrapper(props) {
   });
 
   return (
-    <div className={classes} {...other} aria-label={ariaLabel}>
+    <div role="table" className={classes} {...other} aria-label={ariaLabel}>
       {children}
     </div>
   );
@@ -74,7 +75,7 @@ export function StructuredListHead(props) {
   const classes = classNames(`${prefix}--structured-list-thead`, className);
 
   return (
-    <div className={classes} {...other}>
+    <div role="rowgroup" className={classes} {...other}>
       {children}
     </div>
   );
@@ -92,8 +93,6 @@ StructuredListHead.propTypes = {
   className: PropTypes.string,
 };
 
-const getInstanceId = setupGetInstanceId();
-
 export function StructuredListBody(props) {
   const { children, className, ...other } = props;
   const classes = classNames(`${prefix}--structured-list-tbody`, className);
@@ -101,7 +100,7 @@ export function StructuredListBody(props) {
   const { rowSelected, setRowSelected } = useState(0);
 
   return (
-    <div className={classes} {...other}>
+    <div className={classes} role="rowgroup" {...other}>
       {children}
     </div>
   );
@@ -201,16 +200,16 @@ StructuredListRow.defaultProps = {
 };
 
 export function StructuredListInput(props) {
-  const { className, value, name, title, ...other } = props;
-  const uid = props.id || getInstanceId();
+  const { className, value, name, title, id, ...other } = props;
   const classes = classNames(`${prefix}--structured-list-input`, className);
+  const instanceId = id || getInstanceId();
 
   return (
     <input
       {...other}
       type="radio"
       tabIndex={-1}
-      id={uid}
+      id={instanceId}
       className={classes}
       value={value}
       name={name}
@@ -271,7 +270,7 @@ export function StructuredListCell(props) {
   });
 
   return (
-    <div className={classes} {...other}>
+    <div className={classes} role={head ? 'columnheader' : 'cell'} {...other}>
       {children}
     </div>
   );

From 53038aba7831eebc46f93f224f615fd3a0876143 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Mon, 15 Mar 2021 15:24:31 -0500
Subject: [PATCH 3/4] fix(StructuredList): remove unused setLabel and
 rowSelection state

---
 .../react/src/components/StructuredList/StructuredList.js     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index 1f91f353e177..ac665c0e376a 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
@@ -96,8 +96,6 @@ StructuredListHead.propTypes = {
 export function StructuredListBody(props) {
   const { children, className, ...other } = props;
   const classes = classNames(`${prefix}--structured-list-tbody`, className);
-  const { labelRows, setLabelRows } = useState(null);
-  const { rowSelected, setRowSelected } = useState(0);
 
   return (
     <div className={classes} role="rowgroup" {...other}>

From 7a4c797a97dc384e2c48d552716e6d488aa1562c Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Tue, 16 Mar 2021 14:27:12 -0500
Subject: [PATCH 4/4] test(StructuredList): update test checking for class
 instance

---
 .../react/src/components/StructuredList/StructuredList-test.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/StructuredList/StructuredList-test.js b/packages/react/src/components/StructuredList/StructuredList-test.js
index 7e01b3779875..11f96fdb52cb 100644
--- a/packages/react/src/components/StructuredList/StructuredList-test.js
+++ b/packages/react/src/components/StructuredList/StructuredList-test.js
@@ -95,7 +95,7 @@ describe('StructuredListInput', () => {
     it('Should render unique id with multiple inputs when no id prop is given', () => {
       const wrapper1 = mount(<StructuredListInput className="extra-class" />);
       const wrapper2 = mount(<StructuredListInput className="extra-class" />);
-      expect(wrapper1.instance().uid).not.toEqual(wrapper2.instance().uid);
+      expect(wrapper1.find('[id]')).not.toEqual(wrapper2.find('[id]'));
     });
   });
 });