@skbkontur/react-ui 0.0.0-2eafa74fd6 → 0.0.0-30619a873c

package/cjs/components/SidePage/locale/locales/ru.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["componentsLocales","exports","closeButtonAriaLabel"],"sources":["ru.ts"],"sourcesContent":["import { SidePageLocale } from '../types';\n\nexport const componentsLocales: SidePageLocale = {\n  closeButtonAriaLabel: 'Закрыть модальное окно',\n};\n"],"mappings":";;AAEO,IAAMA,iBAAiC,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EAC/CE,oBAAoB,EAAE;AACxB,CAAC","ignoreList":[]}

package/cjs/components/SidePage/locale/types.d.ts

@@ -0,0 +1,3 @@
+export interface SidePageLocale {
+    closeButtonAriaLabel?: string;
+}

package/cjs/components/SidePage/locale/types.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;

package/cjs/components/SidePage/locale/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface SidePageLocale {\n  closeButtonAriaLabel?: string;\n}\n"],"mappings":"","ignoreList":[]}

package/cjs/components/SingleToast/SingleToast.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Toast, ToastProps } from '../Toast/Toast';
+/**
+ * `SingleToast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.
+ * Результат может быть положительным, отрицательным или нейтральным.
+ *
+ * Позволяет вызывать тосты с помощью статических методов.
+ * В отличие от статических методов из компонента 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;
+    render: () => React.JSX.Element;
+}

package/cjs/components/SingleToast/SingleToast.js

@@ -0,0 +1,31 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.SingleToast = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _Toast = require("../Toast/Toast");var _SingleToast;
+
+/**
+ * `SingleToast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.
+ * Результат может быть положительным, отрицательным или нейтральным.
+ *
+ * Позволяет вызывать тосты с помощью статических методов.
+ * В отличие от статических методов из компонента Toast их можно кастомизировать и они работают с `React@18`.
+ */var
+SingleToast = exports.SingleToast = /*#__PURE__*/function (_React$Component) {function SingleToast() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    render = function () {
+      return /*#__PURE__*/_react.default.createElement(_Toast.Toast, (0, _extends2.default)({ ref: SingleToast.ref }, _this.props));
+    };return _this;}(0, _inheritsLoose2.default)(SingleToast, _React$Component);return SingleToast;}(_react.default.Component);_SingleToast = SingleToast;SingleToast.__KONTUR_REACT_UI__ = 'SingleToast';SingleToast.displayName = 'SingleToast';SingleToast.ref = /*#__PURE__*/_react.default.createRef();SingleToast.push = function () {var _SingleToast$ref$curr;_SingleToast.close();for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}(_SingleToast$ref$curr = _SingleToast.ref.current) == null || _SingleToast$ref$curr.push.apply(_SingleToast$ref$curr, args);};SingleToast.close = function () {if (_react.default.version.search('18') === 0) {_reactDom.default.flushSync(function () {var _SingleToast$ref$curr2;return (_SingleToast$ref$curr2 = _SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr2.close();});} else {var _SingleToast$ref$curr3;(_SingleToast$ref$curr3 = _SingleToast.ref.current) == null || _SingleToast$ref$curr3.close();}};

package/cjs/components/SingleToast/SingleToast.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactDom","_Toast","_SingleToast","SingleToast","exports","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","render","default","createElement","Toast","_extends2","ref","props","_inheritsLoose2","React","Component","__KONTUR_REACT_UI__","displayName","createRef","push","_SingleToast$ref$curr","close","_len2","_key2","current","version","search","ReactDOM","flushSync","_SingleToast$ref$curr2","_SingleToast$ref$curr3"],"sources":["SingleToast.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Toast, ToastProps } from '../Toast/Toast';\n\n/**\n * `SingleToast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.\n * Результат может быть положительным, отрицательным или нейтральным.\n *\n * Позволяет вызывать тосты с помощью статических методов.\n * В отличие от статических методов из компонента Toast их можно кастомизировать и они работают с `React@18`.\n */\nexport class SingleToast extends React.Component<ToastProps> {\n  public static __KONTUR_REACT_UI__ = 'SingleToast';\n  public static displayName = 'SingleToast';\n\n  public static ref = React.createRef<Toast>();\n  public static push: typeof Toast.push = (...args) => {\n    SingleToast.close();\n    SingleToast.ref.current?.push(...args);\n  };\n  public static close: typeof Toast.close = () => {\n    if (React.version.search('18') === 0) {\n      ReactDOM.flushSync(() => SingleToast.ref.current?.close());\n    } else {\n      SingleToast.ref.current?.close();\n    }\n  };\n  render = () => {\n    return <Toast ref={SingleToast.ref} {...this.props} />;\n  };\n}\n"],"mappings":"iVAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;;AAEA,IAAAE,MAAA,GAAAF,OAAA,mBAAmD,IAAAG,YAAA;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA,GANA;AAOaC,WAAW,GAAAC,OAAA,CAAAD,WAAA,0BAAAE,gBAAA,YAAAF,YAAA,OAAAG,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;;;;;;;;;;;;;;;IAgBtBU,MAAM,GAAG,YAAM;MACb,oBAAOnB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACjB,MAAA,CAAAkB,KAAK,MAAAC,SAAA,CAAAH,OAAA,IAACI,GAAG,EAAElB,WAAW,CAACkB,GAAI,IAAKf,KAAA,CAAKgB,KAAK,CAAG,CAAC;IACxD,CAAC,QAAAhB,KAAA,MAAAiB,eAAA,CAAAN,OAAA,EAAAd,WAAA,EAAAE,gBAAA,SAAAF,WAAA,GAlB8BqB,cAAK,CAACC,SAAS,EAAAvB,YAAA,GAAnCC,WAAW,CAAXA,WAAW,CACRuB,mBAAmB,GAAG,aAAa,CADtCvB,WAAW,CAERwB,WAAW,GAAG,aAAa,CAF9BxB,WAAW,CAIRkB,GAAG,gBAAGG,cAAK,CAACI,SAAS,CAAQ,CAAC,CAJjCzB,WAAW,CAKR0B,IAAI,GAAsB,YAAa,KAAAC,qBAAA,CACnD3B,YAAW,CAAC4B,KAAK,CAAC,CAAC,CAAC,SAAAC,KAAA,GAAAxB,SAAA,CAAAC,MAAA,EADsBC,IAAI,OAAAC,KAAA,CAAAqB,KAAA,GAAAC,KAAA,MAAAA,KAAA,GAAAD,KAAA,EAAAC,KAAA,KAAJvB,IAAI,CAAAuB,KAAA,IAAAzB,SAAA,CAAAyB,KAAA,GAE9C,CAAAH,qBAAA,GAAA3B,YAAW,CAACkB,GAAG,CAACa,OAAO,aAAvBJ,qBAAA,CAAyBD,IAAI,CAAAf,KAAA,CAAAgB,qBAAA,EAAIpB,IAAI,CAAC,CACxC,CAAC,CARUP,WAAW,CASR4B,KAAK,GAAuB,YAAM,CAC9C,IAAIP,cAAK,CAACW,OAAO,CAACC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CACpCC,iBAAQ,CAACC,SAAS,CAAC,iBAAAC,sBAAA,SAAAA,sBAAA,GAAMpC,YAAW,CAACkB,GAAG,CAACa,OAAO,qBAAvBK,sBAAA,CAAyBR,KAAK,CAAC,CAAC,GAAC,CAC5D,CAAC,MAAM,KAAAS,sBAAA,CACL,CAAAA,sBAAA,GAAArC,YAAW,CAACkB,GAAG,CAACa,OAAO,aAAvBM,sBAAA,CAAyBT,KAAK,CAAC,CAAC,CAClC,CACF,CAAC","ignoreList":[]}

