@skbkontur/react-ui 0.0.0-001618ff8c → 0.0.0-044e274f2c

package/lib/taskWithDelayAndMinimalDuration/taskWithDelayAndMinimalDuration.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { globalObject } from '@skbkontur/global-object';
+export var TaskWithDelayAndMinimalDuration = function TaskWithDelayAndMinimalDuration(initialValues) {
+  var _this = this;
+  this.isTaskActive = false;
+  this.setTimeoutBeforeTaskStart = function () {
+    _this.timeoutBeforeTaskStart = globalObject.setTimeout(function () {
+      _this.isTaskActive && _this.taskParams.taskStartCallback();
+      _this.clearTimeoutBeforeTaskStart();
+      _this.setTimeoutBeforeTaskStop();
+    }, _this.taskParams.delayBeforeTaskStart);
+  };
+  this.setTimeoutBeforeTaskStop = function () {
+    _this.timeoutBeforeTaskStop = globalObject.setTimeout(function () {
+      !_this.isTaskActive && _this.taskParams.taskStopCallback();
+      _this.clearTimeoutBeforeTaskStop();
+    }, _this.taskParams.durationOfTask);
+  };
+  this.clearTimeoutBeforeTaskStart = function () {
+    _this.timeoutBeforeTaskStart && globalObject.clearTimeout(_this.timeoutBeforeTaskStart);
+    _this.timeoutBeforeTaskStart = null;
+  };
+  this.clearTimeoutBeforeTaskStop = function () {
+    _this.timeoutBeforeTaskStop && globalObject.clearTimeout(_this.timeoutBeforeTaskStop);
+    _this.timeoutBeforeTaskStop = null;
+  };
+  this.start = function () {
+    if (_this.isTaskActive) {
+      return;
+    }
+    _this.isTaskActive = true;
+    if (_this.timeoutBeforeTaskStart) {
+      _this.clearTimeoutBeforeTaskStart();
+    }
+    _this.setTimeoutBeforeTaskStart();
+  };
+  this.update = function (updateData) {
+    _this.taskParams = _extends({}, _this.taskParams, updateData);
+  };
+  this.stop = function () {
+    if (!_this.isTaskActive) {
+      return;
+    }
+    _this.isTaskActive = false;
+    if (!_this.timeoutBeforeTaskStart && !_this.timeoutBeforeTaskStop) {
+      _this.taskParams.taskStopCallback();
+    }
+    if (_this.timeoutBeforeTaskStart) {
+      _this.clearTimeoutBeforeTaskStart();
+    }
+  };
+  this.clearTask = function () {
+    _this.isTaskActive = false;
+    _this.clearTimeoutBeforeTaskStart();
+    _this.clearTimeoutBeforeTaskStop();
+  };
+  this.taskParams = initialValues;
+};

