@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

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

@@ -0,0 +1 @@
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","closeButtonAriaLabel"],"mappings":";;AAEO,IAAMA,iBAAiC,GAAG;AAC/CC,EAAAA,oBAAoB,EAAE,oBADyB,EAA1C,C","sourcesContent":["import { SidePageLocale } from '../types';\n\nexport const componentsLocales: SidePageLocale = {\n  closeButtonAriaLabel: 'Close modal window',\n};\n"]}

package/cjs/components/SidePage/locale/locales/ru.d.ts

@@ -0,0 +1,2 @@
+import { SidePageLocale } from '../types';
+export declare const componentsLocales: SidePageLocale;

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

@@ -0,0 +1,4 @@
+"use strict";exports.__esModule = true;exports.componentsLocales = void 0;
+
+var componentsLocales = {
+  closeButtonAriaLabel: 'Закрыть модальное окно' };exports.componentsLocales = componentsLocales;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","closeButtonAriaLabel"],"mappings":";;AAEO,IAAMA,iBAAiC,GAAG;AAC/CC,EAAAA,oBAAoB,EAAE,wBADyB,EAA1C,C","sourcesContent":["import { SidePageLocale } from '../types';\n\nexport const componentsLocales: SidePageLocale = {\n  closeButtonAriaLabel: 'Закрыть модальное окно',\n};\n"]}

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/SingleToast/SingleToast.d.ts

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

package/cjs/components/SingleToast/SingleToast.js

@@ -0,0 +1,23 @@
+"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");
+
+/**
+ * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.
+ */var
+SingleToast = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(SingleToast, _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;}return SingleToast;}(_react.default.Component);exports.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 ? void 0 : _SingleToast$ref$curr.push.apply(_SingleToast$ref$curr, args);};SingleToast.close = function () {_reactDom.default.flushSync(function () {var _SingleToast$ref$curr2;return (_SingleToast$ref$curr2 = SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr2.close();});};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["SingleToast.tsx"],"names":["SingleToast","render","ref","props","React","Component","__KONTUR_REACT_UI__","displayName","createRef","push","close","args","current","ReactDOM","flushSync"],"mappings":"iVAAA;AACA;;AAEA;;AAEA;AACA;AACA,G;AACaA,W;;;;;;;;;;;;AAYXC,IAAAA,M,GAAS,YAAM;AACb,0BAAO,6BAAC,YAAD,2BAAO,GAAG,EAAED,WAAW,CAACE,GAAxB,IAAiC,MAAKC,KAAtC,EAAP;AACD,K,oCAd8BC,eAAMC,S,oCAA1BL,W,CACGM,mB,GAAsB,a,CADzBN,W,CAEGO,W,GAAc,a,CAFjBP,W,CAIGE,G,gBAAME,eAAMI,SAAN,E,CAJTR,W,CAKGS,I,GAA0B,YAAa,2BACnDT,WAAW,CAACU,KAAZ,GADmD,mCAATC,IAAS,yDAATA,IAAS,4BAEnD,yBAAAX,WAAW,CAACE,GAAZ,CAAgBU,OAAhB,2CAAyBH,IAAzB,8BAAiCE,IAAjC,EACD,C,CARUX,W,CASGU,K,GAA4B,YAAM,CAC9CG,kBAASC,SAAT,CAAmB,yEAAMd,WAAW,CAACE,GAAZ,CAAgBU,OAAtB,qBAAM,uBAAyBF,KAAzB,EAAN,EAAnB,EACD,C","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Toast, ToastProps } from '../Toast/Toast';\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    ReactDOM.flushSync(() => SingleToast.ref.current?.close());\n  };\n  render = () => {\n    return <Toast ref={SingleToast.ref} {...this.props} />;\n  };\n}\n"]}

package/cjs/components/SingleToast/SingleToast.md