package/cjs/components/SingleToast/SingleToast.md

@@ -0,0 +1,36 @@
+`<SingleToast>` можно добавить в единственном месте в проекте, а статические методы будут всегда использовать последний отрендеренный экземпляр `<Toast>`.
+
+_На внешний вид этого примера влияет следующий пример_
+### Базовый пример
+```jsx harmony
+import { Button, SingleToast } from '@skbkontur/react-ui';
+
+<div>
+  <SingleToast />
+  <Button onClick={() => SingleToast.push('Статический тост')}>
+    Показать статический тост
+  </Button>
+</div>
+```
+
+### Кастомизация
+`<SingleToast>` можно кастомизировать с помощью переменных темы для `toast`.
+```jsx harmony
+import { Button, SingleToast, ThemeContext, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';
+
+const rand = () => "Пример жёлтого тоста № " + Math.round(Math.random() * 100).toString();
+
+const pushToast = () => {
+  SingleToast.push(rand(), {
+    label: "Cancel",
+    handler: () => SingleToast.push("Canceled")
+  });
+};
+
+<div>
+  <SingleToast theme={{ toastBg: '#f1c40f' }} />
+  <Button onClick={pushToast}>
+    Показать тост с жёлтым фоном
+  </Button>
+</div>
+```

package/cjs/components/SingleToast/__docs__/SingleToast.mdx