package/lib/taskWithDelayAndMinimalDuration/taskWithDelayAndMinimalDuration.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["globalObject","TaskWithDelayAndMinimalDuration","initialValues","_this","isTaskActive","setTimeoutBeforeTaskStart","timeoutBeforeTaskStart","setTimeout","taskParams","taskStartCallback","clearTimeoutBeforeTaskStart","setTimeoutBeforeTaskStop","delayBeforeTaskStart","timeoutBeforeTaskStop","taskStopCallback","clearTimeoutBeforeTaskStop","durationOfTask","clearTimeout","start","update","updateData","_extends","stop","clearTask"],"sources":["taskWithDelayAndMinimalDuration.ts"],"sourcesContent":["import { globalObject, SafeTimer } from '@skbkontur/global-object';\n\nexport interface TaskWithDelayAndMinimalDurationProps {\n  delayBeforeTaskStart: number;\n  durationOfTask: number;\n  taskStartCallback: () => void;\n  taskStopCallback: () => void;\n}\n\nexport class TaskWithDelayAndMinimalDuration {\n  private timeoutBeforeTaskStart: SafeTimer;\n  private timeoutBeforeTaskStop: SafeTimer;\n  private taskParams: TaskWithDelayAndMinimalDurationProps;\n  private isTaskActive = false;\n\n  constructor(initialValues: TaskWithDelayAndMinimalDurationProps) {\n    this.taskParams = initialValues;\n  }\n\n  private setTimeoutBeforeTaskStart = () => {\n    this.timeoutBeforeTaskStart = globalObject.setTimeout(() => {\n      this.isTaskActive && this.taskParams.taskStartCallback();\n      this.clearTimeoutBeforeTaskStart();\n      this.setTimeoutBeforeTaskStop();\n    }, this.taskParams.delayBeforeTaskStart);\n  };\n\n  private setTimeoutBeforeTaskStop = () => {\n    this.timeoutBeforeTaskStop = globalObject.setTimeout(() => {\n      !this.isTaskActive && this.taskParams.taskStopCallback();\n      this.clearTimeoutBeforeTaskStop();\n    }, this.taskParams.durationOfTask);\n  };\n\n  private clearTimeoutBeforeTaskStart = () => {\n    this.timeoutBeforeTaskStart && globalObject.clearTimeout(this.timeoutBeforeTaskStart);\n    this.timeoutBeforeTaskStart = null;\n  };\n\n  private clearTimeoutBeforeTaskStop = () => {\n    this.timeoutBeforeTaskStop && globalObject.clearTimeout(this.timeoutBeforeTaskStop);\n    this.timeoutBeforeTaskStop = null;\n  };\n\n  public start = () => {\n    if (this.isTaskActive) {\n      return;\n    }\n\n    this.isTaskActive = true;\n\n    if (this.timeoutBeforeTaskStart) {\n      this.clearTimeoutBeforeTaskStart();\n    }\n\n    this.setTimeoutBeforeTaskStart();\n  };\n\n  public update = (updateData: Partial<TaskWithDelayAndMinimalDurationProps>) => {\n    this.taskParams = { ...this.taskParams, ...updateData };\n  };\n\n  public stop = () => {\n    if (!this.isTaskActive) {\n      return;\n    }\n\n    this.isTaskActive = false;\n\n    if (!this.timeoutBeforeTaskStart && !this.timeoutBeforeTaskStop) {\n      this.taskParams.taskStopCallback();\n    }\n\n    if (this.timeoutBeforeTaskStart) {\n      this.clearTimeoutBeforeTaskStart();\n    }\n  };\n\n  public clearTask = () => {\n    this.isTaskActive = false;\n    this.clearTimeoutBeforeTaskStart();\n    this.clearTimeoutBeforeTaskStop();\n  };\n}\n"],"mappings":"0DAAA,SAASA,YAAY,QAAmB,0BAA0B;;;;;;;;;AASlE,WAAaC,+BAA+B;;;;;;AAM1C,SAAAA,gCAAYC,aAAmD,EAAE,KAAAC,KAAA,aAFzDC,YAAY,GAAG,KAAK;;;;EAMpBC,yBAAyB,GAAG,YAAM;IACxCF,KAAI,CAACG,sBAAsB,GAAGN,YAAY,CAACO,UAAU,CAAC,YAAM;MAC1DJ,KAAI,CAACC,YAAY,IAAID,KAAI,CAACK,UAAU,CAACC,iBAAiB,CAAC,CAAC;MACxDN,KAAI,CAACO,2BAA2B,CAAC,CAAC;MAClCP,KAAI,CAACQ,wBAAwB,CAAC,CAAC;IACjC,CAAC,EAAER,KAAI,CAACK,UAAU,CAACI,oBAAoB,CAAC;EAC1C,CAAC;;EAEOD,wBAAwB,GAAG,YAAM;IACvCR,KAAI,CAACU,qBAAqB,GAAGb,YAAY,CAACO,UAAU,CAAC,YAAM;MACzD,CAACJ,KAAI,CAACC,YAAY,IAAID,KAAI,CAACK,UAAU,CAACM,gBAAgB,CAAC,CAAC;MACxDX,KAAI,CAACY,0BAA0B,CAAC,CAAC;IACnC,CAAC,EAAEZ,KAAI,CAACK,UAAU,CAACQ,cAAc,CAAC;EACpC,CAAC;;EAEON,2BAA2B,GAAG,YAAM;IAC1CP,KAAI,CAACG,sBAAsB,IAAIN,YAAY,CAACiB,YAAY,CAACd,KAAI,CAACG,sBAAsB,CAAC;IACrFH,KAAI,CAACG,sBAAsB,GAAG,IAAI;EACpC,CAAC;;EAEOS,0BAA0B,GAAG,YAAM;IACzCZ,KAAI,CAACU,qBAAqB,IAAIb,YAAY,CAACiB,YAAY,CAACd,KAAI,CAACU,qBAAqB,CAAC;IACnFV,KAAI,CAACU,qBAAqB,GAAG,IAAI;EACnC,CAAC;;EAEMK,KAAK,GAAG,YAAM;IACnB,IAAIf,KAAI,CAACC,YAAY,EAAE;MACrB;IACF;;IAEAD,KAAI,CAACC,YAAY,GAAG,IAAI;;IAExB,IAAID,KAAI,CAACG,sBAAsB,EAAE;MAC/BH,KAAI,CAACO,2BAA2B,CAAC,CAAC;IACpC;;IAEAP,KAAI,CAACE,yBAAyB,CAAC,CAAC;EAClC,CAAC;;EAEMc,MAAM,GAAG,UAACC,UAAyD,EAAK;IAC7EjB,KAAI,CAACK,UAAU,GAAAa,QAAA,KAAQlB,KAAI,CAACK,UAAU,EAAKY,UAAU,CAAE;EACzD,CAAC;;EAEME,IAAI,GAAG,YAAM;IAClB,IAAI,CAACnB,KAAI,CAACC,YAAY,EAAE;MACtB;IACF;;IAEAD,KAAI,CAACC,YAAY,GAAG,KAAK;;IAEzB,IAAI,CAACD,KAAI,CAACG,sBAAsB,IAAI,CAACH,KAAI,CAACU,qBAAqB,EAAE;MAC/DV,KAAI,CAACK,UAAU,CAACM,gBAAgB,CAAC,CAAC;IACpC;;IAEA,IAAIX,KAAI,CAACG,sBAAsB,EAAE;MAC/BH,KAAI,CAACO,2BAA2B,CAAC,CAAC;IACpC;EACF,CAAC;;EAEMa,SAAS,GAAG,YAAM;IACvBpB,KAAI,CAACC,YAAY,GAAG,KAAK;IACzBD,KAAI,CAACO,2BAA2B,CAAC,CAAC;IAClCP,KAAI,CAACY,0BAA0B,CAAC,CAAC;EACnC,CAAC,CAlEC,IAAI,CAACP,UAAU,GAAGN,aAAa,CACjC,CAAC","ignoreList":[]}