@@ -0,0 +1,35 @@
+`<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/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,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './SingleToast';\n"]}

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

@@ -1,27 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { types } from './SpinnerFallback';
-export declare type SpinnerType = 'mini' | 'normal' | 'big';
-export interface SpinnerProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+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;
     /**
-     * @deprecated Старое поведение спиннера - облачко при среднем и большом размере - исчезнет в 3.0 поведение пересено в `@skbkontur/react-ui-addons` смотри [миграцию](https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/MIGRATION.md)
-     *
-     * @default false
+     * Толщина спиннера
+     */
+    width?: number;
+    /**
+     * Цвет спиннера
      */
-    cloud?: boolean;
+    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;
+    static displayName: string;
     static propTypes: {
         /**
          * Текст рядом с мини-лоадером.
@@ -37,22 +55,19 @@ export declare class Spinner extends React.Component<SpinnerProps> {
          *
          * Spinner.types - все доступные типы
          */
-        type: PropTypes.Requireable<string>;
-        /**
-         * @deprecated Старое поведение спиннера - облачко при среднем и большом размере
-         *
-         * @default false - исчезнет в 3.0
-         */
-        cloud: PropTypes.Requireable<boolean>;
+        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 emotion;
     private readonly locale;
-    constructor(props: SpinnerProps);
+    private setRootNode;
+    private featureFlags;
     render(): JSX.Element;
-    private renderSpinnerOld;
     private renderMain;
     private renderSpinner;
     private renderCaption;
 }
+export {};

package/cjs/components/Spinner/Spinner.js

@@ -1,27 +1,69 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Spinner = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"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 _warning = _interopRequireDefault(require("warning"));
-var _classnames = _interopRequireDefault(require("classnames"));
+
 
 var _decorators = require("../../lib/locale/decorators");
 
-var _ThemeContext = require("../../lib/theming/ThemeContext");
-var _utils = require("../../lib/utils");
 var _SpinnerIcon = require("../../internal/icons/SpinnerIcon");
-var _SpinnerOld = require("../../internal/SpinnerOld");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+var _featureFlagsContext = require("../../lib/featureFlagsContext");
+
+
+
+
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _Spinner = require("./Spinner.styles");
-var _SpinnerFallback = require("./SpinnerFallback");
 var _locale = require("./locale");var _dec, _class, _class2, _temp;
+
+var types = ['big', 'mini', 'normal'];
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
+var SpinnerDataTids = {
+  root: 'Spinner__root' };exports.SpinnerDataTids = SpinnerDataTids;
 
 
 
 
+/**
+ * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)
+ */var
 
 
 
+Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Spinner, _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.
 
 
 
@@ -32,12 +74,8 @@ var _locale = require("./locale");var _dec, _class, _class2, _temp;
 
 
 
-/**
-                                                                     * DRAFT - инлайн-лоадер
-                                                                     */var
 
 
-Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Spinner, _React$Component);
 
 
 
@@ -53,6 +91,7 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(Spinner.defaultProps);_this.
 
 
 
@@ -74,8 +113,6 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
 
 
 
-  function Spinner(props) {var _this;
-    _this = _React$Component.call(this, props) || this;_this.theme = void 0;_this.locale = void 0;_this.
 
 
 
@@ -105,28 +142,38 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
 
 
 
+    renderSpinner = function (type, dimmed, inline) {var _this$emotion$cx;
+      var styles = (0, _Spinner.getStyles)(_this.emotion);
 
+      return /*#__PURE__*/(
+        _react.default.createElement(_SpinnerIcon.SpinnerIcon, {
+          size: type,
+          className: _this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[
+          styles.circle(_this.theme)] = !dimmed && !_this.props.color, _this$emotion$cx[
+          styles.circleDimmedColor(_this.theme)] = dimmed, _this$emotion$cx[
+          styles.circleWithoutColorAnimation()] = dimmed || !!_this.props.color, _this$emotion$cx)),
 
+          dimmed: dimmed,
+          width: _this.props.width,
+          color: _this.props.color,
+          inline: inline }));
 
-    renderSpinner = function (type, dimmed) {
-      var circleClassName = dimmed ? _Spinner.jsStyles.circleDimmed(_this.theme) : _Spinner.jsStyles.circle(_this.theme);
 
-      return _react.default.createElement(_SpinnerIcon.SpinnerIcon, { size: type, className: circleClassName });
     };_this.
 
-    renderCaption = function (type, caption) {return (
-        _react.default.createElement("span", { className: (0, _classnames.default)(_Spinner.jsStyles[type](_this.theme), _Spinner.jsStyles.captionColor(_this.theme)) }, caption));};(0, _warning.default)(!_this.props.cloud, 'cloud is deprecated, will removed in 3.0. ');return _this;}var _proto = Spinner.prototype;_proto.render = function render() {var _this2 = this;return _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return !_this2.props.cloud ? _this2.renderMain() : _this2.renderSpinnerOld();});};_proto.renderSpinnerOld = function renderSpinnerOld() {return _react.default.createElement(_SpinnerOld.SpinnerOld, this.props);};_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;return _react.default.createElement("div", { className: _Spinner.jsStyles.spinner() }, _react.default.createElement("span", { className: _Spinner.jsStyles.inner() }, _utils.hasSvgAnimationSupport && this.renderSpinner(type, dimmed), !_utils.hasSvgAnimationSupport && _react.default.createElement(_SpinnerFallback.SpinnerFallback, { type: type, dimmed: dimmed })), caption && this.renderCaption(type, caption));};return Spinner;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.propTypes = { /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           * Текст рядом с мини-лоадером.
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           *
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           * 'Загрузка' - значение по-умолчанию
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           */caption: _propTypes.default.node, dimmed: _propTypes.default.bool, /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 * Тип спиннера: mini, normal, big
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 *
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 * Значение по-умолчанию - normal
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 *
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 * Spinner.types - все доступные типы
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 */type: _propTypes.default.oneOf(Object.keys(_SpinnerFallback.types)), /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         * @deprecated Старое поведение спиннера - облачко при среднем и большом размере
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         *
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         * @default false - исчезнет в 3.0
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         */cloud: _propTypes.default.bool }, _class2.defaultProps = { type: 'normal' }, _class2.Types = _SpinnerFallback.types, _temp)) || _class);exports.Spinner = Spinner;
+    renderCaption = function (type, caption) {
+      var styles = (0, _Spinner.getStyles)(_this.emotion);
+      return /*#__PURE__*/(
+        _react.default.createElement("span", { className: _this.emotion.cx(styles[type](_this.theme), styles.captionColor(_this.theme)) }, caption));
+
+    };return _this;}var _proto = Spinner.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});});};_proto.renderMain = function renderMain() {var canDefaultCaptionBeRemoved = this.featureFlags.spinnerLoaderRemoveDefaultCaption;var defaultCaption = canDefaultCaptionBeRemoved ? null : this.locale.loading;var _this$props = this.props,_this$props$caption = _this$props.caption,caption = _this$props$caption === void 0 ? defaultCaption : _this$props$caption,dimmed = _this$props.dimmed,inline = _this$props.inline;var type = this.getProps().type;var styles = (0, _Spinner.getStyles)(this.emotion);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: styles.spinner() }, /*#__PURE__*/_react.default.createElement("span", { className: styles.inner() }, this.renderSpinner(type, dimmed, inline)), caption && this.renderCaption(type, caption)));};return Spinner;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.displayName = 'Spinner', _class2.propTypes = { /**
+   * Текст рядом с мини-лоадером.
+   *
+   * 'Загрузка' - значение по-умолчанию
+   */caption: _propTypes.default.node, dimmed: _propTypes.default.bool, /**
+   * Тип спиннера: mini, normal, big
+   *
+   * Значение по-умолчанию - normal
+   *
+   * Spinner.types - все доступные типы
+   */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":["Spinner","SpinnerLocaleHelper","props","theme","locale","renderSpinner","type","dimmed","circleClassName","jsStyles","circleDimmed","circle","renderCaption","caption","captionColor","cloud","render","renderMain","renderSpinnerOld","loading","spinner","inner","hasSvgAnimationSupport","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","node","bool","oneOf","Object","keys","types","defaultProps","Types"],"mappings":"mPAAA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA,kC;;;;;;;;;;;;;;;;;;;;AAoBA;;;;;AAKaA,O,WADZ,wBAAO,SAAP,EAAkBC,2BAAlB,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCC,mBAAYC,KAAZ,EAAiC;AAC/B,wCAAMA,KAAN,UAD+B,MAHzBC,KAGyB,gBAFhBC,MAEgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCzBC,IAAAA,aAlCyB,GAkCT,UAACC,IAAD,EAAoBC,MAApB,EAAyC;AAC/D,UAAMC,eAAe,GAAGD,MAAM,GAAGE,kBAASC,YAAT,CAAsB,MAAKP,KAA3B,CAAH,GAAuCM,kBAASE,MAAT,CAAgB,MAAKR,KAArB,CAArE;;AAEA,aAAO,6BAAC,wBAAD,IAAa,IAAI,EAAEG,IAAnB,EAAyB,SAAS,EAAEE,eAApC,GAAP;AACD,KAtCgC;;AAwCzBI,IAAAA,aAxCyB,GAwCT,UAACN,IAAD,EAAoBO,OAApB;AACtB,+CAAM,SAAS,EAAE,yBAAGJ,kBAASH,IAAT,EAAe,MAAKH,KAApB,CAAH,EAA+BM,kBAASK,YAAT,CAAsB,MAAKX,KAA3B,CAA/B,CAAjB,IAAqFU,OAArF,CADsB,GAxCS,CAE/B,sBAAQ,CAAC,MAAKX,KAAL,CAAWa,KAApB,EAA2B,4CAA3B,EAF+B,aAGhC,C,sCAEMC,M,GAAP,kBAAgB,mBACd,OACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAAAb,KAAK,EAAI,CACR,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,CAAC,MAAI,CAACD,KAAL,CAAWa,KAAZ,GAAoB,MAAI,CAACE,UAAL,EAApB,GAAwC,MAAI,CAACC,gBAAL,EAA/C,CACD,CAJH,CADF,CAQD,C,QAEOA,gB,GAAR,4BAA2B,CACzB,OAAO,6BAAC,sBAAD,EAAgB,KAAKhB,KAArB,CAAP,CACD,C,QAEOe,U,GAAR,sBAAqB,mBACqC,KAAKf,KAD1C,CACXI,IADW,eACXA,IADW,mCACLO,OADK,CACLA,OADK,oCACK,KAAKT,MAAL,CAAYe,OADjB,uBAC0BZ,MAD1B,eAC0BA,MAD1B,CAGnB,OACE,sCAAK,SAAS,EAAEE,kBAASW,OAAT,EAAhB,IACE,uCAAM,SAAS,EAAEX,kBAASY,KAAT,EAAjB,IACGC,iCAA0B,KAAKjB,aAAL,CAAmBC,IAAnB,EAAyBC,MAAzB,CAD7B,EAEG,CAACe,6BAAD,IAA2B,6BAAC,gCAAD,IAAiB,IAAI,EAAEhB,IAAvB,EAA6B,MAAM,EAAEC,MAArC,GAF9B,CADF,EAKGM,OAAO,IAAI,KAAKD,aAAL,CAAmBN,IAAnB,EAAyBO,OAAzB,CALd,CADF,CASD,C,kBArE0BU,eAAMC,S,WACnBC,mB,GAAsB,S,UAEtBC,S,GAAY,EACxB;;;;67CAKAb,OAAO,EAAEc,mBAAUC,IANK,EAQxBrB,MAAM,EAAEoB,mBAAUE,IARM,EAUxB;;;;;;mgDAOAvB,IAAI,EAAEqB,mBAAUG,KAAV,CAAgBC,MAAM,CAACC,IAAP,CAAYC,sBAAZ,CAAhB,CAjBkB,EAkBxB;;;;2kDAKAlB,KAAK,EAAEY,mBAAUE,IAvBO,E,UA0BZK,Y,GAA6B,EACzC5B,IAAI,EAAE,QADmC,E,UAI7B6B,K,GAAsBF,sB","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport warning from 'warning';\r\nimport cn from 'classnames';\r\n\r\nimport { locale } from '../../lib/locale/decorators';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { hasSvgAnimationSupport } from '../../lib/utils';\r\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\r\nimport { SpinnerOld } from '../../internal/SpinnerOld';\r\n\r\nimport { jsStyles } from './Spinner.styles';\r\nimport { SpinnerFallback, types } from './SpinnerFallback';\r\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\r\n\r\nexport type SpinnerType = 'mini' | 'normal' | 'big';\r\n\r\nexport interface SpinnerProps {\r\n  caption?: React.ReactNode;\r\n  dimmed?: boolean;\r\n  /**\r\n   * Тип спиннера\r\n   * @default normal\r\n   */\r\n  type: SpinnerType;\r\n  /**\r\n   * @deprecated Старое поведение спиннера - облачко при среднем и большом размере - исчезнет в 3.0 поведение пересено в `@skbkontur/react-ui-addons` смотри [миграцию](https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/MIGRATION.md)\r\n   *\r\n   * @default false\r\n   */\r\n  cloud?: boolean;\r\n}\r\n\r\n/**\r\n * DRAFT - инлайн-лоадер\r\n */\r\n\r\n@locale('Spinner', SpinnerLocaleHelper)\r\nexport class Spinner extends React.Component<SpinnerProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Spinner';\r\n\r\n  public static propTypes = {\r\n    /**\r\n     * Текст рядом с мини-лоадером.\r\n     *\r\n     * 'Загрузка' - значение по-умолчанию\r\n     */\r\n    caption: PropTypes.node,\r\n\r\n    dimmed: PropTypes.bool,\r\n\r\n    /**\r\n     * Тип спиннера: mini, normal, big\r\n     *\r\n     * Значение по-умолчанию - normal\r\n     *\r\n     * Spinner.types - все доступные типы\r\n     */\r\n    type: PropTypes.oneOf(Object.keys(types)),\r\n    /**\r\n     * @deprecated Старое поведение спиннера - облачко при среднем и большом размере\r\n     *\r\n     * @default false - исчезнет в 3.0\r\n     */\r\n    cloud: PropTypes.bool,\r\n  };\r\n\r\n  public static defaultProps: SpinnerProps = {\r\n    type: 'normal',\r\n  };\r\n\r\n  public static Types: typeof types = types;\r\n  private theme!: Theme;\r\n  private readonly locale!: SpinnerLocale;\r\n\r\n  constructor(props: SpinnerProps) {\r\n    super(props);\r\n    warning(!this.props.cloud, 'cloud is deprecated, will removed in 3.0. ');\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return !this.props.cloud ? this.renderMain() : this.renderSpinnerOld();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderSpinnerOld() {\r\n    return <SpinnerOld {...this.props} />;\r\n  }\r\n\r\n  private renderMain() {\r\n    const { type, caption = this.locale.loading, dimmed } = this.props;\r\n\r\n    return (\r\n      <div className={jsStyles.spinner()}>\r\n        <span className={jsStyles.inner()}>\r\n          {hasSvgAnimationSupport && this.renderSpinner(type, dimmed)}\r\n          {!hasSvgAnimationSupport && <SpinnerFallback type={type} dimmed={dimmed} />}\r\n        </span>\r\n        {caption && this.renderCaption(type, caption)}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean) => {\r\n    const circleClassName = dimmed ? jsStyles.circleDimmed(this.theme) : jsStyles.circle(this.theme);\r\n\r\n    return <SpinnerIcon size={type} className={circleClassName} />;\r\n  };\r\n\r\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\r\n    <span className={cn(jsStyles[type](this.theme), jsStyles.captionColor(this.theme))}>{caption}</span>\r\n  );\r\n}\r\n"]}
+{"version":3,"sources":["Spinner.tsx"],"names":["types","SpinnerDataTids","root","Spinner","SpinnerLocaleHelper","rootNode","getProps","defaultProps","renderSpinner","type","dimmed","inline","styles","emotion","cx","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","flags","featureFlags","renderMain","canDefaultCaptionBeRemoved","spinnerLoaderRemoveDefaultCaption","defaultCaption","locale","loading","setRootNode","spinner","inner","React","Component","__KONTUR_REACT_UI__","displayName","propTypes","PropTypes","node","bool","oneOf","Types","Object","assign","map"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport {\n  getFullReactUIFlagsContext,\n  ReactUIFeatureFlags,\n  ReactUIFeatureFlagsContext,\n} from '../../lib/featureFlagsContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types = ['big', 'mini', 'normal'] as const;\n\nexport type SpinnerType = typeof types[number];\n\nexport interface SpinnerProps extends CommonProps {\n  /**\n   * Подпись под спиннером\n   */\n  caption?: React.ReactNode;\n  /**\n   * Переводит спиннер в \"затемнённый режим\"\n   *\n   * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`\n   */\n  dimmed?: boolean;\n  /**\n   * Размер спиннера и текста\n   *\n   * @default normal\n   */\n  type?: SpinnerType;\n  inline?: boolean;\n  /**\n   * Толщина спиннера\n   */\n  width?: number;\n  /**\n   * Цвет спиннера\n   */\n  color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n  root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n  public static __KONTUR_REACT_UI__ = 'Spinner';\n  public static displayName = 'Spinner';\n\n  public static propTypes = {\n    /**\n     * Текст рядом с мини-лоадером.\n     *\n     * 'Загрузка' - значение по-умолчанию\n     */\n    caption: PropTypes.node,\n\n    dimmed: PropTypes.bool,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * Значение по-умолчанию - normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(types),\n  };\n\n  public static defaultProps: DefaultProps = {\n    type: 'normal',\n  };\n\n  private getProps = createPropsGetter(Spinner.defaultProps);\n\n  public static Types: Record<SpinnerType, SpinnerType> = Object.assign({}, ...types.map((type) => ({ [type]: type })));\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private readonly locale!: SpinnerLocale;\n  private setRootNode!: TSetRootNode;\n  private featureFlags!: ReactUIFeatureFlags;\n\n  public render() {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.featureFlags = getFullReactUIFlagsContext(flags);\n          return (\n            <EmotionConsumer>\n              {(emotion) => {\n                this.emotion = emotion;\n                return (\n                  <ThemeContext.Consumer>\n                    {(theme) => {\n                      this.theme = theme;\n                      return this.renderMain();\n                    }}\n                  </ThemeContext.Consumer>\n                );\n              }}\n            </EmotionConsumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const canDefaultCaptionBeRemoved = this.featureFlags.spinnerLoaderRemoveDefaultCaption;\n    const defaultCaption = canDefaultCaptionBeRemoved ? null : this.locale.loading;\n    const { caption = defaultCaption, dimmed, inline } = this.props;\n    const type = this.getProps().type;\n    const styles = getStyles(this.emotion);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n          <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n          {caption && this.renderCaption(type, caption)}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n    const styles = getStyles(this.emotion);\n\n    return (\n      <SpinnerIcon\n        size={type}\n        className={this.emotion.cx({\n          [styles.circle(this.theme)]: !dimmed && !this.props.color,\n          [styles.circleDimmedColor(this.theme)]: dimmed,\n          [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n        })}\n        dimmed={dimmed}\n        width={this.props.width}\n        color={this.props.color}\n        inline={inline}\n      />\n    );\n  };\n\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => {\n    const styles = getStyles(this.emotion);\n    return (\n      <span className={this.emotion.cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n    );\n  };\n}\n"]}

package/cjs/components/Spinner/Spinner.md

@@ -1,34 +1,35 @@
-```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} />
-</Gapped>;
-```
-
-#### Локали по умолчанию (см. `LocaleProvider`)
-
-```typescript
-interface SpinnerLocale {
-  loading?: React.ReactNode;
-}
-
-const ru_RU = {
-  loading: 'Загрузка',
-};
-
-const en_GB = {
-  loading: 'Loading',
-};
-```
+```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

@@ -1,11 +1,17 @@
-export declare const jsStyles: {
-    circle(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    circleDimmed(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    captionColor(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    mini(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    normal(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    big(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
+    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;
-    fallback(): string;
 };