From 4691af9be7c770a73232aa36699a60e8e9d8eab3 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Mon, 31 Oct 2022 14:52:40 -0500
Subject: [PATCH] chore(search): add playground story and remove next folder
 (#12380)

* chore(search): add playground story

* chore(search): remove next folder

* chore(search): remove next folder

* chore(search): update snapshots

* chore(search): update snapshots

* Update DataTable-test.js.snap

* Update TableToolbarSearch-test.js.snap

* docs: update snapshot

* docs: add displayname update tests

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../__snapshots__/DataTable-test.js.snap      | 124 ++---
 .../TableToolbarSearch-test.js.snap           |  44 +-
 .../src/components/Search/Search-test.js      | 184 ++++---
 .../react/src/components/Search/Search.js     | 499 ++++++++----------
 .../Search/{next => }/Search.stories.js       | 107 +++-
 packages/react/src/components/Search/index.js |  11 +-
 .../src/components/Search/next/Search-test.js | 335 ------------
 .../src/components/Search/next/Search.js      | 255 ---------
 8 files changed, 522 insertions(+), 1037 deletions(-)
 rename packages/react/src/components/Search/{next => }/Search.stories.js (62%)
 delete mode 100644 packages/react/src/components/Search/next/Search-test.js
 delete mode 100644 packages/react/src/components/Search/next/Search.js

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index 550867deb6e3..041dc78208b4 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -112,13 +112,13 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
       >
         <h4
           className="cds--data-table-header__title"
-          id="tc-74-title"
+          id="tc-82-title"
         >
           DataTable with selection
         </h4>
         <p
           className="cds--data-table-header__description"
-          id="tc-74-description"
+          id="tc-82-description"
         />
       </div>
       <Table
@@ -130,7 +130,7 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
         >
           <table
             aria-describedby={null}
-            aria-labelledby="tc-74-title"
+            aria-labelledby="tc-82-title"
             className="cds--data-table"
           >
             <TableHead>
@@ -467,13 +467,13 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
       >
         <h4
           className="cds--data-table-header__title"
-          id="tc-68-title"
+          id="tc-76-title"
         >
           DataTable with selection
         </h4>
         <p
           className="cds--data-table-header__description"
-          id="tc-68-description"
+          id="tc-76-description"
         />
       </div>
       <Table
@@ -485,7 +485,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
         >
           <table
             aria-describedby={null}
-            aria-labelledby="tc-68-title"
+            aria-labelledby="tc-76-title"
             className="cds--data-table"
           >
             <TableHead>
@@ -900,13 +900,13 @@ exports[`DataTable selection should have select-all default to un-checked if no
       >
         <h4
           className="cds--data-table-header__title"
-          id="tc-44-title"
+          id="tc-49-title"
         >
           DataTable with selection
         </h4>
         <p
           className="cds--data-table-header__description"
-          id="tc-44-description"
+          id="tc-49-description"
         />
       </div>
       <Table
@@ -918,7 +918,7 @@ exports[`DataTable selection should have select-all default to un-checked if no
         >
           <table
             aria-describedby={null}
-            aria-labelledby="tc-44-title"
+            aria-labelledby="tc-49-title"
             className="cds--data-table"
           >
             <TableHead>
@@ -1304,13 +1304,13 @@ exports[`DataTable selection should render 1`] = `
       >
         <h4
           className="cds--data-table-header__title"
-          id="tc-41-title"
+          id="tc-46-title"
         >
           DataTable with selection
         </h4>
         <p
           className="cds--data-table-header__description"
-          id="tc-41-description"
+          id="tc-46-description"
         />
       </div>
       <Table
@@ -1322,7 +1322,7 @@ exports[`DataTable selection should render 1`] = `
         >
           <table
             aria-describedby={null}
-            aria-labelledby="tc-41-title"
+            aria-labelledby="tc-46-title"
             className="cds--data-table"
           >
             <TableHead>
@@ -1965,13 +1965,13 @@ exports[`DataTable should render 1`] = `
       >
         <h4
           className="cds--data-table-header__title"
-          id="tc-8-title"
+          id="tc-9-title"
         >
           DataTable with toolbar
         </h4>
         <p
           className="cds--data-table-header__description"
-          id="tc-8-description"
+          id="tc-9-description"
         />
       </div>
       <TableToolbar
@@ -2285,7 +2285,6 @@ exports[`DataTable should render 1`] = `
               >
                 <Search
                   className="cds--toolbar-search-container-persistent"
-                  closeButtonLabelText="Clear search input"
                   id="custom-id"
                   labelText="Filter table"
                   onBlur={[Function]}
@@ -2295,7 +2294,6 @@ exports[`DataTable should render 1`] = `
                   placeholder="Filter table"
                   size="lg"
                   tabIndex="0"
-                  type="text"
                   value=""
                 >
                   <div
@@ -2305,36 +2303,39 @@ exports[`DataTable should render 1`] = `
                   >
                     <div
                       className="cds--search-magnifier"
+                      role={null}
                     >
-                      <ForwardRef(Search)
-                        className="cds--search-magnifier-icon"
-                      >
-                        <Icon
+                      <CustomSearchIcon>
+                        <ForwardRef(Search)
                           className="cds--search-magnifier-icon"
-                          fill="currentColor"
-                          height={16}
-                          preserveAspectRatio="xMidYMid meet"
-                          viewBox="0 0 16 16"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden={true}
+                          <Icon
                             className="cds--search-magnifier-icon"
                             fill="currentColor"
-                            focusable="false"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
                             viewBox="0 0 16 16"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
-                            <path
-                              d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5 C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                            />
-                          </svg>
-                        </Icon>
-                      </ForwardRef(Search)>
+                            <svg
+                              aria-hidden={true}
+                              className="cds--search-magnifier-icon"
+                              fill="currentColor"
+                              focusable="false"
+                              height={16}
+                              preserveAspectRatio="xMidYMid meet"
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5 C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
+                              />
+                            </svg>
+                          </Icon>
+                        </ForwardRef(Search)>
+                      </CustomSearchIcon>
                     </div>
                     <label
                       className="cds--label"
@@ -2361,6 +2362,7 @@ exports[`DataTable should render 1`] = `
                       aria-label="Clear search input"
                       className="cds--search-close cds--search-close--hidden"
                       onClick={[Function]}
+                      title="Clear search input"
                       type="button"
                     >
                       <ForwardRef(Close)>
@@ -2515,7 +2517,7 @@ exports[`DataTable should render 1`] = `
         >
           <table
             aria-describedby={null}
-            aria-labelledby="tc-8-title"
+            aria-labelledby="tc-9-title"
             className="cds--data-table cds--data-table--lg"
           >
             <TableHead>
@@ -2987,13 +2989,13 @@ exports[`DataTable sticky header should render 1`] = `
       >
         <h4
           className="cds--data-table-header__title"
-          id="tc-120-title"
+          id="tc-134-title"
         >
           DataTable with toolbar
         </h4>
         <p
           className="cds--data-table-header__description"
-          id="tc-120-description"
+          id="tc-134-description"
         />
       </div>
       <TableToolbar
@@ -3307,7 +3309,6 @@ exports[`DataTable sticky header should render 1`] = `
               >
                 <Search
                   className="cds--toolbar-search-container-persistent"
-                  closeButtonLabelText="Clear search input"
                   id="custom-id"
                   labelText="Filter table"
                   onBlur={[Function]}
@@ -3317,7 +3318,6 @@ exports[`DataTable sticky header should render 1`] = `
                   placeholder="Filter table"
                   size="lg"
                   tabIndex="0"
-                  type="text"
                   value=""
                 >
                   <div
@@ -3327,36 +3327,39 @@ exports[`DataTable sticky header should render 1`] = `
                   >
                     <div
                       className="cds--search-magnifier"
+                      role={null}
                     >
-                      <ForwardRef(Search)
-                        className="cds--search-magnifier-icon"
-                      >
-                        <Icon
+                      <CustomSearchIcon>
+                        <ForwardRef(Search)
                           className="cds--search-magnifier-icon"
-                          fill="currentColor"
-                          height={16}
-                          preserveAspectRatio="xMidYMid meet"
-                          viewBox="0 0 16 16"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            aria-hidden={true}
+                          <Icon
                             className="cds--search-magnifier-icon"
                             fill="currentColor"
-                            focusable="false"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
                             viewBox="0 0 16 16"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
-                            <path
-                              d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5 C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                            />
-                          </svg>
-                        </Icon>
-                      </ForwardRef(Search)>
+                            <svg
+                              aria-hidden={true}
+                              className="cds--search-magnifier-icon"
+                              fill="currentColor"
+                              focusable="false"
+                              height={16}
+                              preserveAspectRatio="xMidYMid meet"
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5 C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
+                              />
+                            </svg>
+                          </Icon>
+                        </ForwardRef(Search)>
+                      </CustomSearchIcon>
                     </div>
                     <label
                       className="cds--label"
@@ -3383,6 +3386,7 @@ exports[`DataTable sticky header should render 1`] = `
                       aria-label="Clear search input"
                       className="cds--search-close cds--search-close--hidden"
                       onClick={[Function]}
+                      title="Clear search input"
                       type="button"
                     >
                       <ForwardRef(Close)>
@@ -3537,7 +3541,7 @@ exports[`DataTable sticky header should render 1`] = `
         >
           <table
             aria-describedby={null}
-            aria-labelledby="tc-120-title"
+            aria-labelledby="tc-134-title"
             className="cds--data-table cds--data-table--lg"
           >
             <TableHead>
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
index aff35f5d1d4c..fe8124b2b101 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
@@ -12,7 +12,6 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
 >
   <Search
     className="custom-class cds--toolbar-search-container-expandable"
-    closeButtonLabelText="Clear search input"
     id="custom-id"
     labelText="Filter table"
     onBlur={[Function]}
@@ -22,7 +21,6 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
     placeholder="Filter table"
     size="lg"
     tabIndex="0"
-    type="text"
     value=""
   >
     <div
@@ -32,36 +30,39 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
     >
       <div
         className="cds--search-magnifier"
+        role={null}
       >
-        <ForwardRef(Search)
-          className="cds--search-magnifier-icon"
-        >
-          <Icon
+        <CustomSearchIcon>
+          <ForwardRef(Search)
             className="cds--search-magnifier-icon"
-            fill="currentColor"
-            height={16}
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden={true}
+            <Icon
               className="cds--search-magnifier-icon"
               fill="currentColor"
-              focusable="false"
               height={16}
               preserveAspectRatio="xMidYMid meet"
               viewBox="0 0 16 16"
               width={16}
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path
-                d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5 C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-              />
-            </svg>
-          </Icon>
-        </ForwardRef(Search)>
+              <svg
+                aria-hidden={true}
+                className="cds--search-magnifier-icon"
+                fill="currentColor"
+                focusable="false"
+                height={16}
+                preserveAspectRatio="xMidYMid meet"
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5 C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
+                />
+              </svg>
+            </Icon>
+          </ForwardRef(Search)>
+        </CustomSearchIcon>
       </div>
       <label
         className="cds--label"
@@ -88,6 +89,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
         aria-label="Clear search input"
         className="cds--search-close cds--search-close--hidden"
         onClick={[Function]}
+        title="Clear search input"
         type="button"
       >
         <ForwardRef(Close)>
diff --git a/packages/react/src/components/Search/Search-test.js b/packages/react/src/components/Search/Search-test.js
index 1ca5966f00fe..97a28907e2c8 100644
--- a/packages/react/src/components/Search/Search-test.js
+++ b/packages/react/src/components/Search/Search-test.js
@@ -7,13 +7,27 @@
 
 import React from 'react';
 import { Search as SearchIcon, Close } from '@carbon/icons-react';
-import Search from '../Search';
-import SearchSkeleton from '../Search/Search.Skeleton';
+import Search from './Search';
 import { mount, shallow } from 'enzyme';
 
 const prefix = 'cds';
 
 describe('Search', () => {
+  let wrapper;
+
+  const button = () => wrapper.find('button');
+  const input = () => wrapper.find('input');
+
+  const render = (props) => {
+    if (wrapper) {
+      return wrapper.setProps(props);
+    }
+
+    wrapper = mount(<Search labelText="testlabel" {...props} />);
+
+    return wrapper;
+  };
+
   describe('renders as expected', () => {
     const wrapper = mount(
       <Search
@@ -125,6 +139,10 @@ describe('Search', () => {
           expect(type1).toEqual('button');
           expect(type2).toEqual('button');
         });
+
+        it('should have clear title', () => {
+          expect(btns.prop('title')).toBe('Clear search input');
+        });
       });
 
       describe('icons', () => {
@@ -178,36 +196,61 @@ describe('Search', () => {
   });
 
   describe('events', () => {
-    describe('enabled textinput', () => {
-      let onClick;
-      let onChange;
-      let onClear;
-      let wrapper;
-      let input;
-      let eventObject;
+    describe('onChange', () => {
+      const onChange = jest.fn();
 
       beforeEach(() => {
-        onClick = jest.fn();
-        onChange = jest.fn();
-        onClear = jest.fn();
+        onChange.mockReset();
+        render({ onChange: (e) => onChange(e.target.value) });
+      });
 
-        wrapper = mount(
-          <Search
-            id="test"
-            labelText="testlabel"
-            onClick={onClick}
-            onChange={onChange}
-            onClear={onClear}
-          />
-        );
+      describe('when input value is changed', () => {
+        const target = { value: 'test' };
+        const mock = { target };
 
-        input = wrapper.find('input');
-        eventObject = {
-          target: {
-            defaultValue: 'test',
-          },
-        };
+        beforeEach(() => {
+          input().simulate('change', mock);
+        });
+
+        it('is called', () => {
+          expect(onChange).toHaveBeenCalledWith(target.value);
+        });
+      });
+
+      describe('when clear button is clicked', () => {
+        const target = { value: '' };
+
+        beforeEach(() => {
+          button().simulate('click');
+        });
+
+        it('is called', () => {
+          expect(onChange).toHaveBeenCalledWith(target.value);
+        });
       });
+    });
+
+    describe('enabled textinput', () => {
+      const onClick = jest.fn();
+      const onChange = jest.fn();
+      const onClear = jest.fn();
+
+      const wrapper = shallow(
+        <Search
+          id="test"
+          labelText="testlabel"
+          onClick={onClick}
+          onChange={onChange}
+          onClear={onClear}
+        />
+      );
+
+      const input = wrapper.find('input');
+      const eventObject = {
+        target: {
+          defaultValue: 'test',
+        },
+      };
 
       it('should invoke onClick when input is clicked', () => {
         input.simulate('click');
@@ -216,78 +259,75 @@ describe('Search', () => {
 
       it('should invoke onChange when input value is changed', () => {
         input.simulate('change', eventObject);
-        expect(onChange).toHaveBeenCalledWith(
-          expect.objectContaining(eventObject)
-        );
+        expect(onChange).toHaveBeenCalledWith(eventObject);
       });
 
-      it('should invoke onClear when input value is cleared', () => {
+      it('should call onClear when input value is cleared', () => {
+        const node = document.createElement('div');
+        document.body.appendChild(node);
+
         const wrapper = mount(
           <Search
             id="test"
             labelText="testlabel"
-            onClick={onClick}
-            onChange={onChange}
             onClear={onClear}
             value="test"
-          />
+          />,
+          {
+            attachTo: node,
+          }
         );
-        wrapper.find('button').simulate('click', { target: { value: 'test' } });
+
+        wrapper.find('button').simulate('click', {
+          target: {
+            value: 'test',
+          },
+        });
         expect(onClear).toHaveBeenCalled();
+        expect(wrapper.find('input').getDOMNode()).toHaveFocus();
+
+        document.body.removeChild(node);
       });
     });
   });
 });
 
-describe('SearchSkeleton', () => {
-  describe('Renders as expected', () => {
-    it('Has the expected classes', () => {
-      const wrapper = shallow(<SearchSkeleton />);
-      expect(wrapper.hasClass(`${prefix}--skeleton`)).toEqual(true);
-      expect(wrapper.hasClass(`${prefix}--search--xl`)).toEqual(true);
-    });
-  });
-});
+/**
+ * Find the <input> element.
+ * @param {Enzymecontainer} wrapper
+ * @returns {Enzymecontainer}
+ */
+const getInput = (wrapper) => {
+  return wrapper.find(`.${prefix}--search-input`);
+};
 
-describe('SearchSkeleton Small', () => {
-  describe('Renders as expected', () => {
-    it('Has the expected classes', () => {
-      const wrapper = shallow(<SearchSkeleton small />);
-      expect(wrapper.hasClass(`${prefix}--skeleton`)).toEqual(true);
-      expect(wrapper.hasClass(`${prefix}--search--sm`)).toEqual(true);
-    });
-  });
-});
+/**
+ * Find the value of the <input> element
+ * @param {EnzymeWrapper} wrapper
+ * @returns {number}
+ */
+const getInputValue = (wrapper) => {
+  return getInput(wrapper).prop('value');
+};
 
 describe('Detecting change in value from props', () => {
-  it('changes the hasContent state upon change in props', () => {
-    const wrapper = mount(
-      <Search
-        id="test"
-        className="extra-class"
-        label="Search Field"
-        labelText="testlabel"
-        value="foo"
-      />
+  it('should have empty value', () => {
+    const search = shallow(
+      <Search id="test" className="extra-class" labelText="testlabel" />
     );
-    expect(wrapper.state().hasContent).toBeTruthy();
-    wrapper.setProps({ value: '' });
-    expect(wrapper.state().hasContent).toBeFalsy();
+    expect(getInputValue(search)).toBe(undefined);
   });
 
-  it('avoids change the hasContent state upon setting props, unless the value actually changes', () => {
-    const wrapper = mount(
+  it('should set value if value prop is added', () => {
+    const search = shallow(
       <Search
         id="test"
         className="extra-class"
-        label="Search Field"
         labelText="testlabel"
         value="foo"
       />
     );
-    expect(wrapper.state().hasContent).toBeTruthy();
-    wrapper.setState({ hasContent: false });
-    wrapper.setProps({ value: 'foo' });
-    expect(wrapper.state().hasContent).toBeFalsy();
+
+    expect(getInputValue(search)).toBe('foo');
   });
 });
diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js
index a23773ff2e07..b2b1dca4c61e 100644
--- a/packages/react/src/components/Search/Search.js
+++ b/packages/react/src/components/Search/Search.js
@@ -5,283 +5,252 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import classNames from 'classnames';
 import { Search as SearchIcon, Close } from '@carbon/icons-react';
-import { composeEventHandlers } from '../../tools/events';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useRef, useState } from 'react';
+import { focus } from '../../internal/focus';
 import { keys, match } from '../../internal/keyboard';
+import { useId } from '../../internal/useId';
+import { usePrefix } from '../../internal/usePrefix';
+import { composeEventHandlers } from '../../tools/events';
+import { useMergedRefs } from '../../internal/useMergedRefs';
 import deprecate from '../../prop-types/deprecate';
-import { FeatureFlagContext } from '../FeatureFlags';
-import { PrefixContext } from '../../internal/usePrefix';
-
-export default class Search extends Component {
-  static propTypes = {
-    /**
-     * Specify an optional className to be applied to the container node
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify a label to be read by screen readers on the "close" button
-     */
-    closeButtonLabelText: PropTypes.string,
-
-    /**
-     * Optionally provide the default value of the `<input>`
-     */
-    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * Specify whether the `<input>` should be disabled
-     */
-    disabled: PropTypes.bool,
-
-    /**
-     * Specify a custom `id` for the input
-     */
-    id: PropTypes.string,
-
-    /**
-     * Provide the label text for the Search icon
-     */
-    labelText: PropTypes.node.isRequired,
-
-    /**
-     * Specify light version or default version of this control
-     */
-    light: PropTypes.bool,
-
-    /**
-     * Optional callback called when the search value changes.
-     */
-    onChange: PropTypes.func,
-
-    /**
-     * Optional callback called when the search value is cleared.
-     */
-    onClear: PropTypes.func,
-
-    /**
-     * Provide a handler that is invoked on the key down event for the input
-     */
-    onKeyDown: PropTypes.func,
-
-    /**
-     * Deprecated in favor of `placeholder`
-     */
-    placeHolderText: deprecate(
-      PropTypes.string,
-      `\nThe prop \`placeHolderText\` for Search has been deprecated in favor of \`placeholder\`. Please use \`placeholder\` instead.`
-    ),
-
-    /**
-     * Provide an optional placeholder text for the Search.
-     * Note: if the label and placeholder differ,
-     * VoiceOver on Mac will read both
-     */
-    placeholder: PropTypes.string,
-
-    /**
-     * Rendered icon for the Search.
-     * Can be a React component class
-     */
-    renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
-    /**
-     * Specify the search size
-     */
-    size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
-
-    /**
-     * Specify whether the Search should be a small variant
-     */
-
-    /**
-     * Specify whether the load was successful
-     */
-    small: deprecate(
-      PropTypes.bool,
-      `\nThe prop \`small\` for Search has been deprecated in favor of \`size\`. Please use \`size="sm"\` instead.`
-    ),
-
-    /**
-     * Optional prop to specify the type of the `<input>`
-     */
-    type: PropTypes.string,
 
-    /**
-     * Specify the value of the `<input>`
-     */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  };
-
-  static contextType = FeatureFlagContext;
-
-  static defaultProps = {
-    type: 'text',
-    placeholder: '',
-    closeButtonLabelText: 'Clear search input',
-    onChange: () => {},
-    onClear: () => {},
-  };
-
-  state = {
-    hasContent: this.props.value || this.props.defaultValue || false,
-    prevValue: this.props.value,
-  };
-
-  static getDerivedStateFromProps({ value }, state) {
-    const { prevValue } = state;
-    return prevValue === value
-      ? null
-      : {
-          hasContent: !!value,
-          prevValue: value,
-        };
+const Search = React.forwardRef(function Search(
+  {
+    autoComplete = 'off',
+    className,
+    closeButtonLabelText = 'Clear search input',
+    defaultValue,
+    disabled,
+    id,
+    labelText,
+    light,
+    onChange = () => {},
+    onClear = () => {},
+    onKeyDown,
+    onExpand,
+    placeholder = '',
+    renderIcon,
+    role = 'searchbox',
+    size = 'md',
+    type = 'text',
+    value,
+    ...rest
+  },
+  forwardRef
+) {
+  const prefix = usePrefix();
+  const inputRef = useRef(null);
+  const ref = useMergedRefs([forwardRef, inputRef]);
+  const inputId = useId('search-input');
+  const uniqueId = id || inputId;
+  const searchId = `${uniqueId}-search`;
+  const [hasContent, setHasContent] = useState(value || defaultValue || false);
+  const [prevValue, setPrevValue] = useState(value);
+  const searchClasses = cx({
+    [`${prefix}--search`]: true,
+    [`${prefix}--search--sm`]: size === 'sm',
+    [`${prefix}--search--md`]: size === 'md',
+    [`${prefix}--search--lg`]: size === 'lg',
+    [`${prefix}--search--light`]: light,
+    [`${prefix}--search--disabled`]: disabled,
+    [className]: className,
+  });
+  const clearClasses = cx({
+    [`${prefix}--search-close`]: true,
+    [`${prefix}--search-close--hidden`]: !hasContent,
+  });
+
+  if (value !== prevValue) {
+    setHasContent(!!value);
+    setPrevValue(value);
   }
 
-  clearInput = (evt) => {
-    if (!this.props.value) {
-      this.input.value = '';
-      this.props.onChange(evt);
-    } else {
-      const clearedEvt = Object.assign({}, evt.target, {
-        target: {
-          value: '',
-        },
-      });
-      this.props.onChange(clearedEvt);
-    }
-
-    this.props.onClear();
-
-    this.setState({ hasContent: false }, () => this.input.focus());
-  };
-
-  handleChange = (evt) => {
-    this.setState({
-      hasContent: evt.target.value !== '',
-    });
-  };
-
-  handleKeyDown = (evt) => {
-    if (match(evt, keys.Escape)) {
-      this.clearInput(evt);
+  function clearInput() {
+    if (!value) {
+      inputRef.current.value = '';
     }
-  };
 
-  render() {
-    const {
-      className,
-      type,
-      id = (this._inputId =
-        this._inputId ||
-        `search__input__id_${Math.random().toString(36).substr(2)}`),
-      placeHolderText,
-      placeholder,
-      labelText,
-      closeButtonLabelText,
-      small,
-      size = !small ? 'xl' : 'sm',
-      light,
-      disabled,
-      onChange,
-      onKeyDown,
-      renderIcon,
-      onClear, // eslint-disable-line no-unused-vars
-      onExpand, // eslint-disable-line no-unused-vars, react/prop-types
-      ...other
-    } = this.props;
+    const inputTarget = Object.assign({}, inputRef.current, { value: '' });
+    const clearedEvt = { target: inputTarget, type: 'change' };
 
-    const { hasContent } = this.state;
+    onChange(clearedEvt);
+    onClear();
+    setHasContent(false);
+    focus(inputRef);
+  }
 
-    const scope = this.context;
-    let enabled;
+  function handleChange(event) {
+    setHasContent(event.target.value !== '');
+  }
 
-    if (scope.enabled) {
-      enabled = scope.enabled('enable-v11-release');
+  function handleKeyDown(event) {
+    if (match(event, keys.Escape)) {
+      event.stopPropagation();
+      clearInput(event);
     }
+  }
 
-    return (
-      <PrefixContext.Consumer>
-        {(prefix) => {
-          const searchClasses = classNames({
-            [`${prefix}--search`]: true,
-            [`${prefix}--search--sm`]: size === 'sm',
-            // V11: change to md
-            [`${prefix}--search--lg`]: enabled ? size === 'md' : size === 'lg',
-            // V11: change to lg
-            [`${prefix}--search--xl`]: enabled ? size === 'lg' : size === 'xl',
-            [`${prefix}--search--light`]: light,
-            [`${prefix}--search--disabled`]: disabled,
-            [className]: className,
-          });
-
-          const clearClasses = classNames({
-            [`${prefix}--search-close`]: true,
-            [`${prefix}--search-close--hidden`]: !hasContent,
-          });
-
-          let customIcon;
-          if (renderIcon) {
-            customIcon = React.cloneElement(renderIcon, {
-              className: `${prefix}--search-magnifier-icon`,
-            });
-          }
-
-          const searchId = `${id}-search`;
-          const searchIcon = renderIcon ? (
-            customIcon
-          ) : (
-            <SearchIcon className={`${prefix}--search-magnifier-icon`} />
-          );
-
-          return (
-            <div
-              role="search"
-              aria-labelledby={searchId}
-              className={searchClasses}>
-              <div
-                className={`${prefix}--search-magnifier`}
-                ref={(magnifier) => {
-                  this.magnifier = magnifier;
-                }}>
-                {searchIcon}
-              </div>
-              <label id={searchId} htmlFor={id} className={`${prefix}--label`}>
-                {labelText}
-              </label>
-              <input
-                role="searchbox"
-                autoComplete="off"
-                {...other}
-                type={type}
-                disabled={disabled}
-                className={`${prefix}--search-input`}
-                id={id}
-                placeholder={placeHolderText || placeholder}
-                onChange={composeEventHandlers([onChange, this.handleChange])}
-                onKeyDown={composeEventHandlers([
-                  onKeyDown,
-                  this.handleKeyDown,
-                ])}
-                ref={(input) => {
-                  this.input = input;
-                }}
-              />
-              <button
-                className={clearClasses}
-                disabled={disabled}
-                onClick={this.clearInput}
-                type="button"
-                aria-label={closeButtonLabelText}>
-                <Close />
-              </button>
-            </div>
-          );
-        }}
-      </PrefixContext.Consumer>
-    );
+  return (
+    <div role="search" aria-labelledby={searchId} className={searchClasses}>
+      {/* the magnifier is used in ExpandableSearch as a click target to expand,
+      however, it does not need a keyboard event bc the input element gets focus on keyboard nav and expands that way*/}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <div
+        role={onExpand ? 'button' : null}
+        className={`${prefix}--search-magnifier`}
+        onClick={onExpand}>
+        <CustomSearchIcon icon={renderIcon} />
+      </div>
+      <label id={searchId} htmlFor={uniqueId} className={`${prefix}--label`}>
+        {labelText}
+      </label>
+      <input
+        {...rest}
+        autoComplete={autoComplete}
+        className={`${prefix}--search-input`}
+        defaultValue={defaultValue}
+        disabled={disabled}
+        role={role}
+        ref={ref}
+        id={uniqueId}
+        onChange={composeEventHandlers([onChange, handleChange])}
+        onKeyDown={composeEventHandlers([onKeyDown, handleKeyDown])}
+        placeholder={placeholder}
+        type={type}
+        value={value}
+      />
+      <button
+        aria-label={closeButtonLabelText}
+        className={clearClasses}
+        disabled={disabled}
+        onClick={clearInput}
+        title={closeButtonLabelText}
+        type="button">
+        <Close />
+      </button>
+    </div>
+  );
+});
+
+Search.displayName = 'Search';
+Search.propTypes = {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete: PropTypes.string,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText: PropTypes.string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string,
+
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Specify light version or default version of this control
+   */
+  light: deprecate(
+    PropTypes.bool,
+    'The `light` prop for `Search` is no longer needed and has ' +
+      'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'
+  ),
+
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear: PropTypes.func,
+
+  /**
+   * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
+   */
+  onExpand: PropTypes.func,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the input
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Rendered icon for the Search.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role: PropTypes.string,
+
+  /**
+   * Specify the size of the Search
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type: PropTypes.string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+function CustomSearchIcon({ icon }) {
+  const prefix = usePrefix();
+
+  if (icon) {
+    return React.cloneElement(icon, {
+      className: `${prefix}--search-magnifier-icon`,
+    });
   }
+  return <SearchIcon className={`${prefix}--search-magnifier-icon`} />;
 }
+
+CustomSearchIcon.propTypes = {
+  /**
+   * Rendered icon for the Search. Can be a React component class
+   */
+  icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+};
+
+export default Search;
diff --git a/packages/react/src/components/Search/next/Search.stories.js b/packages/react/src/components/Search/Search.stories.js
similarity index 62%
rename from packages/react/src/components/Search/next/Search.stories.js
rename to packages/react/src/components/Search/Search.stories.js
index 910d6b305fd6..f02014858a48 100644
--- a/packages/react/src/components/Search/next/Search.stories.js
+++ b/packages/react/src/components/Search/Search.stories.js
@@ -5,18 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ExpandableSearch from '../../ExpandableSearch';
-import Search from '../';
+import ExpandableSearch from '../ExpandableSearch';
+import Search from '.';
 import React from 'react';
-import { Layer } from '../../Layer';
+import { Layer } from '../Layer';
 
 export default {
   title: 'Components/Search',
   component: Search,
   argTypes: {
-    size: {
-      options: ['sm', 'md', 'lg'],
-      control: { type: 'select' },
+    light: {
+      table: {
+        disable: true,
+      },
     },
   },
   subcomponents: {
@@ -24,7 +25,7 @@ export default {
   },
 };
 
-export const Default = (args) => (
+export const Default = () => (
   <Search
     size="lg"
     defaultValue="A default value"
@@ -33,11 +34,10 @@ export const Default = (args) => (
     id="search-1"
     onChange={() => {}}
     onKeyDown={() => {}}
-    {...args}
   />
 );
 
-export const Disabled = (args) => (
+export const Disabled = () => (
   <Search
     disabled
     size="lg"
@@ -47,11 +47,10 @@ export const Disabled = (args) => (
     id="search-1"
     onChange={() => {}}
     onKeyDown={() => {}}
-    {...args}
   />
 );
 
-export const Expandable = (args) => (
+export const Expandable = () => (
   <ExpandableSearch
     size="lg"
     labelText="Search"
@@ -59,11 +58,10 @@ export const Expandable = (args) => (
     id="search-expandable-1"
     onChange={() => {}}
     onKeyDown={() => {}}
-    {...args}
   />
 );
 
-export const WithLayer = (args) => {
+export const WithLayer = () => {
   return (
     <>
       <Search
@@ -74,7 +72,6 @@ export const WithLayer = (args) => {
         id="search-1"
         onChange={() => {}}
         onKeyDown={() => {}}
-        {...args}
       />
       <Layer>
         <Search
@@ -85,7 +82,6 @@ export const WithLayer = (args) => {
           id="search-1"
           onChange={() => {}}
           onKeyDown={() => {}}
-          {...args}
         />
         <Layer>
           <Search
@@ -96,7 +92,6 @@ export const WithLayer = (args) => {
             id="search-1"
             onChange={() => {}}
             onKeyDown={() => {}}
-            {...args}
           />
         </Layer>
       </Layer>
@@ -104,7 +99,7 @@ export const WithLayer = (args) => {
   );
 };
 
-export const ExpandableWithLayer = (args) => {
+export const ExpandableWithLayer = () => {
   return (
     <>
       <ExpandableSearch
@@ -114,7 +109,6 @@ export const ExpandableWithLayer = (args) => {
         id="search-expandable-1"
         onChange={() => {}}
         onKeyDown={() => {}}
-        {...args}
       />
       <Layer>
         <ExpandableSearch
@@ -124,7 +118,6 @@ export const ExpandableWithLayer = (args) => {
           id="search-expandable-1"
           onChange={() => {}}
           onKeyDown={() => {}}
-          {...args}
         />
         <Layer>
           <ExpandableSearch
@@ -134,10 +127,84 @@ export const ExpandableWithLayer = (args) => {
             id="search-expandable-1"
             onChange={() => {}}
             onKeyDown={() => {}}
-            {...args}
           />
         </Layer>
       </Layer>
     </>
   );
 };
+
+export const Playground = (args) => (
+  <div style={{ width: args.playgroundWidth }}>
+    <Search id="search-playground-1" {...args} />
+  </div>
+);
+
+Playground.argTypes = {
+  playgroundWidth: {
+    control: { type: 'range', min: 300, max: 800, step: 50 },
+    defaultValue: 300,
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  closeButtonLabelText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Clear search input',
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  id: {
+    table: {
+      disable: true,
+    },
+  },
+  defaultValue: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Default value',
+  },
+  labelText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Label text',
+  },
+  placeholder: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Placeholder text',
+  },
+  renderIcon: {
+    control: false,
+  },
+  role: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'searchbox',
+  },
+  size: {
+    defaultValue: 'md',
+    options: ['sm', 'md', 'lg'],
+    control: {
+      type: 'select',
+    },
+  },
+  type: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'text',
+  },
+};
diff --git a/packages/react/src/components/Search/index.js b/packages/react/src/components/Search/index.js
index 5b710f70130e..f42094eaca83 100644
--- a/packages/react/src/components/Search/index.js
+++ b/packages/react/src/components/Search/index.js
@@ -4,14 +4,7 @@
  * 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 * as FeatureFlags from '@carbon/feature-flags';
-import { default as SearchNext } from './next/Search';
-import { default as SearchClassic } from './Search';
-
-const Search = FeatureFlags.enabled('enable-v11-release')
-  ? SearchNext
-  : SearchClassic;
-
-export * from './Search.Skeleton';
+import Search from './Search';
 
+export { default as SearchSkeleton } from './Search.Skeleton';
 export default Search;
diff --git a/packages/react/src/components/Search/next/Search-test.js b/packages/react/src/components/Search/next/Search-test.js
deleted file mode 100644
index bcf46d67c3d3..000000000000
--- a/packages/react/src/components/Search/next/Search-test.js
+++ /dev/null
@@ -1,335 +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 { Search as SearchIcon, Close } from '@carbon/icons-react';
-import Search from './Search';
-import { mount, shallow } from 'enzyme';
-
-const prefix = 'cds';
-
-describe('Search', () => {
-  let wrapper;
-
-  // const container = () => wrapper.find(`.${prefix}--search`);
-  const button = () => wrapper.find('button');
-  const input = () => wrapper.find('input');
-  // const label = () => wrapper.find('label');
-
-  const render = (props) => {
-    if (wrapper) {
-      return wrapper.setProps(props);
-    }
-
-    wrapper = mount(<Search labelText="testlabel" {...props} />);
-
-    return wrapper;
-  };
-
-  describe('renders as expected', () => {
-    const wrapper = mount(
-      <Search
-        id="test"
-        className="extra-class"
-        label="Search Field"
-        labelText="testlabel"
-      />
-    );
-
-    const label = wrapper.find('label');
-    const textInput = wrapper.find('input');
-    const container = wrapper.find(`.${prefix}--search`);
-
-    describe('container', () => {
-      it('should add extra classes that are passed via className', () => {
-        expect(container.hasClass('extra-class')).toEqual(true);
-      });
-    });
-
-    describe('input', () => {
-      it('renders as expected', () => {
-        expect(textInput.length).toBe(1);
-      });
-
-      it('has the expected classes', () => {
-        expect(textInput.hasClass(`${prefix}--search-input`)).toEqual(true);
-      });
-
-      it('should set type as expected', () => {
-        expect(textInput.props().type).toEqual('text');
-        wrapper.setProps({ type: 'email' });
-        expect(wrapper.find('input').props().type).toEqual('email');
-      });
-
-      it('should set value as expected', () => {
-        expect(textInput.props().defaultValue).toEqual(undefined);
-        wrapper.setProps({ defaultValue: 'test' });
-        expect(wrapper.find('input').props().defaultValue).toEqual('test');
-        expect(wrapper.find('input').props().value).toEqual(undefined);
-      });
-
-      it('should set placeholder as expected', () => {
-        expect(textInput.props().placeholder).toEqual('');
-        wrapper.setProps({ placeholder: 'Enter text' });
-        expect(wrapper.find('input').props().placeholder).toEqual('Enter text');
-      });
-    });
-
-    describe('label', () => {
-      it('renders a label', () => {
-        expect(label.length).toBe(1);
-      });
-
-      it('has the expected classes', () => {
-        expect(label.hasClass(`${prefix}--label`)).toEqual(true);
-      });
-
-      it('should set label as expected', () => {
-        expect(wrapper.props().label).toEqual('Search Field');
-        wrapper.setProps({ label: 'Email Input' });
-        expect(wrapper.props().label).toEqual('Email Input');
-      });
-    });
-
-    describe('Large Search', () => {
-      const large = mount(
-        <Search
-          id="test"
-          size="lg"
-          className="extra-class"
-          label="Search Field"
-          labelText="testlabel"
-        />
-      );
-
-      const largeContainer = large.find(`.${prefix}--search`);
-
-      it('renders correct search icon', () => {
-        const icons = large.find(SearchIcon);
-        expect(icons.length).toBe(1);
-      });
-
-      it('should have the expected large class', () => {
-        expect(largeContainer.hasClass(`${prefix}--search--lg`)).toEqual(true);
-      });
-
-      it('should only have 1 button (clear)', () => {
-        const btn = large.find('button');
-        expect(btn.length).toEqual(1);
-      });
-
-      it('renders two Icons', () => {
-        const iconTypes = [SearchIcon, Close];
-        const icons = large.findWhere((n) => iconTypes.includes(n.type()));
-        expect(icons.length).toEqual(2);
-      });
-
-      describe('buttons', () => {
-        const btns = wrapper.find('button');
-
-        it('should be one button', () => {
-          expect(btns.length).toBe(1);
-        });
-
-        it('should have type="button"', () => {
-          const type1 = btns.first().instance().getAttribute('type');
-          const type2 = btns.last().instance().getAttribute('type');
-          expect(type1).toEqual('button');
-          expect(type2).toEqual('button');
-        });
-
-        it('should have clear title', () => {
-          expect(btns.prop('title')).toBe('Clear search input');
-        });
-      });
-
-      describe('icons', () => {
-        it('renders "search" icon', () => {
-          const icons = wrapper.find(SearchIcon);
-          expect(icons.length).toBe(1);
-        });
-
-        it('renders two Icons', () => {
-          wrapper.setProps({ size: undefined });
-          const iconTypes = [SearchIcon, Close];
-          const icons = wrapper.findWhere((n) => iconTypes.includes(n.type()));
-          expect(icons.length).toEqual(2);
-        });
-      });
-    });
-
-    describe('Small Search', () => {
-      const small = mount(
-        <Search
-          id="test"
-          size="sm"
-          className="extra-class"
-          label="Search Field"
-          labelText="testlabel"
-        />
-      );
-
-      const smallContainer = small.find(`.${prefix}--search`);
-
-      it('renders correct search icon', () => {
-        const icons = small.find(SearchIcon);
-        expect(icons.length).toBe(1);
-      });
-
-      it('should have the expected small class', () => {
-        expect(smallContainer.hasClass(`${prefix}--search--sm`)).toEqual(true);
-      });
-
-      it('should only have 1 button (clear)', () => {
-        const btn = small.find('button');
-        expect(btn.length).toEqual(1);
-      });
-
-      it('renders two Icons', () => {
-        const iconTypes = [SearchIcon, Close];
-        const icons = wrapper.findWhere((n) => iconTypes.includes(n.type()));
-        expect(icons.length).toEqual(2);
-      });
-    });
-  });
-
-  describe('events', () => {
-    describe('onChange', () => {
-      const onChange = jest.fn();
-
-      beforeEach(() => {
-        onChange.mockReset();
-        render({ onChange: (e) => onChange(e.target.value) });
-      });
-
-      describe('when input value is changed', () => {
-        const target = { value: 'test' };
-        const mock = { target };
-
-        beforeEach(() => {
-          input().simulate('change', mock);
-        });
-
-        it('is called', () => {
-          expect(onChange).toHaveBeenCalledWith(target.value);
-        });
-      });
-
-      describe('when clear button is clicked', () => {
-        const target = { value: '' };
-
-        beforeEach(() => {
-          button().simulate('click');
-        });
-
-        it('is called', () => {
-          expect(onChange).toHaveBeenCalledWith(target.value);
-        });
-      });
-    });
-
-    describe('enabled textinput', () => {
-      const onClick = jest.fn();
-      const onChange = jest.fn();
-      const onClear = jest.fn();
-
-      const wrapper = shallow(
-        <Search
-          id="test"
-          labelText="testlabel"
-          onClick={onClick}
-          onChange={onChange}
-          onClear={onClear}
-        />
-      );
-
-      const input = wrapper.find('input');
-      const eventObject = {
-        target: {
-          defaultValue: 'test',
-        },
-      };
-
-      it('should invoke onClick when input is clicked', () => {
-        input.simulate('click');
-        expect(onClick).toHaveBeenCalled();
-      });
-
-      it('should invoke onChange when input value is changed', () => {
-        input.simulate('change', eventObject);
-        expect(onChange).toHaveBeenCalledWith(eventObject);
-      });
-
-      it('should call onClear when input value is cleared', () => {
-        const node = document.createElement('div');
-        document.body.appendChild(node);
-
-        const wrapper = mount(
-          <Search
-            id="test"
-            labelText="testlabel"
-            onClear={onClear}
-            value="test"
-          />,
-          {
-            attachTo: node,
-          }
-        );
-
-        wrapper.find('button').simulate('click', {
-          target: {
-            value: 'test',
-          },
-        });
-        expect(onClear).toHaveBeenCalled();
-        expect(wrapper.find('input').getDOMNode()).toHaveFocus();
-
-        document.body.removeChild(node);
-      });
-    });
-  });
-});
-
-/**
- * Find the <input> element.
- * @param {Enzymecontainer} wrapper
- * @returns {Enzymecontainer}
- */
-const getInput = (wrapper) => {
-  return wrapper.find(`.${prefix}--search-input`);
-};
-
-/**
- * Find the value of the <input> element
- * @param {EnzymeWrapper} wrapper
- * @returns {number}
- */
-const getInputValue = (wrapper) => {
-  return getInput(wrapper).prop('value');
-};
-
-describe('Detecting change in value from props', () => {
-  it('should have empty value', () => {
-    const search = shallow(
-      <Search id="test" className="extra-class" labelText="testlabel" />
-    );
-    expect(getInputValue(search)).toBe(undefined);
-  });
-
-  it('should set value if value prop is added', () => {
-    const search = shallow(
-      <Search
-        id="test"
-        className="extra-class"
-        labelText="testlabel"
-        value="foo"
-      />
-    );
-
-    expect(getInputValue(search)).toBe('foo');
-  });
-});
diff --git a/packages/react/src/components/Search/next/Search.js b/packages/react/src/components/Search/next/Search.js
deleted file mode 100644
index 69e78223a080..000000000000
--- a/packages/react/src/components/Search/next/Search.js
+++ /dev/null
@@ -1,255 +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 { Search as SearchIcon, Close } from '@carbon/icons-react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useRef, useState } from 'react';
-import { focus } from '../../../internal/focus';
-import { keys, match } from '../../../internal/keyboard';
-import { useId } from '../../../internal/useId';
-import { usePrefix } from '../../../internal/usePrefix';
-import { composeEventHandlers } from '../../../tools/events';
-import { useMergedRefs } from '../../../internal/useMergedRefs';
-import deprecate from '../../../prop-types/deprecate';
-
-const Search = React.forwardRef(function Search(
-  {
-    autoComplete = 'off',
-    className,
-    closeButtonLabelText = 'Clear search input',
-    defaultValue,
-    disabled,
-    id,
-    labelText,
-    light,
-    onChange = () => {},
-    onClear = () => {},
-    onKeyDown,
-    onExpand,
-    placeholder = '',
-    renderIcon,
-    role = 'searchbox',
-    size = 'md',
-    type = 'text',
-    value,
-    ...rest
-  },
-  forwardRef
-) {
-  const prefix = usePrefix();
-  const inputRef = useRef(null);
-  const ref = useMergedRefs([forwardRef, inputRef]);
-  const inputId = useId('search-input');
-  const uniqueId = id || inputId;
-  const searchId = `${uniqueId}-search`;
-  const [hasContent, setHasContent] = useState(value || defaultValue || false);
-  const [prevValue, setPrevValue] = useState(value);
-  const searchClasses = cx({
-    [`${prefix}--search`]: true,
-    [`${prefix}--search--sm`]: size === 'sm',
-    [`${prefix}--search--md`]: size === 'md',
-    [`${prefix}--search--lg`]: size === 'lg',
-    [`${prefix}--search--light`]: light,
-    [`${prefix}--search--disabled`]: disabled,
-    [className]: className,
-  });
-  const clearClasses = cx({
-    [`${prefix}--search-close`]: true,
-    [`${prefix}--search-close--hidden`]: !hasContent,
-  });
-
-  if (value !== prevValue) {
-    setHasContent(!!value);
-    setPrevValue(value);
-  }
-
-  function clearInput() {
-    if (!value) {
-      inputRef.current.value = '';
-    }
-
-    const inputTarget = Object.assign({}, inputRef.current, { value: '' });
-    const clearedEvt = { target: inputTarget, type: 'change' };
-
-    onChange(clearedEvt);
-    onClear();
-    setHasContent(false);
-    focus(inputRef);
-  }
-
-  function handleChange(event) {
-    setHasContent(event.target.value !== '');
-  }
-
-  function handleKeyDown(event) {
-    if (match(event, keys.Escape)) {
-      event.stopPropagation();
-      clearInput(event);
-    }
-  }
-
-  return (
-    <div role="search" aria-labelledby={searchId} className={searchClasses}>
-      {/* the magnifier is used in ExpandableSearch as a click target to expand,
-      however, it does not need a keyboard event bc the input element gets focus on keyboard nav and expands that way*/}
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-      <div
-        role={onExpand ? 'button' : null}
-        className={`${prefix}--search-magnifier`}
-        onClick={onExpand}>
-        <CustomSearchIcon icon={renderIcon} />
-      </div>
-      <label id={searchId} htmlFor={uniqueId} className={`${prefix}--label`}>
-        {labelText}
-      </label>
-      <input
-        {...rest}
-        autoComplete={autoComplete}
-        className={`${prefix}--search-input`}
-        defaultValue={defaultValue}
-        disabled={disabled}
-        role={role}
-        ref={ref}
-        id={uniqueId}
-        onChange={composeEventHandlers([onChange, handleChange])}
-        onKeyDown={composeEventHandlers([onKeyDown, handleKeyDown])}
-        placeholder={placeholder}
-        type={type}
-        value={value}
-      />
-      <button
-        aria-label={closeButtonLabelText}
-        className={clearClasses}
-        disabled={disabled}
-        onClick={clearInput}
-        title={closeButtonLabelText}
-        type="button">
-        <Close />
-      </button>
-    </div>
-  );
-});
-
-Search.propTypes = {
-  /**
-   * Specify an optional value for the `autocomplete` property on the underlying
-   * `<input>`, defaults to "off"
-   */
-  autoComplete: PropTypes.string,
-
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify a label to be read by screen readers on the "close" button
-   */
-  closeButtonLabelText: PropTypes.string,
-
-  /**
-   * Optionally provide the default value of the `<input>`
-   */
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Specify whether the `<input>` should be disabled
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Specify a custom `id` for the input
-   */
-  id: PropTypes.string,
-
-  /**
-   * Provide the label text for the Search icon
-   */
-  labelText: PropTypes.node.isRequired,
-
-  /**
-   * Specify light version or default version of this control
-   */
-  light: deprecate(
-    PropTypes.bool,
-    'The `light` prop for `Search` is no longer needed and has ' +
-      'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'
-  ),
-
-  /**
-   * Optional callback called when the search value changes.
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * Optional callback called when the search value is cleared.
-   */
-  onClear: PropTypes.func,
-
-  /**
-   * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
-   */
-  onExpand: PropTypes.func,
-
-  /**
-   * Provide a handler that is invoked on the key down event for the input
-   */
-  onKeyDown: PropTypes.func,
-
-  /**
-   * Provide an optional placeholder text for the Search.
-   * Note: if the label and placeholder differ,
-   * VoiceOver on Mac will read both
-   */
-  placeholder: PropTypes.string,
-
-  /**
-   * Rendered icon for the Search.
-   * Can be a React component class
-   */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
-  /**
-   * Specify the role for the underlying `<input>`, defaults to `searchbox`
-   */
-  role: PropTypes.string,
-
-  /**
-   * Specify the size of the Search
-   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /**
-   * Optional prop to specify the type of the `<input>`
-   */
-  type: PropTypes.string,
-
-  /**
-   * Specify the value of the `<input>`
-   */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
-function CustomSearchIcon({ icon }) {
-  const prefix = usePrefix();
-
-  if (icon) {
-    return React.cloneElement(icon, {
-      className: `${prefix}--search-magnifier-icon`,
-    });
-  }
-  return <SearchIcon className={`${prefix}--search-magnifier-icon`} />;
-}
-
-CustomSearchIcon.propTypes = {
-  /**
-   * Rendered icon for the Search. Can be a React component class
-   */
-  icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-};
-
-export default Search;