@skbkontur/react-ui 4.0.6 → 4.1.2

package/internal/RenderContainer/RenderInnerContainer/RenderInnerContainer.js

@@ -1,6 +1,8 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
-import ReactDOM from 'react-dom'; // Заглушка нужна для корректной гидрации порталов после SSR,
+import ReactDOM from 'react-dom';
+import propTypes from 'prop-types';
+import { safePropTypesInstanceOf } from "../../../lib/SSRSafe"; // Заглушка нужна для корректной гидрации порталов после SSR,
 // которую реакт сам пока не поддерживает.
 // @see https://github.com/facebook/react/issues/13097
 // А также для вставки актуального render-container-id на клиенте.
@@ -63,4 +65,11 @@ export var RenderInnerContainer = /*#__PURE__*/function (_React$Component) {
 
   return RenderInnerContainer;
 }(React.Component);
-RenderInnerContainer.__KONTUR_REACT_UI__ = 'RenderInnerContainer';
+RenderInnerContainer.__KONTUR_REACT_UI__ = 'RenderInnerContainer';
+Portal.propTypes = {
+  container: safePropTypesInstanceOf(function () {
+    return HTMLElement;
+  }),
+  rt_rootID: propTypes.string.isRequired,
+  children: propTypes.node.isRequired
+};