package/lib/taskWithDelayAndMinimalDuration.d.ts

@@ -0,0 +1,21 @@
+export interface TaskWithDelayAndMinimalDurationProps {
+    delayBeforeTaskStart: number;
+    durationOfTask: number;
+    taskStartCallback: () => void;
+    taskStopCallback: () => void;
+}
+export declare class TaskWithDelayAndMinimalDuration {
+    private timeoutBeforeTaskStart;
+    private timeoutBeforeTaskStop;
+    private taskParams;
+    private isTaskActive;
+    constructor(initialValues: TaskWithDelayAndMinimalDurationProps);
+    private setTimeoutBeforeTaskStart;
+    private setTimeoutBeforeTaskStop;
+    private clearTimeoutBeforeTaskStart;
+    private clearTimeoutBeforeTaskStop;
+    start: () => void;
+    update: (updateData: Partial<TaskWithDelayAndMinimalDurationProps>) => void;
+    stop: () => void;
+    clearTask: () => void;
+}

package/lib/theming/AnimationKeyframes/AnimationKeyframes.js

@@ -0,0 +1,18 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+export var getAnimationKeyframes = function getAnimationKeyframes(emotion) {
+  return {
+    spinnerCircleOffset: function spinnerCircleOffset() {
+      return emotion.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        0% { stroke-dashoffset: 231.25%; }\n        100% { stroke-dashoffset: 0%; }\n      "])));
+    },
+    spinnerCircleLength: function spinnerCircleLength() {
+      return emotion.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        0% { stroke-dasharray: 62.5%, 168.75%; }\n        50% {  stroke-dasharray: 187.5%, 43.75%; }\n        100% { stroke-dasharray: 62.5%, 168.75%; }\n      "])));
+    },
+    spinnerCircleRotate: function spinnerCircleRotate() {
+      return emotion.keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        100% { transform: rotate(360deg); }\n      "])));
+    },
+    spinnerColor: function spinnerColor(t) {
+      return emotion.keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        100%, 0% { stroke: ", "; }\n        40% { stroke: ", "; }\n        66% { stroke: ", "; }\n        80%, 90% { stroke: ", "; }\n      "])), t.red, t.yellow, t.green, t.brand);
+    }
+  };
+};

package/lib/theming/AnimationKeyframes/AnimationKeyframes.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getAnimationKeyframes","emotion","spinnerCircleOffset","keyframes","_templateObject","_taggedTemplateLiteralLoose","spinnerCircleLength","_templateObject2","spinnerCircleRotate","_templateObject3","spinnerColor","t","_templateObject4","red","yellow","green","brand"],"sources":["AnimationKeyframes.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme } from './Theme';\n\nexport const getAnimationKeyframes = (emotion: Emotion) => ({\n  spinnerCircleOffset() {\n    return emotion.keyframes`\n        0% { stroke-dashoffset: 231.25%; }\n        100% { stroke-dashoffset: 0%; }\n      `;\n  },\n  spinnerCircleLength() {\n    return emotion.keyframes`\n        0% { stroke-dasharray: 62.5%, 168.75%; }\n        50% {  stroke-dasharray: 187.5%, 43.75%; }\n        100% { stroke-dasharray: 62.5%, 168.75%; }\n      `;\n  },\n  spinnerCircleRotate() {\n    return emotion.keyframes`\n        100% { transform: rotate(360deg); }\n      `;\n  },\n  spinnerColor(t: Theme) {\n    return emotion.keyframes`\n        100%, 0% { stroke: ${t.red}; }\n        40% { stroke: ${t.yellow}; }\n        66% { stroke: ${t.green}; }\n        80%, 90% { stroke: ${t.brand}; }\n      `;\n  },\n});\n"],"mappings":";;;;AAIA,OAAO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,OAAgB,UAAM;IAC1DC,mBAAmB,WAAAA,oBAAA,EAAG;MACpB,OAAOD,OAAO,CAACE,SAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;IAI1B,CAAC;IACDC,mBAAmB,WAAAA,oBAAA,EAAG;MACpB,OAAOL,OAAO,CAACE,SAAS,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;;IAK1B,CAAC;IACDG,mBAAmB,WAAAA,oBAAA,EAAG;MACpB,OAAOP,OAAO,CAACE,SAAS,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;IAG1B,CAAC;IACDK,YAAY,WAAAA,aAACC,CAAQ,EAAE;MACrB,OAAOV,OAAO,CAACE,SAAS,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,2BAAA;MACCM,CAAC,CAACE,GAAG;MACVF,CAAC,CAACG,MAAM;MACRH,CAAC,CAACI,KAAK;MACFJ,CAAC,CAACK,KAAK;;IAElC;EACF,CAAC,EAAC","ignoreList":[]}

