@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

package/components/Tooltip/Tooltip.styles/Tooltip.styles.js

@@ -2,12 +2,14 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2;
 
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-export var styles = memoizeStyle({
-  cross: function cross(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      height: ", ";\n      line-height: 0;\n      padding: ", ";\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: ", ";\n      box-sizing: content-box;\n\n      &:hover {\n        color: ", ";\n      }\n    "])), t.tooltipCloseBtnColor, t.tooltipCloseBtnSide, t.tooltipCloseBtnPadding, t.tooltipCloseBtnSide, t.tooltipCloseBtnHoverColor);
-  },
-  tooltipContent: function tooltipContent(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: ", " ", ";\n      position: relative;\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.tooltipTextColor, t.tooltipPaddingY, t.tooltipPaddingX, t.tooltipFontSize, t.tooltipLineHeight);
-  }
-});
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    cross: function cross(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        cursor: pointer;\n        height: ", ";\n        line-height: 0;\n        padding: ", ";\n        position: absolute;\n        right: 0;\n        top: 0;\n        width: ", ";\n        box-sizing: content-box;\n\n        &:hover {\n          color: ", ";\n        }\n      "])), t.tooltipCloseBtnColor, t.tooltipCloseBtnSide, t.tooltipCloseBtnPadding, t.tooltipCloseBtnSide, t.tooltipCloseBtnHoverColor);
+    },
+    tooltipContent: function tooltipContent(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        padding: ", " ", ";\n        position: relative;\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.tooltipTextColor, t.tooltipPaddingY, t.tooltipPaddingX, t.tooltipFontSize, t.tooltipLineHeight);
+    }
+  });
+};

package/components/Tooltip/Tooltip.styles/Tooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tooltip.styles.ts"],"names":["css","memoizeStyle","styles","cross","t","tooltipCloseBtnColor","tooltipCloseBtnSide","tooltipCloseBtnPadding","tooltipCloseBtnHoverColor","tooltipContent","tooltipTextColor","tooltipPaddingY","tooltipPaddingX","tooltipFontSize","tooltipLineHeight"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,KADiC,iBAC3BC,CAD2B,EACjB;AACd,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACC,oBADb;;AAGYD,IAAAA,CAAC,CAACE,mBAHd;;AAKaF,IAAAA,CAAC,CAACG,sBALf;;;;AASWH,IAAAA,CAAC,CAACE,mBATb;;;;AAaaF,IAAAA,CAAC,CAACI,yBAbf;;;AAgBD,GAlBgC;;AAoBjCC,EAAAA,cApBiC,0BAoBlBL,CApBkB,EAoBR;AACvB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACM,gBADb;AAEaN,IAAAA,CAAC,CAACO,eAFf,EAEkCP,CAAC,CAACQ,eAFpC;;AAIeR,IAAAA,CAAC,CAACS,eAJjB;AAKiBT,IAAAA,CAAC,CAACU,iBALnB;;AAOD,GA5BgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  cross(t: Theme) {\n    return css`\n      color: ${t.tooltipCloseBtnColor};\n      cursor: pointer;\n      height: ${t.tooltipCloseBtnSide};\n      line-height: 0;\n      padding: ${t.tooltipCloseBtnPadding};\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: ${t.tooltipCloseBtnSide};\n      box-sizing: content-box;\n\n      &:hover {\n        color: ${t.tooltipCloseBtnHoverColor};\n      }\n    `;\n  },\n\n  tooltipContent(t: Theme) {\n    return css`\n      color: ${t.tooltipTextColor};\n      padding: ${t.tooltipPaddingY} ${t.tooltipPaddingX};\n      position: relative;\n      font-size: ${t.tooltipFontSize};\n      line-height: ${t.tooltipLineHeight};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Tooltip.styles.ts"],"names":["memoizeStyle","getStyles","emotion","cross","t","css","tooltipCloseBtnColor","tooltipCloseBtnSide","tooltipCloseBtnPadding","tooltipCloseBtnHoverColor","tooltipContent","tooltipTextColor","tooltipPaddingY","tooltipPaddingX","tooltipFontSize","tooltipLineHeight"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;;AAGA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,KADW,iBACLC,CADK,EACK;AACd,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACE,oBADb;;AAGYF,QAAAA,CAAC,CAACG,mBAHd;;AAKaH,QAAAA,CAAC,CAACI,sBALf;;;;AASWJ,QAAAA,CAAC,CAACG,mBATb;;;;AAaaH,QAAAA,CAAC,CAACK,yBAbf;;;AAgBD,OAlBU;;AAoBXC,MAAAA,cApBW,0BAoBIN,CApBJ,EAoBc;AACvB,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACO,gBADb;AAEaP,QAAAA,CAAC,CAACQ,eAFf,EAEkCR,CAAC,CAACS,eAFpC;;AAIeT,QAAAA,CAAC,CAACU,eAJjB;AAKiBV,QAAAA,CAAC,CAACW,iBALnB;;AAOD,OA5BU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    cross(t: Theme) {\n      return emotion.css`\n        color: ${t.tooltipCloseBtnColor};\n        cursor: pointer;\n        height: ${t.tooltipCloseBtnSide};\n        line-height: 0;\n        padding: ${t.tooltipCloseBtnPadding};\n        position: absolute;\n        right: 0;\n        top: 0;\n        width: ${t.tooltipCloseBtnSide};\n        box-sizing: content-box;\n\n        &:hover {\n          color: ${t.tooltipCloseBtnHoverColor};\n        }\n      `;\n    },\n\n    tooltipContent(t: Theme) {\n      return emotion.css`\n        color: ${t.tooltipTextColor};\n        padding: ${t.tooltipPaddingY} ${t.tooltipPaddingX};\n        position: relative;\n        font-size: ${t.tooltipFontSize};\n        line-height: ${t.tooltipLineHeight};\n      `;\n    },\n  });\n"]}

package/components/Tooltip/Tooltip.styles.d.ts

@@ -1,5 +1,6 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     cross(t: Theme): string;
     tooltipContent(t: Theme): string;
 };

package/components/TooltipMenu/TooltipMenu/TooltipMenu.js

@@ -87,6 +87,6 @@ var TooltipMenu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
   };
 
   return TooltipMenu;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'TooltipMenu', _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'TooltipMenu', _class2.displayName = 'TooltipMenu', _class2.defaultProps = {
   disableAnimations: isTestEnv
 }, _temp)) || _class;

