From a4e6143011e4f40e6a70950400066781a00cf2da Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Wed, 18 Sep 2024 13:33:52 +0300
Subject: [PATCH 01/21] chore(react-components): rename Select

---
 .../__snapshots__/select.test.tsx.snap        |  0
 .../src/NativeSelect/index.ts                 |  1 +
 .../native_select.stories.tsx}                | 10 ++---
 .../native_select.test.tsx}                   | 14 +++---
 .../native_select.tsx}                        | 44 ++++++++++---------
 packages/react-components/src/Select/index.ts |  1 -
 packages/react-components/src/index.ts        |  2 +-
 7 files changed, 37 insertions(+), 35 deletions(-)
 rename packages/react-components/src/{Select => NativeSelect}/__snapshots__/select.test.tsx.snap (100%)
 create mode 100644 packages/react-components/src/NativeSelect/index.ts
 rename packages/react-components/src/{Select/select.stories.tsx => NativeSelect/native_select.stories.tsx} (76%)
 rename packages/react-components/src/{Select/select.test.tsx => NativeSelect/native_select.test.tsx} (64%)
 rename packages/react-components/src/{Select/select.tsx => NativeSelect/native_select.tsx} (86%)
 delete mode 100644 packages/react-components/src/Select/index.ts

diff --git a/packages/react-components/src/Select/__snapshots__/select.test.tsx.snap b/packages/react-components/src/NativeSelect/__snapshots__/select.test.tsx.snap
similarity index 100%
rename from packages/react-components/src/Select/__snapshots__/select.test.tsx.snap
rename to packages/react-components/src/NativeSelect/__snapshots__/select.test.tsx.snap
diff --git a/packages/react-components/src/NativeSelect/index.ts b/packages/react-components/src/NativeSelect/index.ts
new file mode 100644
index 00000000..f5715a12
--- /dev/null
+++ b/packages/react-components/src/NativeSelect/index.ts
@@ -0,0 +1 @@
+export { NativeSelect } from './native_select';
diff --git a/packages/react-components/src/Select/select.stories.tsx b/packages/react-components/src/NativeSelect/native_select.stories.tsx
similarity index 76%
rename from packages/react-components/src/Select/select.stories.tsx
rename to packages/react-components/src/NativeSelect/native_select.stories.tsx
index 32fdf174..1910a9a7 100644
--- a/packages/react-components/src/Select/select.stories.tsx
+++ b/packages/react-components/src/NativeSelect/native_select.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Select } from './index';
+import { NativeSelect } from './index';
 
