From 1bc93ba866fec6805f987d16a864cc903c527434 Mon Sep 17 00:00:00 2001
From: Alessandra Davila <adavila91@gmail.com>
Date: Thu, 10 Nov 2022 16:59:21 -0600
Subject: [PATCH] chore(structured-list): remove next folder (#12590)

* chore(structured-list): remove next folder

* chore(structured-list): update snapshots

* Apply suggestions from code review

* Update index.js

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../__snapshots__/PublicAPI-test.js.snap      | 120 +++++-
 .../StructuredList/StructuredList-test.js     |  36 +-
 .../StructuredList/StructuredList.js          | 144 ++++---
 .../{next => }/StructuredList.stories.js      |   4 +-
 .../src/components/StructuredList/index.js    |  54 +--
 .../next/StructuredList-test.js               | 205 ----------
 .../StructuredList/next/StructuredList.js     | 364 ------------------
 .../StructuredList/next/StructuredList.mdx    |  23 --
 8 files changed, 228 insertions(+), 722 deletions(-)
 rename packages/react/src/components/StructuredList/{next => }/StructuredList.stories.js (98%)
 delete mode 100644 packages/react/src/components/StructuredList/next/StructuredList-test.js
 delete mode 100644 packages/react/src/components/StructuredList/next/StructuredList.js
 delete mode 100644 packages/react/src/components/StructuredList/next/StructuredList.mdx

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index aba68710915e..27e7b1fdfd05 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6708,24 +6708,96 @@ Map {
     "render": [Function],
   },
   "StructuredListBody" => Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "render": [Function],
+    "defaultProps": Object {
+      "onKeyDown": [Function],
+    },
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "head": Object {
+        "type": "bool",
+      },
+      "onKeyDown": Object {
+        "type": "func",
+      },
+    },
   },
   "StructuredListCell" => Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "render": [Function],
+    "defaultProps": Object {
+      "head": false,
+      "noWrap": false,
+    },
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "head": Object {
+        "type": "bool",
+      },
+      "noWrap": Object {
+        "type": "bool",
+      },
+    },
   },
   "StructuredListHead" => Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "render": [Function],
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+    },
   },
   "StructuredListInput" => Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "render": [Function],
+    "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],
+    },
   },
   "StructuredListRow" => Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "render": [Function],
+    "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",
+      },
+    },
   },
   "StructuredListSkeleton" => Object {
     "defaultProps": Object {
@@ -6745,8 +6817,32 @@ Map {
     },
   },
   "StructuredListWrapper" => Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "render": [Function],
+    "defaultProps": Object {
+      "ariaLabel": "Structured list section",
+      "isCondensed": false,
+      "isFlush": false,
+      "selection": false,
+    },
+    "propTypes": Object {
+      "ariaLabel": Object {
+        "type": "string",
+      },
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "isCondensed": Object {
+        "type": "bool",
+      },
+      "isFlush": Object {
+        "type": "bool",
+      },
+      "selection": Object {
+        "type": "bool",
+      },
+    },
   },
   "Switch" => Object {
     "$$typeof": Symbol(react.forward_ref),
diff --git a/packages/react/src/components/StructuredList/StructuredList-test.js b/packages/react/src/components/StructuredList/StructuredList-test.js
index 3afc1cbe4985..510347f55049 100644
--- a/packages/react/src/components/StructuredList/StructuredList-test.js
+++ b/packages/react/src/components/StructuredList/StructuredList-test.js
@@ -25,11 +25,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', () => {
@@ -40,9 +42,23 @@ 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);
+    });
+
+    it('Should add the modifier class for condensed when isCondensed prop is true', () => {
+      wrapper.setProps({ isCondensed: true });
+      expect(
+        wrapper.find('div').hasClass(`${prefix}--structured-list--condensed`)
+      ).toEqual(true);
+    });
+
+    it('Should add the modifier class for flush when isFlush prop is true', () => {
+      wrapper.setProps({ isFlush: true });
+      expect(
+        wrapper.find('div').hasClass(`${prefix}--structured-list--flush`)
+      ).toEqual(true);
     });
   });
 });
@@ -119,16 +135,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 0d779247f53e..e3fc3b829dcf 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -5,14 +5,15 @@
  * 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 setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { useId } from '../../internal/useId';
 import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 
