@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

package/components/SingleToast/SingleToast.d.ts

@@ -4,6 +4,8 @@ import { Toast, ToastProps } from '../Toast/Toast';
  * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.
  */
 export declare class SingleToast extends React.Component<ToastProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static ref: React.RefObject<Toast>;
     static push: typeof Toast.push;
     static close: typeof Toast.close;

package/components/Spinner/Spinner/Spinner.js

@@ -6,14 +6,14 @@ var _dec, _class, _class2, _temp;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { locale } from "../../../lib/locale/decorators";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { SpinnerIcon } from "../../../internal/icons/SpinnerIcon";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
-import { ReactUIFeatureFlagsContext, getFullReactUIFlagsContext } from "../../../lib/featureFlagsContext";
-import { styles } from "../Spinner.styles";
+import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getStyles } from "../Spinner.styles";
 import { SpinnerLocaleHelper } from "../locale";
 var types = ['big', 'mini', 'normal'];
 export var SpinnerDataTids = {
@@ -37,11 +37,12 @@ var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class =
     _this.getProps = createPropsGetter(Spinner.defaultProps);
 
     _this.renderSpinner = function (type, dimmed, inline) {
-      var _cx;
+      var _this$emotion$cx;
 
+      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement(SpinnerIcon, {
         size: type,
-        className: cx((_cx = {}, _cx[styles.circle(_this.theme)] = !dimmed && !_this.props.color, _cx[styles.circleDimmedColor(_this.theme)] = dimmed, _cx[styles.circleWithoutColorAnimation()] = dimmed || !!_this.props.color, _cx)),
+        className: _this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.circle(_this.theme)] = !dimmed && !_this.props.color, _this$emotion$cx[styles.circleDimmedColor(_this.theme)] = dimmed, _this$emotion$cx[styles.circleWithoutColorAnimation()] = dimmed || !!_this.props.color, _this$emotion$cx)),
         dimmed: dimmed,
         width: _this.props.width,
         color: _this.props.color,
@@ -50,8 +51,9 @@ var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class =
     };
 
     _this.renderCaption = function (type, caption) {
+      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: cx(styles[type](_this.theme), styles.captionColor(_this.theme))
+        className: _this.emotion.cx(styles[type](_this.theme), styles.captionColor(_this.theme))
       }, caption);
     };
 
@@ -65,9 +67,12 @@ var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class =
 
     return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
       _this2.featureFlags = getFullReactUIFlagsContext(flags);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this2.theme = theme;
-        return _this2.renderMain();
+      return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+        _this2.emotion = emotion;
+        return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+          _this2.theme = theme;
+          return _this2.renderMain();
+        });
       });
     });
   };