@@ -0,0 +1,28 @@
+import * as SingleToastStories from './SingleToast.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={SingleToastStories} />
+
+# SingleToast
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/popup-elements/toast/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A5203)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/SingleToast/index.d.ts

@@ -0,0 +1 @@
+export * from './SingleToast';

package/cjs/components/SingleToast/index.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;var _SingleToast = require("./SingleToast");Object.keys(_SingleToast).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _SingleToast[key]) return;exports[key] = _SingleToast[key];});

package/cjs/components/SingleToast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_SingleToast","require","Object","keys","forEach","key","exports"],"sources":["index.ts"],"sourcesContent":["export * from './SingleToast';\n"],"mappings":"uCAAA,IAAAA,YAAA,GAAAC,OAAA,kBAAAC,MAAA,CAAAC,IAAA,CAAAH,YAAA,EAAAI,OAAA,WAAAC,GAAA,OAAAA,GAAA,kBAAAA,GAAA,8BAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,YAAA,CAAAK,GAAA,UAAAC,OAAA,CAAAD,GAAA,IAAAL,YAAA,CAAAK,GAAA","ignoreList":[]}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+declare const types: readonly ["big", "mini", "normal"];
+export type SpinnerType = (typeof types)[number];
+export interface SpinnerProps extends CommonProps {
+    /** Задает подпись под спиннером.
+     * @default "Загрузка" */
+    caption?: React.ReactNode;
+    /** Переводит спиннер в "затемнённый режим".
+     * Цвет спиннера в "затемнённом режиме" определяется переменной `spinnerDimmedColor`. */
+    dimmed?: boolean;
+    /** Задает размер спиннера и текста.
+     * @default normal. */
+    type?: SpinnerType;
+    /** Уменьшает спиннер для вставки в инлайн элемент. При type = "big"|"normal" размер спиннера уменьшается. */
+    inline?: boolean;
+    /** Задает толщину спиннера. */
+    width?: number;
+    /** Задает цвет спиннера. Не работает с пропом dimmed. */
+    color?: React.CSSProperties['color'];
+}
+export declare const SpinnerDataTids: {
+    readonly root: "Spinner__root";
+};
+type DefaultProps = Required<Pick<SpinnerProps, 'type'>>;
+/**
+ * `Spinner` — это зацикленный индикатор, не отображающий прогресс выполнения задачи.
+ *
+ * Используйте `Spinner`, чтобы показать, что система выполняет команду, которую дал пользователь.
+ * Не применяйте `Spinner` для заполнения паузы при загрузке контента, для этого предназначен GlobalLoader.
+ *
+ * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент Loader.
+ */
+export declare class Spinner extends React.Component<SpinnerProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static propTypes: {
+        /**
+         * Текст рядом с мини-лоадером.
+         *
+         * 'Загрузка' - значение по-умолчанию
+         */
+        caption: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        dimmed: PropTypes.Requireable<boolean>;
+        /**
+         * Тип спиннера: mini, normal, big
+         *
+         * Значение по-умолчанию - normal
+         *
+         * Spinner.types - все доступные типы
+         */
+        type: PropTypes.Requireable<"big" | "normal" | "mini">;
+    };
+    static defaultProps: DefaultProps;
+    private getProps;
+    static Types: Record<SpinnerType, SpinnerType>;
+    private theme;
+    private setRootNode;
+    render(): React.JSX.Element;
+    private renderMain;
+    private renderSpinner;
+    private renderCaption;
+}
+export {};

package/cjs/components/Spinner/Spinner.js