-const getInstanceId = setupGetInstanceId();
+const GridSelectedRowStateContext = React.createContext(null);
+const GridSelectedRowDispatchContext = React.createContext(null);
 
 export function StructuredListWrapper(props) {
   const {
@@ -22,7 +23,6 @@ export function StructuredListWrapper(props) {
     ariaLabel,
     isCondensed,
     isFlush,
-    border: _border,
     ...other
   } = props;
   const prefix = usePrefix();
@@ -31,11 +31,16 @@ export function StructuredListWrapper(props) {
     [`${prefix}--structured-list--condensed`]: isCondensed,
     [`${prefix}--structured-list--flush`]: isFlush,
   });
+  const [selectedRow, setSelectedRow] = React.useState(null);
 
   return (
-    <div role="table" className={classes} {...other} aria-label={ariaLabel}>
-      {children}
-    </div>
+    <GridSelectedRowStateContext.Provider value={selectedRow}>
+      <GridSelectedRowDispatchContext.Provider value={setSelectedRow}>
+        <div role="table" className={classes} {...other} aria-label={ariaLabel}>
+          {children}
+        </div>
+      </GridSelectedRowDispatchContext.Provider>
+    </GridSelectedRowStateContext.Provider>
   );
 }
 
@@ -45,14 +50,6 @@ StructuredListWrapper.propTypes = {
    */
   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
    */
@@ -81,9 +78,9 @@ StructuredListWrapper.propTypes = {
 
 StructuredListWrapper.defaultProps = {
   selection: false,
-  ariaLabel: 'Structured list section',
   isCondensed: false,
   isFlush: false,
+  ariaLabel: 'Structured list section',
 };
 
 export function StructuredListHead(props) {
@@ -145,26 +142,41 @@ StructuredListBody.defaultProps = {
   onKeyDown: () => {},
 };
 
+const GridRowContext = React.createContext(null);
+
 export function StructuredListRow(props) {
-  const { onKeyDown, tabIndex, children, className, head, label, ...other } =
-    props;
+  const { onKeyDown, children, className, head, ...other } = props;
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
+  const id = useId('grid-input');
+  const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
   const prefix = usePrefix();
+  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,
   });
 
-  return label ? (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <label
+  return head ? (
+    <div role="row" {...other} className={classes}>
+      {children}
+    </div>
+  ) : (
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    <div
       {...other}
-      tabIndex={tabIndex}
+      role="row"
       className={classes}
+      onClick={() => setSelectedRow(id)}
+      onFocus={() => {
+        setHasFocusWithin(true);
+      }}
+      onBlur={() => {
+        setHasFocusWithin(false);
+      }}
       onKeyDown={onKeyDown}>
-      {children}
-    </label>
-  ) : (
-    <div role="row" {...other} className={classes}>
-      {children}
+      <GridRowContext.Provider value={value}>
+        {children}
+      </GridRowContext.Provider>
     </div>
   );
 }
@@ -188,41 +200,53 @@ StructuredListRow.propTypes = {
   /**
    * Specify whether a `<label>` should be used
    */
-  label: PropTypes.bool,
+  label: deprecate(
+    PropTypes.bool,
+    `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.`
+  ),
 
   /**
    * 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 defaultId = useId('structureListInput');
+  const {
+    className,
+    name = `structured-list-input-${defaultId}`,
+    title,
+    id,
+    ...other
+  } = props;
   const prefix = usePrefix();
-  const classes = classNames(`${prefix}--structured-list-input`, className);
-  const instanceId = id || getInstanceId();
+  const classes = classNames(
+    `${prefix}--structured-list-input`,
+    `${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={-1}
-      id={instanceId}
+      tabIndex={0}
+      checked={row && row.id === selectedRow}
+      value={row?.id ?? ''}
+      onChange={(event) => {
+        setSelectedRow(event.target.value);
+      }}
+      id={id ?? defaultId}
       className={classes}
-      value={value}
       name={name}
       title={title}
     />
@@ -238,7 +262,10 @@ StructuredListInput.propTypes = {
   /**
    * Specify whether the underlying input should be checked by default
    */
-  defaultChecked: PropTypes.bool,
+  defaultChecked: deprecate(
+    PropTypes.bool,
+    `\nThe prop \`defaultChecked\` is no longer needed and will be removed in the next major version of Carbon.`
+  ),
 
   /**
    * Specify a custom `id` for the input
@@ -253,7 +280,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
@@ -263,12 +293,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',
 };
 
@@ -281,8 +312,16 @@ export function StructuredListCell(props) {
     [`${prefix}--structured-list-content--nowrap`]: noWrap,
   });
 
+  if (head) {
+    return (
+      <span className={classes} role="columnheader" {...other}>
+        {children}
+      </span>
+    );
+  }
+
   return (
-    <div className={classes} role={head ? 'columnheader' : 'cell'} {...other}>
+    <div className={classes} role="cell" {...other}>
       {children}
     </div>
   );
@@ -314,3 +353,12 @@ StructuredListCell.defaultProps = {
   head: false,
   noWrap: false,
 };
+
+export default {
+  StructuredListWrapper,
+  StructuredListHead,
+  StructuredListBody,
+  StructuredListRow,
+  StructuredListInput,
+  StructuredListCell,
+};
diff --git a/packages/react/src/components/StructuredList/next/StructuredList.stories.js b/packages/react/src/components/StructuredList/StructuredList.stories.js
similarity index 98%
rename from packages/react/src/components/StructuredList/next/StructuredList.stories.js
rename to packages/react/src/components/StructuredList/StructuredList.stories.js
index ae5f879dee50..2b7d13e3f404 100644
--- a/packages/react/src/components/StructuredList/next/StructuredList.stories.js
+++ b/packages/react/src/components/StructuredList/StructuredList.stories.js
@@ -16,8 +16,8 @@ import {
   StructuredListRow,
   StructuredListInput,
   StructuredListCell,
-} from './StructuredList';
-import StructuredListSkeleton from '../StructuredList.Skeleton';
+} from './';
+import StructuredListSkeleton from './StructuredList.Skeleton';
 
 const prefix = 'cds';
 
diff --git a/packages/react/src/components/StructuredList/index.js b/packages/react/src/components/StructuredList/index.js
index 5a66977aa16c..9fc3f1a77021 100644
--- a/packages/react/src/components/StructuredList/index.js
+++ b/packages/react/src/components/StructuredList/index.js
@@ -4,58 +4,6 @@
  * 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 {
-  StructuredListWrapper as StructuredListWrapperNext,
-  StructuredListHead as StructuredListHeadNext,
-  StructuredListInput as StructuredListInputNext,
-  StructuredListBody as StructuredListBodyNext,
-  StructuredListRow as StructuredListRowNext,
-  StructuredListCell as StructuredListCellNext,
-} from './next/StructuredList';
-import {
-  StructuredListWrapper as StructuredListWrapperClassic,
-  StructuredListHead as StructuredListHeadClassic,
-  StructuredListInput as StructuredListInputClassic,
-  StructuredListBody as StructuredListBodyClassic,
-  StructuredListRow as StructuredListRowClassic,
-  StructuredListCell as StructuredListCellClassic,
-} from './StructuredList';
-import { createComponentToggle } from '../../internal/ComponentToggle';
-
-export const StructuredListWrapper = createComponentToggle({
-  name: 'StructuredListWrapper',
-  next: StructuredListWrapperNext,
-  classic: StructuredListWrapperClassic,
-});
-
-export const StructuredListHead = createComponentToggle({
-  name: 'StructuredListHead',
-  next: StructuredListHeadNext,
-  classic: StructuredListHeadClassic,
-});
-
-export const StructuredListInput = createComponentToggle({
-  name: 'StructuredListInput',
-  next: StructuredListInputNext,
-  classic: StructuredListInputClassic,
-});
-
-export const StructuredListBody = createComponentToggle({
-  name: 'StructuredListBody',
-  next: StructuredListBodyNext,
-  classic: StructuredListBodyClassic,
-});
-
-export const StructuredListRow = createComponentToggle({
-  name: 'StructuredListRow',
-  next: StructuredListRowNext,
-  classic: StructuredListRowClassic,
-});
-
-export const StructuredListCell = createComponentToggle({
-  name: 'StructuredListCell',
-  next: StructuredListCellNext,
-  classic: StructuredListCellClassic,
-});
 
+export * from './StructuredList';
 export { default as StructuredListSkeleton } from './StructuredList.Skeleton';
diff --git a/packages/react/src/components/StructuredList/next/StructuredList-test.js b/packages/react/src/components/StructuredList/next/StructuredList-test.js
deleted file mode 100644
index 47d645b139d1..000000000000
--- a/packages/react/src/components/StructuredList/next/StructuredList-test.js
+++ /dev/null
@@ -1,205 +0,0 @@
-/**
- * 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';
-
-const prefix = 'cds';
-
-describe('StructuredListWrapper', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(
-      <StructuredListWrapper className="extra-class">hi</StructuredListWrapper>
-    );
-
-    it('should have the expected classes', () => {
-      expect(
-        wrapper.find('div').hasClass(`${prefix}--structured-list`)
-      ).toEqual(true);
-    });
-
-    it('Should add extra classes that are passed via className', () => {
-      expect(wrapper.find('div').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.find('div').hasClass(`${prefix}--structured-list--selection`)
-      ).toEqual(true);
-    });
-
-    it('Should add the modifier class for condensed when isCondensed prop is true', () => {
-      wrapper.setProps({ isCondensed: true });
-      expect(
-        wrapper.find('div').hasClass(`${prefix}--structured-list--condensed`)
-      ).toEqual(true);
-    });
-
-    it('Should add the modifier class for flush when isFlush prop is true', () => {
-      wrapper.setProps({ isFlush: true });
-      expect(
-        wrapper.find('div').hasClass(`${prefix}--structured-list--flush`)
-      ).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 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/next/StructuredList.js b/packages/react/src/components/StructuredList/next/StructuredList.js
deleted file mode 100644
index d502d57a1d01..000000000000
--- a/packages/react/src/components/StructuredList/next/StructuredList.js
+++ /dev/null
@@ -1,364 +0,0 @@
-/**
- * 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, { useState } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { useId } from '../../../internal/useId';
-import deprecate from '../../../prop-types/deprecate';
-import { usePrefix } from '../../../internal/usePrefix';
-
-const GridSelectedRowStateContext = React.createContext(null);
-const GridSelectedRowDispatchContext = React.createContext(null);
-
-export function StructuredListWrapper(props) {
-  const {
-    children,
-    selection,
-    className,
-    ariaLabel,
-    isCondensed,
-    isFlush,
-    ...other
-  } = props;
-  const prefix = usePrefix();
-  const classes = classNames(`${prefix}--structured-list`, className, {
-    [`${prefix}--structured-list--selection`]: selection,
-    [`${prefix}--structured-list--condensed`]: isCondensed,
-    [`${prefix}--structured-list--flush`]: isFlush,
-  });
-  const [selectedRow, setSelectedRow] = React.useState(null);
-
-  return (
-    <GridSelectedRowStateContext.Provider value={selectedRow}>
-      <GridSelectedRowDispatchContext.Provider value={setSelectedRow}>
-        <div role="table" className={classes} {...other} aria-label={ariaLabel}>
-          {children}
-        </div>
-      </GridSelectedRowDispatchContext.Provider>
-    </GridSelectedRowStateContext.Provider>
-  );
-}
-
-StructuredListWrapper.propTypes = {
-  /**
-   * Specify a label to be read by screen readers on the container node
-   */
-  ariaLabel: PropTypes.string,
-
-  /**
-   * Provide the contents of your StructuredListWrapper
-   */
-  children: PropTypes.node,
-
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify if structured list is condensed, default is false
-   */
-  isCondensed: PropTypes.bool,
-
-  /**
-   * Specify if structured list is flush, default is false
-   */
-  isFlush: PropTypes.bool,
-
-  /**
-   * Specify whether your StructuredListWrapper should have selections
-   */
-  selection: PropTypes.bool,
-};
-
-StructuredListWrapper.defaultProps = {
-  selection: false,
-  isCondensed: false,
-  isFlush: false,
-  ariaLabel: 'Structured list section',
-};
-
-export function StructuredListHead(props) {
-  const { children, className, ...other } = props;
-  const prefix = usePrefix();
-  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 prefix = usePrefix();
-  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: () => {},
-};
-
-const GridRowContext = React.createContext(null);
-
-export function StructuredListRow(props) {
-  const { onKeyDown, children, className, head, ...other } = props;
-  const [hasFocusWithin, setHasFocusWithin] = useState(false);
-  const id = useId('grid-input');
-  const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
-  const prefix = usePrefix();
-  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,
-  });
-
-  return head ? (
-    <div role="row" {...other} className={classes}>
-      {children}
-    </div>
-  ) : (
-    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    <div
-      {...other}
-      role="row"
-      className={classes}
-      onClick={() => setSelectedRow(id)}
-      onFocus={() => {
-        setHasFocusWithin(true);
-      }}
-      onBlur={() => {
-        setHasFocusWithin(false);
-      }}
-      onKeyDown={onKeyDown}>
-      <GridRowContext.Provider value={value}>
-        {children}
-      </GridRowContext.Provider>
-    </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: deprecate(
-    PropTypes.bool,
-    `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.`
-  ),
-
-  /**
-   * Provide a handler that is invoked on the key down event for the control,
-   */
-  onKeyDown: PropTypes.func,
-};
-
-StructuredListRow.defaultProps = {
-  head: false,
-  onKeyDown: () => {},
-};
-
-export function StructuredListInput(props) {
-  const defaultId = useId('structureListInput');
-  const {
-    className,
-    name = `structured-list-input-${defaultId}`,
-    title,
-    id,
-    ...other
-  } = props;
-  const prefix = usePrefix();
-  const classes = classNames(
-    `${prefix}--structured-list-input`,
-    `${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}
-      checked={row && row.id === selectedRow}
-      value={row?.id ?? ''}
-      onChange={(event) => {
-        setSelectedRow(event.target.value);
-      }}
-      id={id ?? defaultId}
-      className={classes}
-      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: deprecate(
-    PropTypes.bool,
-    `\nThe prop \`defaultChecked\` is no longer needed and will be removed in the next major version of Carbon.`
-  ),
-
-  /**
-   * 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: deprecate(
-    PropTypes.func,
-    `\nThe prop \`onChange\` will be removed in the next major version of Carbon.`
-  ),
-
-  /**
-   * Provide a `title` for the input
-   */
-  title: PropTypes.string,
-
-  /**
-   * Specify the value of the input
-   */
-  value: deprecate(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    `\nThe prop \`value\` will be removed in the next major version of Carbon.`
-  ),
-};
-
-StructuredListInput.defaultProps = {
-  title: 'title',
-};
-
-export function StructuredListCell(props) {
-  const { children, className, head, noWrap, ...other } = props;
-  const prefix = usePrefix();
-  const classes = classNames(className, {
-    [`${prefix}--structured-list-th`]: head,
-    [`${prefix}--structured-list-td`]: !head,
-    [`${prefix}--structured-list-content--nowrap`]: noWrap,
-  });
-
-  if (head) {
-    return (
-      <span className={classes} role="columnheader" {...other}>
-        {children}
-      </span>
-    );
-  }
-
-  return (
-    <div className={classes} role="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,
-};
-
-export default {
-  StructuredListWrapper,
-  StructuredListHead,
-  StructuredListBody,
-  StructuredListRow,
-  StructuredListInput,
-  StructuredListCell,
-};
diff --git a/packages/react/src/components/StructuredList/next/StructuredList.mdx b/packages/react/src/components/StructuredList/next/StructuredList.mdx
deleted file mode 100644
index 6632318ffd71..000000000000
--- a/packages/react/src/components/StructuredList/next/StructuredList.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Props } from '@storybook/addon-docs';
-
-# StructuredList
-
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/StructuredList)
-&nbsp;|&nbsp;
-[Usage guidelines](https://www.carbondesignsystem.com/components/structured-list/usage)
-&nbsp;|&nbsp;
-[Accessibility](https://www.carbondesignsystem.com/components/structured-list/accessibility)
-
-## Table of Contents
-
-## Overview
-
-## Component API
-
-<Props />
-
-## Feedback
-
-Help us improve this component by providing feedback, asking questions on Slack,
-or updating this file on
-[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/StructuredList/StructuredList.mdx).