package/lib/theming/AnimationKeyframes/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/lib/theming/AnimationKeyframes.js",
+  "module": "AnimationKeyframes",
+  "types": "../AnimationKeyframes.d.ts",
+  "sideEffects": false
+}

package/lib/theming/AnimationKeyframes.d.ts

@@ -1,9 +1,8 @@
-import { ITheme } from './Theme';
-export declare const AnimationKeyframes: {
-    spinnerCloudOffset(t: ITheme): string;
-    spinnerCloudLength(t: ITheme): string;
-    spinnerCircleOffset(t: ITheme): string;
-    spinnerCircleLength(t: ITheme): string;
-    spinnerCircleRotate(t: ITheme): string;
-    spinnerColor(t: ITheme): string;
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from './Theme';
+export declare const getAnimationKeyframes: (emotion: Emotion) => {
+    spinnerCircleOffset(): string;
+    spinnerCircleLength(): string;
+    spinnerCircleRotate(): string;
+    spinnerColor(t: Theme): string;
 };

package/lib/theming/Emotion/Emotion.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import createEmotion from '@emotion/css/create-instance';
+import extraScopePlugin from 'stylis-plugin-extra-scope';
+import { globalObject } from '@skbkontur/global-object';
+import { createContext } from 'react';
+import { Upgrade } from "../../Upgrades";
+export var REACT_UI_PREFIX = Upgrade.getSpecificityClassName();
+var scope = new Array(Upgrade.getSpecificityLevel()).fill("." + REACT_UI_PREFIX).join('');
+export var getEmotion = function getEmotion(_ref) {
+  var _globalObject$documen;
+  var _ref$key = _ref.key,
+    key = _ref$key === void 0 ? REACT_UI_PREFIX : _ref$key,
+    container = _ref.container,
+    nonce = _ref.nonce;
+  return createEmotion({
+    key: key,
+    prepend: true,
+    stylisPlugins: scope ? [extraScopePlugin(scope)] : undefined,
+    container: container != null ? container : (_globalObject$documen = globalObject.document) == null ? void 0 : _globalObject$documen.head,
+    nonce: nonce
+  });
+};
+
+// breaking changes
+// todo убрать все экспорты, чтобы все компоненты управлялись через EmotionContext, пока оставили для обратной совместимости с icons/side-menu/Fias
+var _getEmotion = getEmotion({}),
+  injectGlobal = _getEmotion.injectGlobal,
+  cache = _getEmotion.cache,
+  css = _getEmotion.css,
+  cx = _getEmotion.cx,
+  keyframes = _getEmotion.keyframes,
+  getRegisteredStyles = _getEmotion.getRegisteredStyles,
+  hydrate = _getEmotion.hydrate,
+  sheet = _getEmotion.sheet,
+  merge = _getEmotion.merge,
+  flush = _getEmotion.flush;
+export { injectGlobal, cache, css, cx, keyframes, getRegisteredStyles, hydrate, sheet, merge, flush };
+function isZeroArgs(fn) {
+  return fn.length === 0;
+}
+var memoize = function memoize(fn, context) {
+  if (isZeroArgs(fn)) {
+    var isCalled = false;
+    var result;
+    return function () {
+      if (!isCalled) {
+        isCalled = true;
+        result = fn.call(context);
+      }
+      return result;
+    };
+  }
+  var cache = new WeakMap();
+  return function (arg) {
+    if (!cache.has(arg)) {
+      cache.set(arg, fn.call(context, arg));
+    }
+    return cache.get(arg);
+  };
+};
+export var memoizeStyle = function memoizeStyle(styles) {
+  Object.keys(styles).forEach(function (className) {
+    return styles[className] = memoize(styles[className], styles);
+  });
+  return styles;
+};
+export var prefix = function prefix(component, app) {
+  if (app === void 0) {
+    app = REACT_UI_PREFIX;
+  }
+  return function (classes) {
+    return Object.keys(classes).reduce(function (acc, key) {
+      var _extends2;
+      return _extends({}, acc, (_extends2 = {}, _extends2[key] = app + "-" + component + "-" + classes[key], _extends2));
+    }, {});
+  };
+};
+export var EmotionContext = /*#__PURE__*/createContext(getEmotion({}));
+export var EmotionConsumer = EmotionContext.Consumer;
+export var EmotionProvider = EmotionContext.Provider;
+EmotionContext.displayName = 'EmotionContext';
+EmotionContext.__KONTUR_REACT_UI__ = 'EmotionContext';

package/lib/theming/Emotion/Emotion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createEmotion","extraScopePlugin","globalObject","createContext","Upgrade","REACT_UI_PREFIX","getSpecificityClassName","scope","Array","getSpecificityLevel","fill","join","getEmotion","_ref","_globalObject$documen","_ref$key","key","container","nonce","prepend","stylisPlugins","undefined","document","head","_getEmotion","injectGlobal","cache","css","cx","keyframes","getRegisteredStyles","hydrate","sheet","merge","flush","isZeroArgs","fn","length","memoize","context","isCalled","result","call","WeakMap","arg","has","set","get","memoizeStyle","styles","Object","keys","forEach","className","prefix","component","app","classes","reduce","acc","_extends2","_extends","EmotionContext","EmotionConsumer","Consumer","EmotionProvider","Provider","displayName","__KONTUR_REACT_UI__"],"sources":["Emotion.ts"],"sourcesContent":["import createEmotion, { Emotion } from '@emotion/css/create-instance';\nimport extraScopePlugin from 'stylis-plugin-extra-scope';\nimport { globalObject } from '@skbkontur/global-object';\nimport { createContext } from 'react';\n\nimport { Upgrade } from '../Upgrades';\nimport { AnyObject, FunctionWithParams } from '../utils';\n\nimport { Theme } from './Theme';\n\nexport const REACT_UI_PREFIX = Upgrade.getSpecificityClassName();\n\nconst scope = new Array(Upgrade.getSpecificityLevel()).fill(`.${REACT_UI_PREFIX}`).join('');\n\nexport const getEmotion = ({\n  key = REACT_UI_PREFIX,\n  container,\n  nonce,\n}: {\n  container?: HTMLElement | null;\n  key?: string;\n  nonce?: string;\n}): Emotion =>\n  createEmotion({\n    key,\n    prepend: true,\n    stylisPlugins: scope ? [extraScopePlugin(scope)] : undefined,\n    container: container ?? globalObject.document?.head,\n    nonce,\n  });\n\n// breaking changes\n// todo убрать все экспорты, чтобы все компоненты управлялись через EmotionContext, пока оставили для обратной совместимости с icons/side-menu/Fias\nexport const { injectGlobal, cache, css, cx, keyframes, getRegisteredStyles, hydrate, sheet, merge, flush } =\n  getEmotion({});\n\nfunction isZeroArgs<R, T extends FunctionWithParams<R>>(fn: T | FunctionWithParams<R>): fn is () => R {\n  return fn.length === 0;\n}\n\nconst memoize = <A extends AnyObject, R>(\n  fn: (() => R) | ((arg: A) => R),\n  context: Record<string, unknown>,\n): (() => R) | ((arg: A) => R) => {\n  if (isZeroArgs(fn)) {\n    let isCalled = false;\n    let result: R;\n    return () => {\n      if (!isCalled) {\n        isCalled = true;\n        result = fn.call(context);\n      }\n      return result;\n    };\n  }\n\n  const cache = new WeakMap();\n  return (arg: A) => {\n    if (!cache.has(arg)) {\n      cache.set(arg, fn.call(context, arg));\n    }\n\n    return cache.get(arg);\n  };\n};\n\nexport const memoizeStyle = <S extends { [className: string]: (() => string) | ((t: Theme) => string) }>(\n  styles: S,\n): S => {\n  Object.keys(styles).forEach(\n    (className) => (styles[className as keyof S] = memoize(styles[className], styles) as S[keyof S]),\n  );\n  return styles;\n};\n\nexport const prefix =\n  (component: string, app = REACT_UI_PREFIX) =>\n  <T extends Record<string, string>>(classes: T): T =>\n    Object.keys(classes).reduce((acc, key) => {\n      return { ...acc, [key]: `${app}-${component}-${classes[key]}` };\n    }, {} as T);\n\nexport const EmotionContext = createContext<Emotion>(getEmotion({}));\nexport const EmotionConsumer = EmotionContext.Consumer;\nexport const EmotionProvider = EmotionContext.Provider;\n\nEmotionContext.displayName = 'EmotionContext';\nEmotionContext.__KONTUR_REACT_UI__ = 'EmotionContext';\n"],"mappings":"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","ignoreList":[]}

package/lib/theming/Emotion/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/lib/theming/Emotion.js",
+  "module": "Emotion",
+  "types": "../Emotion.d.ts",
+  "sideEffects": false
+}

