@skbkontur/react-ui 6.4.7-b33c6.0 → 6.5.0

package/components/Tabs/Tab.js

@@ -36,13 +36,13 @@ import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';
 import { ResizeDetector } from '../../internal/ResizeDetector/index.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
-import { cx } from '../../lib/cx.js';
 import { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers.js';
 import { KeyListener } from '../../lib/events/keyListener.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { isFunctionalComponent } from '../../lib/utils.js';
-import { horizontalStyles, styles, verticalStyles, globalClasses } from './Tab.css.js';
+import { getHorizontalStyles, getStyles, getVerticalStyles, globalClasses } from './Tab.styles.js';
 import { TabsContext, TabsContextDefaultValue } from './TabsContext.js';
 export var TabDataTids = {
     root: 'Tab__root',
@@ -148,6 +148,16 @@ var Tab = /** @class */ (function (_super) {
             this.context.removeTab(id);
         }
     };
+    Tab.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        this.horizontalStyles = getHorizontalStyles(this.emotion);
+        this.verticalStyles = getVerticalStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
+    };
     Tab.prototype.getIndicators = function () {
         return {
             error: Boolean(this.props.error),
@@ -160,7 +170,7 @@ var Tab = /** @class */ (function (_super) {
     Tab.prototype.getUnderlyingNode = function () {
         return this.tabComponent;
     };
-    Tab.prototype.render = function () {
+    Tab.prototype.renderMain = function () {
         var _a, _b;
         var _c = this.props, children = _c.children, disabled = _c.disabled, error = _c.error, warning = _c.warning, success = _c.success, primary = _c.primary, ariaDescribedby = _c["aria-describedby"], ariaLabel = _c["aria-label"];
         var _d = this.getProps(), Component = _d.component, href = _d.href;
@@ -171,29 +181,29 @@ var Tab = /** @class */ (function (_super) {
             isActive = this.context.activeTab === this.getId();
             isVertical = this.context.vertical;
         }
-        var orientationStyles = isVertical ? verticalStyles : horizontalStyles;
+        var orientationStyles = isVertical ? this.verticalStyles : this.horizontalStyles;
         return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, getVisualStateDataAttributes({ active: isActive, disabled: disabled }), this.props),
-            React.createElement(Component, { "data-tid": TabDataTids.root, className: cx((_a = {},
-                    _a[styles.rootSmall] = this.context.size === 'small',
-                    _a[styles.rootMedium] = this.context.size === 'medium',
-                    _a[styles.rootLarge] = this.context.size === 'large',
-                    _a[styles.verticalSmall] = !!isVertical && this.context.size === 'small',
-                    _a[styles.verticalMedium] = !!isVertical && this.context.size === 'medium',
-                    _a[styles.verticalLarge] = !!isVertical && this.context.size === 'large',
-                    _a[orientationStyles.primary] = !!primary,
-                    _a[orientationStyles.success] = !!success,
-                    _a[orientationStyles.warning] = !!warning,
-                    _a[orientationStyles.error] = !!error,
-                    _a[styles.active] = !!isActive,
-                    _a[orientationStyles.active] = !!isActive,
-                    _a[styles.disabled] = !!disabled,
-                    _a[orientationStyles.disabled] = !!disabled,
+            React.createElement(Component, { "data-tid": TabDataTids.root, className: this.cx((_a = {},
+                    _a[this.styles.rootSmall(this.theme)] = this.context.size === 'small',
+                    _a[this.styles.rootMedium(this.theme)] = this.context.size === 'medium',
+                    _a[this.styles.rootLarge(this.theme)] = this.context.size === 'large',
+                    _a[this.styles.verticalSmall(this.theme)] = !!isVertical && this.context.size === 'small',
+                    _a[this.styles.verticalMedium(this.theme)] = !!isVertical && this.context.size === 'medium',
+                    _a[this.styles.verticalLarge(this.theme)] = !!isVertical && this.context.size === 'large',
+                    _a[orientationStyles.primary(this.theme)] = !!primary,
+                    _a[orientationStyles.success(this.theme)] = !!success,
+                    _a[orientationStyles.warning(this.theme)] = !!warning,
+                    _a[orientationStyles.error(this.theme)] = !!error,
+                    _a[this.styles.active()] = !!isActive,
+                    _a[orientationStyles.active(this.theme)] = !!isActive,
+                    _a[this.styles.disabled(this.theme)] = !!disabled,
+                    _a[orientationStyles.disabled()] = !!disabled,
                     _a)), onBlur: this.handleBlur, onClick: this.switchTab, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, tabIndex: disabled ? -1 : 0, ref: isFunctionalComponent(Component) ? null : this.refTabComponent, href: href, "aria-describedby": ariaDescribedby, "aria-label": ariaLabel },
                 React.createElement(ResizeDetector, { onResize: this.context.notifyUpdate }, children),
-                this.state.focusedByKeyboard && (React.createElement("div", { className: cx(globalClasses.focus, (_b = {},
-                        _b[styles.focusSmall] = this.context.size === 'small',
-                        _b[styles.focusMedium] = this.context.size === 'medium',
-                        _b[styles.focusLarge] = this.context.size === 'large',
+                this.state.focusedByKeyboard && (React.createElement("div", { className: this.cx(globalClasses.focus, (_b = {},
+                        _b[this.styles.focusSmall(this.theme)] = this.context.size === 'small',
+                        _b[this.styles.focusMedium(this.theme)] = this.context.size === 'medium',
+                        _b[this.styles.focusLarge(this.theme)] = this.context.size === 'large',
                         _b)) })))));
     };
     var Tab_1;

package/components/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import invariant from 'invariant';\nimport type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\nimport { ResizeDetector } from '../../internal/ResizeDetector/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { cx } from '../../lib/cx.js';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { isFunctionalComponent } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { horizontalStyles, styles, verticalStyles, globalClasses } from './Tab.css.js';\nimport { TabsContext, TabsContextDefaultValue } from './TabsContext.js';\nimport type { TabsContextType } from './TabsContext.js';\n\nexport interface TabIndicators {\n  error: boolean;\n  warning: boolean;\n  success: boolean;\n  primary: boolean;\n  disabled: boolean;\n}\n\nexport const TabDataTids = {\n  root: 'Tab__root',\n} as const;\n\nexport interface TabProps<T extends string = string>\n  extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {\n  /** Компонент или тег для рендера корневого элемента. */\n  component?: React.ComponentType<any> | string;\n\n  /** HTML-атрибут `href`. */\n  href?: string;\n\n  /** Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет выбранный таб. */\n  id?: T;\n\n  /**`HTML`-событие `onclick`. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /** `HTML`-событие `onkeydown`. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  /** Делает таб недоступным. */\n  disabled?: boolean;\n\n  /** Переводит таб в состояние ошибки. */\n  error?: boolean;\n\n  /** Переводит таб в состояние предупреждения. */\n  warning?: boolean;\n\n  /** Переводит таб в состояние успеха. */\n  success?: boolean;\n\n  /** Визульное состояние главного элемента. */\n  primary?: boolean;\n}\n\nexport interface TabState {\n  focusedByKeyboard: boolean;\n}\n\ntype DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;\n\n/**\n * Табы группируют контент и помогают в навигации.\n *\n */\n@withRenderEnvironment\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n  public static __KONTUR_REACT_UI__ = 'Tab';\n  public static displayName = 'Tab';\n\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public static defaultProps: DefaultProps = {\n    component: 'a',\n    href: '',\n  };\n\n  private getProps = createPropsGetter(Tab.defaultProps);\n\n  public state: TabState = {\n    focusedByKeyboard: false,\n  };\n\n  private globalObject!: GlobalObject;\n  private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private keyListener!: KeyListener;\n\n  constructor(props: TabProps<T>) {\n    super(props);\n    invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n  }\n\n  public componentDidMount() {\n    this.keyListener = new KeyListener(this.globalObject);\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.addTab(id, this.getTabInstance);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.context.activeTab === this.props.id) {\n      this.context.notifyUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.removeTab(id);\n    }\n  }\n\n  public getIndicators(): TabIndicators {\n    return {\n      error: Boolean(this.props.error),\n      warning: Boolean(this.props.warning),\n      success: Boolean(this.props.success),\n      primary: Boolean(this.props.primary),\n      disabled: Boolean(this.props.disabled),\n    };\n  }\n\n  public getUnderlyingNode(): Nullable<React.ReactElement<Tab<T>>> {\n    return this.tabComponent;\n  }\n\n  public render(): React.JSX.Element {\n    const {\n      children,\n      disabled,\n      error,\n      warning,\n      success,\n      primary,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n    } = this.props;\n    const { component: Component, href } = this.getProps();\n\n    let isActive = false;\n    let isVertical = false;\n\n    const id = this.getId();\n    if (typeof id === 'string') {\n      isActive = this.context.activeTab === this.getId();\n      isVertical = this.context.vertical;\n    }\n    const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n    return (\n      <CommonWrapper\n        rootNodeRef={this.setRootNode}\n        {...getVisualStateDataAttributes({ active: isActive, disabled })}\n        {...this.props}\n      >\n        <Component\n          data-tid={TabDataTids.root}\n          className={cx({\n            [styles.rootSmall]: this.context.size === 'small',\n            [styles.rootMedium]: this.context.size === 'medium',\n            [styles.rootLarge]: this.context.size === 'large',\n            [styles.verticalSmall]: !!isVertical && this.context.size === 'small',\n            [styles.verticalMedium]: !!isVertical && this.context.size === 'medium',\n            [styles.verticalLarge]: !!isVertical && this.context.size === 'large',\n            [orientationStyles.primary]: !!primary,\n            [orientationStyles.success]: !!success,\n            [orientationStyles.warning]: !!warning,\n            [orientationStyles.error]: !!error,\n            [styles.active]: !!isActive,\n            [orientationStyles.active]: !!isActive,\n            [styles.disabled]: !!disabled,\n            [orientationStyles.disabled]: !!disabled,\n          })}\n          onBlur={this.handleBlur}\n          onClick={this.switchTab}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={disabled ? -1 : 0}\n          ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n          href={href}\n          aria-describedby={ariaDescribedby}\n          aria-label={ariaLabel}\n        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && (\n            <div\n              className={cx(globalClasses.focus, {\n                [styles.focusSmall]: this.context.size === 'small',\n                [styles.focusMedium]: this.context.size === 'medium',\n                [styles.focusLarge]: this.context.size === 'large',\n              })}\n            />\n          )}\n        </Component>\n      </CommonWrapper>\n    );\n  }\n\n  private getId = () => this.props.id || this.getProps().href;\n\n  private refTabComponent = (instance: React.ReactElement<any>) => {\n    this.tabComponent = instance;\n  };\n\n  private getTabInstance = () => this;\n\n  private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const { href, component } = this.getProps();\n\n    const id = this.props.id || href;\n    if (this.props.onClick) {\n      this.props.onClick(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n    }\n    if (typeof id === 'string') {\n      this.context.switchTab(id);\n    }\n    if (component === 'a' && !href) {\n      event.preventDefault();\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n      if (e.defaultPrevented) {\n        return;\n      }\n    }\n    const id = this.getId();\n    if (typeof id !== 'string') {\n      return;\n    }\n    if (!isKeyArrow(e)) {\n      return;\n    }\n    e.preventDefault();\n    const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n    this.context.shiftFocus(id, delta);\n  };\n\n  private handleFocus = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    // focus event fires before keyDown eventlistener\n    // so we should check focusKeyPressed in async way\n    this.globalObject.requestAnimationFrame?.(() => {\n      if (this.keyListener.isTabPressed || this.keyListener.isArrowPressed) {\n        this.setState({ focusedByKeyboard: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    this.setState({ focusedByKeyboard: false });\n  };\n}\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,SAAS,MAAM,WAAW,CAAC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,oEAAoE,CAAC;AAClH,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAWxE,MAAM,CAAC,IAAM,WAAW,GAAG;IACzB,IAAI,EAAE,WAAW;CACT,CAAC;AAqDX;;;GAGG;AAGH;IAAoD,uBAAsC;IA8BxF,aAAY,KAAkB;QAC5B,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QA1BR,aAAO,GAAoB,KAAI,CAAC,OAAO,CAAC;QAOvC,cAAQ,GAAG,iBAAiB,CAAC,KAAG,CAAC,YAAY,CAAC,CAAC;QAEhD,WAAK,GAAa;YACvB,iBAAiB,EAAE,KAAK;SACzB,CAAC;QASM,kBAAY,GAAyC,IAAI,CAAC;QAoI1D,WAAK,GAAG,cAAM,OAAA,KAAI,CAAC,KAAK,CAAC,EAAE,IAAI,KAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,EAArC,CAAqC,CAAC;QAEpD,qBAAe,GAAG,UAAC,QAAiC;YAC1D,KAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;QAC/B,CAAC,CAAC;QAEM,oBAAc,GAAG,cAAM,OAAA,KAAI,EAAJ,CAAI,CAAC;QAE5B,eAAS,GAAG,UAAC,KAAoC;YACvD,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACK,IAAA,KAAsB,KAAI,CAAC,QAAQ,EAAE,EAAnC,IAAI,UAAA,EAAE,SAAS,eAAoB,CAAC;YAE5C,IAAM,EAAE,GAAG,KAAI,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC;YACjC,IAAI,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACvB,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBAC1B,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;oBAC3B,OAAO;gBACT,CAAC;YACH,CAAC;YACD,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;gBAC3B,KAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;YAC7B,CAAC;YACD,IAAI,SAAS,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;QAEM,mBAAa,GAAG,UAAC,CAAmC;YAC1D,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,IAAI,KAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;gBACzB,KAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBACxB,IAAI,CAAC,CAAC,gBAAgB,EAAE,CAAC;oBACvB,OAAO;gBACT,CAAC;YACH,CAAC;YACD,IAAM,EAAE,GAAG,KAAI,CAAC,KAAK,EAAE,CAAC;YACxB,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;gBAC3B,OAAO;YACT,CAAC;YACD,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;YACD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAM,KAAK,GAAG,cAAc,CAAC,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC5D,KAAI,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;QACrC,CAAC,CAAC;QAEM,iBAAW,GAAG;;YACpB,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,iDAAiD;YACjD,kDAAkD;YAClD,MAAA,MAAA,KAAI,CAAC,YAAY,EAAC,qBAAqB,mDAAG;gBACxC,IAAI,KAAI,CAAC,WAAW,CAAC,YAAY,IAAI,KAAI,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC;oBACrE,KAAI,CAAC,QAAQ,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC7C,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,gBAAU,GAAG;YACnB,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,KAAI,CAAC,QAAQ,CAAC,EAAE,iBAAiB,EAAE,KAAK,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC;QAtMA,SAAS,CAAC,KAAI,CAAC,OAAO,KAAK,uBAAuB,EAAE,4CAA4C,CAAC,CAAC;;IACpG,CAAC;YAjCU,GAAG;IAmCP,+BAAiB,GAAxB;QACE,IAAI,CAAC,WAAW,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACtD,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QACxB,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;YAC3B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAEM,gCAAkB,GAAzB;QACE,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;YAC7C,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAEM,kCAAoB,GAA3B;QACE,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QACxB,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;YAC3B,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;IAEM,oBAAM,GAAb;QAAA,iBAaC;QAZC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACtC,IAAI,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1D,IAAI,CAAC,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtD,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,KAAI,CAAC,UAAU,EAAE,CAAC;QAC3B,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEM,2BAAa,GAApB;QACE,OAAO;YACL,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;YAChC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;YACpC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;YACpC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;YACpC,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;SACvC,CAAC;IACJ,CAAC;IAEM,+BAAiB,GAAxB;QACE,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAEO,wBAAU,GAAlB;;QACQ,IAAA,KASF,IAAI,CAAC,KAAK,EARZ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,OAAO,aAAA,EACP,OAAO,aAAA,EACP,OAAO,aAAA,EACa,eAAe,yBAAA,EACrB,SAAS,mBACX,CAAC;QACT,IAAA,KAAiC,IAAI,CAAC,QAAQ,EAAE,EAAnC,SAAS,eAAA,EAAE,IAAI,UAAoB,CAAC;QAEvD,IAAI,QAAQ,GAAG,KAAK,CAAC;QACrB,IAAI,UAAU,GAAG,KAAK,CAAC;QAEvB,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QACxB,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;YAC3B,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;YACnD,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;QACrC,CAAC;QACD,IAAM,iBAAiB,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;QAEnF,OAAO,CACL,oBAAC,aAAa,aACZ,WAAW,EAAE,IAAI,CAAC,WAAW,IACzB,4BAA4B,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,UAAA,EAAE,CAAC,EAC5D,IAAI,CAAC,KAAK;YAEd,oBAAC,SAAS,gBACE,WAAW,CAAC,IAAI,EAC1B,SAAS,EAAE,IAAI,CAAC,EAAE;oBAChB,GAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;oBAClE,GAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,QAAQ;oBACpE,GAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;oBAClE,GAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,CAAC,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;oBACtF,GAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,CAAC,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,QAAQ;oBACxF,GAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,CAAC,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;oBACtF,GAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,CAAC,CAAC,OAAO;oBAClD,GAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,CAAC,CAAC,OAAO;oBAClD,GAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,CAAC,CAAC,OAAO;oBAClD,GAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,CAAC,CAAC,KAAK;oBAC9C,GAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,IAAG,CAAC,CAAC,QAAQ;oBAClC,GAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,CAAC,CAAC,QAAQ;oBAClD,GAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,CAAC,CAAC,QAAQ;oBAC9C,GAAC,iBAAiB,CAAC,QAAQ,EAAE,IAAG,CAAC,CAAC,QAAQ;wBAC1C,EACF,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,GAAG,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EACnE,IAAI,EAAE,IAAI,sBACQ,eAAe,gBACrB,SAAS;gBAErB,oBAAC,cAAc,IAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY,IAAG,QAAQ,CAAkB;gBAC/E,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,CAC/B,6BACE,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK;wBACpC,GAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;wBACnE,GAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,QAAQ;wBACrE,GAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;4BACnE,GACF,CACH,CACS,CACE,CACjB,CAAC;IACJ,CAAC;;IA1Ja,uBAAmB,GAAG,KAAK,AAAR,CAAS;IAC5B,eAAW,GAAG,KAAK,AAAR,CAAS;IAEpB,eAAW,GAAG,WAAW,AAAd,CAAe;IAG1B,gBAAY,GAAiB;QACzC,SAAS,EAAE,GAAG;QACd,IAAI,EAAE,EAAE;KACT,AAHyB,CAGxB;IAVS,GAAG;QAFf,qBAAqB;QACrB,QAAQ;OACI,GAAG,CAuOf;IAAD,UAAC;CAAA,AAvOD,CAAoD,KAAK,CAAC,SAAS,GAuOlE;SAvOY,GAAG","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport invariant from 'invariant';\nimport type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\nimport { ResizeDetector } from '../../internal/ResizeDetector/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isFunctionalComponent } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getHorizontalStyles, getStyles, getVerticalStyles, globalClasses } from './Tab.styles.js';\nimport { TabsContext, TabsContextDefaultValue } from './TabsContext.js';\nimport type { TabsContextType } from './TabsContext.js';\n\nexport interface TabIndicators {\n  error: boolean;\n  warning: boolean;\n  success: boolean;\n  primary: boolean;\n  disabled: boolean;\n}\n\nexport const TabDataTids = {\n  root: 'Tab__root',\n} as const;\n\nexport interface TabProps<T extends string = string>\n  extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {\n  /** Компонент или тег для рендера корневого элемента. */\n  component?: React.ComponentType<any> | string;\n\n  /** HTML-атрибут `href`. */\n  href?: string;\n\n  /** Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет выбранный таб. */\n  id?: T;\n\n  /**`HTML`-событие `onclick`. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /** `HTML`-событие `onkeydown`. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  /** Делает таб недоступным. */\n  disabled?: boolean;\n\n  /**\n   * Переводит таб в состояние ошибки.\n   * @deprecated Состояние не соответствует Контур.Гайдам, проп будет удален в 7.0.\n   */\n  error?: boolean;\n\n  /**\n   * Переводит таб в состояние предупреждения.\n   * @deprecated Состояние не соответствует Контур.Гайдам, проп будет удален в 7.0.\n   */\n  warning?: boolean;\n\n  /**\n   * Переводит таб в состояние успеха.\n   * @deprecated Состояние не соответствует Контур.Гайдам, проп будет удален в 7.0.\n   */\n  success?: boolean;\n\n  /**\n   * Визульное состояние главного элемента.\n   * @deprecated Состояние не соответствует Контур.Гайдам, проп будет удален в 7.0.\n   */\n  primary?: boolean;\n}\n\nexport interface TabState {\n  focusedByKeyboard: boolean;\n}\n\ntype DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;\n\n/**\n * Табы группируют контент и помогают в навигации.\n *\n */\n@withRenderEnvironment\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n  public static __KONTUR_REACT_UI__ = 'Tab';\n  public static displayName = 'Tab';\n\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public static defaultProps: DefaultProps = {\n    component: 'a',\n    href: '',\n  };\n\n  private getProps = createPropsGetter(Tab.defaultProps);\n\n  public state: TabState = {\n    focusedByKeyboard: false,\n  };\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private horizontalStyles!: ReturnType<typeof getHorizontalStyles>;\n  private verticalStyles!: ReturnType<typeof getVerticalStyles>;\n  private theme!: Theme;\n  private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private keyListener!: KeyListener;\n\n  constructor(props: TabProps<T>) {\n    super(props);\n    invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n  }\n\n  public componentDidMount() {\n    this.keyListener = new KeyListener(this.globalObject);\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.addTab(id, this.getTabInstance);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.context.activeTab === this.props.id) {\n      this.context.notifyUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.removeTab(id);\n    }\n  }\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n    this.horizontalStyles = getHorizontalStyles(this.emotion);\n    this.verticalStyles = getVerticalStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getIndicators(): TabIndicators {\n    return {\n      error: Boolean(this.props.error),\n      warning: Boolean(this.props.warning),\n      success: Boolean(this.props.success),\n      primary: Boolean(this.props.primary),\n      disabled: Boolean(this.props.disabled),\n    };\n  }\n\n  public getUnderlyingNode(): Nullable<React.ReactElement<Tab<T>>> {\n    return this.tabComponent;\n  }\n\n  private renderMain() {\n    const {\n      children,\n      disabled,\n      error,\n      warning,\n      success,\n      primary,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n    } = this.props;\n    const { component: Component, href } = this.getProps();\n\n    let isActive = false;\n    let isVertical = false;\n\n    const id = this.getId();\n    if (typeof id === 'string') {\n      isActive = this.context.activeTab === this.getId();\n      isVertical = this.context.vertical;\n    }\n    const orientationStyles = isVertical ? this.verticalStyles : this.horizontalStyles;\n\n    return (\n      <CommonWrapper\n        rootNodeRef={this.setRootNode}\n        {...getVisualStateDataAttributes({ active: isActive, disabled })}\n        {...this.props}\n      >\n        <Component\n          data-tid={TabDataTids.root}\n          className={this.cx({\n            [this.styles.rootSmall(this.theme)]: this.context.size === 'small',\n            [this.styles.rootMedium(this.theme)]: this.context.size === 'medium',\n            [this.styles.rootLarge(this.theme)]: this.context.size === 'large',\n            [this.styles.verticalSmall(this.theme)]: !!isVertical && this.context.size === 'small',\n            [this.styles.verticalMedium(this.theme)]: !!isVertical && this.context.size === 'medium',\n            [this.styles.verticalLarge(this.theme)]: !!isVertical && this.context.size === 'large',\n            [orientationStyles.primary(this.theme)]: !!primary,\n            [orientationStyles.success(this.theme)]: !!success,\n            [orientationStyles.warning(this.theme)]: !!warning,\n            [orientationStyles.error(this.theme)]: !!error,\n            [this.styles.active()]: !!isActive,\n            [orientationStyles.active(this.theme)]: !!isActive,\n            [this.styles.disabled(this.theme)]: !!disabled,\n            [orientationStyles.disabled()]: !!disabled,\n          })}\n          onBlur={this.handleBlur}\n          onClick={this.switchTab}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={disabled ? -1 : 0}\n          ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n          href={href}\n          aria-describedby={ariaDescribedby}\n          aria-label={ariaLabel}\n        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && (\n            <div\n              className={this.cx(globalClasses.focus, {\n                [this.styles.focusSmall(this.theme)]: this.context.size === 'small',\n                [this.styles.focusMedium(this.theme)]: this.context.size === 'medium',\n                [this.styles.focusLarge(this.theme)]: this.context.size === 'large',\n              })}\n            />\n          )}\n        </Component>\n      </CommonWrapper>\n    );\n  }\n\n  private getId = () => this.props.id || this.getProps().href;\n\n  private refTabComponent = (instance: React.ReactElement<any>) => {\n    this.tabComponent = instance;\n  };\n\n  private getTabInstance = () => this;\n\n  private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const { href, component } = this.getProps();\n\n    const id = this.props.id || href;\n    if (this.props.onClick) {\n      this.props.onClick(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n    }\n    if (typeof id === 'string') {\n      this.context.switchTab(id);\n    }\n    if (component === 'a' && !href) {\n      event.preventDefault();\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n      if (e.defaultPrevented) {\n        return;\n      }\n    }\n    const id = this.getId();\n    if (typeof id !== 'string') {\n      return;\n    }\n    if (!isKeyArrow(e)) {\n      return;\n    }\n    e.preventDefault();\n    const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n    this.context.shiftFocus(id, delta);\n  };\n\n  private handleFocus = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    // focus event fires before keyDown eventlistener\n    // so we should check focusKeyPressed in async way\n    this.globalObject.requestAnimationFrame?.(() => {\n      if (this.keyListener.isTabPressed || this.keyListener.isArrowPressed) {\n        this.setState({ focusedByKeyboard: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    this.setState({ focusedByKeyboard: false });\n  };\n}\n"]}

package/components/Tabs/Tab.styles.d.ts

@@ -0,0 +1,33 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const globalClasses: {
+    focus: string;
+};
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    verticalSmall(t: Theme): string;
+    verticalMedium(t: Theme): string;
+    verticalLarge(t: Theme): string;
+    focusSmall(t: Theme): string;
+    focusMedium(t: Theme): string;
+    focusLarge(t: Theme): string;
+    disabled(t: Theme): string;
+    active(): string;
+}>;
+export declare const getHorizontalStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    active(t: Theme): string;
+    disabled(): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
+}>;
+export declare const getVerticalStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    active(t: Theme): string;
+    disabled(): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
+}>;

package/components/Tabs/Tab.styles.js

@@ -0,0 +1,105 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { shift } from '../../lib/styles/DimensionFunctions.js';
+import { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';
+import { fontSize, lineHeight, paddingX, paddingY } from './helpers.js';
+export var globalClasses = prefix('tab')({
+    focus: 'focus',
+});
+export var getStyles = memoizeGetStyles(function (emotion) { return ({
+    rootSmall: function (t) {
+        return emotion.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), tabRoot(t, 'small', emotion));
+    },
+    rootMedium: function (t) {
+        return emotion.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), tabRoot(t, 'medium', emotion));
+    },
+    rootLarge: function (t) {
+        return emotion.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), tabRoot(t, 'large', emotion));
+    },
+    verticalSmall: function (t) {
+        return emotion.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), tabVertical(t, 'small', emotion));
+    },
+    verticalMedium: function (t) {
+        return emotion.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), tabVertical(t, 'medium', emotion));
+    },
+    verticalLarge: function (t) {
+        return emotion.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), tabVertical(t, 'large', emotion));
+    },
+    focusSmall: function (t) {
+        return emotion.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), tabFocus(t, 'small', emotion));
+    },
+    focusMedium: function (t) {
+        return emotion.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), tabFocus(t, 'medium', emotion));
+    },
+    focusLarge: function (t) {
+        return emotion.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), tabFocus(t, 'large', emotion));
+    },
+    disabled: function (t) {
+        return emotion.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      color: color-mix(in srgb, ", ", transparent 50%);\n      cursor: default;\n    "], ["\n      color: color-mix(in srgb, ", ", transparent 50%);\n      cursor: default;\n    "])), t.tabTextColorDefault);
+    },
+    active: function () {
+        return emotion.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        cursor: default;\n      "], ["\n        cursor: default;\n      "])));
+    },
+}); });
+export var getHorizontalStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        active: function (t) {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      &:hover,\n      &:active {\n        border-bottom: ", " solid transparent;\n      }\n    "], ["\n      &:hover,\n      &:active {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+        },
+        disabled: function () {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "], ["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
+        },
+        primary: function (t) {
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "], ["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+        },
+        success: function (t) {
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "], ["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+        },
+        warning: function (t) {
+            return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "], ["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+        },
+        error: function (t) {
+            return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "], ["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverError);
+        },
+    });
+});
+export var getVerticalStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        active: function (t) {
+            return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      &:hover,\n      &:active {\n        border-left: ", " solid transparent;\n      }\n    "], ["\n      &:hover,\n      &:active {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+        },
+        disabled: function () {
+            return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "], ["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
+        },
+        primary: function (t) {
+            return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "], ["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+        },
+        success: function (t) {
+            return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "], ["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+        },
+        warning: function (t) {
+            return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "], ["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+        },
+        error: function (t) {
+            return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "], ["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverError);
+        },
+    });
+});
+function tabRoot(t, size, _a) {
+    var css = _a.css;
+    return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n    border-bottom: ", " solid transparent;\n    box-sizing: border-box;\n    color: ", ";\n    cursor: pointer;\n    display: inline-block;\n    font-size: ", ";\n    line-height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    padding-bottom: calc(", " - ", ");\n    padding-top: ", ";\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ", " ", ";\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ", " solid ", ";\n    }\n\n    &:active {\n      border-bottom-color: ", ";\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  "], ["\n    border-bottom: ", " solid transparent;\n    box-sizing: border-box;\n    color: ", ";\n    cursor: pointer;\n    display: inline-block;\n    font-size: ", ";\n    line-height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    padding-bottom: calc(", " - ", ");\n    padding-top: ", ";\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ", " ", ";\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ", " solid ", ";\n    }\n\n    &:active {\n      border-bottom-color: ", ";\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  "])), t.tabBorderWidth, t.tabTextColorDefault, fontSize(t, size), lineHeight(t, size), paddingX(t, size), paddingX(t, size), paddingY(t, size), t.tabBorderWidth, paddingY(t, size), t.transitionDuration, t.transitionTimingFunction, t.tabBorderWidth, t.tabColorHover, t.tabColorPressed);
+}
+function tabVertical(t, size, _a) {
+    var css = _a.css;
+    return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n    border-bottom: none;\n    border-left: ", " solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ", ";\n    padding-right: ", ";\n\n    &:hover {\n      border-bottom: none;\n      border-left: ", " solid ", ";\n    }\n\n    &:active {\n      border-left-color: ", ";\n    }\n\n    .", " {\n      bottom: 0;\n      left: -", ";\n      right: 0;\n    }\n  "], ["\n    border-bottom: none;\n    border-left: ", " solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ", ";\n    padding-right: ", ";\n\n    &:hover {\n      border-bottom: none;\n      border-left: ", " solid ", ";\n    }\n\n    &:active {\n      border-left-color: ", ";\n    }\n\n    .", " {\n      bottom: 0;\n      left: -", ";\n      right: 0;\n    }\n  "])), t.tabBorderWidth, shift(paddingX(t, size), "-".concat(t.tabBorderWidth)), paddingX(t, size), t.tabBorderWidth, t.tabColorHover, t.tabColorPressed, globalClasses.focus, t.tabBorderWidth);
+}
+function tabFocus(t, size, _a) {
+    var css = _a.css;
+    return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n    border: ", " solid ", ";\n    bottom: -", ";\n    left: -", ";\n    position: absolute;\n    right: -", ";\n    top: 0;\n  "], ["\n    border: ", " solid ", ";\n    bottom: -", ";\n    left: -", ";\n    position: absolute;\n    right: -", ";\n    top: 0;\n  "])), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, paddingX(t, size), paddingX(t, size));
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;
+//# sourceMappingURL=Tab.styles.js.map

package/components/Tabs/Tab.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.styles.js","sourceRoot":"","sources":["Tab.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { shift } from '../../lib/styles/DimensionFunctions.js';\nimport { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { fontSize, lineHeight, paddingX, paddingY } from './helpers.js';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const getStyles = memoizeGetStyles((emotion: Emotion) => ({\n  rootSmall(t: Theme) {\n    return emotion.css`\n        ${tabRoot(t, 'small', emotion)}\n      `;\n  },\n\n  rootMedium(t: Theme) {\n    return emotion.css`\n        ${tabRoot(t, 'medium', emotion)}\n      `;\n  },\n\n  rootLarge(t: Theme) {\n    return emotion.css`\n        ${tabRoot(t, 'large', emotion)}\n      `;\n  },\n\n  verticalSmall(t: Theme) {\n    return emotion.css`\n        ${tabVertical(t, 'small', emotion)}\n      `;\n  },\n\n  verticalMedium(t: Theme) {\n    return emotion.css`\n        ${tabVertical(t, 'medium', emotion)}\n      `;\n  },\n\n  verticalLarge(t: Theme) {\n    return emotion.css`\n        ${tabVertical(t, 'large', emotion)}\n      `;\n  },\n\n  focusSmall(t: Theme) {\n    return emotion.css`\n        ${tabFocus(t, 'small', emotion)}\n      `;\n  },\n\n  focusMedium(t: Theme) {\n    return emotion.css`\n        ${tabFocus(t, 'medium', emotion)}\n      `;\n  },\n\n  focusLarge(t: Theme) {\n    return emotion.css`\n        ${tabFocus(t, 'large', emotion)}\n      `;\n  },\n\n  disabled(t: Theme) {\n    return emotion.css`\n      color: color-mix(in srgb, ${t.tabTextColorDefault}, transparent 50%);\n      cursor: default;\n    `;\n  },\n\n  active() {\n    return emotion.css`\n        cursor: default;\n      `;\n  },\n}));\n\nexport const getHorizontalStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  active(t: Theme) {\n    return css`\n      &:hover,\n      &:active {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n}));\n\nexport const getVerticalStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  active(t: Theme) {\n    return css`\n      &:hover,\n      &:active {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n}));\n\nfunction tabRoot(t: Theme, size: SizeProp, { css }: Emotion) {\n  return css`\n    border-bottom: ${t.tabBorderWidth} solid transparent;\n    box-sizing: border-box;\n    color: ${t.tabTextColorDefault};\n    cursor: pointer;\n    display: inline-block;\n    font-size: ${fontSize(t, size)};\n    line-height: ${lineHeight(t, size)};\n    margin-left: ${paddingX(t, size)};\n    margin-right: ${paddingX(t, size)};\n    padding-bottom: calc(${paddingY(t, size)} - ${t.tabBorderWidth});\n    padding-top: ${paddingY(t, size)};\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction};\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    &:active {\n      border-bottom-color: ${t.tabColorPressed};\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  `;\n}\n\nfunction tabVertical(t: Theme, size: SizeProp, { css }: Emotion) {\n  return css`\n    border-bottom: none;\n    border-left: ${t.tabBorderWidth} solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ${shift(paddingX(t, size), `-${t.tabBorderWidth}`)};\n    padding-right: ${paddingX(t, size)};\n\n    &:hover {\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    &:active {\n      border-left-color: ${t.tabColorPressed};\n    }\n\n    .${globalClasses.focus} {\n      bottom: 0;\n      left: -${t.tabBorderWidth};\n      right: 0;\n    }\n  `;\n}\n\nfunction tabFocus(t: Theme, size: SizeProp, { css }: Emotion) {\n  return css`\n    border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n    bottom: -${t.tabBorderWidth};\n    left: -${paddingX(t, size)};\n    position: absolute;\n    right: -${paddingX(t, size)};\n    top: 0;\n  `;\n}\n"]}

package/components/Tabs/Tabs.d.ts

@@ -37,6 +37,10 @@ export declare class Tabs<T extends string = string> extends React.Component<Tab
     private getProps;
     static Tab: typeof Tab;
     private globalObject;
+    private emotion;
+    private cx;
+    private styles;
+    private theme;
     private tabs;
     private tabUpdates;
     private listeners;

package/components/Tabs/Tabs.js

@@ -33,14 +33,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import React from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
-import { cx } from '../../lib/cx.js';
 import { isInstanceOf } from '../../lib/isInstanceOf.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { getRootNode } from '../../lib/rootNode/getRootNode.js';
 import { rootNode } from '../../lib/rootNode/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { Indicator } from './Indicator.js';
 import { Tab } from './Tab.js';
-import { styles } from './Tabs.css.js';
+import { getStyles } from './Tabs.styles.js';
 import { TabsContext } from './TabsContext.js';
 export var TabsDataTids = {
     root: 'Tabs__root',
@@ -98,29 +98,34 @@ var Tabs = /** @class */ (function (_super) {
     }
     Tabs_1 = Tabs;
     Tabs.prototype.render = function () {
-        var _a;
-        var _b = this.props, value = _b.value, width = _b.width, children = _b.children, indicatorClassName = _b.indicatorClassName, ariaDescribedby = _b["aria-describedby"];
-        var _c = this.getProps(), vertical = _c.vertical, size = _c.size;
-        return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
-            React.createElement("div", { "data-tid": TabsDataTids.root, className: cx((_a = {},
-                    _a[styles.rootSmall] = size === 'small',
-                    _a[styles.rootMedium] = size === 'medium',
-                    _a[styles.rootLarge] = size === 'large',
-                    _a[styles.vertical] = vertical,
-                    _a)), style: { width: width }, "aria-describedby": ariaDescribedby },
-                React.createElement(TabsContext.Provider, { value: {
-                        vertical: vertical,
-                        activeTab: value,
-                        size: size,
-                        getTab: this.getTab,
-                        addTab: this.addTab,
-                        removeTab: this.removeTab,
-                        notifyUpdate: this.notifyUpdate,
-                        shiftFocus: this.shiftFocus,
-                        switchTab: this.switchTab,
-                    } },
-                    children,
-                    React.createElement(Indicator, { className: indicatorClassName, tabUpdates: this.tabUpdates, vertical: this.getProps().vertical })))));
+        var _this = this;
+        var _a = this.props, value = _a.value, width = _a.width, children = _a.children, indicatorClassName = _a.indicatorClassName, ariaDescribedby = _a["aria-describedby"];
+        var _b = this.getProps(), vertical = _b.vertical, size = _b.size;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            var _a;
+            _this.theme = theme;
+            return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.props),
+                React.createElement("div", { "data-tid": TabsDataTids.root, className: _this.cx((_a = {},
+                        _a[_this.styles.rootSmall(_this.theme)] = size === 'small',
+                        _a[_this.styles.rootMedium(_this.theme)] = size === 'medium',
+                        _a[_this.styles.rootLarge(_this.theme)] = size === 'large',
+                        _a[_this.styles.vertical()] = vertical,
+                        _a)), style: { width: width }, "aria-describedby": ariaDescribedby },
+                    React.createElement(TabsContext.Provider, { value: {
+                            vertical: vertical,
+                            activeTab: value,
+                            size: size,
+                            getTab: _this.getTab,
+                            addTab: _this.addTab,
+                            removeTab: _this.removeTab,
+                            notifyUpdate: _this.notifyUpdate,
+                            shiftFocus: _this.shiftFocus,
+                            switchTab: _this.switchTab,
+                        } },
+                        children,
+                        React.createElement(Indicator, { className: indicatorClassName, tabUpdates: _this.tabUpdates, vertical: _this.getProps().vertical })))));
+        }));
     };
     var Tabs_1;
     Tabs.__KONTUR_REACT_UI__ = 'Tabs';

