fix: after rebase

skbkontur · Oct 28, 2024 · 7c8f3cd · 7c8f3cd
1 parent 9b16370
commit 7c8f3cd
Show file tree

Hide file tree

Showing 96 changed files with 1,375 additions and 1,389 deletions.
diff --git a/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx b/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx
@@ -1,15 +1,13 @@
-import React, { useState } from 'react';
+import React, { 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 { useEmotion } from '../../../lib/theming/Emotion';
+import { EmotionContext } from '../../../lib/theming/Emotion';
 import { getStyles } from './StyleGuideWrapper.styles';
 
 import ThemeSwitcher from '../ThemeSwitcher/ThemeSwitcher';
 import { DARK_THEME } from '../../../lib/theming/themes/DarkTheme';
 import { DEFAULT_THEME_WRAPPER } from '../ThemeSwitcher/constants';
 
-import { styles } from './StyleGuideWrapper.styles';
-
 interface StyleGuideRendererProps {
   children: React.ReactNode;
   hasSidebar: boolean;
@@ -19,7 +17,7 @@ interface StyleGuideRendererProps {
 }
 
 function StyleGuideRenderer({ children, hasSidebar, toc, title, version }: StyleGuideRendererProps) {
-  const emotion = useEmotion();
+  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';

diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.tsx b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
@@ -6,7 +6,7 @@ import { MenuMessage } from '../../internal/MenuMessage';
 import { locale } from '../../lib/locale/decorators';
 import { getRandomID, isNullable } from '../../lib/utils';
 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,7 +23,6 @@ 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';
 
@@ -264,7 +263,7 @@ 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), {
+          className={this.emotion.cx(styles.root(this.theme), {
             [styles.noPortal()]: disablePortal,
           })}
           style={{ width }}

diff --git a/packages/react-ui/components/Button/Button.mixins.ts b/packages/react-ui/components/Button/Button.mixins.ts
@@ -1,21 +1,23 @@
-import { css } from '../../lib/theming/Emotion';
+import type { Emotion } from '@emotion/css/create-instance';
 
 import { globalClasses } from './Button.styles';
 
 const getBtnPadding = (paddingY: string, paddingX: string): string => {
   return `${paddingY} ${paddingX} ${paddingY}`;
 };
 
-export const buttonUseMixin = (
-  btnBackground: string,
-  btnBackgroundStart: string,
-  btnBackgroundEnd: string,
-  color: string,
-  borderColor: string,
-  borderWidth: string,
-) => {
-  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return css`
+export const buttonUseMixin =
+  (emotion: Emotion) =>
+  (
+    btnBackground: string,
+    btnBackgroundStart: string,
+    btnBackgroundEnd: string,
+    color: string,
+    borderColor: string,
+    borderWidth: string,
+  ) => {
+    const hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+    return emotion.css`
     background-color: ${hasGradient ? `initial` : btnBackground};
     background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};
     color: ${color};
@@ -28,32 +30,30 @@ export const buttonUseMixin = (
       }
     }
   `;
-};
+  };
 
-export const buttonHoverMixin = (
-  btnBackground: string,
-  btnBackgroundStart: string,
-  btnBackgroundEnd: string,
-  color: string,
-  borderColor: string,
-  borderWidth: string,
-) => {
-  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return css`
+export const buttonHoverMixin =
+  (emotion: Emotion) =>
+  (
+    btnBackground: string,
+    btnBackgroundStart: string,
+    btnBackgroundEnd: string,
+    color: string,
+    borderColor: string,
+    borderWidth: string,
+  ) => {
+    const hasGradient = btnBackgroundStart !== btnBackgroundEnd;
+    return emotion.css`
     background-color: ${hasGradient ? `initial` : btnBackground};
     background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};
     box-shadow: 0 0 0 ${borderWidth} ${borderColor};
     color: ${color};
   `;
-};
+  };
 
-export const buttonActiveMixin = (
-  btnBackground: string,
-  btnShadow: string,
-  borderColor: string,
-  borderWidth: string,
-) => {
-  return css`
+export const buttonActiveMixin =
+  (emotion: Emotion) => (btnBackground: string, btnShadow: string, borderColor: string, borderWidth: string) => {
+    return emotion.css`
     &,
     &:hover {
       background-image: none !important; // override :hover styles
@@ -65,19 +65,20 @@ export const buttonActiveMixin = (
       }
     }
   `;
-};
+  };
 
-export const buttonSizeMixin = (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => {
-  return css`
+export const buttonSizeMixin =
+  (emotion: Emotion) => (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => {
+    return emotion.css`
     font-size: ${fontSize};
     box-sizing: border-box;
     padding: ${getBtnPadding(paddingY, paddingX)};
     line-height: ${lineHeight};
   `;
-};
+  };
 
-export const buttonSizeMixinIE11 = (paddingX: string, paddingY: string) => {
-  return css`
+export const buttonSizeMixinIE11 = (emotion: Emotion) => (paddingX: string, paddingY: string) => {
+  return emotion.css`
     padding: ${getBtnPadding(paddingY, paddingX)};
     line-height: normal;
   `;