-const meta: Meta<typeof Select> = {
-  title: 'Components/Select',
-  component: Select,
+const meta: Meta<typeof NativeSelect> = {
+  title: 'Components/NativeSelect',
+  component: NativeSelect,
   args: {
     options: [
       {
@@ -34,6 +34,6 @@ const meta: Meta<typeof Select> = {
 
 export default meta;
 
-type Story = StoryObj<typeof Select>;
+type Story = StoryObj<typeof NativeSelect>;
 
 export const Playground: Story = {};
diff --git a/packages/react-components/src/Select/select.test.tsx b/packages/react-components/src/NativeSelect/native_select.test.tsx
similarity index 64%
rename from packages/react-components/src/Select/select.test.tsx
rename to packages/react-components/src/NativeSelect/native_select.test.tsx
index cf5f019e..63248010 100644
--- a/packages/react-components/src/Select/select.test.tsx
+++ b/packages/react-components/src/NativeSelect/native_select.test.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { renderWithWrapper as render } from '../test-utils';
-import { Select } from './index';
+import { NativeSelect } from './index';
 
-describe('<Select />', () => {
-  const options: Partial<React.ComponentProps<typeof Select>>['options'] = [
+describe('<NativeSelect />', () => {
+  const options: Partial<React.ComponentProps<typeof NativeSelect>>['options'] = [
     { label: 'test-1', value: 'test1' },
     { label: 'test-2', value: 'test3' },
   ];
 
   it('should render with default styles', () => {
     const { asFragment } = render(
-      <Select options={options} />,
+      <NativeSelect options={options} />,
     );
 
     expect(asFragment()).toMatchSnapshot();
@@ -18,14 +18,14 @@ describe('<Select />', () => {
 
   it('should pass className', () => {
     const { asFragment } = render(
-      <Select options={options} className="my-class-name" />,
+      <NativeSelect options={options} className="my-class-name" />,
     );
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   describe('sizes', () => {
-    const sizes: Array<React.ComponentProps<typeof Select>['size']> = [
+    const sizes: Array<React.ComponentProps<typeof NativeSelect>['size']> = [
       'small',
       'medium',
       'large',
@@ -34,7 +34,7 @@ describe('<Select />', () => {
     sizes.forEach((size) => {
       it(`size "${size}"`, () => {
         const { asFragment } = render(
-          <Select options={options} size={size} />,
+          <NativeSelect options={options} size={size} />,
         );
 
         expect(asFragment()).toMatchSnapshot();
diff --git a/packages/react-components/src/Select/select.tsx b/packages/react-components/src/NativeSelect/native_select.tsx
similarity index 86%
rename from packages/react-components/src/Select/select.tsx
rename to packages/react-components/src/NativeSelect/native_select.tsx
index e024dfb3..eef2312a 100644
--- a/packages/react-components/src/Select/select.tsx
+++ b/packages/react-components/src/NativeSelect/native_select.tsx
@@ -6,7 +6,7 @@ import { ArrowDropDownIcon } from '../icons';
 /**
  * Types.
  */
-type SelectOwnProps = {
+type NativeSelectOwnProps = {
   options: {
     value: string;
     label: string;
@@ -78,9 +78,9 @@ type SelectOwnProps = {
   onChange?: React.ChangeEventHandler<HTMLSelectElement>;
 };
 
-type SelectProps = SelectOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
-type SelectRootProps = React.HTMLAttributes<HTMLSelectElement> & {
-  selectSize?: SelectOwnProps['size']
+type NativeSelectProps = NativeSelectOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+type NativeSelectRootProps = React.HTMLAttributes<HTMLSelectElement> & {
+  selectSize?: NativeSelectOwnProps['size']
 };
 /**
  *
@@ -89,7 +89,7 @@ type SelectRootProps = React.HTMLAttributes<HTMLSelectElement> & {
 /**
  * Styles.
  */
-const SelectRoot = styled('select')<SelectRootProps>(
+const NativeSelectRoot = styled('select')<NativeSelectRootProps>(
   (props) => ({
     fontFamily: 'inherit',
     outline: 'none',
@@ -170,20 +170,22 @@ const SelectRoot = styled('select')<SelectRootProps>(
   },
 );
 
-const SelectLabel = styled('label')({
+const NativeSelectLabel = styled('label')({
   marginBottom: '2px',
   display: 'inline-block',
 });
 
-const SelectErrorMessage = styled(Typography)({
+const NativeSelectErrorMessage = styled(Typography)({
   marginTop: '2px',
 });
 
-const SelectContainer = styled('div')({
+const NativeSelectContainer = styled('div')({
   position: 'relative',
 });
 
-const SelectArrowIcon = styled(ArrowDropDownIcon)<Required<{ disabled: boolean }>>((props) => ({
+const NativeSelectArrowIcon = styled(
+  ArrowDropDownIcon,
+)<Required<{ disabled: boolean }>>((props) => ({
   position: 'absolute',
   right: '0px',
   top: 'calc(50% - 12px)',
@@ -198,7 +200,7 @@ const SelectArrowIcon = styled(ArrowDropDownIcon)<Required<{ disabled: boolean }
  *
  */
 
-export const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
+export const NativeSelect = React.forwardRef<HTMLDivElement, NativeSelectProps>((props, ref) => {
   const {
     options,
     size,
@@ -225,7 +227,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref)
       {...other}
     >
       {label && (
-        <SelectLabel
+        <NativeSelectLabel
           htmlFor={id}
         >
           <Typography
@@ -235,10 +237,10 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref)
           >
             {label}
           </Typography>
-        </SelectLabel>
+        </NativeSelectLabel>
       )}
-      <SelectContainer>
-        <SelectRoot
+      <NativeSelectContainer>
+        <NativeSelectRoot
           selectSize={size}
           disabled={disabled}
           defaultValue={defaultValue}
@@ -266,27 +268,27 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref)
               {option.label}
             </option>
           ))}
-        </SelectRoot>
-        <SelectArrowIcon
+        </NativeSelectRoot>
+        <NativeSelectArrowIcon
           disabled={disabled}
           aria-hidden
         />
-      </SelectContainer>
+      </NativeSelectContainer>
       {error && errorText && (
-        <SelectErrorMessage
+        <NativeSelectErrorMessage
           variant="c2"
           color="wrong"
         >
           {errorText}
-        </SelectErrorMessage>
+        </NativeSelectErrorMessage>
       )}
     </div>
   );
 });
 
-Select.displayName = 'Select';
+NativeSelect.displayName = 'NativeSelect';
 
-Select.defaultProps = {
+NativeSelect.defaultProps = {
   disabled: false,
   size: 'medium',
 };
diff --git a/packages/react-components/src/Select/index.ts b/packages/react-components/src/Select/index.ts
deleted file mode 100644
index de9bdf23..00000000
--- a/packages/react-components/src/Select/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Select } from './select';
diff --git a/packages/react-components/src/index.ts b/packages/react-components/src/index.ts
index 149c15f5..f290cf83 100644
--- a/packages/react-components/src/index.ts
+++ b/packages/react-components/src/index.ts
@@ -20,7 +20,7 @@ export * from './Popper';
 export * from './Popover';
 export * from './Portal';
 export * from './Radio';
-export * from './Select';
+export * from './NativeSelect';
 export * from './Skeleton';
 export * from './Autocomplete';
 export * from './Slide';

From 8a50c4a50d485767ce4019b430b10df1eca4e69d Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Wed, 18 Sep 2024 13:38:20 +0300
Subject: [PATCH 02/21] chore(react-components): rename Autocomplete

---
 .../src/Autocomplete/index.ts                 |   1 -
 .../__snapshots__/autocomplete.test.tsx.snap  |   0
 packages/react-components/src/Select/index.ts |   1 +
 .../select.stories.tsx}                       |  10 +-
 .../select.test.tsx}                          |  20 +--
 .../autocomplete.tsx => Select/select.tsx}    | 116 +++++++++---------
 packages/react-components/src/index.ts        |   2 +-
 7 files changed, 75 insertions(+), 75 deletions(-)
 delete mode 100644 packages/react-components/src/Autocomplete/index.ts
 rename packages/react-components/src/{Autocomplete => Select}/__snapshots__/autocomplete.test.tsx.snap (100%)
 create mode 100644 packages/react-components/src/Select/index.ts
 rename packages/react-components/src/{Autocomplete/autocomplete.stories.tsx => Select/select.stories.tsx} (96%)
 rename packages/react-components/src/{Autocomplete/autocomplete.test.tsx => Select/select.test.tsx} (86%)
 rename packages/react-components/src/{Autocomplete/autocomplete.tsx => Select/select.tsx} (84%)

diff --git a/packages/react-components/src/Autocomplete/index.ts b/packages/react-components/src/Autocomplete/index.ts
deleted file mode 100644
index 7020b66f..00000000
--- a/packages/react-components/src/Autocomplete/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Autocomplete } from './autocomplete';
diff --git a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap b/packages/react-components/src/Select/__snapshots__/autocomplete.test.tsx.snap
similarity index 100%
rename from packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
rename to packages/react-components/src/Select/__snapshots__/autocomplete.test.tsx.snap
diff --git a/packages/react-components/src/Select/index.ts b/packages/react-components/src/Select/index.ts
new file mode 100644
index 00000000..de9bdf23
--- /dev/null
+++ b/packages/react-components/src/Select/index.ts
@@ -0,0 +1 @@
+export { Select } from './select';
diff --git a/packages/react-components/src/Autocomplete/autocomplete.stories.tsx b/packages/react-components/src/Select/select.stories.tsx
similarity index 96%
rename from packages/react-components/src/Autocomplete/autocomplete.stories.tsx
rename to packages/react-components/src/Select/select.stories.tsx
index 1a7f233f..420d62da 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.stories.tsx
+++ b/packages/react-components/src/Select/select.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Autocomplete } from './index';
+import { Select } from './index';
 
 const top100Films = [
   { title: 'The Shawshank Redemption', year: 1994 },
@@ -104,10 +104,10 @@ const top100Films = [
   { title: 'Monty Python and the Holy Grail', year: 1975 },
 ];
 
-const meta: Meta<typeof Autocomplete> = {
-  title: 'Components/Autocomplete',
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
   // @ts-ignore
-  component: Autocomplete,
+  component: Select,
   args: {
     options: top100Films,
     placeholder: 'Select a movie',
@@ -126,6 +126,6 @@ const meta: Meta<typeof Autocomplete> = {
 
 export default meta;
 
-type Story = StoryObj<typeof Autocomplete>;
+type Story = StoryObj<typeof Select>;
 
 export const Playground: Story = {};
diff --git a/packages/react-components/src/Autocomplete/autocomplete.test.tsx b/packages/react-components/src/Select/select.test.tsx
similarity index 86%
rename from packages/react-components/src/Autocomplete/autocomplete.test.tsx
rename to packages/react-components/src/Select/select.test.tsx
index 70a5f7a3..f5b473d9 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.test.tsx
+++ b/packages/react-components/src/Select/select.test.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { renderWithWrapper as render, screen, fireEvent } from '../test-utils';
-import { Autocomplete } from './index';
+import { Select } from './index';
 
-describe('<Autocomplete />', () => {
+describe('<Select />', () => {
   const options = ['test-1', 'test-2'];
 
   it('should render with default styles', () => {
     const { asFragment } = render(
-      <Autocomplete
+      <Select
         options={options}
         id="test-id"
       />,
@@ -18,7 +18,7 @@ describe('<Autocomplete />', () => {
 
   it('should render with default multiple styles', () => {
     const { asFragment } = render(
-      <Autocomplete
+      <Select
         options={options}
         id="test-id"
         multiple
@@ -30,7 +30,7 @@ describe('<Autocomplete />', () => {
 
   it('should pass className', () => {
     const { asFragment } = render(
-      <Autocomplete
+      <Select
         options={options}
         id="test-id"
         className="my-class-name"
@@ -41,7 +41,7 @@ describe('<Autocomplete />', () => {
   });
 
   describe('sizes', () => {
-    const sizes: Array<React.ComponentProps<typeof Autocomplete>['size']> = [
+    const sizes: Array<React.ComponentProps<typeof Select>['size']> = [
       'small',
       'medium',
       'large',
@@ -50,7 +50,7 @@ describe('<Autocomplete />', () => {
     sizes.forEach((size) => {
       it(`size "${size}"`, () => {
         const { asFragment } = render(
-          <Autocomplete
+          <Select
             options={options}
             id="test-id"
             size={size}
@@ -64,7 +64,7 @@ describe('<Autocomplete />', () => {
 
   it('should pass loading', () => {
     const { baseElement } = render(
-      <Autocomplete
+      <Select
         options={[]}
         id="test-id"
         loading
@@ -79,7 +79,7 @@ describe('<Autocomplete />', () => {
 
   it('should pass error', () => {
     const { baseElement } = render(
-      <Autocomplete
+      <Select
         options={[]}
         id="test-id"
         error
@@ -94,7 +94,7 @@ describe('<Autocomplete />', () => {
 
   it('should pass options', () => {
     const { baseElement } = render(
-      <Autocomplete
+      <Select
         id="test-id"
         options={options}
       />,
diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Select/select.tsx
similarity index 84%
rename from packages/react-components/src/Autocomplete/autocomplete.tsx
rename to packages/react-components/src/Select/select.tsx
index e5df7498..a2c2aa26 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Select/select.tsx
@@ -18,13 +18,13 @@ import { MenuItem } from '../MenuList';
 /**
  * Types.
  */
-export type AutocompleteRenderGroupParams = {
+export type SelectRenderGroupParams = {
   key: string | number;
   group: string;
   children?: React.ReactNode;
 };
 
-export type AutocompleteOwnProps<
+export type SelectOwnProps<
 T,
 Multiple extends boolean | undefined = undefined,
 > = UseAutocompleteProps<T, Multiple> & {
@@ -123,8 +123,8 @@ Multiple extends boolean | undefined = undefined,
 /**
  * Styles.
  */
-const AutocompleteField = styled(Typography)<
-TypographyOwnProps & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' | 'multiple'>>
+const SelectField = styled(Typography)<
+TypographyOwnProps & Required<Pick<SelectOwnProps<any, boolean>, 'size' | 'multiple'>>
 >(
   (props) => ({
     outline: 'none',
@@ -211,7 +211,7 @@ TypographyOwnProps & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' |
   },
 );
 
-const AutocompleteArrowIcon = styled(ArrowDropDownIcon)({
+const SelectArrowIcon = styled(ArrowDropDownIcon)({
   position: 'absolute',
   right: '0px',
   top: 'calc(50% - 12px)',
@@ -222,7 +222,7 @@ const AutocompleteArrowIcon = styled(ArrowDropDownIcon)({
   },
 });
 
-const AutocompleteNativeInput = styled('input')({
+const SelectNativeInput = styled('input')({
   bottom: 0,
   left: 0,
   height: '100%',
@@ -233,11 +233,11 @@ const AutocompleteNativeInput = styled('input')({
   boxSizing: 'border-box',
 });
 
-const AutocompleteDropdownStateItem = styled('div')({
+const SelectDropdownStateItem = styled('div')({
   padding: 'var(--pv-size-base-3) var(--pv-size-base-2)',
 });
 
-const AutocompleteDropdownList = styled('ul')({
+const SelectDropdownList = styled('ul')({
   maxHeight: '36vh',
   overflowY: 'auto',
   margin: 0,
@@ -246,7 +246,7 @@ const AutocompleteDropdownList = styled('ul')({
   padding: '10px 0',
 });
 
-const AutocompleteDropdownGroupName = styled(Typography)(
+const SelectDropdownGroupName = styled(Typography)(
   (props) => ({
     padding: 'var(--pv-size-base-2)',
     color: props.theme.mode === 'dark'
@@ -255,12 +255,12 @@ const AutocompleteDropdownGroupName = styled(Typography)(
   }),
 );
 
-const AutocompleteDropdownGroupList = styled('ul')({
+const SelectDropdownGroupList = styled('ul')({
   padding: 0,
   listStyleType: 'none',
 });
 
-const AutocompleteDropdownGroupListItem = styled(MenuItem)<Required<{ inGroup: boolean }>>(
+const SelectDropdownGroupListItem = styled(MenuItem)<Required<{ inGroup: boolean }>>(
   (props) => ({
     ...(props.inGroup && {
       padding: '0px var(--pv-size-base-2) 0 var(--pv-size-base-3)',
@@ -268,21 +268,21 @@ const AutocompleteDropdownGroupListItem = styled(MenuItem)<Required<{ inGroup: b
   }),
 );
 
-const AutocompletePopover = styled(Popover)({
+const SelectPopover = styled(Popover)({
   minWidth: 240,
 });
 
-const AutocompleteTagsList = styled('div')({
+const SelectTagsList = styled('div')({
   overflow: 'hidden',
   width: '100%',
 });
 
-const AutocompleteTag = styled(Chip)<{
+const SelectTag = styled(Chip)<{
   tagsLength: number,
   limitTags: number,
-  size: AutocompleteOwnProps<any>['size'],
+  size: SelectOwnProps<any>['size'],
 }>((props) => ({
-  label: 'Autocomplete-tag',
+  label: 'Select-tag',
   borderRadius: '3px',
   margin: '0 var(--pv-size-base) 0 0',
   ...(props.tagsLength === 1 && {
@@ -296,26 +296,26 @@ const AutocompleteTag = styled(Chip)<{
   }),
 }));
 
-const AutocompleteTagSize = styled(Typography)({
+const SelectTagSize = styled(Typography)({
   margin: '0 var(--pv-size-base-2)',
 });
 
-const AutocompleteSearchInput = styled(TextField)({
+const SelectSearchInput = styled(TextField)({
   padding: 'var(--pv-size-base-3) var(--pv-size-base-3) var(--pv-size-base-2)',
 });
 
-const AutocompleteCreateNewButton = styled(Button)({
+const SelectCreateNewButton = styled(Button)({
   width: '100%',
   borderRadius: 0,
   justifyContent: 'left',
   padding: '0px var(--pv-size-base-2)',
 });
 
-const AutocompleteError = styled(Typography)({
+const SelectError = styled(Typography)({
   marginTop: '2px',
 });
 
-const AutocompleteLabel = styled('label')({
+const SelectLabel = styled('label')({
   label: 'TextField-label',
   marginBottom: '2px',
   display: 'inline-block',
@@ -324,11 +324,11 @@ const AutocompleteLabel = styled('label')({
  *
  */
 
-export const Autocomplete = <
+export const Select = <
 T,
 Multiple extends boolean | undefined = false,
 >(
-    props: AutocompleteOwnProps<T, Multiple>,
+    props: SelectOwnProps<T, Multiple>,
   ): JSX.Element => {
   const {
     className,
@@ -384,26 +384,26 @@ Multiple extends boolean | undefined = false,
     popoverProps.onClose(event);
   };
 
-  const defaultRenderOption: AutocompleteOwnProps<T, Multiple>['renderOption'] = (propsOption, option) => (
-    <AutocompleteDropdownGroupListItem
+  const defaultRenderOption: SelectOwnProps<T, Multiple>['renderOption'] = (propsOption, option) => (
+    <SelectDropdownGroupListItem
       {...propsOption}
       inGroup={Boolean(groupBy)}
     >
       {getOptionLabel(option)}
-    </AutocompleteDropdownGroupListItem>
+    </SelectDropdownGroupListItem>
   );
 
-  const renderGroup = (params: AutocompleteRenderGroupParams) => (
+  const renderGroup = (params: SelectRenderGroupParams) => (
     <li key={params.key}>
-      <AutocompleteDropdownGroupName
+      <SelectDropdownGroupName
         variant="c1"
         color="gray-10"
       >
         {params.group}
-      </AutocompleteDropdownGroupName>
-      <AutocompleteDropdownGroupList>
+      </SelectDropdownGroupName>
+      <SelectDropdownGroupList>
         {params.children}
-      </AutocompleteDropdownGroupList>
+      </SelectDropdownGroupList>
     </li>
   );
 
@@ -418,9 +418,9 @@ Multiple extends boolean | undefined = false,
 
       return (
         <>
-          <AutocompleteTagsList>
+          <SelectTagsList>
             {valueLimits.map((v, index) => (
-              <AutocompleteTag
+              <SelectTag
                 {...getTagProps(v, index)}
                 color="secondary"
                 variant="contained"
@@ -429,16 +429,16 @@ Multiple extends boolean | undefined = false,
                 tagsLength={value.length}
               >
                 {getOptionLabel(v)}
-              </AutocompleteTag>
+              </SelectTag>
             ))}
-          </AutocompleteTagsList>
+          </SelectTagsList>
           {!!more && (
-            <AutocompleteTagSize
+            <SelectTagSize
               variant="c2"
               color="gray-9"
             >
               {getLimitTagsText(more)}
-            </AutocompleteTagSize>
+            </SelectTagSize>
           )}
         </>
       );
@@ -450,8 +450,8 @@ Multiple extends boolean | undefined = false,
   const renderedValue = renderValue();
   const isValueEmpty = renderedValue === null;
 
-  const defaultRenderRoot: AutocompleteOwnProps<T, Multiple>['renderRoot'] = (propsRoot, valueRoot) => (
-    <AutocompleteField
+  const defaultRenderRoot: SelectOwnProps<T, Multiple>['renderRoot'] = (propsRoot, valueRoot) => (
+    <SelectField
       {...propsRoot}
       noWrap
       // @ts-ignore
@@ -464,11 +464,11 @@ Multiple extends boolean | undefined = false,
       size={size}
     >
       {isValueEmpty ? placeholder : renderedValue}
-      <AutocompleteArrowIcon
+      <SelectArrowIcon
         aria-disabled={disabled}
         aria-hidden
       />
-      <AutocompleteNativeInput
+      <SelectNativeInput
         type="text"
         value={isValueEmpty ? '' : JSON.stringify(valueRoot)}
         tabIndex={-1}
@@ -481,7 +481,7 @@ Multiple extends boolean | undefined = false,
         readOnly={readOnly}
         onChange={() => { }}
       />
-    </AutocompleteField>
+    </SelectField>
   );
 
   const renderOption = renderOptionProp || defaultRenderOption;
@@ -496,7 +496,7 @@ Multiple extends boolean | undefined = false,
   return (
     <div className={className}>
       {label && (
-        <AutocompleteLabel
+        <SelectLabel
           {...getInputLabelProps()}
         >
           <Typography
@@ -506,7 +506,7 @@ Multiple extends boolean | undefined = false,
           >
             {label}
           </Typography>
-        </AutocompleteLabel>
+        </SelectLabel>
       )}
       {renderRoot(
         {
@@ -517,14 +517,14 @@ Multiple extends boolean | undefined = false,
         getTagProps,
       )}
       {error && errorText && (
-        <AutocompleteError
+        <SelectError
           variant="c2"
           color="wrong"
         >
           {errorText}
-        </AutocompleteError>
+        </SelectError>
       )}
-      <AutocompletePopover
+      <SelectPopover
         placement="bottom-start"
         allowUseSameWidth
         {...popoverProps}
@@ -536,7 +536,7 @@ Multiple extends boolean | undefined = false,
             borderStyle="solid"
             borderWidth={1}
           >
-            <AutocompleteSearchInput
+            <SelectSearchInput
               id={otherInputProps.id}
               inputProps={otherInputProps}
               onChange={onChange}
@@ -546,7 +546,7 @@ Multiple extends boolean | undefined = false,
           </Box>
         )}
         {loading && groupedOptions.length === 0 && (
-          <AutocompleteDropdownStateItem>
+          <SelectDropdownStateItem>
             {typeof loadingText === 'string' ? (
               <Typography
                 variant="b2"
@@ -555,10 +555,10 @@ Multiple extends boolean | undefined = false,
                 {loadingText}
               </Typography>
             ) : loadingText}
-          </AutocompleteDropdownStateItem>
+          </SelectDropdownStateItem>
         )}
         {groupedOptions.length === 0 && !loading && (
-          <AutocompleteDropdownStateItem>
+          <SelectDropdownStateItem>
             {typeof noOptionsText === 'string' ? (
               <Typography
                 variant="b2"
@@ -567,10 +567,10 @@ Multiple extends boolean | undefined = false,
                 {noOptionsText}
               </Typography>
             ) : noOptionsText}
-          </AutocompleteDropdownStateItem>
+          </SelectDropdownStateItem>
         )}
         {groupedOptions.length > 0 && (
-          <AutocompleteDropdownList {...getListboxProps()}>
+          <SelectDropdownList {...getListboxProps()}>
             {groupedOptions
               // @ts-ignore
               .map((option, index) => {
@@ -588,7 +588,7 @@ Multiple extends boolean | undefined = false,
 
                 return renderListOption(option as T, index);
               })}
-          </AutocompleteDropdownList>
+          </SelectDropdownList>
         )}
         {(allowCreateOption && searchValue.length > 0 && !loading) && (
           <Box
@@ -597,23 +597,23 @@ Multiple extends boolean | undefined = false,
             borderStyle="solid"
             borderWidth={1}
           >
-            <AutocompleteCreateNewButton
+            <SelectCreateNewButton
               color="secondary"
               textVariant="b3"
               onClick={handleCreate}
               startIcon={<PlusIcon />}
             >
               {createOptionText.replace('{{value}}', searchValue)}
-            </AutocompleteCreateNewButton>
+            </SelectCreateNewButton>
           </Box>
         )}
-      </AutocompletePopover>
+      </SelectPopover>
     </div>
   );
 };
 
 // @ts-ignore
-Autocomplete.defaultProps = {
+Select.defaultProps = {
   disableSearch: false,
   noOptionsText: 'No options',
   loading: false,
diff --git a/packages/react-components/src/index.ts b/packages/react-components/src/index.ts
index f290cf83..4fc616e8 100644
--- a/packages/react-components/src/index.ts
+++ b/packages/react-components/src/index.ts
@@ -22,7 +22,7 @@ export * from './Portal';
 export * from './Radio';
 export * from './NativeSelect';
 export * from './Skeleton';
-export * from './Autocomplete';
+export * from './Select';
 export * from './Slide';
 export * from './Slider';
 export * from './Switch';

From 9e47708e1d4ec22f6e8e288714a152462e23c8ee Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Wed, 25 Sep 2024 12:19:44 +0300
Subject: [PATCH 03/21] chore(react-components): add new Autocomplete

---
 .../__snapshots__/autocomplete.test.tsx.snap  | 1809 +++++++++++++++++
 .../src/Autocomplete/autocomplete.stories.tsx |  160 ++
 .../src/Autocomplete/autocomplete.test.tsx    |  107 +
 .../src/Autocomplete/autocomplete.tsx         |  686 +++++++
 .../src/Autocomplete/index.ts                 |    1 +
 .../src/Select/select.stories.tsx             |    1 +
 packages/react-components/src/hooks/index.ts  |    1 +
 .../src/hooks/use_autocomplete.ts             |   17 +
 .../src/hooks/use_outside_click.ts            |   21 +
 9 files changed, 2803 insertions(+)
 create mode 100644 packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
 create mode 100644 packages/react-components/src/Autocomplete/autocomplete.stories.tsx
 create mode 100644 packages/react-components/src/Autocomplete/autocomplete.test.tsx
 create mode 100644 packages/react-components/src/Autocomplete/autocomplete.tsx
 create mode 100644 packages/react-components/src/Autocomplete/index.ts
 create mode 100644 packages/react-components/src/hooks/use_outside_click.ts

diff --git a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
new file mode 100644
index 00000000..50b1a250
--- /dev/null
+++ b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
@@ -0,0 +1,1809 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Autocomplete /> should pass className 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 0 calc(var(--pv-size-base-2) + 24px) 0 var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  height: var(--pv-size-base-7);
+  position: relative;
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled) {
+  color: var(--pv-color-black);
+}
+
+.emotion-0:not(:disabled)[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  margin: 0px var(--pv-size-base);
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-2 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div
+    class="my-class-name"
+  >
+    <button
+      aria-autocomplete="list"
+      aria-controls="test-id-listbox"
+      aria-expanded="false"
+      aria-placeholder="true"
+      class="emotion-0"
+      id="test-id-toggle-button"
+      role="combobox"
+      type="button"
+    >
+      <svg
+        aria-disabled="false"
+        aria-hidden="true"
+        class="emotion-1"
+        fill="none"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-2"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
+      />
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Autocomplete /> should pass error 1`] = `
+.emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 0 calc(var(--pv-size-base-2) + 24px) 0 var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  height: var(--pv-size-base-7);
+  position: relative;
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled) {
+  color: var(--pv-color-black);
+}
+
+.emotion-0:not(:disabled)[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  margin: 0px var(--pv-size-base);
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-2 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.emotion-3 {
+  margin: 0;
+  color: var(--pv-color-wrong);
+  font-weight: var(--pv-text-c2-weight);
+  font-size: var(--pv-text-c2-size);
+  line-height: var(--pv-text-c2-height);
+  letter-spacing: var(--pv-text-c2-spacing);
+  margin-top: 2px;
+}
+
+.emotion-4 {
+  position: fixed;
+  z-index: 1300;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+.emotion-5 {
+  background: var(--pv-color-black);
+  z-index: -1;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+}
+
+.emotion-6 {
+  outline: 0;
+  max-width: calc(100% - 32px);
+  min-width: 16px;
+  max-height: calc(100% - 32px);
+  min-height: 16px;
+  border-radius: 4px;
+  box-shadow: var(--pv-shadow-light-low);
+  background-color: var(--pv-color-white);
+  min-width: 240px;
+}
+
+.emotion-7 {
+  border-color: var(--pv-color-gray-3);
+  border-style: solid;
+  border-width: 0px 0px 1px 0px;
+}
+
+.emotion-8 {
+  padding: var(--pv-size-base-3) var(--pv-size-base-3) var(--pv-size-base-2);
+}
+
+.emotion-9 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 0 var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  height: var(--pv-size-base-7);
+  color: var(--pv-color-black);
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-9::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-9::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-9:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-9::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-9:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-9:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-9:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-9:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-10 {
+  padding: var(--pv-size-base-3) var(--pv-size-base-2);
+}
+
+.emotion-11 {
+  margin: 0;
+  color: var(--pv-color-gray-10);
+  font-weight: var(--pv-text-b2-weight);
+  font-size: var(--pv-text-b2-size);
+  line-height: var(--pv-text-b2-height);
+  letter-spacing: var(--pv-text-b2-spacing);
+}
+
+<body>
+  <div>
+    <div>
+      <button
+        aria-autocomplete="list"
+        aria-controls="test-id-listbox"
+        aria-expanded="true"
+        aria-invalid="true"
+        aria-placeholder="true"
+        class="emotion-0"
+        id="test-id-toggle-button"
+        role="combobox"
+        type="button"
+      >
+        <svg
+          aria-disabled="false"
+          aria-hidden="true"
+          class="emotion-1"
+          fill="none"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+            fill="currentColor"
+          />
+        </svg>
+        <input
+          aria-hidden="true"
+          autocomplete="off"
+          class="emotion-2"
+          id="test-id"
+          tabindex="-1"
+          type="text"
+          value=""
+        />
+      </button>
+      <p
+        class="emotion-3"
+      >
+        Error text
+      </p>
+    </div>
+  </div>
+  <div
+    aria-hidden="false"
+    class="emotion-4"
+    role="presentation"
+  >
+    <div
+      aria-hidden="true"
+      class="emotion-5"
+      style="opacity: 0.5; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      class="emotion-6"
+      style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; position: absolute; left: 0px; top: 0px; width: 0px;"
+      tabindex="-1"
+    >
+      <div
+        class="emotion-7"
+      >
+        <div
+          class="emotion-8"
+        >
+          <input
+            autocapitalize="none"
+            autocomplete="off"
+            autocorrect="false"
+            class="emotion-9"
+            id="test-id-input"
+            placeholder="Search"
+            spellcheck="false"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="emotion-10"
+      >
+        <p
+          class="emotion-11"
+        >
+          No options
+        </p>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Autocomplete /> should pass loading 1`] = `
+.emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 0 calc(var(--pv-size-base-2) + 24px) 0 var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  height: var(--pv-size-base-7);
+  position: relative;
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled) {
+  color: var(--pv-color-black);
+}
+
+.emotion-0:not(:disabled)[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  margin: 0px var(--pv-size-base);
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-2 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.emotion-3 {
+  position: fixed;
+  z-index: 1300;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+.emotion-4 {
+  background: var(--pv-color-black);
+  z-index: -1;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+}
+
+.emotion-5 {
+  outline: 0;
+  max-width: calc(100% - 32px);
+  min-width: 16px;
+  max-height: calc(100% - 32px);
+  min-height: 16px;
+  border-radius: 4px;
+  box-shadow: var(--pv-shadow-light-low);
+  background-color: var(--pv-color-white);
+  min-width: 240px;
+}
+
+.emotion-6 {
+  border-color: var(--pv-color-gray-3);
+  border-style: solid;
+  border-width: 0px 0px 1px 0px;
+}
+
+.emotion-7 {
+  padding: var(--pv-size-base-3) var(--pv-size-base-3) var(--pv-size-base-2);
+}
+
+.emotion-8 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 0 var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  height: var(--pv-size-base-7);
+  color: var(--pv-color-black);
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-8::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-8::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-8:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-8::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-8:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-8:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-8:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-8:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-9 {
+  padding: var(--pv-size-base-3) var(--pv-size-base-2);
+}
+
+.emotion-10 {
+  margin: 0;
+  color: var(--pv-color-gray-10);
+  font-weight: var(--pv-text-b2-weight);
+  font-size: var(--pv-text-b2-size);
+  line-height: var(--pv-text-b2-height);
+  letter-spacing: var(--pv-text-b2-spacing);
+}
+
+<body>
+  <div>
+    <div>
+      <button
+        aria-autocomplete="list"
+        aria-controls="test-id-listbox"
+        aria-expanded="true"
+        aria-placeholder="true"
+        class="emotion-0"
+        id="test-id-toggle-button"
+        role="combobox"
+        type="button"
+      >
+        <svg
+          aria-disabled="false"
+          aria-hidden="true"
+          class="emotion-1"
+          fill="none"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+            fill="currentColor"
+          />
+        </svg>
+        <input
+          aria-hidden="true"
+          autocomplete="off"
+          class="emotion-2"
+          id="test-id"
+          tabindex="-1"
+          type="text"
+          value=""
+        />
+      </button>
+    </div>
+  </div>
+  <div
+    aria-hidden="false"
+    class="emotion-3"
+    role="presentation"
+  >
+    <div
+      aria-hidden="true"
+      class="emotion-4"
+      style="opacity: 0.5; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      class="emotion-5"
+      style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; position: absolute; left: 0px; top: 0px; width: 0px;"
+      tabindex="-1"
+    >
+      <div
+        class="emotion-6"
+      >
+        <div
+          class="emotion-7"
+        >
+          <input
+            autocapitalize="none"
+            autocomplete="off"
+            autocorrect="false"
+            class="emotion-8"
+            disabled=""
+            id="test-id-input"
+            placeholder="Search"
+            spellcheck="false"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="emotion-9"
+      >
+        <p
+          class="emotion-10"
+        >
+          Loading...
+        </p>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Autocomplete /> should pass options 1`] = `
+.emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 0 calc(var(--pv-size-base-2) + 24px) 0 var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  height: var(--pv-size-base-7);
+  position: relative;
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled) {
+  color: var(--pv-color-black);
+}
+
+.emotion-0:not(:disabled)[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  margin: 0px var(--pv-size-base);
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-2 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.emotion-3 {
+  position: fixed;
+  z-index: 1300;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+.emotion-4 {
+  background: var(--pv-color-black);
+  z-index: -1;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+}
+
+.emotion-5 {
+  outline: 0;
+  max-width: calc(100% - 32px);
+  min-width: 16px;
+  max-height: calc(100% - 32px);
+  min-height: 16px;
+  border-radius: 4px;
+  box-shadow: var(--pv-shadow-light-low);
+  background-color: var(--pv-color-white);
+  min-width: 240px;
+}
+
+.emotion-6 {
+  border-color: var(--pv-color-gray-3);
+  border-style: solid;
+  border-width: 0px 0px 1px 0px;
+}
+
+.emotion-7 {
+  padding: var(--pv-size-base-3) var(--pv-size-base-3) var(--pv-size-base-2);
+}
+
+.emotion-8 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 0 var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  height: var(--pv-size-base-7);
+  color: var(--pv-color-black);
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-8::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-8::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-8:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-8::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-8:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-8:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-8:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-8:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-9 {
+  max-height: 36vh;
+  overflow-y: auto;
+  margin: 0;
+  list-style-type: none;
+  position: relative;
+  padding: 10px 0;
+}
+
+.emotion-10 {
+  padding: 0px var(--pv-size-base-2);
+  font-family: inherit;
+  outline: none;
+  width: 100%;
+  height: var(--pv-size-base-7);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  text-align: left;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: background-color 200ms;
+  transition: background-color 200ms;
+  background-color: transparent;
+  border: none;
+  box-sizing: border-box;
+  gap: var(--pv-size-base-2);
+  cursor: pointer;
+  color: var(--pv-color-black);
+}
+
+.emotion-10:hover {
+  background-color: var(--pv-color-gray-3);
+}
+
+.emotion-10:focus-visible,
+.emotion-10[data-focused="true"] {
+  background-color: var(--pv-color-gray-4);
+}
+
+.emotion-10:active,
+.emotion-10[aria-selected="true"] {
+  background-color: var(--pv-color-gray-5);
+}
+
+.emotion-11 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  margin: 0;
+  color: inherit;
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+<body>
+  <div>
+    <div>
+      <button
+        aria-autocomplete="list"
+        aria-controls="test-id-listbox"
+        aria-expanded="true"
+        aria-placeholder="true"
+        class="emotion-0"
+        id="test-id-toggle-button"
+        role="combobox"
+        type="button"
+      >
+        <svg
+          aria-disabled="false"
+          aria-hidden="true"
+          class="emotion-1"
+          fill="none"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+            fill="currentColor"
+          />
+        </svg>
+        <input
+          aria-hidden="true"
+          autocomplete="off"
+          class="emotion-2"
+          id="test-id"
+          tabindex="-1"
+          type="text"
+          value=""
+        />
+      </button>
+    </div>
+  </div>
+  <div
+    aria-hidden="false"
+    class="emotion-3"
+    role="presentation"
+  >
+    <div
+      aria-hidden="true"
+      class="emotion-4"
+      style="opacity: 0.5; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      class="emotion-5"
+      style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; position: absolute; left: 0px; top: 0px; width: 0px;"
+      tabindex="-1"
+    >
+      <div
+        class="emotion-6"
+      >
+        <div
+          class="emotion-7"
+        >
+          <input
+            autocapitalize="none"
+            autocomplete="off"
+            autocorrect="false"
+            class="emotion-8"
+            id="test-id-input"
+            placeholder="Search"
+            spellcheck="false"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <ul
+        class="emotion-9"
+        id="test-id-listbox"
+        role="listbox"
+        tabindex="-1"
+      >
+        <li
+          aria-selected="false"
+          class="emotion-10"
+          data-option-index="0"
+          id="test-id-option-0"
+          role="option"
+          tabindex="-1"
+        >
+          <span
+            class="emotion-11"
+          >
+            test-1
+          </span>
+        </li>
+        <li
+          aria-selected="false"
+          class="emotion-10"
+          data-option-index="1"
+          id="test-id-option-1"
+          role="option"
+          tabindex="-1"
+        >
+          <span
+            class="emotion-11"
+          >
+            test-2
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Autocomplete /> should render with default multiple styles 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 0 calc(var(--pv-size-base-2) + 24px) 0 var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  height: var(--pv-size-base-7);
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled) {
+  color: var(--pv-color-black);
+}
+
+.emotion-0:not(:disabled)[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  margin: 0px var(--pv-size-base);
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-2 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div>
+    <button
+      aria-autocomplete="list"
+      aria-controls="test-id-listbox"
+      aria-expanded="false"
+      aria-placeholder="true"
+      class="emotion-0"
+      id="test-id-toggle-button"
+      role="combobox"
+      type="button"
+    >
+      <svg
+        aria-disabled="false"
+        aria-hidden="true"
+        class="emotion-1"
+        fill="none"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-2"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
+      />
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Autocomplete /> should render with default styles 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 0 calc(var(--pv-size-base-2) + 24px) 0 var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  height: var(--pv-size-base-7);
+  position: relative;
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled) {
+  color: var(--pv-color-black);
+}
+
+.emotion-0:not(:disabled)[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  margin: 0px var(--pv-size-base);
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-2 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div>
+    <button
+      aria-autocomplete="list"
+      aria-controls="test-id-listbox"
+      aria-expanded="false"
+      aria-placeholder="true"
+      class="emotion-0"
+      id="test-id-toggle-button"
+      role="combobox"
+      type="button"
+    >
+      <svg
+        aria-disabled="false"
+        aria-hidden="true"
+        class="emotion-1"
+        fill="none"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-2"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
+      />
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Autocomplete /> sizes size "large" 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 0 calc(var(--pv-size-base-2) + 24px) 0 var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  height: var(--pv-size-base-8);
+  position: relative;
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled) {
+  color: var(--pv-color-black);
+}
+
+.emotion-0:not(:disabled)[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  margin: 0px var(--pv-size-base);
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-2 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div>
+    <button
+      aria-autocomplete="list"
+      aria-controls="test-id-listbox"
+      aria-expanded="false"
+      aria-placeholder="true"
+      class="emotion-0"
+      id="test-id-toggle-button"
+      role="combobox"
+      type="button"
+    >
+      <svg
+        aria-disabled="false"
+        aria-hidden="true"
+        class="emotion-1"
+        fill="none"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-2"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
+      />
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Autocomplete /> sizes size "medium" 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 0 calc(var(--pv-size-base-2) + 24px) 0 var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  height: var(--pv-size-base-7);
+  position: relative;
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled) {
+  color: var(--pv-color-black);
+}
+
+.emotion-0:not(:disabled)[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  margin: 0px var(--pv-size-base);
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-2 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div>
+    <button
+      aria-autocomplete="list"
+      aria-controls="test-id-listbox"
+      aria-expanded="false"
+      aria-placeholder="true"
+      class="emotion-0"
+      id="test-id-toggle-button"
+      role="combobox"
+      type="button"
+    >
+      <svg
+        aria-disabled="false"
+        aria-hidden="true"
+        class="emotion-1"
+        fill="none"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-2"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
+      />
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Autocomplete /> sizes size "small" 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-c1-weight);
+  font-size: var(--pv-text-c1-size);
+  line-height: var(--pv-text-c1-height);
+  letter-spacing: var(--pv-text-c1-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 0 calc(var(--pv-size-base-2) + 24px) 0 var(--pv-size-base-2);
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  height: var(--pv-size-base-6);
+  position: relative;
+  border-color: var(--pv-color-gray-8);
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0:disabled {
+  cursor: not-allowed;
+  background-color: var(--pv-color-gray-1);
+  border-color: var(--pv-color-gray-5);
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-0:not(:disabled) {
+  color: var(--pv-color-black);
+}
+
+.emotion-0:not(:disabled)[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0:not(:disabled)[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:not(:disabled):focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  margin: 0px var(--pv-size-base);
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-1[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-2 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div>
+    <button
+      aria-autocomplete="list"
+      aria-controls="test-id-listbox"
+      aria-expanded="false"
+      aria-placeholder="true"
+      class="emotion-0"
+      id="test-id-toggle-button"
+      role="combobox"
+      type="button"
+    >
+      <svg
+        aria-disabled="false"
+        aria-hidden="true"
+        class="emotion-1"
+        fill="none"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-2"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
+      />
+    </button>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-components/src/Autocomplete/autocomplete.stories.tsx b/packages/react-components/src/Autocomplete/autocomplete.stories.tsx
new file mode 100644
index 00000000..9a58a17a
--- /dev/null
+++ b/packages/react-components/src/Autocomplete/autocomplete.stories.tsx
@@ -0,0 +1,160 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Autocomplete } from './index';
+
+const top100Films = [
+  { title: 'The Shawshank Redemption', year: 1994 },
+  { title: 'The Godfather', year: 1972 },
+  { title: 'The Godfather: Part II', year: 1974 },
+  { title: 'The Dark Knight', year: 2008 },
+  { title: '12 Angry Men', year: 1957 },
+  { title: "Schindler's List", year: 1993 },
+  { title: 'Pulp Fiction', year: 1994 },
+  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
+  { title: 'The Good, the Bad and the Ugly', year: 1966 },
+  { title: 'Fight Club', year: 1999 },
+  { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
+  { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
+  { title: 'Forrest Gump', year: 1994 },
+  { title: 'Inception', year: 2010 },
+  { title: 'The Lord of the Rings: The Two Towers', year: 2002 },
+  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { title: 'Goodfellas', year: 1990 },
+  { title: 'The Matrix', year: 1999 },
+  { title: 'Seven Samurai', year: 1954 },
+  { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
+  { title: 'City of God', year: 2002 },
+  { title: 'Se7en', year: 1995 },
+  { title: 'The Silence of the Lambs', year: 1991 },
+  { title: "It's a Wonderful Life", year: 1946 },
+  { title: 'Life Is Beautiful', year: 1997 },
+  { title: 'The Usual Suspects', year: 1995 },
+  { title: 'Léon: The Professional', year: 1994 },
+  { title: 'Spirited Away', year: 2001 },
+  { title: 'Saving Private Ryan', year: 1998 },
+  { title: 'Once Upon a Time in the West', year: 1968 },
+  { title: 'American History X', year: 1998 },
+  { title: 'Interstellar', year: 2014 },
+  { title: 'Casablanca', year: 1942 },
+  { title: 'City Lights', year: 1931 },
+  { title: 'Psycho', year: 1960 },
+  { title: 'The Green Mile', year: 1999 },
+  { title: 'The Intouchables', year: 2011 },
+  { title: 'Modern Times', year: 1936 },
+  { title: 'Raiders of the Lost Ark', year: 1981 },
+  { title: 'Rear Window', year: 1954 },
+  { title: 'The Pianist', year: 2002 },
+  { title: 'The Departed', year: 2006 },
+  { title: 'Terminator 2: Judgment Day', year: 1991 },
+  { title: 'Back to the Future', year: 1985 },
+  { title: 'Whiplash', year: 2014 },
+  { title: 'Gladiator', year: 2000 },
+  { title: 'Memento', year: 2000 },
+  { title: 'The Prestige', year: 2006 },
+  { title: 'The Lion King', year: 1994 },
+  { title: 'Apocalypse Now', year: 1979 },
+  { title: 'Alien', year: 1979 },
+  { title: 'Sunset Boulevard', year: 1950 },
+  { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },
+  { title: 'The Great Dictator', year: 1940 },
+  { title: 'Cinema Paradiso', year: 1988 },
+  { title: 'The Lives of Others', year: 2006 },
+  { title: 'Grave of the Fireflies', year: 1988 },
+  { title: 'Paths of Glory', year: 1957 },
+  { title: 'Django Unchained', year: 2012 },
+  { title: 'The Shining', year: 1980 },
+  { title: 'WALL·E', year: 2008 },
+  { title: 'American Beauty', year: 1999 },
+  { title: 'The Dark Knight Rises', year: 2012 },
+  { title: 'Princess Mononoke', year: 1997 },
+  { title: 'Aliens', year: 1986 },
+  { title: 'Oldboy', year: 2003 },
+  { title: 'Once Upon a Time in America', year: 1984 },
+  { title: 'Witness for the Prosecution', year: 1957 },
+  { title: 'Das Boot', year: 1981 },
+  { title: 'Citizen Kane', year: 1941 },
+  { title: 'North by Northwest', year: 1959 },
+  { title: 'Vertigo', year: 1958 },
+  { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
+  { title: 'Reservoir Dogs', year: 1992 },
+  { title: 'Braveheart', year: 1995 },
+  { title: 'M', year: 1931 },
+  { title: 'Requiem for a Dream', year: 2000 },
+  { title: 'Amélie', year: 2001 },
+  { title: 'A Clockwork Orange', year: 1971 },
+  { title: 'Like Stars on Earth', year: 2007 },
+  { title: 'Taxi Driver', year: 1976 },
+  { title: 'Lawrence of Arabia', year: 1962 },
+  { title: 'Double Indemnity', year: 1944 },
+  { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
+  { title: 'Amadeus', year: 1984 },
+  { title: 'To Kill a Mockingbird', year: 1962 },
+  { title: 'Toy Story 3', year: 2010 },
+  { title: 'Logan', year: 2017 },
+  { title: 'Full Metal Jacket', year: 1987 },
+  { title: 'Dangal', year: 2016 },
+  { title: 'The Sting', year: 1973 },
+  { title: '2001: A Space Odyssey', year: 1968 },
+  { title: "Singin' in the Rain", year: 1952 },
+  { title: 'Toy Story', year: 1995 },
+  { title: 'Bicycle Thieves', year: 1948 },
+  { title: 'The Kid', year: 1921 },
+  { title: 'Inglourious Basterds', year: 2009 },
+  { title: 'Snatch', year: 2000 },
+  { title: '3 Idiots', year: 2009 },
+  { title: 'Monty Python and the Holy Grail', year: 1975 },
+];
+
+const meta: Meta<typeof Autocomplete> = {
+  title: 'Components/Autocomplete',
+  // @ts-ignore
+  component: Autocomplete,
+  args: {
+    options: top100Films,
+    placeholder: 'Select a movie',
+    getOptionLabel: (option: any) => option.title,
+    // value: [{ title: 'Monty Python and the Holy Grail', year: 1975 }],
+    // multiple: true,
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    options: { control: false },
+    getOptionLabel: { control: false },
+    defaultValue: { control: false },
+    value: { control: false },
+    filterOptions: { control: false },
+    popoverProps: { control: false },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Autocomplete>;
+
+export const Playground: Story = {};
+
+export const Autocomplete2 = () => (
+  <form
+    onSubmit={(e: any) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const formProps = Object.fromEntries(formData);
+
+      console.log(formProps);
+    }}
+  >
+    <Autocomplete
+      options={top100Films}
+      required
+      getOptionLabel={(option: any) => option.title}
+      // multiple
+      name="testForm"
+    />
+
+    <button
+      type="submit"
+    >
+      submit
+    </button>
+  </form>
+);
diff --git a/packages/react-components/src/Autocomplete/autocomplete.test.tsx b/packages/react-components/src/Autocomplete/autocomplete.test.tsx
new file mode 100644
index 00000000..70a5f7a3
--- /dev/null
+++ b/packages/react-components/src/Autocomplete/autocomplete.test.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { renderWithWrapper as render, screen, fireEvent } from '../test-utils';
+import { Autocomplete } from './index';
+
+describe('<Autocomplete />', () => {
+  const options = ['test-1', 'test-2'];
+
+  it('should render with default styles', () => {
+    const { asFragment } = render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render with default multiple styles', () => {
+    const { asFragment } = render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        multiple
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should pass className', () => {
+    const { asFragment } = render(
+      <Autocomplete
+        options={options}
+        id="test-id"
+        className="my-class-name"
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  describe('sizes', () => {
+    const sizes: Array<React.ComponentProps<typeof Autocomplete>['size']> = [
+      'small',
+      'medium',
+      'large',
+    ];
+
+    sizes.forEach((size) => {
+      it(`size "${size}"`, () => {
+        const { asFragment } = render(
+          <Autocomplete
+            options={options}
+            id="test-id"
+            size={size}
+          />,
+        );
+
+        expect(asFragment()).toMatchSnapshot();
+      });
+    });
+  });
+
+  it('should pass loading', () => {
+    const { baseElement } = render(
+      <Autocomplete
+        options={[]}
+        id="test-id"
+        loading
+        loadingText="Loading..."
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('combobox'));
+
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should pass error', () => {
+    const { baseElement } = render(
+      <Autocomplete
+        options={[]}
+        id="test-id"
+        error
+        errorText="Error text"
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('combobox'));
+
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should pass options', () => {
+    const { baseElement } = render(
+      <Autocomplete
+        id="test-id"
+        options={options}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('combobox'));
+
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
new file mode 100644
index 00000000..d31c3830
--- /dev/null
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -0,0 +1,686 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import {
+  useAutocomplete,
+  UseAutocompleteProps,
+  UseAutocompleteReturnType,
+  AutocompleteValue,
+  useOutsideClick,
+} from '../hooks';
+import { Popper } from '../Popper';
+import { Typography, TypographyOwnProps } from '../Typography';
+import { Box } from '../Box';
+import { Chip } from '../Chip';
+import { ArrowDropDownIcon } from '../icons';
+import { MenuItem } from '../MenuList';
+
+/**
+ * Types.
+ */
+export type AutocompleteRenderGroupParams = {
+  key: string | number;
+  group: string;
+  children?: React.ReactNode;
+};
+
+export type AutocompleteOwnProps<
+  T,
+  Multiple extends boolean | undefined = undefined,
+> = UseAutocompleteProps<T, Multiple> & {
+  /**
+   * The className of the component.
+   */
+  className?: string;
+  /**
+   * The size of the root component.
+   */
+  size?: (
+    'small' |
+    'medium' |
+    'large'
+  );
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder?: string;
+  /**
+   * The label content.
+   */
+  label?: string;
+  /**
+   * Text to display when there are no options.
+   */
+  noOptionsText?: React.ReactNode;
+  /**
+   * If `true`, the component is in a loading state.
+   * This shows the `loadingText` in place of suggestions (only if there are no
+   * suggestions to show, e.g. `options` are empty).
+   */
+  loading?: boolean;
+  /**
+   * Text to display when in a loading state.
+   */
+  loadingText?: React.ReactNode;
+  /**
+   * The maximum number of tags that will be visible when not focused.
+   */
+  limitTags?: number;
+  /**
+   * If `true`, the autocomplete will be disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Name attribute of the `input` element.
+   */
+  name?: string;
+  /**
+   * If `true`, the `input` element is required.
+   */
+  required?: boolean;
+  /**
+   * If `true`, the create button element will be shown.
+   */
+  allowCreateOption?: boolean;
+  /**
+   * If `true`, the `input` will indicate an error.
+   */
+  error?: boolean;
+  errorText?: string;
+  /**
+   * Render the root element.
+   */
+  renderRoot?: (
+    props: object,
+    value: AutocompleteValue<T, Multiple>,
+    getTagProps: UseAutocompleteReturnType<T, Multiple>['getTagProps'],
+  ) => React.ReactNode;
+  /**
+   * Render the option, use `getOptionLabel` by default.
+   */
+  renderOption?: (props: object, option: T) => React.ReactNode;
+  /**
+   * The label to display when the tags are truncated (`limitTags`).
+   */
+  getLimitTagsText?: (more: number) => string;
+  /**
+   * Callback fired when the create button clicked.
+   */
+  onCreate?: (event: React.SyntheticEvent, value: string) => void;
+};
+/**
+ *
+ */
+
+/**
+ * Styles.
+ */
+const AutocompleteField = styled(Box)<
+TypographyOwnProps & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' | 'disabled'>>
+>(
+  (props) => ({
+    outline: 'none',
+    boxSizing: 'border-box',
+    width: '100%',
+    borderRadius: '4px',
+    padding: '3px calc(var(--pv-size-base-2) + 24px) 3px var(--pv-size-base-2)',
+    backgroundColor: 'var(--pv-color-gray-1)',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    transition: 'background-color 200ms, color 200ms, border-color 200ms',
+    appearance: 'none',
+    userSelect: 'none',
+    textAlign: 'left',
+    cursor: 'text',
+    fontFamily: 'inherit',
+    minHeight: 'var(--pv-size-base-8)',
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: 'var(--pv-size-base)',
+    ...(props.size === 'small' && {
+      minHeight: 'var(--pv-size-base-6)',
+      padding: '1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2)',
+    }),
+    ...(props.size === 'medium' && {
+      minHeight: 'var(--pv-size-base-7)',
+      padding: '2px calc(var(--pv-size-base-2) + 24px) 2px var(--pv-size-base-2)',
+    }),
+  }),
+  (props) => {
+    const isDark = props.theme.mode === 'dark';
+    const color = isDark
+      ? 'var(--pv-color-white)'
+      : 'var(--pv-color-black)';
+    let borderColor = 'var(--pv-color-gray-8)';
+    let colorPlaceholder = 'var(--pv-color-gray-9)';
+    let borderColorHover = 'var(--pv-color-gray-7)';
+    let borderColorDisabled = 'var(--pv-color-gray-5)';
+    let colorDisabled = 'var(--pv-color-gray-7)';
+    let invalidBackgroundColor = 'var(--pv-color-wrong-tint-5)';
+    let invalidBorderColor = 'var(--pv-color-wrong-tint-3)';
+    let backgroundColorFocus = 'var(--pv-color-secondary-tint-5)';
+    let borderColorFocus = 'var(--pv-color-secondary-tint-3)';
+
+    if (isDark) {
+      borderColor = 'var(--pv-color-gray-5)';
+      colorPlaceholder = 'var(--pv-color-gray-6)';
+      borderColorHover = 'var(--pv-color-gray-4)';
+      borderColorDisabled = 'var(--pv-color-gray-4)';
+      colorDisabled = 'var(--pv-color-gray-4)';
+      invalidBackgroundColor = 'var(--pv-color-wrong-shade-4)';
+      invalidBorderColor = 'var(--pv-color-wrong-shade-1)';
+      backgroundColorFocus = 'var(--pv-color-secondary-shade-4)';
+      borderColorFocus = 'var(--pv-color-secondary-shade-1)';
+    }
+
+    return ({
+      borderColor,
+      '&:hover': {
+        backgroundColor: 'var(--pv-color-gray-3)',
+        borderColor: borderColorHover,
+      },
+      '&:disabled': {
+        cursor: 'not-allowed',
+        backgroundColor: 'var(--pv-color-gray-1)',
+        borderColor: borderColorDisabled,
+        color: colorDisabled,
+      },
+      '&:not(:disabled)': {
+        color,
+        '&[aria-placeholder]': {
+          color: colorPlaceholder,
+        },
+        '&[aria-invalid]': {
+          backgroundColor: invalidBackgroundColor,
+          borderColor: invalidBorderColor,
+        },
+        '&:focus-visible': {
+          backgroundColor: backgroundColorFocus,
+          borderColor: borderColorFocus,
+        },
+        '&:focus-within': {
+          backgroundColor: backgroundColorFocus,
+          borderColor: borderColorFocus,
+        },
+      },
+    });
+  },
+);
+
+const AutocompleteArrowIcon = styled(ArrowDropDownIcon)({
+  position: 'absolute',
+  right: '0px',
+  top: 'calc(50% - 12px)',
+  margin: '0px var(--pv-size-base)',
+  color: 'var(--pv-color-gray-10)',
+  '&[aria-disabled="true"]': {
+    color: 'inherit',
+  },
+});
+
+const AutocompleteNativeInput = styled('input')({
+  bottom: 0,
+  left: 0,
+  height: '100%',
+  position: 'absolute',
+  opacity: 0,
+  pointerEvents: 'none',
+  width: '100%',
+  boxSizing: 'border-box',
+});
+
+const AutocompleteDropdownStateItem = styled('div')({
+  padding: 'var(--pv-size-base-3) var(--pv-size-base-2)',
+});
+
+const AutocompleteDropdownList = styled('ul')({
+  maxHeight: '36vh',
+  overflowY: 'auto',
+  margin: 0,
+  listStyleType: 'none',
+  position: 'relative',
+  padding: '10px 0',
+});
+
+const AutocompleteDropdownGroupName = styled(Typography)(
+  (props) => ({
+    padding: 'var(--pv-size-base-2)',
+    color: props.theme.mode === 'dark'
+      ? 'var(--pv-color-gray-6)'
+      : 'var(--pv-color-gray-9)',
+  }),
+);
+
+const AutocompleteDropdownGroupList = styled('ul')({
+  padding: 0,
+  listStyleType: 'none',
+});
+
+const AutocompleteDropdownGroupListItem = styled(MenuItem)<Required<{ inGroup: boolean }>>(
+  (props) => ({
+    ...(props.inGroup && {
+      padding: '0px var(--pv-size-base-2) 0 var(--pv-size-base-3)',
+    }),
+  }),
+);
+
+const AutocompletePopover = styled(Popper)(
+  {
+    minWidth: 240,
+    outline: 0,
+    marginTop: '1px',
+    borderRadius: '4px',
+    minHeight: '16px',
+    maxHeight: 'calc(100% - 32px)',
+    zIndex: 1300,
+  },
+  (props) => {
+    const isDark = props.theme.mode === 'dark';
+
+    let backgroundColor = 'var(--pv-color-white)';
+    let boxShadow = 'var(--pv-shadow-light-low)';
+
+    if (isDark) {
+      backgroundColor = 'var(--pv-color-gray-3)';
+      boxShadow = 'var(--pv-shadow-dark-medium)';
+    }
+
+    return ({
+      backgroundColor,
+      boxShadow,
+    });
+  },
+);
+
+const AutocompleteTag = styled(Chip)<{
+  tagsLength: number,
+  limitTags: number,
+  size: AutocompleteOwnProps<any>['size'],
+}>((props) => ({
+  label: 'Autocomplete-tag',
+  borderRadius: '3px',
+  margin: 0,
+  ...(props.tagsLength === 1 && {
+    maxWidth: 'calc(100% - var(--pv-size-base))',
+  }),
+  ...(props.tagsLength > 1 && props.limitTags > 0 && {
+    maxWidth: `calc(${100 / props.limitTags}% - var(--pv-size-base))`,
+  }),
+  ...(props.size === 'small' && {
+    height: 'var(--pv-size-base-5)',
+  }),
+}));
+
+const AutocompleteTagSize = styled(Typography)({
+  margin: '0 var(--pv-size-base-2)',
+});
+
+const AutocompleteInputField = styled(Typography)(
+  () => ({
+    fontFamily: 'inherit',
+    outline: 'none',
+    boxSizing: 'border-box',
+    minWidth: '30px',
+    width: 0,
+    flexGrow: 1,
+    backgroundColor: 'transparent',
+    borderStyle: 'none',
+    appearance: 'none',
+  }),
+  (props) => {
+    const isDark = props.theme.mode === 'dark';
+    const color = isDark
+      ? 'var(--pv-color-white)'
+      : 'var(--pv-color-black)';
+
+    let colorPlaceholder = 'var(--pv-color-gray-9)';
+    let colorDisabled = 'var(--pv-color-gray-7)';
+
+    if (isDark) {
+      colorPlaceholder = 'var(--pv-color-gray-6)';
+      colorDisabled = 'var(--pv-color-gray-4)';
+    }
+
+    return ({
+      color,
+      '&::placeholder': {
+        color: colorPlaceholder,
+      },
+      '&:disabled': {
+        cursor: 'not-allowed',
+        color: colorDisabled,
+      },
+    });
+  },
+);
+
+const AutocompleteError = styled(Typography)({
+  marginTop: '2px',
+});
+
+const AutocompleteLabel = styled('label')({
+  label: 'TextField-label',
+  marginBottom: '2px',
+  display: 'inline-block',
+});
+/**
+ *
+ */
+
+export const Autocomplete = <
+  T,
+  Multiple extends boolean | undefined = false,
+>(props: AutocompleteOwnProps<T, Multiple>): JSX.Element => {
+  const {
+    className,
+    size,
+    placeholder,
+    label,
+    disabled = false,
+    noOptionsText,
+    loading,
+    loadingText,
+    limitTags = -1,
+    name,
+    required,
+    multiple = false,
+    readOnly,
+    error,
+    errorText,
+    renderRoot: renderRootProp,
+    renderOption: renderOptionProp,
+    getLimitTagsText = (more) => `${more} more`,
+    groupBy,
+    onCreate,
+  } = props;
+  const {
+    id,
+    value,
+    searchValue,
+    groupedOptions,
+    getRootProps,
+    getInputLabelProps,
+    getInputProps,
+    getListboxProps,
+    getOptionProps,
+    getPopoverProps,
+    getTagProps,
+    getOptionLabel,
+    handleDeleteAllValues,
+  } = useAutocomplete(props);
+  const {
+    onChange,
+    ...otherInputProps
+  } = getInputProps();
+
+  const rootProps = getRootProps();
+  const popoverProps = getPopoverProps();
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event);
+
+    const { value: valueInput } = event.target;
+
+    if (valueInput === '') {
+      handleDeleteAllValues(event);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    // Wait until IME is settled.
+    if (event.which !== 229) {
+      switch (event.key) {
+        case 'Escape':
+          // Prevent cursor move
+          event.preventDefault();
+
+          popoverProps.onClose(event);
+          break;
+        case 'Enter':
+          // Prevent cursor move
+          event.preventDefault();
+
+          if (onCreate && !groupedOptions.length) {
+            onCreate(event, searchValue);
+          }
+
+          popoverProps.onKeyDown(event);
+          break;
+
+        default:
+          popoverProps.onKeyDown(event);
+      }
+    }
+  };
+
+  const defaultRenderOption: AutocompleteOwnProps<T, Multiple>['renderOption'] = (propsOption, option) => (
+    <AutocompleteDropdownGroupListItem
+      {...propsOption}
+      inGroup={Boolean(groupBy)}
+    >
+      {getOptionLabel(option)}
+    </AutocompleteDropdownGroupListItem>
+  );
+
+  const renderGroup = (params: AutocompleteRenderGroupParams) => (
+    <li key={params.key}>
+      <AutocompleteDropdownGroupName
+        variant="c1"
+        color="gray-10"
+      >
+        {params.group}
+      </AutocompleteDropdownGroupName>
+      <AutocompleteDropdownGroupList>
+        {params.children}
+      </AutocompleteDropdownGroupList>
+    </li>
+  );
+
+  const renderValue = () => {
+    if (!value || (Array.isArray(value) && value.length === 0)) {
+      return null;
+    }
+
+    if (Array.isArray(value)) {
+      const more = (value.length > limitTags && limitTags !== -1)
+        && !popoverProps.open ? (value.length - limitTags) : 0;
+      const valueLimits = more > 0 ? value.slice(0, limitTags) : value;
+
+      return (
+        <>
+          {valueLimits.map((v, index) => (
+            <AutocompleteTag
+              {...getTagProps(v, index)}
+              color="secondary"
+              variant="contained"
+              size={size}
+              limitTags={limitTags}
+              tagsLength={value.length}
+            >
+              {getOptionLabel(v)}
+            </AutocompleteTag>
+          ))}
+          {!!more && (
+            <AutocompleteTagSize
+              variant="c2"
+              color="gray-9"
+            >
+              {getLimitTagsText(more)}
+            </AutocompleteTagSize>
+          )}
+        </>
+      );
+    }
+
+    return getOptionLabel(value as T);
+  };
+
+  const renderedValue = renderValue();
+  const isValueEmpty = renderedValue === null;
+  const popoverRef = useOutsideClick(popoverProps.onClose);
+
+  const defaultRenderRoot: AutocompleteOwnProps<T, Multiple>['renderRoot'] = (propsRoot, valueRoot) => (
+    <AutocompleteField
+      {...propsRoot}
+      aria-invalid={error || undefined}
+      aria-placeholder={isValueEmpty || undefined}
+      size={size}
+      disabled={disabled}
+      // @ts-ignore
+      component="label"
+    >
+      {multiple ? (
+        <AutocompleteInputField
+          {...otherInputProps}
+          noWrap
+          // @ts-ignore
+          component="input"
+          type="text"
+          variant={size === 'small' ? 'c1' : 'b3'}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          onChange={onChange}
+          onKeyDown={handleKeyDown}
+        />
+      ) : (
+        <AutocompleteInputField
+          {...otherInputProps}
+          noWrap
+          // @ts-ignore
+          component="input"
+          type="text"
+          value={searchValue || renderedValue || ''}
+          variant={size === 'small' ? 'c1' : 'b3'}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+        />
+      )}
+      <AutocompleteArrowIcon
+        aria-disabled={disabled}
+        aria-hidden
+      />
+      <AutocompleteNativeInput
+        type="text"
+        value={isValueEmpty ? '' : JSON.stringify(valueRoot)}
+        tabIndex={-1}
+        aria-hidden="true"
+        disabled={disabled}
+        autoComplete="off"
+        id={id}
+        name={name}
+        required={required}
+        readOnly={readOnly}
+        onChange={() => { }}
+      />
+    </AutocompleteField>
+  );
+
+  const renderOption = renderOptionProp || defaultRenderOption;
+  const renderRoot = renderRootProp || defaultRenderRoot;
+  const renderListOption = (option: T, index: number) => {
+    const optionProps = getOptionProps(option, index);
+
+    return renderOption(optionProps, option);
+  };
+
+  return (
+    <div className={className}>
+      {label && (
+        <AutocompleteLabel
+          {...getInputLabelProps()}
+        >
+          <Typography
+            component="span"
+            variant="c2"
+            color="gray-10"
+          >
+            {label}
+          </Typography>
+        </AutocompleteLabel>
+      )}
+      {renderRoot(
+        {
+          ...rootProps,
+          disabled,
+        },
+        value,
+        getTagProps,
+      )}
+      {error && errorText && (
+        <AutocompleteError
+          variant="c2"
+          color="wrong"
+        >
+          {errorText}
+        </AutocompleteError>
+      )}
+      <AutocompletePopover
+        placement="bottom-start"
+        allowUseSameWidth
+        {...popoverProps}
+        tabIndex={-1}
+      >
+        <div ref={popoverRef}>
+          {loading && groupedOptions.length === 0 && (
+            <AutocompleteDropdownStateItem>
+              {typeof loadingText === 'string' ? (
+                <Typography
+                  variant="b2"
+                  color="gray-10"
+                >
+                  {loadingText}
+                </Typography>
+              ) : loadingText}
+            </AutocompleteDropdownStateItem>
+          )}
+          {groupedOptions.length === 0 && !loading && (
+            <AutocompleteDropdownStateItem>
+              {typeof noOptionsText === 'string' ? (
+                <Typography
+                  variant="b2"
+                  color="gray-10"
+                >
+                  {noOptionsText}
+                </Typography>
+              ) : noOptionsText}
+            </AutocompleteDropdownStateItem>
+          )}
+          {groupedOptions.length > 0 && (
+            <AutocompleteDropdownList {...getListboxProps()}>
+              {groupedOptions
+                // @ts-ignore
+                .map((option, index) => {
+                  // @ts-ignore
+                  if (groupBy && 'options' in option) {
+                    return renderGroup({
+                      key: option.key,
+                      group: option.group,
+                      // @ts-ignore
+                      children: option.options.map((option2, index2) => (
+                        renderListOption(option2, option.index + index2)
+                      )),
+                    });
+                  }
+
+                  return renderListOption(option as T, index);
+                })}
+            </AutocompleteDropdownList>
+          )}
+        </div>
+      </AutocompletePopover>
+    </div>
+  );
+};
+
+// @ts-ignore
+Autocomplete.defaultProps = {
+  noOptionsText: 'No options',
+  loading: false,
+  loadingText: 'Loading...',
+  required: false,
+  allowCreateOption: false,
+  size: 'medium',
+};
diff --git a/packages/react-components/src/Autocomplete/index.ts b/packages/react-components/src/Autocomplete/index.ts
new file mode 100644
index 00000000..7020b66f
--- /dev/null
+++ b/packages/react-components/src/Autocomplete/index.ts
@@ -0,0 +1 @@
+export { Autocomplete } from './autocomplete';
diff --git a/packages/react-components/src/Select/select.stories.tsx b/packages/react-components/src/Select/select.stories.tsx
index 420d62da..06cb3180 100644
--- a/packages/react-components/src/Select/select.stories.tsx
+++ b/packages/react-components/src/Select/select.stories.tsx
@@ -112,6 +112,7 @@ const meta: Meta<typeof Select> = {
     options: top100Films,
     placeholder: 'Select a movie',
     getOptionLabel: (option: any) => option.title,
+    value: { title: 'Monty Python and the Holy Grail', year: 1975 },
   },
   tags: ['autodocs'],
   argTypes: {
diff --git a/packages/react-components/src/hooks/index.ts b/packages/react-components/src/hooks/index.ts
index 5be5ca6a..c33abf1d 100644
--- a/packages/react-components/src/hooks/index.ts
+++ b/packages/react-components/src/hooks/index.ts
@@ -21,3 +21,4 @@ export type {
 export { useEventCallback } from './use_event_callback';
 export { useEnhancedEffect } from './use_enhanced_effect';
 export { useDebounceCallback } from './use_debounce_callback';
+export { useOutsideClick } from './use_outside_click';
diff --git a/packages/react-components/src/hooks/use_autocomplete.ts b/packages/react-components/src/hooks/use_autocomplete.ts
index 8ada1741..1dbc498f 100644
--- a/packages/react-components/src/hooks/use_autocomplete.ts
+++ b/packages/react-components/src/hooks/use_autocomplete.ts
@@ -136,6 +136,7 @@ Multiple extends boolean | undefined = undefined,
     onDelete?: (event: React.SyntheticEvent) => void;
   };
   getOptionLabel: (option: T) => string;
+  handleDeleteAllValues: (event: React.SyntheticEvent,) => void;
 };
 /**
  *
@@ -481,6 +482,7 @@ Multiple extends boolean | undefined = false,
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    handleOpen(event);
     // Wait until IME is settled.
     if (event.which !== 229) {
       switch (event.key) {
@@ -525,6 +527,20 @@ Multiple extends boolean | undefined = false,
     selectNewValue(event, option, index, 'removeOption');
   };
 
+  const handleDeleteAllValues = (event: React.SyntheticEvent) => {
+    let newValue: T | T[] = null;
+
+    if (multiple) {
+      newValue = [];
+    }
+
+    setValue(newValue as AutocompleteValue<T, Multiple>);
+
+    if (onChange) {
+      onChange(event, newValue as AutocompleteValue<T, Multiple>, { option: null, index: 0 }, 'removeOption');
+    }
+  };
+
   let groupedOptions = filteredOptions;
 
   if (groupBy) {
@@ -608,6 +624,7 @@ Multiple extends boolean | undefined = false,
       tabIndex: -1,
       onDelete: readOnly ? undefined : handleTagDelete(option, index),
     }),
+    handleDeleteAllValues,
     getOptionLabel,
     groupedOptions,
     popupOpen,
diff --git a/packages/react-components/src/hooks/use_outside_click.ts b/packages/react-components/src/hooks/use_outside_click.ts
new file mode 100644
index 00000000..ccea36cf
--- /dev/null
+++ b/packages/react-components/src/hooks/use_outside_click.ts
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const useOutsideClick = (callback: Function) => {
+  const ref = React.useRef(null);
+
+  React.useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    };
+
+    document.addEventListener('click', handleClick, true);
+
+    return () => {
+      document.removeEventListener('click', handleClick, true);
+    };
+  }, [ref, callback]);
+
+  return ref;
+};

From 7b339986d7fa46742d912b148dd540d1b2bcb7ce Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Wed, 25 Sep 2024 12:22:16 +0300
Subject: [PATCH 04/21] chore(react-components): fix storybook

---
 .../src/Autocomplete/autocomplete.stories.tsx | 29 -------------------
 1 file changed, 29 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.stories.tsx b/packages/react-components/src/Autocomplete/autocomplete.stories.tsx
index 9a58a17a..1a7f233f 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.stories.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Autocomplete } from './index';
 
@@ -113,8 +112,6 @@ const meta: Meta<typeof Autocomplete> = {
     options: top100Films,
     placeholder: 'Select a movie',
     getOptionLabel: (option: any) => option.title,
-    // value: [{ title: 'Monty Python and the Holy Grail', year: 1975 }],
-    // multiple: true,
   },
   tags: ['autodocs'],
   argTypes: {
@@ -132,29 +129,3 @@ export default meta;
 type Story = StoryObj<typeof Autocomplete>;
 
 export const Playground: Story = {};
-
-export const Autocomplete2 = () => (
-  <form
-    onSubmit={(e: any) => {
-      e.preventDefault();
-      const formData = new FormData(e.target);
-      const formProps = Object.fromEntries(formData);
-
-      console.log(formProps);
-    }}
-  >
-    <Autocomplete
-      options={top100Films}
-      required
-      getOptionLabel={(option: any) => option.title}
-      // multiple
-      name="testForm"
-    />
-
-    <button
-      type="submit"
-    >
-      submit
-    </button>
-  </form>
-);

From fd0c61ec2315c4dfb8df39f92fcf2c88f9e55440 Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Thu, 26 Sep 2024 17:20:37 +0300
Subject: [PATCH 05/21] chore(react-components): update snapshot

---
 ...st.tsx.snap => native_select.test.tsx.snap} | 10 +++++-----
 ...lete.test.tsx.snap => select.test.tsx.snap} | 18 +++++++++---------
 2 files changed, 14 insertions(+), 14 deletions(-)
 rename packages/react-components/src/NativeSelect/__snapshots__/{select.test.tsx.snap => native_select.test.tsx.snap} (97%)
 rename packages/react-components/src/Select/__snapshots__/{autocomplete.test.tsx.snap => select.test.tsx.snap} (98%)

diff --git a/packages/react-components/src/NativeSelect/__snapshots__/select.test.tsx.snap b/packages/react-components/src/NativeSelect/__snapshots__/native_select.test.tsx.snap
similarity index 97%
rename from packages/react-components/src/NativeSelect/__snapshots__/select.test.tsx.snap
rename to packages/react-components/src/NativeSelect/__snapshots__/native_select.test.tsx.snap
index 3f1b7015..3cb11ae7 100644
--- a/packages/react-components/src/NativeSelect/__snapshots__/select.test.tsx.snap
+++ b/packages/react-components/src/NativeSelect/__snapshots__/native_select.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Select /> should pass className 1`] = `
+exports[`<NativeSelect /> should pass className 1`] = `
 <DocumentFragment>
   .emotion-0 {
   position: relative;
@@ -103,7 +103,7 @@ exports[`<Select /> should pass className 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Select /> should render with default styles 1`] = `
+exports[`<NativeSelect /> should render with default styles 1`] = `
 <DocumentFragment>
   .emotion-0 {
   position: relative;
@@ -204,7 +204,7 @@ exports[`<Select /> should render with default styles 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Select /> sizes size "large" 1`] = `
+exports[`<NativeSelect /> sizes size "large" 1`] = `
 <DocumentFragment>
   .emotion-0 {
   position: relative;
@@ -305,7 +305,7 @@ exports[`<Select /> sizes size "large" 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Select /> sizes size "medium" 1`] = `
+exports[`<NativeSelect /> sizes size "medium" 1`] = `
 <DocumentFragment>
   .emotion-0 {
   position: relative;
@@ -406,7 +406,7 @@ exports[`<Select /> sizes size "medium" 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Select /> sizes size "small" 1`] = `
+exports[`<NativeSelect /> sizes size "small" 1`] = `
 <DocumentFragment>
   .emotion-0 {
   position: relative;
diff --git a/packages/react-components/src/Select/__snapshots__/autocomplete.test.tsx.snap b/packages/react-components/src/Select/__snapshots__/select.test.tsx.snap
similarity index 98%
rename from packages/react-components/src/Select/__snapshots__/autocomplete.test.tsx.snap
rename to packages/react-components/src/Select/__snapshots__/select.test.tsx.snap
index 50b1a250..80fc2e17 100644
--- a/packages/react-components/src/Select/__snapshots__/autocomplete.test.tsx.snap
+++ b/packages/react-components/src/Select/__snapshots__/select.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Autocomplete /> should pass className 1`] = `
+exports[`<Select /> should pass className 1`] = `
 <DocumentFragment>
   .emotion-0 {
   margin: 0;
@@ -133,7 +133,7 @@ exports[`<Autocomplete /> should pass className 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Autocomplete /> should pass error 1`] = `
+exports[`<Select /> should pass error 1`] = `
 .emotion-0 {
   margin: 0;
   color: var(--pv-color-black);
@@ -452,7 +452,7 @@ exports[`<Autocomplete /> should pass error 1`] = `
 </body>
 `;
 
-exports[`<Autocomplete /> should pass loading 1`] = `
+exports[`<Select /> should pass loading 1`] = `
 .emotion-0 {
   margin: 0;
   color: var(--pv-color-black);
@@ -756,7 +756,7 @@ exports[`<Autocomplete /> should pass loading 1`] = `
 </body>
 `;
 
-exports[`<Autocomplete /> should pass options 1`] = `
+exports[`<Select /> should pass options 1`] = `
 .emotion-0 {
   margin: 0;
   color: var(--pv-color-black);
@@ -1145,7 +1145,7 @@ exports[`<Autocomplete /> should pass options 1`] = `
 </body>
 `;
 
-exports[`<Autocomplete /> should render with default multiple styles 1`] = `
+exports[`<Select /> should render with default multiple styles 1`] = `
 <DocumentFragment>
   .emotion-0 {
   margin: 0;
@@ -1284,7 +1284,7 @@ exports[`<Autocomplete /> should render with default multiple styles 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Autocomplete /> should render with default styles 1`] = `
+exports[`<Select /> should render with default styles 1`] = `
 <DocumentFragment>
   .emotion-0 {
   margin: 0;
@@ -1415,7 +1415,7 @@ exports[`<Autocomplete /> should render with default styles 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Autocomplete /> sizes size "large" 1`] = `
+exports[`<Select /> sizes size "large" 1`] = `
 <DocumentFragment>
   .emotion-0 {
   margin: 0;
@@ -1546,7 +1546,7 @@ exports[`<Autocomplete /> sizes size "large" 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Autocomplete /> sizes size "medium" 1`] = `
+exports[`<Select /> sizes size "medium" 1`] = `
 <DocumentFragment>
   .emotion-0 {
   margin: 0;
@@ -1677,7 +1677,7 @@ exports[`<Autocomplete /> sizes size "medium" 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Autocomplete /> sizes size "small" 1`] = `
+exports[`<Select /> sizes size "small" 1`] = `
 <DocumentFragment>
   .emotion-0 {
   margin: 0;

From 2667d502e8fe8b548fbd44be46bc3c1f32f8d457 Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Thu, 26 Sep 2024 17:23:49 +0300
Subject: [PATCH 06/21] chore(react-components): removed extra changes

---
 packages/react-components/src/Select/select.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-components/src/Select/select.stories.tsx b/packages/react-components/src/Select/select.stories.tsx
index 06cb3180..420d62da 100644
--- a/packages/react-components/src/Select/select.stories.tsx
+++ b/packages/react-components/src/Select/select.stories.tsx
@@ -112,7 +112,6 @@ const meta: Meta<typeof Select> = {
     options: top100Films,
     placeholder: 'Select a movie',
     getOptionLabel: (option: any) => option.title,
-    value: { title: 'Monty Python and the Holy Grail', year: 1975 },
   },
   tags: ['autodocs'],
   argTypes: {

From c2d0dea1fec74bfbae54322473a2758ca4e5859a Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Mon, 30 Sep 2024 12:07:36 +0300
Subject: [PATCH 07/21] chore(react-components): added showing chip in multiple
 mode

---
 .../src/Autocomplete/autocomplete.tsx         | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index d31c3830..9d21a826 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -531,18 +531,21 @@ export const Autocomplete = <
       component="label"
     >
       {multiple ? (
-        <AutocompleteInputField
-          {...otherInputProps}
-          noWrap
-          // @ts-ignore
-          component="input"
-          type="text"
-          variant={size === 'small' ? 'c1' : 'b3'}
-          placeholder={placeholder}
-          readOnly={readOnly}
-          onChange={onChange}
-          onKeyDown={handleKeyDown}
-        />
+        <>
+          {isValueEmpty ? null : renderedValue}
+          <AutocompleteInputField
+            {...otherInputProps}
+            noWrap
+            // @ts-ignore
+            component="input"
+            type="text"
+            variant={size === 'small' ? 'c1' : 'b3'}
+            placeholder={placeholder}
+            readOnly={readOnly}
+            onChange={onChange}
+            onKeyDown={handleKeyDown}
+          />
+        </>
       ) : (
         <AutocompleteInputField
           {...otherInputProps}

From df760654ce37263feacd8bcb773c502141368b53 Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Fri, 4 Oct 2024 14:08:06 +0300
Subject: [PATCH 08/21] chore(react-components): fix label

---
 .../react-components/src/Autocomplete/autocomplete.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 9d21a826..5154ecd0 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -520,13 +520,17 @@ export const Autocomplete = <
   const isValueEmpty = renderedValue === null;
   const popoverRef = useOutsideClick(popoverProps.onClose);
 
-  const defaultRenderRoot: AutocompleteOwnProps<T, Multiple>['renderRoot'] = (propsRoot, valueRoot) => (
+  const defaultRenderRoot: AutocompleteOwnProps<T, Multiple>['renderRoot'] = ({
+    // @ts-ignore
+    ref,
+    ...propsRoot
+  }, valueRoot) => (
     <AutocompleteField
-      {...propsRoot}
       aria-invalid={error || undefined}
       aria-placeholder={isValueEmpty || undefined}
       size={size}
       disabled={disabled}
+      ref={ref}
       // @ts-ignore
       component="label"
     >
@@ -535,6 +539,7 @@ export const Autocomplete = <
           {isValueEmpty ? null : renderedValue}
           <AutocompleteInputField
             {...otherInputProps}
+            {...propsRoot}
             noWrap
             // @ts-ignore
             component="input"
@@ -549,6 +554,7 @@ export const Autocomplete = <
       ) : (
         <AutocompleteInputField
           {...otherInputProps}
+          {...propsRoot}
           noWrap
           // @ts-ignore
           component="input"

From 3296c165b4c69a1a43fa957cccad65e549a75745 Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Mon, 7 Oct 2024 11:52:34 +0300
Subject: [PATCH 09/21] chore(react-components): replace handleDeleteAllValues

---
 .../src/Autocomplete/autocomplete.tsx         |  7 +++-
 .../src/hooks/use_autocomplete.ts             | 42 ++++++++-----------
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 5154ecd0..66a14dcc 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -407,12 +407,15 @@ export const Autocomplete = <
     getPopoverProps,
     getTagProps,
     getOptionLabel,
-    handleDeleteAllValues,
+    getClearProps,
   } = useAutocomplete(props);
   const {
     onChange,
     ...otherInputProps
   } = getInputProps();
+  const {
+    onClick,
+  } = getClearProps();
 
   const rootProps = getRootProps();
   const popoverProps = getPopoverProps();
@@ -423,7 +426,7 @@ export const Autocomplete = <
     const { value: valueInput } = event.target;
 
     if (valueInput === '') {
-      handleDeleteAllValues(event);
+      onClick(event);
     }
   };
 
diff --git a/packages/react-components/src/hooks/use_autocomplete.ts b/packages/react-components/src/hooks/use_autocomplete.ts
index 1dbc498f..a66b1d0b 100644
--- a/packages/react-components/src/hooks/use_autocomplete.ts
+++ b/packages/react-components/src/hooks/use_autocomplete.ts
@@ -34,8 +34,8 @@ export type AutocompleteGroupedOption<T> = {
 };
 
 export type UseAutocompleteProps<
-T,
-Multiple extends boolean | undefined = undefined,
+  T,
+  Multiple extends boolean | undefined = undefined,
 > = {
   /**
    * This prop is used to help implement the accessibility logic.
@@ -114,8 +114,8 @@ Multiple extends boolean | undefined = undefined,
 };
 
 export type UseAutocompleteReturnType<
-T,
-Multiple extends boolean | undefined = undefined,
+  T,
+  Multiple extends boolean | undefined = undefined,
 > = {
   groupedOptions: ReadonlyArray<T> | ReadonlyArray<AutocompleteGroupedOption<T>>;
   value: AutocompleteValue<T, Multiple>;
@@ -127,7 +127,10 @@ Multiple extends boolean | undefined = undefined,
   getInputLabelProps: () => React.HTMLAttributes<HTMLLabelElement>;
   getRootProps: () => React.HTMLAttributes<HTMLDivElement>;
   getInputProps: () => React.HTMLAttributes<HTMLInputElement>;
-  getClearProps: () => React.HTMLAttributes<HTMLDivElement>;
+  getClearProps: () => {
+    tabIndex: -1;
+    onClick: (event: React.SyntheticEvent) => void;
+  };
   getPopoverProps: () => Pick<Required<PopoverProps>, 'open' | 'anchorEl' | 'onClose' | 'onKeyDown'>;
   getTagProps: (option: T, index: number) => {
     key: number;
@@ -136,7 +139,6 @@ Multiple extends boolean | undefined = undefined,
     onDelete?: (event: React.SyntheticEvent) => void;
   };
   getOptionLabel: (option: T) => string;
-  handleDeleteAllValues: (event: React.SyntheticEvent,) => void;
 };
 /**
  *
@@ -160,8 +162,8 @@ const defaultFilterOptions: AutocompleteFilterOptionsType<any, false> = (
 };
 
 export function useAutocomplete<
-T,
-Multiple extends boolean | undefined = false,
+  T,
+  Multiple extends boolean | undefined = false,
 >(
   props: UseAutocompleteProps<T, Multiple>,
 ): UseAutocompleteReturnType<T, Multiple> {
@@ -473,12 +475,19 @@ Multiple extends boolean | undefined = false,
     }
   };
 
-  const handleClear = (event: React.MouseEvent<HTMLDivElement>) => {
+  const handleClear = (event: React.SyntheticEvent) => {
     setSearchValue('');
+    const newValue = (multiple ? [] : null) as AutocompleteValue<T, Multiple>;
 
     if (onInputChange) {
       onInputChange(event, '');
     }
+
+    setValue(newValue);
+
+    if (onChange) {
+      onChange(event, newValue, { option: null, index: 0 }, 'removeOption');
+    }
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -527,20 +536,6 @@ Multiple extends boolean | undefined = false,
     selectNewValue(event, option, index, 'removeOption');
   };
 
-  const handleDeleteAllValues = (event: React.SyntheticEvent) => {
-    let newValue: T | T[] = null;
-
-    if (multiple) {
-      newValue = [];
-    }
-
-    setValue(newValue as AutocompleteValue<T, Multiple>);
-
-    if (onChange) {
-      onChange(event, newValue as AutocompleteValue<T, Multiple>, { option: null, index: 0 }, 'removeOption');
-    }
-  };
-
   let groupedOptions = filteredOptions;
 
   if (groupBy) {
@@ -624,7 +619,6 @@ Multiple extends boolean | undefined = false,
       tabIndex: -1,
       onDelete: readOnly ? undefined : handleTagDelete(option, index),
     }),
-    handleDeleteAllValues,
     getOptionLabel,
     groupedOptions,
     popupOpen,

From 656648871b8ebb4c0e7faac505089c911c0e9370 Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Mon, 7 Oct 2024 12:33:25 +0300
Subject: [PATCH 10/21] chore(react-components): add disabled state

---
 .../src/Autocomplete/autocomplete.tsx         | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 66a14dcc..1c81909f 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -130,7 +130,6 @@ TypographyOwnProps & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' |
     appearance: 'none',
     userSelect: 'none',
     textAlign: 'left',
-    cursor: 'text',
     fontFamily: 'inherit',
     minHeight: 'var(--pv-size-base-8)',
     position: 'relative',
@@ -176,18 +175,19 @@ TypographyOwnProps & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' |
 
     return ({
       borderColor,
-      '&:hover': {
-        backgroundColor: 'var(--pv-color-gray-3)',
-        borderColor: borderColorHover,
-      },
-      '&:disabled': {
+      ...(props.disabled && {
         cursor: 'not-allowed',
         backgroundColor: 'var(--pv-color-gray-1)',
         borderColor: borderColorDisabled,
         color: colorDisabled,
-      },
-      '&:not(:disabled)': {
+      }),
+      ...(!props.disabled && {
         color,
+        cursor: 'text',
+        '&:hover': {
+          backgroundColor: 'var(--pv-color-gray-3)',
+          borderColor: borderColorHover,
+        },
         '&[aria-placeholder]': {
           color: colorPlaceholder,
         },
@@ -203,7 +203,7 @@ TypographyOwnProps & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' |
           backgroundColor: backgroundColorFocus,
           borderColor: borderColorFocus,
         },
-      },
+      }),
     });
   },
 );
@@ -500,6 +500,7 @@ export const Autocomplete = <
               size={size}
               limitTags={limitTags}
               tagsLength={value.length}
+              disabled={disabled}
             >
               {getOptionLabel(v)}
             </AutocompleteTag>

From c81782535b07da9ac13d573508c7c5391c8c06f1 Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Mon, 7 Oct 2024 17:19:08 +0300
Subject: [PATCH 11/21] chore(react-components): add disabled state

---
 .../src/Autocomplete/autocomplete.tsx         | 72 ++++++++++++++++---
 1 file changed, 63 insertions(+), 9 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 1c81909f..634057e9 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -11,7 +11,7 @@ import { Popper } from '../Popper';
 import { Typography, TypographyOwnProps } from '../Typography';
 import { Box } from '../Box';
 import { Chip } from '../Chip';
-import { ArrowDropDownIcon } from '../icons';
+import { ArrowDropDownIcon, CloseSmallIcon } from '../icons';
 import { MenuItem } from '../MenuList';
 
 /**
@@ -115,14 +115,15 @@ export type AutocompleteOwnProps<
  * Styles.
  */
 const AutocompleteField = styled(Box)<
-TypographyOwnProps & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' | 'disabled'>>
+TypographyOwnProps
+& Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' | 'disabled'>>
+& { isHasClearIcon: boolean }
 >(
   (props) => ({
     outline: 'none',
     boxSizing: 'border-box',
     width: '100%',
     borderRadius: '4px',
-    padding: '3px calc(var(--pv-size-base-2) + 24px) 3px var(--pv-size-base-2)',
     backgroundColor: 'var(--pv-color-gray-1)',
     borderStyle: 'solid',
     borderWidth: '1px',
@@ -131,12 +132,13 @@ TypographyOwnProps & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' |
     userSelect: 'none',
     textAlign: 'left',
     fontFamily: 'inherit',
-    minHeight: 'var(--pv-size-base-8)',
     position: 'relative',
     display: 'inline-flex',
     alignItems: 'center',
     flexWrap: 'wrap',
     gap: 'var(--pv-size-base)',
+    minHeight: 'var(--pv-size-base-8)',
+    padding: '3px calc(var(--pv-size-base-2) + 24px) 3px var(--pv-size-base-2)',
     ...(props.size === 'small' && {
       minHeight: 'var(--pv-size-base-6)',
       padding: '1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2)',
@@ -146,6 +148,29 @@ TypographyOwnProps & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' |
       padding: '2px calc(var(--pv-size-base-2) + 24px) 2px var(--pv-size-base-2)',
     }),
   }),
+  (props) => {
+    const actions = props.isHasClearIcon ? '48px' : '24px';
+
+    switch (props.size) {
+      case 'small':
+        return {
+          minHeight: 'var(--pv-size-base-6)',
+          padding: `1px calc(var(--pv-size-base-2) + ${actions}) 1px var(--pv-size-base-2)`,
+        };
+
+      case 'medium':
+        return {
+          minHeight: 'var(--pv-size-base-7)',
+          padding: `2px calc(var(--pv-size-base-2) + ${actions}) 2px var(--pv-size-base-2)`,
+        };
+
+      default:
+        return {
+          minHeight: 'var(--pv-size-base-8)',
+          padding: `3px calc(var(--pv-size-base-2) + ${actions}) 3px var(--pv-size-base-2)`,
+        };
+    }
+  },
   (props) => {
     const isDark = props.theme.mode === 'dark';
     const color = isDark
@@ -208,17 +233,35 @@ TypographyOwnProps & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' |
   },
 );
 
-const AutocompleteArrowIcon = styled(ArrowDropDownIcon)({
+const AutocompleteActions = styled('div')({
   position: 'absolute',
   right: '0px',
   top: 'calc(50% - 12px)',
+  display: 'flex',
+  alignItems: 'center',
   margin: '0px var(--pv-size-base)',
+});
+
+const AutocompleteRemoveIcon = styled(CloseSmallIcon)({
   color: 'var(--pv-color-gray-10)',
+  cursor: 'pointer',
   '&[aria-disabled="true"]': {
     color: 'inherit',
+    pointerEvents: 'none',
   },
 });
 
+const AutocompleteArrowIcon = styled(ArrowDropDownIcon)<{ open: boolean }>({
+  color: 'var(--pv-color-gray-10)',
+  '&[aria-disabled="true"]': {
+    color: 'inherit',
+  },
+}, (props) => ({
+  ...(props.open && {
+    transform: 'rotate(180deg)',
+  }),
+}));
+
 const AutocompleteNativeInput = styled('input')({
   bottom: 0,
   left: 0,
@@ -537,6 +580,7 @@ export const Autocomplete = <
       ref={ref}
       // @ts-ignore
       component="label"
+      isHasClearIcon={!isValueEmpty}
     >
       {multiple ? (
         <>
@@ -571,10 +615,20 @@ export const Autocomplete = <
           onKeyDown={handleKeyDown}
         />
       )}
-      <AutocompleteArrowIcon
-        aria-disabled={disabled}
-        aria-hidden
-      />
+      <AutocompleteActions>
+        {!isValueEmpty ? (
+          <AutocompleteRemoveIcon
+            aria-disabled={disabled}
+            // @ts-ignore
+            onClick={onClick}
+          />
+        ) : null}
+        <AutocompleteArrowIcon
+          aria-disabled={disabled}
+          aria-hidden
+          open={popoverProps.open}
+        />
+      </AutocompleteActions>
       <AutocompleteNativeInput
         type="text"
         value={isValueEmpty ? '' : JSON.stringify(valueRoot)}

From b71e62bab32fa41ac25c7d6cc69ee66a5ad5fc33 Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Mon, 7 Oct 2024 18:25:35 +0300
Subject: [PATCH 12/21] chore(react-components): fix focus trap

---
 .../src/Autocomplete/autocomplete.tsx         | 115 +++++++++---------
 1 file changed, 59 insertions(+), 56 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 634057e9..58d4eac8 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -13,6 +13,7 @@ import { Box } from '../Box';
 import { Chip } from '../Chip';
 import { ArrowDropDownIcon, CloseSmallIcon } from '../icons';
 import { MenuItem } from '../MenuList';
+import { FocusTrap } from '../FocusTrap';
 
 /**
  * Types.
@@ -572,19 +573,35 @@ export const Autocomplete = <
     ref,
     ...propsRoot
   }, valueRoot) => (
-    <AutocompleteField
-      aria-invalid={error || undefined}
-      aria-placeholder={isValueEmpty || undefined}
-      size={size}
-      disabled={disabled}
-      ref={ref}
-      // @ts-ignore
-      component="label"
-      isHasClearIcon={!isValueEmpty}
-    >
-      {multiple ? (
-        <>
-          {isValueEmpty ? null : renderedValue}
+    <FocusTrap open={popoverProps.open}>
+      <AutocompleteField
+        aria-invalid={error || undefined}
+        aria-placeholder={isValueEmpty || undefined}
+        size={size}
+        disabled={disabled}
+        ref={ref}
+        // @ts-ignore
+        component="label"
+        isHasClearIcon={!isValueEmpty}
+      >
+        {multiple ? (
+          <>
+            {isValueEmpty ? null : renderedValue}
+            <AutocompleteInputField
+              {...otherInputProps}
+              {...propsRoot}
+              noWrap
+              // @ts-ignore
+              component="input"
+              type="text"
+              variant={size === 'small' ? 'c1' : 'b3'}
+              placeholder={placeholder}
+              readOnly={readOnly}
+              onChange={onChange}
+              onKeyDown={handleKeyDown}
+            />
+          </>
+        ) : (
           <AutocompleteInputField
             {...otherInputProps}
             {...propsRoot}
@@ -592,57 +609,43 @@ export const Autocomplete = <
             // @ts-ignore
             component="input"
             type="text"
+            value={searchValue || renderedValue || ''}
             variant={size === 'small' ? 'c1' : 'b3'}
             placeholder={placeholder}
             readOnly={readOnly}
-            onChange={onChange}
+            onChange={handleChange}
             onKeyDown={handleKeyDown}
           />
-        </>
-      ) : (
-        <AutocompleteInputField
-          {...otherInputProps}
-          {...propsRoot}
-          noWrap
-          // @ts-ignore
-          component="input"
-          type="text"
-          value={searchValue || renderedValue || ''}
-          variant={size === 'small' ? 'c1' : 'b3'}
-          placeholder={placeholder}
-          readOnly={readOnly}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-        />
-      )}
-      <AutocompleteActions>
-        {!isValueEmpty ? (
-          <AutocompleteRemoveIcon
+        )}
+        <AutocompleteActions>
+          {!isValueEmpty ? (
+            <AutocompleteRemoveIcon
+              aria-disabled={disabled}
+              // @ts-ignore
+              onClick={onClick}
+            />
+          ) : null}
+          <AutocompleteArrowIcon
             aria-disabled={disabled}
-            // @ts-ignore
-            onClick={onClick}
+            aria-hidden
+            open={popoverProps.open}
           />
-        ) : null}
-        <AutocompleteArrowIcon
-          aria-disabled={disabled}
-          aria-hidden
-          open={popoverProps.open}
+        </AutocompleteActions>
+        <AutocompleteNativeInput
+          type="text"
+          value={isValueEmpty ? '' : JSON.stringify(valueRoot)}
+          tabIndex={-1}
+          aria-hidden="true"
+          disabled={disabled}
+          autoComplete="off"
+          id={id}
+          name={name}
+          required={required}
+          readOnly={readOnly}
+          onChange={() => { }}
         />
-      </AutocompleteActions>
-      <AutocompleteNativeInput
-        type="text"
-        value={isValueEmpty ? '' : JSON.stringify(valueRoot)}
-        tabIndex={-1}
-        aria-hidden="true"
-        disabled={disabled}
-        autoComplete="off"
-        id={id}
-        name={name}
-        required={required}
-        readOnly={readOnly}
-        onChange={() => { }}
-      />
-    </AutocompleteField>
+      </AutocompleteField>
+    </FocusTrap>
   );
 
   const renderOption = renderOptionProp || defaultRenderOption;

From 0bc7f3b9b412170d4fd2073ae0f11cf1f4d87083 Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Fri, 11 Oct 2024 12:40:18 +0300
Subject: [PATCH 13/21] chore(react-components): fix focus trap

---
 .../src/Autocomplete/autocomplete.tsx         | 125 ++++++++----------
 .../src/hooks/use_autocomplete.ts             |  31 +++--
 2 files changed, 76 insertions(+), 80 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 58d4eac8..22c073a4 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -13,7 +13,6 @@ import { Box } from '../Box';
 import { Chip } from '../Chip';
 import { ArrowDropDownIcon, CloseSmallIcon } from '../icons';
 import { MenuItem } from '../MenuList';
-import { FocusTrap } from '../FocusTrap';
 
 /**
  * Types.
@@ -464,16 +463,6 @@ export const Autocomplete = <
   const rootProps = getRootProps();
   const popoverProps = getPopoverProps();
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(event);
-
-    const { value: valueInput } = event.target;
-
-    if (valueInput === '') {
-      onClick(event);
-    }
-  };
-
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     // Wait until IME is settled.
     if (event.which !== 229) {
@@ -573,35 +562,19 @@ export const Autocomplete = <
     ref,
     ...propsRoot
   }, valueRoot) => (
-    <FocusTrap open={popoverProps.open}>
-      <AutocompleteField
-        aria-invalid={error || undefined}
-        aria-placeholder={isValueEmpty || undefined}
-        size={size}
-        disabled={disabled}
-        ref={ref}
-        // @ts-ignore
-        component="label"
-        isHasClearIcon={!isValueEmpty}
-      >
-        {multiple ? (
-          <>
-            {isValueEmpty ? null : renderedValue}
-            <AutocompleteInputField
-              {...otherInputProps}
-              {...propsRoot}
-              noWrap
-              // @ts-ignore
-              component="input"
-              type="text"
-              variant={size === 'small' ? 'c1' : 'b3'}
-              placeholder={placeholder}
-              readOnly={readOnly}
-              onChange={onChange}
-              onKeyDown={handleKeyDown}
-            />
-          </>
-        ) : (
+    <AutocompleteField
+      aria-invalid={error || undefined}
+      aria-placeholder={isValueEmpty || undefined}
+      size={size}
+      disabled={disabled}
+      ref={ref}
+      // @ts-ignore
+      component="label"
+      isHasClearIcon={!isValueEmpty}
+    >
+      {multiple ? (
+        <>
+          {isValueEmpty ? null : renderedValue}
           <AutocompleteInputField
             {...otherInputProps}
             {...propsRoot}
@@ -609,43 +582,57 @@ export const Autocomplete = <
             // @ts-ignore
             component="input"
             type="text"
-            value={searchValue || renderedValue || ''}
             variant={size === 'small' ? 'c1' : 'b3'}
             placeholder={placeholder}
             readOnly={readOnly}
-            onChange={handleChange}
+            onChange={onChange}
             onKeyDown={handleKeyDown}
           />
-        )}
-        <AutocompleteActions>
-          {!isValueEmpty ? (
-            <AutocompleteRemoveIcon
-              aria-disabled={disabled}
-              // @ts-ignore
-              onClick={onClick}
-            />
-          ) : null}
-          <AutocompleteArrowIcon
-            aria-disabled={disabled}
-            aria-hidden
-            open={popoverProps.open}
-          />
-        </AutocompleteActions>
-        <AutocompleteNativeInput
+        </>
+      ) : (
+        <AutocompleteInputField
+          {...otherInputProps}
+          {...propsRoot}
+          noWrap
+          // @ts-ignore
+          component="input"
           type="text"
-          value={isValueEmpty ? '' : JSON.stringify(valueRoot)}
-          tabIndex={-1}
-          aria-hidden="true"
-          disabled={disabled}
-          autoComplete="off"
-          id={id}
-          name={name}
-          required={required}
+          value={searchValue || renderedValue || ''}
+          variant={size === 'small' ? 'c1' : 'b3'}
+          placeholder={placeholder}
           readOnly={readOnly}
-          onChange={() => { }}
+          onChange={onChange}
+          onKeyDown={handleKeyDown}
         />
-      </AutocompleteField>
-    </FocusTrap>
+      )}
+      <AutocompleteActions>
+        {!isValueEmpty ? (
+          <AutocompleteRemoveIcon
+            aria-disabled={disabled}
+            // @ts-ignore
+            onClick={onClick}
+          />
+        ) : null}
+        <AutocompleteArrowIcon
+          aria-disabled={disabled}
+          aria-hidden
+          open={popoverProps.open}
+        />
+      </AutocompleteActions>
+      <AutocompleteNativeInput
+        type="text"
+        value={isValueEmpty ? '' : JSON.stringify(valueRoot)}
+        tabIndex={-1}
+        aria-hidden="true"
+        disabled={disabled}
+        autoComplete="off"
+        id={id}
+        name={name}
+        required={required}
+        readOnly={readOnly}
+        onChange={() => { }}
+      />
+    </AutocompleteField>
   );
 
   const renderOption = renderOptionProp || defaultRenderOption;
diff --git a/packages/react-components/src/hooks/use_autocomplete.ts b/packages/react-components/src/hooks/use_autocomplete.ts
index a66b1d0b..38aaf319 100644
--- a/packages/react-components/src/hooks/use_autocomplete.ts
+++ b/packages/react-components/src/hooks/use_autocomplete.ts
@@ -465,16 +465,6 @@ export function useAutocomplete<
     }
   };
 
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value: valueInput } = event.target;
-
-    setSearchValue(valueInput);
-
-    if (onInputChange) {
-      onInputChange(event, valueInput);
-    }
-  };
-
   const handleClear = (event: React.SyntheticEvent) => {
     setSearchValue('');
     const newValue = (multiple ? [] : null) as AutocompleteValue<T, Multiple>;
@@ -490,8 +480,27 @@ export function useAutocomplete<
     }
   };
 
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value: valueInput } = event.target;
+
+    if (searchValue !== valueInput) {
+      setSearchValue(valueInput);
+
+      if (onInputChange) {
+        onInputChange(event, valueInput);
+      }
+    }
+
+    if (valueInput === '') {
+      if (!multiple) {
+        handleClear(event);
+      }
+    } else {
+      handleOpen(event);
+    }
+  };
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    handleOpen(event);
     // Wait until IME is settled.
     if (event.which !== 229) {
       switch (event.key) {

From 5d4d8a6a865a06180b0debd0f0fb7bbfafd1ad39 Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Fri, 11 Oct 2024 12:49:36 +0300
Subject: [PATCH 14/21] chore(react-components): fix console error

---
 packages/react-components/src/Autocomplete/autocomplete.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 22c073a4..01386a29 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
 import {
   useAutocomplete,
   UseAutocompleteProps,
@@ -114,7 +115,7 @@ export type AutocompleteOwnProps<
 /**
  * Styles.
  */
-const AutocompleteField = styled(Box)<
+const AutocompleteField = styled(Box, { shouldForwardProp: isPropValid })<
 TypographyOwnProps
 & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' | 'disabled'>>
 & { isHasClearIcon: boolean }

From b51b456d3561336e30a7e6447c0e02c2e68e45b7 Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Thu, 17 Oct 2024 11:51:36 +0300
Subject: [PATCH 15/21] chore(react-components): add arrow up/down control

---
 packages/react-components/src/hooks/use_autocomplete.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react-components/src/hooks/use_autocomplete.ts b/packages/react-components/src/hooks/use_autocomplete.ts
index 38aaf319..e4d86861 100644
--- a/packages/react-components/src/hooks/use_autocomplete.ts
+++ b/packages/react-components/src/hooks/use_autocomplete.ts
@@ -509,6 +509,7 @@ export function useAutocomplete<
           event.preventDefault();
 
           changeHighlightedIndex(1, 'next', 'keyboard');
+          handleOpen(event);
           break;
 
         case 'ArrowUp':
@@ -516,6 +517,8 @@ export function useAutocomplete<
           event.preventDefault();
 
           changeHighlightedIndex(-1, 'previous', 'keyboard');
+          handleOpen(event);
+
           break;
 
         case 'Enter':

From 396e2e6b144c3dc05972f13b8ec9ce73eeed7d9e Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Thu, 17 Oct 2024 13:55:40 +0300
Subject: [PATCH 16/21] chore(react-components): fix jumping in medium size

---
 .../src/Autocomplete/autocomplete.tsx         | 20 ++++++-------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 01386a29..59ea056c 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
 import {
   useAutocomplete,
   UseAutocompleteProps,
@@ -112,15 +111,17 @@ export type AutocompleteOwnProps<
  *
  */
 
+const reactPropsRegex = /^(as|size|disabled|isHasClearIcon)$/;
+
 /**
  * Styles.
  */
-const AutocompleteField = styled(Box, { shouldForwardProp: isPropValid })<
+const AutocompleteField = styled(Box, { shouldForwardProp: (prop) => !reactPropsRegex.test(prop) })<
 TypographyOwnProps
 & Required<Pick<AutocompleteOwnProps<any, boolean>, 'size' | 'disabled'>>
 & { isHasClearIcon: boolean }
 >(
-  (props) => ({
+  {
     outline: 'none',
     boxSizing: 'border-box',
     width: '100%',
@@ -139,16 +140,7 @@ TypographyOwnProps
     flexWrap: 'wrap',
     gap: 'var(--pv-size-base)',
     minHeight: 'var(--pv-size-base-8)',
-    padding: '3px calc(var(--pv-size-base-2) + 24px) 3px var(--pv-size-base-2)',
-    ...(props.size === 'small' && {
-      minHeight: 'var(--pv-size-base-6)',
-      padding: '1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2)',
-    }),
-    ...(props.size === 'medium' && {
-      minHeight: 'var(--pv-size-base-7)',
-      padding: '2px calc(var(--pv-size-base-2) + 24px) 2px var(--pv-size-base-2)',
-    }),
-  }),
+  },
   (props) => {
     const actions = props.isHasClearIcon ? '48px' : '24px';
 
@@ -162,7 +154,7 @@ TypographyOwnProps
       case 'medium':
         return {
           minHeight: 'var(--pv-size-base-7)',
-          padding: `2px calc(var(--pv-size-base-2) + ${actions}) 2px var(--pv-size-base-2)`,
+          padding: `1px calc(var(--pv-size-base-2) + ${actions}) 1px var(--pv-size-base-2)`,
         };
 
       default:

From 51b9b634f9e61b4500b35869a26f5d3916132dce Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Thu, 17 Oct 2024 18:20:17 +0300
Subject: [PATCH 17/21] chore(react-components): add focus trap

---
 .../__snapshots__/autocomplete.test.tsx.snap  | 2082 +++++++++++++++++
 .../src/Autocomplete/autocomplete.tsx         |   97 +-
 2 files changed, 2133 insertions(+), 46 deletions(-)
 create mode 100644 packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap

diff --git a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
new file mode 100644
index 00000000..419fb32b
--- /dev/null
+++ b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
@@ -0,0 +1,2082 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Autocomplete /> should pass className 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  font-family: inherit;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: var(--pv-size-base);
+  min-height: var(--pv-size-base-8);
+  min-height: var(--pv-size-base-7);
+  padding: 1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2);
+  border-color: var(--pv-color-gray-8);
+  color: var(--pv-color-black);
+  cursor: text;
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-0:focus-within {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  min-width: 30px;
+  width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  background-color: transparent;
+  border-style: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  color: var(--pv-color-black);
+}
+
+.emotion-1::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:disabled {
+  cursor: not-allowed;
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-2 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0px var(--pv-size-base);
+}
+
+.emotion-3 {
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-3[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-4 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div
+    class="my-class-name"
+  >
+    <label
+      aria-placeholder="true"
+      class="emotion-0"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id-listbox"
+        aria-expanded="false"
+        autocapitalize="none"
+        autocomplete="off"
+        autocorrect="false"
+        class="emotion-1"
+        id="test-id-toggle-button"
+        role="combobox"
+        spellcheck="false"
+        type="text"
+        value=""
+      />
+      <div
+        class="emotion-2"
+      >
+        <svg
+          aria-disabled="false"
+          aria-hidden="true"
+          class="emotion-3"
+          fill="none"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-4"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
+      />
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Autocomplete /> should pass error 1`] = `
+.emotion-0 {
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  font-family: inherit;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: var(--pv-size-base);
+  min-height: var(--pv-size-base-8);
+  min-height: var(--pv-size-base-7);
+  padding: 1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2);
+  border-color: var(--pv-color-gray-8);
+  color: var(--pv-color-black);
+  cursor: text;
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-0:focus-within {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  min-width: 30px;
+  width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  background-color: transparent;
+  border-style: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  color: var(--pv-color-black);
+}
+
+.emotion-1::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:disabled {
+  cursor: not-allowed;
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-2 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0px var(--pv-size-base);
+}
+
+.emotion-3 {
+  color: var(--pv-color-gray-10);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.emotion-3[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-4 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.emotion-5 {
+  margin: 0;
+  color: var(--pv-color-wrong);
+  font-weight: var(--pv-text-c2-weight);
+  font-size: var(--pv-text-c2-size);
+  line-height: var(--pv-text-c2-height);
+  letter-spacing: var(--pv-text-c2-spacing);
+  margin-top: 2px;
+}
+
+.emotion-6 {
+  min-width: 240px;
+  outline: 0;
+  margin-top: 1px;
+  border-radius: 4px;
+  min-height: 16px;
+  max-height: calc(100% - 32px);
+  z-index: 1300;
+  background-color: var(--pv-color-white);
+  box-shadow: var(--pv-shadow-light-low);
+}
+
+.emotion-7 {
+  padding: var(--pv-size-base-3) var(--pv-size-base-2);
+}
+
+.emotion-8 {
+  margin: 0;
+  color: var(--pv-color-gray-10);
+  font-weight: var(--pv-text-b2-weight);
+  font-size: var(--pv-text-b2-size);
+  line-height: var(--pv-text-b2-height);
+  letter-spacing: var(--pv-text-b2-spacing);
+}
+
+<body>
+  <div>
+    <div>
+      <label
+        aria-invalid="true"
+        aria-placeholder="true"
+        class="emotion-0"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="test-id-listbox"
+          aria-expanded="true"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="false"
+          class="emotion-1"
+          id="test-id-toggle-button"
+          role="combobox"
+          spellcheck="false"
+          type="text"
+          value=""
+        />
+        <div
+          class="emotion-2"
+        >
+          <svg
+            aria-disabled="false"
+            aria-hidden="true"
+            class="emotion-3"
+            fill="none"
+            height="24px"
+            open=""
+            viewBox="0 0 24 24"
+            width="24px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <input
+          aria-hidden="true"
+          autocomplete="off"
+          class="emotion-4"
+          id="test-id"
+          tabindex="-1"
+          type="text"
+          value=""
+        />
+      </label>
+      <p
+        class="emotion-5"
+      >
+        Error text
+      </p>
+    </div>
+  </div>
+  <div
+    class="emotion-6"
+    role="tooltip"
+    style="position: absolute; left: 0px; top: 0px; width: 0px;"
+    tabindex="-1"
+  >
+    <div>
+      <div
+        class="emotion-7"
+      >
+        <p
+          class="emotion-8"
+        >
+          No options
+        </p>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Autocomplete /> should pass loading 1`] = `
+.emotion-0 {
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  font-family: inherit;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: var(--pv-size-base);
+  min-height: var(--pv-size-base-8);
+  min-height: var(--pv-size-base-7);
+  padding: 1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2);
+  border-color: var(--pv-color-gray-8);
+  color: var(--pv-color-black);
+  cursor: text;
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-0:focus-within {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  min-width: 30px;
+  width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  background-color: transparent;
+  border-style: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  color: var(--pv-color-black);
+}
+
+.emotion-1::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:disabled {
+  cursor: not-allowed;
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-2 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0px var(--pv-size-base);
+}
+
+.emotion-3 {
+  color: var(--pv-color-gray-10);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.emotion-3[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-4 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.emotion-5 {
+  min-width: 240px;
+  outline: 0;
+  margin-top: 1px;
+  border-radius: 4px;
+  min-height: 16px;
+  max-height: calc(100% - 32px);
+  z-index: 1300;
+  background-color: var(--pv-color-white);
+  box-shadow: var(--pv-shadow-light-low);
+}
+
+.emotion-6 {
+  padding: var(--pv-size-base-3) var(--pv-size-base-2);
+}
+
+.emotion-7 {
+  margin: 0;
+  color: var(--pv-color-gray-10);
+  font-weight: var(--pv-text-b2-weight);
+  font-size: var(--pv-text-b2-size);
+  line-height: var(--pv-text-b2-height);
+  letter-spacing: var(--pv-text-b2-spacing);
+}
+
+<body>
+  <div>
+    <div>
+      <label
+        aria-placeholder="true"
+        class="emotion-0"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="test-id-listbox"
+          aria-expanded="true"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="false"
+          class="emotion-1"
+          id="test-id-toggle-button"
+          role="combobox"
+          spellcheck="false"
+          type="text"
+          value=""
+        />
+        <div
+          class="emotion-2"
+        >
+          <svg
+            aria-disabled="false"
+            aria-hidden="true"
+            class="emotion-3"
+            fill="none"
+            height="24px"
+            open=""
+            viewBox="0 0 24 24"
+            width="24px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <input
+          aria-hidden="true"
+          autocomplete="off"
+          class="emotion-4"
+          id="test-id"
+          tabindex="-1"
+          type="text"
+          value=""
+        />
+      </label>
+    </div>
+  </div>
+  <div
+    class="emotion-5"
+    role="tooltip"
+    style="position: absolute; left: 0px; top: 0px; width: 0px;"
+    tabindex="-1"
+  >
+    <div>
+      <div
+        class="emotion-6"
+      >
+        <p
+          class="emotion-7"
+        >
+          Loading...
+        </p>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Autocomplete /> should pass options 1`] = `
+.emotion-0 {
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  font-family: inherit;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: var(--pv-size-base);
+  min-height: var(--pv-size-base-8);
+  min-height: var(--pv-size-base-7);
+  padding: 1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2);
+  border-color: var(--pv-color-gray-8);
+  color: var(--pv-color-black);
+  cursor: text;
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-0:focus-within {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  min-width: 30px;
+  width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  background-color: transparent;
+  border-style: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  color: var(--pv-color-black);
+}
+
+.emotion-1::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:disabled {
+  cursor: not-allowed;
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-2 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0px var(--pv-size-base);
+}
+
+.emotion-3 {
+  color: var(--pv-color-gray-10);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.emotion-3[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-4 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.emotion-5 {
+  min-width: 240px;
+  outline: 0;
+  margin-top: 1px;
+  border-radius: 4px;
+  min-height: 16px;
+  max-height: calc(100% - 32px);
+  z-index: 1300;
+  background-color: var(--pv-color-white);
+  box-shadow: var(--pv-shadow-light-low);
+}
+
+.emotion-6 {
+  max-height: 36vh;
+  overflow-y: auto;
+  margin: 0;
+  list-style-type: none;
+  position: relative;
+  padding: 10px 0;
+}
+
+.emotion-7 {
+  padding: 0px var(--pv-size-base-2);
+  font-family: inherit;
+  outline: none;
+  width: 100%;
+  height: var(--pv-size-base-7);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  text-align: left;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: background-color 200ms;
+  transition: background-color 200ms;
+  background-color: transparent;
+  border: none;
+  box-sizing: border-box;
+  gap: var(--pv-size-base-2);
+  cursor: pointer;
+  color: var(--pv-color-black);
+}
+
+.emotion-7:hover {
+  background-color: var(--pv-color-gray-3);
+}
+
+.emotion-7:focus-visible,
+.emotion-7[data-focused="true"] {
+  background-color: var(--pv-color-gray-4);
+}
+
+.emotion-7:active,
+.emotion-7[aria-selected="true"] {
+  background-color: var(--pv-color-gray-5);
+}
+
+.emotion-8 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  margin: 0;
+  color: inherit;
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+<body>
+  <div>
+    <div>
+      <label
+        aria-placeholder="true"
+        class="emotion-0"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="test-id-listbox"
+          aria-expanded="true"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="false"
+          class="emotion-1"
+          id="test-id-toggle-button"
+          role="combobox"
+          spellcheck="false"
+          type="text"
+          value=""
+        />
+        <div
+          class="emotion-2"
+        >
+          <svg
+            aria-disabled="false"
+            aria-hidden="true"
+            class="emotion-3"
+            fill="none"
+            height="24px"
+            open=""
+            viewBox="0 0 24 24"
+            width="24px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <input
+          aria-hidden="true"
+          autocomplete="off"
+          class="emotion-4"
+          id="test-id"
+          tabindex="-1"
+          type="text"
+          value=""
+        />
+      </label>
+    </div>
+  </div>
+  <div
+    class="emotion-5"
+    role="tooltip"
+    style="position: absolute; left: 0px; top: 0px; width: 0px;"
+    tabindex="-1"
+  >
+    <div>
+      <ul
+        class="emotion-6"
+        id="test-id-listbox"
+        role="listbox"
+        tabindex="-1"
+      >
+        <li
+          aria-selected="false"
+          class="emotion-7"
+          data-option-index="0"
+          id="test-id-option-0"
+          role="option"
+          tabindex="-1"
+        >
+          <span
+            class="emotion-8"
+          >
+            test-1
+          </span>
+        </li>
+        <li
+          aria-selected="false"
+          class="emotion-7"
+          data-option-index="1"
+          id="test-id-option-1"
+          role="option"
+          tabindex="-1"
+        >
+          <span
+            class="emotion-8"
+          >
+            test-2
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Autocomplete /> should render with default multiple styles 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  font-family: inherit;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: var(--pv-size-base);
+  min-height: var(--pv-size-base-8);
+  min-height: var(--pv-size-base-7);
+  padding: 1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2);
+  border-color: var(--pv-color-gray-8);
+  color: var(--pv-color-black);
+  cursor: text;
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-0:focus-within {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  min-width: 30px;
+  width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  background-color: transparent;
+  border-style: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  color: var(--pv-color-black);
+}
+
+.emotion-1::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:disabled {
+  cursor: not-allowed;
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-2 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0px var(--pv-size-base);
+}
+
+.emotion-3 {
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-3[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-4 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div>
+    <label
+      aria-placeholder="true"
+      class="emotion-0"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id-listbox"
+        aria-expanded="false"
+        autocapitalize="none"
+        autocomplete="off"
+        autocorrect="false"
+        class="emotion-1"
+        id="test-id-toggle-button"
+        role="combobox"
+        spellcheck="false"
+        type="text"
+        value=""
+      />
+      <div
+        class="emotion-2"
+      >
+        <svg
+          aria-disabled="false"
+          aria-hidden="true"
+          class="emotion-3"
+          fill="none"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-4"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
+      />
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Autocomplete /> should render with default styles 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  font-family: inherit;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: var(--pv-size-base);
+  min-height: var(--pv-size-base-8);
+  min-height: var(--pv-size-base-7);
+  padding: 1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2);
+  border-color: var(--pv-color-gray-8);
+  color: var(--pv-color-black);
+  cursor: text;
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-0:focus-within {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  min-width: 30px;
+  width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  background-color: transparent;
+  border-style: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  color: var(--pv-color-black);
+}
+
+.emotion-1::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:disabled {
+  cursor: not-allowed;
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-2 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0px var(--pv-size-base);
+}
+
+.emotion-3 {
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-3[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-4 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div>
+    <label
+      aria-placeholder="true"
+      class="emotion-0"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id-listbox"
+        aria-expanded="false"
+        autocapitalize="none"
+        autocomplete="off"
+        autocorrect="false"
+        class="emotion-1"
+        id="test-id-toggle-button"
+        role="combobox"
+        spellcheck="false"
+        type="text"
+        value=""
+      />
+      <div
+        class="emotion-2"
+      >
+        <svg
+          aria-disabled="false"
+          aria-hidden="true"
+          class="emotion-3"
+          fill="none"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-4"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
+      />
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Autocomplete /> sizes size "large" 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  font-family: inherit;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: var(--pv-size-base);
+  min-height: var(--pv-size-base-8);
+  min-height: var(--pv-size-base-8);
+  padding: 3px calc(var(--pv-size-base-2) + 24px) 3px var(--pv-size-base-2);
+  border-color: var(--pv-color-gray-8);
+  color: var(--pv-color-black);
+  cursor: text;
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-0:focus-within {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  min-width: 30px;
+  width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  background-color: transparent;
+  border-style: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  color: var(--pv-color-black);
+}
+
+.emotion-1::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:disabled {
+  cursor: not-allowed;
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-2 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0px var(--pv-size-base);
+}
+
+.emotion-3 {
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-3[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-4 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div>
+    <label
+      aria-placeholder="true"
+      class="emotion-0"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id-listbox"
+        aria-expanded="false"
+        autocapitalize="none"
+        autocomplete="off"
+        autocorrect="false"
+        class="emotion-1"
+        id="test-id-toggle-button"
+        role="combobox"
+        spellcheck="false"
+        type="text"
+        value=""
+      />
+      <div
+        class="emotion-2"
+      >
+        <svg
+          aria-disabled="false"
+          aria-hidden="true"
+          class="emotion-3"
+          fill="none"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-4"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
+      />
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Autocomplete /> sizes size "medium" 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  font-family: inherit;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: var(--pv-size-base);
+  min-height: var(--pv-size-base-8);
+  min-height: var(--pv-size-base-7);
+  padding: 1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2);
+  border-color: var(--pv-color-gray-8);
+  color: var(--pv-color-black);
+  cursor: text;
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-0:focus-within {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  min-width: 30px;
+  width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  background-color: transparent;
+  border-style: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  color: var(--pv-color-black);
+}
+
+.emotion-1::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:disabled {
+  cursor: not-allowed;
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-2 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0px var(--pv-size-base);
+}
+
+.emotion-3 {
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-3[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-4 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div>
+    <label
+      aria-placeholder="true"
+      class="emotion-0"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id-listbox"
+        aria-expanded="false"
+        autocapitalize="none"
+        autocomplete="off"
+        autocorrect="false"
+        class="emotion-1"
+        id="test-id-toggle-button"
+        role="combobox"
+        spellcheck="false"
+        type="text"
+        value=""
+      />
+      <div
+        class="emotion-2"
+      >
+        <svg
+          aria-disabled="false"
+          aria-hidden="true"
+          class="emotion-3"
+          fill="none"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-4"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
+      />
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Autocomplete /> sizes size "small" 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  outline: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  background-color: var(--pv-color-gray-1);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
+  transition: background-color 200ms,color 200ms,border-color 200ms;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: left;
+  font-family: inherit;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: var(--pv-size-base);
+  min-height: var(--pv-size-base-8);
+  min-height: var(--pv-size-base-6);
+  padding: 1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2);
+  border-color: var(--pv-color-gray-8);
+  color: var(--pv-color-black);
+  cursor: text;
+}
+
+.emotion-0:hover {
+  background-color: var(--pv-color-gray-3);
+  border-color: var(--pv-color-gray-7);
+}
+
+.emotion-0[aria-placeholder] {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-0[aria-invalid] {
+  background-color: var(--pv-color-wrong-tint-5);
+  border-color: var(--pv-color-wrong-tint-3);
+}
+
+.emotion-0:focus-visible {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-0:focus-within {
+  background-color: var(--pv-color-secondary-tint-5);
+  border-color: var(--pv-color-secondary-tint-3);
+}
+
+.emotion-1 {
+  margin: 0;
+  color: var(--pv-color-black);
+  font-weight: var(--pv-text-c1-weight);
+  font-size: var(--pv-text-c1-size);
+  line-height: var(--pv-text-c1-height);
+  letter-spacing: var(--pv-text-c1-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+  min-width: 30px;
+  width: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  background-color: transparent;
+  border-style: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  color: var(--pv-color-black);
+}
+
+.emotion-1::-webkit-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::-moz-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:-ms-input-placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1::placeholder {
+  color: var(--pv-color-gray-9);
+}
+
+.emotion-1:disabled {
+  cursor: not-allowed;
+  color: var(--pv-color-gray-7);
+}
+
+.emotion-2 {
+  position: absolute;
+  right: 0px;
+  top: calc(50% - 12px);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0px var(--pv-size-base);
+}
+
+.emotion-3 {
+  color: var(--pv-color-gray-10);
+}
+
+.emotion-3[aria-disabled="true"] {
+  color: inherit;
+}
+
+.emotion-4 {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div>
+    <label
+      aria-placeholder="true"
+      class="emotion-0"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="test-id-listbox"
+        aria-expanded="false"
+        autocapitalize="none"
+        autocomplete="off"
+        autocorrect="false"
+        class="emotion-1"
+        id="test-id-toggle-button"
+        role="combobox"
+        spellcheck="false"
+        type="text"
+        value=""
+      />
+      <div
+        class="emotion-2"
+      >
+        <svg
+          aria-disabled="false"
+          aria-hidden="true"
+          class="emotion-3"
+          fill="none"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <input
+        aria-hidden="true"
+        autocomplete="off"
+        class="emotion-4"
+        id="test-id"
+        tabindex="-1"
+        type="text"
+        value=""
+      />
+    </label>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 59ea056c..778860f5 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -13,6 +13,7 @@ import { Box } from '../Box';
 import { Chip } from '../Chip';
 import { ArrowDropDownIcon, CloseSmallIcon } from '../icons';
 import { MenuItem } from '../MenuList';
+import { FocusTrap } from '../FocusTrap';
 
 /**
  * Types.
@@ -673,53 +674,57 @@ export const Autocomplete = <
         {...popoverProps}
         tabIndex={-1}
       >
-        <div ref={popoverRef}>
-          {loading && groupedOptions.length === 0 && (
-            <AutocompleteDropdownStateItem>
-              {typeof loadingText === 'string' ? (
-                <Typography
-                  variant="b2"
-                  color="gray-10"
-                >
-                  {loadingText}
-                </Typography>
-              ) : loadingText}
-            </AutocompleteDropdownStateItem>
-          )}
-          {groupedOptions.length === 0 && !loading && (
-            <AutocompleteDropdownStateItem>
-              {typeof noOptionsText === 'string' ? (
-                <Typography
-                  variant="b2"
-                  color="gray-10"
-                >
-                  {noOptionsText}
-                </Typography>
-              ) : noOptionsText}
-            </AutocompleteDropdownStateItem>
-          )}
-          {groupedOptions.length > 0 && (
-            <AutocompleteDropdownList {...getListboxProps()}>
-              {groupedOptions
-                // @ts-ignore
-                .map((option, index) => {
+        <FocusTrap
+          open={popoverProps.open}
+        >
+          <div ref={popoverRef}>
+            {loading && groupedOptions.length === 0 && (
+              <AutocompleteDropdownStateItem>
+                {typeof loadingText === 'string' ? (
+                  <Typography
+                    variant="b2"
+                    color="gray-10"
+                  >
+                    {loadingText}
+                  </Typography>
+                ) : loadingText}
+              </AutocompleteDropdownStateItem>
+            )}
+            {groupedOptions.length === 0 && !loading && (
+              <AutocompleteDropdownStateItem>
+                {typeof noOptionsText === 'string' ? (
+                  <Typography
+                    variant="b2"
+                    color="gray-10"
+                  >
+                    {noOptionsText}
+                  </Typography>
+                ) : noOptionsText}
+              </AutocompleteDropdownStateItem>
+            )}
+            {groupedOptions.length > 0 && (
+              <AutocompleteDropdownList {...getListboxProps()}>
+                {groupedOptions
                   // @ts-ignore
-                  if (groupBy && 'options' in option) {
-                    return renderGroup({
-                      key: option.key,
-                      group: option.group,
-                      // @ts-ignore
-                      children: option.options.map((option2, index2) => (
-                        renderListOption(option2, option.index + index2)
-                      )),
-                    });
-                  }
-
-                  return renderListOption(option as T, index);
-                })}
-            </AutocompleteDropdownList>
-          )}
-        </div>
+                  .map((option, index) => {
+                    // @ts-ignore
+                    if (groupBy && 'options' in option) {
+                      return renderGroup({
+                        key: option.key,
+                        group: option.group,
+                        // @ts-ignore
+                        children: option.options.map((option2, index2) => (
+                          renderListOption(option2, option.index + index2)
+                        )),
+                      });
+                    }
+
+                    return renderListOption(option as T, index);
+                  })}
+              </AutocompleteDropdownList>
+            )}
+          </div>
+        </FocusTrap>
       </AutocompletePopover>
     </div>
   );

From d0724599a2e154f888be24616601b4c85c568de4 Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Mon, 21 Oct 2024 11:47:55 +0300
Subject: [PATCH 18/21] chore(react-components): add simple unit test

---
 .../__snapshots__/autocomplete.test.tsx.snap  | 1086 +----------------
 .../src/Autocomplete/autocomplete.test.tsx    |  138 ++-
 .../src/Autocomplete/autocomplete.tsx         |  105 +-
 3 files changed, 186 insertions(+), 1143 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
index 419fb32b..c152e120 100644
--- a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
+++ b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
@@ -1,1072 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Autocomplete /> should pass className 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  outline: none;
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 4px;
-  background-color: var(--pv-color-gray-1);
-  border-style: solid;
-  border-width: 1px;
-  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
-  transition: background-color 200ms,color 200ms,border-color 200ms;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  text-align: left;
-  font-family: inherit;
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: var(--pv-size-base);
-  min-height: var(--pv-size-base-8);
-  min-height: var(--pv-size-base-7);
-  padding: 1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2);
-  border-color: var(--pv-color-gray-8);
-  color: var(--pv-color-black);
-  cursor: text;
-}
-
-.emotion-0:hover {
-  background-color: var(--pv-color-gray-3);
-  border-color: var(--pv-color-gray-7);
-}
-
-.emotion-0[aria-placeholder] {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0[aria-invalid] {
-  background-color: var(--pv-color-wrong-tint-5);
-  border-color: var(--pv-color-wrong-tint-3);
-}
-
-.emotion-0:focus-visible {
-  background-color: var(--pv-color-secondary-tint-5);
-  border-color: var(--pv-color-secondary-tint-3);
-}
-
-.emotion-0:focus-within {
-  background-color: var(--pv-color-secondary-tint-5);
-  border-color: var(--pv-color-secondary-tint-3);
-}
-
-.emotion-1 {
-  margin: 0;
-  color: var(--pv-color-black);
-  font-weight: var(--pv-text-b3-weight);
-  font-size: var(--pv-text-b3-size);
-  line-height: var(--pv-text-b3-height);
-  letter-spacing: var(--pv-text-b3-spacing);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-family: inherit;
-  outline: none;
-  box-sizing: border-box;
-  min-width: 30px;
-  width: 0;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  background-color: transparent;
-  border-style: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  color: var(--pv-color-black);
-}
-
-.emotion-1::-webkit-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1::-moz-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1:-ms-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1::placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1:disabled {
-  cursor: not-allowed;
-  color: var(--pv-color-gray-7);
-}
-
-.emotion-2 {
-  position: absolute;
-  right: 0px;
-  top: calc(50% - 12px);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0px var(--pv-size-base);
-}
-
-.emotion-3 {
-  color: var(--pv-color-gray-10);
-}
-
-.emotion-3[aria-disabled="true"] {
-  color: inherit;
-}
-
-.emotion-4 {
-  bottom: 0;
-  left: 0;
-  height: 100%;
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-<div
-    class="my-class-name"
-  >
-    <label
-      aria-placeholder="true"
-      class="emotion-0"
-    >
-      <input
-        aria-autocomplete="list"
-        aria-controls="test-id-listbox"
-        aria-expanded="false"
-        autocapitalize="none"
-        autocomplete="off"
-        autocorrect="false"
-        class="emotion-1"
-        id="test-id-toggle-button"
-        role="combobox"
-        spellcheck="false"
-        type="text"
-        value=""
-      />
-      <div
-        class="emotion-2"
-      >
-        <svg
-          aria-disabled="false"
-          aria-hidden="true"
-          class="emotion-3"
-          fill="none"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      <input
-        aria-hidden="true"
-        autocomplete="off"
-        class="emotion-4"
-        id="test-id"
-        tabindex="-1"
-        type="text"
-        value=""
-      />
-    </label>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`<Autocomplete /> should pass error 1`] = `
-.emotion-0 {
-  outline: none;
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 4px;
-  background-color: var(--pv-color-gray-1);
-  border-style: solid;
-  border-width: 1px;
-  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
-  transition: background-color 200ms,color 200ms,border-color 200ms;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  text-align: left;
-  font-family: inherit;
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: var(--pv-size-base);
-  min-height: var(--pv-size-base-8);
-  min-height: var(--pv-size-base-7);
-  padding: 1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2);
-  border-color: var(--pv-color-gray-8);
-  color: var(--pv-color-black);
-  cursor: text;
-}
-
-.emotion-0:hover {
-  background-color: var(--pv-color-gray-3);
-  border-color: var(--pv-color-gray-7);
-}
-
-.emotion-0[aria-placeholder] {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0[aria-invalid] {
-  background-color: var(--pv-color-wrong-tint-5);
-  border-color: var(--pv-color-wrong-tint-3);
-}
-
-.emotion-0:focus-visible {
-  background-color: var(--pv-color-secondary-tint-5);
-  border-color: var(--pv-color-secondary-tint-3);
-}
-
-.emotion-0:focus-within {
-  background-color: var(--pv-color-secondary-tint-5);
-  border-color: var(--pv-color-secondary-tint-3);
-}
-
-.emotion-1 {
-  margin: 0;
-  color: var(--pv-color-black);
-  font-weight: var(--pv-text-b3-weight);
-  font-size: var(--pv-text-b3-size);
-  line-height: var(--pv-text-b3-height);
-  letter-spacing: var(--pv-text-b3-spacing);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-family: inherit;
-  outline: none;
-  box-sizing: border-box;
-  min-width: 30px;
-  width: 0;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  background-color: transparent;
-  border-style: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  color: var(--pv-color-black);
-}
-
-.emotion-1::-webkit-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1::-moz-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1:-ms-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1::placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1:disabled {
-  cursor: not-allowed;
-  color: var(--pv-color-gray-7);
-}
-
-.emotion-2 {
-  position: absolute;
-  right: 0px;
-  top: calc(50% - 12px);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0px var(--pv-size-base);
-}
-
-.emotion-3 {
-  color: var(--pv-color-gray-10);
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-
-.emotion-3[aria-disabled="true"] {
-  color: inherit;
-}
-
-.emotion-4 {
-  bottom: 0;
-  left: 0;
-  height: 100%;
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.emotion-5 {
-  margin: 0;
-  color: var(--pv-color-wrong);
-  font-weight: var(--pv-text-c2-weight);
-  font-size: var(--pv-text-c2-size);
-  line-height: var(--pv-text-c2-height);
-  letter-spacing: var(--pv-text-c2-spacing);
-  margin-top: 2px;
-}
-
-.emotion-6 {
-  min-width: 240px;
-  outline: 0;
-  margin-top: 1px;
-  border-radius: 4px;
-  min-height: 16px;
-  max-height: calc(100% - 32px);
-  z-index: 1300;
-  background-color: var(--pv-color-white);
-  box-shadow: var(--pv-shadow-light-low);
-}
-
-.emotion-7 {
-  padding: var(--pv-size-base-3) var(--pv-size-base-2);
-}
-
-.emotion-8 {
-  margin: 0;
-  color: var(--pv-color-gray-10);
-  font-weight: var(--pv-text-b2-weight);
-  font-size: var(--pv-text-b2-size);
-  line-height: var(--pv-text-b2-height);
-  letter-spacing: var(--pv-text-b2-spacing);
-}
-
-<body>
-  <div>
-    <div>
-      <label
-        aria-invalid="true"
-        aria-placeholder="true"
-        class="emotion-0"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="test-id-listbox"
-          aria-expanded="true"
-          autocapitalize="none"
-          autocomplete="off"
-          autocorrect="false"
-          class="emotion-1"
-          id="test-id-toggle-button"
-          role="combobox"
-          spellcheck="false"
-          type="text"
-          value=""
-        />
-        <div
-          class="emotion-2"
-        >
-          <svg
-            aria-disabled="false"
-            aria-hidden="true"
-            class="emotion-3"
-            fill="none"
-            height="24px"
-            open=""
-            viewBox="0 0 24 24"
-            width="24px"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
-        <input
-          aria-hidden="true"
-          autocomplete="off"
-          class="emotion-4"
-          id="test-id"
-          tabindex="-1"
-          type="text"
-          value=""
-        />
-      </label>
-      <p
-        class="emotion-5"
-      >
-        Error text
-      </p>
-    </div>
-  </div>
-  <div
-    class="emotion-6"
-    role="tooltip"
-    style="position: absolute; left: 0px; top: 0px; width: 0px;"
-    tabindex="-1"
-  >
-    <div>
-      <div
-        class="emotion-7"
-      >
-        <p
-          class="emotion-8"
-        >
-          No options
-        </p>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<Autocomplete /> should pass loading 1`] = `
-.emotion-0 {
-  outline: none;
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 4px;
-  background-color: var(--pv-color-gray-1);
-  border-style: solid;
-  border-width: 1px;
-  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
-  transition: background-color 200ms,color 200ms,border-color 200ms;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  text-align: left;
-  font-family: inherit;
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: var(--pv-size-base);
-  min-height: var(--pv-size-base-8);
-  min-height: var(--pv-size-base-7);
-  padding: 1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2);
-  border-color: var(--pv-color-gray-8);
-  color: var(--pv-color-black);
-  cursor: text;
-}
-
-.emotion-0:hover {
-  background-color: var(--pv-color-gray-3);
-  border-color: var(--pv-color-gray-7);
-}
-
-.emotion-0[aria-placeholder] {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0[aria-invalid] {
-  background-color: var(--pv-color-wrong-tint-5);
-  border-color: var(--pv-color-wrong-tint-3);
-}
-
-.emotion-0:focus-visible {
-  background-color: var(--pv-color-secondary-tint-5);
-  border-color: var(--pv-color-secondary-tint-3);
-}
-
-.emotion-0:focus-within {
-  background-color: var(--pv-color-secondary-tint-5);
-  border-color: var(--pv-color-secondary-tint-3);
-}
-
-.emotion-1 {
-  margin: 0;
-  color: var(--pv-color-black);
-  font-weight: var(--pv-text-b3-weight);
-  font-size: var(--pv-text-b3-size);
-  line-height: var(--pv-text-b3-height);
-  letter-spacing: var(--pv-text-b3-spacing);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-family: inherit;
-  outline: none;
-  box-sizing: border-box;
-  min-width: 30px;
-  width: 0;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  background-color: transparent;
-  border-style: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  color: var(--pv-color-black);
-}
-
-.emotion-1::-webkit-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1::-moz-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1:-ms-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1::placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1:disabled {
-  cursor: not-allowed;
-  color: var(--pv-color-gray-7);
-}
-
-.emotion-2 {
-  position: absolute;
-  right: 0px;
-  top: calc(50% - 12px);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0px var(--pv-size-base);
-}
-
-.emotion-3 {
-  color: var(--pv-color-gray-10);
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-
-.emotion-3[aria-disabled="true"] {
-  color: inherit;
-}
-
-.emotion-4 {
-  bottom: 0;
-  left: 0;
-  height: 100%;
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.emotion-5 {
-  min-width: 240px;
-  outline: 0;
-  margin-top: 1px;
-  border-radius: 4px;
-  min-height: 16px;
-  max-height: calc(100% - 32px);
-  z-index: 1300;
-  background-color: var(--pv-color-white);
-  box-shadow: var(--pv-shadow-light-low);
-}
-
-.emotion-6 {
-  padding: var(--pv-size-base-3) var(--pv-size-base-2);
-}
-
-.emotion-7 {
-  margin: 0;
-  color: var(--pv-color-gray-10);
-  font-weight: var(--pv-text-b2-weight);
-  font-size: var(--pv-text-b2-size);
-  line-height: var(--pv-text-b2-height);
-  letter-spacing: var(--pv-text-b2-spacing);
-}
-
-<body>
-  <div>
-    <div>
-      <label
-        aria-placeholder="true"
-        class="emotion-0"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="test-id-listbox"
-          aria-expanded="true"
-          autocapitalize="none"
-          autocomplete="off"
-          autocorrect="false"
-          class="emotion-1"
-          id="test-id-toggle-button"
-          role="combobox"
-          spellcheck="false"
-          type="text"
-          value=""
-        />
-        <div
-          class="emotion-2"
-        >
-          <svg
-            aria-disabled="false"
-            aria-hidden="true"
-            class="emotion-3"
-            fill="none"
-            height="24px"
-            open=""
-            viewBox="0 0 24 24"
-            width="24px"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
-        <input
-          aria-hidden="true"
-          autocomplete="off"
-          class="emotion-4"
-          id="test-id"
-          tabindex="-1"
-          type="text"
-          value=""
-        />
-      </label>
-    </div>
-  </div>
-  <div
-    class="emotion-5"
-    role="tooltip"
-    style="position: absolute; left: 0px; top: 0px; width: 0px;"
-    tabindex="-1"
-  >
-    <div>
-      <div
-        class="emotion-6"
-      >
-        <p
-          class="emotion-7"
-        >
-          Loading...
-        </p>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<Autocomplete /> should pass options 1`] = `
-.emotion-0 {
-  outline: none;
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 4px;
-  background-color: var(--pv-color-gray-1);
-  border-style: solid;
-  border-width: 1px;
-  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
-  transition: background-color 200ms,color 200ms,border-color 200ms;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  text-align: left;
-  font-family: inherit;
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  gap: var(--pv-size-base);
-  min-height: var(--pv-size-base-8);
-  min-height: var(--pv-size-base-7);
-  padding: 1px calc(var(--pv-size-base-2) + 24px) 1px var(--pv-size-base-2);
-  border-color: var(--pv-color-gray-8);
-  color: var(--pv-color-black);
-  cursor: text;
-}
-
-.emotion-0:hover {
-  background-color: var(--pv-color-gray-3);
-  border-color: var(--pv-color-gray-7);
-}
-
-.emotion-0[aria-placeholder] {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0[aria-invalid] {
-  background-color: var(--pv-color-wrong-tint-5);
-  border-color: var(--pv-color-wrong-tint-3);
-}
-
-.emotion-0:focus-visible {
-  background-color: var(--pv-color-secondary-tint-5);
-  border-color: var(--pv-color-secondary-tint-3);
-}
-
-.emotion-0:focus-within {
-  background-color: var(--pv-color-secondary-tint-5);
-  border-color: var(--pv-color-secondary-tint-3);
-}
-
-.emotion-1 {
-  margin: 0;
-  color: var(--pv-color-black);
-  font-weight: var(--pv-text-b3-weight);
-  font-size: var(--pv-text-b3-size);
-  line-height: var(--pv-text-b3-height);
-  letter-spacing: var(--pv-text-b3-spacing);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-family: inherit;
-  outline: none;
-  box-sizing: border-box;
-  min-width: 30px;
-  width: 0;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  background-color: transparent;
-  border-style: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  color: var(--pv-color-black);
-}
-
-.emotion-1::-webkit-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1::-moz-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1:-ms-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1::placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-1:disabled {
-  cursor: not-allowed;
-  color: var(--pv-color-gray-7);
-}
-
-.emotion-2 {
-  position: absolute;
-  right: 0px;
-  top: calc(50% - 12px);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0px var(--pv-size-base);
-}
-
-.emotion-3 {
-  color: var(--pv-color-gray-10);
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-
-.emotion-3[aria-disabled="true"] {
-  color: inherit;
-}
-
-.emotion-4 {
-  bottom: 0;
-  left: 0;
-  height: 100%;
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.emotion-5 {
-  min-width: 240px;
-  outline: 0;
-  margin-top: 1px;
-  border-radius: 4px;
-  min-height: 16px;
-  max-height: calc(100% - 32px);
-  z-index: 1300;
-  background-color: var(--pv-color-white);
-  box-shadow: var(--pv-shadow-light-low);
-}
-
-.emotion-6 {
-  max-height: 36vh;
-  overflow-y: auto;
-  margin: 0;
-  list-style-type: none;
-  position: relative;
-  padding: 10px 0;
-}
-
-.emotion-7 {
-  padding: 0px var(--pv-size-base-2);
-  font-family: inherit;
-  outline: none;
-  width: 100%;
-  height: var(--pv-size-base-7);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  text-align: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: background-color 200ms;
-  transition: background-color 200ms;
-  background-color: transparent;
-  border: none;
-  box-sizing: border-box;
-  gap: var(--pv-size-base-2);
-  cursor: pointer;
-  color: var(--pv-color-black);
-}
-
-.emotion-7:hover {
-  background-color: var(--pv-color-gray-3);
-}
-
-.emotion-7:focus-visible,
-.emotion-7[data-focused="true"] {
-  background-color: var(--pv-color-gray-4);
-}
-
-.emotion-7:active,
-.emotion-7[aria-selected="true"] {
-  background-color: var(--pv-color-gray-5);
-}
-
-.emotion-8 {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  margin: 0;
-  color: inherit;
-  font-weight: var(--pv-text-b3-weight);
-  font-size: var(--pv-text-b3-size);
-  line-height: var(--pv-text-b3-height);
-  letter-spacing: var(--pv-text-b3-spacing);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-<body>
-  <div>
-    <div>
-      <label
-        aria-placeholder="true"
-        class="emotion-0"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="test-id-listbox"
-          aria-expanded="true"
-          autocapitalize="none"
-          autocomplete="off"
-          autocorrect="false"
-          class="emotion-1"
-          id="test-id-toggle-button"
-          role="combobox"
-          spellcheck="false"
-          type="text"
-          value=""
-        />
-        <div
-          class="emotion-2"
-        >
-          <svg
-            aria-disabled="false"
-            aria-hidden="true"
-            class="emotion-3"
-            fill="none"
-            height="24px"
-            open=""
-            viewBox="0 0 24 24"
-            width="24px"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12.39 14.512a.5.5 0 01-.78 0l-2.96-3.7A.5.5 0 019.04 10h5.92a.5.5 0 01.39.812l-2.96 3.7z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
-        <input
-          aria-hidden="true"
-          autocomplete="off"
-          class="emotion-4"
-          id="test-id"
-          tabindex="-1"
-          type="text"
-          value=""
-        />
-      </label>
-    </div>
-  </div>
-  <div
-    class="emotion-5"
-    role="tooltip"
-    style="position: absolute; left: 0px; top: 0px; width: 0px;"
-    tabindex="-1"
-  >
-    <div>
-      <ul
-        class="emotion-6"
-        id="test-id-listbox"
-        role="listbox"
-        tabindex="-1"
-      >
-        <li
-          aria-selected="false"
-          class="emotion-7"
-          data-option-index="0"
-          id="test-id-option-0"
-          role="option"
-          tabindex="-1"
-        >
-          <span
-            class="emotion-8"
-          >
-            test-1
-          </span>
-        </li>
-        <li
-          aria-selected="false"
-          class="emotion-7"
-          data-option-index="1"
-          id="test-id-option-1"
-          role="option"
-          tabindex="-1"
-        >
-          <span
-            class="emotion-8"
-          >
-            test-2
-          </span>
-        </li>
-      </ul>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<Autocomplete /> should render with default multiple styles 1`] = `
+exports[`<Autocomplete /> should render with default styles 1`] = `
 <DocumentFragment>
   .emotion-0 {
   outline: none;
@@ -1245,6 +179,8 @@ exports[`<Autocomplete /> should render with default multiple styles 1`] = `
           class="emotion-3"
           fill="none"
           height="24px"
+          role="button"
+          title="open"
           viewBox="0 0 24 24"
           width="24px"
           xmlns="http://www.w3.org/2000/svg"
@@ -1269,7 +205,7 @@ exports[`<Autocomplete /> should render with default multiple styles 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Autocomplete /> should render with default styles 1`] = `
+exports[`<Autocomplete /> should render with multiple selection enabled 1`] = `
 <DocumentFragment>
   .emotion-0 {
   outline: none;
@@ -1448,6 +384,8 @@ exports[`<Autocomplete /> should render with default styles 1`] = `
           class="emotion-3"
           fill="none"
           height="24px"
+          role="button"
+          title="open"
           viewBox="0 0 24 24"
           width="24px"
           xmlns="http://www.w3.org/2000/svg"
@@ -1472,7 +410,7 @@ exports[`<Autocomplete /> should render with default styles 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Autocomplete /> sizes size "large" 1`] = `
+exports[`<Autocomplete /> sizes renders with size "large" 1`] = `
 <DocumentFragment>
   .emotion-0 {
   outline: none;
@@ -1651,6 +589,8 @@ exports[`<Autocomplete /> sizes size "large" 1`] = `
           class="emotion-3"
           fill="none"
           height="24px"
+          role="button"
+          title="open"
           viewBox="0 0 24 24"
           width="24px"
           xmlns="http://www.w3.org/2000/svg"
@@ -1675,7 +615,7 @@ exports[`<Autocomplete /> sizes size "large" 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Autocomplete /> sizes size "medium" 1`] = `
+exports[`<Autocomplete /> sizes renders with size "medium" 1`] = `
 <DocumentFragment>
   .emotion-0 {
   outline: none;
@@ -1854,6 +794,8 @@ exports[`<Autocomplete /> sizes size "medium" 1`] = `
           class="emotion-3"
           fill="none"
           height="24px"
+          role="button"
+          title="open"
           viewBox="0 0 24 24"
           width="24px"
           xmlns="http://www.w3.org/2000/svg"
@@ -1878,7 +820,7 @@ exports[`<Autocomplete /> sizes size "medium" 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<Autocomplete /> sizes size "small" 1`] = `
+exports[`<Autocomplete /> sizes renders with size "small" 1`] = `
 <DocumentFragment>
   .emotion-0 {
   outline: none;
@@ -2057,6 +999,8 @@ exports[`<Autocomplete /> sizes size "small" 1`] = `
           class="emotion-3"
           fill="none"
           height="24px"
+          role="button"
+          title="open"
           viewBox="0 0 24 24"
           width="24px"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/react-components/src/Autocomplete/autocomplete.test.tsx b/packages/react-components/src/Autocomplete/autocomplete.test.tsx
index 70a5f7a3..3f64812a 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.test.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.test.tsx
@@ -1,9 +1,15 @@
 import React from 'react';
-import { renderWithWrapper as render, screen, fireEvent } from '../test-utils';
+import {
+  renderWithWrapper as render,
+  screen,
+  fireEvent,
+  act,
+  waitFor,
+} from '../test-utils';
 import { Autocomplete } from './index';
 
 describe('<Autocomplete />', () => {
-  const options = ['test-1', 'test-2'];
+  const options = ['test-1', 'test-2', 'apple', 'banana', 'grape'];
 
   it('should render with default styles', () => {
     const { asFragment } = render(
@@ -16,7 +22,7 @@ describe('<Autocomplete />', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render with default multiple styles', () => {
+  it('should render with multiple selection enabled', () => {
     const { asFragment } = render(
       <Autocomplete
         options={options}
@@ -28,8 +34,8 @@ describe('<Autocomplete />', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should pass className', () => {
-    const { asFragment } = render(
+  it('should apply className', () => {
+    const { container } = render(
       <Autocomplete
         options={options}
         id="test-id"
@@ -37,7 +43,7 @@ describe('<Autocomplete />', () => {
       />,
     );
 
-    expect(asFragment()).toMatchSnapshot();
+    expect(container.querySelector('.my-class-name')).toBeTruthy();
   });
 
   describe('sizes', () => {
@@ -48,7 +54,7 @@ describe('<Autocomplete />', () => {
     ];
 
     sizes.forEach((size) => {
-      it(`size "${size}"`, () => {
+      it(`renders with size "${size}"`, () => {
         const { asFragment } = render(
           <Autocomplete
             options={options}
@@ -62,8 +68,8 @@ describe('<Autocomplete />', () => {
     });
   });
 
-  it('should pass loading', () => {
-    const { baseElement } = render(
+  it('should display loading state', async () => {
+    const { getByText } = render(
       <Autocomplete
         options={[]}
         id="test-id"
@@ -72,36 +78,128 @@ describe('<Autocomplete />', () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole('combobox'));
-
-    expect(baseElement).toMatchSnapshot();
+    await act(async () => {
+      fireEvent.click(screen.getByRole('combobox'));
+    });
+    expect(getByText('Loading...')).toBeInTheDocument();
   });
 
-  it('should pass error', () => {
-    const { baseElement } = render(
+  it('should show error message when in error state', () => {
+    const { getByText } = render(
       <Autocomplete
         options={[]}
         id="test-id"
         error
-        errorText="Error text"
+        errorText="Error occurred"
+      />,
+    );
+
+    expect(getByText('Error occurred')).toBeInTheDocument();
+  });
+
+  it('should open the dropdown when clicked', async () => {
+    render(
+      <Autocomplete
+        id="test-id"
+        options={options}
+      />,
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('combobox'));
+    });
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('should handle user typing and show filtered options', async () => {
+    render(
+      <Autocomplete
+        id="test-id"
+        options={['apple', 'banana', 'grape']}
+      />,
+    );
+
+    const input = screen.getByRole('combobox');
+
+    await act(async () => {
+      fireEvent.change(input, { target: { value: 'ap' } });
+    });
+
+    expect(screen.getByText('apple')).toBeInTheDocument();
+    expect(screen.queryByText('banana')).not.toBeInTheDocument();
+  });
+
+  it('should select option and display it', () => {
+    render(
+      <Autocomplete
+        id="test-id"
+        options={['option-1', 'option-2']}
       />,
     );
 
     fireEvent.click(screen.getByRole('combobox'));
+    fireEvent.click(screen.getByText('option-1'));
 
-    expect(baseElement).toMatchSnapshot();
+    expect(screen.getByDisplayValue('option-1')).toBeInTheDocument();
   });
 
-  it('should pass options', () => {
-    const { baseElement } = render(
+  it('should allow clearing selected option', async () => {
+    render(
       <Autocomplete
         id="test-id"
-        options={options}
+        options={['clearable-option']}
       />,
     );
 
     fireEvent.click(screen.getByRole('combobox'));
+    fireEvent.click(screen.getByText('clearable-option'));
+
+    expect(screen.getByDisplayValue('clearable-option')).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('combobox'));
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: /clear/i }));
+    expect(screen.queryByDisplayValue('clearable-option')).not.toBeInTheDocument();
+  });
+
+  it('should allow creating new options', async () => {
+    const handleCreate = jest.fn();
+
+    render(
+      <Autocomplete
+        id="test-id"
+        options={[]}
+        allowCreateOption
+        onCreate={handleCreate}
+      />,
+    );
+
+    await act(async () => {
+      fireEvent.change(screen.getByRole('combobox'), { target: { value: 'New Option' } });
+    });
+
+    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter', code: 'Enter' });
+    expect(handleCreate).toHaveBeenCalledWith(expect.any(Object), 'New Option');
+  });
+
+  it('should close the dropdown on Escape key press', async () => {
+    render(
+      <Autocomplete
+        id="test-id"
+        options={options}
+      />,
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('combobox'));
+    });
+
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Escape', code: 'Escape' });
 
-    expect(baseElement).toMatchSnapshot();
+    await waitFor(() => expect(screen.queryByRole('listbox')).not.toBeInTheDocument());
   });
 });
diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 778860f5..5f2d5662 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -13,7 +13,7 @@ import { Box } from '../Box';
 import { Chip } from '../Chip';
 import { ArrowDropDownIcon, CloseSmallIcon } from '../icons';
 import { MenuItem } from '../MenuList';
-import { FocusTrap } from '../FocusTrap';
+// import { FocusTrap } from '../FocusTrap';
 
 /**
  * Types.
@@ -306,7 +306,6 @@ const AutocompletePopover = styled(Popper)(
   {
     minWidth: 240,
     outline: 0,
-    marginTop: '1px',
     borderRadius: '4px',
     minHeight: '16px',
     maxHeight: 'calc(100% - 32px)',
@@ -581,6 +580,7 @@ export const Autocomplete = <
             readOnly={readOnly}
             onChange={onChange}
             onKeyDown={handleKeyDown}
+            onBlur={popoverProps.onClose}
           />
         </>
       ) : (
@@ -597,17 +597,22 @@ export const Autocomplete = <
           readOnly={readOnly}
           onChange={onChange}
           onKeyDown={handleKeyDown}
+          onBlur={popoverProps.onClose}
         />
       )}
       <AutocompleteActions>
         {!isValueEmpty ? (
           <AutocompleteRemoveIcon
+            role="button"
+            title="clear"
             aria-disabled={disabled}
             // @ts-ignore
             onClick={onClick}
           />
         ) : null}
         <AutocompleteArrowIcon
+          role="button"
+          title="open"
           aria-disabled={disabled}
           aria-hidden
           open={popoverProps.open}
@@ -674,57 +679,53 @@ export const Autocomplete = <
         {...popoverProps}
         tabIndex={-1}
       >
-        <FocusTrap
-          open={popoverProps.open}
-        >
-          <div ref={popoverRef}>
-            {loading && groupedOptions.length === 0 && (
-              <AutocompleteDropdownStateItem>
-                {typeof loadingText === 'string' ? (
-                  <Typography
-                    variant="b2"
-                    color="gray-10"
-                  >
-                    {loadingText}
-                  </Typography>
-                ) : loadingText}
-              </AutocompleteDropdownStateItem>
-            )}
-            {groupedOptions.length === 0 && !loading && (
-              <AutocompleteDropdownStateItem>
-                {typeof noOptionsText === 'string' ? (
-                  <Typography
-                    variant="b2"
-                    color="gray-10"
-                  >
-                    {noOptionsText}
-                  </Typography>
-                ) : noOptionsText}
-              </AutocompleteDropdownStateItem>
-            )}
-            {groupedOptions.length > 0 && (
-              <AutocompleteDropdownList {...getListboxProps()}>
-                {groupedOptions
+        <div ref={popoverRef}>
+          {loading && groupedOptions.length === 0 && (
+            <AutocompleteDropdownStateItem>
+              {typeof loadingText === 'string' ? (
+                <Typography
+                  variant="b2"
+                  color="gray-10"
+                >
+                  {loadingText}
+                </Typography>
+              ) : loadingText}
+            </AutocompleteDropdownStateItem>
+          )}
+          {groupedOptions.length === 0 && !loading && (
+            <AutocompleteDropdownStateItem>
+              {typeof noOptionsText === 'string' ? (
+                <Typography
+                  variant="b2"
+                  color="gray-10"
+                >
+                  {noOptionsText}
+                </Typography>
+              ) : noOptionsText}
+            </AutocompleteDropdownStateItem>
+          )}
+          {groupedOptions.length > 0 && (
+            <AutocompleteDropdownList {...getListboxProps()}>
+              {groupedOptions
+                // @ts-ignore
+                .map((option, index) => {
                   // @ts-ignore
-                  .map((option, index) => {
-                    // @ts-ignore
-                    if (groupBy && 'options' in option) {
-                      return renderGroup({
-                        key: option.key,
-                        group: option.group,
-                        // @ts-ignore
-                        children: option.options.map((option2, index2) => (
-                          renderListOption(option2, option.index + index2)
-                        )),
-                      });
-                    }
-
-                    return renderListOption(option as T, index);
-                  })}
-              </AutocompleteDropdownList>
-            )}
-          </div>
-        </FocusTrap>
+                  if (groupBy && 'options' in option) {
+                    return renderGroup({
+                      key: option.key,
+                      group: option.group,
+                      // @ts-ignore
+                      children: option.options.map((option2, index2) => (
+                        renderListOption(option2, option.index + index2)
+                      )),
+                    });
+                  }
+
+                  return renderListOption(option as T, index);
+                })}
+            </AutocompleteDropdownList>
+          )}
+        </div>
       </AutocompletePopover>
     </div>
   );

From 6c71cffcd724d81673271090780dabaad65f9272 Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Mon, 21 Oct 2024 14:42:50 +0300
Subject: [PATCH 19/21] chore(react-components): update test

---
 .../src/Autocomplete/autocomplete.test.tsx    | 108 ++++++++++++++++++
 .../src/Autocomplete/autocomplete.tsx         |   9 +-
 .../src/hooks/use_autocomplete.ts             |   2 +
 3 files changed, 116 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.test.tsx b/packages/react-components/src/Autocomplete/autocomplete.test.tsx
index 3f64812a..a8f671ad 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.test.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.test.tsx
@@ -202,4 +202,112 @@ describe('<Autocomplete />', () => {
 
     await waitFor(() => expect(screen.queryByRole('listbox')).not.toBeInTheDocument());
   });
+
+  describe('multiple false', () => {
+    it('should select only one option', () => {
+      render(
+        <Autocomplete
+          id="test-id"
+          options={['option-1', 'option-2', 'option-3']}
+          multiple={false}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('combobox'));
+      fireEvent.click(screen.getByText('option-1'));
+
+      expect(screen.getByDisplayValue('option-1')).toBeInTheDocument();
+
+      fireEvent.click(screen.getByRole('combobox'));
+      fireEvent.click(screen.getByText('option-2'));
+
+      expect(screen.getByDisplayValue('option-2')).toBeInTheDocument();
+      expect(screen.queryByDisplayValue('option-1')).not.toBeInTheDocument();
+    });
+
+    it('should clear the selected option', async () => {
+      render(
+        <Autocomplete
+          id="test-id"
+          options={['option-1']}
+          multiple={false}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('combobox'));
+      fireEvent.click(screen.getByText('option-1'));
+
+      expect(screen.getByDisplayValue('option-1')).toBeInTheDocument();
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: /clear/i }));
+      });
+
+      expect(screen.queryByDisplayValue('option-1')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('multiple true', () => {
+    it('should allow selecting multiple options', async () => {
+      render(
+        <Autocomplete
+          id="test-id"
+          options={['option-1', 'option-2', 'option-3']}
+          multiple
+        />,
+      );
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole('combobox'));
+      });
+      fireEvent.click(screen.getByText('option-1'));
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole('combobox'));
+      });
+      fireEvent.click(screen.getByText('option-2'));
+
+      expect(screen.getByText('option-1')).toBeInTheDocument();
+      expect(screen.getByText('option-2')).toBeInTheDocument();
+    });
+
+    it('should display limitTags when multiple options are selected', () => {
+      render(
+        <Autocomplete
+          id="test-id"
+          options={['option-1', 'option-2', 'option-3']}
+          value={['option-1', 'option-2', 'option-3']}
+          limitTags={2}
+          multiple
+        />,
+      );
+
+      expect(screen.getByText('option-1')).toBeInTheDocument();
+      expect(screen.getByText('option-2')).toBeInTheDocument();
+      expect(screen.getByText('1 more')).toBeInTheDocument();
+    });
+
+    it('should allow clearing selected options', async () => {
+      render(
+        <Autocomplete
+          id="test-id"
+          options={['option-1', 'option-2']}
+          multiple
+          disableCloseOnSelect
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('combobox'));
+      fireEvent.click(screen.getByText('option-1'));
+      fireEvent.click(screen.getByText('option-2'));
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole('combobox'));
+      });
+
+      fireEvent.click(screen.getByRole('button', { name: /clear/i }));
+      expect(screen.queryByText('option-1')).not.toBeInTheDocument();
+      expect(screen.queryByText('option-2')).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 5f2d5662..2496b940 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -13,7 +13,6 @@ import { Box } from '../Box';
 import { Chip } from '../Chip';
 import { ArrowDropDownIcon, CloseSmallIcon } from '../icons';
 import { MenuItem } from '../MenuList';
-// import { FocusTrap } from '../FocusTrap';
 
 /**
  * Types.
@@ -460,6 +459,12 @@ export const Autocomplete = <
     // Wait until IME is settled.
     if (event.which !== 229) {
       switch (event.key) {
+        case 'Tab': {
+          if (popoverProps.open) {
+            popoverProps.onClose(event);
+          }
+          break;
+        }
         case 'Escape':
           // Prevent cursor move
           event.preventDefault();
@@ -580,7 +585,6 @@ export const Autocomplete = <
             readOnly={readOnly}
             onChange={onChange}
             onKeyDown={handleKeyDown}
-            onBlur={popoverProps.onClose}
           />
         </>
       ) : (
@@ -597,7 +601,6 @@ export const Autocomplete = <
           readOnly={readOnly}
           onChange={onChange}
           onKeyDown={handleKeyDown}
-          onBlur={popoverProps.onClose}
         />
       )}
       <AutocompleteActions>
diff --git a/packages/react-components/src/hooks/use_autocomplete.ts b/packages/react-components/src/hooks/use_autocomplete.ts
index e4d86861..14b06734 100644
--- a/packages/react-components/src/hooks/use_autocomplete.ts
+++ b/packages/react-components/src/hooks/use_autocomplete.ts
@@ -466,6 +466,8 @@ export function useAutocomplete<
   };
 
   const handleClear = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+
     setSearchValue('');
     const newValue = (multiple ? [] : null) as AutocompleteValue<T, Multiple>;
 

From a246c07d64ed2e497feadbf1dd098899f5e9dfab Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Mon, 21 Oct 2024 17:01:55 +0300
Subject: [PATCH 20/21] chore(react-components): fix clear in read only mode

---
 packages/react-components/src/Autocomplete/autocomplete.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index 2496b940..c7263021 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -568,7 +568,7 @@ export const Autocomplete = <
       ref={ref}
       // @ts-ignore
       component="label"
-      isHasClearIcon={!isValueEmpty}
+      isHasClearIcon={!isValueEmpty && !readOnly}
     >
       {multiple ? (
         <>
@@ -604,7 +604,7 @@ export const Autocomplete = <
         />
       )}
       <AutocompleteActions>
-        {!isValueEmpty ? (
+        {!isValueEmpty && !readOnly ? (
           <AutocompleteRemoveIcon
             role="button"
             title="clear"

From 92bd20999aed791fbe1a3cad3ca55884ac063e1a Mon Sep 17 00:00:00 2001
From: mariktar <100trk@gmail.com>
Date: Thu, 24 Oct 2024 12:55:43 +0300
Subject: [PATCH 21/21] chore(react-components): remove max-width in tags

---
 .../react-components/src/Autocomplete/autocomplete.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index c7263021..f18a7eee 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -329,19 +329,11 @@ const AutocompletePopover = styled(Popper)(
 );
 
 const AutocompleteTag = styled(Chip)<{
-  tagsLength: number,
-  limitTags: number,
   size: AutocompleteOwnProps<any>['size'],
 }>((props) => ({
   label: 'Autocomplete-tag',
   borderRadius: '3px',
   margin: 0,
-  ...(props.tagsLength === 1 && {
-    maxWidth: 'calc(100% - var(--pv-size-base))',
-  }),
-  ...(props.tagsLength > 1 && props.limitTags > 0 && {
-    maxWidth: `calc(${100 / props.limitTags}% - var(--pv-size-base))`,
-  }),
   ...(props.size === 'small' && {
     height: 'var(--pv-size-base-5)',
   }),
@@ -529,8 +521,6 @@ export const Autocomplete = <
               color="secondary"
               variant="contained"
               size={size}
-              limitTags={limitTags}
-              tagsLength={value.length}
               disabled={disabled}
             >
               {getOptionLabel(v)}