@@ -0,0 +1,143 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;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 _ThemeContext = require("../../lib/theming/ThemeContext");
+var _SpinnerIcon = require("../../internal/SpinnerIcon/SpinnerIcon");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _Spinner2 = require("./Spinner.styles");var _class, _Spinner;
+
+var types = ['big', 'mini', 'normal'];
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var SpinnerDataTids = exports.SpinnerDataTids = {
+  root: 'Spinner__root'
+};
+
+
+
+/**
+ * `Spinner` — это зацикленный индикатор, не отображающий прогресс выполнения задачи.
+ *
+ * Используйте `Spinner`, чтобы показать, что система выполняет команду, которую дал пользователь.
+ * Не применяйте `Spinner` для заполнения паузы при загрузке контента, для этого предназначен GlobalLoader.
+ *
+ * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент Loader.
+ */var
+
+Spinner = exports.Spinner = (0, _rootNode.rootNode)(_class = (_Spinner = /*#__PURE__*/function (_React$Component) {function Spinner() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(Spinner.defaultProps);_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    renderSpinner = function (type, dimmed, inline) {var _cx;
+      return /*#__PURE__*/(
+        _react.default.createElement(_SpinnerIcon.SpinnerIcon, {
+          size: type,
+          className: (0, _Emotion.cx)((_cx = {}, _cx[
+          _Spinner2.styles.circle(_this.theme)] = !dimmed && !_this.props.color, _cx[
+          _Spinner2.styles.circleDimmedColor(_this.theme)] = dimmed, _cx[
+          _Spinner2.styles.circleWithoutColorAnimation()] = dimmed || !!_this.props.color, _cx)
+          ),
+          dimmed: dimmed,
+          width: _this.props.width,
+          color: _this.props.color,
+          inline: inline }
+        ));
+
+    };_this.
+
+    renderCaption = function (type, caption) {return /*#__PURE__*/(
+        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Spinner2.styles[type](_this.theme), _Spinner2.styles.captionColor(_this.theme)) }, caption));};return _this;}(0, _inheritsLoose2.default)(Spinner, _React$Component);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 ? null : _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: _Spinner2.styles.spinner() }, /*#__PURE__*/_react.default.createElement("span", { className: _Spinner2.styles.inner() }, this.renderSpinner(type, dimmed, inline)), caption && this.renderCaption(type, caption)));};return Spinner;}(_react.default.Component), _Spinner.__KONTUR_REACT_UI__ = 'Spinner', _Spinner.displayName = 'Spinner', _Spinner.propTypes = { /**
+   * Текст рядом с мини-лоадером.
+   *
+   * 'Загрузка' - значение по-умолчанию
+   */caption: _propTypes.default.node, dimmed: _propTypes.default.bool, /**
+   * Тип спиннера: mini, normal, big
+   *
+   * Значение по-умолчанию - normal
+   *
+   * Spinner.types - все доступные типы
+   */type: _propTypes.default.oneOf(types) }, _Spinner.defaultProps = { type: 'normal' }, _Spinner.Types = Object.assign.apply(Object, [{}].concat(types.map(function (type) {var _ref;return _ref = {}, _ref[type] = type, _ref;}))), _Spinner)) || _class;

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_ThemeContext","_SpinnerIcon","_CommonWrapper","_Emotion","_rootNode","_createPropsGetter","_Spinner2","_class","_Spinner","types","SpinnerDataTids","exports","root","Spinner","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","renderSpinner","type","dimmed","inline","_cx","default","createElement","SpinnerIcon","size","className","cx","styles","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","_inheritsLoose2","_proto","prototype","render","_this2","ThemeContext","Consumer","renderMain","_this$props","_this$props$caption","CommonWrapper","_extends2","rootNodeRef","setRootNode","spinner","inner","React","Component","__KONTUR_REACT_UI__","displayName","propTypes","PropTypes","node","bool","oneOf","Types","Object","assign","map","_ref"],"sources":["Spinner.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/SpinnerIcon/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';\n\nconst types = ['big', 'mini', 'normal'] as const;\n\nexport type SpinnerType = (typeof types)[number];\n\nexport interface SpinnerProps extends CommonProps {\n  /** Задает подпись под спиннером.\n   * @default \"Загрузка\" */\n  caption?: React.ReactNode;\n\n  /** Переводит спиннер в \"затемнённый режим\".\n   * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`. */\n  dimmed?: boolean;\n\n  /** Задает размер спиннера и текста.\n   * @default normal. */\n  type?: SpinnerType;\n\n  /** Уменьшает спиннер для вставки в инлайн элемент. При type = \"big\"|\"normal\" размер спиннера уменьшается. */\n  inline?: boolean;\n\n  /** Задает толщину спиннера. */\n  width?: number;\n\n  /** Задает цвет спиннера. Не работает с пропом dimmed. */\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` — это зацикленный индикатор, не отображающий прогресс выполнения задачи.\n *\n * Используйте `Spinner`, чтобы показать, что система выполняет команду, которую дал пользователь.\n * Не применяйте `Spinner` для заполнения паузы при загрузке контента, для этого предназначен GlobalLoader.\n *\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент Loader.\n */\n@rootNode\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 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 = null, 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"],"mappings":"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","ignoreList":[]}