package/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { cx } from '../../lib/cx.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport { getRootNode } from '../../lib/rootNode/getRootNode.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { emptyHandler } from '../../lib/utils.js';\nimport { Indicator } from './Indicator.js';\nimport { Tab } from './Tab.js';\nimport { styles } from './Tabs.css.js';\nimport { TabsContext } from './TabsContext.js';\nimport type { TabsContextType } from './TabsContext.js';\n\ntype ValueBaseType = string;\ninterface TabType<T extends ValueBaseType> {\n  getNode: () => Tab<T> | null;\n  id: T;\n}\n\nexport interface TabsProps<T extends ValueBaseType = string> extends CommonProps {\n  /** Кастомный класс для индикатора (подчёркивания) активного таба. */\n  indicatorClassName?: string;\n\n  /** Размер табов. */\n  size?: SizeProp;\n\n  /** Идентификатор активного таба. Совпадает с `id` выбранного `<Tab />`. */\n  value: T;\n\n  /** Событие смены активного таба. */\n  onValueChange?: (value: T) => void;\n\n  /** Располагает табы вертикально.\n   * @default false */\n  vertical?: boolean;\n\n  /** Ширина компонента. */\n  width?: number | string;\n\n  /** @ignore */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const TabsDataTids = {\n  root: 'Tabs__root',\n  indicatorRoot: 'Indicator__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;\n\n/**\n * Табы группируют контент и помогают в навигации.\n */\n@withRenderEnvironment\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'Tabs';\n  public static displayName = 'Tabs';\n\n  public static defaultProps: DefaultProps = {\n    vertical: false,\n    size: 'large',\n  };\n\n  private getProps = createPropsGetter(Tabs.defaultProps);\n\n  public static Tab = Tab;\n\n  private globalObject!: GlobalObject;\n\n  private tabs: Array<TabType<T>> = [];\n\n  private tabUpdates = {\n    on: (cb: () => void) => {\n      const index = this.listeners.push(cb);\n      return () => {\n        this.listeners.splice(index, 1);\n      };\n    },\n  };\n\n  private listeners: Array<typeof emptyHandler> = [];\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    const { value, width, children, indicatorClassName, 'aria-describedby': ariaDescribedby } = this.props;\n    const { vertical, size } = this.getProps();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={TabsDataTids.root}\n          className={cx({\n            [styles.rootSmall]: size === 'small',\n            [styles.rootMedium]: size === 'medium',\n            [styles.rootLarge]: size === 'large',\n            [styles.vertical]: vertical,\n          })}\n          style={{ width }}\n          aria-describedby={ariaDescribedby}\n        >\n          <TabsContext.Provider\n            value={{\n              vertical,\n              activeTab: value,\n              size,\n              getTab: this.getTab,\n              addTab: this.addTab,\n              removeTab: this.removeTab,\n              notifyUpdate: this.notifyUpdate,\n              shiftFocus: this.shiftFocus,\n              switchTab: this.switchTab,\n            }}\n          >\n            {children}\n            <Indicator\n              className={indicatorClassName}\n              tabUpdates={this.tabUpdates}\n              vertical={this.getProps().vertical}\n            />\n          </TabsContext.Provider>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n    const { tabs } = this;\n    const index = tabs.findIndex((x) => x.id === fromTab);\n    const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n    const tab = tabs[newIndex];\n\n    const tabNode = tab.getNode();\n    const htmlNode = getRootNode(tabNode);\n\n    if (isInstanceOf(htmlNode, this.globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {\n      htmlNode.focus();\n    }\n  };\n\n  private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n    this.listeners.forEach((cb) => cb());\n  };\n\n  private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n    const { onValueChange, value } = this.props;\n    if (id !== value && onValueChange) {\n      onValueChange(id);\n    }\n  };\n\n  private getTab: TabsContextType<T>['getTab'] = (id) => {\n    const { getNode = null } = this.tabs.find((x) => x.id === id) || {};\n    return getNode && getNode();\n  };\n\n  private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n    this.tabs = this.tabs.concat({ id, getNode });\n  };\n\n  private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n    this.tabs = this.tabs.filter((tab) => tab.id !== id);\n  };\n}\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport { getRootNode } from '../../lib/rootNode/getRootNode.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { emptyHandler } from '../../lib/utils.js';\nimport { Indicator } from './Indicator.js';\nimport { Tab } from './Tab.js';\nimport { getStyles } from './Tabs.styles.js';\nimport { TabsContext } from './TabsContext.js';\nimport type { TabsContextType } from './TabsContext.js';\n\ntype ValueBaseType = string;\ninterface TabType<T extends ValueBaseType> {\n  getNode: () => Tab<T> | null;\n  id: T;\n}\n\nexport interface TabsProps<T extends ValueBaseType = string> extends CommonProps {\n  /** Кастомный класс для индикатора (подчёркивания) активного таба. */\n  indicatorClassName?: string;\n\n  /** Размер табов. */\n  size?: SizeProp;\n\n  /** Идентификатор активного таба. Совпадает с `id` выбранного `<Tab />`. */\n  value: T;\n\n  /** Событие смены активного таба. */\n  onValueChange?: (value: T) => void;\n\n  /** Располагает табы вертикально.\n   * @default false */\n  vertical?: boolean;\n\n  /** Ширина компонента. */\n  width?: number | string;\n\n  /** @ignore */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const TabsDataTids = {\n  root: 'Tabs__root',\n  indicatorRoot: 'Indicator__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;\n\n/**\n * Табы группируют контент и помогают в навигации.\n */\n@withRenderEnvironment\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'Tabs';\n  public static displayName = 'Tabs';\n\n  public static defaultProps: DefaultProps = {\n    vertical: false,\n    size: 'large',\n  };\n\n  private getProps = createPropsGetter(Tabs.defaultProps);\n\n  public static Tab = Tab;\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n\n  private tabs: Array<TabType<T>> = [];\n\n  private tabUpdates = {\n    on: (cb: () => void) => {\n      const index = this.listeners.push(cb);\n      return () => {\n        this.listeners.splice(index, 1);\n      };\n    },\n  };\n\n  private listeners: Array<typeof emptyHandler> = [];\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    const { value, width, children, indicatorClassName, 'aria-describedby': ariaDescribedby } = this.props;\n    const { vertical, size } = this.getProps();\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <div\n                data-tid={TabsDataTids.root}\n                className={this.cx({\n                  [this.styles.rootSmall(this.theme)]: size === 'small',\n                  [this.styles.rootMedium(this.theme)]: size === 'medium',\n                  [this.styles.rootLarge(this.theme)]: size === 'large',\n                  [this.styles.vertical()]: vertical,\n                })}\n                style={{ width }}\n                aria-describedby={ariaDescribedby}\n              >\n                <TabsContext.Provider\n                  value={{\n                    vertical,\n                    activeTab: value,\n                    size,\n                    getTab: this.getTab,\n                    addTab: this.addTab,\n                    removeTab: this.removeTab,\n                    notifyUpdate: this.notifyUpdate,\n                    shiftFocus: this.shiftFocus,\n                    switchTab: this.switchTab,\n                  }}\n                >\n                  {children}\n                  <Indicator\n                    className={indicatorClassName}\n                    tabUpdates={this.tabUpdates}\n                    vertical={this.getProps().vertical}\n                  />\n                </TabsContext.Provider>\n              </div>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n    const { tabs } = this;\n    const index = tabs.findIndex((x) => x.id === fromTab);\n    const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n    const tab = tabs[newIndex];\n\n    const tabNode = tab.getNode();\n    const htmlNode = getRootNode(tabNode);\n\n    if (isInstanceOf(htmlNode, this.globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {\n      htmlNode.focus();\n    }\n  };\n\n  private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n    this.listeners.forEach((cb) => cb());\n  };\n\n  private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n    const { onValueChange, value } = this.props;\n    if (id !== value && onValueChange) {\n      onValueChange(id);\n    }\n  };\n\n  private getTab: TabsContextType<T>['getTab'] = (id) => {\n    const { getNode = null } = this.tabs.find((x) => x.id === id) || {};\n    return getNode && getNode();\n  };\n\n  private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n    this.tabs = this.tabs.concat({ id, getNode });\n  };\n\n  private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n    this.tabs = this.tabs.filter((tab) => tab.id !== id);\n  };\n}\n"]}

package/components/Tabs/Tabs.styles.d.ts

@@ -0,0 +1,7 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    vertical(): string;
+}>;

package/components/Tabs/Tabs.styles.js

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+import { paddingX } from './helpers.js';
+export var getStyles = memoizeGetStyles(function (emotion) { return ({
+    rootSmall: function (t) {
+        return emotion.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), tabsRoot(t, 'small', emotion));
+    },
+    rootMedium: function (t) {
+        return emotion.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), tabsRoot(t, 'medium', emotion));
+    },
+    rootLarge: function (t) {
+        return emotion.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), tabsRoot(t, 'large', emotion));
+    },
+    vertical: function () {
+        return emotion.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        margin: 0;\n      "], ["\n        margin: 0;\n      "])));
+    },
+}); });
+function tabsRoot(t, size, _a) {
+    var css = _a.css;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-block;\n    margin: 0 -", ";\n    padding: 0;\n    position: relative;\n  "], ["\n    display: inline-block;\n    margin: 0 -", ";\n    padding: 0;\n    position: relative;\n  "])), paddingX(t, size));
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=Tabs.styles.js.map

package/components/Tabs/Tabs.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styles.js","sourceRoot":"","sources":["Tabs.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,OAAgB,IAAK,OAAA,CAAC;IAC/D,SAAS,YAAC,CAAQ;QAChB,OAAO,OAAO,CAAC,GAAG,2FAAA,YACZ,EAA6B,UAChC,KADG,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAC/B;IACN,CAAC;IAED,UAAU,YAAC,CAAQ;QACjB,OAAO,OAAO,CAAC,GAAG,2FAAA,YACZ,EAA8B,UACjC,KADG,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,EAChC;IACN,CAAC;IAED,SAAS,YAAC,CAAQ;QAChB,OAAO,OAAO,CAAC,GAAG,2FAAA,YACZ,EAA6B,UAChC,KADG,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,EAC/B;IACN,CAAC;IAED,QAAQ;QACN,OAAO,OAAO,CAAC,GAAG,iGAAA,8BAEf,KAAC;IACN,CAAC;CACF,CAAC,EAxB8D,CAwB9D,CAAC,CAAC;AAEJ,SAAS,QAAQ,CAAC,CAAQ,EAAE,IAAc,EAAE,EAAgB;QAAd,GAAG,SAAA;IAC/C,OAAO,GAAG,qKAAA,+CAEK,EAAiB,iDAG/B,KAHc,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,EAG9B;AACJ,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { paddingX } from './helpers.js';\n\nexport const getStyles = memoizeGetStyles((emotion: Emotion) => ({\n  rootSmall(t: Theme) {\n    return emotion.css`\n        ${tabsRoot(t, 'small', emotion)}\n      `;\n  },\n\n  rootMedium(t: Theme) {\n    return emotion.css`\n        ${tabsRoot(t, 'medium', emotion)}\n      `;\n  },\n\n  rootLarge(t: Theme) {\n    return emotion.css`\n        ${tabsRoot(t, 'large', emotion)}\n      `;\n  },\n\n  vertical() {\n    return emotion.css`\n        margin: 0;\n      `;\n  },\n}));\n\nfunction tabsRoot(t: Theme, size: SizeProp, { css }: Emotion) {\n  return css`\n    display: inline-block;\n    margin: 0 -${paddingX(t, size)};\n    padding: 0;\n    position: relative;\n  `;\n}\n"]}

package/components/Textarea/Textarea.d.ts

@@ -79,10 +79,13 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
     };
     private size;
     private reflowCounter;
+    private styles;
+    private emotion;
+    private cx;
     private globalObject;
+    private theme;
     private selectAllId;
     private node;
-    private theme;
     private fakeNode;
     private counter;
     private layoutEvents;