package/internal/RenderContainer/RenderInnerContainer/RenderInnerContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RenderInnerContainer.tsx"],"names":["React","ReactDOM","SSRPlaceholder","Portal","container","rt_rootID","children","createPortal","RenderInnerContainer","render","props","anchor","domContainer","rootId","inner","Component","__KONTUR_REACT_UI__"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,wBAAM,gCAAQ,WAAQ,iBAAhB,GAAN,EAAvB;;AAEA,OAAO,IAAMC,MAA4C,GAAG,SAA/CA,MAA+C,OAAwC,KAArCC,SAAqC,QAArCA,SAAqC,CAA1BC,SAA0B,QAA1BA,SAA0B,CAAfC,QAAe,QAAfA,QAAe;AAClG;AACA;AACE,wBAAC,KAAD,CAAO,QAAP;AACGF,IAAAA,SAAS,gBAAGH,QAAQ,CAACM,YAAT,CAAsBD,QAAtB,EAAgCF,SAAhC,CAAH,gBAAgD,oBAAC,cAAD,OAD5D;AAEGA,IAAAA,SAAS,gBAAG,kCAAU,4BAA0BC,SAApC,GAAH,gBAAuD,oBAAC,cAAD,OAFnE,CADF;;;AAMD,CARM;;AAUP,WAAaG,oBAAb;;;AAGSC,EAAAA,MAHT,GAGE,kBAAgB;AACd,sBAAmD,KAAKC,KAAxD,CAAQC,MAAR,eAAQA,MAAR,CAAgBL,QAAhB,eAAgBA,QAAhB,CAA0BM,YAA1B,eAA0BA,YAA1B,CAAwCC,MAAxC,eAAwCA,MAAxC;AACA,QAAIC,KAAK,GAAGH,MAAZ;;AAEA,QAAIL,QAAJ,EAAc;AACZQ,MAAAA,KAAK;AACH,0BAAC,KAAD,CAAO,QAAP;AACGH,MAAAA,MADH;AAEE,0BAAC,MAAD,IAAQ,GAAG,EAAC,YAAZ,EAAyB,SAAS,EAAEE,MAApC,EAA4C,SAAS,EAAED,YAAvD;AACGN,MAAAA,QADH,CAFF,CADF;;;;AAQD;;AAED,WAAOQ,KAAP;AACD,GAnBH,+BAA0Cd,KAAK,CAACe,SAAhD,EAAaP,oB,CACGQ,mB,GAAsB,sB","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { PortalProps, RenderContainerProps } from './RenderContainerTypes';\n\ninterface RenderInnerContainerProps extends RenderContainerProps {\n  domContainer: Nullable<HTMLElement>;\n  rootId: string;\n}\n\n// Заглушка нужна для корректной гидрации порталов после SSR,\n// которую реакт сам пока не поддерживает.\n// @see https://github.com/facebook/react/issues/13097\n// А также для вставки актуального render-container-id на клиенте.\n//\n// Дело в том, что во время гидрации, структура HTML на сервере\n// и на клиенте должна совпадать, иначе возможны артефакты.\n// Алгоритм там примерно такой. Клиент во время гидрации идет\n// по этим двум деревьям и сравнивает узлы. Элементы разных типов\n// он подменяет на свои. А те, что совпадают, он оставляет как есть\n// вместе со всеми атрибутами, навесив только обработчики событий.\n//\n// Поэтому, для портала, который рендерится только на клиенте,\n// нужно использовать серверную заглушку, чтобы при гидрации\n// он не испортил какой-то другой элемент. Null не подходит,\n// т.к. на сервере он тоже не рендерится.\n// А элемент с render-container-id нужно отрендерить с нуля.\n\nconst SSRPlaceholder = () => <script data-id=\"ssr-placeholder\" />;\n\nexport const Portal: React.FunctionComponent<PortalProps> = ({ container, rt_rootID, children }) => {\n  // container exists only in browser\n  return (\n    <React.Fragment>\n      {container ? ReactDOM.createPortal(children, container) : <SSRPlaceholder />}\n      {container ? <noscript data-render-container-id={rt_rootID} /> : <SSRPlaceholder />}\n    </React.Fragment>\n  );\n};\n\nexport class RenderInnerContainer extends React.Component<RenderInnerContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderInnerContainer';\n\n  public render() {\n    const { anchor, children, domContainer, rootId } = this.props;\n    let inner = anchor;\n\n    if (children) {\n      inner = (\n        <React.Fragment>\n          {anchor}\n          <Portal key=\"portal-ref\" rt_rootID={rootId} container={domContainer}>\n            {children}\n          </Portal>\n        </React.Fragment>\n      );\n    }\n\n    return inner;\n  }\n}\n"]}
+{"version":3,"sources":["RenderInnerContainer.tsx"],"names":["React","ReactDOM","propTypes","safePropTypesInstanceOf","SSRPlaceholder","Portal","container","rt_rootID","children","createPortal","RenderInnerContainer","render","props","anchor","domContainer","rootId","inner","Component","__KONTUR_REACT_UI__","HTMLElement","string","isRequired","node"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;AACA,OAAOC,SAAP,MAAsB,YAAtB;;;AAGA,SAASC,uBAAT,QAAwC,mBAAxC;;;;;;;;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,wBAAM,gCAAQ,WAAQ,iBAAhB,GAAN,EAAvB;;AAEA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAS,OAAqD,KAAlDC,SAAkD,QAAlDA,SAAkD,CAAvCC,SAAuC,QAAvCA,SAAuC,CAA5BC,QAA4B,QAA5BA,QAA4B;AACzE;AACA;AACE,wBAAC,KAAD,CAAO,QAAP;AACGF,IAAAA,SAAS,gBAAGL,QAAQ,CAACQ,YAAT,CAAsBD,QAAtB,EAAgCF,SAAhC,CAAH,gBAAgD,oBAAC,cAAD,OAD5D;AAEGA,IAAAA,SAAS,gBAAG,kCAAU,4BAA0BC,SAApC,GAAH,gBAAuD,oBAAC,cAAD,OAFnE,CADF;;;AAMD,CARM;;AAUP,WAAaG,oBAAb;;;AAGSC,EAAAA,MAHT,GAGE,kBAAgB;AACd,sBAAmD,KAAKC,KAAxD,CAAQC,MAAR,eAAQA,MAAR,CAAgBL,QAAhB,eAAgBA,QAAhB,CAA0BM,YAA1B,eAA0BA,YAA1B,CAAwCC,MAAxC,eAAwCA,MAAxC;AACA,QAAIC,KAAK,GAAGH,MAAZ;;AAEA,QAAIL,QAAJ,EAAc;AACZQ,MAAAA,KAAK;AACH,0BAAC,KAAD,CAAO,QAAP;AACGH,MAAAA,MADH;AAEE,0BAAC,MAAD,IAAQ,GAAG,EAAC,YAAZ,EAAyB,SAAS,EAAEE,MAApC,EAA4C,SAAS,EAAED,YAAvD;AACGN,MAAAA,QADH,CAFF,CADF;;;;AAQD;;AAED,WAAOQ,KAAP;AACD,GAnBH,+BAA0ChB,KAAK,CAACiB,SAAhD,EAAaP,oB,CACGQ,mB,GAAsB,sB;;;AAqBtCb,MAAM,CAACH,SAAP,GAAmB;AACjBI,EAAAA,SAAS,EAAEH,uBAAuB,CAAC,oBAAMgB,WAAN,EAAD,CADjB;AAEjBZ,EAAAA,SAAS,EAAEL,SAAS,CAACkB,MAAV,CAAiBC,UAFX;AAGjBb,EAAAA,QAAQ,EAAEN,SAAS,CAACoB,IAAV,CAAeD,UAHR,EAAnB","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport propTypes from 'prop-types';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\n\nimport { PortalProps, RenderContainerProps } from './RenderContainerTypes';\n\ninterface RenderInnerContainerProps extends RenderContainerProps {\n  domContainer: Nullable<HTMLElement>;\n  rootId: string;\n}\n\n// Заглушка нужна для корректной гидрации порталов после SSR,\n// которую реакт сам пока не поддерживает.\n// @see https://github.com/facebook/react/issues/13097\n// А также для вставки актуального render-container-id на клиенте.\n//\n// Дело в том, что во время гидрации, структура HTML на сервере\n// и на клиенте должна совпадать, иначе возможны артефакты.\n// Алгоритм там примерно такой. Клиент во время гидрации идет\n// по этим двум деревьям и сравнивает узлы. Элементы разных типов\n// он подменяет на свои. А те, что совпадают, он оставляет как есть\n// вместе со всеми атрибутами, навесив только обработчики событий.\n//\n// Поэтому, для портала, который рендерится только на клиенте,\n// нужно использовать серверную заглушку, чтобы при гидрации\n// он не испортил какой-то другой элемент. Null не подходит,\n// т.к. на сервере он тоже не рендерится.\n// А элемент с render-container-id нужно отрендерить с нуля.\n\nconst SSRPlaceholder = () => <script data-id=\"ssr-placeholder\" />;\n\nexport const Portal = ({ container, rt_rootID, children }: PortalProps) => {\n  // container exists only in browser\n  return (\n    <React.Fragment>\n      {container ? ReactDOM.createPortal(children, container) : <SSRPlaceholder />}\n      {container ? <noscript data-render-container-id={rt_rootID} /> : <SSRPlaceholder />}\n    </React.Fragment>\n  );\n};\n\nexport class RenderInnerContainer extends React.Component<RenderInnerContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderInnerContainer';\n\n  public render() {\n    const { anchor, children, domContainer, rootId } = this.props;\n    let inner = anchor;\n\n    if (children) {\n      inner = (\n        <React.Fragment>\n          {anchor}\n          <Portal key=\"portal-ref\" rt_rootID={rootId} container={domContainer}>\n            {children}\n          </Portal>\n        </React.Fragment>\n      );\n    }\n\n    return inner;\n  }\n}\n\nPortal.propTypes = {\n  container: safePropTypesInstanceOf(() => HTMLElement),\n  rt_rootID: propTypes.string.isRequired,\n  children: propTypes.node.isRequired,\n};\n"]}

package/internal/RenderContainer/RenderInnerContainer.d.ts

@@ -1,11 +1,19 @@
 import React from 'react';
+import propTypes from 'prop-types';
 import { Nullable } from '../../typings/utility-types';
 import { PortalProps, RenderContainerProps } from './RenderContainerTypes';
 interface RenderInnerContainerProps extends RenderContainerProps {
     domContainer: Nullable<HTMLElement>;
     rootId: string;
 }
-export declare const Portal: React.FunctionComponent<PortalProps>;
+export declare const Portal: {
+    ({ container, rt_rootID, children }: PortalProps): JSX.Element;
+    propTypes: {
+        container: propTypes.Requireable<HTMLElement>;
+        rt_rootID: propTypes.Validator<string>;
+        children: propTypes.Validator<string | number | boolean | {} | propTypes.ReactElementLike | propTypes.ReactNodeArray>;
+    };
+};
 export declare class RenderInnerContainer extends React.Component<RenderInnerContainerProps> {
     static __KONTUR_REACT_UI__: string;
     render(): React.ReactNode;

package/internal/RenderLayer/RenderLayer/RenderLayer.js

@@ -77,7 +77,11 @@ export var RenderLayer = rootNode(_class = (_temp = _class2 = /*#__PURE__*/funct
     var _this$props$getAnchor, _this$props;
 
     var rootNode = getRootNode(this) || ((_this$props$getAnchor = (_this$props = this.props).getAnchorElement) == null ? void 0 : _this$props$getAnchor.call(_this$props));
-    if (!rootNode) return;
+
+    if (!rootNode) {
+      return;
+    }
+
     this.focusOutsideListenerToken = listenFocusOutside(function () {
       return [rootNode];
     }, this.handleFocusOutside);

package/internal/RenderLayer/RenderLayer/RenderLayer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RenderLayer.tsx"],"names":["React","listen","listenFocusOutside","containsTargetOrRenderContainer","CommonWrapper","getRootNode","rootNode","RenderLayer","focusOutsideListenerToken","handleFocusOutside","event","props","onFocusOutside","handleNativeDocClick","target","srcElement","node","getAnchorElement","Element","onClickOutside","componentDidMount","active","attachListeners","componentDidUpdate","prevProps","detachListeners","componentWillUnmount","render","setRootNode","Children","only","children","window","addEventListener","document","documentElement","remove","removeEventListener","Component","__KONTUR_REACT_UI__","propTypes","propName","componentName","Error","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { listen as listenFocusOutside, containsTargetOrRenderContainer } from '../../lib/listenFocusOutside';\nimport { CommonProps, CommonWrapper } from '../CommonWrapper';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { Nullable } from '../../typings/utility-types';\n\nexport interface RenderLayerProps extends CommonProps {\n  children: JSX.Element;\n  onClickOutside?: (e: Event) => void;\n  onFocusOutside?: (e: Event) => void;\n  active?: boolean;\n  getAnchorElement?: () => Nullable<HTMLElement>;\n}\n\n@rootNode\nexport class RenderLayer extends React.Component<RenderLayerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderLayer';\n\n  public static propTypes = {\n    active(props: RenderLayerProps, propName: keyof RenderLayerProps, componentName: string) {\n      const { active, onClickOutside, onFocusOutside } = props;\n      if (active && !(onClickOutside || onFocusOutside)) {\n        return new Error(\n          `[${componentName}]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.`,\n        );\n      }\n    },\n  };\n\n  public static defaultProps = {\n    active: true,\n  };\n\n  private focusOutsideListenerToken: {\n    remove: () => void;\n  } | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.props.active) {\n      this.attachListeners();\n    }\n  }\n\n  public componentDidUpdate(prevProps: RenderLayerProps) {\n    if (!prevProps.active && this.props.active) {\n      this.attachListeners();\n    }\n    if (prevProps.active && !this.props.active) {\n      this.detachListeners();\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.props.active) {\n      this.detachListeners();\n    }\n  }\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {React.Children.only(this.props.children)}\n      </CommonWrapper>\n    );\n  }\n\n  private attachListeners() {\n    const rootNode = getRootNode(this) || this.props.getAnchorElement?.();\n    if (!rootNode) return;\n    this.focusOutsideListenerToken = listenFocusOutside(() => [rootNode], this.handleFocusOutside);\n    window.addEventListener('blur', this.handleFocusOutside);\n    document.addEventListener(\n      'ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private detachListeners() {\n    if (this.focusOutsideListenerToken) {\n      this.focusOutsideListenerToken.remove();\n      this.focusOutsideListenerToken = null;\n    }\n\n    window.removeEventListener('blur', this.handleFocusOutside);\n    document.removeEventListener(\n      'ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private handleFocusOutside = (event: Event) => {\n    if (this.props.onFocusOutside) {\n      this.props.onFocusOutside(event);\n    }\n  };\n\n  private handleNativeDocClick = (event: Event) => {\n    const target = event.target || event.srcElement;\n    const node = getRootNode(this) || getRootNode(this.props.getAnchorElement?.());\n\n    if (!node || (target instanceof Element && containsTargetOrRenderContainer(target)(node))) {\n      return;\n    }\n\n    if (this.props.onClickOutside) {\n      this.props.onClickOutside(event);\n    }\n  };\n}\n"]}
+{"version":3,"sources":["RenderLayer.tsx"],"names":["React","listen","listenFocusOutside","containsTargetOrRenderContainer","CommonWrapper","getRootNode","rootNode","RenderLayer","focusOutsideListenerToken","handleFocusOutside","event","props","onFocusOutside","handleNativeDocClick","target","srcElement","node","getAnchorElement","Element","onClickOutside","componentDidMount","active","attachListeners","componentDidUpdate","prevProps","detachListeners","componentWillUnmount","render","setRootNode","Children","only","children","window","addEventListener","document","documentElement","remove","removeEventListener","Component","__KONTUR_REACT_UI__","propTypes","propName","componentName","Error","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { listen as listenFocusOutside, containsTargetOrRenderContainer } from '../../lib/listenFocusOutside';\nimport { CommonProps, CommonWrapper } from '../CommonWrapper';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { Nullable } from '../../typings/utility-types';\n\nexport interface RenderLayerProps extends CommonProps {\n  children: JSX.Element;\n  onClickOutside?: (e: Event) => void;\n  onFocusOutside?: (e: Event) => void;\n  active?: boolean;\n  getAnchorElement?: () => Nullable<HTMLElement>;\n}\n\n@rootNode\nexport class RenderLayer extends React.Component<RenderLayerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderLayer';\n\n  public static propTypes = {\n    active(props: RenderLayerProps, propName: keyof RenderLayerProps, componentName: string) {\n      const { active, onClickOutside, onFocusOutside } = props;\n      if (active && !(onClickOutside || onFocusOutside)) {\n        return new Error(\n          `[${componentName}]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.`,\n        );\n      }\n    },\n  };\n\n  public static defaultProps = {\n    active: true,\n  };\n\n  private focusOutsideListenerToken: {\n    remove: () => void;\n  } | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.props.active) {\n      this.attachListeners();\n    }\n  }\n\n  public componentDidUpdate(prevProps: RenderLayerProps) {\n    if (!prevProps.active && this.props.active) {\n      this.attachListeners();\n    }\n    if (prevProps.active && !this.props.active) {\n      this.detachListeners();\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.props.active) {\n      this.detachListeners();\n    }\n  }\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {React.Children.only(this.props.children)}\n      </CommonWrapper>\n    );\n  }\n\n  private attachListeners() {\n    const rootNode = getRootNode(this) || this.props.getAnchorElement?.();\n    if (!rootNode) {\n      return;\n    }\n\n    this.focusOutsideListenerToken = listenFocusOutside(() => [rootNode], this.handleFocusOutside);\n    window.addEventListener('blur', this.handleFocusOutside);\n    document.addEventListener(\n      'ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private detachListeners() {\n    if (this.focusOutsideListenerToken) {\n      this.focusOutsideListenerToken.remove();\n      this.focusOutsideListenerToken = null;\n    }\n\n    window.removeEventListener('blur', this.handleFocusOutside);\n    document.removeEventListener(\n      'ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private handleFocusOutside = (event: Event) => {\n    if (this.props.onFocusOutside) {\n      this.props.onFocusOutside(event);\n    }\n  };\n\n  private handleNativeDocClick = (event: Event) => {\n    const target = event.target || event.srcElement;\n    const node = getRootNode(this) || getRootNode(this.props.getAnchorElement?.());\n\n    if (!node || (target instanceof Element && containsTargetOrRenderContainer(target)(node))) {\n      return;\n    }\n\n    if (this.props.onClickOutside) {\n      this.props.onClickOutside(event);\n    }\n  };\n}\n"]}

package/internal/ThemePlayground/Playground/Playground.js

@@ -1,7 +1,6 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
 import SearchIcon from '@skbkontur/react-icons/Search';
-import CardIcon from '@skbkontur/react-icons/Card';
 import LinkIcon from '@skbkontur/react-icons/Link';
 import OkIcon from '@skbkontur/react-icons/Ok';
 import ErrorIcon from '@skbkontur/react-icons/Error';
@@ -25,7 +24,6 @@ import { TogglePlayground } from "../TogglePlayground";
 import { SwitcherPlayground } from "../SwitcherPlayground";
 import { FxInputPlayground } from "../FxInputPlayground";
 import { CurrencyInputPlayground } from "../CurrencyInputPlayground";
-import { SelectPlayground } from "../SelectPlayground";
 import { getComponentsFromPropsList } from "../helpers";
 import { CheckboxPlayground } from "../CheckboxPlayground";
 import { RadioPlayground } from "../RadioPlayground";
@@ -33,6 +31,7 @@ import { PagingPlayground } from "../PagingPlayground";
 import { HintPlayground } from "../HintPlayground";
 import { ComponentsGroup } from "../ComponentsGroup";
 import { styles } from "../Playground.styles";
+import { SizesGroup } from "../SizesGroup";
 var useSticky = !isTestEnv;
 export var Playground = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Playground, _React$Component);
@@ -65,43 +64,26 @@ export var Playground = /*#__PURE__*/function (_React$Component) {
         case ThemeType.DefaultOld:
           return ThemeType.DefaultOld;
 
+        case ThemeType.Theme2022:
+          return ThemeType.Theme2022;
+
+        case ThemeType.Theme2022Dark:
+          return ThemeType.Theme2022Dark;
+
         default:
           return ThemeType.Default;
       }
     };
 
     _this.renderSizesGroup = function () {
-      var Group = function Group(_ref) {
-        var size = _ref.size;
-        return /*#__PURE__*/React.createElement(Gapped, {
-          wrap: true,
-          verticalAlign: "middle",
-          gap: 10
-        }, /*#__PURE__*/React.createElement(SelectPlayground, {
-          width: 120,
-          size: size
-        }), /*#__PURE__*/React.createElement(Input, {
-          rightIcon: /*#__PURE__*/React.createElement(CardIcon, null),
-          placeholder: 'Text value',
-          size: size
-        }), /*#__PURE__*/React.createElement(Button, {
-          width: 120,
-          size: size
-        }, "Button"), /*#__PURE__*/React.createElement(Button, {
-          icon: /*#__PURE__*/React.createElement(LinkIcon, null),
-          use: 'link',
-          size: size
-        }, "Button like a link"));
-      };
-
       return /*#__PURE__*/React.createElement(ComponentsGroup, {
         title: 'Размеры',
         theme: _this.theme
-      }, /*#__PURE__*/React.createElement(Group, {
+      }, /*#__PURE__*/React.createElement(SizesGroup, {
         size: 'small'
-      }), /*#__PURE__*/React.createElement(Group, {
+      }), /*#__PURE__*/React.createElement(SizesGroup, {
         size: 'medium'
-      }), /*#__PURE__*/React.createElement(Group, {
+      }), /*#__PURE__*/React.createElement(SizesGroup, {
         size: 'large'
       }));
     };
@@ -351,7 +333,11 @@ export var Playground = /*#__PURE__*/function (_React$Component) {
       id: ThemeType.DefaultOld
     }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F 3.0"), /*#__PURE__*/React.createElement(Tabs.Tab, {
       id: ThemeType.FlatOld
-    }, "\u041F\u043B\u043E\u0441\u043A\u0430\u044F 3.0"))), /*#__PURE__*/React.createElement(Link, {
+    }, "\u041F\u043B\u043E\u0441\u043A\u0430\u044F 3.0"), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      id: ThemeType.Theme2022
+    }, "\u041D\u043E\u0432\u0430\u044F 2022"), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      id: ThemeType.Theme2022Dark
+    }, "\u041D\u043E\u0432\u0430\u044F 2022 \u0422\u0451\u043C\u043D\u0430\u044F"))), /*#__PURE__*/React.createElement(Link, {
       onClick: onEditLinkClick
     }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443")));
   };

