From 1ff3d5f76f8180ac4594f53b73723dab6d4882a1 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 13 Mar 2024 15:44:40 +0100
Subject: [PATCH] [Autocomplete] Convert to support CSS extraction (#40330)

---
 .../material-ui/react-autocomplete/page.tsx   | 191 +++++++++++++++++
 .../pages/material-ui/react-autocomplete.tsx  | 192 ++++++++++++++++++
 .../src/Autocomplete/Autocomplete.js          |  70 ++++---
 3 files changed, 430 insertions(+), 23 deletions(-)
 create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-autocomplete/page.tsx
 create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-autocomplete.tsx

diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-autocomplete/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-autocomplete/page.tsx
new file mode 100644
index 00000000000000..76d790513f7567
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-autocomplete/page.tsx
@@ -0,0 +1,191 @@
+'use client';
+import * as React from 'react';
+import Asynchronous from '../../../../../../docs/data/material/components/autocomplete/Asynchronous';
+import AutocompleteHint from '../../../../../../docs/data/material/components/autocomplete/AutocompleteHint';
+import CheckboxesTags from '../../../../../../docs/data/material/components/autocomplete/CheckboxesTags';
+import ComboBox from '../../../../../../docs/data/material/components/autocomplete/ComboBox';
+import ControllableStates from '../../../../../../docs/data/material/components/autocomplete/ControllableStates';
+import CountrySelect from '../../../../../../docs/data/material/components/autocomplete/CountrySelect';
+import CustomInputAutocomplete from '../../../../../../docs/data/material/components/autocomplete/CustomInputAutocomplete';
+import CustomizedHook from '../../../../../../docs/data/material/components/autocomplete/CustomizedHook';
+import DisabledOptions from '../../../../../../docs/data/material/components/autocomplete/DisabledOptions';
+import Filter from '../../../../../../docs/data/material/components/autocomplete/Filter';
+import FixedTags from '../../../../../../docs/data/material/components/autocomplete/FixedTags';
+import FreeSolo from '../../../../../../docs/data/material/components/autocomplete/FreeSolo';
+import FreeSoloCreateOption from '../../../../../../docs/data/material/components/autocomplete/FreeSoloCreateOption';
+import FreeSoloCreateOptionDialog from '../../../../../../docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog';
+import GitHubLabel from '../../../../../../docs/data/material/components/autocomplete/GitHubLabel';
+import GloballyCustomizedOptions from '../../../../../../docs/data/material/components/autocomplete/GloballyCustomizedOptions';
+import GoogleMaps from '../../../../../../docs/data/material/components/autocomplete/GoogleMaps';
+import Grouped from '../../../../../../docs/data/material/components/autocomplete/Grouped';
+import Highlights from '../../../../../../docs/data/material/components/autocomplete/Highlights';
+import LimitTags from '../../../../../../docs/data/material/components/autocomplete/LimitTags';
+import Playground from '../../../../../../docs/data/material/components/autocomplete/Playground';
+import RenderGroup from '../../../../../../docs/data/material/components/autocomplete/RenderGroup';
+import Sizes from '../../../../../../docs/data/material/components/autocomplete/Sizes';
+import Tags from '../../../../../../docs/data/material/components/autocomplete/Tags';
+import UseAutocomplete from '../../../../../../docs/data/material/components/autocomplete/UseAutocomplete';
+import Virtualize from '../../../../../../docs/data/material/components/autocomplete/Virtualize';
+
+export default function Autocomplete() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Asynchronous</h2>
+        <div className="demo-container">
+          <Asynchronous />
+        </div>
+      </section>
+      <section>
+        <h2> Autocomplete Hint</h2>
+        <div className="demo-container">
+          <AutocompleteHint />
+        </div>
+      </section>
+      <section>
+        <h2> Checkboxes Tags</h2>
+        <div className="demo-container">
+          <CheckboxesTags />
+        </div>
+      </section>
+      <section>
+        <h2> Combo Box</h2>
+        <div className="demo-container">
+          <ComboBox />
+        </div>
+      </section>
+      <section>
+        <h2> Controllable States</h2>
+        <div className="demo-container">
+          <ControllableStates />
+        </div>
+      </section>
+      <section>
+        <h2> Country Select</h2>
+        <div className="demo-container">
+          <CountrySelect />
+        </div>
+      </section>
+      <section>
+        <h2> Custom Input Autocomplete</h2>
+        <div className="demo-container">
+          <CustomInputAutocomplete />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Hook</h2>
+        <div className="demo-container">
+          <CustomizedHook />
+        </div>
+      </section>
+      <section>
+        <h2> Disabled Options</h2>
+        <div className="demo-container">
+          <DisabledOptions />
+        </div>
+      </section>
+      <section>
+        <h2> Filter</h2>
+        <div className="demo-container">
+          <Filter />
+        </div>
+      </section>
+      <section>
+        <h2> Fixed Tags</h2>
+        <div className="demo-container">
+          <FixedTags />
+        </div>
+      </section>
+      <section>
+        <h2> Free Solo</h2>
+        <div className="demo-container">
+          <FreeSolo />
+        </div>
+      </section>
+      <section>
+        <h2> Free Solo Create Option</h2>
+        <div className="demo-container">
+          <FreeSoloCreateOption />
+        </div>
+      </section>
+      <section>
+        <h2> Free Solo Create Option Dialog</h2>
+        <div className="demo-container">
+          <FreeSoloCreateOptionDialog />
+        </div>
+      </section>
+      <section>
+        <h2> Git Hub Label</h2>
+        <div className="demo-container">
+          <GitHubLabel />
+        </div>
+      </section>
+      <section>
+        <h2> Globally Customized Options</h2>
+        <div className="demo-container">
+          <GloballyCustomizedOptions />
+        </div>
+      </section>
+      <section>
+        <h2> Google Maps</h2>
+        <div className="demo-container">
+          <GoogleMaps />
+        </div>
+      </section>
+      <section>
+        <h2> Grouped</h2>
+        <div className="demo-container">
+          <Grouped />
+        </div>
+      </section>
+      <section>
+        <h2> Highlights</h2>
+        <div className="demo-container">
+          <Highlights />
+        </div>
+      </section>
+      <section>
+        <h2> Limit Tags</h2>
+        <div className="demo-container">
+          <LimitTags />
+        </div>
+      </section>
+      <section>
+        <h2> Playground</h2>
+        <div className="demo-container">
+          <Playground />
+        </div>
+      </section>
+      <section>
+        <h2> Render Group</h2>
+        <div className="demo-container">
+          <RenderGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Sizes</h2>
+        <div className="demo-container">
+          <Sizes />
+        </div>
+      </section>
+      <section>
+        <h2> Tags</h2>
+        <div className="demo-container">
+          <Tags />
+        </div>
+      </section>
+      <section>
+        <h2> Use Autocomplete</h2>
+        <div className="demo-container">
+          <UseAutocomplete />
+        </div>
+      </section>
+      <section>
+        <h2> Virtualize</h2>
+        <div className="demo-container">
+          <Virtualize />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-autocomplete.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-autocomplete.tsx
new file mode 100644
index 00000000000000..677a0062ea8633
--- /dev/null
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-autocomplete.tsx
@@ -0,0 +1,192 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import Asynchronous from '../../../../../docs/data/material/components/autocomplete/Asynchronous.tsx';
+import AutocompleteHint from '../../../../../docs/data/material/components/autocomplete/AutocompleteHint.tsx';
+import CheckboxesTags from '../../../../../docs/data/material/components/autocomplete/CheckboxesTags.tsx';
+import ComboBox from '../../../../../docs/data/material/components/autocomplete/ComboBox.tsx';
+import ControllableStates from '../../../../../docs/data/material/components/autocomplete/ControllableStates.tsx';
+import CountrySelect from '../../../../../docs/data/material/components/autocomplete/CountrySelect.tsx';
+import CustomInputAutocomplete from '../../../../../docs/data/material/components/autocomplete/CustomInputAutocomplete.tsx';
+import CustomizedHook from '../../../../../docs/data/material/components/autocomplete/CustomizedHook.tsx';
+import DisabledOptions from '../../../../../docs/data/material/components/autocomplete/DisabledOptions.tsx';
+import Filter from '../../../../../docs/data/material/components/autocomplete/Filter.tsx';
+import FixedTags from '../../../../../docs/data/material/components/autocomplete/FixedTags.tsx';
+import FreeSolo from '../../../../../docs/data/material/components/autocomplete/FreeSolo.tsx';
+import FreeSoloCreateOption from '../../../../../docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx';
+import FreeSoloCreateOptionDialog from '../../../../../docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx';
+import GitHubLabel from '../../../../../docs/data/material/components/autocomplete/GitHubLabel.tsx';
+import GloballyCustomizedOptions from '../../../../../docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx';
+import GoogleMaps from '../../../../../docs/data/material/components/autocomplete/GoogleMaps.tsx';
+import Grouped from '../../../../../docs/data/material/components/autocomplete/Grouped.tsx';
+import Highlights from '../../../../../docs/data/material/components/autocomplete/Highlights.tsx';
+import LimitTags from '../../../../../docs/data/material/components/autocomplete/LimitTags.tsx';
+import Playground from '../../../../../docs/data/material/components/autocomplete/Playground.tsx';
+import RenderGroup from '../../../../../docs/data/material/components/autocomplete/RenderGroup.tsx';
+import Sizes from '../../../../../docs/data/material/components/autocomplete/Sizes.tsx';
+import Tags from '../../../../../docs/data/material/components/autocomplete/Tags.tsx';
+import UseAutocomplete from '../../../../../docs/data/material/components/autocomplete/UseAutocomplete.tsx';
+import Virtualize from '../../../../../docs/data/material/components/autocomplete/Virtualize.tsx';
+
+export default function Autocomplete() {
+  return (
+    <MaterialUILayout>
+      <h1>Autocomplete</h1>
+      <section>
+        <h2> Asynchronous</h2>
+        <div className="demo-container">
+          <Asynchronous />
+        </div>
+      </section>
+      <section>
+        <h2> Autocomplete Hint</h2>
+        <div className="demo-container">
+          <AutocompleteHint />
+        </div>
+      </section>
+      <section>
+        <h2> Checkboxes Tags</h2>
+        <div className="demo-container">
+          <CheckboxesTags />
+        </div>
+      </section>
+      <section>
+        <h2> Combo Box</h2>
+        <div className="demo-container">
+          <ComboBox />
+        </div>
+      </section>
+      <section>
+        <h2> Controllable States</h2>
+        <div className="demo-container">
+          <ControllableStates />
+        </div>
+      </section>
+      <section>
+        <h2> Country Select</h2>
+        <div className="demo-container">
+          <CountrySelect />
+        </div>
+      </section>
+      <section>
+        <h2> Custom Input Autocomplete</h2>
+        <div className="demo-container">
+          <CustomInputAutocomplete />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Hook</h2>
+        <div className="demo-container">
+          <CustomizedHook />
+        </div>
+      </section>
+      <section>
+        <h2> Disabled Options</h2>
+        <div className="demo-container">
+          <DisabledOptions />
+        </div>
+      </section>
+      <section>
+        <h2> Filter</h2>
+        <div className="demo-container">
+          <Filter />
+        </div>
+      </section>
+      <section>
+        <h2> Fixed Tags</h2>
+        <div className="demo-container">
+          <FixedTags />
+        </div>
+      </section>
+      <section>
+        <h2> Free Solo</h2>
+        <div className="demo-container">
+          <FreeSolo />
+        </div>
+      </section>
+      <section>
+        <h2> Free Solo Create Option</h2>
+        <div className="demo-container">
+          <FreeSoloCreateOption />
+        </div>
+      </section>
+      <section>
+        <h2> Free Solo Create Option Dialog</h2>
+        <div className="demo-container">
+          <FreeSoloCreateOptionDialog />
+        </div>
+      </section>
+      <section>
+        <h2> Git Hub Label</h2>
+        <div className="demo-container">
+          <GitHubLabel />
+        </div>
+      </section>
+      <section>
+        <h2> Globally Customized Options</h2>
+        <div className="demo-container">
+          <GloballyCustomizedOptions />
+        </div>
+      </section>
+      <section>
+        <h2> Google Maps</h2>
+        <div className="demo-container">
+          <GoogleMaps />
+        </div>
+      </section>
+      <section>
+        <h2> Grouped</h2>
+        <div className="demo-container">
+          <Grouped />
+        </div>
+      </section>
+      <section>
+        <h2> Highlights</h2>
+        <div className="demo-container">
+          <Highlights />
+        </div>
+      </section>
+      <section>
+        <h2> Limit Tags</h2>
+        <div className="demo-container">
+          <LimitTags />
+        </div>
+      </section>
+      <section>
+        <h2> Playground</h2>
+        <div className="demo-container">
+          <Playground />
+        </div>
+      </section>
+      <section>
+        <h2> Render Group</h2>
+        <div className="demo-container">
+          <RenderGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Sizes</h2>
+        <div className="demo-container">
+          <Sizes />
+        </div>
+      </section>
+      <section>
+        <h2> Tags</h2>
+        <div className="demo-container">
+          <Tags />
+        </div>
+      </section>
+      <section>
+        <h2> Use Autocomplete</h2>
+        <div className="demo-container">
+          <UseAutocomplete />
+        </div>
+      </section>
+      <section>
+        <h2> Virtualize</h2>
+        <div className="demo-container">
+          <Virtualize />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index 3672e8f334d4d6..4fe8c4346f3533 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -18,12 +18,13 @@ import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses';
 import filledInputClasses from '../FilledInput/filledInputClasses';
 import ClearIcon from '../internal/svg-icons/Close';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
 import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
 
+const useThemeProps = createUseThemeProps('MuiAutocomplete');
+
 const useUtilityClasses = (ownerState) => {
   const {
     classes,
@@ -85,7 +86,7 @@ const AutocompleteRoot = styled('div', {
       hasClearIcon && styles.hasClearIcon,
     ];
   },
-})(({ ownerState }) => ({
+})({
   [`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {
     visibility: 'visible',
   },
@@ -95,16 +96,9 @@ const AutocompleteRoot = styled('div', {
       visibility: 'visible',
     },
   },
-  ...(ownerState.fullWidth && {
-    width: '100%',
-  }),
   [`& .${autocompleteClasses.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)',
-    ...(ownerState.size === 'small' && {
-      margin: 2,
-      maxWidth: 'calc(100% - 4px)',
-    }),
   },
   [`& .${autocompleteClasses.inputRoot}`]: {
     flexWrap: 'wrap',
@@ -198,11 +192,31 @@ const AutocompleteRoot = styled('div', {
     flexGrow: 1,
     textOverflow: 'ellipsis',
     opacity: 0,
-    ...(ownerState.inputFocused && {
-      opacity: 1,
-    }),
   },
-}));
+  variants: [
+    {
+      props: { fullWidth: true },
+      style: { width: '100%' },
+    },
+    {
+      props: { size: 'small' },
+      style: {
+        [`& .${autocompleteClasses.tag}`]: {
+          margin: 2,
+          maxWidth: 'calc(100% - 4px)',
+        },
+      },
+    },
+    {
+      props: { inputFocused: true },
+      style: {
+        [`& .${autocompleteClasses.input}`]: {
+          opacity: 1,
+        },
+      },
+    },
+  ],
+});
 
 const AutocompleteEndAdornment = styled('div', {
   name: 'MuiAutocomplete',
@@ -233,13 +247,18 @@ const AutocompletePopupIndicator = styled(IconButton, {
     ...styles.popupIndicator,
     ...(ownerState.popupOpen && styles.popupIndicatorOpen),
   }),
-})(({ ownerState }) => ({
+})({
   padding: 2,
   marginRight: -2,
-  ...(ownerState.popupOpen && {
-    transform: 'rotate(180deg)',
-  }),
-}));
+  variants: [
+    {
+      props: { popupOpen: true },
+      style: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  ],
+});
 
 const AutocompletePopper = styled(Popper, {
   name: 'MuiAutocomplete',
@@ -253,11 +272,16 @@ const AutocompletePopper = styled(Popper, {
       ownerState.disablePortal && styles.popperDisablePortal,
     ];
   },
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   zIndex: (theme.vars || theme).zIndex.modal,
-  ...(ownerState.disablePortal && {
-    position: 'absolute',
-  }),
+  variants: [
+    {
+      props: { disablePortal: true },
+      style: {
+        position: 'absolute',
+      },
+    },
+  ],
 }));
 
 const AutocompletePaper = styled(Paper, {