Merge pull request #11314 from strapi/ctb/create-cat

[V4] CTB: Add combobox in CTB to create component category

packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js

@@ -104,7 +104,7 @@ const ComponentIconPicker = ({ error, isCreating, intlLabel, name, onChange, val
               </Searchbar>
             </div>
           ) : (
-            <IconButton onClick={toggleSearch} aria-label="Edit" icon={<SearchIcon />} />
+            <IconButton onClick={toggleSearch} aria-label="Edit" icon={<SearchIcon />} noBorder />
           )}
         </Row>
         <Stack size={1}>

packages/core/content-type-builder/admin/src/components/SelectCategory/index.js

@@ -4,39 +4,45 @@
  *
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Select, Option } from '@strapi/parts/Select';
+import { ComboboxOption, CreatableCombobox } from '@strapi/parts/Combobox';
 import useDataManager from '../../hooks/useDataManager';
 
-// FIXME replace with Creatable Combobox
 const SelectCategory = ({ error, intlLabel, name, onChange, value }) => {
   const { formatMessage } = useIntl();
   const { allComponentsCategories } = useDataManager();
+  const [categories, setCategories] = useState(allComponentsCategories);
 
   const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
   const label = formatMessage(intlLabel);
 
-  return (
+  const handleChange = value => {
-    <Select
-      error={errorMessage}
-      label={label}
-      id={name}
-      name={name}
-      onChange={value => {
     onChange({ target: { name, value, type: 'select-category' } });
-      }}
+  };
-      value={value || ''}
+
-    >
+  const handleCreateOption = value => {
-      {allComponentsCategories.map(category => {
+    setCategories(prev => [...prev, value]);
+    handleChange(value);
+  };
+
   return (
-          <Option key={category} value={category}>
+    <CreatableCombobox
+      error={errorMessage}
+      id={name}
+      label={label}
+      name={name}
+      onChange={handleChange}
+      onCreateOption={handleCreateOption}
+      value={value}
+    >
+      {categories.map(category => (
+        <ComboboxOption key={category} value={category}>
           {category}
-          </Option>
+        </ComboboxOption>
-        );
+      ))}
-      })}
+    </CreatableCombobox>
-    </Select>
   );
 };