package/cjs/components/Spinner/Spinner.md

@@ -0,0 +1,36 @@
+### Базовый пример
+```jsx harmony
+import { Gapped, Spinner } from '@skbkontur/react-ui';
+
+const reactNodeCaption = (
+  <div>
+    <Spinner type="mini" caption={null} /> <span style={{ color: 'tomato', fontSize: '1.3em' }}>З</span>
+    агрузка
+  </div>
+);
+
+<Gapped>
+  <Spinner type="big" caption="big" />
+  <Spinner type="normal" caption="normal" />
+  <Spinner type="mini" caption="mini" />
+  <Spinner type="mini" dimmed caption="mini dimmed" />
+  <Spinner type="big" caption={reactNodeCaption} />
+  <Spinner type="big" caption="custom" width={8} color={'#538A1B'}/>
+</Gapped>;
+```
+
+### Локали по умолчанию
+
+```typescript static
+interface SpinnerLocale {
+  loading?: React.ReactNode;
+}
+
+const ru_RU = {
+  loading: 'Загрузка',
+};
+
+const en_GB = {
+  loading: 'Loading',
+};
+```

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

@@ -0,0 +1,16 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    circle(t: Theme): string;
+    circleDimmedColor(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

@@ -0,0 +1,112 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;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, _templateObject11, _templateObject12, _templateObject13;
+
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  circle: function circle(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      stroke: ", ";\n\n      ", "\n    "])),
+    t.spinnerColor,
+
+    !_client.isIE11 && "\n          animation: " +
+
+    _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        ");
+
+
+  },
+  circleDimmedColor: function circleDimmedColor(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      stroke: ", ";\n    "])),
+    t.spinnerDimmedColor);
+
+  },
+  circleWithoutColorAnimation: function circleWithoutColorAnimation() {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "\n    "])),
+    !_client.isIE11 && "\n          animation: " +
+
+    _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        ");
+
+
+  },
+
+  captionColor: function captionColor(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.spinnerCaptionColor);
+
+  },
+
+  inline: function inline() {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: inherit;\n      line-height: inherit;\n    "])));
+
+
+
+  },
+
+  mini: function mini(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
+    t.spinnerCaptionGapSmall,
+    t.spinnerFontSizeSmall,
+    t.spinnerLineHeightSmall);
+
+  },
+
+  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)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])),
+
+    t.spinnerFontSizeMedium,
+    t.spinnerLineHeightMedium,
+    t.spinnerCaptionGapMedium);
+
+  },
+
+  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)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])),
+
+    t.spinnerFontSizeLarge,
+    t.spinnerLineHeightLarge,
+    t.spinnerCaptionGapLarge);
+
+  },
+
+  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)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    "])));
+
+
+
+
+  },
+
+  inner: function inner() {
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
+
+
+  }
+});

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

@@ -0,0 +1 @@
+{"version":3,"names":["_Emotion","require","_AnimationKeyframes","_client","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","styles","exports","memoizeStyle","circle","t","css","_taggedTemplateLiteralLoose2","default","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"],"sources":["Spinner.styles.ts"],"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"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,25 @@
+export declare class SpinnerFallbackAnimationRunner {
+    private animations;
+    private FPS;
+    private interval;
+    constructor(animations: Animation[], FPS: number);
+    start: () => void;
+    stop: () => void;
+}
+declare class Animation {
+    private duration;
+    private onProgress;
+    private onFinish?;
+    private startTime;
+    private isFinished;
+    constructor(duration: number, onProgress: (progress: number) => void, onFinish?: ((animation: Animation) => void) | undefined);
+    step: () => void;
+    reset: () => void;
+    finish: () => void;
+    start: () => void;
+}
+export declare const createOffsetAnimation: (from: number, to: number, duration: number, setStyleProperty: CSSStyleDeclaration['setProperty'], units?: string) => Animation;
+export declare const createLengthAnimation: (from: number[], to: number[], duration: number, setStyleProperty: CSSStyleDeclaration['setProperty'], units?: string) => Animation;
+export declare const createColorAnimation: (colors: string[], duration: number, setStyleProperty: CSSStyleDeclaration['setProperty']) => Animation;
+export declare const createRotationAnimation: (from: number, to: number, duration: number, setStyleProperty: CSSStyleDeclaration['setProperty'], units?: string) => Animation;
+export {};