package/lib/theming/Emotion.d.ts

@@ -1,13 +1,25 @@
-export declare const flush: () => void, hydrate: (ids: string[]) => void, cx: (...classNames: import("create-emotion").ClassNamesArg[]) => string, merge: (className: string) => string, getRegisteredStyles: (registeredStyles: string[], className: string) => string, injectGlobal: {
-    (template: TemplateStringsArray, ...args: import("create-emotion").Interpolation<undefined>[]): void;
-    (...args: import("create-emotion").Interpolation<undefined>[]): void;
-}, keyframes: {
-    (template: TemplateStringsArray, ...args: import("create-emotion").Interpolation<undefined>[]): string;
-    (...args: import("create-emotion").Interpolation<undefined>[]): string;
-}, css: {
-    (template: TemplateStringsArray, ...args: import("create-emotion").Interpolation<undefined>[]): string;
-    (...args: import("create-emotion").Interpolation<undefined>[]): string;
-}, sheet: import("create-emotion").StyleSheet, cache: import("create-emotion").EmotionCache;
-export declare function prefixer<T = {
-    [key: string]: string;
-}>(classes: T): T;
+import { Emotion } from '@emotion/css/create-instance';
+import { Theme } from './Theme';
+export declare const REACT_UI_PREFIX: string;
+export declare const getEmotion: ({ key, container, nonce, }: {
+    container?: HTMLElement | null | undefined;
+    key?: string | undefined;
+    nonce?: string | undefined;
+}) => Emotion;
+export declare const injectGlobal: {
+    (template: TemplateStringsArray, ...args: import("@emotion/serialize").CSSInterpolation[]): void;
+    (...args: import("@emotion/serialize").CSSInterpolation[]): void;
+}, cache: import("@emotion/utils").EmotionCache, css: {
+    (template: TemplateStringsArray, ...args: import("@emotion/serialize").CSSInterpolation[]): string;
+    (...args: import("@emotion/serialize").CSSInterpolation[]): string;
+}, cx: (...classNames: import("@emotion/css/create-instance").ClassNamesArg[]) => string, keyframes: {
+    (template: TemplateStringsArray, ...args: import("@emotion/serialize").CSSInterpolation[]): string;
+    (...args: import("@emotion/serialize").CSSInterpolation[]): string;
+}, getRegisteredStyles: (registeredStyles: string[], className: string) => string, hydrate: (ids: string[]) => void, sheet: import("@emotion/css/create-instance").CSSStyleSheet, merge: (className: string) => string, flush: () => void;
+export declare const memoizeStyle: <S extends {
+    [className: string]: (() => string) | ((t: Theme) => string);
+}>(styles: S) => S;
+export declare const prefix: (component: string, app?: string) => <T extends Record<string, string>>(classes: T) => T;
+export declare const EmotionContext: import("react").Context<Emotion>;
+export declare const EmotionConsumer: import("react").Consumer<Emotion>;
+export declare const EmotionProvider: import("react").Provider<Emotion>;