package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TooltipMenu.tsx"],"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","createPropsGetter","TooltipMenuDataTids","root","TooltipMenu","props","getProps","defaultProps","caption","Error","render","theme","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","menuScrollContainerContentWrapperPaddingY","menuLegacyPaddingY","renderMain","disableAnimations","setRootNode","menuMaxHeight","menuWidth","header","footer","preventIconsOffset","positions","onOpen","onClose","children","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { MenuItemProps } from '../MenuItem';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { MenuHeaderProps } from '../MenuHeader';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;\n\nexport interface TooltipMenuProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'preventIconsOffset'> {\n  children?: TooltipMenuChildType | TooltipMenuChildType[];\n  /** Максимальная высота меню */\n  menuMaxHeight?: number | string;\n  /** Ширина меню */\n  menuWidth?: number | string;\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо `caption`,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: PopupMenuProps['caption'];\n  /**\n   * Произвольный элемент, который будет отрендерен в шапке меню.\n   *\n   * _Примечание_: контрол [MenuHeader](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Произвольный элемент, который будет отрендерен в подвале меню.\n   *\n   * Перед элементом переданным в `footer` будет отрендерен [MenuSeparator](#/Components/MenuSeparator).\n   */\n  footer?: React.ReactNode;\n  /**  Список позиций доступных для расположения выпадашки относительно `caption`.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   */\n  positions?: PopupPositionsType[];\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n}\n\nexport const TooltipMenuDataTids = {\n  root: 'TooltipMenu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент.\n *\n * Положение меню задаётся с помощью массива `positions` и работает так:\n * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,\n * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.\n *\n * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.\n *\n * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.\n */\n@rootNode\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(TooltipMenu.defaultProps);\n\n  constructor(props: TooltipMenuProps) {\n    super(props);\n\n    if (!props.caption && !isProductionEnv) {\n      throw new Error('Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.tooltipMenuPinOffset,\n                  popupMargin: theme.tooltipMenuMargin,\n                  popupPinSize: theme.tooltipMenuPinSize,\n                  menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    if (!this.props.caption) {\n      return null;\n    }\n\n    const { disableAnimations } = this.getProps();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          aria-label={this.props['aria-label']}\n          data-tid={TooltipMenuDataTids.root}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          caption={this.props.caption}\n          header={this.props.header}\n          footer={this.props.footer}\n          preventIconsOffset={this.props.preventIconsOffset}\n          positions={this.props.positions}\n          onOpen={this.props.onOpen}\n          onClose={this.props.onClose}\n          popupHasPin\n          disableAnimations={disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["TooltipMenu.tsx"],"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","createPropsGetter","TooltipMenuDataTids","root","TooltipMenu","props","getProps","defaultProps","caption","Error","render","theme","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","menuScrollContainerContentWrapperPaddingY","menuLegacyPaddingY","renderMain","disableAnimations","setRootNode","menuMaxHeight","menuWidth","header","footer","preventIconsOffset","positions","onOpen","onClose","children","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { MenuItemProps } from '../MenuItem';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { MenuHeaderProps } from '../MenuHeader';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;\n\nexport interface TooltipMenuProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'preventIconsOffset'> {\n  children?: TooltipMenuChildType | TooltipMenuChildType[];\n  /** Максимальная высота меню */\n  menuMaxHeight?: number | string;\n  /** Ширина меню */\n  menuWidth?: number | string;\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо `caption`,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: PopupMenuProps['caption'];\n  /**\n   * Произвольный элемент, который будет отрендерен в шапке меню.\n   *\n   * _Примечание_: контрол [MenuHeader](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Произвольный элемент, который будет отрендерен в подвале меню.\n   *\n   * Перед элементом переданным в `footer` будет отрендерен [MenuSeparator](#/Components/MenuSeparator).\n   */\n  footer?: React.ReactNode;\n  /**  Список позиций доступных для расположения выпадашки относительно `caption`.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   */\n  positions?: PopupPositionsType[];\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n}\n\nexport const TooltipMenuDataTids = {\n  root: 'TooltipMenu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент.\n *\n * Положение меню задаётся с помощью массива `positions` и работает так:\n * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,\n * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.\n *\n * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.\n *\n * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.\n */\n@rootNode\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n  public static displayName = 'TooltipMenu';\n\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(TooltipMenu.defaultProps);\n\n  constructor(props: TooltipMenuProps) {\n    super(props);\n\n    if (!props.caption && !isProductionEnv) {\n      throw new Error('Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.tooltipMenuPinOffset,\n                  popupMargin: theme.tooltipMenuMargin,\n                  popupPinSize: theme.tooltipMenuPinSize,\n                  menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    if (!this.props.caption) {\n      return null;\n    }\n\n    const { disableAnimations } = this.getProps();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          aria-label={this.props['aria-label']}\n          data-tid={TooltipMenuDataTids.root}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          caption={this.props.caption}\n          header={this.props.header}\n          footer={this.props.footer}\n          preventIconsOffset={this.props.preventIconsOffset}\n          positions={this.props.positions}\n          onOpen={this.props.onOpen}\n          onClose={this.props.onClose}\n          popupHasPin\n          disableAnimations={disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/components/TooltipMenu/TooltipMenu.d.ts

@@ -59,6 +59,7 @@ declare type DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>
  */
 export declare class TooltipMenu extends React.Component<TooltipMenuProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private setRootNode;
     static defaultProps: DefaultProps;
     private getProps;

package/index.d.ts

@@ -3,7 +3,6 @@ export * from './components/Button';
 export * from './components/Calendar';
 export * from './components/Center';
 export * from './components/Checkbox';
-export * from './components/Clickable';
 export * from './components/ComboBox';
 export * from './components/CurrencyInput';
 export * from './components/CurrencyLabel';
@@ -50,7 +49,6 @@ export * from './lib/featureFlagsContext';
 export * from './lib/locale';
 export * from './lib/theming/ThemeContext';
 export * from './lib/theming/ThemeFactory';
-export * from './lib/theming/useTheme';
 export * from './lib/theming/themes/DefaultTheme';
 export * from './lib/theming/themes/DarkTheme';
 export * from './lib/theming/themes/DefaultTheme8pxOld';

package/index.js

@@ -3,7 +3,6 @@ export * from './components/Button';
 export * from './components/Calendar';
 export * from './components/Center';
 export * from './components/Checkbox';
-export * from './components/Clickable';
 export * from './components/ComboBox';
 export * from './components/CurrencyInput';
 export * from './components/CurrencyLabel';
@@ -50,7 +49,6 @@ export * from './lib/featureFlagsContext';
 export * from './lib/locale';
 export * from './lib/theming/ThemeContext';
 export * from './lib/theming/ThemeFactory';
-export * from './lib/theming/useTheme';
 export * from './lib/theming/themes/DefaultTheme';
 export * from './lib/theming/themes/DarkTheme';
 export * from './lib/theming/themes/DefaultTheme8pxOld';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["ColorFunctions","DimensionFunctions"],"mappings":"AAAA,cAAc,2BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,wBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,2BAAd;AACA,cAAc,2BAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,2BAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,oBAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,qBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,8BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,mBAAd;AACA,cAAc,uBAAd;AACA,cAAc,oBAAd;AACA,cAAc,0BAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,sBAAd;AACA,cAAc,0BAAd;AACA,cAAc,+BAAd;AACA,cAAc,2BAAd;AACA,cAAc,cAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,mCAAd;AACA,cAAc,gCAAd;AACA,cAAc,yCAAd;AACA,cAAc,sCAAd;AACA,cAAc,gCAAd;AACA,cAAc,oCAAd;AACA,cAAc,mBAAd;AACA,cAAc,wBAAd,C;AACgC,6B,6BAApBA,c;AACwB,iC,iCAAxBC,kB","sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Calendar';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/Clickable';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/MiniModal';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/SingleToast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './lib/featureFlagsContext';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/useTheme';\nexport * from './lib/theming/themes/DefaultTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/theming/themes/DefaultTheme8pxOld';\nexport * from './lib/theming/themes/FlatTheme8pxOld';\nexport * from './lib/theming/themes/Theme2022';\nexport * from './lib/theming/themes/Theme2022Dark';\nexport * from './lib/types/props';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"]}
