@skbkontur/react-ui 0.0.0-13d2191267 → 0.0.0-151f385a39

package/cjs/components/GlobalLoader/GlobalLoader.md

@@ -0,0 +1,98 @@
+Индикатор обмена данными с сервером.
+
+Глобальный Лоадер может быть только один в приложении. Поэтому, каждый новый экземпляр компонента
+"убивает" предыдущий
+экземпляр, и начинает перехватывать статические методы.
+
+Предполагается монтирование компонента в единственном месте. И управление им через статические методы, либо через пропы.
+
+Все статические методы:
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Button onClick={GlobalLoader.start} use="primary">start</Button>
+  <Button onClick={GlobalLoader.done} use="success">done</Button>
+  <Button onClick={GlobalLoader.reject} use="danger">reject</Button>
+  <Button onClick={GlobalLoader.accept} use="pay">accept</Button>
+</Gapped>
+```
+
+Монтирование и кастомизация:
+```jsx harmony
+import { Button, Toggle, Gapped, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+import { GlobalLoader } from './GlobalLoader';
+
+const myTheme = ThemeFactory.create({ globalLoaderColor: 'red' });
+
+const [manually, setManually] = React.useState(false);
+const [active, setActive] = React.useState(false);
+const [error, setError] = React.useState(false);
+
+const reset = () => {
+  if (manually) {
+    setManually(false);
+    setError(false);
+    setActive(false);
+  } else {
+    setManually(true);
+  }
+}
+
+<Gapped vertical>
+  <Toggle checked={manually} onValueChange={reset}>
+    Управление пропами
+  </Toggle>
+  <Toggle checked={active} onValueChange={setActive} disabled={!manually}>
+    <code>active</code>
+  </Toggle>
+  <Toggle checked={error} onValueChange={setError} disabled={!manually}>
+    <code>rejected</code>
+  </Toggle>
+
+  <ThemeContext.Provider value={myTheme}>
+    <GlobalLoader expectedResponseTime={2000} delayBeforeShow={1000} active={active} rejected={error}
+      onStart={() => console.log('start')}
+      onDone={() => console.log('done')}
+      onReject={() => console.log('reject')}
+      onAccept={() => console.log('accept')}
+    />
+  </ThemeContext.Provider>
+
+</Gapped>
+```
+
+
+Статические методы в модалке:
+```jsx harmony
+import { Button, Gapped, Modal } from '@skbkontur/react-ui';
+
+const [opened, setOpened] = React.useState(false);
+
+function renderModal() {
+  return (
+    <Modal onClose={close}>
+      <Modal.Header>Заголовок</Modal.Header>
+      <Modal.Body>
+        <Gapped>
+          <Button onClick={GlobalLoader.start} use="primary">start</Button>
+          <Button onClick={GlobalLoader.done} use="success">done</Button>
+        </Gapped>
+      </Modal.Body>
+    </Modal>
+  );
+}
+
+function open() {
+  setOpened(true);
+}
+
+function close() {
+  setOpened(false);
+}
+
+<div>
+  {opened && renderModal()}
+  <Button onClick={open}>Открыть</Button>
+</div>;
+```

package/cjs/components/GlobalLoader/GlobalLoaderView.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface GlobalLoaderViewProps extends Pick<CommonProps, 'data-tid'> {
+    expectedResponseTime: number;
+    delayBeforeHide: number;
+    status?: 'success' | 'error' | 'standard' | 'accept';
+    disableAnimations: boolean;
+}
+export declare type GlobalLoaderViewRef = {
+    element: HTMLDivElement;
+    refObject: React.RefObject<GlobalLoaderViewRef['element']>;
+};
+export declare const GlobalLoaderView: ({ expectedResponseTime, delayBeforeHide, status, disableAnimations, ...rest }: GlobalLoaderViewProps) => JSX.Element;

package/cjs/components/GlobalLoader/GlobalLoaderView.js

@@ -0,0 +1,73 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.GlobalLoaderView = void 0;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+
+var _Emotion = require("../../lib/theming/Emotion");
+var _ZIndex = require("../../internal/ZIndex");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+
+var _GlobalLoaderView = require("./GlobalLoaderView.styles");
+var _useParams = require("./useParams");var _excluded = ["expectedResponseTime", "delayBeforeHide", "status", "disableAnimations"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+
+
+
+
+
+
+
+
+
+
+
+
+
+var GlobalLoaderView = function GlobalLoaderView(_ref)
+
+
+
+
+
+{var expectedResponseTime = _ref.expectedResponseTime,delayBeforeHide = _ref.delayBeforeHide,status = _ref.status,disableAnimations = _ref.disableAnimations,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  var ref = (0, _react.useRef)(null);
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var _useGlobalLoaderWidth = (0, _useParams.useGlobalLoaderWidth)(status, ref),width = _useGlobalLoaderWidth.width,startWidth = _useGlobalLoaderWidth.startWidth,fullWidth = _useGlobalLoaderWidth.fullWidth;
+  var _useGlobalLoaderPosit = (0, _useParams.useGlobalLoaderPosition)(ref),left = _useGlobalLoaderPosit.left;
+
+  var getAnimationClass = function getAnimationClass(status) {
+    if (!disableAnimations) {
+      switch (status) {
+        case 'success':
+          return _GlobalLoaderView.animations.successAnimation(delayBeforeHide, width, left);
+        case 'accept':
+          if (startWidth < fullWidth * 0.8) {
+            return _GlobalLoaderView.animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);
+          }
+          return _GlobalLoaderView.animations.slowAcceptAnimation(theme, startWidth, width, left);
+        case 'error':
+          return _GlobalLoaderView.animations.errorAnimation(theme);
+        case 'standard':
+          return _GlobalLoaderView.animations.standardAnimation(theme, expectedResponseTime);}
+
+    }
+
+    if (disableAnimations) {
+      switch (status) {
+        case 'success':
+          return _GlobalLoaderView.styles.successWithoutAnimation();
+        case 'accept':
+          return _GlobalLoaderView.animations.acceptWithoutAnimation(startWidth);
+        case 'error':
+          return _GlobalLoaderView.styles.errorWithoutAnimation();
+        case 'standard':
+          return _GlobalLoaderView.styles.standardWithoutAnimation();}
+
+    }
+  };
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_CommonWrapper.CommonWrapper, rest, /*#__PURE__*/
+    _react.default.createElement(_ZIndex.ZIndex, { priority: "GlobalLoader", className: _GlobalLoaderView.styles.outer(theme) }, /*#__PURE__*/
+    _react.default.createElement("div", { ref: ref, className: (0, _Emotion.cx)(_GlobalLoaderView.styles.inner(theme), getAnimationClass(status)) }))));
+
+
+
+};exports.GlobalLoaderView = GlobalLoaderView;

package/cjs/components/GlobalLoader/GlobalLoaderView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["GlobalLoaderView.tsx"],"names":["GlobalLoaderView","expectedResponseTime","delayBeforeHide","status","disableAnimations","rest","ref","theme","ThemeContext","width","startWidth","fullWidth","left","getAnimationClass","animations","successAnimation","acceptAnimation","slowAcceptAnimation","errorAnimation","standardAnimation","styles","successWithoutAnimation","acceptWithoutAnimation","errorWithoutAnimation","standardWithoutAnimation","outer","inner"],"mappings":"0RAAA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,wC;;;;;;;;;;;;;;AAcO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB;;;;;;AAMH,KAL3BC,oBAK2B,QAL3BA,oBAK2B,CAJ3BC,eAI2B,QAJ3BA,eAI2B,CAH3BC,MAG2B,QAH3BA,MAG2B,CAF3BC,iBAE2B,QAF3BA,iBAE2B,CADxBC,IACwB;AAC3B,MAAMC,GAAG,GAAG,mBAAuC,IAAvC,CAAZ;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,8BAAyC,qCAAqBL,MAArB,EAA6BG,GAA7B,CAAzC,CAAQG,KAAR,yBAAQA,KAAR,CAAeC,UAAf,yBAAeA,UAAf,CAA2BC,SAA3B,yBAA2BA,SAA3B;AACA,8BAAiB,wCAAwBL,GAAxB,CAAjB,CAAQM,IAAR,yBAAQA,IAAR;;AAEA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACV,MAAD,EAA6C;AACrE,QAAI,CAACC,iBAAL,EAAwB;AACtB,cAAQD,MAAR;AACE,aAAK,SAAL;AACE,iBAAOW,6BAAWC,gBAAX,CAA4Bb,eAA5B,EAA6CO,KAA7C,EAAoDG,IAApD,CAAP;AACF,aAAK,QAAL;AACE,cAAIF,UAAU,GAAGC,SAAS,GAAG,GAA7B,EAAkC;AAChC,mBAAOG,6BAAWE,eAAX,CAA2BT,KAA3B,EAAkCG,UAAlC,EAA8CT,oBAA9C,EAAoEQ,KAApE,EAA2EG,IAA3E,CAAP;AACD;AACD,iBAAOE,6BAAWG,mBAAX,CAA+BV,KAA/B,EAAsCG,UAAtC,EAAkDD,KAAlD,EAAyDG,IAAzD,CAAP;AACF,aAAK,OAAL;AACE,iBAAOE,6BAAWI,cAAX,CAA0BX,KAA1B,CAAP;AACF,aAAK,UAAL;AACE,iBAAOO,6BAAWK,iBAAX,CAA6BZ,KAA7B,EAAoCN,oBAApC,CAAP,CAXJ;;AAaD;;AAED,QAAIG,iBAAJ,EAAuB;AACrB,cAAQD,MAAR;AACE,aAAK,SAAL;AACE,iBAAOiB,yBAAOC,uBAAP,EAAP;AACF,aAAK,QAAL;AACE,iBAAOP,6BAAWQ,sBAAX,CAAkCZ,UAAlC,CAAP;AACF,aAAK,OAAL;AACE,iBAAOU,yBAAOG,qBAAP,EAAP;AACF,aAAK,UAAL;AACE,iBAAOH,yBAAOI,wBAAP,EAAP,CARJ;;AAUD;AACF,GA7BD;;AA+BA;AACE,iCAAC,4BAAD,EAAmBnB,IAAnB;AACE,iCAAC,cAAD,IAAQ,QAAQ,EAAC,cAAjB,EAAgC,SAAS,EAAEe,yBAAOK,KAAP,CAAalB,KAAb,CAA3C;AACE,0CAAK,GAAG,EAAED,GAAV,EAAe,SAAS,EAAE,iBAAGc,yBAAOM,KAAP,CAAanB,KAAb,CAAH,EAAwBM,iBAAiB,CAACV,MAAD,CAAzC,CAA1B,GADF,CADF,CADF;;;;AAOD,CAlDM,C","sourcesContent":["import React, { useContext, useRef } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\n\nimport { animations, styles } from './GlobalLoaderView.styles';\nimport { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams';\n\nexport interface GlobalLoaderViewProps extends Pick<CommonProps, 'data-tid'> {\n  expectedResponseTime: number;\n  delayBeforeHide: number;\n  status?: 'success' | 'error' | 'standard' | 'accept';\n  disableAnimations: boolean;\n}\n\nexport type GlobalLoaderViewRef = {\n  element: HTMLDivElement;\n  refObject: React.RefObject<GlobalLoaderViewRef['element']>;\n};\n\nexport const GlobalLoaderView = ({\n  expectedResponseTime,\n  delayBeforeHide,\n  status,\n  disableAnimations,\n  ...rest\n}: GlobalLoaderViewProps) => {\n  const ref = useRef<GlobalLoaderViewRef['element']>(null);\n  const theme = useContext(ThemeContext);\n  const { width, startWidth, fullWidth } = useGlobalLoaderWidth(status, ref);\n  const { left } = useGlobalLoaderPosition(ref);\n\n  const getAnimationClass = (status: GlobalLoaderViewProps['status']) => {\n    if (!disableAnimations) {\n      switch (status) {\n        case 'success':\n          return animations.successAnimation(delayBeforeHide, width, left);\n        case 'accept':\n          if (startWidth < fullWidth * 0.8) {\n            return animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);\n          }\n          return animations.slowAcceptAnimation(theme, startWidth, width, left);\n        case 'error':\n          return animations.errorAnimation(theme);\n        case 'standard':\n          return animations.standardAnimation(theme, expectedResponseTime);\n      }\n    }\n\n    if (disableAnimations) {\n      switch (status) {\n        case 'success':\n          return styles.successWithoutAnimation();\n        case 'accept':\n          return animations.acceptWithoutAnimation(startWidth);\n        case 'error':\n          return styles.errorWithoutAnimation();\n        case 'standard':\n          return styles.standardWithoutAnimation();\n      }\n    }\n  };\n\n  return (\n    <CommonWrapper {...rest}>\n      <ZIndex priority=\"GlobalLoader\" className={styles.outer(theme)}>\n        <div ref={ref} className={cx(styles.inner(theme), getAnimationClass(status))} />\n      </ZIndex>\n    </CommonWrapper>\n  );\n};\n"]}

package/cjs/components/GlobalLoader/GlobalLoaderView.styles.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    outer(t: Theme): string;
+    inner(t: Theme): string;
+    standardWithoutAnimation(): string;
+    successWithoutAnimation(): string;
+    errorWithoutAnimation(): string;
+};
+export declare const animations: {
+    successAnimation(delayBeforeHide: number, width: number, left: number): string;
+    errorAnimation(t: Theme): string;
+    standardAnimation(t: Theme, expectedTime: number): string;
+    acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number): string;
+    slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number): string;
+    acceptWithoutAnimation(startWidth: number): string;
+};

package/cjs/components/GlobalLoader/GlobalLoaderView.styles.js

@@ -0,0 +1,192 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.animations = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _css = require("@emotion/css");
+
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+
+
+var styles = (0, _Emotion.memoizeStyle)({
+  outer: function outer(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n      position: ", ";\n      left: ", ";\n      top: ", ";\n      right: ", ";\n      bottom: ", ";\n      overflow: hidden;\n    "])),
+    t.globalLoaderWidth,
+    t.globalLoaderHeight,
+    t.globalLoaderBackgroundColor,
+    t.globalLoaderPosition,
+    t.globalLoaderLeft,
+    t.globalLoaderTop,
+    t.globalLoaderRight,
+    t.globalLoaderBottom);
+
+
+  },
+  inner: function inner(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background-color: ", ";\n      width: 0;\n      height: ", ";\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    "])),
+    t.globalLoaderColor,
+
+    t.globalLoaderHeight);
+
+
+
+
+  },
+  standardWithoutAnimation: function standardWithoutAnimation() {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: 0;\n      width: 90%;\n    "])));
+
+
+
+  },
+  successWithoutAnimation: function successWithoutAnimation() {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: 0;\n      width: 100%;\n    "])));
+
+
+
+  },
+  errorWithoutAnimation: function errorWithoutAnimation() {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: 40%;\n      width: 20%;\n    "])));
+
+
+
+  } });exports.styles = styles;
+
+
+var moveToRightAnimation = (0, _css.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n"])));
+
+
+
+
+
+
+
+
+
+
+
+
+
+var spinnerAnimation = (0, _css.keyframes)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n"])));
+
+
+
+
+
+
+
+
+
+
+
+
+var linearProgressAnimation = (0, _css.keyframes)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n  from { width: 0; }\n  to { width: 80% }\n"])));
+
+
+
+var slowProgressAnimation = (0, _css.keyframes)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n  from { width: 80%; }\n  to { width: 90% }\n"])));
+
+
+
+
+var animations = {
+  successAnimation: function successAnimation(delayBeforeHide, width, left) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      animation: successAnimation;\n      animation-duration: ", "ms;\n      @keyframes successAnimation {\n        0% {\n          width: ", "px;\n          left: ", "px;\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      }\n    "])),
+
+    delayBeforeHide,
+
+
+    width,
+    left);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  },
+  errorAnimation: function errorAnimation(t) {
+    var transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);
+    var spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);
+
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: 0;\n      width: 100%;\n      animation: ", " ", "ms linear,\n        ", "ms ", " ", "ms infinite alternate;\n    "])),
+
+
+    moveToRightAnimation, transitionDuration,
+    spinnerAnimationDuration, spinnerAnimation, transitionDuration);
+
+  },
+  standardAnimation: function standardAnimation(t, expectedTime) {
+    var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 90%;\n      animation: ", " ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n    "])),
+
+    linearProgressAnimation, expectedTime,
+    slowProgressAnimationTime, slowProgressAnimation, expectedTime);
+
+  },
+  acceptAnimation: function acceptAnimation(t, startWidth, expectedTime, width, left) {
+    var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
+    var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 90%;\n      animation: transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    "])),
+
+    transitionTime,
+    expectedTime, transitionTime,
+    slowProgressAnimationTime, slowProgressAnimation, expectedTime + transitionTime,
+
+
+    width,
+    left,
+
+
+    startWidth,
+
+
+
+
+
+    startWidth);
+
+
+
+
+
+
+  },
+  slowAcceptAnimation: function slowAcceptAnimation(t, startWidth, width, left) {
+    var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
+    var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 90%;\n      animation: transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    "])),
+
+    transitionTime,
+    slowProgressAnimationTime, transitionTime,
+
+
+    width,
+    left,
+
+
+    startWidth,
+
+
+
+
+
+    startWidth);
+
+
+
+
+
+
+  },
+  acceptWithoutAnimation: function acceptWithoutAnimation(startWidth) {
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", "px;\n    "])),
+    startWidth);
+
+  } };exports.animations = animations;

package/cjs/components/GlobalLoader/GlobalLoaderView.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["GlobalLoaderView.styles.ts"],"names":["styles","outer","t","css","globalLoaderWidth","globalLoaderHeight","globalLoaderBackgroundColor","globalLoaderPosition","globalLoaderLeft","globalLoaderTop","globalLoaderRight","globalLoaderBottom","inner","globalLoaderColor","standardWithoutAnimation","successWithoutAnimation","errorWithoutAnimation","moveToRightAnimation","keyframes","spinnerAnimation","linearProgressAnimation","slowProgressAnimation","animations","successAnimation","delayBeforeHide","width","left","errorAnimation","transitionDuration","parseInt","globalLoaderTransitionToSpinnerDuration","spinnerAnimationDuration","globalLoaderSpinnerAnimationDuration","standardAnimation","expectedTime","slowProgressAnimationTime","globalLoaderSlowAnimationDuration","acceptAnimation","startWidth","transitionTime","globalLoaderTransitionFromSpinnerDuration","slowAcceptAnimation","acceptWithoutAnimation"],"mappings":"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","sourcesContent":["import { keyframes } from '@emotion/css';\n\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  outer(t: Theme) {\n    return css`\n      width: ${t.globalLoaderWidth};\n      height: ${t.globalLoaderHeight};\n      background-color: ${t.globalLoaderBackgroundColor};\n      position: ${t.globalLoaderPosition};\n      left: ${t.globalLoaderLeft};\n      top: ${t.globalLoaderTop};\n      right: ${t.globalLoaderRight};\n      bottom: ${t.globalLoaderBottom};\n      overflow: hidden;\n    `;\n  },\n  inner(t: Theme) {\n    return css`\n      background-color: ${t.globalLoaderColor};\n      width: 0;\n      height: ${t.globalLoaderHeight};\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    `;\n  },\n  standardWithoutAnimation() {\n    return css`\n      left: 0;\n      width: 90%;\n    `;\n  },\n  successWithoutAnimation() {\n    return css`\n      left: 0;\n      width: 100%;\n    `;\n  },\n  errorWithoutAnimation() {\n    return css`\n      left: 40%;\n      width: 20%;\n    `;\n  },\n});\n\nconst moveToRightAnimation = keyframes`\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n`;\nconst spinnerAnimation = keyframes`\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n`;\nconst linearProgressAnimation = keyframes`\n  from { width: 0; }\n  to { width: 80% }\n`;\nconst slowProgressAnimation = keyframes`\n  from { width: 80%; }\n  to { width: 90% }\n`;\n\nexport const animations = {\n  successAnimation(delayBeforeHide: number, width: number, left: number) {\n    return css`\n      animation: successAnimation;\n      animation-duration: ${delayBeforeHide}ms;\n      @keyframes successAnimation {\n        0% {\n          width: ${width}px;\n          left: ${left}px;\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      }\n    `;\n  },\n  errorAnimation(t: Theme) {\n    const transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);\n    const spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);\n\n    return css`\n      left: 0;\n      width: 100%;\n      animation: ${moveToRightAnimation} ${transitionDuration}ms linear,\n        ${spinnerAnimationDuration}ms ${spinnerAnimation} ${transitionDuration}ms infinite alternate;\n    `;\n  },\n  standardAnimation(t: Theme, expectedTime: number) {\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return css`\n      width: 90%;\n      animation: ${linearProgressAnimation} ${expectedTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation} ${expectedTime}ms linear;\n    `;\n  },\n  acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number) {\n    const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return css`\n      width: 90%;\n      animation: transitionAnimation ${transitionTime}ms linear,\n        ${expectedTime}ms acceptAnimation ${transitionTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation} ${expectedTime + transitionTime}ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ${width}px;\n          left: ${left}px;\n        }\n        to {\n          width: ${startWidth}px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ${startWidth}px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    `;\n  },\n  slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number) {\n    const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return css`\n      width: 90%;\n      animation: transitionAnimation ${transitionTime}ms linear,\n        ${slowProgressAnimationTime}ms acceptAnimation ${transitionTime}ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ${width}px;\n          left: ${left}px;\n        }\n        to {\n          width: ${startWidth}px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ${startWidth}px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    `;\n  },\n  acceptWithoutAnimation(startWidth: number) {\n    return css`\n      width: ${startWidth}px;\n    `;\n  },\n};\n"]}

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

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

package/cjs/components/GlobalLoader/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './GlobalLoader';\n"]}

package/cjs/components/GlobalLoader/useParams.d.ts

@@ -0,0 +1,22 @@
+import { GlobalLoaderViewProps, GlobalLoaderViewRef } from './GlobalLoaderView';
+/**
+ * Вычисляет положение `GlobalLoader`
+ *
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает положение полоски `GlobalLoader`
+ */
+export declare const useGlobalLoaderPosition: (ref: GlobalLoaderViewRef['refObject']) => {
+    left: number;
+};
+/**
+ * Вычисляет ширину `GlobalLoader`
+ *
+ * @param status - статус `GlobalLoader`
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает ширину полоски `GlobalLoader`
+ */
+export declare const useGlobalLoaderWidth: (status: GlobalLoaderViewProps['status'], ref: GlobalLoaderViewRef['refObject']) => {
+    width: number;
+    startWidth: number;
+    fullWidth: number;
+};

package/cjs/components/GlobalLoader/useParams.js

@@ -0,0 +1,45 @@
+"use strict";exports.__esModule = true;exports.useGlobalLoaderWidth = exports.useGlobalLoaderPosition = void 0;var _react = require("react");
+
+var _getDOMRect3 = require("../../lib/dom/getDOMRect");
+
+
+
+/**
+ * Вычисляет положение `GlobalLoader`
+ *
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает положение полоски `GlobalLoader`
+ */
+
+var useGlobalLoaderPosition = function useGlobalLoaderPosition(ref) {
+  var _getDOMRect = (0, _getDOMRect3.getDOMRect)(ref),left = _getDOMRect.left;
+  return { left: left };
+};
+
+/**
+ * Вычисляет ширину `GlobalLoader`
+ *
+ * @param status - статус `GlobalLoader`
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает ширину полоски `GlobalLoader`
+ */exports.useGlobalLoaderPosition = useGlobalLoaderPosition;
+
+var useGlobalLoaderWidth = function useGlobalLoaderWidth(
+status,
+ref)
+{var _ref$current, _ref$current$parentEl;
+  var _getDOMRect2 = (0, _getDOMRect3.getDOMRect)(ref),width = _getDOMRect2.width;
+  var _useState = (0, _react.useState)(0),startWidth = _useState[0],setStartWidth = _useState[1];
+  var fullWidth = ((_ref$current = ref.current) == null ? void 0 : (_ref$current$parentEl = _ref$current.parentElement) == null ? void 0 : _ref$current$parentEl.offsetWidth) || 0;
+  (0, _react.useEffect)(function () {
+    if (status === 'error') {
+      setStartWidth(width);
+    } else if (status === 'accept') {
+      setStartWidth(startWidth);
+    } else {
+      setStartWidth(0);
+    }
+  }, [status]);
+
+  return { width: width, startWidth: startWidth, fullWidth: fullWidth };
+};exports.useGlobalLoaderWidth = useGlobalLoaderWidth;

package/cjs/components/GlobalLoader/useParams.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useParams.ts"],"names":["useGlobalLoaderPosition","ref","left","useGlobalLoaderWidth","status","width","startWidth","setStartWidth","fullWidth","current","parentElement","offsetWidth"],"mappings":"+GAAA;;AAEA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;;AAEO,IAAMA,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,GAAD,EAA2C;AAChF,oBAAiB,6BAAWA,GAAX,CAAjB,CAAQC,IAAR,eAAQA,IAAR;AACA,SAAO,EAAEA,IAAI,EAAJA,IAAF,EAAP;AACD,CAHM;;AAKP;AACA;AACA;AACA;AACA;AACA;AACA,G;;AAEO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB;AAClCC,MADkC;AAElCH,GAFkC;AAG/B;AACH,qBAAkB,6BAAWA,GAAX,CAAlB,CAAQI,KAAR,gBAAQA,KAAR;AACA,kBAAoC,qBAAS,CAAT,CAApC,CAAOC,UAAP,gBAAmBC,aAAnB;AACA,MAAMC,SAAS,GAAG,iBAAAP,GAAG,CAACQ,OAAJ,2DAAaC,aAAb,2CAA4BC,WAA5B,KAA2C,CAA7D;AACA,wBAAU,YAAM;AACd,QAAIP,MAAM,KAAK,OAAf,EAAwB;AACtBG,MAAAA,aAAa,CAACF,KAAD,CAAb;AACD,KAFD,MAEO,IAAID,MAAM,KAAK,QAAf,EAAyB;AAC9BG,MAAAA,aAAa,CAACD,UAAD,CAAb;AACD,KAFM,MAEA;AACLC,MAAAA,aAAa,CAAC,CAAD,CAAb;AACD;AACF,GARD,EAQG,CAACH,MAAD,CARH;;AAUA,SAAO,EAAEC,KAAK,EAALA,KAAF,EAASC,UAAU,EAAVA,UAAT,EAAqBE,SAAS,EAATA,SAArB,EAAP;AACD,CAlBM,C","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { GlobalLoaderViewProps, GlobalLoaderViewRef } from './GlobalLoaderView';\n\n/**\n * Вычисляет положение `GlobalLoader`\n *\n * @param ref - ref `GlobalLoader`\n * @returns - возвращает положение полоски `GlobalLoader`\n */\n\nexport const useGlobalLoaderPosition = (ref: GlobalLoaderViewRef['refObject']) => {\n  const { left } = getDOMRect(ref);\n  return { left };\n};\n\n/**\n * Вычисляет ширину `GlobalLoader`\n *\n * @param status - статус `GlobalLoader`\n * @param ref - ref `GlobalLoader`\n * @returns - возвращает ширину полоски `GlobalLoader`\n */\n\nexport const useGlobalLoaderWidth = (\n  status: GlobalLoaderViewProps['status'],\n  ref: GlobalLoaderViewRef['refObject'],\n) => {\n  const { width } = getDOMRect(ref);\n  const [startWidth, setStartWidth] = useState(0);\n  const fullWidth = ref.current?.parentElement?.offsetWidth || 0;\n  useEffect(() => {\n    if (status === 'error') {\n      setStartWidth(width);\n    } else if (status === 'accept') {\n      setStartWidth(startWidth);\n    } else {\n      setStartWidth(0);\n    }\n  }, [status]);\n\n  return { width, startWidth, fullWidth };\n};\n"]}

package/cjs/components/Group/Group.d.ts

@@ -6,6 +6,7 @@ export interface GroupProps extends CommonProps {
 }
 export declare class Group extends React.Component<GroupProps> {
     static __KONTUR_REACT_UI__: string;
+    private setRootNode;
     static propTypes: {
         width: PropTypes.Requireable<string | number>;
     };