package/lib/theming/Theme/Theme.js

@@ -0,0 +1 @@
+export {};

package/lib/theming/Theme/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["Theme.ts"],"sourcesContent":["import { BasicLightTheme } from '../../internal/themes/BasicLightTheme';\n\nexport type Theme = Readonly<typeof BasicLightTheme>;\nexport type ThemeIn = Partial<typeof BasicLightTheme>;\n"],"mappings":"","ignoreList":[]}

package/lib/theming/Theme/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/lib/theming/Theme.js",
+  "module": "Theme",
+  "types": "../Theme.d.ts",
+  "sideEffects": false
+}

package/lib/theming/Theme.d.ts

@@ -1,9 +1,3 @@
-import DEFAULT_THEME from './themes/DefaultTheme';
-import FLAT_THEME from './themes/FlatTheme';
-declare type ThemeType = typeof DEFAULT_THEME & typeof FLAT_THEME;
-declare type ThemeInType = Partial<ThemeType>;
-export interface ITheme extends ThemeType {
-}
-export interface IThemeIn extends ThemeInType {
-}
-export {};
+import { BasicLightTheme } from '../../internal/themes/BasicLightTheme';
+export type Theme = Readonly<typeof BasicLightTheme>;
+export type ThemeIn = Partial<typeof BasicLightTheme>;

package/lib/theming/ThemeContext/ThemeContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { LIGHT_THEME } from "../themes/LightTheme";
+export var ThemeContext = /*#__PURE__*/React.createContext(LIGHT_THEME);
+ThemeContext.displayName = 'ThemeContext';
+ThemeContext.__KONTUR_REACT_UI__ = 'ThemeContext';

package/lib/theming/ThemeContext/ThemeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","LIGHT_THEME","ThemeContext","createContext","displayName","__KONTUR_REACT_UI__"],"sources":["ThemeContext.ts"],"sourcesContent":["import React from 'react';\n\nimport { LIGHT_THEME } from './themes/LightTheme';\n\nexport const ThemeContext = React.createContext(LIGHT_THEME);\n\nThemeContext.displayName = 'ThemeContext';\nThemeContext.__KONTUR_REACT_UI__ = 'ThemeContext';\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,WAAW,QAAQ,qBAAqB;;AAEjD,OAAO,IAAMC,YAAY,gBAAGF,KAAK,CAACG,aAAa,CAACF,WAAW,CAAC;;AAE5DC,YAAY,CAACE,WAAW,GAAG,cAAc;AACzCF,YAAY,CAACG,mBAAmB,GAAG,cAAc","ignoreList":[]}

package/lib/theming/ThemeContext/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/lib/theming/ThemeContext.js",
+  "module": "ThemeContext",
+  "types": "../ThemeContext.d.ts",
+  "sideEffects": false
+}

package/lib/theming/ThemeContext.d.ts

@@ -1,6 +1,2 @@
-import * as React from 'react';
-import { ITheme } from './Theme';
-export declare const ThemeContext: React.Context<ITheme>;
-export default ThemeContext;
-export declare const ThemeProvider: React.ProviderExoticComponent<React.ProviderProps<ITheme>>;
-export declare const ThemeConsumer: React.ExoticComponent<React.ConsumerProps<ITheme>>;
+import React from 'react';
+export declare const ThemeContext: React.Context<Readonly<Readonly<typeof import("../../internal/themes/BasicLightTheme").BasicLightThemeInternal>>>;

package/lib/theming/ThemeContext.md