+{"version":3,"sources":["index.ts"],"names":["ColorFunctions","DimensionFunctions"],"mappings":"AAAA,cAAc,2BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,2BAAd;AACA,cAAc,2BAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,2BAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,oBAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,qBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,8BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,mBAAd;AACA,cAAc,uBAAd;AACA,cAAc,oBAAd;AACA,cAAc,0BAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,sBAAd;AACA,cAAc,0BAAd;AACA,cAAc,+BAAd;AACA,cAAc,2BAAd;AACA,cAAc,cAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,mCAAd;AACA,cAAc,gCAAd;AACA,cAAc,yCAAd;AACA,cAAc,sCAAd;AACA,cAAc,gCAAd;AACA,cAAc,oCAAd;AACA,cAAc,mBAAd;AACA,cAAc,wBAAd,C;AACgC,6B,6BAApBA,c;AACwB,iC,iCAAxBC,kB","sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Calendar';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/MiniModal';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/SingleToast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './lib/featureFlagsContext';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/DefaultTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/theming/themes/DefaultTheme8pxOld';\nexport * from './lib/theming/themes/FlatTheme8pxOld';\nexport * from './lib/theming/themes/Theme2022';\nexport * from './lib/theming/themes/Theme2022Dark';\nexport * from './lib/types/props';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"]}

package/internal/CloseButtonIcon/CloseButtonIcon/CloseButtonIcon.js

@@ -3,13 +3,13 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _excluded = ["side", "size", "color", "colorHover", "tabbable", "style"];
 import React from 'react';
 import { globalObject } from '@skbkontur/global-object';
-import { cx } from "../../../lib/theming/Emotion";
+import { useEmotion } from "../../../lib/theming/Emotion";
 import { keyListener } from "../../../lib/events/keyListener";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { DEFAULT_ICON_SIZE } from "../../icons2022/iconConstants";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { CommonWrapper } from "../../CommonWrapper";
