integrated combobox

packages/plugins/i18n/admin/src/components/LocaleSelect/index.js

@@ -1,27 +1,18 @@
 /* eslint-disable react/jsx-indent */
 import React from 'react';
-import styled from 'styled-components';
-import { Select, Option } from '@strapi/parts/Select';
-import { Loader } from '@strapi/parts/Loader';
+import { Combobox, ComboboxOption } from '@strapi/parts/Combobox';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import useLocales from '../../hooks/useLocales';
 import useDefaultLocales from '../../hooks/useDefaultLocales';
 import { getTrad } from '../../utils';
 
-const SmallLoader = styled(Loader)`
-  img {
-    height: 1rem;
-    width: 1rem;
-  }
-`;
-
 /**
  * The component is memoized and needs a useCallback over the onLocaleChange and
  * onClear props to prevent the Select from re-rendering N times when typing on a specific
  * key in a formik form
  */
-const LocaleSelect = React.memo(({ value, onLocaleChange, error, onClear }) => {
+const LocaleSelect = React.memo(({ value, onLocaleChange, error }) => {
   const { formatMessage } = useIntl();
   const { defaultLocales, isLoading } = useDefaultLocales();
   const { locales } = useLocales();
@@ -40,30 +31,13 @@ const LocaleSelect = React.memo(({ value, onLocaleChange, error, onClear }) => {
   const computedValue = value || '';
 
   return (
-    <Select
-      startIcon={
-        isLoading ? (
-          <SmallLoader>
-            {formatMessage({
-              id: getTrad('Settings.locales.modal.create.defaultLocales.loading'),
-              defaultMessage: 'Settings.locales.modal.create.defaultLocales.loading',
-            })}
-          </SmallLoader>
-        ) : (
-          undefined
-        )
-      }
+    <Combobox
       aria-busy={isLoading}
+      error={error}
       label={formatMessage({
         id: getTrad('Settings.locales.modal.locales.label'),
         defaultMessage: 'Locales',
       })}
-      onClear={value ? onClear : undefined}
-      clearLabel={formatMessage({
-        id: 'clearLabel',
-        defaultMessage: 'Clear',
-      })}
-      error={error}
       value={computedValue}
       onChange={selectedLocaleKey => {
         const selectedLocale = options.find(locale => locale.value === selectedLocaleKey);
@@ -74,27 +48,23 @@ const LocaleSelect = React.memo(({ value, onLocaleChange, error, onClear }) => {
       }}
       placeholder={formatMessage({ id: 'components.placeholder.select', defaultMessage: 'Select' })}
     >
-      {isLoading
-        ? null
-        : options.map(option => (
-            <Option value={option.value} key={option.value}>
-              {option.label}
-            </Option>
-          ))}
-    </Select>
+      {options.map(option => (
+        <ComboboxOption value={option.value} key={option.value}>
+          {option.label}
+        </ComboboxOption>
+      ))}
+    </Combobox>
   );
 });
 
 LocaleSelect.defaultProps = {
   error: undefined,
   value: undefined,
-  onClear: () => undefined,
   onLocaleChange: () => undefined,
 };
 
 LocaleSelect.propTypes = {
   error: PropTypes.string,
-  onClear: PropTypes.func,
   onLocaleChange: PropTypes.func,
   value: PropTypes.string,
 };