@@ -81,6 +86,7 @@ var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class =
         dimmed = _this$props.dimmed,
         inline = _this$props.inline;
     var type = this.getProps().type;
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("div", {
@@ -92,7 +98,7 @@ var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class =
   };
 
   return Spinner;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.displayName = 'Spinner', _class2.propTypes = {
   /**
   * Текст рядом с мини-лоадером.
   *

package/components/Spinner/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","createPropsGetter","ReactUIFeatureFlagsContext","getFullReactUIFlagsContext","styles","SpinnerLocaleHelper","types","SpinnerDataTids","root","Spinner","getProps","defaultProps","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","flags","featureFlags","renderMain","canDefaultCaptionBeRemoved","spinnerLoaderRemoveDefaultCaption","defaultCaption","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Types","Object","assign","map"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport {\n  ReactUIFeatureFlags,\n  ReactUIFeatureFlagsContext,\n  getFullReactUIFlagsContext,\n} from '../../lib/featureFlagsContext';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types = ['big', 'mini', 'normal'] as const;\n\nexport type SpinnerType = typeof types[number];\n\nexport interface SpinnerProps extends CommonProps {\n  /**\n   * Подпись под спиннером\n   */\n  caption?: React.ReactNode;\n  /**\n   * Переводит спиннер в \"затемнённый режим\"\n   *\n   * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`\n   */\n  dimmed?: boolean;\n  /**\n   * Размер спиннера и текста\n   *\n   * @default normal\n   */\n  type?: SpinnerType;\n  inline?: boolean;\n  /**\n   * Толщина спиннера\n   */\n  width?: number;\n  /**\n   * Цвет спиннера\n   */\n  color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n  root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n  public static __KONTUR_REACT_UI__ = 'Spinner';\n\n  public static propTypes = {\n    /**\n     * Текст рядом с мини-лоадером.\n     *\n     * 'Загрузка' - значение по-умолчанию\n     */\n    caption: PropTypes.node,\n\n    dimmed: PropTypes.bool,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * Значение по-умолчанию - normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(types),\n  };\n\n  public static defaultProps: DefaultProps = {\n    type: 'normal',\n  };\n\n  private getProps = createPropsGetter(Spinner.defaultProps);\n\n  public static Types: Record<SpinnerType, SpinnerType> = Object.assign({}, ...types.map((type) => ({ [type]: type })));\n  private theme!: Theme;\n  private readonly locale!: SpinnerLocale;\n  private setRootNode!: TSetRootNode;\n  private featureFlags!: ReactUIFeatureFlags;\n\n  public render() {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.featureFlags = getFullReactUIFlagsContext(flags);\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const canDefaultCaptionBeRemoved = this.featureFlags.spinnerLoaderRemoveDefaultCaption;\n    const defaultCaption = canDefaultCaptionBeRemoved ? null : this.locale.loading;\n    const { caption = defaultCaption, dimmed, inline } = this.props;\n    const type = this.getProps().type;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n          <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n          {caption && this.renderCaption(type, caption)}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n    return (\n      <SpinnerIcon\n        size={type}\n        className={cx({\n          [styles.circle(this.theme)]: !dimmed && !this.props.color,\n          [styles.circleDimmedColor(this.theme)]: dimmed,\n          [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n        })}\n        dimmed={dimmed}\n        width={this.props.width}\n        color={this.props.color}\n        inline={inline}\n      />\n    );\n  };\n\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n    <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n  );\n}\n"]}
+{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","SpinnerIcon","CommonWrapper","EmotionConsumer","rootNode","createPropsGetter","getFullReactUIFlagsContext","ReactUIFeatureFlagsContext","ThemeContext","getStyles","SpinnerLocaleHelper","types","SpinnerDataTids","root","Spinner","getProps","defaultProps","renderSpinner","type","dimmed","inline","styles","emotion","cx","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","flags","featureFlags","renderMain","canDefaultCaptionBeRemoved","spinnerLoaderRemoveDefaultCaption","defaultCaption","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","displayName","propTypes","node","bool","oneOf","Types","Object","assign","map"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport {\n  getFullReactUIFlagsContext,\n  ReactUIFeatureFlags,\n  ReactUIFeatureFlagsContext,\n} from '../../lib/featureFlagsContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types = ['big', 'mini', 'normal'] as const;\n\nexport type SpinnerType = typeof types[number];\n\nexport interface SpinnerProps extends CommonProps {\n  /**\n   * Подпись под спиннером\n   */\n  caption?: React.ReactNode;\n  /**\n   * Переводит спиннер в \"затемнённый режим\"\n   *\n   * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`\n   */\n  dimmed?: boolean;\n  /**\n   * Размер спиннера и текста\n   *\n   * @default normal\n   */\n  type?: SpinnerType;\n  inline?: boolean;\n  /**\n   * Толщина спиннера\n   */\n  width?: number;\n  /**\n   * Цвет спиннера\n   */\n  color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n  root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n  public static __KONTUR_REACT_UI__ = 'Spinner';\n  public static displayName = 'Spinner';\n\n  public static propTypes = {\n    /**\n     * Текст рядом с мини-лоадером.\n     *\n     * 'Загрузка' - значение по-умолчанию\n     */\n    caption: PropTypes.node,\n\n    dimmed: PropTypes.bool,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * Значение по-умолчанию - normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(types),\n  };\n\n  public static defaultProps: DefaultProps = {\n    type: 'normal',\n  };\n\n  private getProps = createPropsGetter(Spinner.defaultProps);\n\n  public static Types: Record<SpinnerType, SpinnerType> = Object.assign({}, ...types.map((type) => ({ [type]: type })));\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private readonly locale!: SpinnerLocale;\n  private setRootNode!: TSetRootNode;\n  private featureFlags!: ReactUIFeatureFlags;\n\n  public render() {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.featureFlags = getFullReactUIFlagsContext(flags);\n          return (\n            <EmotionConsumer>\n              {(emotion) => {\n                this.emotion = emotion;\n                return (\n                  <ThemeContext.Consumer>\n                    {(theme) => {\n                      this.theme = theme;\n                      return this.renderMain();\n                    }}\n                  </ThemeContext.Consumer>\n                );\n              }}\n            </EmotionConsumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const canDefaultCaptionBeRemoved = this.featureFlags.spinnerLoaderRemoveDefaultCaption;\n    const defaultCaption = canDefaultCaptionBeRemoved ? null : this.locale.loading;\n    const { caption = defaultCaption, dimmed, inline } = this.props;\n    const type = this.getProps().type;\n    const styles = getStyles(this.emotion);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n          <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n          {caption && this.renderCaption(type, caption)}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n    const styles = getStyles(this.emotion);\n\n    return (\n      <SpinnerIcon\n        size={type}\n        className={this.emotion.cx({\n          [styles.circle(this.theme)]: !dimmed && !this.props.color,\n          [styles.circleDimmedColor(this.theme)]: dimmed,\n          [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n        })}\n        dimmed={dimmed}\n        width={this.props.width}\n        color={this.props.color}\n        inline={inline}\n      />\n    );\n  };\n\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => {\n    const styles = getStyles(this.emotion);\n    return (\n      <span className={this.emotion.cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n    );\n  };\n}\n"]}

