fix: wip

skbkontur · Oct 25, 2024 · 9b16370 · 9b16370
1 parent 394989e
commit 9b16370
Show file tree

Hide file tree

Showing 203 changed files with 8,263 additions and 6,736 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@
 .vscode
 .DS_Store
 *.code-workspace
+*.orig
 
 node_modules
 yarn-debug.log

diff --git a/package.json b/package.json
@@ -35,5 +35,6 @@
   },
   "resolutions": {
     "selenium-webdriver": "4.0.0-beta.4"
-  }
+  },
+  "packageManager": "[email protected]"
 }
diff --git a/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.styles.ts b/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;
@@ -41,15 +43,15 @@ export const styles = memoizeStyle({
         }
       }
     `;
-  },
-  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;
@@ -59,12 +61,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,
@@ -126,14 +128,14 @@ export const styles = memoizeStyle({
         border: 1px solid #444;
       }
     `;
-  },
-  header() {
-    return css`
+    },
+    header() {
+      return emotion.css`
       padding: 40px 40px 0 !important;
     `;
-  },
-  sidebar() {
-    return css`
+    },
+    sidebar() {
+      return emotion.css`
       width: 300px;
       background: #41464e;
       font-size: 16px;
@@ -165,19 +167,19 @@ export const styles = memoizeStyle({
         font-weight: normal;
       }
     `;
-  },
-  footer() {
-    return css`
+    },
+    footer() {
+      return emotion.css`
       position: fixed;
       top: 0;
       right: 0;
       width: 149px;
       height: 149px;
       z-index: 999;
     `;
-  },
-  footerLink() {
-    return css`
+    },
+    footerLink() {
+      return emotion.css`
       position: relative;
       right: -37px;
       top: -22px;
@@ -194,5 +196,5 @@ export const styles = memoizeStyle({
       transform: rotate(45deg);
       cursor: pointer;
     `;
-  },
-});
+    },
+  });
diff --git a/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx b/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx
@@ -1,9 +1,10 @@
 import React, { 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 { useEmotion } 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';
 
@@ -18,6 +19,7 @@ interface StyleGuideRendererProps {
 }
 
 function StyleGuideRenderer({ children, hasSidebar, toc, title, version }: StyleGuideRendererProps) {
+  const emotion = useEmotion();
   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';
@@ -33,11 +35,15 @@ function StyleGuideRenderer({ children, hasSidebar, toc, title, version }: Style
       root.style.height = '100%';
     }
   }
+
+  const styles = getStyles(emotion);
   return (
     <Context.Provider value={{ theme, setTheme, codeRevision, config, slots, displayMode, cssRevision }}>
-      <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={styles.sidebar()}>

diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.styles.ts b/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;
     `;
-  },
-});
+    },
+  });
diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.tsx b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
@@ -1,10 +1,10 @@
 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 { isKeyArrowDown, isKeyArrowUp, isKeyEnter, isKeyEscape } from '../../lib/events/keyboard/identifiers';
@@ -23,11 +23,13 @@ import { getDOMRect } from '../../lib/dom/getDOMRect';
 import { SizeProp } from '../../lib/types/props';
 import { Popup } from '../../internal/Popup';
 import { getMenuPositions } from '../../lib/getMenuPositions';
+import { EmotionConsumer } from '../../lib/theming/Emotion';
+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) {
@@ -163,6 +165,7 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
   };
 
   private theme!: Theme;
+  private emotion!: Emotion;
   private readonly locale!: AutocompleteLocale;
   private isMobileLayout!: boolean;
   private opened = false;
@@ -201,18 +204,25 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
 
   public render() {
     return (
-      <ThemeContext.Consumer>
-        {(theme) => {
-          this.theme = getAutocompleteTheme(theme);
+      <EmotionConsumer>
+        {(emotion) => {
+          this.emotion = 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>) => {
@@ -249,6 +259,7 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
       ref: this.refInput,
     };
 
+    const styles = getStyles(this.emotion);
     return (
       <RenderLayer onFocusOutside={this.handleBlur} onClickOutside={this.handleClickOutside} active={focused}>
         <span

diff --git a/packages/react-ui/components/Calendar/Calendar.styles.ts b/packages/react-ui/components/Calendar/Calendar.styles.ts
@@ -1,33 +1,36 @@
-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) {
-    const width = parseInt(t.calendarCellWidth) * 7;
-    return css`
-      background: ${t.calendarBg};
-      box-sizing: content-box;
-      border-radius: ${t.calendarBorderRadius};
-      color: ${t.textColorDefault};
-      display: block;
-      padding: 0 ${t.calendarPaddingX};
-      width: ${width}px;
-      touch-action: none;
-    `;
-  },
+export const getStyles = (emotion: Emotion) =>
+  memoizeStyle({
+    root(t: Theme) {
+      const width = parseInt(t.calendarCellWidth) * 7;
+      return emotion.css`
+        background: ${t.calendarBg};
+        box-sizing: content-box;
+        border-radius: ${t.calendarBorderRadius};
+        color: ${t.textColorDefault};
+        display: block;
+        padding: 0 ${t.calendarPaddingX};
+        width: ${width}px;
+        touch-action: none;
+      `;
+    },
 
-  wrapper() {
-    return css`
-      font-size: 14px;
-      position: relative;
-      overflow: hidden;
-    `;
-  },
+    wrapper() {
+      return emotion.css`
+        font-size: 14px;
+        position: relative;
+        overflow: hidden;
+      `;
+    },
 
-  separator(t: Theme) {
-    return css`
-      border-bottom: ${t.calendarBottomSeparatorBorder};
-      margin: 0 ${t.calendarMonthTitleMarginX};
-    `;
-  },
-});
+    separator(t: Theme) {
+      return emotion.css`
+        border-bottom: ${t.calendarBottomSeparatorBorder};
+        margin: 0 ${t.calendarMonthTitleMarginX};
+      `;
+    },
+  });