@skbkontur/react-ui 0.0.0-b08da15166 → 0.0.0-b5a1896fa9

package/cjs/components/Spinner/Spinner.d.ts

@@ -1,16 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
-declare const types: Record<SpinnerType, SpinnerType>;
-export declare type SpinnerType = 'mini' | 'normal' | 'big';
+declare const types: readonly ["big", "mini", "normal"];
+export declare type SpinnerType = typeof types[number];
 export interface SpinnerProps extends CommonProps {
+    /**
+     * Подпись под спиннером
+     */
     caption?: React.ReactNode;
+    /**
+     * Переводит спиннер в "затемнённый режим"
+     *
+     * Цвет спиннера в "затемнённом режиме" определяется переменной `spinnerDimmedColor`
+     */
     dimmed?: boolean;
     /**
-     * Тип спиннера
+     * Размер спиннера и текста
+     *
      * @default normal
      */
-    type: SpinnerType;
+    type?: SpinnerType;
     inline?: boolean;
     /**
      * Толщина спиннера
@@ -21,8 +30,12 @@ export interface SpinnerProps extends CommonProps {
      */
     color?: React.CSSProperties['color'];
 }
+export declare const SpinnerDataTids: {
+    readonly root: "Spinner__root";
+};
+declare type DefaultProps = Required<Pick<SpinnerProps, 'type'>>;
 /**
- * DRAFT - инлайн-лоадер
+ * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)
  */
 export declare class Spinner extends React.Component<SpinnerProps> {
     static __KONTUR_REACT_UI__: string;
@@ -41,10 +54,11 @@ export declare class Spinner extends React.Component<SpinnerProps> {
          *
          * Spinner.types - все доступные типы
          */
-        type: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<"big" | "normal" | "mini">;
     };
-    static defaultProps: SpinnerProps;
-    static Types: typeof types;
+    static defaultProps: DefaultProps;
+    private getProps;
+    static Types: Record<SpinnerType, SpinnerType>;
     private theme;
     private readonly locale;
     private setRootNode;

package/cjs/components/Spinner/Spinner.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Spinner = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SpinnerDataTids = exports.Spinner = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _decorators = require("../../lib/locale/decorators");
@@ -8,14 +8,12 @@ var _SpinnerIcon = require("../../internal/icons/SpinnerIcon");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
 
 var _Spinner = require("./Spinner.styles");
 var _locale = require("./locale");var _dec, _class, _class2, _temp;
 
-var types = {
-  big: 'big',
-  mini: 'mini',
-  normal: 'normal' };
+var types = ['big', 'mini', 'normal'];
 
 
 
@@ -36,11 +34,25 @@ var types = {
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+var SpinnerDataTids = {
+  root: 'Spinner__root' };exports.SpinnerDataTids = SpinnerDataTids;
+
 
 
 
 /**
- * DRAFT - инлайн-лоадер
+ * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)
  */var
 
 
@@ -72,6 +84,9 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(Spinner.defaultProps);_this.
+
+
 
 
 
@@ -108,7 +123,7 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
           className: (0, _Emotion.cx)((_cx = {}, _cx[
           _Spinner.styles.circle(_this.theme)] = !dimmed && !_this.props.color, _cx[
           _Spinner.styles.circleDimmedColor(_this.theme)] = dimmed, _cx[
-          _Spinner.styles.circleWithoutColorAnimation(_this.theme)] = dimmed || !!_this.props.color, _cx)),
+          _Spinner.styles.circleWithoutColorAnimation()] = dimmed || !!_this.props.color, _cx)),
 
           dimmed: dimmed,
           width: _this.props.width,