package/internal/ThemePlayground/Playground/Playground.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Playground.tsx"],"names":["React","SearchIcon","CardIcon","LinkIcon","OkIcon","ErrorIcon","TrashIcon","HelpDotIcon","Button","Tabs","Gapped","Link","Input","ThemeContext","Tooltip","Sticky","isTestEnv","cx","FileUploader","ThemeType","TokenInputPlayground","DatePickerPlayground","TogglePlayground","SwitcherPlayground","FxInputPlayground","CurrencyInputPlayground","SelectPlayground","getComponentsFromPropsList","CheckboxPlayground","RadioPlayground","PagingPlayground","HintPlayground","ComponentsGroup","styles","useSticky","Playground","stopEl","createRef","renderTabsGroup","getStickyStop","renderTabs","getCurrentTab","props","currentThemeType","Dark","FlatOld","DefaultOld","Default","renderSizesGroup","Group","size","theme","renderLinksGroup","propsList","icon","children","use","disabled","renderButtonsGroup","arrow","width","loading","renderInputsGroup","placeholder","error","warning","fromProps","renderTokenInputsGroup","renderOtherInputsGroup","renderSwitchersGroup","renderControlsGroup","renderHintsGroup","renderTooltip","tooltipContent","renderPaging","renderFileUploader","renderStickyStopElement","height","current","render","renderMain","wrapperClassName","playground","playgroundWrapper","onThemeChange","onEditLinkClick","tabsOuterWrapperStyle","background","bgDefault","tabsOuterWrapperClass","tabsWrapper","stickyTabsWrapper","tabsInnerWrapper","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport SearchIcon from '@skbkontur/react-icons/Search';\nimport CardIcon from '@skbkontur/react-icons/Card';\nimport LinkIcon from '@skbkontur/react-icons/Link';\nimport OkIcon from '@skbkontur/react-icons/Ok';\nimport ErrorIcon from '@skbkontur/react-icons/Error';\nimport TrashIcon from '@skbkontur/react-icons/Trash';\nimport HelpDotIcon from '@skbkontur/react-icons/HelpDot';\n\nimport { Button, ButtonProps } from '../../components/Button';\nimport { Tabs } from '../../components/Tabs';\nimport { Gapped } from '../../components/Gapped';\nimport { Link, LinkProps } from '../../components/Link';\nimport { Input, InputProps } from '../../components/Input';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Tooltip } from '../../components/Tooltip';\nimport { Sticky } from '../../components/Sticky';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { cx } from '../../lib/theming/Emotion';\nimport { FileUploader } from '../../components/FileUploader';\n\nimport { ThemeType } from './constants';\nimport { TokenInputPlayground } from './TokenInputPlayground';\nimport { DatePickerPlayground } from './AnotherInputsPlayground';\nimport { TogglePlayground } from './TogglePlayground';\nimport { SwitcherPlayground } from './SwitcherPlayground';\nimport { FxInputPlayground } from './FxInputPlayground';\nimport { CurrencyInputPlayground } from './CurrencyInputPlayground';\nimport { SelectPlayground } from './SelectPlayground';\nimport { getComponentsFromPropsList } from './helpers';\nimport { CheckboxPlayground } from './CheckboxPlayground';\nimport { RadioPlayground } from './RadioPlayground';\nimport { PagingPlayground } from './PagingPlayground';\nimport { HintPlayground } from './HintPlayground';\nimport { ComponentsGroup } from './ComponentsGroup';\nimport { styles } from './Playground.styles';\n\nconst useSticky = !isTestEnv;\n\nexport interface PlaygroundProps {\n  currentThemeType: ThemeType;\n  onThemeChange: (value: string) => void;\n  onEditLinkClick: () => void;\n}\n\nexport class Playground extends React.Component<PlaygroundProps, {}> {\n  private theme!: Theme;\n  private stopEl = React.createRef<HTMLDivElement>();\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n  private renderMain() {\n    const wrapperClassName = cx(styles.playground(), styles.playgroundWrapper(this.theme));\n    return (\n      <div className={wrapperClassName}>\n        <Gapped vertical gap={50}>\n          {this.renderTabsGroup()}\n          {this.renderSizesGroup()}\n          {this.renderLinksGroup()}\n          {this.renderButtonsGroup()}\n          {this.renderInputsGroup()}\n          {this.renderOtherInputsGroup()}\n          {this.renderTokenInputsGroup()}\n          {this.renderSwitchersGroup()}\n          {this.renderControlsGroup()}\n        </Gapped>\n        {this.renderStickyStopElement()}\n        <Gapped vertical gap={50}>\n          {this.renderHintsGroup()}\n          {this.renderTooltip()}\n          {this.renderPaging()}\n          {this.renderFileUploader()}\n        </Gapped>\n      </div>\n    );\n  }\n\n  private renderTabsGroup = () => {\n    return useSticky ? (\n      <Sticky side={'top'} getStop={this.getStickyStop}>\n        {this.renderTabs()}\n      </Sticky>\n    ) : (\n      this.renderTabs()\n    );\n  };\n\n  private renderTabs() {\n    const { onThemeChange, onEditLinkClick } = this.props;\n    const tabsOuterWrapperStyle = { background: this.theme.bgDefault };\n    const tabsOuterWrapperClass = cx({\n      [styles.tabsWrapper(this.theme)]: true,\n      [styles.stickyTabsWrapper(this.theme)]: useSticky,\n    });\n\n    return (\n      <div style={tabsOuterWrapperStyle} className={tabsOuterWrapperClass}>\n        <Gapped gap={40}>\n          <Tabs value={this.getCurrentTab()} onValueChange={onThemeChange} vertical={false}>\n            <div className={styles.tabsInnerWrapper(this.theme)}>\n              <Tabs.Tab id={ThemeType.Default}>Дефолтная</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Dark}>Темная</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.DefaultOld}>Дефолтная 3.0</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.FlatOld}>Плоская 3.0</Tabs.Tab>\n            </div>\n          </Tabs>\n          <Link onClick={onEditLinkClick}>Настроить тему</Link>\n        </Gapped>\n      </div>\n    );\n  }\n\n  private getCurrentTab = () => {\n    switch (this.props.currentThemeType) {\n      case ThemeType.Dark:\n        return ThemeType.Dark;\n      case ThemeType.FlatOld:\n        return ThemeType.FlatOld;\n      case ThemeType.DefaultOld:\n        return ThemeType.DefaultOld;\n      default:\n        return ThemeType.Default;\n    }\n  };\n\n  private renderSizesGroup = () => {\n    const Group = ({ size }: { size: 'small' | 'medium' | 'large' }) => (\n      <Gapped wrap verticalAlign=\"middle\" gap={10}>\n        <SelectPlayground width={120} size={size} />\n        <Input rightIcon={<CardIcon />} placeholder={'Text value'} size={size} />\n        <Button width={120} size={size}>\n          Button\n        </Button>\n        <Button icon={<LinkIcon />} use={'link'} size={size}>\n          Button like a link\n        </Button>\n      </Gapped>\n    );\n\n    return (\n      <ComponentsGroup title={'Размеры'} theme={this.theme}>\n        <Group size={'small'} />\n        <Group size={'medium'} />\n        <Group size={'large'} />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderLinksGroup = () => {\n    const propsList: LinkProps[] = [\n      { icon: <LinkIcon />, children: 'Enabled' },\n      { icon: <OkIcon />, use: 'success', children: 'Success' },\n      { icon: <ErrorIcon />, use: 'danger', children: 'Danger' },\n      { icon: <TrashIcon />, use: 'grayed', children: 'Grayed' },\n      { icon: <TrashIcon />, children: 'Disabled', disabled: true },\n    ];\n    return (\n      <ComponentsGroup title={'Ссылки'} theme={this.theme}>\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\n          {getComponentsFromPropsList(<Link />, propsList)}\n        </Gapped>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderButtonsGroup = () => {\n    const propsList: ButtonProps[] = [\n      { children: 'Default' },\n      { children: 'Primary', use: 'primary' },\n      { children: 'Danger', use: 'danger' },\n      { children: 'Pay', use: 'pay' },\n      { children: 'Success', use: 'success' },\n      { children: 'Disabled', disabled: true },\n      { children: 'Back', arrow: 'left', size: 'medium', width: 110 },\n      { children: 'Forward', arrow: true, size: 'medium', use: 'primary', width: 110 },\n      { children: 'Loading', size: 'medium', loading: true },\n    ];\n\n    return (\n      <ComponentsGroup title={'Кнопки'} theme={this.theme}>\n        {getComponentsFromPropsList(<Button width={120} size={'small'} />, propsList)}\n      </ComponentsGroup>\n    );\n  };\n\n  private renderInputsGroup = () => {\n    const propsList: InputProps[] = [\n      { placeholder: 'Enabled' },\n      { placeholder: 'Error', error: true },\n      { placeholder: 'Warning', warning: true },\n      { placeholder: 'Disabled', disabled: true },\n    ];\n    const fromProps = getComponentsFromPropsList(<Input width={120} />, propsList);\n    return (\n      <ComponentsGroup title={'Поле ввода'} theme={this.theme}>\n        <Input width={380} prefix=\"https://kontur.ru/search?query=\" rightIcon={<SearchIcon />} />\n        <div>\n          <Gapped gap={10}>{fromProps}</Gapped>\n        </div>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderTokenInputsGroup = () => {\n    return (\n      <ComponentsGroup title={'Поле с токеном'} theme={this.theme}>\n        <TokenInputPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderOtherInputsGroup = () => {\n    return (\n      <ComponentsGroup title={'Прочие поля'} theme={this.theme}>\n        <CurrencyInputPlayground />\n        <FxInputPlayground />\n        <DatePickerPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderSwitchersGroup = () => {\n    return (\n      <ComponentsGroup title={'Переключатели'} theme={this.theme}>\n        <SwitcherPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderControlsGroup = () => {\n    return (\n      <ComponentsGroup title={'Радио, чекбоксы'} theme={this.theme}>\n        <Gapped verticalAlign={'top'} gap={60}>\n          <CheckboxPlayground />\n          <RadioPlayground />\n          <TogglePlayground />\n        </Gapped>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderHintsGroup = () => {\n    return (\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\n        <HintPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderTooltip = () => {\n    const tooltipContent = () => (\n      <div className={styles.tooltipContent()}>\n        {'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно'}\n      </div>\n    );\n    return (\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\n        <Tooltip render={tooltipContent} pos=\"right middle\" trigger={'opened'} disableAnimations={true}>\n          <Link icon={<HelpDotIcon />} />\n        </Tooltip>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderPaging = () => {\n    return (\n      <ComponentsGroup title={'Пейджинг'} theme={this.theme}>\n        <PagingPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderFileUploader = () => {\n    return (\n      <ComponentsGroup title={'FileUploader'} theme={this.theme}>\n        <FileUploader multiple />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderStickyStopElement = () => {\n    return <div ref={this.stopEl} style={{ height: 50 }} />;\n  };\n\n  private getStickyStop = () => this.stopEl.current;\n}\n"]}
+{"version":3,"sources":["Playground.tsx"],"names":["React","SearchIcon","LinkIcon","OkIcon","ErrorIcon","TrashIcon","HelpDotIcon","Button","Tabs","Gapped","Link","Input","ThemeContext","Tooltip","Sticky","isTestEnv","cx","FileUploader","ThemeType","TokenInputPlayground","DatePickerPlayground","TogglePlayground","SwitcherPlayground","FxInputPlayground","CurrencyInputPlayground","getComponentsFromPropsList","CheckboxPlayground","RadioPlayground","PagingPlayground","HintPlayground","ComponentsGroup","styles","SizesGroup","useSticky","Playground","stopEl","createRef","renderTabsGroup","getStickyStop","renderTabs","getCurrentTab","props","currentThemeType","Dark","FlatOld","DefaultOld","Theme2022","Theme2022Dark","Default","renderSizesGroup","theme","renderLinksGroup","propsList","icon","children","use","disabled","renderButtonsGroup","arrow","size","width","loading","renderInputsGroup","placeholder","error","warning","fromProps","renderTokenInputsGroup","renderOtherInputsGroup","renderSwitchersGroup","renderControlsGroup","renderHintsGroup","renderTooltip","tooltipContent","renderPaging","renderFileUploader","renderStickyStopElement","height","current","render","renderMain","wrapperClassName","playground","playgroundWrapper","onThemeChange","onEditLinkClick","tabsOuterWrapperStyle","background","bgDefault","tabsOuterWrapperClass","tabsWrapper","stickyTabsWrapper","tabsInnerWrapper","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport SearchIcon from '@skbkontur/react-icons/Search';\nimport LinkIcon from '@skbkontur/react-icons/Link';\nimport OkIcon from '@skbkontur/react-icons/Ok';\nimport ErrorIcon from '@skbkontur/react-icons/Error';\nimport TrashIcon from '@skbkontur/react-icons/Trash';\nimport HelpDotIcon from '@skbkontur/react-icons/HelpDot';\n\nimport { Button, ButtonProps } from '../../components/Button';\nimport { Tabs } from '../../components/Tabs';\nimport { Gapped } from '../../components/Gapped';\nimport { Link, LinkProps } from '../../components/Link';\nimport { Input, InputProps } from '../../components/Input';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Tooltip } from '../../components/Tooltip';\nimport { Sticky } from '../../components/Sticky';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { cx } from '../../lib/theming/Emotion';\nimport { FileUploader } from '../../components/FileUploader';\n\nimport { ThemeType } from './constants';\nimport { TokenInputPlayground } from './TokenInputPlayground';\nimport { DatePickerPlayground } from './AnotherInputsPlayground';\nimport { TogglePlayground } from './TogglePlayground';\nimport { SwitcherPlayground } from './SwitcherPlayground';\nimport { FxInputPlayground } from './FxInputPlayground';\nimport { CurrencyInputPlayground } from './CurrencyInputPlayground';\nimport { getComponentsFromPropsList } from './helpers';\nimport { CheckboxPlayground } from './CheckboxPlayground';\nimport { RadioPlayground } from './RadioPlayground';\nimport { PagingPlayground } from './PagingPlayground';\nimport { HintPlayground } from './HintPlayground';\nimport { ComponentsGroup } from './ComponentsGroup';\nimport { styles } from './Playground.styles';\nimport { SizesGroup } from './SizesGroup';\n\nconst useSticky = !isTestEnv;\n\nexport interface PlaygroundProps {\n  currentThemeType: ThemeType;\n  onThemeChange: (value: string) => void;\n  onEditLinkClick: () => void;\n}\n\nexport class Playground extends React.Component<PlaygroundProps, {}> {\n  private theme!: Theme;\n  private stopEl = React.createRef<HTMLDivElement>();\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n  private renderMain() {\n    const wrapperClassName = cx(styles.playground(), styles.playgroundWrapper(this.theme));\n    return (\n      <div className={wrapperClassName}>\n        <Gapped vertical gap={50}>\n          {this.renderTabsGroup()}\n          {this.renderSizesGroup()}\n          {this.renderLinksGroup()}\n          {this.renderButtonsGroup()}\n          {this.renderInputsGroup()}\n          {this.renderOtherInputsGroup()}\n          {this.renderTokenInputsGroup()}\n          {this.renderSwitchersGroup()}\n          {this.renderControlsGroup()}\n        </Gapped>\n        {this.renderStickyStopElement()}\n        <Gapped vertical gap={50}>\n          {this.renderHintsGroup()}\n          {this.renderTooltip()}\n          {this.renderPaging()}\n          {this.renderFileUploader()}\n        </Gapped>\n      </div>\n    );\n  }\n\n  private renderTabsGroup = () => {\n    return useSticky ? (\n      <Sticky side={'top'} getStop={this.getStickyStop}>\n        {this.renderTabs()}\n      </Sticky>\n    ) : (\n      this.renderTabs()\n    );\n  };\n\n  private renderTabs() {\n    const { onThemeChange, onEditLinkClick } = this.props;\n    const tabsOuterWrapperStyle = { background: this.theme.bgDefault };\n    const tabsOuterWrapperClass = cx({\n      [styles.tabsWrapper(this.theme)]: true,\n      [styles.stickyTabsWrapper(this.theme)]: useSticky,\n    });\n\n    return (\n      <div style={tabsOuterWrapperStyle} className={tabsOuterWrapperClass}>\n        <Gapped gap={40}>\n          <Tabs value={this.getCurrentTab()} onValueChange={onThemeChange} vertical={false}>\n            <div className={styles.tabsInnerWrapper(this.theme)}>\n              <Tabs.Tab id={ThemeType.Default}>Дефолтная</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Dark}>Темная</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.DefaultOld}>Дефолтная 3.0</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.FlatOld}>Плоская 3.0</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Theme2022}>Новая 2022</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Theme2022Dark}>Новая 2022 Тёмная</Tabs.Tab>\n            </div>\n          </Tabs>\n          <Link onClick={onEditLinkClick}>Настроить тему</Link>\n        </Gapped>\n      </div>\n    );\n  }\n\n  private getCurrentTab = () => {\n    switch (this.props.currentThemeType) {\n      case ThemeType.Dark:\n        return ThemeType.Dark;\n      case ThemeType.FlatOld:\n        return ThemeType.FlatOld;\n      case ThemeType.DefaultOld:\n        return ThemeType.DefaultOld;\n      case ThemeType.Theme2022:\n        return ThemeType.Theme2022;\n      case ThemeType.Theme2022Dark:\n        return ThemeType.Theme2022Dark;\n      default:\n        return ThemeType.Default;\n    }\n  };\n\n  private renderSizesGroup = () => {\n    return (\n      <ComponentsGroup title={'Размеры'} theme={this.theme}>\n        <SizesGroup size={'small'} />\n        <SizesGroup size={'medium'} />\n        <SizesGroup size={'large'} />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderLinksGroup = () => {\n    const propsList: LinkProps[] = [\n      { icon: <LinkIcon />, children: 'Enabled' },\n      { icon: <OkIcon />, use: 'success', children: 'Success' },\n      { icon: <ErrorIcon />, use: 'danger', children: 'Danger' },\n      { icon: <TrashIcon />, use: 'grayed', children: 'Grayed' },\n      { icon: <TrashIcon />, children: 'Disabled', disabled: true },\n    ];\n    return (\n      <ComponentsGroup title={'Ссылки'} theme={this.theme}>\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\n          {getComponentsFromPropsList(<Link />, propsList)}\n        </Gapped>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderButtonsGroup = () => {\n    const propsList: ButtonProps[] = [\n      { children: 'Default' },\n      { children: 'Primary', use: 'primary' },\n      { children: 'Danger', use: 'danger' },\n      { children: 'Pay', use: 'pay' },\n      { children: 'Success', use: 'success' },\n      { children: 'Disabled', disabled: true },\n      { children: 'Back', arrow: 'left', size: 'medium', width: 110 },\n      { children: 'Forward', arrow: true, size: 'medium', use: 'primary', width: 110 },\n      { children: 'Loading', size: 'medium', loading: true },\n    ];\n\n    return (\n      <ComponentsGroup title={'Кнопки'} theme={this.theme}>\n        {getComponentsFromPropsList(<Button width={120} size={'small'} />, propsList)}\n      </ComponentsGroup>\n    );\n  };\n\n  private renderInputsGroup = () => {\n    const propsList: InputProps[] = [\n      { placeholder: 'Enabled' },\n      { placeholder: 'Error', error: true },\n      { placeholder: 'Warning', warning: true },\n      { placeholder: 'Disabled', disabled: true },\n    ];\n    const fromProps = getComponentsFromPropsList(<Input width={120} />, propsList);\n    return (\n      <ComponentsGroup title={'Поле ввода'} theme={this.theme}>\n        <Input width={380} prefix=\"https://kontur.ru/search?query=\" rightIcon={<SearchIcon />} />\n        <div>\n          <Gapped gap={10}>{fromProps}</Gapped>\n        </div>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderTokenInputsGroup = () => {\n    return (\n      <ComponentsGroup title={'Поле с токеном'} theme={this.theme}>\n        <TokenInputPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderOtherInputsGroup = () => {\n    return (\n      <ComponentsGroup title={'Прочие поля'} theme={this.theme}>\n        <CurrencyInputPlayground />\n        <FxInputPlayground />\n        <DatePickerPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderSwitchersGroup = () => {\n    return (\n      <ComponentsGroup title={'Переключатели'} theme={this.theme}>\n        <SwitcherPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderControlsGroup = () => {\n    return (\n      <ComponentsGroup title={'Радио, чекбоксы'} theme={this.theme}>\n        <Gapped verticalAlign={'top'} gap={60}>\n          <CheckboxPlayground />\n          <RadioPlayground />\n          <TogglePlayground />\n        </Gapped>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderHintsGroup = () => {\n    return (\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\n        <HintPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderTooltip = () => {\n    const tooltipContent = () => (\n      <div className={styles.tooltipContent()}>\n        {'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно'}\n      </div>\n    );\n    return (\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\n        <Tooltip render={tooltipContent} pos=\"right middle\" trigger={'opened'} disableAnimations>\n          <Link icon={<HelpDotIcon />} />\n        </Tooltip>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderPaging = () => {\n    return (\n      <ComponentsGroup title={'Пейджинг'} theme={this.theme}>\n        <PagingPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderFileUploader = () => {\n    return (\n      <ComponentsGroup title={'FileUploader'} theme={this.theme}>\n        <FileUploader multiple />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderStickyStopElement = () => {\n    return <div ref={this.stopEl} style={{ height: 50 }} />;\n  };\n\n  private getStickyStop = () => this.stopEl.current;\n}\n"]}