-import { styles } from "../CloseButtonIcon.styles";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { getStyles } from "../CloseButtonIcon.styles";
 import { CrossIcon } from "../CrossIcon";
 export var CloseButtonIcon = function CloseButtonIcon(_ref) {
   var _ref$side = _ref.side,
@@ -23,7 +23,9 @@ export var CloseButtonIcon = function CloseButtonIcon(_ref) {
       style = _ref.style,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var _theme = React.useContext(ThemeContext);
+  var emotion = useEmotion();
+
+  var _theme = useTheme();
 
   var theme = ThemeFactory.create({
     closeBtnIconColor: color != null ? color : _theme.closeBtnIconColor,
@@ -49,9 +51,10 @@ export var CloseButtonIcon = function CloseButtonIcon(_ref) {
   };
 
   var tabIndex = !tabbable || rest.disabled ? -1 : 0;
+  var styles = getStyles(emotion);
   return /*#__PURE__*/React.createElement(CommonWrapper, rest, /*#__PURE__*/React.createElement("button", _extends({
     tabIndex: tabIndex,
-    className: cx(styles.root(theme), !rest.disabled && focusedByTab && styles.focus(theme), rest.disabled && styles.rootDisabled(theme)),
+    className: emotion.cx(styles.root(theme), !rest.disabled && focusedByTab && styles.focus(theme), rest.disabled && styles.rootDisabled(theme)),
     style: _extends({}, style, {
       width: side,
       height: side
@@ -64,4 +67,6 @@ export var CloseButtonIcon = function CloseButtonIcon(_ref) {
     size: side < size ? side : size,
     focusable: tabIndex >= 0
   }))));
-};
+};
+CloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';
+CloseButtonIcon.displayName = 'CloseButtonIcon';

package/internal/CloseButtonIcon/CloseButtonIcon/CloseButtonIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CloseButtonIcon.tsx"],"names":["React","globalObject","cx","keyListener","ThemeContext","DEFAULT_ICON_SIZE","ThemeFactory","CommonWrapper","styles","CrossIcon","CloseButtonIcon","side","size","color","colorHover","tabbable","style","rest","_theme","useContext","theme","create","closeBtnIconColor","closeBtnIconHoverColor","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","tabIndex","disabled","root","focus","rootDisabled","width","height","wrapper"],"mappings":"2OAAA,OAAOA,KAAP,MAAqD,OAArD;AACA,SAASC,YAAT,QAA6B,0BAA7B;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,iBAAT,QAAkC,4BAAlC;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,aAAT,QAA2C,kBAA3C;;AAEA,SAASC,MAAT,QAAuB,0BAAvB;AACA,SAASC,SAAT,QAA0B,aAA1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,OAAO,IAAMC,eAA8D,GAAG,SAAjEA,eAAiE;;;;;;;;AAQxE,sBAPJC,IAOI,CAPJA,IAOI,0BAPGN,iBAOH,8BANJO,IAMI,CANJA,IAMI,0BANGP,iBAMH,aALJQ,KAKI,QALJA,KAKI,CAJJC,UAII,QAJJA,UAII,sBAHJC,QAGI,CAHJA,QAGI,8BAHO,IAGP,iBAFJC,KAEI,QAFJA,KAEI,CADDC,IACC;AACJ,MAAMC,MAAM,GAAGlB,KAAK,CAACmB,UAAN,CAAiBf,YAAjB,CAAf;AACA,MAAMgB,KAAK,GAAGd,YAAY,CAACe,MAAb;AACZ;AACEC,IAAAA,iBAAiB,EAAET,KAAF,WAAEA,KAAF,GAAWK,MAAM,CAACI,iBADrC;AAEEC,IAAAA,sBAAsB,EAAET,UAAF,WAAEA,UAAF,GAAgBI,MAAM,CAACK,sBAF/C,EADY;;AAKZL,EAAAA,MALY,CAAd;;AAOA,wBAAwClB,KAAK,CAACwB,QAAN,CAAe,KAAf,CAAxC,CAAOC,YAAP,sBAAqBC,eAArB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA;AACA1B,IAAAA,YAAY,CAAC2B,qBAAb,oBAAA3B,YAAY,CAAC2B,qBAAb,CAAqC,YAAM;AACzC,UAAIzB,WAAW,CAAC0B,YAAhB,EAA8B;AAC5BH,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJD;AAKD,GARD;AASA,MAAMI,UAAU,GAAG,SAAbA,UAAa,WAAMJ,eAAe,CAAC,KAAD,CAArB,EAAnB;;AAEA,MAAMK,QAAQ,GAAG,CAAChB,QAAD,IAAaE,IAAI,CAACe,QAAlB,GAA6B,CAAC,CAA9B,GAAkC,CAAnD;;AAEA;AACE,wBAAC,aAAD,EAAmBf,IAAnB;AACE;AACE,MAAA,QAAQ,EAAEc,QADZ;AAEE,MAAA,SAAS,EAAE7B,EAAE;AACXM,MAAAA,MAAM,CAACyB,IAAP,CAAYb,KAAZ,CADW;AAEX,OAACH,IAAI,CAACe,QAAN,IAAkBP,YAAlB,IAAkCjB,MAAM,CAAC0B,KAAP,CAAad,KAAb,CAFvB;AAGXH,MAAAA,IAAI,CAACe,QAAL,IAAiBxB,MAAM,CAAC2B,YAAP,CAAoBf,KAApB,CAHN,CAFf;;AAOE,MAAA,KAAK,eAAOJ,KAAP,IAAcoB,KAAK,EAAEzB,IAArB,EAA2B0B,MAAM,EAAE1B,IAAnC,GAPP;AAQE,MAAA,OAAO,EAAEgB,WARX;AASE,MAAA,MAAM,EAAEG,UATV;AAUMb,IAAAA,IAVN;;AAYE,kCAAM,SAAS,EAAET,MAAM,CAAC8B,OAAP,EAAjB;AACE,wBAAC,SAAD,IAAW,IAAI,EAAE3B,IAAI,GAAGC,IAAP,GAAcD,IAAd,GAAqBC,IAAtC,EAA4C,SAAS,EAAEmB,QAAQ,IAAI,CAAnE,GADF,CAZF,CADF,CADF;;;;;AAoBD,CApDM","sourcesContent":["import React, { AriaAttributes, CSSProperties } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../CommonWrapper';\n\nimport { styles } from './CloseButtonIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /**\n   * Ширина и высота иконки крестика\n   *\n   * @default 16\n   */\n  size?: number;\n  /**\n   * Ширина и высота всей кнопки\n   *\n   * @default 16\n   */\n  side?: number;\n  /**\n   * Цвет иконки\n   *\n   * Переменная темы: `closeBtnIconColor`\n   */\n  color?: CSSProperties['color'];\n  /**\n   * Цвет иконки при наведении мышью и при фокусе\n   *\n   * Переменная темы: `closeBtnIconHoverColor`\n   */\n  colorHover?: CSSProperties['color'];\n  /**\n   * Возможность сфокусироваться на кнопке клавишей TAB\n   *\n   * @default true\n   * */\n  tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n  side = DEFAULT_ICON_SIZE,\n  size = DEFAULT_ICON_SIZE,\n  color,\n  colorHover,\n  tabbable = true,\n  style,\n  ...rest\n}) => {\n  const _theme = React.useContext(ThemeContext);\n  const theme = ThemeFactory.create(\n    {\n      closeBtnIconColor: color ?? _theme.closeBtnIconColor,\n      closeBtnIconHoverColor: colorHover ?? _theme.closeBtnIconHoverColor,\n    },\n    _theme,\n  );\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  const tabIndex = !tabbable || rest.disabled ? -1 : 0;\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        tabIndex={tabIndex}\n        className={cx(\n          styles.root(theme),\n          !rest.disabled && focusedByTab && styles.focus(theme),\n          rest.disabled && styles.rootDisabled(theme),\n        )}\n        style={{ ...style, width: side, height: side }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <span className={styles.wrapper()}>\n          <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n        </span>\n      </button>\n    </CommonWrapper>\n  );\n};\n"]}
+{"version":3,"sources":["CloseButtonIcon.tsx"],"names":["React","globalObject","useEmotion","keyListener","DEFAULT_ICON_SIZE","ThemeFactory","CommonWrapper","useTheme","getStyles","CrossIcon","CloseButtonIcon","side","size","color","colorHover","tabbable","style","rest","emotion","_theme","theme","create","closeBtnIconColor","closeBtnIconHoverColor","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","tabIndex","disabled","styles","cx","root","focus","rootDisabled","width","height","wrapper","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React, { AriaAttributes, CSSProperties } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonProps, CommonWrapper } from '../CommonWrapper';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { getStyles } from './CloseButtonIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /**\n   * Ширина и высота иконки крестика\n   *\n   * @default 16\n   */\n  size?: number;\n  /**\n   * Ширина и высота всей кнопки\n   *\n   * @default 16\n   */\n  side?: number;\n  /**\n   * Цвет иконки\n   *\n   * Переменная темы: `closeBtnIconColor`\n   */\n  color?: CSSProperties['color'];\n  /**\n   * Цвет иконки при наведении мышью и при фокусе\n   *\n   * Переменная темы: `closeBtnIconHoverColor`\n   */\n  colorHover?: CSSProperties['color'];\n  /**\n   * Возможность сфокусироваться на кнопке клавишей TAB\n   *\n   * @default true\n   * */\n  tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n  side = DEFAULT_ICON_SIZE,\n  size = DEFAULT_ICON_SIZE,\n  color,\n  colorHover,\n  tabbable = true,\n  style,\n  ...rest\n}) => {\n  const emotion = useEmotion();\n  const _theme = useTheme();\n  const theme = ThemeFactory.create(\n    {\n      closeBtnIconColor: color ?? _theme.closeBtnIconColor,\n      closeBtnIconHoverColor: colorHover ?? _theme.closeBtnIconHoverColor,\n    },\n    _theme,\n  );\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  const tabIndex = !tabbable || rest.disabled ? -1 : 0;\n  const styles = getStyles(emotion);\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        tabIndex={tabIndex}\n        className={emotion.cx(\n          styles.root(theme),\n          !rest.disabled && focusedByTab && styles.focus(theme),\n          rest.disabled && styles.rootDisabled(theme),\n        )}\n        style={{ ...style, width: side, height: side }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <span className={styles.wrapper()}>\n          <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n        </span>\n      </button>\n    </CommonWrapper>\n  );\n};\n\nCloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';\nCloseButtonIcon.displayName = 'CloseButtonIcon';\n"]}

package/internal/CloseButtonIcon/CloseButtonIcon.styles/CloseButtonIcon.styles.js

@@ -2,19 +2,21 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
-export var styles = memoizeStyle({
-  root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", "\n      display: inline-block;\n      position: relative;\n      border-radius: ", ";\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n\n      &:enabled:focus,\n      &:enabled:hover {\n        color: ", ";\n      }\n    "])), resetButton(), t.closeBtnIconBorderRadius, t.closeBtnIconColor, t.transitionDuration, t.transitionTimingFunction, t.closeBtnIconHoverColor);
-  },
-  rootDisabled: function rootDisabled(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.closeBtnIconDisabledColor);
-  },
-  focus: function focus(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", ";\n    "])), t.closeBtnIconFocusShadow);
-  },
-  wrapper: function wrapper() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      box-sizing: content-box;\n      display: flex;\n      width: 100%;\n      height: 100%;\n      align-items: center;\n      justify-content: center;\n      pointer-events: none;\n    "])));
-  }
-});
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        ", "\n        display: inline-block;\n        position: relative;\n        border-radius: ", ";\n        color: ", ";\n        cursor: pointer;\n        transition: color ", " ", ";\n\n        &:enabled:focus,\n        &:enabled:hover {\n          color: ", ";\n        }\n      "])), resetButton(emotion), t.closeBtnIconBorderRadius, t.closeBtnIconColor, t.transitionDuration, t.transitionTimingFunction, t.closeBtnIconHoverColor);
+    },
+    rootDisabled: function rootDisabled(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.closeBtnIconDisabledColor);
+    },
+    focus: function focus(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        box-shadow: ", ";\n      "])), t.closeBtnIconFocusShadow);
+    },
+    wrapper: function wrapper() {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        box-sizing: content-box;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n        pointer-events: none;\n      "])));
+    }
+  });
+};

