From 0d99e970a98506607f3ccfac00632d9c5fde28c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Sun, 30 Apr 2023 17:49:57 +0200
Subject: [PATCH 1/2] [docs] Improve Multiselect demo styling

---
 .../components/select/UnstyledSelectMultiple.js     | 13 +++++++++++++
 .../components/select/UnstyledSelectMultiple.tsx    | 13 +++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.js b/docs/data/base/components/select/UnstyledSelectMultiple.js
index ab753117c9e316..37d89ca59ee750 100644
--- a/docs/data/base/components/select/UnstyledSelectMultiple.js
+++ b/docs/data/base/components/select/UnstyledSelectMultiple.js
@@ -129,6 +129,7 @@ const StyledOption = styled(Option)(
   padding: 8px;
   border-radius: 8px;
   cursor: default;
+  transition: border-radius 300ms ease;
 
   &:last-of-type {
     border-bottom: none;
@@ -144,6 +145,18 @@ const StyledOption = styled(Option)(
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
+  @supports selector(:has(*)) {
+    &.${optionClasses.selected} + .${optionClasses.selected} {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &:where(.${optionClasses.selected}):has(+ .${optionClasses.selected}) {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
   &.${optionClasses.highlighted}.${optionClasses.selected} {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.tsx b/docs/data/base/components/select/UnstyledSelectMultiple.tsx
index 3a8c00737c036d..db59310ecd874a 100644
--- a/docs/data/base/components/select/UnstyledSelectMultiple.tsx
+++ b/docs/data/base/components/select/UnstyledSelectMultiple.tsx
@@ -118,6 +118,7 @@ const StyledOption = styled(Option)(
   padding: 8px;
   border-radius: 8px;
   cursor: default;
+  transition: border-radius 300ms ease;
 
   &:last-of-type {
     border-bottom: none;
@@ -133,6 +134,18 @@ const StyledOption = styled(Option)(
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
+  @supports selector(:has(*)) {
+    &.${optionClasses.selected} + .${optionClasses.selected} {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &:where(.${optionClasses.selected}):has(+ .${optionClasses.selected}) {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
   &.${optionClasses.highlighted}.${optionClasses.selected} {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};

From 3f6b77eeef7ce7ee3961e2af1b4e560021ff65ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@dudak.me>
Date: Mon, 1 May 2023 12:03:49 -0700
Subject: [PATCH 2/2] Fix createEmotionCache

---
 .../select/UnstyledSelectMultiple.js           | 18 ++++++++++--------
 .../select/UnstyledSelectMultiple.tsx          | 18 ++++++++++--------
 docs/src/createEmotionCache.ts                 |  4 ++--
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.js b/docs/data/base/components/select/UnstyledSelectMultiple.js
index 37d89ca59ee750..9ed3cad668b0c4 100644
--- a/docs/data/base/components/select/UnstyledSelectMultiple.js
+++ b/docs/data/base/components/select/UnstyledSelectMultiple.js
@@ -146,14 +146,16 @@ const StyledOption = styled(Option)(
   }
 
   @supports selector(:has(*)) {
-    &.${optionClasses.selected} + .${optionClasses.selected} {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-
-    &:where(.${optionClasses.selected}):has(+ .${optionClasses.selected}) {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+    &.${optionClasses.selected} {
+      & + .${optionClasses.selected} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:has(+ .${optionClasses.selected}) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
   }
 
diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.tsx b/docs/data/base/components/select/UnstyledSelectMultiple.tsx
index db59310ecd874a..c0ff2f8b580e6d 100644
--- a/docs/data/base/components/select/UnstyledSelectMultiple.tsx
+++ b/docs/data/base/components/select/UnstyledSelectMultiple.tsx
@@ -135,14 +135,16 @@ const StyledOption = styled(Option)(
   }
 
   @supports selector(:has(*)) {
-    &.${optionClasses.selected} + .${optionClasses.selected} {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-
-    &:where(.${optionClasses.selected}):has(+ .${optionClasses.selected}) {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+    &.${optionClasses.selected} {
+      & + .${optionClasses.selected} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:has(+ .${optionClasses.selected}) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
   }
 
diff --git a/docs/src/createEmotionCache.ts b/docs/src/createEmotionCache.ts
index 4ec97e97eafed3..a0c402f8b187b6 100644
--- a/docs/src/createEmotionCache.ts
+++ b/docs/src/createEmotionCache.ts
@@ -8,8 +8,8 @@ function globalSelector(element: Element) {
   switch (element.type) {
     case RULESET:
       element.props = (element.props as string[]).map((value: any) => {
-        if (value.match(/(:where|:has)\(/)) {
-          value = value.replace(/\.[^:]+(:where|:has)/, '$1');
+        if (value.match(/(:where|:is)\(/)) {
+          value = value.replace(/\.[^:]+(:where|:is)/, '$1');
           return value;
         }
         return value;