package/internal/ThemePlayground/SizesGroup/SizesGroup.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import CardIcon from '@skbkontur/react-icons/Card';
+import LinkIcon from '@skbkontur/react-icons/Link';
+import { Input } from "../../../components/Input";
+import { Gapped } from "../../../components/Gapped";
+import { Button } from "../../../components/Button";
+import { SelectPlayground } from "../SelectPlayground";
+export var SizesGroup = function SizesGroup(_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/React.createElement(Gapped, {
+    wrap: true,
+    verticalAlign: "middle",
+    gap: 10
+  }, /*#__PURE__*/React.createElement(SelectPlayground, {
+    width: 120,
+    size: size
+  }), /*#__PURE__*/React.createElement(Input, {
+    rightIcon: /*#__PURE__*/React.createElement(CardIcon, null),
+    placeholder: 'Text value',
+    size: size
+  }), /*#__PURE__*/React.createElement(Button, {
+    width: 120,
+    size: size
+  }, "Button"), /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(LinkIcon, null),
+    use: 'link',
+    size: size
+  }, "Button like a link"));
+};

package/internal/ThemePlayground/SizesGroup/SizesGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SizesGroup.tsx"],"names":["React","CardIcon","LinkIcon","Input","Gapped","Button","SelectPlayground","SizesGroup","size"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,6BAArB;AACA,OAAOC,QAAP,MAAqB,6BAArB;;AAEA,SAASC,KAAT,QAAsB,wBAAtB;AACA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,MAAT,QAAuB,yBAAvB;;AAEA,SAASC,gBAAT,QAAiC,oBAAjC;;;;AAIA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,YAAGC,IAAH,QAAGA,IAAH;AACxB,wBAAC,MAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,QAA3B,EAAoC,GAAG,EAAE,EAAzC;AACE,wBAAC,gBAAD,IAAkB,KAAK,EAAE,GAAzB,EAA8B,IAAI,EAAEA,IAApC,GADF;AAEE,wBAAC,KAAD,IAAO,SAAS,eAAE,oBAAC,QAAD,OAAlB,EAAgC,WAAW,EAAE,YAA7C,EAA2D,IAAI,EAAEA,IAAjE,GAFF;AAGE,wBAAC,MAAD,IAAQ,KAAK,EAAE,GAAf,EAAoB,IAAI,EAAEA,IAA1B,aAHF;;;AAME,wBAAC,MAAD,IAAQ,IAAI,eAAE,oBAAC,QAAD,OAAd,EAA4B,GAAG,EAAE,MAAjC,EAAyC,IAAI,EAAEA,IAA/C,yBANF,CADwB,GAAnB","sourcesContent":["import React from 'react';\nimport CardIcon from '@skbkontur/react-icons/Card';\nimport LinkIcon from '@skbkontur/react-icons/Link';\n\nimport { Input } from '../../components/Input';\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\n\nimport { SelectPlayground } from './SelectPlayground';\n\nexport type SizesGroupProps = { size: 'small' | 'medium' | 'large' };\n\nexport const SizesGroup = ({ size }: SizesGroupProps) => (\n  <Gapped wrap verticalAlign=\"middle\" gap={10}>\n    <SelectPlayground width={120} size={size} />\n    <Input rightIcon={<CardIcon />} placeholder={'Text value'} size={size} />\n    <Button width={120} size={size}>\n      Button\n    </Button>\n    <Button icon={<LinkIcon />} use={'link'} size={size}>\n      Button like a link\n    </Button>\n  </Gapped>\n);\n"]}

