From 6954ba06378156b5aacf4ff6e9c65cc177a3b003 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Thu, 18 Mar 2021 13:29:38 -0500
Subject: [PATCH 01/18] fix(StructuredList): refactor instanceId

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

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index ac665c0e376a..f2951c4524bb 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -9,11 +9,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { useId } from '../../internal/useId';
 import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
-const getInstanceId = setupGetInstanceId();
 
 export function StructuredListWrapper(props) {
   const {
@@ -193,21 +192,27 @@ StructuredListRow.propTypes = {
 StructuredListRow.defaultProps = {
   head: false,
   label: false,
-  tabIndex: 0,
   onKeyDown: () => {},
 };
 
 export function StructuredListInput(props) {
-  const { className, value, name, title, id, ...other } = props;
   const classes = classNames(`${prefix}--structured-list-input`, className);
-  const instanceId = id || getInstanceId();
+  const defaultId = useId('structureListInput');
+  const {
+    className,
+    value,
+    name = `structuredListInput-${defaultId}`,
+    title,
+    id,
+    ...other
+  } = props;
 
   return (
     <input
       {...other}
       type="radio"
-      tabIndex={-1}
-      id={instanceId}
+      tabIndex={0}
+      id={id || defaultId}
       className={classes}
       value={value}
       name={name}

From cb09d2038dbe377eaf81897f977bc1b72d0987f6 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Tue, 23 Mar 2021 14:42:11 -0500
Subject: [PATCH 02/18] fix(StructuredList): convert to radio interaction, add
 focus state

---
 .../structured-list/_structured-list.scss     |  8 ++-----
 .../StructuredList/StructuredList.js          | 21 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/components/structured-list/_structured-list.scss b/packages/components/src/components/structured-list/_structured-list.scss
index d809a858c695..2df36b73405f 100644
--- a/packages/components/src/components/structured-list/_structured-list.scss
+++ b/packages/components/src/components/structured-list/_structured-list.scss
@@ -18,8 +18,8 @@
     @include padding--data-structured-list;
   }
 
-  .#{$prefix}--structured-list-input {
-    display: none;
+  .#{$prefix}--structured-list-row--focused-within {
+    @include focus-outline('outline');
   }
 
   .#{$prefix}--structured-list {
@@ -62,10 +62,6 @@
     cursor: inherit;
   }
 
-  .#{$prefix}--structured-list-row:focus:not(.#{$prefix}--structured-list-row--header-row) {
-    @include focus-outline('outline');
-  }
-
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
     > .#{$prefix}--structured-list-td,
diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index f2951c4524bb..32eaa1632142 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 from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
@@ -126,6 +126,11 @@ StructuredListBody.defaultProps = {
   onKeyDown: () => {},
 };
 
+function useFocusWithin() {
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
+  return [hasFocusWithin, setHasFocusWithin];
+}
+
 export function StructuredListRow(props) {
   const {
     onKeyDown,
@@ -136,8 +141,10 @@ export function StructuredListRow(props) {
     label,
     ...other
   } = props;
+  const [hasFocusWithin, setHasFocusWithin] = useFocusWithin();
   const classes = classNames(`${prefix}--structured-list-row`, className, {
     [`${prefix}--structured-list-row--header-row`]: head,
+    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
   });
 
   return label ? (
@@ -146,6 +153,14 @@ export function StructuredListRow(props) {
       {...other}
       tabIndex={tabIndex}
       className={classes}
+      onFocus={() => {
+        setHasFocusWithin(true);
+      }}
+      onBlur={() => {
+        // potential special case where when focus is moved this row is not blurred
+        // multiple interactable per row?
+        setHasFocusWithin(false);
+      }}
       onKeyDown={onKeyDown}>
       {children}
     </label>
@@ -192,9 +207,13 @@ StructuredListRow.propTypes = {
 StructuredListRow.defaultProps = {
   head: false,
   label: false,
+  // tabIndex: 0,
   onKeyDown: () => {},
 };
 
+// when the input gets focus it should add the data- attribute to the parent row
+// on blur it should be removed
+// that can be targeted
 export function StructuredListInput(props) {
   const classes = classNames(`${prefix}--structured-list-input`, className);
   const defaultId = useId('structureListInput');

From 1f46ed54fb506d9d1d32cd89878f2e7b2d9e3808 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Tue, 23 Mar 2021 15:23:11 -0500
Subject: [PATCH 03/18] fix(StructuredList): hide radio input

---
 .../src/components/StructuredList/StructuredList.js    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index 32eaa1632142..bf5bf77e9b7b 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -207,15 +207,15 @@ StructuredListRow.propTypes = {
 StructuredListRow.defaultProps = {
   head: false,
   label: false,
-  // tabIndex: 0,
   onKeyDown: () => {},
 };
 
-// when the input gets focus it should add the data- attribute to the parent row
-// on blur it should be removed
-// that can be targeted
 export function StructuredListInput(props) {
-  const classes = classNames(`${prefix}--structured-list-input`, className);
+  const classes = classNames(
+    `${prefix}--structured-list-input`,
+    `${prefix}--visually-hidden`,
+    className
+  );
   const defaultId = useId('structureListInput');
   const {
     className,

From f655b31863b71228a0541b61b06da8fd7a33e58f Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Tue, 23 Mar 2021 17:56:20 -0500
Subject: [PATCH 04/18] fix(StructuredList): remove label and tabIndex props on
 input

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

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index bf5bf77e9b7b..63e859db9449 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -28,7 +28,7 @@ export function StructuredListWrapper(props) {
   });
 
   return (
-    <div role="table" className={classes} {...other} aria-label={ariaLabel}>
+    <div role="grid" className={classes} {...other} aria-label={ariaLabel}>
       {children}
     </div>
   );
@@ -132,41 +132,32 @@ function useFocusWithin() {
 }
 
 export function StructuredListRow(props) {
-  const {
-    onKeyDown,
-    tabIndex,
-    children,
-    className,
-    head,
-    label,
-    ...other
-  } = props;
+  const { onKeyDown, children, className, head, ...other } = props;
   const [hasFocusWithin, setHasFocusWithin] = useFocusWithin();
   const classes = classNames(`${prefix}--structured-list-row`, className, {
     [`${prefix}--structured-list-row--header-row`]: head,
     [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
   });
 
-  return label ? (
+  return head ? (
+    <div tabIndex={-1} role="row" {...other} className={classes}>
+      {children}
+    </div>
+  ) : (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <label
+    <div
       {...other}
-      tabIndex={tabIndex}
+      role="row"
+      tabIndex={-1}
       className={classes}
       onFocus={() => {
         setHasFocusWithin(true);
       }}
       onBlur={() => {
-        // potential special case where when focus is moved this row is not blurred
-        // multiple interactable per row?
         setHasFocusWithin(false);
       }}
       onKeyDown={onKeyDown}>
       {children}
-    </label>
-  ) : (
-    <div {...other} className={classes}>
-      {children}
     </div>
   );
 }
@@ -187,26 +178,14 @@ StructuredListRow.propTypes = {
    */
   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,
   onKeyDown: () => {},
 };
 

From 156cbc1289c49d12bd1c5b02ae22ba97cf68c38f Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Tue, 23 Mar 2021 18:09:35 -0500
Subject: [PATCH 05/18] test(StructuredList): update tests, remove label tests

---
 .../__tests__/__snapshots__/PublicAPI-test.js.snap     |  8 --------
 .../components/StructuredList/StructuredList-test.js   | 10 ----------
 .../src/components/StructuredList/StructuredList.js    | 10 +++++-----
 3 files changed, 5 insertions(+), 23 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 352849cc0e14..58e90ac1dcd7 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4970,9 +4970,7 @@ Map {
   "StructuredListRow" => Object {
     "defaultProps": Object {
       "head": false,
-      "label": false,
       "onKeyDown": [Function],
-      "tabIndex": 0,
     },
     "propTypes": Object {
       "children": Object {
@@ -4984,15 +4982,9 @@ Map {
       "head": Object {
         "type": "bool",
       },
-      "label": Object {
-        "type": "bool",
-      },
       "onKeyDown": Object {
         "type": "func",
       },
-      "tabIndex": Object {
-        "type": "number",
-      },
     },
   },
   "StructuredListInput" => Object {
diff --git a/packages/react/src/components/StructuredList/StructuredList-test.js b/packages/react/src/components/StructuredList/StructuredList-test.js
index 11f96fdb52cb..37d86f995fb3 100644
--- a/packages/react/src/components/StructuredList/StructuredList-test.js
+++ b/packages/react/src/components/StructuredList/StructuredList-test.js
@@ -120,16 +120,6 @@ describe('StructuredListRow', () => {
       ).toEqual(true);
     });
 
-    it('should use <div> HTML by default (or when label prop is false)', () => {
-      const wrapperLabel = shallow(<StructuredListRow />);
-      expect(wrapperLabel.getElement().type).toEqual('div');
-    });
-
-    it('should use <label> HTML when label prop is true', () => {
-      const wrapperLabel = shallow(<StructuredListRow label />);
-      expect(wrapperLabel.getElement().type).toEqual('label');
-    });
-
     it('Should accept other props from ...other', () => {
       const wrapperProps = shallow(
         <StructuredListRow title="title">hi</StructuredListRow>
diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index 63e859db9449..9c85bd6fb3c1 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -190,11 +190,6 @@ StructuredListRow.defaultProps = {
 };
 
 export function StructuredListInput(props) {
-  const classes = classNames(
-    `${prefix}--structured-list-input`,
-    `${prefix}--visually-hidden`,
-    className
-  );
   const defaultId = useId('structureListInput');
   const {
     className,
@@ -204,6 +199,11 @@ export function StructuredListInput(props) {
     id,
     ...other
   } = props;
+  const classes = classNames(
+    `${prefix}--structured-list-input`,
+    `${prefix}--visually-hidden`,
+    className
+  );
 
   return (
     <input

From bd86cea77a7070afb5942a415d8524d712349f89 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Wed, 24 Mar 2021 17:06:43 -0500
Subject: [PATCH 06/18] fix(StructuredList): style changes, add deprecation
 warning

---
 .../__snapshots__/PublicAPI-test.js.snap      |  1 +
 .../StructuredList/StructuredList.js          | 31 ++++++++++++-------
 packages/react/src/internal/useFocusWithin.js |  8 +++++
 3 files changed, 28 insertions(+), 12 deletions(-)
 create mode 100644 packages/react/src/internal/useFocusWithin.js

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 58e90ac1dcd7..1813bafd4371 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4982,6 +4982,7 @@ Map {
       "head": Object {
         "type": "bool",
       },
+      "label": [Function],
       "onKeyDown": Object {
         "type": "func",
       },
diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index 9c85bd6fb3c1..88adc1a4fd9f 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -5,10 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
+import { useFocusWithin } from '../../internal/useFocusWithin';
 import { useId } from '../../internal/useId';
 import deprecate from '../../prop-types/deprecate';
 
@@ -126,11 +127,6 @@ StructuredListBody.defaultProps = {
   onKeyDown: () => {},
 };
 
-function useFocusWithin() {
-  const [hasFocusWithin, setHasFocusWithin] = useState(false);
-  return [hasFocusWithin, setHasFocusWithin];
-}
-
 export function StructuredListRow(props) {
   const { onKeyDown, children, className, head, ...other } = props;
   const [hasFocusWithin, setHasFocusWithin] = useFocusWithin();
@@ -140,15 +136,14 @@ export function StructuredListRow(props) {
   });
 
   return head ? (
-    <div tabIndex={-1} role="row" {...other} className={classes}>
+    <div role="row" {...other} className={classes}>
       {children}
     </div>
   ) : (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     <div
       {...other}
       role="row"
-      tabIndex={-1}
       className={classes}
       onFocus={() => {
         setHasFocusWithin(true);
@@ -178,6 +173,14 @@ StructuredListRow.propTypes = {
    */
   head: PropTypes.bool,
 
+  /**
+   * Specify whether a `<label>` should be used
+   */
+  label: deprecate(
+    PropTypes.bool,
+    `\nThe prop \`label\` will be removed in the next major version of Carbon.`
+  ),
+
   /**
    * Provide a handler that is invoked on the key down event for the control,
    */
@@ -194,7 +197,7 @@ export function StructuredListInput(props) {
   const {
     className,
     value,
-    name = `structuredListInput-${defaultId}`,
+    name = `structured-list-input-${defaultId}`,
     title,
     id,
     ...other
@@ -270,8 +273,12 @@ export function StructuredListCell(props) {
     [`${prefix}--structured-list-content--nowrap`]: noWrap,
   });
 
-  return (
-    <div className={classes} role={head ? 'columnheader' : 'cell'} {...other}>
+  return head ? (
+    <span className={classes} role="columnheader" {...other}>
+      {children}
+    </span>
+  ) : (
+    <div className={classes} role="cell" {...other}>
       {children}
     </div>
   );
diff --git a/packages/react/src/internal/useFocusWithin.js b/packages/react/src/internal/useFocusWithin.js
new file mode 100644
index 000000000000..3f1d6a257a8f
--- /dev/null
+++ b/packages/react/src/internal/useFocusWithin.js
@@ -0,0 +1,8 @@
+import { useState } from 'react';
+
+function useFocusWithin() {
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
+  return [hasFocusWithin, setHasFocusWithin];
+}
+
+export default useFocusWithin;

From 909726ae33aa9fe5caab903ffcb99fe65ce9056d Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Thu, 25 Mar 2021 04:38:53 -0500
Subject: [PATCH 07/18] fix(StructuredList): add context for row click handler

---
 .../StructuredList/StructuredList.js          | 52 ++++++++++++++-----
 packages/react/src/internal/useFocusWithin.js |  4 +-
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index 88adc1a4fd9f..65cb6450f790 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -14,6 +14,8 @@ import { useId } from '../../internal/useId';
 import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
+const GridSelectedRowStateContext = React.createContext(null);
+const GridSelectedRowDispatchContext = React.createContext(null);
 
 export function StructuredListWrapper(props) {
   const {
@@ -27,11 +29,16 @@ export function StructuredListWrapper(props) {
   const classes = classNames(`${prefix}--structured-list`, className, {
     [`${prefix}--structured-list--selection`]: selection,
   });
+  const [selectedRow, setSelectedRow] = React.useState(null);
 
   return (
-    <div role="grid" className={classes} {...other} aria-label={ariaLabel}>
-      {children}
-    </div>
+    <GridSelectedRowStateContext.Provider value={selectedRow}>
+      <GridSelectedRowDispatchContext.Provider value={setSelectedRow}>
+        <div role="grid" className={classes} {...other} aria-label={ariaLabel}>
+          {children}
+        </div>
+      </GridSelectedRowDispatchContext.Provider>
+    </GridSelectedRowStateContext.Provider>
   );
 }
 
@@ -127,9 +134,14 @@ StructuredListBody.defaultProps = {
   onKeyDown: () => {},
 };
 
+const GridRowContext = React.createContext(null);
+
 export function StructuredListRow(props) {
   const { onKeyDown, children, className, head, ...other } = props;
   const [hasFocusWithin, setHasFocusWithin] = useFocusWithin();
+  const id = useId('grid-input');
+  const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
+  const value = { id };
   const classes = classNames(`${prefix}--structured-list-row`, className, {
     [`${prefix}--structured-list-row--header-row`]: head,
     [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
@@ -145,6 +157,7 @@ export function StructuredListRow(props) {
       {...other}
       role="row"
       className={classes}
+      onClick={() => setSelectedRow(id)}
       onFocus={() => {
         setHasFocusWithin(true);
       }}
@@ -152,7 +165,9 @@ export function StructuredListRow(props) {
         setHasFocusWithin(false);
       }}
       onKeyDown={onKeyDown}>
-      {children}
+      <GridRowContext.Provider value={value}>
+        {children}
+      </GridRowContext.Provider>
     </div>
   );
 }
@@ -196,7 +211,6 @@ export function StructuredListInput(props) {
   const defaultId = useId('structureListInput');
   const {
     className,
-    value,
     name = `structured-list-input-${defaultId}`,
     title,
     id,
@@ -207,15 +221,22 @@ export function StructuredListInput(props) {
     `${prefix}--visually-hidden`,
     className
   );
+  const row = React.useContext(GridRowContext);
+  const selectedRow = React.useContext(GridSelectedRowStateContext);
+  const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
 
   return (
     <input
       {...other}
       type="radio"
       tabIndex={0}
-      id={id || defaultId}
+      checked={row.id === selectedRow}
+      value={row.id}
+      onChange={(event) => {
+        setSelectedRow(event.target.value);
+      }}
+      id={id}
       className={classes}
-      value={value}
       name={name}
       title={title}
     />
@@ -231,7 +252,10 @@ StructuredListInput.propTypes = {
   /**
    * Specify whether the underlying input should be checked by default
    */
-  defaultChecked: PropTypes.bool,
+  defaultChecked: deprecate(
+    PropTypes.bool,
+    `\nThe prop \`defaultChecked\` will be removed in the next major version of Carbon.`
+  ),
 
   /**
    * Specify a custom `id` for the input
@@ -246,7 +270,10 @@ StructuredListInput.propTypes = {
   /**
    * Provide an optional hook that is called each time the input is updated
    */
-  onChange: PropTypes.func,
+  onChange: deprecate(
+    PropTypes.func,
+    `\nThe prop \`onChange\` will be removed in the next major version of Carbon.`
+  ),
 
   /**
    * Provide a `title` for the input
@@ -256,12 +283,13 @@ StructuredListInput.propTypes = {
   /**
    * Specify the value of the input
    */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  value: deprecate(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    `\nThe prop \`value\` will be removed in the next major version of Carbon.`
+  ),
 };
 
 StructuredListInput.defaultProps = {
-  onChange: () => {},
-  value: 'value',
   title: 'title',
 };
 
diff --git a/packages/react/src/internal/useFocusWithin.js b/packages/react/src/internal/useFocusWithin.js
index 3f1d6a257a8f..0bfca52099ca 100644
--- a/packages/react/src/internal/useFocusWithin.js
+++ b/packages/react/src/internal/useFocusWithin.js
@@ -1,8 +1,6 @@
 import { useState } from 'react';
 
-function useFocusWithin() {
+export function useFocusWithin() {
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
   return [hasFocusWithin, setHasFocusWithin];
 }
-
-export default useFocusWithin;

From fb68deb915fc1ab7b73e93d62eab8b319f715cc4 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Mon, 29 Mar 2021 21:02:08 -0500
Subject: [PATCH 08/18] test(StructuredList): add specificity to classname
 testing

---
 .../__snapshots__/PublicAPI-test.js.snap      | 25 +++----------------
 .../StructuredList/StructuredList-test.js     | 12 +++++----
 .../StructuredList/StructuredList.js          | 11 ++++----
 packages/react/src/internal/useFocusWithin.js |  6 -----
 4 files changed, 15 insertions(+), 39 deletions(-)
 delete mode 100644 packages/react/src/internal/useFocusWithin.js

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 1813bafd4371..27d059b391ed 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4990,43 +4990,24 @@ Map {
   },
   "StructuredListInput" => Object {
     "defaultProps": Object {
-      "onChange": [Function],
       "title": "title",
-      "value": "value",
     },
     "propTypes": Object {
       "className": Object {
         "type": "string",
       },
-      "defaultChecked": Object {
-        "type": "bool",
-      },
+      "defaultChecked": [Function],
       "id": Object {
         "type": "string",
       },
       "name": Object {
         "type": "string",
       },
-      "onChange": Object {
-        "type": "func",
-      },
+      "onChange": [Function],
       "title": Object {
         "type": "string",
       },
-      "value": Object {
-        "args": Array [
-          Array [
-            Object {
-              "type": "string",
-            },
-            Object {
-              "type": "number",
-            },
-          ],
-        ],
-        "isRequired": true,
-        "type": "oneOfType",
-      },
+      "value": [Function],
     },
   },
   "StructuredListCell" => Object {
diff --git a/packages/react/src/components/StructuredList/StructuredList-test.js b/packages/react/src/components/StructuredList/StructuredList-test.js
index 37d86f995fb3..4a0be0988d96 100644
--- a/packages/react/src/components/StructuredList/StructuredList-test.js
+++ b/packages/react/src/components/StructuredList/StructuredList-test.js
@@ -26,11 +26,13 @@ describe('StructuredListWrapper', () => {
     );
 
     it('should have the expected classes', () => {
-      expect(wrapper.hasClass(`${prefix}--structured-list`)).toEqual(true);
+      expect(
+        wrapper.find('div').hasClass(`${prefix}--structured-list`)
+      ).toEqual(true);
     });
 
     it('Should add extra classes that are passed via className', () => {
-      expect(wrapper.hasClass('extra-class')).toEqual(true);
+      expect(wrapper.find('div').hasClass('extra-class')).toEqual(true);
     });
 
     it('By default, selection prop is false', () => {
@@ -41,9 +43,9 @@ describe('StructuredListWrapper', () => {
 
     it('Should add the modifier class for selection when selection prop is true', () => {
       wrapper.setProps({ selection: true });
-      expect(wrapper.hasClass(`${prefix}--structured-list--selection`)).toEqual(
-        true
-      );
+      expect(
+        wrapper.find('div').hasClass(`${prefix}--structured-list--selection`)
+      ).toEqual(true);
     });
   });
 });
diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index 65cb6450f790..7df7b3d70b06 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -5,11 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
-import { useFocusWithin } from '../../internal/useFocusWithin';
 import { useId } from '../../internal/useId';
 import deprecate from '../../prop-types/deprecate';
 
@@ -138,7 +137,7 @@ const GridRowContext = React.createContext(null);
 
 export function StructuredListRow(props) {
   const { onKeyDown, children, className, head, ...other } = props;
-  const [hasFocusWithin, setHasFocusWithin] = useFocusWithin();
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
   const id = useId('grid-input');
   const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
   const value = { id };
@@ -230,12 +229,12 @@ export function StructuredListInput(props) {
       {...other}
       type="radio"
       tabIndex={0}
-      checked={row.id === selectedRow}
-      value={row.id}
+      checked={row && row.id === selectedRow}
+      value={row ? row.id : ''}
       onChange={(event) => {
         setSelectedRow(event.target.value);
       }}
-      id={id}
+      id={!id && defaultId}
       className={classes}
       name={name}
       title={title}
diff --git a/packages/react/src/internal/useFocusWithin.js b/packages/react/src/internal/useFocusWithin.js
deleted file mode 100644
index 0bfca52099ca..000000000000
--- a/packages/react/src/internal/useFocusWithin.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useState } from 'react';
-
-export function useFocusWithin() {
-  const [hasFocusWithin, setHasFocusWithin] = useState(false);
-  return [hasFocusWithin, setHasFocusWithin];
-}

From 48ef99930ac00a70e09ba9cefb033f17b48a828e Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Mon, 29 Mar 2021 21:04:27 -0500
Subject: [PATCH 09/18] fix(StructuredList): add clearer deprecation warning
 for defaultChecked

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

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index 7df7b3d70b06..5716fa51ea41 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -253,7 +253,7 @@ StructuredListInput.propTypes = {
    */
   defaultChecked: deprecate(
     PropTypes.bool,
-    `\nThe prop \`defaultChecked\` will be removed in the next major version of Carbon.`
+    `\nThe prop \`defaultChecked\` is no longer needed and will be removed in the next major version of Carbon.`
   ),
 
   /**

From fd90e923c18396aa7895c6291d16a4155e60652b Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andreancardona@gmail.com>
Date: Wed, 31 Mar 2021 12:41:34 -0600
Subject: [PATCH 10/18] fix(structuredList): updated style

---
 .../src/components/structured-list/_structured-list.scss         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/structured-list/_structured-list.scss b/packages/components/src/components/structured-list/_structured-list.scss
index 242befe45273..133a57a9b3e7 100644
--- a/packages/components/src/components/structured-list/_structured-list.scss
+++ b/packages/components/src/components/structured-list/_structured-list.scss
@@ -109,6 +109,7 @@
     display: table-cell;
     max-width: 36rem;
     color: $text-02;
+    border-top: 1px solid $ui-03;
     transition: color $duration--fast-02 motion(standard, productive);
   }
 

From 5af34a2b0073c7f3bac97c6bda6b9b38e8b41f50 Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andreancardona@gmail.com>
Date: Wed, 31 Mar 2021 15:34:22 -0600
Subject: [PATCH 11/18] fix(structuredList): updated style again

---
 .../src/components/structured-list/_structured-list.scss        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/structured-list/_structured-list.scss b/packages/components/src/components/structured-list/_structured-list.scss
index 133a57a9b3e7..aa0088ac47de 100644
--- a/packages/components/src/components/structured-list/_structured-list.scss
+++ b/packages/components/src/components/structured-list/_structured-list.scss
@@ -73,7 +73,7 @@
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
     > .#{$prefix}--structured-list-td {
-    border-top: 1px solid $ui-01;
+    border-top: 1px solid $ui-03;
   }
 
   .#{$prefix}--structured-list-thead {

From 606c728e22af0d004aac562b8a6d7170a2749880 Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Thu, 1 Apr 2021 17:48:50 -0500
Subject: [PATCH 12/18] Update
 packages/react/src/components/StructuredList/StructuredList.js

Co-authored-by: Josh Black <josh@josh.black>
---
 packages/react/src/components/StructuredList/StructuredList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index 5716fa51ea41..f411ac128e85 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -192,7 +192,7 @@ StructuredListRow.propTypes = {
    */
   label: deprecate(
     PropTypes.bool,
-    `\nThe prop \`label\` will be removed in the next major version of Carbon.`
+    `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.`
   ),
 
   /**

From 26738895d2a27fac313142d2cea608a393ba389e Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Thu, 1 Apr 2021 17:56:07 -0500
Subject: [PATCH 13/18] fix(StructuredList): update render return to be in
 carbon style

---
 .../components/StructuredList/StructuredList.js    | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index 5716fa51ea41..5e21fd1c2d92 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -300,11 +300,15 @@ export function StructuredListCell(props) {
     [`${prefix}--structured-list-content--nowrap`]: noWrap,
   });
 
-  return head ? (
-    <span className={classes} role="columnheader" {...other}>
-      {children}
-    </span>
-  ) : (
+  if (head) {
+    return (
+      <span className={classes} role="columnheader" {...other}>
+        {children}
+      </span>
+    );
+  }
+
+  return (
     <div className={classes} role="cell" {...other}>
       {children}
     </div>

From 2cdf11303047ff5a969d0a26b7a81b6d932fc60b Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Wed, 7 Apr 2021 11:40:06 -0500
Subject: [PATCH 14/18] fix(StructuredList): move new work to /next

---
 .../components/StructuredList/{ => next}/StructuredList-test.js   | 0
 .../src/components/StructuredList/{ => next}/StructuredList.js    | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/react/src/components/StructuredList/{ => next}/StructuredList-test.js (100%)
 rename packages/react/src/components/StructuredList/{ => next}/StructuredList.js (100%)

diff --git a/packages/react/src/components/StructuredList/StructuredList-test.js b/packages/react/src/components/StructuredList/next/StructuredList-test.js
similarity index 100%
rename from packages/react/src/components/StructuredList/StructuredList-test.js
rename to packages/react/src/components/StructuredList/next/StructuredList-test.js
diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/next/StructuredList.js
similarity index 100%
rename from packages/react/src/components/StructuredList/StructuredList.js
rename to packages/react/src/components/StructuredList/next/StructuredList.js

From 08ce487d10c2be9a34f776ab372bc477e35f7018 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Wed, 7 Apr 2021 14:50:10 -0500
Subject: [PATCH 15/18] fix(StructuredList): put changes behind feature flag

---
 .../structured-list/_structured-list.scss     |  27 +-
 .../StructuredList/StructuredList-test.js     | 200 ++++++++++++
 .../StructuredList/StructuredList.js          | 302 ++++++++++++++++++
 .../src/components/StructuredList/index.js    |  66 +++-
 .../StructuredList/next/StructuredList.js     |   4 +-
 5 files changed, 591 insertions(+), 8 deletions(-)
 create mode 100644 packages/react/src/components/StructuredList/StructuredList-test.js
 create mode 100644 packages/react/src/components/StructuredList/StructuredList.js

diff --git a/packages/components/src/components/structured-list/_structured-list.scss b/packages/components/src/components/structured-list/_structured-list.scss
index aa0088ac47de..1291a2cfe954 100644
--- a/packages/components/src/components/structured-list/_structured-list.scss
+++ b/packages/components/src/components/structured-list/_structured-list.scss
@@ -17,9 +17,14 @@
   .#{$prefix}--structured-list--selection .#{$prefix}--structured-list-th {
     @include padding--data-structured-list;
   }
-
-  .#{$prefix}--structured-list-row--focused-within {
-    @include focus-outline('outline');
+  @if feature-flag-enabled('enable-2021-release') {
+    .#{$prefix}--structured-list-row--focused-within {
+      @include focus-outline('outline');
+    }
+  } @else {
+    .#{$prefix}--structured-list-input {
+      display: none;
+    }
   }
 
   .#{$prefix}--structured-list {
@@ -62,6 +67,11 @@
     cursor: inherit;
   }
 
+  @if not feature-flag-enabled('enable-2021-release') {
+    .#{$prefix}--structured-list-row:focus:not(.#{$prefix}--structured-list-row--header-row) {
+      @include focus-outline('outline');
+    }
+  }
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
     > .#{$prefix}--structured-list-td,
@@ -73,7 +83,11 @@
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
     > .#{$prefix}--structured-list-td {
-    border-top: 1px solid $ui-03;
+    @if feature-flag-enable('enabled-2021-release') {
+      border-top: 1px solid $ui-03;
+    } @else {
+      border-top: 1px solid $ui-01;
+    }
   }
 
   .#{$prefix}--structured-list-thead {
@@ -109,7 +123,10 @@
     display: table-cell;
     max-width: 36rem;
     color: $text-02;
-    border-top: 1px solid $ui-03;
+    @if feature-flag-enabled('enable-2021-release') {
+      border-top: 1px solid $ui-03;
+    }
+
     transition: color $duration--fast-02 motion(standard, productive);
   }
 
diff --git a/packages/react/src/components/StructuredList/StructuredList-test.js b/packages/react/src/components/StructuredList/StructuredList-test.js
new file mode 100644
index 000000000000..11f96fdb52cb
--- /dev/null
+++ b/packages/react/src/components/StructuredList/StructuredList-test.js
@@ -0,0 +1,200 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import {
+  StructuredListWrapper,
+  StructuredListHead,
+  StructuredListInput,
+  StructuredListBody,
+  StructuredListRow,
+  StructuredListCell,
+} from '../StructuredList';
+import { mount, shallow } from 'enzyme';
+import { settings } from 'carbon-components';
+
+const { prefix } = settings;
+
+describe('StructuredListWrapper', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(
+      <StructuredListWrapper className="extra-class">hi</StructuredListWrapper>
+    );
+
+    it('should have the expected classes', () => {
+      expect(wrapper.hasClass(`${prefix}--structured-list`)).toEqual(true);
+    });
+
+    it('Should add extra classes that are passed via className', () => {
+      expect(wrapper.hasClass('extra-class')).toEqual(true);
+    });
+
+    it('By default, selection prop is false', () => {
+      expect(wrapper.hasClass(`${prefix}--structured-list--selection`)).toEqual(
+        false
+      );
+    });
+
+    it('Should add the modifier class for selection when selection prop is true', () => {
+      wrapper.setProps({ selection: true });
+      expect(wrapper.hasClass(`${prefix}--structured-list--selection`)).toEqual(
+        true
+      );
+    });
+  });
+});
+
+describe('StructuredListHead', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(
+      <StructuredListHead className="extra-class">hi</StructuredListHead>
+    );
+
+    it('should have the expected classes', () => {
+      expect(wrapper.hasClass(`${prefix}--structured-list-thead`)).toEqual(
+        true
+      );
+    });
+
+    it('Should add extra classes that are passed via className', () => {
+      expect(wrapper.hasClass('extra-class')).toEqual(true);
+    });
+
+    it('Should accept other props from ...other', () => {
+      const wrapperProps = shallow(
+        <StructuredListHead title="title">hi</StructuredListHead>
+      );
+      expect(wrapperProps.props().title).toEqual('title');
+    });
+  });
+});
+
+describe('StructuredListInput', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(<StructuredListInput className="extra-class" />);
+
+    it('should have the expected classes', () => {
+      expect(wrapper.hasClass(`${prefix}--structured-list-input`)).toEqual(
+        true
+      );
+    });
+
+    it('Should add extra classes that are passed via className', () => {
+      expect(wrapper.hasClass('extra-class')).toEqual(true);
+    });
+
+    it('Should accept other props from ...other', () => {
+      const wrapperProps = shallow(<StructuredListInput title="title" />);
+      expect(wrapperProps.props().title).toEqual('title');
+    });
+
+    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.find('[id]')).not.toEqual(wrapper2.find('[id]'));
+    });
+  });
+});
+
+describe('StructuredListRow', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(<StructuredListRow className="extra-class" />);
+
+    it('should have the expected classes', () => {
+      expect(wrapper.hasClass(`${prefix}--structured-list-row`)).toEqual(true);
+    });
+
+    it('Should add extra classes that are passed via className', () => {
+      expect(wrapper.hasClass('extra-class')).toEqual(true);
+    });
+
+    it('should use correct class when head prop is true', () => {
+      wrapper.setProps({ head: true });
+
+      expect(
+        wrapper.hasClass(`${prefix}--structured-list-row--header-row`)
+      ).toEqual(true);
+    });
+
+    it('should use <div> HTML by default (or when label prop is false)', () => {
+      const wrapperLabel = shallow(<StructuredListRow />);
+      expect(wrapperLabel.getElement().type).toEqual('div');
+    });
+
+    it('should use <label> HTML when label prop is true', () => {
+      const wrapperLabel = shallow(<StructuredListRow label />);
+      expect(wrapperLabel.getElement().type).toEqual('label');
+    });
+
+    it('Should accept other props from ...other', () => {
+      const wrapperProps = shallow(
+        <StructuredListRow title="title">hi</StructuredListRow>
+      );
+      expect(wrapperProps.props().title).toEqual('title');
+    });
+  });
+});
+
+describe('StructuredListBody', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(
+      <StructuredListBody className="extra-class">hi</StructuredListBody>
+    );
+
+    it('should have the expected classes', () => {
+      expect(wrapper.hasClass(`${prefix}--structured-list-tbody`)).toEqual(
+        true
+      );
+    });
+
+    it('Should add extra classes that are passed via className', () => {
+      expect(wrapper.hasClass('extra-class')).toEqual(true);
+    });
+
+    it('Should accept other props from ...other', () => {
+      const wrapperProps = shallow(
+        <StructuredListBody title="title">hi</StructuredListBody>
+      );
+      expect(wrapperProps.props().title).toEqual('title');
+    });
+  });
+});
+
+describe('StructuredListCell', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(
+      <StructuredListCell className="extra-class">hi</StructuredListCell>
+    );
+
+    it('Should add extra classes that are passed via className', () => {
+      expect(wrapper.hasClass('extra-class')).toEqual(true);
+    });
+
+    it('should have the expected classes', () => {
+      expect(wrapper.hasClass(`${prefix}--structured-list-td`)).toEqual(true);
+    });
+
+    it('should use correct class when head prop is true', () => {
+      wrapper.setProps({ head: true });
+      expect(wrapper.hasClass(`${prefix}--structured-list-th`)).toEqual(true);
+    });
+
+    it('should use correct class when noWrap prop is true', () => {
+      wrapper.setProps({ noWrap: true });
+      expect(
+        wrapper.hasClass(`${prefix}--structured-list-content--nowrap`)
+      ).toEqual(true);
+    });
+
+    it('Should accept other props from ...other', () => {
+      const wrapperProps = shallow(
+        <StructuredListCell title="title">hi</StructuredListCell>
+      );
+      expect(wrapperProps.props().title).toEqual('title');
+    });
+  });
+});
diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
new file mode 100644
index 000000000000..54ab05b00803
--- /dev/null
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -0,0 +1,302 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { settings } from 'carbon-components';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import deprecate from '../../prop-types/deprecate';
+
+const { prefix } = settings;
+const getInstanceId = setupGetInstanceId();
+
+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 role="table" className={classes} {...other} aria-label={ariaLabel}>
+      {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 role="rowgroup" 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,
+};
+
+export function StructuredListBody(props) {
+  const { children, className, ...other } = props;
+  const classes = classNames(`${prefix}--structured-list-tbody`, className);
+
+  return (
+    <div className={classes} role="rowgroup" {...other}>
+      {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>
+  );
+}
+
+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, id, ...other } = props;
+  const classes = classNames(`${prefix}--structured-list-input`, className);
+  const instanceId = id || getInstanceId();
+
+  return (
+    <input
+      {...other}
+      type="radio"
+      tabIndex={-1}
+      id={instanceId}
+      className={classes}
+      value={value}
+      name={name}
+      title={title}
+    />
+  );
+}
+
+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} role={head ? 'columnheader' : 'cell'} {...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,
+};
diff --git a/packages/react/src/components/StructuredList/index.js b/packages/react/src/components/StructuredList/index.js
index 11110bb2a46f..b056d2f98291 100644
--- a/packages/react/src/components/StructuredList/index.js
+++ b/packages/react/src/components/StructuredList/index.js
@@ -4,6 +4,70 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
+import {
+  StructuredListWrapper as StructuredListWrapperNew,
+  StructuredListHead as StructuredListHeadNew,
+  StructuredListInput as StructuredListInputNew,
+  StructuredListBody as StructuredListBodyNew,
+  StructuredListRow as StructuredListRowNew,
+  StructuredListCell as StructuredListCellNew,
+} from './next/StructuredList';
+import {
+  StructuredListWrapper as StructuredListWrapperOld,
+  StructuredListHead as StructuredListHeadOld,
+  StructuredListInput as StructuredListInputOld,
+  StructuredListBody as StructuredListBodyOld,
+  StructuredListRow as StructuredListRowOld,
+  StructuredListCell as StructuredListCellOld,
+} from './StructuredList';
+import { useFeatureFlag } from '../FeatureFlags';
+
+export function StructuredListWrapper(props) {
+  const enabled = useFeatureFlag('enable-2021-release');
+  if (enabled) {
+    return <StructuredListWrapperNew {...props} />;
+  }
+  return <StructuredListWrapperOld {...props} />;
+}
+
+export function StructuredListHead(props) {
+  const enabled = useFeatureFlag('enable-2021-release');
+  if (enabled) {
+    return <StructuredListHeadNew {...props} />;
+  }
+  return <StructuredListHeadOld {...props} />;
+}
+export function StructuredListInput(props) {
+  const enabled = useFeatureFlag('enable-2021-release');
+  if (enabled) {
+    return <StructuredListInputNew {...props} />;
+  }
+  return <StructuredListInputOld {...props} />;
+}
+
+export function StructuredListBody(props) {
+  const enabled = useFeatureFlag('enable-2021-release');
+  if (enabled) {
+    return <StructuredListBodyNew {...props} />;
+  }
+  return <StructuredListBodyOld {...props} />;
+}
+
+export function StructuredListRow(props) {
+  const enabled = useFeatureFlag('enable-2021-release');
+  if (enabled) {
+    return <StructuredListRowNew {...props} />;
+  }
+  return <StructuredListRowOld {...props} />;
+}
+
+export function StructuredListCell(props) {
+  const enabled = useFeatureFlag('enable-2021-release');
+  if (enabled) {
+    return <StructuredListCellNew {...props} />;
+  }
+  return <StructuredListCellOld {...props} />;
+}
 
 export * from './StructuredList.Skeleton';
-export * from './StructuredList';
diff --git a/packages/react/src/components/StructuredList/next/StructuredList.js b/packages/react/src/components/StructuredList/next/StructuredList.js
index 9a1829e25bf4..88e37d863c7f 100644
--- a/packages/react/src/components/StructuredList/next/StructuredList.js
+++ b/packages/react/src/components/StructuredList/next/StructuredList.js
@@ -9,8 +9,8 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
-import { useId } from '../../internal/useId';
-import deprecate from '../../prop-types/deprecate';
+import { useId } from '../../../internal/useId';
+import deprecate from '../../../prop-types/deprecate';
 
 const { prefix } = settings;
 const GridSelectedRowStateContext = React.createContext(null);

From e6a96152f0acfcfb93941735d829e8c66add5fe7 Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Fri, 9 Apr 2021 17:29:15 -0500
Subject: [PATCH 16/18] test(StructuredList): add old version tests

---
 .../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 11f96fdb52cb..40203c2f89c5 100644
--- a/packages/react/src/components/StructuredList/StructuredList-test.js
+++ b/packages/react/src/components/StructuredList/StructuredList-test.js
@@ -13,7 +13,7 @@ import {
   StructuredListBody,
   StructuredListRow,
   StructuredListCell,
-} from '../StructuredList';
+} from './StructuredList';
 import { mount, shallow } from 'enzyme';
 import { settings } from 'carbon-components';
 

From 07eda0d4caca519525ae5762222cf8f2df538c6f Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Mon, 12 Apr 2021 13:54:37 -0500
Subject: [PATCH 17/18] fix(StructuredList): update to Carbon naming convention

---
 .../src/components/StructuredList/index.js    | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/react/src/components/StructuredList/index.js b/packages/react/src/components/StructuredList/index.js
index b056d2f98291..992b64d0be5d 100644
--- a/packages/react/src/components/StructuredList/index.js
+++ b/packages/react/src/components/StructuredList/index.js
@@ -6,68 +6,68 @@
  */
 import React from 'react';
 import {
-  StructuredListWrapper as StructuredListWrapperNew,
-  StructuredListHead as StructuredListHeadNew,
-  StructuredListInput as StructuredListInputNew,
-  StructuredListBody as StructuredListBodyNew,
-  StructuredListRow as StructuredListRowNew,
-  StructuredListCell as StructuredListCellNew,
+  StructuredListWrapper as StructuredListWrapperNext,
+  StructuredListHead as StructuredListHeadNext,
+  StructuredListInput as StructuredListInputNext,
+  StructuredListBody as StructuredListBodyNext,
+  StructuredListRow as StructuredListRowNext,
+  StructuredListCell as StructuredListCellNext,
 } from './next/StructuredList';
 import {
-  StructuredListWrapper as StructuredListWrapperOld,
-  StructuredListHead as StructuredListHeadOld,
-  StructuredListInput as StructuredListInputOld,
-  StructuredListBody as StructuredListBodyOld,
-  StructuredListRow as StructuredListRowOld,
-  StructuredListCell as StructuredListCellOld,
+  StructuredListWrapper as StructuredListWrapperClassic,
+  StructuredListHead as StructuredListHeadClassic,
+  StructuredListInput as StructuredListInputClassic,
+  StructuredListBody as StructuredListBodyClassic,
+  StructuredListRow as StructuredListRowClassic,
+  StructuredListCell as StructuredListCellClassic,
 } from './StructuredList';
 import { useFeatureFlag } from '../FeatureFlags';
 
 export function StructuredListWrapper(props) {
   const enabled = useFeatureFlag('enable-2021-release');
   if (enabled) {
-    return <StructuredListWrapperNew {...props} />;
+    return <StructuredListWrapperNext {...props} />;
   }
-  return <StructuredListWrapperOld {...props} />;
+  return <StructuredListWrapperClassic {...props} />;
 }
 
 export function StructuredListHead(props) {
   const enabled = useFeatureFlag('enable-2021-release');
   if (enabled) {
-    return <StructuredListHeadNew {...props} />;
+    return <StructuredListHeadNext {...props} />;
   }
-  return <StructuredListHeadOld {...props} />;
+  return <StructuredListHeadClassic {...props} />;
 }
 export function StructuredListInput(props) {
   const enabled = useFeatureFlag('enable-2021-release');
   if (enabled) {
-    return <StructuredListInputNew {...props} />;
+    return <StructuredListInputNext {...props} />;
   }
-  return <StructuredListInputOld {...props} />;
+  return <StructuredListInputClassic {...props} />;
 }
 
 export function StructuredListBody(props) {
   const enabled = useFeatureFlag('enable-2021-release');
   if (enabled) {
-    return <StructuredListBodyNew {...props} />;
+    return <StructuredListBodyNext {...props} />;
   }
-  return <StructuredListBodyOld {...props} />;
+  return <StructuredListBodyClassic {...props} />;
 }
 
 export function StructuredListRow(props) {
   const enabled = useFeatureFlag('enable-2021-release');
   if (enabled) {
-    return <StructuredListRowNew {...props} />;
+    return <StructuredListRowNext {...props} />;
   }
-  return <StructuredListRowOld {...props} />;
+  return <StructuredListRowClassic {...props} />;
 }
 
 export function StructuredListCell(props) {
   const enabled = useFeatureFlag('enable-2021-release');
   if (enabled) {
-    return <StructuredListCellNew {...props} />;
+    return <StructuredListCellNext {...props} />;
   }
-  return <StructuredListCellOld {...props} />;
+  return <StructuredListCellClassic {...props} />;
 }
 
 export * from './StructuredList.Skeleton';

From 7770b668f4a54d27adbae2588cb9be5ef3f8548b Mon Sep 17 00:00:00 2001
From: "D.A. Kahn" <dakahn@protonmail.com>
Date: Mon, 12 Apr 2021 13:57:14 -0500
Subject: [PATCH 18/18] test(StructuredList): update snapshots

---
 .../__tests__/__snapshots__/grid-test.js.snap |   6 -
 .../__snapshots__/PublicAPI-test.js.snap      |  74 -----------
 .../__snapshots__/PublicAPI-test.js.snap      | 119 +-----------------
 3 files changed, 6 insertions(+), 193 deletions(-)

diff --git a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
index 3e43d7cd5f51..723e096360af 100644
--- a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
+++ b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
@@ -1350,12 +1350,6 @@ em {
 .bx--aspect-ratio--3x4::before {
   padding-top: 133.33333%; }
 
-.bx--aspect-ratio--3x2::before {
-  padding-top: 66.66667%; }
-
-.bx--aspect-ratio--2x3::before {
-  padding-top: 150%; }
-
 .bx--aspect-ratio--1x1::before {
   padding-top: 100%; }
 
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
index 02b1a2a11563..661c33410862 100644
--- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9,14 +9,6 @@ Array [
   "activeSecondary",
   "activeTertiary",
   "activeUI",
-  "background",
-  "backgroundActive",
-  "backgroundBrand",
-  "backgroundHover",
-  "backgroundInverse",
-  "backgroundInverseHover",
-  "backgroundSelected",
-  "backgroundSelectedHover",
   "baseFontSize",
   "black",
   "black100",
@@ -35,12 +27,6 @@ Array [
   "bodyLong02",
   "bodyShort01",
   "bodyShort02",
-  "borderDisabled",
-  "borderInteractive",
-  "borderInverse",
-  "borderStrong",
-  "borderSubtle",
-  "borderSubtleSelected",
   "brand01",
   "brand02",
   "brand03",
@@ -48,21 +34,7 @@ Array [
   "breakpointDown",
   "breakpointUp",
   "breakpoints",
-  "buttonDangerActive",
-  "buttonDangerHover",
-  "buttonDangerPrimary",
-  "buttonDangerSecondary",
-  "buttonDisabled",
-  "buttonPrimary",
-  "buttonPrimaryActive",
-  "buttonPrimaryHover",
-  "buttonSecondary",
-  "buttonSecondaryActive",
-  "buttonSecondaryHover",
   "buttonSeparator",
-  "buttonTertiary",
-  "buttonTertiaryActive",
-  "buttonTertiaryHover",
   "caption01",
   "code01",
   "code02",
@@ -117,11 +89,8 @@ Array [
   "expressiveParagraph01",
   "fast01",
   "fast02",
-  "field",
   "field01",
   "field02",
-  "fieldDisabled",
-  "fieldHover",
   "fluid",
   "fluidSpacing",
   "fluidSpacing01",
@@ -129,8 +98,6 @@ Array [
   "fluidSpacing03",
   "fluidSpacing04",
   "focus",
-  "focusInset",
-  "focuseInverse",
   "fontFamilies",
   "fontFamily",
   "fontWeight",
@@ -179,16 +146,9 @@ Array [
   "icon01",
   "icon02",
   "icon03",
-  "iconDisabled",
-  "iconInverse",
-  "iconOnColor",
-  "iconOnColorDisabled",
-  "iconPrimary",
-  "iconSecondary",
   "iconSize",
   "iconSize01",
   "iconSize02",
-  "interactive",
   "interactive01",
   "interactive02",
   "interactive03",
@@ -203,15 +163,6 @@ Array [
   "inverseSupport03",
   "inverseSupport04",
   "label01",
-  "layer",
-  "layerActive",
-  "layerAlt",
-  "layerDisabled",
-  "layerHover",
-  "layerSelected",
-  "layerSelectedDisabled",
-  "layerSelectedHover",
-  "layerSelectedInverse",
   "layout",
   "layout01",
   "layout02",
@@ -222,11 +173,6 @@ Array [
   "layout07",
   "link01",
   "link02",
-  "linkInverse",
-  "linkPrimary",
-  "linkPrimaryHover",
-  "linkSecondary",
-  "linkVisited",
   "magenta",
   "magenta10",
   "magenta100",
@@ -247,7 +193,6 @@ Array [
   "orange40",
   "orange60",
   "orange70",
-  "overlay",
   "overlay01",
   "print",
   "productiveHeading01",
@@ -290,8 +235,6 @@ Array [
   "selectedUI",
   "skeleton01",
   "skeleton02",
-  "skeletonBackground",
-  "skeletonElement",
   "slow01",
   "slow02",
   "spacing",
@@ -313,14 +256,6 @@ Array [
   "support02",
   "support03",
   "support04",
-  "supportError",
-  "supportErrorInverse",
-  "supportInfo",
-  "supportInfoInverse",
-  "supportSuccess",
-  "supportSuccessInverse",
-  "supportWarning",
-  "supportWarningInverse",
   "teal",
   "teal10",
   "teal100",
@@ -337,17 +272,8 @@ Array [
   "text03",
   "text04",
   "text05",
-  "textDisabled",
   "textError",
-  "textHelper",
-  "textInverse",
-  "textOnColor",
-  "textOnColorDisabled",
-  "textPlaceholder",
-  "textPrimary",
-  "textSecondary",
   "themes",
-  "toggleOff",
   "tokens",
   "ui01",
   "ui02",
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index c4138ed90659..0719f12ff0c1 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4964,119 +4964,12 @@ Map {
       },
     },
   },
-  "StructuredListWrapper" => Object {
-    "defaultProps": Object {
-      "ariaLabel": "Structured list section",
-      "selection": false,
-    },
-    "propTypes": Object {
-      "ariaLabel": Object {
-        "type": "string",
-      },
-      "border": [Function],
-      "children": Object {
-        "type": "node",
-      },
-      "className": Object {
-        "type": "string",
-      },
-      "selection": Object {
-        "type": "bool",
-      },
-    },
-  },
-  "StructuredListHead" => Object {
-    "propTypes": Object {
-      "children": Object {
-        "type": "node",
-      },
-      "className": Object {
-        "type": "string",
-      },
-    },
-  },
-  "StructuredListBody" => Object {
-    "defaultProps": Object {
-      "onKeyDown": [Function],
-    },
-    "propTypes": Object {
-      "children": Object {
-        "type": "node",
-      },
-      "className": Object {
-        "type": "string",
-      },
-      "head": Object {
-        "type": "bool",
-      },
-      "onKeyDown": Object {
-        "type": "func",
-      },
-    },
-  },
-  "StructuredListRow" => Object {
-    "defaultProps": Object {
-      "head": false,
-      "onKeyDown": [Function],
-    },
-    "propTypes": Object {
-      "children": Object {
-        "type": "node",
-      },
-      "className": Object {
-        "type": "string",
-      },
-      "head": Object {
-        "type": "bool",
-      },
-      "label": [Function],
-      "onKeyDown": Object {
-        "type": "func",
-      },
-    },
-  },
-  "StructuredListInput" => Object {
-    "defaultProps": Object {
-      "title": "title",
-    },
-    "propTypes": Object {
-      "className": Object {
-        "type": "string",
-      },
-      "defaultChecked": [Function],
-      "id": Object {
-        "type": "string",
-      },
-      "name": Object {
-        "type": "string",
-      },
-      "onChange": [Function],
-      "title": Object {
-        "type": "string",
-      },
-      "value": [Function],
-    },
-  },
-  "StructuredListCell" => Object {
-    "defaultProps": Object {
-      "head": false,
-      "noWrap": false,
-    },
-    "propTypes": Object {
-      "children": Object {
-        "type": "node",
-      },
-      "className": Object {
-        "type": "string",
-      },
-      "head": Object {
-        "type": "bool",
-      },
-      "noWrap": Object {
-        "type": "bool",
-      },
-    },
-  },
+  "StructuredListWrapper" => Object {},
+  "StructuredListHead" => Object {},
+  "StructuredListBody" => Object {},
+  "StructuredListRow" => Object {},
+  "StructuredListInput" => Object {},
+  "StructuredListCell" => Object {},
   "Tab" => Object {
     "defaultProps": Object {
       "label": "provide a label",