@@ -119,7 +134,7 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
     };_this.
 
     renderCaption = function (type, caption) {return /*#__PURE__*/(
-        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Spinner.styles[type](_this.theme), _Spinner.styles.captionColor(_this.theme)) }, caption));};return _this;}var _proto = Spinner.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$props = this.props,type = _this$props.type,_this$props$caption = _this$props.caption,caption = _this$props$caption === void 0 ? this.locale.loading : _this$props$caption,dimmed = _this$props.dimmed,inline = _this$props.inline;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { className: _Spinner.styles.spinner() }, /*#__PURE__*/_react.default.createElement("span", { className: _Spinner.styles.inner() }, this.renderSpinner(type, dimmed, inline)), caption && this.renderCaption(type, caption)));};return Spinner;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.propTypes = { /**
+        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Spinner.styles[type](_this.theme), _Spinner.styles.captionColor(_this.theme)) }, caption));};return _this;}var _proto = Spinner.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$props = this.props,_this$props$caption = _this$props.caption,caption = _this$props$caption === void 0 ? this.locale.loading : _this$props$caption,dimmed = _this$props.dimmed,inline = _this$props.inline;var type = this.getProps().type;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SpinnerDataTids.root, className: _Spinner.styles.spinner() }, /*#__PURE__*/_react.default.createElement("span", { className: _Spinner.styles.inner() }, this.renderSpinner(type, dimmed, inline)), caption && this.renderCaption(type, caption)));};return Spinner;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.propTypes = { /**
    * Текст рядом с мини-лоадером.
    *
    * 'Загрузка' - значение по-умолчанию
@@ -129,4 +144,4 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
    * Значение по-умолчанию - normal
    *
    * Spinner.types - все доступные типы
-   */type: _propTypes.default.oneOf(Object.keys(types)) }, _class2.defaultProps = { type: 'normal' }, _class2.Types = types, _temp)) || _class) || _class);exports.Spinner = Spinner;
+   */type: _propTypes.default.oneOf(types) }, _class2.defaultProps = { type: 'normal' }, _class2.Types = Object.assign.apply(Object, [{}].concat(types.map(function (type) {var _ref;return _ref = {}, _ref[type] = type, _ref;}))), _temp)) || _class) || _class);exports.Spinner = Spinner;

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

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.tsx"],"names":["types","big","mini","normal","Spinner","SpinnerLocaleHelper","rootNode","renderSpinner","type","dimmed","inline","styles","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","locale","loading","setRootNode","spinner","inner","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","node","bool","oneOf","Object","keys","defaultProps","Types"],"mappings":"qUAAA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,kC;;AAEA,IAAMA,KAAuC,GAAG;AAC9CC,EAAAA,GAAG,EAAE,KADyC;AAE9CC,EAAAA,IAAI,EAAE,MAFwC;AAG9CC,EAAAA,MAAM,EAAE,QAHsC,EAAhD;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACA;AACA,G;;;;AAIaC,O,WADZ,wBAAO,SAAP,EAAkBC,2BAAlB,C,MADAC,kB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DSC,IAAAA,a,GAAgB,UAACC,IAAD,EAAoBC,MAApB,EAAsCC,MAAtC,EAA2D;AACjF;AACE,qCAAC,wBAAD;AACE,UAAA,IAAI,EAAEF,IADR;AAEE,UAAA,SAAS,EAAE;AACRG,0BAAOC,MAAP,CAAc,MAAKC,KAAnB,CADQ,IACoB,CAACJ,MAAD,IAAW,CAAC,MAAKK,KAAL,CAAWC,KAD3C;AAERJ,0BAAOK,iBAAP,CAAyB,MAAKH,KAA9B,CAFQ,IAE+BJ,MAF/B;AAGRE,0BAAOM,2BAAP,CAAmC,MAAKJ,KAAxC,CAHQ,IAGyCJ,MAAM,IAAI,CAAC,CAAC,MAAKK,KAAL,CAAWC,KAHhE,OAFb;;AAOE,UAAA,MAAM,EAAEN,MAPV;AAQE,UAAA,KAAK,EAAE,MAAKK,KAAL,CAAWI,KARpB;AASE,UAAA,KAAK,EAAE,MAAKJ,KAAL,CAAWC,KATpB;AAUE,UAAA,MAAM,EAAEL,MAVV,GADF;;;AAcD,K;;AAEOS,IAAAA,a,GAAgB,UAACX,IAAD,EAAoBY,OAApB;AACtB,+CAAM,SAAS,EAAE,iBAAGT,gBAAOH,IAAP,EAAa,MAAKK,KAAlB,CAAH,EAA6BF,gBAAOU,YAAP,CAAoB,MAAKR,KAAzB,CAA7B,CAAjB,IAAiFO,OAAjF,CADsB,G,qDAzCjBE,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACT,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACU,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,CACnB,kBAAgE,KAAKT,KAArE,CAAQN,IAAR,eAAQA,IAAR,mCAAcY,OAAd,CAAcA,OAAd,oCAAwB,KAAKI,MAAL,CAAYC,OAApC,uBAA6ChB,MAA7C,eAA6CA,MAA7C,CAAqDC,MAArD,eAAqDA,MAArD,CAEA,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKgB,WAAjC,IAAkD,KAAKZ,KAAvD,gBACE,sCAAK,SAAS,EAAEH,gBAAOgB,OAAP,EAAhB,iBACE,uCAAM,SAAS,EAAEhB,gBAAOiB,KAAP,EAAjB,IAAkC,KAAKrB,aAAL,CAAmBC,IAAnB,EAAyBC,MAAzB,EAAiCC,MAAjC,CAAlC,CADF,EAEGU,OAAO,IAAI,KAAKD,aAAL,CAAmBX,IAAnB,EAAyBY,OAAzB,CAFd,CADF,CADF,CAQD,C,kBAtD0BS,eAAMC,S,WACnBC,mB,GAAsB,S,UAEtBC,S,GAAY,EACxB;AACJ;AACA;AACA;AACA,KACIZ,OAAO,EAAEa,mBAAUC,IANK,EAQxBzB,MAAM,EAAEwB,mBAAUE,IARM,EAUxB;AACJ;AACA;AACA;AACA;AACA;AACA,KACI3B,IAAI,EAAEyB,mBAAUG,KAAV,CAAgBC,MAAM,CAACC,IAAP,CAAYtC,KAAZ,CAAhB,CAjBkB,E,UAoBZuC,Y,GAA6B,EACzC/B,IAAI,EAAE,QADmC,E,UAI7BgC,K,GAAsBxC,K","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';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types: Record<SpinnerType, SpinnerType> = {\n  big: 'big',\n  mini: 'mini',\n  normal: 'normal',\n};\n\nexport type SpinnerType = 'mini' | 'normal' | 'big';\n\nexport interface SpinnerProps extends CommonProps {\n  caption?: React.ReactNode;\n  dimmed?: boolean;\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\n/**\n * DRAFT - инлайн-лоадер\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(Object.keys(types)),\n  };\n\n  public static defaultProps: SpinnerProps = {\n    type: 'normal',\n  };\n\n  public static Types: typeof types = types;\n  private theme!: Theme;\n  private readonly locale!: SpinnerLocale;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { type, caption = this.locale.loading, dimmed, inline } = this.props;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div 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(this.theme)]: 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":["types","SpinnerDataTids","root","Spinner","SpinnerLocaleHelper","rootNode","getProps","defaultProps","renderSpinner","type","dimmed","inline","styles","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","locale","loading","setRootNode","spinner","inner","React","Component","__KONTUR_REACT_UI__","propTypes","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';\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\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { caption = this.locale.loading, 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"]}

package/cjs/components/Spinner/Spinner.md

@@ -4,7 +4,7 @@ import { Gapped, Spinner } from '@skbkontur/react-ui';
 const reactNodeCaption = (
   <div>
     <Spinner type="mini" caption={null} /> <span style={{ color: 'tomato', fontSize: '1.3em' }}>З</span>
-    агрузка ...
+    агрузка
   </div>
 );
 

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

@@ -2,12 +2,15 @@ import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     circle(t: Theme): string;
     circleDimmedColor(t: Theme): string;
-    circleWithoutColorAnimation(t: Theme): string;
+    circleWithoutColorAnimation(): string;
     captionColor(t: Theme): string;
     inline(): string;
     mini(t: Theme): string;
+    small(t: Theme): string;
     normal(t: Theme): string;
+    medium(t: Theme): string;
     big(t: Theme): string;
+    large(t: Theme): string;
     spinner(): string;
     inner(): string;
 };

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