package/internal/ThemePlayground/SizesGroup/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/ThemePlayground/SizesGroup.js",
+  "module": "SizesGroup",
+  "types": "../SizesGroup.d.ts",
+  "sideEffects": false
+}

package/internal/ThemePlayground/SizesGroup.d.ts

@@ -0,0 +1,4 @@
+export declare type SizesGroupProps = {
+    size: 'small' | 'medium' | 'large';
+};
+export declare const SizesGroup: ({ size }: SizesGroupProps) => JSX.Element;

package/internal/ThemePlayground/ThemeContextPlayground/ThemeContextPlayground.js

@@ -12,7 +12,9 @@ import { Gapped } from "../../../components/Gapped";
 import { ComboBox } from "../../../components/ComboBox";
 import { Link } from "../../../components/Link";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
+import { THEME_2022 } from "../../../lib/theming/themes/Theme2022";
 import { findPropertyDescriptor } from "../../../lib/theming/ThemeHelpers";
+import { THEME_2022_DARK } from "../../../lib/theming/themes/Theme2022Dark";
 import { ThemeEditor } from "../ThemeEditor";
 import { styles } from "../Playground.styles";
 import { Playground } from "../Playground";
@@ -36,6 +38,12 @@ export var ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {
     }, {
       value: ThemeType.FlatOld,
       label: 'Старая плоская'
+    }, {
+      value: ThemeType.Theme2022,
+      label: 'Новая 2022'
+    }, {
+      value: ThemeType.Theme2022Dark,
+      label: 'Новая 2022 Тёмная'
     }];
 
     _this.renderSidePage = function () {
@@ -192,13 +200,17 @@ export var ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {
         "default": DEFAULT_THEME,
         defaultOld: DEFAULT_THEME_8PX_OLD,
         dark: DARK_THEME,
-        flatOld: FLAT_THEME_8PX_OLD
+        flatOld: FLAT_THEME_8PX_OLD,
+        theme2022: THEME_2022,
+        theme2022Dark: THEME_2022_DARK
       },
       themesErrors: {
         "default": {},
         defaultOld: {},
         dark: {},
-        flatOld: {}
+        flatOld: {},
+        theme2022: {},
+        theme2022Dark: {}
       }
     };
     return _this;