package/components/Spinner/Spinner.d.ts

@@ -39,6 +39,7 @@ declare type DefaultProps = Required<Pick<SpinnerProps, 'type'>>;
  */
 export declare class Spinner extends React.Component<SpinnerProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {
         /**
          * Текст рядом с мини-лоадером.
@@ -60,6 +61,7 @@ export declare class Spinner extends React.Component<SpinnerProps> {
     private getProps;
     static Types: Record<SpinnerType, SpinnerType>;
     private theme;
+    private emotion;
     private readonly locale;
     private setRootNode;
     private featureFlags;

package/components/Spinner/Spinner.styles/Spinner.styles.js

@@ -2,47 +2,50 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-import { AnimationKeyframes } from "../../../lib/theming/AnimationKeyframes";
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+import { getAnimationKeyframes } from "../../../lib/theming/AnimationKeyframes";
 import { isIE11 } from "../../../lib/client";
-export var styles = memoizeStyle({
-  circle: function circle(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      stroke: ", ";\n\n      ", "\n    "])), t.spinnerColor, !isIE11 && "\n          animation: " + AnimationKeyframes.spinnerCircleOffset() + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            " + AnimationKeyframes.spinnerCircleLength() + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            " + AnimationKeyframes.spinnerCircleRotate() + " 2s linear infinite,\n            " + AnimationKeyframes.spinnerColor(t) + " 6s ease-in-out infinite;\n        ");
-  },
-  circleDimmedColor: function circleDimmedColor(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      stroke: ", ";\n    "])), t.spinnerDimmedColor);
-  },
-  circleWithoutColorAnimation: function circleWithoutColorAnimation() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), !isIE11 && "\n          animation: " + AnimationKeyframes.spinnerCircleOffset() + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          " + AnimationKeyframes.spinnerCircleLength() + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          " + AnimationKeyframes.spinnerCircleRotate() + " 2s linear infinite;\n        ");
-  },
-  captionColor: function captionColor(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.spinnerCaptionColor);
-  },
-  inline: function inline() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      font-size: inherit;\n      line-height: inherit;\n    "])));
-  },
-  mini: function mini(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.spinnerCaptionGapSmall, t.spinnerFontSizeSmall, t.spinnerLineHeightSmall);
-  },
-  small: function small(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      margin: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.spinnerCaptionMarginSmall, t.spinnerFontSizeSmall, t.spinnerLineHeightSmall);
-  },
-  normal: function normal(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])), t.spinnerFontSizeMedium, t.spinnerLineHeightMedium, t.spinnerCaptionGapMedium);
-  },
-  medium: function medium(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      margin: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.spinnerCaptionMarginMedium, t.spinnerFontSizeMedium, t.spinnerLineHeightMedium);
-  },
-  big: function big(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])), t.spinnerFontSizeLarge, t.spinnerLineHeightLarge, t.spinnerCaptionGapLarge);
-  },
-  large: function large(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      margin: ", ";\n    "])), t.spinnerFontSizeLarge, t.spinnerLineHeightLarge, t.spinnerCaptionMarginLarge);
-  },
-  spinner: function spinner() {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    "])));
-  },
-  inner: function inner() {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
-  }
-});
+export var getStyles = function getStyles(emotion) {
+  var AnimationKeyframes = getAnimationKeyframes(emotion);
+  return memoizeStyle({
+    circle: function circle(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        stroke: ", ";\n\n        ", "\n      "])), t.spinnerColor, !isIE11 && "\n          animation: " + AnimationKeyframes.spinnerCircleOffset() + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            " + AnimationKeyframes.spinnerCircleLength() + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            " + AnimationKeyframes.spinnerCircleRotate() + " 2s linear infinite,\n            " + AnimationKeyframes.spinnerColor(t) + " 6s ease-in-out infinite;\n        ");
+    },
+    circleDimmedColor: function circleDimmedColor(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        stroke: ", ";\n      "])), t.spinnerDimmedColor);
+    },
+    circleWithoutColorAnimation: function circleWithoutColorAnimation() {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), !isIE11 && "\n          animation: " + AnimationKeyframes.spinnerCircleOffset() + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          " + AnimationKeyframes.spinnerCircleLength() + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          " + AnimationKeyframes.spinnerCircleRotate() + " 2s linear infinite;\n        ");
+    },
+    captionColor: function captionColor(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.spinnerCaptionColor);
+    },
+    inline: function inline() {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        font-size: inherit;\n        line-height: inherit;\n      "])));
+    },
+    mini: function mini(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        margin-left: ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.spinnerCaptionGapSmall, t.spinnerFontSizeSmall, t.spinnerLineHeightSmall);
+    },
+    small: function small(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        margin: ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.spinnerCaptionMarginSmall, t.spinnerFontSizeSmall, t.spinnerLineHeightSmall);
+    },
+    normal: function normal(t) {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        display: block;\n        font-size: ", ";\n        line-height: ", ";\n        margin-top: ", ";\n      "])), t.spinnerFontSizeMedium, t.spinnerLineHeightMedium, t.spinnerCaptionGapMedium);
+    },
+    medium: function medium(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        margin: ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.spinnerCaptionMarginMedium, t.spinnerFontSizeMedium, t.spinnerLineHeightMedium);
+    },
+    big: function big(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        display: block;\n        font-size: ", ";\n        line-height: ", ";\n        margin-top: ", ";\n      "])), t.spinnerFontSizeLarge, t.spinnerLineHeightLarge, t.spinnerCaptionGapLarge);
+    },
+    large: function large(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        font-size: ", ";\n        line-height: ", ";\n        margin: ", ";\n      "])), t.spinnerFontSizeLarge, t.spinnerLineHeightLarge, t.spinnerCaptionMarginLarge);
+    },
+    spinner: function spinner() {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        text-align: center;\n        line-height: normal;\n      "])));
+    },
+    inner: function inner() {
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n      "])));
+    }
+  });
+};

package/components/Spinner/Spinner.styles/Spinner.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.styles.ts"],"names":["css","memoizeStyle","AnimationKeyframes","isIE11","styles","circle","t","spinnerColor","spinnerCircleOffset","spinnerCircleLength","spinnerCircleRotate","circleDimmedColor","spinnerDimmedColor","circleWithoutColorAnimation","captionColor","spinnerCaptionColor","inline","mini","spinnerCaptionGapSmall","spinnerFontSizeSmall","spinnerLineHeightSmall","small","spinnerCaptionMarginSmall","normal","spinnerFontSizeMedium","spinnerLineHeightMedium","spinnerCaptionGapMedium","medium","spinnerCaptionMarginMedium","big","spinnerFontSizeLarge","spinnerLineHeightLarge","spinnerCaptionGapLarge","large","spinnerCaptionMarginLarge","spinner","inner"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { AnimationKeyframes } from '../../lib/theming/AnimationKeyframes';\nimport { isIE11 } from '../../lib/client';\n\nexport const styles = memoizeStyle({\n  circle(t: Theme) {\n    return css`\n      stroke: ${t.spinnerColor};\n\n      ${!isIE11 &&\n      `\n          animation: ${AnimationKeyframes.spinnerCircleOffset()} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            ${AnimationKeyframes.spinnerCircleLength()} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            ${AnimationKeyframes.spinnerCircleRotate()} 2s linear infinite,\n            ${AnimationKeyframes.spinnerColor(t)} 6s ease-in-out infinite;\n        `}\n    `;\n  },\n  circleDimmedColor(t: Theme) {\n    return css`\n      stroke: ${t.spinnerDimmedColor};\n    `;\n  },\n  circleWithoutColorAnimation() {\n    return css`\n      ${!isIE11 &&\n      `\n          animation: ${AnimationKeyframes.spinnerCircleOffset()} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          ${AnimationKeyframes.spinnerCircleLength()} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          ${AnimationKeyframes.spinnerCircleRotate()} 2s linear infinite;\n        `}\n    `;\n  },\n\n  captionColor(t: Theme) {\n    return css`\n      color: ${t.spinnerCaptionColor};\n    `;\n  },\n\n  inline() {\n    return css`\n      font-size: inherit;\n      line-height: inherit;\n    `;\n  },\n\n  mini(t: Theme) {\n    return css`\n      margin-left: ${t.spinnerCaptionGapSmall};\n      font-size: ${t.spinnerFontSizeSmall};\n      line-height: ${t.spinnerLineHeightSmall};\n    `;\n  },\n\n  small(t: Theme) {\n    return css`\n      margin: ${t.spinnerCaptionMarginSmall};\n      font-size: ${t.spinnerFontSizeSmall};\n      line-height: ${t.spinnerLineHeightSmall};\n    `;\n  },\n\n  normal(t: Theme) {\n    return css`\n      display: block;\n      font-size: ${t.spinnerFontSizeMedium};\n      line-height: ${t.spinnerLineHeightMedium};\n      margin-top: ${t.spinnerCaptionGapMedium};\n    `;\n  },\n\n  medium(t: Theme) {\n    return css`\n      margin: ${t.spinnerCaptionMarginMedium};\n      font-size: ${t.spinnerFontSizeMedium};\n      line-height: ${t.spinnerLineHeightMedium};\n    `;\n  },\n\n  big(t: Theme) {\n    return css`\n      display: block;\n      font-size: ${t.spinnerFontSizeLarge};\n      line-height: ${t.spinnerLineHeightLarge};\n      margin-top: ${t.spinnerCaptionGapLarge};\n    `;\n  },\n\n  large(t: Theme) {\n    return css`\n      font-size: ${t.spinnerFontSizeLarge};\n      line-height: ${t.spinnerLineHeightLarge};\n      margin: ${t.spinnerCaptionMarginLarge};\n    `;\n  },\n\n  spinner() {\n    return css`\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    `;\n  },\n\n  inner() {\n    return css`\n      display: inline-block;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Spinner.styles.ts"],"names":["memoizeStyle","getAnimationKeyframes","isIE11","getStyles","emotion","AnimationKeyframes","circle","t","css","spinnerColor","spinnerCircleOffset","spinnerCircleLength","spinnerCircleRotate","circleDimmedColor","spinnerDimmedColor","circleWithoutColorAnimation","captionColor","spinnerCaptionColor","inline","mini","spinnerCaptionGapSmall","spinnerFontSizeSmall","spinnerLineHeightSmall","small","spinnerCaptionMarginSmall","normal","spinnerFontSizeMedium","spinnerLineHeightMedium","spinnerCaptionGapMedium","medium","spinnerCaptionMarginMedium","big","spinnerFontSizeLarge","spinnerLineHeightLarge","spinnerCaptionGapLarge","large","spinnerCaptionMarginLarge","spinner","inner"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { getAnimationKeyframes } from '../../lib/theming/AnimationKeyframes';\nimport { isIE11 } from '../../lib/client';\n\nexport const getStyles = (emotion: Emotion) => {\n  const AnimationKeyframes = getAnimationKeyframes(emotion);\n  return memoizeStyle({\n    circle(t: Theme) {\n      return emotion.css`\n        stroke: ${t.spinnerColor};\n\n        ${\n          !isIE11 &&\n          `\n          animation: ${AnimationKeyframes.spinnerCircleOffset()} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            ${AnimationKeyframes.spinnerCircleLength()} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            ${AnimationKeyframes.spinnerCircleRotate()} 2s linear infinite,\n            ${AnimationKeyframes.spinnerColor(t)} 6s ease-in-out infinite;\n        `\n        }\n      `;\n    },\n    circleDimmedColor(t: Theme) {\n      return emotion.css`\n        stroke: ${t.spinnerDimmedColor};\n      `;\n    },\n    circleWithoutColorAnimation() {\n      return emotion.css`\n        ${\n          !isIE11 &&\n          `\n          animation: ${AnimationKeyframes.spinnerCircleOffset()} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          ${AnimationKeyframes.spinnerCircleLength()} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          ${AnimationKeyframes.spinnerCircleRotate()} 2s linear infinite;\n        `\n        }\n      `;\n    },\n\n    captionColor(t: Theme) {\n      return emotion.css`\n        color: ${t.spinnerCaptionColor};\n      `;\n    },\n\n    inline() {\n      return emotion.css`\n        font-size: inherit;\n        line-height: inherit;\n      `;\n    },\n\n    mini(t: Theme) {\n      return emotion.css`\n        margin-left: ${t.spinnerCaptionGapSmall};\n        font-size: ${t.spinnerFontSizeSmall};\n        line-height: ${t.spinnerLineHeightSmall};\n      `;\n    },\n\n    small(t: Theme) {\n      return emotion.css`\n        margin: ${t.spinnerCaptionMarginSmall};\n        font-size: ${t.spinnerFontSizeSmall};\n        line-height: ${t.spinnerLineHeightSmall};\n      `;\n    },\n\n    normal(t: Theme) {\n      return emotion.css`\n        display: block;\n        font-size: ${t.spinnerFontSizeMedium};\n        line-height: ${t.spinnerLineHeightMedium};\n        margin-top: ${t.spinnerCaptionGapMedium};\n      `;\n    },\n\n    medium(t: Theme) {\n      return emotion.css`\n        margin: ${t.spinnerCaptionMarginMedium};\n        font-size: ${t.spinnerFontSizeMedium};\n        line-height: ${t.spinnerLineHeightMedium};\n      `;\n    },\n\n    big(t: Theme) {\n      return emotion.css`\n        display: block;\n        font-size: ${t.spinnerFontSizeLarge};\n        line-height: ${t.spinnerLineHeightLarge};\n        margin-top: ${t.spinnerCaptionGapLarge};\n      `;\n    },\n\n    large(t: Theme) {\n      return emotion.css`\n        font-size: ${t.spinnerFontSizeLarge};\n        line-height: ${t.spinnerLineHeightLarge};\n        margin: ${t.spinnerCaptionMarginLarge};\n      `;\n    },\n\n    spinner() {\n      return emotion.css`\n        display: inline-block;\n        text-align: center;\n        line-height: normal;\n      `;\n    },\n\n    inner() {\n      return emotion.css`\n        display: inline-block;\n      `;\n    },\n  });\n};\n"]}

package/components/Spinner/Spinner.styles.d.ts

@@ -1,5 +1,6 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     circle(t: Theme): string;
     circleDimmedColor(t: Theme): string;
     circleWithoutColorAnimation(): string;

package/components/Sticky/Sticky/Sticky.js

@@ -11,11 +11,11 @@ import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { isFunction } from "../../../lib/utils";
 import { ZIndex } from "../../../internal/ZIndex";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
-import { styles } from "../Sticky.styles";
+import { getStyles } from "../Sticky.styles";
 var MAX_REFLOW_RETRIES = 5;
 export var StickyDataTids = {
   root: 'Sticky__root'
@@ -157,7 +157,16 @@ export var Sticky = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
   };
 
   _proto.render = function render() {
-    var _cx;
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this$emotion$cx;
 
     var children = this.props.children;
     var side = this.props.side;
@@ -187,6 +196,7 @@ export var Sticky = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
       children = children(fixed);
     }
 
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("div", {
@@ -196,7 +206,7 @@ export var Sticky = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
     }, /*#__PURE__*/React.createElement(ZIndex, {
       priority: "Sticky",
       applyZIndex: fixed,
-      className: cx(styles.inner(), (_cx = {}, _cx[styles.fixed()] = fixed && !stopped, _cx[styles.stopped()] = stopped, _cx)),
+      className: this.emotion.cx(styles.inner(), (_this$emotion$cx = {}, _this$emotion$cx[styles.fixed()] = fixed && !stopped, _this$emotion$cx[styles.stopped()] = stopped, _this$emotion$cx)),
       style: innerStyle,
       wrapperRef: this.refInner
     }, /*#__PURE__*/React.createElement("div", {
@@ -210,7 +220,7 @@ export var Sticky = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
   };
 
   return Sticky;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Sticky', _class2.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Sticky', _class2.displayName = 'Sticky', _class2.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 
   /**

package/components/Sticky/Sticky/Sticky.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sticky.tsx"],"names":["React","PropTypes","shallowEqual","globalObject","LayoutEvents","isFunction","ZIndex","CommonWrapper","cx","rootNode","getDOMRect","createPropsGetter","styles","MAX_REFLOW_RETRIES","StickyDataTids","root","Sticky","getProps","defaultProps","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","innerHeight","clientHeight","top","bottom","left","width","height","props","getStop","side","prevFixed","prevHeight","offset","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","container","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","node","func","number","oneOf","isRequired"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends Omit<CommonProps, 'children'> {\n  side: 'top' | 'bottom';\n  /**\n   * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n   * @default 0\n   */\n  offset?: number;\n  getStop?: () => Nullable<HTMLElement>;\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\nexport const StickyDataTids = {\n  root: 'Sticky__root',\n} as const;\n\ntype DefaultProps = Required<Pick<StickyProps, 'offset'>>;\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n\n  public static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /**\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n     */\n    getStop: PropTypes.func,\n\n    /**\n     * Отступ от границы в пикселях\n     */\n    offset: PropTypes.number,\n\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n  };\n\n  public static defaultProps: DefaultProps = { offset: 0 };\n\n  private getProps = createPropsGetter(Sticky.defaultProps);\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        LayoutEvents.emit();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render() {\n    let { children } = this.props;\n    const { side } = this.props;\n    const offset = this.getProps().offset;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={cx(styles.inner(), {\n              [styles.fixed()]: fixed && !stopped,\n              [styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n  /**\n   * Пересчитать габариты и позицию залипшего элемента\n   *\n   * @public\n   */\n  public reflow = () => {\n    if (!globalObject.document?.documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = globalObject.innerHeight || globalObject.document.documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left, width } = getDOMRect(this.wrapper);\n    const { height } = getDOMRect(this.inner);\n    const { getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const offset = this.getProps().offset;\n    const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      this.setState({ width });\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = getDOMRect(stop);\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}
+{"version":3,"sources":["Sticky.tsx"],"names":["React","PropTypes","shallowEqual","globalObject","LayoutEvents","isFunction","ZIndex","CommonWrapper","EmotionConsumer","rootNode","getDOMRect","createPropsGetter","getStyles","MAX_REFLOW_RETRIES","StickyDataTids","root","Sticky","getProps","defaultProps","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","innerHeight","clientHeight","top","bottom","left","width","height","props","getStop","side","prevFixed","prevHeight","offset","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","emotion","renderMain","children","innerStyle","styles","setRootNode","cx","container","Component","__KONTUR_REACT_UI__","displayName","propTypes","oneOfType","node","func","number","oneOf","isRequired"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { getStyles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends Omit<CommonProps, 'children'> {\n  side: 'top' | 'bottom';\n  /**\n   * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n   * @default 0\n   */\n  offset?: number;\n  getStop?: () => Nullable<HTMLElement>;\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\nexport const StickyDataTids = {\n  root: 'Sticky__root',\n} as const;\n\ntype DefaultProps = Required<Pick<StickyProps, 'offset'>>;\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n  public static displayName = 'Sticky';\n\n  public static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /**\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n     */\n    getStop: PropTypes.func,\n\n    /**\n     * Отступ от границы в пикселях\n     */\n    offset: PropTypes.number,\n\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n  };\n\n  public static defaultProps: DefaultProps = { offset: 0 };\n\n  private getProps = createPropsGetter(Sticky.defaultProps);\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  private emotion!: Emotion;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        LayoutEvents.emit();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return this.renderMain();\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public renderMain() {\n    let { children } = this.props;\n    const { side } = this.props;\n    const offset = this.getProps().offset;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n    const styles = getStyles(this.emotion);\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={this.emotion.cx(styles.inner(), {\n              [styles.fixed()]: fixed && !stopped,\n              [styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n  /**\n   * Пересчитать габариты и позицию залипшего элемента\n   *\n   * @public\n   */\n  public reflow = () => {\n    if (!globalObject.document?.documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = globalObject.innerHeight || globalObject.document.documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left, width } = getDOMRect(this.wrapper);\n    const { height } = getDOMRect(this.inner);\n    const { getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const offset = this.getProps().offset;\n    const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      this.setState({ width });\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = getDOMRect(stop);\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}

package/components/Sticky/Sticky.d.ts

@@ -27,6 +27,7 @@ export declare const StickyDataTids: {
 declare type DefaultProps = Required<Pick<StickyProps, 'offset'>>;
 export declare class Sticky extends React.Component<StickyProps, StickyState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {
         children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         /**
@@ -46,11 +47,13 @@ export declare class Sticky extends React.Component<StickyProps, StickyState> {
     private inner;
     private layoutSubscription;
     private reflowCounter;
+    private emotion;
     private setRootNode;
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: StickyProps, prevState: StickyState): void;
     render(): JSX.Element;
+    renderMain(): JSX.Element;
     private refWrapper;
     private refInner;
     /**

package/components/Sticky/Sticky.styles/Sticky.styles.js

@@ -2,21 +2,23 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-export var styles = memoizeStyle({
-  wrapper: function wrapper() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: flex;\n    "])));
-  },
-  inner: function inner() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      width: 100%;\n    "])));
-  },
-  fixed: function fixed() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n    "])));
-  },
-  stopped: function stopped() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
-  },
-  container: function container() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      flex: auto;\n      width: 100%;\n    "])));
-  }
-});
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    wrapper: function wrapper() {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        display: flex;\n      "])));
+    },
+    inner: function inner() {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        width: 100%;\n      "])));
+    },
+    fixed: function fixed() {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        position: fixed;\n      "])));
+    },
+    stopped: function stopped() {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        position: relative;\n      "])));
+    },
+    container: function container() {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        flex: auto;\n        width: 100%;\n      "])));
+    }
+  });
+};

package/components/Sticky/Sticky.styles/Sticky.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sticky.styles.ts"],"names":["css","memoizeStyle","styles","wrapper","inner","fixed","stopped","container"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,OADiC,qBACvB;AACR,WAAOH,GAAP;;;AAGD,GALgC;AAMjCI,EAAAA,KANiC,mBAMzB;AACN,WAAOJ,GAAP;;;;AAID,GAXgC;;AAajCK,EAAAA,KAbiC,mBAazB;AACN,WAAOL,GAAP;;;AAGD,GAjBgC;;AAmBjCM,EAAAA,OAnBiC,qBAmBvB;AACR,WAAON,GAAP;;;AAGD,GAvBgC;;AAyBjCO,EAAAA,SAzBiC,uBAyBrB;AACV,WAAOP,GAAP;;;;AAID,GA9BgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  wrapper() {\n    return css`\n      display: flex;\n    `;\n  },\n  inner() {\n    return css`\n      display: flex;\n      width: 100%;\n    `;\n  },\n\n  fixed() {\n    return css`\n      position: fixed;\n    `;\n  },\n\n  stopped() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  container() {\n    return css`\n      flex: auto;\n      width: 100%;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Sticky.styles.ts"],"names":["memoizeStyle","getStyles","emotion","wrapper","css","inner","fixed","stopped","container"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,OADW,qBACD;AACR,eAAOD,OAAO,CAACE,GAAf;;;AAGD,OALU;AAMXC,MAAAA,KANW,mBAMH;AACN,eAAOH,OAAO,CAACE,GAAf;;;;AAID,OAXU;;AAaXE,MAAAA,KAbW,mBAaH;AACN,eAAOJ,OAAO,CAACE,GAAf;;;AAGD,OAjBU;;AAmBXG,MAAAA,OAnBW,qBAmBD;AACR,eAAOL,OAAO,CAACE,GAAf;;;AAGD,OAvBU;;AAyBXI,MAAAA,SAzBW,uBAyBC;AACV,eAAON,OAAO,CAACE,GAAf;;;;AAID,OA9BU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    wrapper() {\n      return emotion.css`\n        display: flex;\n      `;\n    },\n    inner() {\n      return emotion.css`\n        display: flex;\n        width: 100%;\n      `;\n    },\n\n    fixed() {\n      return emotion.css`\n        position: fixed;\n      `;\n    },\n\n    stopped() {\n      return emotion.css`\n        position: relative;\n      `;\n    },\n\n    container() {\n      return emotion.css`\n        flex: auto;\n        width: 100%;\n      `;\n    },\n  });\n"]}

package/components/Sticky/Sticky.styles.d.ts

@@ -1,4 +1,5 @@
-export declare const styles: {
+import type { Emotion } from '@emotion/css/create-instance';
+export declare const getStyles: (emotion: Emotion) => {
     wrapper(): string;
     inner(): string;
     fixed(): string;

package/components/Switcher/Switcher/Switcher.js

@@ -8,13 +8,13 @@ import PropTypes from 'prop-types';
 import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from "../../../lib/events/keyboard/identifiers";
 import { getButtonCorners, Group } from "../../Group";
 import { Button } from "../../Button";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
-import { styles } from "../Switcher.styles";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { getSwitcherTheme } from "../switcherTheme";
 import { mod } from "../helpers";
+import { getStyles } from "../Switcher.styles";
 /**
  * @deprecated use SizeProp
  */
@@ -195,6 +195,8 @@ export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
     };
 
     _this.getLabelSizeClassName = function () {
+      var styles = getStyles(_this.emotion);
+
       switch (_this.props.size) {
         case 'large':
           return styles.captionLarge(_this.theme);
@@ -216,18 +218,22 @@ export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = getSwitcherTheme(theme);
-      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-        value: _this2.theme
-      }, _this2.renderMain());
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = getSwitcherTheme(theme);
+        return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+          value: _this2.theme
+        }, _this2.renderMain());
+      });
     });
   };
 
   _proto.renderMain = function renderMain() {
-    var _cx;
+    var _this$emotion$cx;
 
-    var listClassName = cx((_cx = {}, _cx[styles.error(this.theme)] = !!this.props.error, _cx));
+    var styles = getStyles(this.emotion);
+    var listClassName = this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.error(this.theme)] = !!this.props.error, _this$emotion$cx));
     var inputProps = {
       type: 'checkbox',
       onKeyDown: this.handleKey,
@@ -235,7 +241,7 @@ export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
       onBlur: this._handleBlur,
       className: styles.input()
     };
-    var captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());
+    var captionClassName = this.emotion.cx(styles.caption(this.theme), this.getLabelSizeClassName());
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("div", {
@@ -251,7 +257,7 @@ export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
   };
 
   return Switcher;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Switcher', _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Switcher', _class2.displayName = 'Switcher', _class2.defaultProps = {
   role: 'switch'
 }, _class2.propTypes = {
   error: PropTypes.bool,