@@ -1,7 +1,7 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
 var _AnimationKeyframes = require("../../lib/theming/AnimationKeyframes");
-var _client = require("../../lib/client");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _client = require("../../lib/client");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
 var styles = (0, _Emotion.memoizeStyle)({
   circle: function circle(t) {
@@ -10,9 +10,9 @@ var styles = (0, _Emotion.memoizeStyle)({
 
     !_client.isIE11 && "\n          animation: " +
 
-    _AnimationKeyframes.AnimationKeyframes.spinnerCircleOffset(t) + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            " +
-    _AnimationKeyframes.AnimationKeyframes.spinnerCircleLength(t) + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            " +
-    _AnimationKeyframes.AnimationKeyframes.spinnerCircleRotate(t) + " 2s linear infinite,\n            " +
+    _AnimationKeyframes.AnimationKeyframes.spinnerCircleOffset() + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            " +
+    _AnimationKeyframes.AnimationKeyframes.spinnerCircleLength() + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            " +
+    _AnimationKeyframes.AnimationKeyframes.spinnerCircleRotate() + " 2s linear infinite,\n            " +
     _AnimationKeyframes.AnimationKeyframes.spinnerColor(t) + " 6s ease-in-out infinite;\n        ");
 
 
@@ -22,13 +22,13 @@ var styles = (0, _Emotion.memoizeStyle)({
     t.spinnerDimmedColor);
 
   },
-  circleWithoutColorAnimation: function circleWithoutColorAnimation(t) {
+  circleWithoutColorAnimation: function circleWithoutColorAnimation() {
     return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "\n    "])),
     !_client.isIE11 && "\n          animation: " +
 
-    _AnimationKeyframes.AnimationKeyframes.spinnerCircleOffset(t) + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          " +
-    _AnimationKeyframes.AnimationKeyframes.spinnerCircleLength(t) + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          " +
-    _AnimationKeyframes.AnimationKeyframes.spinnerCircleRotate(t) + " 2s linear infinite;\n        ");
+    _AnimationKeyframes.AnimationKeyframes.spinnerCircleOffset() + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          " +
+    _AnimationKeyframes.AnimationKeyframes.spinnerCircleLength() + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          " +
+    _AnimationKeyframes.AnimationKeyframes.spinnerCircleRotate() + " 2s linear infinite;\n        ");
 
 
   },