package/internal/ThemePlayground/ThemeContextPlayground/ThemeContextPlayground.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ThemeContextPlayground.tsx"],"names":["React","ThemeContext","ThemeFactory","FLAT_THEME_8PX_OLD","DEFAULT_THEME_8PX_OLD","DEFAULT_THEME","DARK_THEME","SidePage","Gapped","ComboBox","Link","ColorFunctions","findPropertyDescriptor","ThemeEditor","styles","Playground","ThemeType","ThemeContextPlayground","props","editableThemesItems","value","Default","label","Dark","DefaultOld","FlatOld","renderSidePage","state","currentTheme","themesErrors","editingThemeItem","themes","themeErrors","handleClose","editorHeaderWrapper","getEditableThemesItems","handleEditingThemeSwitch","fontSize","marginTop","handelGetTheme","sidePageBody","handleThemeVariableChange","themeObject","getKeys","forEach","key","descriptor","Object","getOwnPropertyDescriptor","get","console","log","JSON","stringify","handleOpen","setState","editorOpened","find","i","currentThemeType","handleThemeChange","themeType","variable","editingThemeType","theme","currentValue","canSetVariable","isValid","nextThemeErrors","stateUpdate","result","changeThemeVariable","query","Promise","resolve","filter","toLowerCase","includes","item","variableName","variableValue","enumerable","configurable","set","defineProperty","create","defaultOld","dark","flatOld","render","Component"],"mappings":"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","sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { FLAT_THEME_8PX_OLD } from '../../lib/theming/themes/FlatTheme8pxOld';\nimport { DEFAULT_THEME_8PX_OLD } from '../../lib/theming/themes/DefaultTheme8pxOld';\nimport { DEFAULT_THEME } from '../../lib/theming/themes/DefaultTheme';\nimport { DARK_THEME } from '../../lib/theming/themes/DarkTheme';\nimport { SidePage } from '../../components/SidePage';\nimport { Gapped } from '../../components/Gapped';\nimport { ComboBox } from '../../components/ComboBox';\nimport { Link } from '../../components/Link';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Writeable } from '../../typings/utility-types';\nimport { findPropertyDescriptor } from '../../lib/theming/ThemeHelpers';\n\nimport { ThemeEditor } from './ThemeEditor';\nimport { styles } from './Playground.styles';\nimport { Playground } from './Playground';\nimport { ThemeType } from './constants';\n\ninterface PlaygroundState {\n  editorOpened: boolean;\n  editingThemeItem?: EditingThemeItem;\n  themes: Themes;\n  themesErrors: ThemesErrors;\n  currentTheme: Theme;\n  currentThemeType: ThemeType;\n}\ninterface Themes {\n  default: Theme;\n  dark: Theme;\n  defaultOld: Theme;\n  flatOld: Theme;\n}\ninterface ThemesErrors {\n  default: ThemeErrorsType;\n  dark: ThemeErrorsType;\n  defaultOld: ThemeErrorsType;\n  flatOld: ThemeErrorsType;\n}\ninterface EditingThemeItem {\n  value: ThemeType;\n  label: string;\n}\ninterface PlaygroundProps {\n  children?: ReactNode;\n}\nexport type ThemeErrorsType = Writeable<{ [key in keyof Theme]?: boolean }>;\n\nexport class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {\n  private readonly editableThemesItems = [\n    { value: ThemeType.Default, label: 'Дефолтная' },\n    { value: ThemeType.Dark, label: 'Темная' },\n    { value: ThemeType.DefaultOld, label: 'Старая дефолтная' },\n    { value: ThemeType.FlatOld, label: 'Старая плоская' },\n  ];\n\n  constructor(props: PlaygroundProps) {\n    super(props);\n    this.state = {\n      currentTheme: DEFAULT_THEME,\n      currentThemeType: ThemeType.Default,\n      editorOpened: false,\n      themes: {\n        default: DEFAULT_THEME,\n        defaultOld: DEFAULT_THEME_8PX_OLD,\n        dark: DARK_THEME,\n        flatOld: FLAT_THEME_8PX_OLD,\n      },\n      themesErrors: {\n        default: {},\n        defaultOld: {},\n        dark: {},\n        flatOld: {},\n      },\n    };\n  }\n\n  public render() {\n    const { currentTheme, editorOpened, currentThemeType } = this.state;\n    return (\n      <ThemeContext.Provider value={currentTheme}>\n        {editorOpened && this.renderSidePage()}\n        {\n          <Playground\n            onThemeChange={this.handleThemeChange}\n            currentThemeType={currentThemeType}\n            onEditLinkClick={this.handleOpen}\n          />\n        }\n      </ThemeContext.Provider>\n    );\n  }\n\n  private renderSidePage = () => {\n    const { currentTheme, themesErrors, editingThemeItem, themes } = this.state;\n    const themeErrors = themesErrors[editingThemeItem ? editingThemeItem.value : 'default'];\n    return (\n      <SidePage disableAnimations ignoreBackgroundClick blockBackground width={600} onClose={this.handleClose}>\n        <SidePage.Header>\n          <div className={styles.editorHeaderWrapper(currentTheme)}>\n            <Gapped wrap verticalAlign=\"middle\">\n              <span>Тема для редактирования:</span>\n              <ComboBox\n                getItems={this.getEditableThemesItems}\n                value={editingThemeItem}\n                onValueChange={this.handleEditingThemeSwitch}\n              />\n            </Gapped>\n          </div>\n          <div style={{ fontSize: 14, marginTop: 8 }}>\n            <Link onClick={this.handelGetTheme}>Вывести тему в консоль</Link>\n          </div>\n        </SidePage.Header>\n        <SidePage.Body>\n          <div className={styles.sidePageBody()}>\n            <ThemeEditor\n              editingTheme={themes[editingThemeItem!.value]}\n              currentTheme={currentTheme}\n              currentErrors={themeErrors}\n              onValueChange={this.handleThemeVariableChange}\n            />\n          </div>\n        </SidePage.Body>\n      </SidePage>\n    );\n  };\n\n  private handelGetTheme = () => {\n    const currentTheme = this.state.currentTheme;\n    const themeObject: Writeable<ThemeIn> = {};\n    ThemeFactory.getKeys(currentTheme).forEach((key) => {\n      const descriptor = Object.getOwnPropertyDescriptor(currentTheme, key);\n      if (descriptor && !descriptor.get && DEFAULT_THEME[key] && currentTheme[key] !== DEFAULT_THEME[key]) {\n        themeObject[key] = currentTheme[key] as keyof Theme;\n      }\n    });\n\n    console.log(JSON.stringify(themeObject));\n  };\n\n  private handleOpen = () => {\n    this.setState((state) => ({\n      editorOpened: true,\n      editingThemeItem: this.editableThemesItems.find((i) => i.value === state.currentThemeType),\n    }));\n  };\n\n  private handleClose = () => {\n    this.setState({\n      editorOpened: false,\n    });\n  };\n\n  private handleThemeChange = (value: string) => {\n    const themeType = value as ThemeType;\n    this.setState({\n      currentThemeType: themeType,\n      currentTheme: this.state.themes[themeType],\n    });\n  };\n\n  private handleThemeVariableChange = (variable: keyof Theme, value: string) => {\n    const { editingThemeItem, currentTheme, themes, themesErrors } = this.state;\n    const editingThemeType = editingThemeItem!.value;\n\n    const theme = themes[editingThemeType];\n    const currentValue = theme[variable] as string;\n\n    let canSetVariable = true;\n    if (ColorFunctions.isValid(currentValue)) {\n      canSetVariable = ColorFunctions.isValid(value);\n      themesErrors[editingThemeType][variable] = !canSetVariable;\n    }\n\n    const nextThemeErrors: ThemesErrors = { ...themesErrors };\n    nextThemeErrors[editingThemeType][variable] = !canSetVariable;\n    const stateUpdate = { themes, currentTheme, themesErrors: nextThemeErrors };\n\n    if (canSetVariable) {\n      const result = this.changeThemeVariable(theme, variable, value);\n      stateUpdate.themes[editingThemeType] = result;\n      if (this.state.currentThemeType === editingThemeType) {\n        stateUpdate.currentTheme = result;\n      }\n    }\n\n    this.setState(stateUpdate);\n  };\n\n  private getEditableThemesItems = (query: string) => {\n    return Promise.resolve(this.editableThemesItems.filter((i) => i.label.toLowerCase().includes(query.toLowerCase())));\n  };\n\n  private handleEditingThemeSwitch = (item: EditingThemeItem) => {\n    this.setState({ editingThemeItem: item });\n  };\n\n  private changeThemeVariable = (theme: Theme, variableName: keyof Theme, variableValue: string): Theme => {\n    const result: ThemeIn = {};\n    ThemeFactory.getKeys(theme).forEach((key) => {\n      const descriptor = findPropertyDescriptor(theme, key);\n      descriptor.enumerable = true;\n      descriptor.configurable = true;\n      if (key === variableName) {\n        delete descriptor.get;\n        delete descriptor.set;\n        descriptor.value = variableValue;\n      }\n      Object.defineProperty(result, key, descriptor);\n    });\n\n    return ThemeFactory.create<ThemeIn>(result);\n  };\n}\n"]}
+{"version":3,"sources":["ThemeContextPlayground.tsx"],"names":["React","ThemeContext","ThemeFactory","FLAT_THEME_8PX_OLD","DEFAULT_THEME_8PX_OLD","DEFAULT_THEME","DARK_THEME","SidePage","Gapped","ComboBox","Link","ColorFunctions","THEME_2022","findPropertyDescriptor","THEME_2022_DARK","ThemeEditor","styles","Playground","ThemeType","ThemeContextPlayground","props","editableThemesItems","value","Default","label","Dark","DefaultOld","FlatOld","Theme2022","Theme2022Dark","renderSidePage","state","currentTheme","themesErrors","editingThemeItem","themes","themeErrors","handleClose","editorHeaderWrapper","getEditableThemesItems","handleEditingThemeSwitch","fontSize","marginTop","handelGetTheme","sidePageBody","handleThemeVariableChange","themeObject","getKeys","forEach","key","descriptor","Object","getOwnPropertyDescriptor","get","console","log","JSON","stringify","handleOpen","setState","editorOpened","find","i","currentThemeType","handleThemeChange","themeType","variable","editingThemeType","theme","currentValue","canSetVariable","isValid","nextThemeErrors","stateUpdate","result","changeThemeVariable","query","Promise","resolve","filter","toLowerCase","includes","item","variableName","variableValue","enumerable","configurable","set","defineProperty","create","defaultOld","dark","flatOld","theme2022","theme2022Dark","render","Component"],"mappings":"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","sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { FLAT_THEME_8PX_OLD } from '../../lib/theming/themes/FlatTheme8pxOld';\nimport { DEFAULT_THEME_8PX_OLD } from '../../lib/theming/themes/DefaultTheme8pxOld';\nimport { DEFAULT_THEME } from '../../lib/theming/themes/DefaultTheme';\nimport { DARK_THEME } from '../../lib/theming/themes/DarkTheme';\nimport { SidePage } from '../../components/SidePage';\nimport { Gapped } from '../../components/Gapped';\nimport { ComboBox } from '../../components/ComboBox';\nimport { Link } from '../../components/Link';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Writeable } from '../../typings/utility-types';\nimport { THEME_2022 } from '../../lib/theming/themes/Theme2022';\nimport { findPropertyDescriptor } from '../../lib/theming/ThemeHelpers';\nimport { THEME_2022_DARK } from '../../lib/theming/themes/Theme2022Dark';\n\nimport { ThemeEditor } from './ThemeEditor';\nimport { styles } from './Playground.styles';\nimport { Playground } from './Playground';\nimport { ThemeType } from './constants';\n\ninterface PlaygroundState {\n  editorOpened: boolean;\n  editingThemeItem?: EditingThemeItem;\n  themes: Themes;\n  themesErrors: ThemesErrors;\n  currentTheme: Theme;\n  currentThemeType: ThemeType;\n}\ninterface Themes {\n  default: Theme;\n  dark: Theme;\n  defaultOld: Theme;\n  flatOld: Theme;\n  theme2022: Theme;\n  theme2022Dark: Theme;\n}\ninterface ThemesErrors {\n  default: ThemeErrorsType;\n  dark: ThemeErrorsType;\n  defaultOld: ThemeErrorsType;\n  flatOld: ThemeErrorsType;\n  theme2022: ThemeErrorsType;\n  theme2022Dark: ThemeErrorsType;\n}\ninterface EditingThemeItem {\n  value: ThemeType;\n  label: string;\n}\ninterface PlaygroundProps {\n  children?: ReactNode;\n}\nexport type ThemeErrorsType = Writeable<{ [key in keyof Theme]?: boolean }>;\n\nexport class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {\n  private readonly editableThemesItems = [\n    { value: ThemeType.Default, label: 'Дефолтная' },\n    { value: ThemeType.Dark, label: 'Темная' },\n    { value: ThemeType.DefaultOld, label: 'Старая дефолтная' },\n    { value: ThemeType.FlatOld, label: 'Старая плоская' },\n    { value: ThemeType.Theme2022, label: 'Новая 2022' },\n    { value: ThemeType.Theme2022Dark, label: 'Новая 2022 Тёмная' },\n  ];\n\n  constructor(props: PlaygroundProps) {\n    super(props);\n    this.state = {\n      currentTheme: DEFAULT_THEME,\n      currentThemeType: ThemeType.Default,\n      editorOpened: false,\n      themes: {\n        default: DEFAULT_THEME,\n        defaultOld: DEFAULT_THEME_8PX_OLD,\n        dark: DARK_THEME,\n        flatOld: FLAT_THEME_8PX_OLD,\n        theme2022: THEME_2022,\n        theme2022Dark: THEME_2022_DARK,\n      },\n      themesErrors: {\n        default: {},\n        defaultOld: {},\n        dark: {},\n        flatOld: {},\n        theme2022: {},\n        theme2022Dark: {},\n      },\n    };\n  }\n\n  public render() {\n    const { currentTheme, editorOpened, currentThemeType } = this.state;\n    return (\n      <ThemeContext.Provider value={currentTheme}>\n        {editorOpened && this.renderSidePage()}\n        {\n          <Playground\n            onThemeChange={this.handleThemeChange}\n            currentThemeType={currentThemeType}\n            onEditLinkClick={this.handleOpen}\n          />\n        }\n      </ThemeContext.Provider>\n    );\n  }\n\n  private renderSidePage = () => {\n    const { currentTheme, themesErrors, editingThemeItem, themes } = this.state;\n    const themeErrors = themesErrors[editingThemeItem ? editingThemeItem.value : 'default'];\n    return (\n      <SidePage disableAnimations ignoreBackgroundClick blockBackground width={600} onClose={this.handleClose}>\n        <SidePage.Header>\n          <div className={styles.editorHeaderWrapper(currentTheme)}>\n            <Gapped wrap verticalAlign=\"middle\">\n              <span>Тема для редактирования:</span>\n              <ComboBox\n                getItems={this.getEditableThemesItems}\n                value={editingThemeItem}\n                onValueChange={this.handleEditingThemeSwitch}\n              />\n            </Gapped>\n          </div>\n          <div style={{ fontSize: 14, marginTop: 8 }}>\n            <Link onClick={this.handelGetTheme}>Вывести тему в консоль</Link>\n          </div>\n        </SidePage.Header>\n        <SidePage.Body>\n          <div className={styles.sidePageBody()}>\n            <ThemeEditor\n              editingTheme={themes[editingThemeItem!.value]}\n              currentTheme={currentTheme}\n              currentErrors={themeErrors}\n              onValueChange={this.handleThemeVariableChange}\n            />\n          </div>\n        </SidePage.Body>\n      </SidePage>\n    );\n  };\n\n  private handelGetTheme = () => {\n    const currentTheme = this.state.currentTheme;\n    const themeObject: Writeable<ThemeIn> = {};\n    ThemeFactory.getKeys(currentTheme).forEach((key) => {\n      const descriptor = Object.getOwnPropertyDescriptor(currentTheme, key);\n      if (descriptor && !descriptor.get && DEFAULT_THEME[key] && currentTheme[key] !== DEFAULT_THEME[key]) {\n        themeObject[key] = currentTheme[key] as keyof Theme;\n      }\n    });\n\n    console.log(JSON.stringify(themeObject));\n  };\n\n  private handleOpen = () => {\n    this.setState((state) => ({\n      editorOpened: true,\n      editingThemeItem: this.editableThemesItems.find((i) => i.value === state.currentThemeType),\n    }));\n  };\n\n  private handleClose = () => {\n    this.setState({\n      editorOpened: false,\n    });\n  };\n\n  private handleThemeChange = (value: string) => {\n    const themeType = value as ThemeType;\n    this.setState({\n      currentThemeType: themeType,\n      currentTheme: this.state.themes[themeType],\n    });\n  };\n\n  private handleThemeVariableChange = (variable: keyof Theme, value: string) => {\n    const { editingThemeItem, currentTheme, themes, themesErrors } = this.state;\n    const editingThemeType = editingThemeItem!.value;\n\n    const theme = themes[editingThemeType];\n    const currentValue = theme[variable] as string;\n\n    let canSetVariable = true;\n    if (ColorFunctions.isValid(currentValue)) {\n      canSetVariable = ColorFunctions.isValid(value);\n      themesErrors[editingThemeType][variable] = !canSetVariable;\n    }\n\n    const nextThemeErrors: ThemesErrors = { ...themesErrors };\n    nextThemeErrors[editingThemeType][variable] = !canSetVariable;\n    const stateUpdate = { themes, currentTheme, themesErrors: nextThemeErrors };\n\n    if (canSetVariable) {\n      const result = this.changeThemeVariable(theme, variable, value);\n      stateUpdate.themes[editingThemeType] = result;\n      if (this.state.currentThemeType === editingThemeType) {\n        stateUpdate.currentTheme = result;\n      }\n    }\n\n    this.setState(stateUpdate);\n  };\n\n  private getEditableThemesItems = (query: string) => {\n    return Promise.resolve(this.editableThemesItems.filter((i) => i.label.toLowerCase().includes(query.toLowerCase())));\n  };\n\n  private handleEditingThemeSwitch = (item: EditingThemeItem) => {\n    this.setState({ editingThemeItem: item });\n  };\n\n  private changeThemeVariable = (theme: Theme, variableName: keyof Theme, variableValue: string): Theme => {\n    const result: ThemeIn = {};\n    ThemeFactory.getKeys(theme).forEach((key) => {\n      const descriptor = findPropertyDescriptor(theme, key);\n      descriptor.enumerable = true;\n      descriptor.configurable = true;\n      if (key === variableName) {\n        delete descriptor.get;\n        delete descriptor.set;\n        descriptor.value = variableValue;\n      }\n      Object.defineProperty(result, key, descriptor);\n    });\n\n    return ThemeFactory.create<ThemeIn>(result);\n  };\n}\n"]}