package/internal/CloseButtonIcon/CloseButtonIcon.styles/CloseButtonIcon.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CloseButtonIcon.styles.tsx"],"names":["css","memoizeStyle","resetButton","styles","root","t","closeBtnIconBorderRadius","closeBtnIconColor","transitionDuration","transitionTimingFunction","closeBtnIconHoverColor","rootDisabled","closeBtnIconDisabledColor","focus","closeBtnIconFocusShadow","wrapper"],"mappings":"0KAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,WAAT,QAA4B,yBAA5B;;AAEA,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;AACjCG,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOL,GAAP;AACIE,IAAAA,WAAW,EADf;;;AAImBG,IAAAA,CAAC,CAACC,wBAJrB;AAKWD,IAAAA,CAAC,CAACE,iBALb;;AAOsBF,IAAAA,CAAC,CAACG,kBAPxB,EAO8CH,CAAC,CAACI,wBAPhD;;;;AAWaJ,IAAAA,CAAC,CAACK,sBAXf;;;AAcD,GAhBgC;AAiBjCC,EAAAA,YAjBiC,wBAiBpBN,CAjBoB,EAiBV;AACrB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACO,yBADb;;AAGD,GArBgC;AAsBjCC,EAAAA,KAtBiC,iBAsB3BR,CAtB2B,EAsBjB;AACd,WAAOL,GAAP;AACgBK,IAAAA,CAAC,CAACS,uBADlB;;AAGD,GA1BgC;AA2BjCC,EAAAA,OA3BiC,qBA2BvB;AACR,WAAOf,GAAP;;;;;;;;;AASD,GArCgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${resetButton()}\n      display: inline-block;\n      position: relative;\n      border-radius: ${t.closeBtnIconBorderRadius};\n      color: ${t.closeBtnIconColor};\n      cursor: pointer;\n      transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n\n      &:enabled:focus,\n      &:enabled:hover {\n        color: ${t.closeBtnIconHoverColor};\n      }\n    `;\n  },\n  rootDisabled(t: Theme) {\n    return css`\n      color: ${t.closeBtnIconDisabledColor};\n    `;\n  },\n  focus(t: Theme) {\n    return css`\n      box-shadow: ${t.closeBtnIconFocusShadow};\n    `;\n  },\n  wrapper() {\n    return css`\n      box-sizing: content-box;\n      display: flex;\n      width: 100%;\n      height: 100%;\n      align-items: center;\n      justify-content: center;\n      pointer-events: none;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["CloseButtonIcon.styles.tsx"],"names":["memoizeStyle","resetButton","getStyles","emotion","root","t","css","closeBtnIconBorderRadius","closeBtnIconColor","transitionDuration","transitionTimingFunction","closeBtnIconHoverColor","rootDisabled","closeBtnIconDisabledColor","focus","closeBtnIconFocusShadow","wrapper"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,SAASC,WAAT,QAA4B,yBAA5B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBH,IAAAA,YAAY,CAAC;AACXI,MAAAA,IADW,gBACNC,CADM,EACI;AACb,eAAOF,OAAO,CAACG,GAAf;AACIL,QAAAA,WAAW,CAACE,OAAD,CADf;;;AAImBE,QAAAA,CAAC,CAACE,wBAJrB;AAKWF,QAAAA,CAAC,CAACG,iBALb;;AAOsBH,QAAAA,CAAC,CAACI,kBAPxB,EAO8CJ,CAAC,CAACK,wBAPhD;;;;AAWaL,QAAAA,CAAC,CAACM,sBAXf;;;AAcD,OAhBU;AAiBXC,MAAAA,YAjBW,wBAiBEP,CAjBF,EAiBY;AACrB,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACQ,yBADb;;AAGD,OArBU;AAsBXC,MAAAA,KAtBW,iBAsBLT,CAtBK,EAsBK;AACd,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACU,uBADlB;;AAGD,OA1BU;AA2BXC,MAAAA,OA3BW,qBA2BD;AACR,eAAOb,OAAO,CAACG,GAAf;;;;;;;;;AASD,OArCU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        ${resetButton(emotion)}\n        display: inline-block;\n        position: relative;\n        border-radius: ${t.closeBtnIconBorderRadius};\n        color: ${t.closeBtnIconColor};\n        cursor: pointer;\n        transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n\n        &:enabled:focus,\n        &:enabled:hover {\n          color: ${t.closeBtnIconHoverColor};\n        }\n      `;\n    },\n    rootDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.closeBtnIconDisabledColor};\n      `;\n    },\n    focus(t: Theme) {\n      return emotion.css`\n        box-shadow: ${t.closeBtnIconFocusShadow};\n      `;\n    },\n    wrapper() {\n      return emotion.css`\n        box-sizing: content-box;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n        pointer-events: none;\n      `;\n    },\n  });\n"]}