@@ -0,0 +1,265 @@
+Для кастомизации компонентов используется ThemeContext, реализуемый через `React.Context<Theme>`
+
+Механизм работы: динамические стили генерируются в зависимости от темы в процессе render'а с помощью <a href="https://www.npmjs.com/package/emotion" target="_blank">emotion</a>, полученные классы добавляются в `className` соответствующих элементов.
+
+Тема задается с помощью `ThemeContext.Provider`:
+
+```jsx static
+import { ThemeContext } from '@skbkontur/react-ui';
+
+<ThemeContext.Provider value={theme}>{/* ... */}</ThemeContext.Provider>;
+```
+
+Использовать тему в компоненте можно через `ThemeContext.Consumer`:
+
+```jsx static
+import { ThemeContext, Button } from '@skbkontur/react-ui';
+
+<ThemeContext.Consumer>
+  {theme => /* ... */ }
+</ThemeContext.Consumer>
+```
+
+`useContext` в функциональных компонентах:
+
+```typescript static
+const theme = useContext(ThemeContext);
+```
+
+или задать `contextType` для класса:
+
+```typescript static
+public static contextType = ThemeContext;
+public context: Theme = this.context;
+```
+
+Список существующих тем:
+
+| Имя                     | Описание                                          |
+|-------------------------|---------------------------------------------------|
+| `LIGHT_THEME` | Текущая светлая тема, включена по умолчанию. Всегда включает в себя актуальные визуальные обновления. |
+| `DARK_THEME` | Текущая тёмная тема. Всегда включает в себя актуальные визуальные обновления. |
+| `LIGHT_THEME_2022_0` | Вариант светлой темы без актуальных визуальных обновлений. |
+| `DARK_THEME_2022_0` | Вариант тёмной темы без актуальных визуальных обновлений. |
+
+Если не нужны постоянные визуальные изменения, то можно использовать вариант `_2022_N`. В будущем, новые варианты с постфиксом `_2022_N` будут появлятся при обновлении дизайн системы.
+
+## Примеры использования
+
+### Создание собственной темы
+
+Собственные значения нужно передать в `ThemeFactory.create` и получившуюся тему можно использовать в `ThemeContext.Provider`. `ThemeFactory` расширяет переданный объект, задавая в качестве прототипа объект темы по умолчанию.
+
+```jsx harmony
+import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+const myTheme = ThemeFactory.create({ btnBorderRadiusSmall: '10px' });
+
+<ThemeContext.Provider value={myTheme}>
+  <div style={{height: '100%', background: '#fff', padding: '16px'}}>
+    <ShowcaseGroup title="My Theme" />
+  </div>
+</ThemeContext.Provider>;
+```
+
+Вторым аргументом `ThemeFactory.create` может принимать объект, который будет использован в качестве базовой темы.
+
+```jsx static
+import { ThemeFactory, LIGHT_THEME } from '@skbkontur/react-ui';
+
+const myFlatTheme = ThemeFactory.create({ btnBorderRadiusSmall: '10px' }, LIGHT_THEME);
+```
+
+### Использование темы в своих компонентах
+
+```jsx harmony
+import { useContext } from 'react';
+import { ThemeContext, Button } from '@skbkontur/react-ui';
+
+function ButtonLinkWrapper(props) {
+  const theme = useContext(ThemeContext);
+
+  return (
+    <Button use="link" {...props}>
+      {props.children}
+      <span style={{ color: theme.textColorDefault }}> ↗</span>
+    </Button>
+  );
+}
+
+<ButtonLinkWrapper>ButtonLinkWrapper</ButtonLinkWrapper>;
+```
+
+### Добавление своих переменных
+
+Если вы хотите дополнить одну из тем новыми переменными для своих компонентов, то вы можете использовать отдельный контекст в расширенным объектом темы.
+
+```jsx harmony
+import { useContext } from 'react';
+import { ThemeFactory, Button } from '@skbkontur/react-ui';
+
+const MyThemeContext = React.createContext(ThemeFactory.create({ myTextColor: 'orange' }));
+
+MyThemeContext.displayName = 'MyThemeContext';
+
+function ButtonLinkWrapper(props) {
+  const theme = useContext(MyThemeContext);
+
+  return (
+    <Button use="link" {...props}>
+      {props.children}
+      <span style={{ color: theme.myTextColor }}> ↗</span>
+    </Button>
+  );
+}
+
+<ButtonLinkWrapper>ButtonLinkWrapper</ButtonLinkWrapper>;
+```
+
+### Кастомизация в legacy-приложениях
+
+В случае, если контролы рендерятся через какую-то общую обертку, достаточно добавить в нее `ThemeContext.Provider` с вашей темой. В противном случае, вам подойдет метод `ThemeFactory.overrideDefaultTheme()`.
+
+```typescript static
+import theme from './theme/theme';
+import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
+
+ThemeFactory.overrideDefaultTheme(theme);
+```
+
+### Варианты кастомизации:
+
+Несколько тем одновременно:
+<br/>
+
+```jsx harmony
+import { ThemeContext, LIGHT_THEME, DARK_THEME } from '@skbkontur/react-ui';
+import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+const CombinedComponents = () => (
+  <>
+    <div style={{height: '100%', background: '#fff', padding: '16px'}}>
+      <ThemeContext.Provider value={LIGHT_THEME}>
+        <div>
+          <ShowcaseGroup title="LIGHT_THEME" />
+        </div>
+      </ThemeContext.Provider>
+    </div>
+    <div style={{height: '100%', background: '#000', padding: '16px'}}>
+      <ThemeContext.Provider value={DARK_THEME}>
+        <div>
+          <ShowcaseGroup title="DARK_THEME" />
+        </div>
+      </ThemeContext.Provider>
+    </div>
+  </ >
+);
+
+<CombinedComponents />;
+```
+
+Вложенные темы:
+<br/>
+
+```jsx harmony
+import { ThemeContext, LIGHT_THEME, DARK_THEME } from '@skbkontur/react-ui';
+import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+const wrapperStyles = {
+  border: '1px solid rgb(188, 187, 187)',
+  padding: '0 15px 15px',
+  marginTop: 25,
+};
+
+const NestedThemes = () => (
+  <ThemeContext.Provider value={ LIGHT_THEME }>
+    <div style={{ ...wrapperStyles, width: 750, background: '#fff' }}>
+      <ShowcaseGroup title="LIGHT_THEME" />
+        <ThemeContext.Provider value={ DARK_THEME }>
+          <div style={{ ...wrapperStyles, background: '#000', color: '#fff' }}>
+            <ShowcaseGroup title="DARK_THEME" />
+          </div>
+        </ThemeContext.Provider>
+    </div>
+  </ThemeContext.Provider>
+);
+
+<NestedThemes />;
+```
+
+## Кастомизация @skbkontur/react-ui-addons
+
+Компоненты `@skbkontur/react-ui-addons` так же поддерживают кастомизацию через `ThemeContext` из `@skbkontur/react-ui`. Достаточно переопределить нужные переменные, которые перечислены на страницах компонентов в [докумендации аддонов](https://ui.gitlab-pages.kontur.host/docs/#/react-ui-addons).
+
+```tsx static
+import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+import { Logotype, AddonsThemeIn } from '@skbkontur/react-ui-addons';
+
+const myTheme = ThemeFactory.create<AddonsThemeIn>({
+  logoColor: 'black',
+});
+
+<ThemeContext.Provider value={myTheme}>
+  <Logotype />
+</ThemeContext.Provider>;
+```
+
+## Дополнительно
+
+### ColorFunctions.ts / DimensionFunctions.ts
+
+Несколько функций по работе с цветом вынесены из less в js, их можно использовать в своих темах (_ColorFunctions.ts_):
+
+```typescript static
+import { ColorFunctions } from '@skbkontur/react-ui'
+
+ColorFunctions.lighten(colorString: string, amount: number | string, method?: 'absolute' | 'relative'): string
+ColorFunctions.darken(colorString: string, amount: number | string, method?: 'absolute' | 'relative'): string
+ColorFunctions.contrast(colorString: string, darkString?: string, lightString?: string, threshold: number = 0.43): string
+ColorFunctions.red(colorString: string): string
+ColorFunctions.green(colorString: string): string
+ColorFunctions.blue(colorString: string): string
+ColorFunctions.alpha(colorString: string): string
+ColorFunctions.isValid(colorString: string): boolean // проверяет, можно ли распарсить строку в цвет
+```
+
+Документацию по их работе можно найти на сайте [less](http://lesscss.org/functions/#color-operations).
+В качестве colorString можно передать цвет в одном из форматов: `keyword`, `hex`, `rgb(r, g, b)`, `rgba(r, g, b, a)`, `hsl(h, s, l)`, `hsla(h, s, l, a)`.
+В качестве `amount` можно передать строку вида 'N%' или число от 0 до 1.
+Все значения больше или меньше возможных обрезаются. Например, для `rgba(300, -100, 123, 20)` `r=255, g=0, b=123, a=1`.
+Если распарсить `colorString` не получилось - выбрасывается исключение.
+Если это возможно, результат возвращается в том же виде, что и входная строка:
+
+```typescript static
+import { ColorFunctions } from '@skbkontur/react-ui'
+
+ColorFunctions.lighten('hsl(90, 0.8, 0.2)', '20%') === 'hsl(90, 0.8, 0.4)';
+ColorFunctions.lighten('rgba(50, 50, 50, 0.2)', '20%') === 'rgba(102, 102, 102, 0.2)';
+ColorFunctions.lighten('#80e619', 0.2) === '#b3f075';
+ColorFunctions.lighten('crimson', '20%') === '#f16581';
+```
+
+Для работы с размерами предусмотрена одна функция (_DimensionFunctions.ts_):
+
+```typescript static
+shift(value: string, shift: string): string
+
+// пример
+import { DimensionFunctions } from '@skbkontur/react-ui'
+
+DimensionFunctions.shift('100%', '-20') === '80%'
+DimensionFunctions.shift('2em', '+2') === '4em'
+DimensionFunctions.shift('12', '+1') === '13px'  //если единица измерения не указана - используется px
+DimensionFunctions.shift('10.2', '12.333451') === '22.5335px' //дробная часть округляется до 4 знаков
+```
+
+### Список кастомизируемых компонентов
+
+Посмотреть, какие компоненты можно кастомизировать, а также увидеть, какие переменные используются в каждом из них, можно в [таблице](#/Customization/ThemeShowcase)
+Информация собирается в рантайме с помощью `Proxy`, поэтому в IE таблица не отображается.
+
+### Playground
+
+Внутренний компонент `Playground` (_components/internal/ThemePlayground/Playground.tsx_) можно использовать для построения своей темы.
+Для удобства в редакторе добавлено действие "вывести тему в консоль".