package/internal/ThemePlayground/ThemeContextPlayground.d.ts

@@ -15,12 +15,16 @@ interface Themes {
     dark: Theme;
     defaultOld: Theme;
     flatOld: Theme;
+    theme2022: Theme;
+    theme2022Dark: Theme;
 }
 interface ThemesErrors {
     default: ThemeErrorsType;
     dark: ThemeErrorsType;
     defaultOld: ThemeErrorsType;
     flatOld: ThemeErrorsType;
+    theme2022: ThemeErrorsType;
+    theme2022Dark: ThemeErrorsType;
 }
 interface EditingThemeItem {
     value: ThemeType;

package/internal/ThemePlayground/ThemeEditor/ThemeEditor.js

@@ -44,6 +44,7 @@ import React from 'react';
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { Gapped } from "../../../components/Gapped";
 import { Loader } from "../../../components/Loader";
+import { isNonNullable } from "../../../lib/utils";
 import { VariableValue } from "../VariableValue";
 import { VARIABLES_GROUPS, DEPRECATED_VARIABLES } from "../constants";
 import { styles } from "../Playground.styles";
@@ -188,7 +189,10 @@ var prefixesReducer = function prefixesReducer(acc, current) {
 };
 
 var getBaseVariables = function getBaseVariables(theme, variable) {
-  for (; theme != null; theme = Object.getPrototypeOf(theme)) {
+  // TODO: Rewrite for loop.
+  // TODO: Enable `no-param-reassign` rule.
+  // eslint-disable-next-line no-param-reassign
+  for (; isNonNullable(theme); theme = Object.getPrototypeOf(theme)) {
     if (Object.prototype.hasOwnProperty.call(theme, variable)) {
       var descriptor = Object.getOwnPropertyDescriptor(theme, variable);
 

package/internal/ThemePlayground/ThemeEditor/ThemeEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ThemeEditor.tsx"],"names":["React","ThemeFactory","Gapped","Loader","VariableValue","VARIABLES_GROUPS","DEPRECATED_VARIABLES","styles","ThemeEditor","state","groups","isLoading","renderGroups","props","editingTheme","currentTheme","currentErrors","onValueChange","keys","getKeys","filter","key","isDeprecatedVariable","map","i","title","isCommon","isCommonVariable","bind","reduce","prefixesReducer","isGroupVariable","prefix","length","render","loaderWrapper","loader","componentDidMount","updateTimeout","window","setTimeout","setState","componentWillUnmount","clearTimeout","Component","Group","variables","editorGroupHeader","variable","value","isError","getBaseVariables","name","includes","splitPrefix","split","item","startsWith","trim","prefixes","acc","current","theme","Object","getPrototypeOf","prototype","hasOwnProperty","call","descriptor","getOwnPropertyDescriptor","get","getterBody","toString","variableNameMatchArray","match","v","replace"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Gapped } from '../../components/Gapped';\nimport { Loader } from '../../components/Loader';\n\nimport { VariableValue } from './VariableValue';\nimport { VARIABLES_GROUPS, DEPRECATED_VARIABLES } from './constants';\nimport { ThemeErrorsType } from './ThemeContextPlayground';\nimport { styles } from './Playground.styles';\n\ninterface ThemeEditorProps {\n  editingTheme: Theme;\n  currentTheme: Theme;\n  currentErrors: ThemeErrorsType;\n  onValueChange: (variable: keyof Theme, value: string) => void;\n}\ninterface ThemeEditorState {\n  groups: Group[];\n  isLoading: boolean;\n}\ninterface Group {\n  title: string;\n  prefix: string;\n  isCommon?: boolean;\n}\nexport class ThemeEditor extends React.Component<ThemeEditorProps, ThemeEditorState> {\n  public state = {\n    groups: [],\n    isLoading: true,\n  };\n  private updateTimeout?: number;\n\n  public render() {\n    return this.state.isLoading ? (\n      <div className={styles.loaderWrapper()}>\n        <Loader type=\"big\" active className={styles.loader()} />\n      </div>\n    ) : (\n      this.renderGroups()\n    );\n  }\n\n  public componentDidMount() {\n    this.updateTimeout = window.setTimeout(() => {\n      this.setState({ groups: VARIABLES_GROUPS, isLoading: false });\n    }, 500);\n  }\n\n  public componentWillUnmount(): void {\n    clearTimeout(this.updateTimeout);\n  }\n\n  private renderGroups = () => {\n    const { editingTheme, currentTheme, currentErrors, onValueChange } = this.props;\n    const keys = ThemeFactory.getKeys(editingTheme).filter((key) => !isDeprecatedVariable(key));\n\n    return (\n      <Gapped vertical>\n        {this.state.groups.map((i: Group) => (\n          <Group\n            editingTheme={editingTheme}\n            currentTheme={currentTheme}\n            currentErrors={currentErrors}\n            onValueChange={onValueChange}\n            title={i.title}\n            variables={keys.filter(\n              i.isCommon\n                ? isCommonVariable.bind(null, this.state.groups.reduce(prefixesReducer, []))\n                : isGroupVariable.bind(null, i.prefix),\n            )}\n            key={i.title}\n          />\n        ))}\n        {DEPRECATED_VARIABLES.length > 0 ? (\n          <Group\n            editingTheme={editingTheme}\n            currentTheme={currentTheme}\n            currentErrors={currentErrors}\n            onValueChange={onValueChange}\n            title={'Deprecated Variables'}\n            variables={DEPRECATED_VARIABLES}\n          />\n        ) : null}\n      </Gapped>\n    );\n  };\n}\n\ninterface GroupProps {\n  editingTheme: Theme;\n  currentTheme: Theme;\n  currentErrors: ThemeErrorsType;\n  title: string;\n  variables: Array<keyof Theme>;\n  onValueChange: (variable: keyof Theme, value: string) => void;\n}\nconst Group = (props: GroupProps) => {\n  const { editingTheme, currentTheme, currentErrors, onValueChange, title, variables } = props;\n\n  return variables.length > 0 ? (\n    <React.Fragment>\n      <h2 className={styles.editorGroupHeader(currentTheme)}>{title}</h2>\n      {variables.map((variable) => {\n        const value = editingTheme[variable] as string;\n        const isError = currentErrors[variable];\n        return (\n          <VariableValue\n            theme={currentTheme}\n            onChange={onValueChange}\n            value={value}\n            isError={isError || false}\n            variable={variable}\n            key={variable}\n            baseVariables={getBaseVariables(editingTheme, variable)}\n            deprecated={isDeprecatedVariable(variable)}\n          />\n        );\n      })}\n    </React.Fragment>\n  ) : null;\n};\n\nconst isDeprecatedVariable = (name: keyof Theme) => {\n  return DEPRECATED_VARIABLES.includes(name);\n};\n\nconst isGroupVariable = (prefix: string, name: string) => {\n  const splitPrefix = prefix.split(' ') || [];\n\n  for (const item of splitPrefix) {\n    if (name.startsWith(item.trim())) {\n      return true;\n    }\n  }\n  return false;\n};\nconst isCommonVariable = (prefixes: string[], name: string) => {\n  for (const item of prefixes) {\n    if (name.startsWith(item.trim())) {\n      return false;\n    }\n  }\n  return true;\n};\nconst prefixesReducer = (acc: string[], current: { title: string; prefix: string }): string[] => {\n  const splitPrefix = current.prefix.split(' ');\n  return [...acc, ...splitPrefix];\n};\n\ntype GetBaseVariablesReturnType = Array<keyof Theme>;\nconst getBaseVariables = (theme: Theme, variable: keyof Theme): GetBaseVariablesReturnType => {\n  for (; theme != null; theme = Object.getPrototypeOf(theme)) {\n    if (Object.prototype.hasOwnProperty.call(theme, variable)) {\n      const descriptor = Object.getOwnPropertyDescriptor(theme, variable);\n\n      if (descriptor && typeof descriptor.get !== 'undefined') {\n        const getterBody = descriptor.get.toString();\n        const variableNameMatchArray = getterBody.match(/this\\.(\\w+)\\b/gm) || [];\n        return (variableNameMatchArray || []).map((v) => v.replace(/this\\./g, '')) as GetBaseVariablesReturnType;\n      }\n      break;\n    }\n  }\n  return [];\n};\n"]}
+{"version":3,"sources":["ThemeEditor.tsx"],"names":["React","ThemeFactory","Gapped","Loader","isNonNullable","VariableValue","VARIABLES_GROUPS","DEPRECATED_VARIABLES","styles","ThemeEditor","state","groups","isLoading","renderGroups","props","editingTheme","currentTheme","currentErrors","onValueChange","keys","getKeys","filter","key","isDeprecatedVariable","map","i","title","isCommon","isCommonVariable","bind","reduce","prefixesReducer","isGroupVariable","prefix","length","render","loaderWrapper","loader","componentDidMount","updateTimeout","window","setTimeout","setState","componentWillUnmount","clearTimeout","Component","Group","variables","editorGroupHeader","variable","value","isError","getBaseVariables","name","includes","splitPrefix","split","item","startsWith","trim","prefixes","acc","current","theme","Object","getPrototypeOf","prototype","hasOwnProperty","call","descriptor","getOwnPropertyDescriptor","get","getterBody","toString","variableNameMatchArray","match","v","replace"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Gapped } from '../../components/Gapped';\nimport { Loader } from '../../components/Loader';\nimport { isNonNullable } from '../../lib/utils';\n\nimport { VariableValue } from './VariableValue';\nimport { VARIABLES_GROUPS, DEPRECATED_VARIABLES } from './constants';\nimport { ThemeErrorsType } from './ThemeContextPlayground';\nimport { styles } from './Playground.styles';\n\ninterface ThemeEditorProps {\n  editingTheme: Theme;\n  currentTheme: Theme;\n  currentErrors: ThemeErrorsType;\n  onValueChange: (variable: keyof Theme, value: string) => void;\n}\ninterface ThemeEditorState {\n  groups: Group[];\n  isLoading: boolean;\n}\ninterface Group {\n  title: string;\n  prefix: string;\n  isCommon?: boolean;\n}\nexport class ThemeEditor extends React.Component<ThemeEditorProps, ThemeEditorState> {\n  public state = {\n    groups: [],\n    isLoading: true,\n  };\n  private updateTimeout?: number;\n\n  public render() {\n    return this.state.isLoading ? (\n      <div className={styles.loaderWrapper()}>\n        <Loader type=\"big\" active className={styles.loader()} />\n      </div>\n    ) : (\n      this.renderGroups()\n    );\n  }\n\n  public componentDidMount() {\n    this.updateTimeout = window.setTimeout(() => {\n      this.setState({ groups: VARIABLES_GROUPS, isLoading: false });\n    }, 500);\n  }\n\n  public componentWillUnmount(): void {\n    clearTimeout(this.updateTimeout);\n  }\n\n  private renderGroups = () => {\n    const { editingTheme, currentTheme, currentErrors, onValueChange } = this.props;\n    const keys = ThemeFactory.getKeys(editingTheme).filter((key) => !isDeprecatedVariable(key));\n\n    return (\n      <Gapped vertical>\n        {this.state.groups.map((i: Group) => (\n          <Group\n            editingTheme={editingTheme}\n            currentTheme={currentTheme}\n            currentErrors={currentErrors}\n            onValueChange={onValueChange}\n            title={i.title}\n            variables={keys.filter(\n              i.isCommon\n                ? isCommonVariable.bind(null, this.state.groups.reduce(prefixesReducer, []))\n                : isGroupVariable.bind(null, i.prefix),\n            )}\n            key={i.title}\n          />\n        ))}\n        {DEPRECATED_VARIABLES.length > 0 ? (\n          <Group\n            editingTheme={editingTheme}\n            currentTheme={currentTheme}\n            currentErrors={currentErrors}\n            onValueChange={onValueChange}\n            title={'Deprecated Variables'}\n            variables={DEPRECATED_VARIABLES}\n          />\n        ) : null}\n      </Gapped>\n    );\n  };\n}\n\ninterface GroupProps {\n  editingTheme: Theme;\n  currentTheme: Theme;\n  currentErrors: ThemeErrorsType;\n  title: string;\n  variables: Array<keyof Theme>;\n  onValueChange: (variable: keyof Theme, value: string) => void;\n}\nconst Group = (props: GroupProps) => {\n  const { editingTheme, currentTheme, currentErrors, onValueChange, title, variables } = props;\n\n  return variables.length > 0 ? (\n    <React.Fragment>\n      <h2 className={styles.editorGroupHeader(currentTheme)}>{title}</h2>\n      {variables.map((variable) => {\n        const value = editingTheme[variable] as string;\n        const isError = currentErrors[variable];\n        return (\n          <VariableValue\n            theme={currentTheme}\n            onChange={onValueChange}\n            value={value}\n            isError={isError || false}\n            variable={variable}\n            key={variable}\n            baseVariables={getBaseVariables(editingTheme, variable)}\n            deprecated={isDeprecatedVariable(variable)}\n          />\n        );\n      })}\n    </React.Fragment>\n  ) : null;\n};\n\nconst isDeprecatedVariable = (name: keyof Theme) => {\n  return DEPRECATED_VARIABLES.includes(name);\n};\n\nconst isGroupVariable = (prefix: string, name: string) => {\n  const splitPrefix = prefix.split(' ') || [];\n\n  for (const item of splitPrefix) {\n    if (name.startsWith(item.trim())) {\n      return true;\n    }\n  }\n  return false;\n};\nconst isCommonVariable = (prefixes: string[], name: string) => {\n  for (const item of prefixes) {\n    if (name.startsWith(item.trim())) {\n      return false;\n    }\n  }\n  return true;\n};\nconst prefixesReducer = (acc: string[], current: { title: string; prefix: string }): string[] => {\n  const splitPrefix = current.prefix.split(' ');\n  return [...acc, ...splitPrefix];\n};\n\ntype GetBaseVariablesReturnType = Array<keyof Theme>;\nconst getBaseVariables = (theme: Theme, variable: keyof Theme): GetBaseVariablesReturnType => {\n  // TODO: Rewrite for loop.\n  // TODO: Enable `no-param-reassign` rule.\n  // eslint-disable-next-line no-param-reassign\n  for (; isNonNullable(theme); theme = Object.getPrototypeOf(theme)) {\n    if (Object.prototype.hasOwnProperty.call(theme, variable)) {\n      const descriptor = Object.getOwnPropertyDescriptor(theme, variable);\n\n      if (descriptor && typeof descriptor.get !== 'undefined') {\n        const getterBody = descriptor.get.toString();\n        const variableNameMatchArray = getterBody.match(/this\\.(\\w+)\\b/gm) || [];\n        return (variableNameMatchArray || []).map((v) => v.replace(/this\\./g, '')) as GetBaseVariablesReturnType;\n      }\n      break;\n    }\n  }\n\n  return [];\n};\n"]}