package/internal/CloseButtonIcon/CloseButtonIcon.styles.d.ts

@@ -1,5 +1,6 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     root(t: Theme): string;
     rootDisabled(t: Theme): string;
     focus(t: Theme): string;

package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js

@@ -3,14 +3,16 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _excluded = ["className", "style", "children", "rootNodeRef"];
 
-var _class;
+var _class, _class2, _temp;
 
 import React from 'react';
 import { isFunction, isRefableElement } from "../../../lib/utils";
-import { cx } from "../../../lib/theming/Emotion";
-import { getRootNode, rootNode, isInstanceWithRootNode } from "../../../lib/rootNode";
+import { getRootNode, isInstanceWithRootNode, rootNode } from "../../../lib/rootNode";
 import { callChildRef } from "../../../lib/callChildRef/callChildRef";
-export var CommonWrapper = rootNode(_class = /*#__PURE__*/function (_React$Component) {
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { extractCommonProps } from "../extractCommonProps";
+import { getCommonVisualStateDataAttributes } from "../getCommonVisualStateDataAttributes";
+export var CommonWrapper = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(CommonWrapper, _React$Component);
 
   function CommonWrapper() {
@@ -28,7 +30,7 @@ export var CommonWrapper = rootNode(_class = /*#__PURE__*/function (_React$Compo
 
       _this.setRootNode(instance);
 
-      _this.props.rootNodeRef == null ? void 0 : _this.props.rootNodeRef(getRootNode(instance)); // refs are called when instances change
+      _this.props.rootNodeRef == null ? void 0 : _this.props.rootNodeRef(getRootNode(instance)); // refs are called when instances change,
       // so we have to renew or remove old subscription
 
       (_this$rootNodeSubscri = _this.rootNodeSubscription) == null ? void 0 : _this$rootNodeSubscri.remove();
@@ -52,7 +54,17 @@ export var CommonWrapper = rootNode(_class = /*#__PURE__*/function (_React$Compo
   var _proto = CommonWrapper.prototype;
 
   _proto.render = function render() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this3 = this;
+
     var _extractCommonProps = extractCommonProps(this.props),
         _extractCommonProps$ = _extractCommonProps[0],
         className = _extractCommonProps$.className,
@@ -63,44 +75,24 @@ export var CommonWrapper = rootNode(_class = /*#__PURE__*/function (_React$Compo
         rest = _extends({}, _extractCommonProps[1]);
 
     this.child = isFunction(children) ? children(rest) : children;
-    return /*#__PURE__*/React.isValidElement(this.child) ? /*#__PURE__*/React.cloneElement(this.child, _extends({
-      ref: isRefableElement(this.child) ? this.ref : null,
-      className: cx(this.child.props.className, className),
-      style: _extends({}, this.child.props.style, style)
-    }, dataProps)) : this.child;
+
+    var getChildProps = function getChildProps(child) {
+      var childProps = _extends({}, getCommonVisualStateDataAttributes(rest), dataProps);
+
+      isRefableElement(child) && (childProps.ref = _this3.ref);
+
+      var classNames = _this3.emotion.cx(child.props.className, className);
+
+      classNames && (childProps.className = classNames);
+
+      var styles = _extends({}, child.props.style, style);
+
+      Object.keys(styles).length && (childProps.style = styles);
+      return childProps;
+    };
+
+    return /*#__PURE__*/React.isValidElement(this.child) ? /*#__PURE__*/React.cloneElement(this.child, getChildProps(this.child)) : this.child;
   };
 
   return CommonWrapper;
-}(React.Component)) || _class;
-
-var extractCommonProps = function extractCommonProps(props) {
-  var common = {};
-  var rest = {};
-
-  for (var key in props) {
-    if (isCommonProp(key)) {
-      // @ts-expect-error: See: https://github.com/skbkontur/retail-ui/pull/2257#discussion_r565275843 and https://github.com/skbkontur/retail-ui/pull/2257#discussion_r569542736.
-      common[key] = props[key];
-    } else {
-      // @ts-expect-error: Read the comment above.
-      rest[key] = props[key];
-    }
-  }
-
-  return [common, rest];
-};
-
-var isCommonProp = function isCommonProp(name) {
-  switch (true) {
-    case name === 'className':
-    case name === 'style':
-    case name === 'rootNodeRef':
-    case name === 'children':
-    case name.indexOf('data-') === 0:
-      // все data-атрибуты
-      return true;
-
-    default:
-      return false;
-  }
-};
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'CommonWrapper', _class2.displayName = 'CommonWrapper', _temp)) || _class;

package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CommonWrapper.tsx"],"names":["React","isFunction","isRefableElement","cx","getRootNode","rootNode","isInstanceWithRootNode","callChildRef","CommonWrapper","rootNodeSubscription","ref","instance","setRootNode","props","rootNodeRef","remove","addRootNodeChangeListener","node","originalRef","child","render","extractCommonProps","className","style","children","dataProps","rest","isValidElement","cloneElement","Component","common","key","isCommonProp","name","indexOf"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isFunction, isRefableElement } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { Nullable } from '../../typings/utility-types';\nimport { getRootNode, rootNode, TSetRootNode, TRootNodeSubscription, isInstanceWithRootNode } from '../../lib/rootNode';\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\n\nexport interface CommonProps {\n  /**\n   * HTML-атрибут `class`.\n   */\n  className?: React.HTMLAttributes<HTMLElement>['className'];\n  /**\n   * HTML-атрибут `style`.\n   */\n  style?: React.HTMLAttributes<HTMLElement>['style'];\n  /**\n   * На равне с data-tid транслируются любые data-атрибуты. Они попадают на корневой элемент.\n   */\n  'data-tid'?: string;\n  children?: React.ReactNode;\n}\n\ninterface CommonPropsRootNodeRef {\n  rootNodeRef?: (instance: Nullable<Element>) => void;\n}\n\nexport type NotCommonProps<P> = Omit<P, keyof CommonProps>;\n\nexport type CommonWrapperProps<P> = P & {\n  children: React.ReactNode | ((rest: CommonWrapperRestProps<P>) => React.ReactNode);\n};\nexport type CommonWrapperRestProps<P> = Omit<NotCommonProps<P>, 'children'>;\n\n@rootNode\nexport class CommonWrapper<P extends CommonProps & CommonPropsRootNodeRef> extends React.Component<\n  CommonWrapperProps<P> & CommonPropsRootNodeRef\n> {\n  private child: React.ReactNode;\n  private setRootNode!: TSetRootNode;\n  private rootNodeSubscription: Nullable<TRootNodeSubscription> = null;\n\n  render() {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const [{ className, style, children, rootNodeRef, ...dataProps }, { ...rest }] = extractCommonProps(this.props);\n    this.child = isFunction(children) ? children(rest) : children;\n    return React.isValidElement<CommonProps & React.RefAttributes<any>>(this.child)\n      ? React.cloneElement(this.child, {\n          ref: isRefableElement(this.child) ? this.ref : null,\n          className: cx(this.child.props.className, className),\n          style: {\n            ...this.child.props.style,\n            ...style,\n          },\n          ...dataProps,\n        })\n      : this.child;\n  }\n\n  private ref = (instance: Nullable<React.ReactInstance>) => {\n    this.setRootNode(instance);\n    this.props.rootNodeRef?.(getRootNode(instance));\n\n    // refs are called when instances change\n    // so we have to renew or remove old subscription\n    this.rootNodeSubscription?.remove();\n    this.rootNodeSubscription = null;\n\n    if (instance && isInstanceWithRootNode(instance)) {\n      this.rootNodeSubscription = instance.addRootNodeChangeListener?.((node) => {\n        this.setRootNode(node);\n        this.props.rootNodeRef?.(node);\n      });\n    }\n\n    const originalRef = (this.child as React.RefAttributes<any>)?.ref;\n    originalRef && callChildRef(originalRef, instance);\n  };\n}\n\nconst extractCommonProps = <P extends CommonProps & CommonPropsRootNodeRef>(\n  props: P,\n): [CommonProps & CommonPropsRootNodeRef, NotCommonProps<P>] => {\n  const common = {} as CommonProps & CommonPropsRootNodeRef;\n  const rest = {} as NotCommonProps<P>;\n\n  for (const key in props) {\n    if (isCommonProp(key)) {\n      // @ts-expect-error: See: https://github.com/skbkontur/retail-ui/pull/2257#discussion_r565275843 and https://github.com/skbkontur/retail-ui/pull/2257#discussion_r569542736.\n      common[key] = props[key];\n    } else {\n      // @ts-expect-error: Read the comment above.\n      rest[key] = props[key];\n    }\n  }\n\n  return [common, rest];\n};\n\nconst isCommonProp = (name: string) => {\n  switch (true) {\n    case name === 'className':\n    case name === 'style':\n    case name === 'rootNodeRef':\n    case name === 'children':\n    case name.indexOf('data-') === 0: // все data-атрибуты\n      return true;\n    default:\n      return false;\n  }\n};\n"]}
+{"version":3,"sources":["CommonWrapper.tsx"],"names":["React","isFunction","isRefableElement","getRootNode","isInstanceWithRootNode","rootNode","callChildRef","EmotionConsumer","extractCommonProps","getCommonVisualStateDataAttributes","CommonWrapper","rootNodeSubscription","ref","instance","setRootNode","props","rootNodeRef","remove","addRootNodeChangeListener","node","originalRef","child","render","emotion","renderMain","className","style","children","dataProps","rest","getChildProps","childProps","classNames","cx","styles","Object","keys","length","isValidElement","cloneElement","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isFunction, isRefableElement } from '../../lib/utils';\nimport { Nullable } from '../../typings/utility-types';\nimport { getRootNode, isInstanceWithRootNode, rootNode, TRootNodeSubscription, TSetRootNode } from '../../lib/rootNode';\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\n\nimport type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types';\nimport { extractCommonProps } from './extractCommonProps';\nimport { getCommonVisualStateDataAttributes } from './getCommonVisualStateDataAttributes';\n\nexport type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;\n\n@rootNode\nexport class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<\n  CommonWrapperProps<P> & CommonPropsRootNodeRef\n> {\n  public static __KONTUR_REACT_UI__ = 'CommonWrapper';\n  public static displayName = 'CommonWrapper';\n\n  private child: React.ReactNode;\n  private setRootNode!: TSetRootNode;\n  private rootNodeSubscription: Nullable<TRootNodeSubscription> = null;\n  private emotion!: Emotion;\n\n  render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return this.renderMain();\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  renderMain() {\n    const [{ className, style, children, rootNodeRef, ...dataProps }, { ...rest }] = extractCommonProps(this.props);\n    this.child = isFunction(children) ? children(rest) : children;\n\n    const getChildProps = (child: React.ReactElement<CommonProps & React.RefAttributes<any>>) => {\n      const childProps: Record<string, unknown> = {\n        ...getCommonVisualStateDataAttributes(rest),\n        ...dataProps,\n      };\n\n      isRefableElement(child) && (childProps.ref = this.ref);\n\n      const classNames: string = this.emotion.cx(child.props.className, className);\n      classNames && (childProps.className = classNames);\n\n      const styles: React.CSSProperties = { ...child.props.style, ...style };\n      Object.keys(styles).length && (childProps.style = styles);\n\n      return childProps;\n    };\n\n    return React.isValidElement<CommonProps & React.RefAttributes<any>>(this.child)\n      ? React.cloneElement(this.child, getChildProps(this.child))\n      : this.child;\n  }\n\n  private ref = (instance: Nullable<React.ReactInstance>) => {\n    this.setRootNode(instance);\n    this.props.rootNodeRef?.(getRootNode(instance));\n\n    // refs are called when instances change,\n    // so we have to renew or remove old subscription\n    this.rootNodeSubscription?.remove();\n    this.rootNodeSubscription = null;\n\n    if (instance && isInstanceWithRootNode(instance)) {\n      this.rootNodeSubscription = instance.addRootNodeChangeListener?.((node) => {\n        this.setRootNode(node);\n        this.props.rootNodeRef?.(node);\n      });\n    }\n\n    const originalRef = (this.child as React.RefAttributes<any>)?.ref;\n    originalRef && callChildRef(originalRef, instance);\n  };\n}\n"]}

package/internal/CommonWrapper/CommonWrapper.d.ts

@@ -1,33 +1,14 @@
 import React from 'react';
-import { Nullable } from '../../typings/utility-types';
-export interface CommonProps {
-    /**
-     * HTML-атрибут `class`.
-     */
-    className?: React.HTMLAttributes<HTMLElement>['className'];
-    /**
-     * HTML-атрибут `style`.
-     */
-    style?: React.HTMLAttributes<HTMLElement>['style'];
-    /**
-     * На равне с data-tid транслируются любые data-атрибуты. Они попадают на корневой элемент.
-     */
-    'data-tid'?: string;
-    children?: React.ReactNode;
-}
-interface CommonPropsRootNodeRef {
-    rootNodeRef?: (instance: Nullable<Element>) => void;
-}
-export declare type NotCommonProps<P> = Omit<P, keyof CommonProps>;
-export declare type CommonWrapperProps<P> = P & {
-    children: React.ReactNode | ((rest: CommonWrapperRestProps<P>) => React.ReactNode);
-};
-export declare type CommonWrapperRestProps<P> = Omit<NotCommonProps<P>, 'children'>;
-export declare class CommonWrapper<P extends CommonProps & CommonPropsRootNodeRef> extends React.Component<CommonWrapperProps<P> & CommonPropsRootNodeRef> {
+import type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types';
+export declare type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;
+export declare class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<CommonWrapperProps<P> & CommonPropsRootNodeRef> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private child;
     private setRootNode;
     private rootNodeSubscription;
-    render(): React.ReactNode;
+    private emotion;
+    render(): JSX.Element;
+    renderMain(): React.ReactNode;
     private ref;
 }
-export {};

package/internal/CommonWrapper/extractCommonProps/extractCommonProps.js

@@ -0,0 +1,31 @@
+export var extractCommonProps = function extractCommonProps(props) {
+  var common = {};
+  var rest = {};
+
+  for (var prop in props) {
+    if (isCommonProp(prop)) {
+      // @ts-expect-error: See: https://github.com/skbkontur/retail-ui/pull/2257#discussion_r565275843 and https://github.com/skbkontur/retail-ui/pull/2257#discussion_r569542736.
+      common[prop] = props[prop];
+    } else {
+      // @ts-expect-error: Read the comment above.
+      rest[prop] = props[prop];
+    }
+  }
+
+  return [common, rest];
+};
+
+var isCommonProp = function isCommonProp(prop) {
+  switch (true) {
+    case prop === 'className':
+    case prop === 'style':
+    case prop === 'rootNodeRef':
+    case prop === 'children':
+    case prop.indexOf('data-') === 0:
+      // все data-атрибуты
+      return true;
+
+    default:
+      return false;
+  }
+};

package/internal/CommonWrapper/extractCommonProps/extractCommonProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["extractCommonProps.ts"],"names":["extractCommonProps","props","common","rest","prop","isCommonProp","indexOf"],"mappings":";;;AAGA,OAAO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB;AAChCC,KADgC;AAEoB;AACpD,MAAMC,MAAM,GAAG,EAAf;AACA,MAAMC,IAAI,GAAG,EAAb;;AAEA,OAAK,IAAMC,IAAX,IAAmBH,KAAnB,EAA0B;AACxB,QAAII,YAAY,CAACD,IAAD,CAAhB,EAA4D;AAC1D;AACAF,MAAAA,MAAM,CAACE,IAAD,CAAN,GAAeH,KAAK,CAACG,IAAD,CAApB;AACD,KAHD,MAGO;AACL;AACAD,MAAAA,IAAI,CAACC,IAAD,CAAJ,GAAaH,KAAK,CAACG,IAAD,CAAlB;AACD;AACF;;AAED,SAAO,CAACF,MAAD,EAASC,IAAT,CAAP;AACD,CAjBM;;AAmBP,IAAME,YAAY,GAAG,SAAfA,YAAe,CAACD,IAAD,EAA4C;AAC/D,UAAQ,IAAR;AACE,SAAKA,IAAI,KAAK,WAAd;AACA,SAAKA,IAAI,KAAK,OAAd;AACA,SAAKA,IAAI,KAAK,aAAd;AACA,SAAKA,IAAI,KAAK,UAAd;AACA,SAAKA,IAAI,CAACE,OAAL,CAAa,OAAb,MAA0B,CAA/B,EAAkC;AAChC,aAAO,IAAP;AACF;AACE,aAAO,KAAP,CARJ;;AAUD,CAXD","sourcesContent":["import type { NotCommonProps } from './types';\nimport type { CommonPropsWithRootNodeRef } from './CommonWrapper';\n\nexport const extractCommonProps = <P extends CommonPropsWithRootNodeRef>(\n  props: P,\n): [CommonPropsWithRootNodeRef, NotCommonProps<P>] => {\n  const common = {} as CommonPropsWithRootNodeRef;\n  const rest = {} as NotCommonProps<P>;\n\n  for (const prop in props) {\n    if (isCommonProp(prop as keyof CommonPropsWithRootNodeRef)) {\n      // @ts-expect-error: See: https://github.com/skbkontur/retail-ui/pull/2257#discussion_r565275843 and https://github.com/skbkontur/retail-ui/pull/2257#discussion_r569542736.\n      common[prop] = props[prop];\n    } else {\n      // @ts-expect-error: Read the comment above.\n      rest[prop] = props[prop];\n    }\n  }\n\n  return [common, rest];\n};\n\nconst isCommonProp = (prop: keyof CommonPropsWithRootNodeRef) => {\n  switch (true) {\n    case prop === 'className':\n    case prop === 'style':\n    case prop === 'rootNodeRef':\n    case prop === 'children':\n    case prop.indexOf('data-') === 0: // все data-атрибуты\n      return true;\n    default:\n      return false;\n  }\n};\n"]}

package/internal/CommonWrapper/extractCommonProps/package.json

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

package/internal/CommonWrapper/extractCommonProps.d.ts

@@ -0,0 +1,3 @@
+import type { NotCommonProps } from './types';
+import type { CommonPropsWithRootNodeRef } from './CommonWrapper';
+export declare const extractCommonProps: <P extends CommonPropsWithRootNodeRef>(props: P) => [CommonPropsWithRootNodeRef, NotCommonProps<P>];

package/internal/CommonWrapper/getCommonVisualStateDataAttributes/getCommonVisualStateDataAttributes.js

@@ -0,0 +1,12 @@
+import { getVisualStateDataAttributes } from "../getVisualStateDataAttributes";
+
+var tryGetBoolean = function tryGetBoolean(value) {
+  return typeof value === 'boolean' ? value : undefined;
+};
+
+export function getCommonVisualStateDataAttributes(componentProps) {
+  return getVisualStateDataAttributes({
+    error: tryGetBoolean(componentProps['error']),
+    warning: tryGetBoolean(componentProps['warning'])
+  });
+}