feat(react-ui): Add shadow dom environment supports

.gitignore

@@ -3,6 +3,7 @@
 .vscode
 .DS_Store
 *.code-workspace
+*.orig
 
 node_modules
 yarn-debug.log

packages/react-ui-validations/stories/__creevey__/Input.creevey.ts

@@ -3,7 +3,7 @@ import { story, kind, test } from 'creevey';
 kind('Input', () => {
   story('TooltipTopLeft', () => {
     test('invalidTooltip', async function () {
-      const input = await this.browser.findElement({ css: '.react-ui-1xb4xgu' });
+      const input = await this.browser.findElement({ css: '[data-tid~="test-input"]' });
       await this.browser
         .actions({
           bridge: true,

packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.styles.ts

@@ -1,9 +1,11 @@
-import { css, memoizeStyle } from '../../../lib/theming/Emotion';
+import { memoizeStyle } from '../../../lib/theming/Emotion';
 import { Theme } from '../../../lib/theming/Theme';
+import type { Emotion } from '@emotion/css/create-instance';
 
-export const styles = memoizeStyle({
-  root() {
-    return css`
+export const getStyles = (emotion: Emotion) =>
+  memoizeStyle({
+    root() {
+      return emotion.css`
       font-weight: 400;
       font-size: 14px;
       padding-left: 300px;
@@ -15,15 +17,15 @@ export const styles = memoizeStyle({
         padding-left: 0;
       }
     `;
-  },
-  darkRoot(t: Theme) {
-    return css`
+    },
+    darkRoot(t: Theme) {
+      return emotion.css`
       background: ${t.bgDefault};
       color: ${t.textColorDefault};
     `;
-  },
-  wrapper() {
-    return css`
+    },
+    wrapper() {
+      return emotion.css`
       padding: 30px 40px;
       margin: 0 auto;
       max-width: 1000px;
@@ -33,12 +35,12 @@ export const styles = memoizeStyle({
         padding: 16px;
       }
     `;
-  },
-  content() {
-    return css``;
-  },
-  darkContent(t: Theme) {
-    return css`
+    },
+    content() {
+      return emotion.css``;
+    },
+    darkContent(t: Theme) {
+      return emotion.css`
       h1,
       h2,
       h3,
@@ -100,21 +102,21 @@ export const styles = memoizeStyle({
         border: 1px solid #444;
       }
     `;
-  },
-  header() {
-    return css`
+    },
+    header() {
+      return emotion.css`
       padding: 40px 40px 0 !important;
     `;
-  },
+    },
   heading() {
     return css`
       display: flex;
       justify-content: space-between;
       align-items: center;
     `;
   },
-  sidebar() {
-    return css`
+    sidebar() {
+      return emotion.css`
       width: 300px;
       background: #41464e;
       font-size: 16px;
@@ -152,23 +154,23 @@ export const styles = memoizeStyle({
         font-weight: normal;
       }
     `;
-  },
-  sidebarNotice() {
-    return css`
-      padding-top: 72px;
+    },
+    sidebarNotice() {
+      return emotion.css`
+        padding-top: 72px;
 
-      @media (max-width: 1080px) {
-        padding-top: 110px;
-      }
+        @media (max-width: 1080px) {
+          padding-top: 110px;
+        }
 
-      @media (max-width: 768px) {
-        padding-top: 160px;
-      }
-    `;
-  },
-  github() {
-    return css`
-      display: inline-block;
-    `;
-  },
-});
+        @media (max-width: 768px) {
+          padding-top: 160px;
+        }
+      `;
+    },
+    github() {
+      return emotion.css`
+        display: inline-block;
+      `;
+    },
+  });

packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx

@@ -1,16 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useContext, useState } from 'react';
 import Context from 'react-styleguidist/lib/client/rsg-components/Context';
 import { useStyleGuideContext } from 'react-styleguidist/lib/client/rsg-components/Context/Context';
+import { EmotionContext } from '../../../lib/theming/Emotion';
+import { getStyles } from './StyleGuideWrapper.styles';
 
 import ThemeSwitcher from '../ThemeSwitcher/ThemeSwitcher';
-import { cx } from '../../../lib/theming/Emotion';
 import { DARK_THEME } from '../../../lib/theming/themes/DarkTheme';
 import { DEFAULT_THEME_WRAPPER } from '../ThemeSwitcher/constants';
 
-import { styles } from './StyleGuideWrapper.styles';
 import { Notification } from '../Notification/Notification';
 import { checkNewDocsAccess } from '../Notification/checkNewDocsAccess';
-
 interface StyleGuideRendererProps {
   children: React.ReactNode;
   hasSidebar: boolean;
@@ -20,6 +19,7 @@ interface StyleGuideRendererProps {
 }
 
 function StyleGuideRenderer({ children, hasSidebar, toc, title, version }: StyleGuideRendererProps) {
+  const emotion = useContext(EmotionContext);
   const { codeRevision, config, slots, displayMode, cssRevision } = useStyleGuideContext();
   const [theme, setTheme] = useState(DEFAULT_THEME_WRAPPER);
   document.body.style.fontFamily = 'Lab Grotesque, Roboto, Helvetica Neue, Arial, sans-serif';
@@ -47,9 +47,11 @@ function StyleGuideRenderer({ children, hasSidebar, toc, title, version }: Style
   return (
     <Context.Provider value={{ theme, setTheme, codeRevision, config, slots, displayMode, cssRevision }}>
       {hasNewDocsAccess && <Notification />}
-      <div className={cx(styles.root(), { [styles.darkRoot(DARK_THEME)]: isThemeDark })}>
+      <div className={emotion.cx(styles.root(), { [styles.darkRoot(DARK_THEME)]: isThemeDark })}>
         <main className={styles.wrapper()}>
-          <div className={cx(styles.content(), { [styles.darkContent(DARK_THEME)]: isThemeDark })}>{children}</div>
+          <div className={emotion.cx(styles.content(), { [styles.darkContent(DARK_THEME)]: isThemeDark })}>
+            {children}
+          </div>
         </main>
         {hasSidebar && (
           <div data-testid="sidebar" className={cx(styles.sidebar(), { [styles.sidebarNotice()]: hasNewDocsAccess })}>

packages/react-ui/components/Autocomplete/Autocomplete.styles.ts

@@ -1,16 +1,20 @@
-import { css, memoizeStyle } from '../../lib/theming/Emotion';
+import type { Emotion } from '@emotion/css/create-instance';
+
+import { memoizeStyle } from '../../lib/theming/Emotion';
 import { Theme } from '../../lib/theming/Theme';
 
-export const styles = memoizeStyle({
-  root(t: Theme) {
-    return css`
-      display: inline-block;
-      width: ${t.inputWidth};
-    `;
-  },
-  noPortal() {
-    return css`
+export const getStyles = (emotion: Emotion) =>
+  memoizeStyle({
+    root(t: Theme) {
+      return emotion.css`
+        display: inline-block;
+        width: ${t.inputWidth};
+      `;
+    },
+
+    noPortal() {
+      return emotion.css`
       position: relative;
     `;
-  },
-});
+    },
+  });

packages/react-ui/components/Autocomplete/Autocomplete.tsx

@@ -1,12 +1,12 @@
 import React, { AriaAttributes, KeyboardEvent } from 'react';
 import PropTypes from 'prop-types';
+import type { Emotion } from '@emotion/css/create-instance';
 
 import { MenuMessage } from '../../internal/MenuMessage';
 import { locale } from '../../lib/locale/decorators';
 import { getRandomID, isNullable } from '../../lib/utils';
-import { ThemeContext } from '../../lib/theming/ThemeContext';
 import { Theme } from '../../lib/theming/Theme';
-import { cx } from '../../lib/theming/Emotion';
+import { EmotionConsumer } from '../../lib/theming/Emotion';
 import { isKeyArrowDown, isKeyArrowUp, isKeyEnter, isKeyEscape } from '../../lib/events/keyboard/identifiers';
 import { Input, InputProps } from '../Input';
 import { Menu } from '../../internal/Menu';
@@ -23,11 +23,12 @@ import { getDOMRect } from '../../lib/dom/getDOMRect';
 import { SizeProp } from '../../lib/types/props';
 import { Popup } from '../../internal/Popup';
 import { getMenuPositions } from '../../lib/getMenuPositions';
+import { ThemeContext } from '../../lib/theming/ThemeContext';
 import { ZIndex } from '../../internal/ZIndex';
 
-import { styles } from './Autocomplete.styles';
 import { AutocompleteLocale, AutocompleteLocaleHelper } from './locale';
 import { getAutocompleteTheme } from './getAutocompleteTheme';
+import { getStyles } from './Autocomplete.styles';
 
 function match(pattern: string, items: string[]) {
   if (!pattern || !items) {
@@ -174,6 +175,8 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
   };
 
   private theme!: Theme;
+  private emotion!: Emotion;
+  private styles!: ReturnType<typeof getStyles>;
   private readonly locale!: AutocompleteLocale;
   private isMobileLayout!: boolean;
   private opened = false;
@@ -212,18 +215,26 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
 
   public render() {
     return (
-      <ThemeContext.Consumer>
-        {(theme) => {
-          this.theme = getAutocompleteTheme(theme);
+      <EmotionConsumer>
+        {(emotion) => {
+          this.emotion = emotion;
+          this.styles = getStyles(this.emotion);
           return (
-            <ThemeContext.Provider value={this.theme}>
-              <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>
-                {this.renderMain}
-              </CommonWrapper>
-            </ThemeContext.Provider>
+            <ThemeContext.Consumer>
+              {(theme) => {
+                this.theme = getAutocompleteTheme(theme);
+                return (
+                  <ThemeContext.Provider value={this.theme}>
+                    <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>
+                      {this.renderMain}
+                    </CommonWrapper>
+                  </ThemeContext.Provider>
+                );
+              }}
+            </ThemeContext.Consumer>
           );
         }}
-      </ThemeContext.Consumer>
+      </EmotionConsumer>
     );
   }
   public renderMain = (props: CommonWrapperRestProps<AutocompleteProps>) => {
@@ -264,8 +275,8 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
       <RenderLayer onFocusOutside={this.handleBlur} onClickOutside={this.handleClickOutside} active={focused}>
         <span
           data-tid={AutocompleteDataTids.root}
-          className={cx(styles.root(this.theme), {
-            [styles.noPortal()]: disablePortal,
+          className={this.emotion.cx(this.styles.root(this.theme), {
+            [this.styles.noPortal()]: disablePortal,
           })}
           style={{ width }}
           ref={this.refRootSpan}