@@ -54,8 +54,16 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
 
+  small: function small(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
+    t.spinnerCaptionMarginSmall,
+    t.spinnerFontSizeSmall,
+    t.spinnerLineHeightSmall);
+
+  },
+
   normal: function normal(t) {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])),
 
     t.spinnerFontSizeMedium,
     t.spinnerLineHeightMedium,
@@ -63,8 +71,16 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
 
+  medium: function medium(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
+    t.spinnerCaptionMarginMedium,
+    t.spinnerFontSizeMedium,
+    t.spinnerLineHeightMedium);
+
+  },
+
   big: function big(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])),
 
     t.spinnerFontSizeLarge,
     t.spinnerLineHeightLarge,
@@ -72,8 +88,16 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
 
+  large: function large(t) {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: ", ";\n      line-height: ", ";\n      margin: ", ";\n    "])),
+    t.spinnerFontSizeLarge,
+    t.spinnerLineHeightLarge,
+    t.spinnerCaptionMarginLarge);
+
+  },
+
   spinner: function spinner() {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    "])));
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    "])));
 
 
 
@@ -81,7 +105,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   inner: function inner() {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
 
 
   } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.styles.ts"],"names":["styles","circle","t","css","spinnerColor","isIE11","AnimationKeyframes","spinnerCircleOffset","spinnerCircleLength","spinnerCircleRotate","circleDimmedColor","spinnerDimmedColor","circleWithoutColorAnimation","captionColor","spinnerCaptionColor","inline","mini","spinnerCaptionGapSmall","spinnerFontSizeSmall","spinnerLineHeightSmall","normal","spinnerFontSizeMedium","spinnerLineHeightMedium","spinnerCaptionGapMedium","big","spinnerFontSizeLarge","spinnerLineHeightLarge","spinnerCaptionGapLarge","spinner","inner"],"mappings":"4QAAA;;AAEA;AACA,0C;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,MADiC,kBAC1BC,CAD0B,EAChB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACE,YADd;;AAGI,KAACC,cAAD;;AAEeC,2CAAmBC,mBAAnB,CAAuCL,CAAvC,CAFf;AAGMI,2CAAmBE,mBAAnB,CAAuCN,CAAvC,CAHN;AAIMI,2CAAmBG,mBAAnB,CAAuCP,CAAvC,CAJN;AAKMI,2CAAmBF,YAAnB,CAAgCF,CAAhC,CALN,wCAHJ;;;AAWD,GAbgC;AAcjCQ,EAAAA,iBAdiC,6BAcfR,CAde,EAcL;AAC1B,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACS,kBADd;;AAGD,GAlBgC;AAmBjCC,EAAAA,2BAnBiC,uCAmBLV,CAnBK,EAmBK;AACpC,eAAOC,YAAP;AACI,KAACE,cAAD;;AAEeC,2CAAmBC,mBAAnB,CAAuCL,CAAvC,CAFf;AAGII,2CAAmBE,mBAAnB,CAAuCN,CAAvC,CAHJ;AAIII,2CAAmBG,mBAAnB,CAAuCP,CAAvC,CAJJ,mCADJ;;;AAQD,GA5BgC;;AA8BjCW,EAAAA,YA9BiC,wBA8BpBX,CA9BoB,EA8BV;AACrB,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACY,mBADb;;AAGD,GAlCgC;;AAoCjCC,EAAAA,MApCiC,oBAoCxB;AACP,eAAOZ,YAAP;;;;AAID,GAzCgC;;AA2CjCa,EAAAA,IA3CiC,gBA2C5Bd,CA3C4B,EA2ClB;AACb,eAAOC,YAAP;AACiBD,IAAAA,CAAC,CAACe,sBADnB;AAEef,IAAAA,CAAC,CAACgB,oBAFjB;AAGiBhB,IAAAA,CAAC,CAACiB,sBAHnB;;AAKD,GAjDgC;;AAmDjCC,EAAAA,MAnDiC,kBAmD1BlB,CAnD0B,EAmDhB;AACf,eAAOC,YAAP;;AAEeD,IAAAA,CAAC,CAACmB,qBAFjB;AAGiBnB,IAAAA,CAAC,CAACoB,uBAHnB;AAIgBpB,IAAAA,CAAC,CAACqB,uBAJlB;;AAMD,GA1DgC;;AA4DjCC,EAAAA,GA5DiC,eA4D7BtB,CA5D6B,EA4DnB;AACZ,eAAOC,YAAP;;AAEeD,IAAAA,CAAC,CAACuB,oBAFjB;AAGiBvB,IAAAA,CAAC,CAACwB,sBAHnB;AAIgBxB,IAAAA,CAAC,CAACyB,sBAJlB;;AAMD,GAnEgC;;AAqEjCC,EAAAA,OArEiC,qBAqEvB;AACR,eAAOzB,YAAP;;;;;AAKD,GA3EgC;;AA6EjC0B,EAAAA,KA7EiC,mBA6EzB;AACN,eAAO1B,YAAP;;;AAGD,GAjFgC,EAAb,CAAf,C","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(t)} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            ${AnimationKeyframes.spinnerCircleLength(t)} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            ${AnimationKeyframes.spinnerCircleRotate(t)} 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(t: Theme) {\n    return css`\n      ${!isIE11 &&\n      `\n          animation: ${AnimationKeyframes.spinnerCircleOffset(t)} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          ${AnimationKeyframes.spinnerCircleLength(t)} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          ${AnimationKeyframes.spinnerCircleRotate(t)} 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  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  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  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":["styles","circle","t","css","spinnerColor","isIE11","AnimationKeyframes","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":"4QAAA;;AAEA;AACA,0C;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,MADiC,kBAC1BC,CAD0B,EAChB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACE,YADd;;AAGI,KAACC,cAAD;;AAEeC,2CAAmBC,mBAAnB,EAFf;AAGMD,2CAAmBE,mBAAnB,EAHN;AAIMF,2CAAmBG,mBAAnB,EAJN;AAKMH,2CAAmBF,YAAnB,CAAgCF,CAAhC,CALN,wCAHJ;;;AAWD,GAbgC;AAcjCQ,EAAAA,iBAdiC,6BAcfR,CAde,EAcL;AAC1B,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACS,kBADd;;AAGD,GAlBgC;AAmBjCC,EAAAA,2BAnBiC,yCAmBH;AAC5B,eAAOT,YAAP;AACI,KAACE,cAAD;;AAEeC,2CAAmBC,mBAAnB,EAFf;AAGID,2CAAmBE,mBAAnB,EAHJ;AAIIF,2CAAmBG,mBAAnB,EAJJ,mCADJ;;;AAQD,GA5BgC;;AA8BjCI,EAAAA,YA9BiC,wBA8BpBX,CA9BoB,EA8BV;AACrB,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACY,mBADb;;AAGD,GAlCgC;;AAoCjCC,EAAAA,MApCiC,oBAoCxB;AACP,eAAOZ,YAAP;;;;AAID,GAzCgC;;AA2CjCa,EAAAA,IA3CiC,gBA2C5Bd,CA3C4B,EA2ClB;AACb,eAAOC,YAAP;AACiBD,IAAAA,CAAC,CAACe,sBADnB;AAEef,IAAAA,CAAC,CAACgB,oBAFjB;AAGiBhB,IAAAA,CAAC,CAACiB,sBAHnB;;AAKD,GAjDgC;;AAmDjCC,EAAAA,KAnDiC,iBAmD3BlB,CAnD2B,EAmDjB;AACd,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACmB,yBADd;AAEenB,IAAAA,CAAC,CAACgB,oBAFjB;AAGiBhB,IAAAA,CAAC,CAACiB,sBAHnB;;AAKD,GAzDgC;;AA2DjCG,EAAAA,MA3DiC,kBA2D1BpB,CA3D0B,EA2DhB;AACf,eAAOC,YAAP;;AAEeD,IAAAA,CAAC,CAACqB,qBAFjB;AAGiBrB,IAAAA,CAAC,CAACsB,uBAHnB;AAIgBtB,IAAAA,CAAC,CAACuB,uBAJlB;;AAMD,GAlEgC;;AAoEjCC,EAAAA,MApEiC,kBAoE1BxB,CApE0B,EAoEhB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACyB,0BADd;AAEezB,IAAAA,CAAC,CAACqB,qBAFjB;AAGiBrB,IAAAA,CAAC,CAACsB,uBAHnB;;AAKD,GA1EgC;;AA4EjCI,EAAAA,GA5EiC,eA4E7B1B,CA5E6B,EA4EnB;AACZ,eAAOC,YAAP;;AAEeD,IAAAA,CAAC,CAAC2B,oBAFjB;AAGiB3B,IAAAA,CAAC,CAAC4B,sBAHnB;AAIgB5B,IAAAA,CAAC,CAAC6B,sBAJlB;;AAMD,GAnFgC;;AAqFjCC,EAAAA,KArFiC,iBAqF3B9B,CArF2B,EAqFjB;AACd,eAAOC,YAAP;AACeD,IAAAA,CAAC,CAAC2B,oBADjB;AAEiB3B,IAAAA,CAAC,CAAC4B,sBAFnB;AAGY5B,IAAAA,CAAC,CAAC+B,yBAHd;;AAKD,GA3FgC;;AA6FjCC,EAAAA,OA7FiC,qBA6FvB;AACR,eAAO/B,YAAP;;;;;AAKD,GAnGgC;;AAqGjCgC,EAAAA,KArGiC,mBAqGzB;AACN,eAAOhC,YAAP;;;AAGD,GAzGgC,EAAb,CAAf,C","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"]}

package/cjs/components/Sticky/Sticky.d.ts

@@ -2,13 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface StickyProps extends CommonProps {
+export interface StickyProps extends Omit<CommonProps, 'children'> {
     side: 'top' | 'bottom';
     /**
      * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии
      * @default 0
      */
-    offset: number;
+    offset?: number;
     getStop?: () => Nullable<HTMLElement>;
     children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
 }
@@ -21,6 +21,10 @@ export interface StickyState {
     stopped: boolean;
     relativeTop: number;
 }
+export declare const StickyDataTids: {
+    readonly root: "Sticky__root";
+};
+declare type DefaultProps = Required<Pick<StickyProps, 'offset'>>;
 export declare class Sticky extends React.Component<StickyProps, StickyState> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
@@ -35,9 +39,8 @@ export declare class Sticky extends React.Component<StickyProps, StickyState> {
         offset: PropTypes.Requireable<number>;
         side: PropTypes.Validator<string>;
     };
-    static defaultProps: {
-        offset: number;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: StickyState;
     private wrapper;
     private inner;
@@ -57,3 +60,4 @@ export declare class Sticky extends React.Component<StickyProps, StickyState> {
      */
     reflow: () => void;
 }
+export {};

package/cjs/components/Sticky/Sticky.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Sticky = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.StickyDataTids = exports.Sticky = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _shallowequal = _interopRequireDefault(require("shallowequal"));
 
@@ -10,10 +10,11 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 var _getDOMRect3 = require("../../lib/dom/getDOMRect");
+var _createPropsGetter = require("../../lib/createPropsGetter");
 
 var _Sticky = require("./Sticky.styles");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
-var MAX_REFLOW_RETRIES = 5;var
+var MAX_REFLOW_RETRIES = 5;
 
 
 
@@ -34,6 +35,12 @@ var MAX_REFLOW_RETRIES = 5;var
 
 
 
+
+
+var StickyDataTids = {
+  root: 'Sticky__root' };exports.StickyDataTids = StickyDataTids;var
+
+
 
 
 
@@ -58,6 +65,8 @@ Sticky = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(Sticky.defaultProps);_this.
+
     state = {
       fixed: false,
       deltaHeight: 0,
@@ -134,6 +143,7 @@ Sticky = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
 
 
+
 
 
     refWrapper = function (ref) {return _this.wrapper = ref;};_this.
@@ -158,8 +168,9 @@ Sticky = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
       }
       var _getDOMRect = (0, _getDOMRect3.getDOMRect)(_this.wrapper),top = _getDOMRect.top,bottom = _getDOMRect.bottom,left = _getDOMRect.left;
       var _getDOMRect2 = (0, _getDOMRect3.getDOMRect)(_this.inner),width = _getDOMRect2.width,height = _getDOMRect2.height;
-      var _this$props = _this.props,offset = _this$props.offset,getStop = _this$props.getStop,side = _this$props.side;
+      var _this$props = _this.props,getStop = _this$props.getStop,side = _this$props.side;
       var _this$state = _this.state,prevFixed = _this$state.fixed,_this$state$height = _this$state.height,prevHeight = _this$state$height === void 0 ? height : _this$state$height;
+      var offset = _this.getProps().offset;
       var fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;
 
       _this.setState({ fixed: fixed, left: left });
@@ -188,7 +199,7 @@ Sticky = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
           _this.setState({ relativeTop: relativeTop, deltaHeight: deltaHeight, stopped: stopped });
         }
       }
-    };return _this;}var _proto = Sticky.prototype;_proto.componentDidMount = function componentDidMount() {this.reflow();this.layoutSubscription = LayoutEvents.addListener(this.reflow);};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutSubscription.remove) {this.layoutSubscription.remove();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {if (!(0, _shallowequal.default)(prevProps, this.props) || !(0, _shallowequal.default)(prevState, this.state)) {if (this.reflowCounter < MAX_REFLOW_RETRIES) {LayoutEvents.emit();this.reflowCounter += 1;return;}}this.reflowCounter = 0;};_proto.render = function render() {var _cx;var children = this.props.children;var _this$props2 = this.props,side = _this$props2.side,offset = _this$props2.offset;var _this$state2 = this.state,fixed = _this$state2.fixed,stopped = _this$state2.stopped,relativeTop = _this$state2.relativeTop,deltaHeight = _this$state2.deltaHeight,width = _this$state2.width,height = _this$state2.height,left = _this$state2.left;var innerStyle = {};if (fixed) {if (stopped) {innerStyle.top = relativeTop;innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;} else {innerStyle.width = width;innerStyle[side] = offset;innerStyle.left = left;}}if ((0, _utils.isFunction)(children)) {children = children(fixed);}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { ref: this.refWrapper, className: _Sticky.styles.wrapper() }, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: "Sticky", applyZIndex: fixed, className: (0, _Emotion.cx)(_Sticky.styles.inner(), (_cx = {}, _cx[_Sticky.styles.fixed()] = fixed && !stopped, _cx[_Sticky.styles.stopped()] = stopped, _cx)), style: innerStyle, wrapperRef: this.refInner }, /*#__PURE__*/_react.default.createElement("div", { className: _Sticky.styles.container() }, children)), fixed && !stopped ? /*#__PURE__*/_react.default.createElement("div", { style: { width: width, height: height } }) : null));};return Sticky;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Sticky', _class2.propTypes = { children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]), /**
+    };return _this;}var _proto = Sticky.prototype;_proto.componentDidMount = function componentDidMount() {this.reflow();this.layoutSubscription = LayoutEvents.addListener(this.reflow);};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutSubscription.remove) {this.layoutSubscription.remove();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {if (!(0, _shallowequal.default)(prevProps, this.props) || !(0, _shallowequal.default)(prevState, this.state)) {if (this.reflowCounter < MAX_REFLOW_RETRIES) {LayoutEvents.emit();this.reflowCounter += 1;return;}}this.reflowCounter = 0;};_proto.render = function render() {var _cx;var children = this.props.children;var side = this.props.side;var offset = this.getProps().offset;var _this$state2 = this.state,fixed = _this$state2.fixed,stopped = _this$state2.stopped,relativeTop = _this$state2.relativeTop,deltaHeight = _this$state2.deltaHeight,width = _this$state2.width,height = _this$state2.height,left = _this$state2.left;var innerStyle = {};if (fixed) {if (stopped) {innerStyle.top = relativeTop;innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;} else {innerStyle.width = width;innerStyle[side] = offset;innerStyle.left = left;}}if ((0, _utils.isFunction)(children)) {children = children(fixed);}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": StickyDataTids.root, ref: this.refWrapper, className: _Sticky.styles.wrapper() }, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: "Sticky", applyZIndex: fixed, className: (0, _Emotion.cx)(_Sticky.styles.inner(), (_cx = {}, _cx[_Sticky.styles.fixed()] = fixed && !stopped, _cx[_Sticky.styles.stopped()] = stopped, _cx)), style: innerStyle, wrapperRef: this.refInner }, /*#__PURE__*/_react.default.createElement("div", { className: _Sticky.styles.container() }, children)), fixed && !stopped ? /*#__PURE__*/_react.default.createElement("div", { style: { width: width, height: height } }) : null));};return Sticky;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Sticky', _class2.propTypes = { children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]), /**
    * Функция, которая возвращает DOM-элемент, который нельзя пересекать.
    */getStop: _propTypes.default.func, /**
    * Отступ от границы в пикселях

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

@@ -1 +1 @@
-{"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","Sticky","rootNode","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","styles","container","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\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';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\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\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 = { offset: 0 };\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, offset } = this.props;\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 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    const { documentElement } = document;\n\n    if (!documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = window.innerHeight || documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left } = getDOMRect(this.wrapper);\n    const { width, height } = getDOMRect(this.inner);\n    const { offset, getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\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      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":["MAX_REFLOW_RETRIES","StickyDataTids","root","Sticky","rootNode","getProps","defaultProps","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","top","bottom","left","width","height","props","getStop","side","prevFixed","prevHeight","offset","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","styles","container","React","Component","__KONTUR_REACT_UI__","propTypes","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';\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    const { documentElement } = document;\n\n    if (!documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = window.innerHeight || documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left } = getDOMRect(this.wrapper);\n    const { width, 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      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/cjs/components/Switcher/Switcher.d.ts

@@ -1,13 +1,16 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-import { ButtonSize } from '../Button';
+import { ButtonProps, ButtonSize } from '../Button';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare type SwitcherSize = ButtonSize;
 declare type SwitcherItems = string | SwitcherItem;
-export interface SwitcherProps extends CommonProps {
+export declare const SwitcherDataTids: {
+    readonly root: "Switcher__root";
+};
+export interface SwitcherProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'> {
     /**
-     * Список строк или список элементов типа `{ label: string, value: string }`
+     * Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`
      */
     items: SwitcherItems[];
     value?: string;
@@ -17,16 +20,24 @@ export interface SwitcherProps extends CommonProps {
     /** Размер */
     size?: SwitcherSize;
     disabled?: boolean;
+    /**
+     * Функция для отрисовки элемента. Аргументы — `label`,
+     * `value`, `buttonProps`, `renderDefault`
+     */
+    renderItem?: (label: string, value: string, buttonProps: ButtonProps, renderDefault: () => React.ReactNode) => React.ReactNode;
 }
+declare type DefaultProps = Required<Pick<SwitcherProps, 'role'>>;
 export interface SwitcherState {
     focusedIndex: Nullable<number>;
 }
 interface SwitcherItem {
     label: string;
     value: string;
+    buttonProps?: Partial<ButtonProps>;
 }
 export declare class Switcher extends React.Component<SwitcherProps, SwitcherState> {
     static __KONTUR_REACT_UI__: string;
+    static defaultProps: DefaultProps;
     static propTypes: {
         error: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
@@ -37,6 +48,7 @@ export declare class Switcher extends React.Component<SwitcherProps, SwitcherSta
         caption: PropTypes.Requireable<string>;
         value: PropTypes.Requireable<string>;
         onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
+        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
     };
     state: SwitcherState;
     private theme;
@@ -46,12 +58,14 @@ export declare class Switcher extends React.Component<SwitcherProps, SwitcherSta
     private selectItem;
     private _extractPropsFromItem;
     private _extractValuesFromItems;
-    private move;
     private _focus;
     private handleKey;
+    private move;
+    private _getNextFocusedIndex;
     private _handleFocus;
     private _handleBlur;
     private _renderItems;
+    private renderDefaultItem;
     private getLabelSizeClassName;
 }
 export {};