feat(react): refactor filterable multi select to function (#10198)

* chore: check in progress

* feat(react): refactor FilterableMultiSelect

* fix(react): reset Filterable field on multiselct

* fix(styles): remove unnecessary styles

* fix(react): update snapshot

* chore(react): update to follow code style guidelines

* Update packages/react/src/components/MultiSelect/next/FilterableMultiSelect.js

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

* Update packages/react/src/components/MultiSelect/next/FilterableMultiSelect.js

Co-authored-by: Josh Black <josh@josh.black>

* Update packages/react/src/components/MultiSelect/next/__tests__/FilterableMultiSelect-test.js

Co-authored-by: Josh Black <josh@josh.black>

* fix(react): clear input and reset focus through user action

* chore(react): format file

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: Josh Black <josh@josh.black>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 4 people

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -3108,7 +3108,6 @@ Map {
       "selectionFeedback": "top-after-reopen",
       "sortItems": [Function],
     },
-    "displayName": "MultiSelect.Filterable",
     "propTypes": Object {
       "ariaLabel": Object {
         "type": "string",
@@ -4074,7 +4073,6 @@ Map {
         "selectionFeedback": "top-after-reopen",
         "sortItems": [Function],
       },
-      "displayName": "MultiSelect.Filterable",
       "propTypes": Object {
         "ariaLabel": Object {
           "type": "string",

packages/react/src/components/FilterableMultiSelect/index.js

@@ -1 +1 @@
-export default from '../MultiSelect/FilterableMultiSelect';
+export { FilterableMultiSelect } from '../MultiSelect';

packages/react/src/components/MultiSelect/index.js

@@ -4,13 +4,20 @@
  * 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 { deprecateFieldOnObject } from '../../internal/deprecateFieldOnObject';
 
 import MultiSelect from './MultiSelect';
-import FilterableMultiSelect from './FilterableMultiSelect';
+import { default as FilterableMultiSelectClassic } from './FilterableMultiSelect';
+import { default as FilterableMultiSelectNext } from './next/FilterableMultiSelect';
+
+FilterableMultiSelectNext.displayName = 'MultiSelect.Filterable';
+MultiSelect.Filterable = FilterableMultiSelectClassic;
 
-FilterableMultiSelect.displayName = 'MultiSelect.Filterable';
-MultiSelect.Filterable = FilterableMultiSelect;
+export const FilterableMultiSelect = FeatureFlags.enabled('enable-v11-release')
+  ? FilterableMultiSelectNext
+  : FilterableMultiSelectClassic;
 
 if (__DEV__) {
   deprecateFieldOnObject(MultiSelect, 'Filterable', FilterableMultiSelect);