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

package/components/Sticky/Sticky.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sticky.js","sourceRoot":"","sources":["Sticky.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport shallowEqual from 'shallowequal';\nimport warning from 'warning';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { cx } from '../../lib/cx.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.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 { isFunction } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { styles } from './Sticky.css.js';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends Omit<CommonProps, 'children'> {\n  /** Край, к которому будет закреплен элемент. */\n  side: 'top' | 'bottom';\n\n  /** Отступ от края экрана в пикселях, на который сдвигается элемент в закреплённом состоянии.\n   * @default 0 */\n  offset?: number;\n\n  /** Задаёт функцию, которая возвращает DOM-элемент, который нельзя пересекать. */\n  getStop?: () => Nullable<HTMLElement>;\n\n  /** @ignore */\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\nexport const StickyDataTids = {\n  root: 'Sticky__root',\n} as const;\n\ntype DefaultProps = Required<Pick<StickyProps, 'offset'>>;\n\n/**\n * `Sticky` позволяет закреплять элемент интерфейса в определенной позиции на экране при прокрутке страницы.\n * Это полезно для создания «прилипающих» элементов, которые должны оставаться видимыми при прокрутке содержимого.\n */\n@withRenderEnvironment\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n  public static displayName = 'Sticky';\n\n  public static defaultProps: DefaultProps = { offset: 0 };\n\n  private getProps = createPropsGetter(Sticky.defaultProps);\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private globalObject!: GlobalObject;\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow, this.globalObject);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        this.reflow();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render(): React.JSX.Element {\n    let { children } = this.props;\n    const { side } = this.props;\n    const offset = this.getProps().offset;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={styles.wrapper}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={cx(styles.inner, {\n              [styles.fixed]: fixed && !stopped,\n              [styles.stopped]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => {\n    this.wrapper = ref;\n  };\n\n  private refInner = (ref: Nullable<HTMLElement>) => {\n    this.inner = ref;\n  };\n\n  /**\n   * Пересчитать габариты и позицию залипшего элемента\n   *\n   * @public\n   */\n  public reflow = (): void => {\n    if (!this.globalObject.document?.documentElement) {\n      warning(false, 'There is no \"documentElement\" in document');\n      return;\n    }\n\n    const windowHeight = this.globalObject.innerHeight || this.globalObject.document.documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left, width } = getDOMRect(this.wrapper);\n    const { height } = getDOMRect(this.inner);\n    const { getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const offset = this.getProps().offset;\n    const fixed = side === 'top' ? Math.ceil(top) < offset : Math.floor(bottom) > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      this.setState({ width });\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = getDOMRect(stop);\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}
+{"version":3,"file":"Sticky.js","sourceRoot":"","sources":["Sticky.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\nimport shallowEqual from 'shallowequal';\nimport warning from 'warning';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.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 { isFunction } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getStyles } from './Sticky.styles.js';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends Omit<CommonProps, 'children'> {\n  /** Край, к которому будет закреплен элемент. */\n  side: 'top' | 'bottom';\n\n  /** Отступ от края экрана в пикселях, на который сдвигается элемент в закреплённом состоянии.\n   * @default 0 */\n  offset?: number;\n\n  /** Задаёт функцию, которая возвращает DOM-элемент, который нельзя пересекать. */\n  getStop?: () => Nullable<HTMLElement>;\n\n  /** @ignore */\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\nexport const StickyDataTids = {\n  root: 'Sticky__root',\n} as const;\n\ntype DefaultProps = Required<Pick<StickyProps, 'offset'>>;\n\n/**\n * `Sticky` позволяет закреплять элемент интерфейса в определенной позиции на экране при прокрутке страницы.\n * Это полезно для создания «прилипающих» элементов, которые должны оставаться видимыми при прокрутке содержимого.\n */\n@withRenderEnvironment\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n  public static displayName = 'Sticky';\n\n  public static defaultProps: DefaultProps = { offset: 0 };\n\n  private getProps = createPropsGetter(Sticky.defaultProps);\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow, this.globalObject);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        this.reflow();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n    return this.renderMain();\n  }\n\n  private renderMain() {\n    let { children } = this.props;\n    const { side } = this.props;\n    const offset = this.getProps().offset;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={this.styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={this.cx(this.styles.inner(), {\n              [this.styles.fixed()]: fixed && !stopped,\n              [this.styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={this.styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => {\n    this.wrapper = ref;\n  };\n\n  private refInner = (ref: Nullable<HTMLElement>) => {\n    this.inner = ref;\n  };\n\n  /**\n   * Пересчитать габариты и позицию залипшего элемента\n   *\n   * @public\n   */\n  public reflow = (): void => {\n    if (!this.globalObject.document?.documentElement) {\n      warning(false, 'There is no \"documentElement\" in document');\n      return;\n    }\n\n    const windowHeight = this.globalObject.innerHeight || this.globalObject.document.documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left, width } = getDOMRect(this.wrapper);\n    const { height } = getDOMRect(this.inner);\n    const { getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const offset = this.getProps().offset;\n    const fixed = side === 'top' ? Math.ceil(top) < offset : Math.floor(bottom) > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      this.setState({ width });\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = getDOMRect(stop);\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}

package/components/Sticky/Sticky.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    wrapper(): string;
+    inner(): string;
+    fixed(): string;
+    stopped(): string;
+    container(): string;
+}>;

package/components/Sticky/Sticky.styles.js

@@ -0,0 +1,27 @@
+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';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        wrapper: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n    "], ["\n      display: flex;\n    "])));
+        },
+        inner: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: flex;\n      width: 100%;\n    "], ["\n      display: flex;\n      width: 100%;\n    "])));
+        },
+        fixed: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: fixed;\n    "], ["\n      position: fixed;\n    "])));
+        },
+        stopped: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n    "], ["\n      position: relative;\n    "])));
+        },
+        container: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      flex: auto;\n      width: 100%;\n    "], ["\n      flex: auto;\n      width: 100%;\n    "])));
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=Sticky.styles.js.map

package/components/Sticky/Sticky.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticky.styles.js","sourceRoot":"","sources":["Sticky.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,OAAO;YACL,OAAO,GAAG,iGAAA,8BAET,KAAC;QACJ,CAAC;QACD,KAAK;YACH,OAAO,GAAG,qHAAA,kDAGT,KAAC;QACJ,CAAC;QAED,KAAK;YACH,OAAO,GAAG,mGAAA,gCAET,KAAC;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,sGAAA,mCAET,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,kHAAA,+CAGT,KAAC;QACJ,CAAC;KACF,CAAC;AA/B8D,CA+B9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  wrapper() {\n    return css`\n      display: flex;\n    `;\n  },\n  inner() {\n    return css`\n      display: flex;\n      width: 100%;\n    `;\n  },\n\n  fixed() {\n    return css`\n      position: fixed;\n    `;\n  },\n\n  stopped() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  container() {\n    return css`\n      flex: auto;\n      width: 100%;\n    `;\n  },\n}));\n"]}

package/components/Switcher/Switcher.d.ts

@@ -47,6 +47,9 @@ export declare class Switcher extends React.Component<SwitcherProps, SwitcherSta
     static displayName: string;
     static defaultProps: DefaultProps;
     state: SwitcherState;
+    private emotion;
+    private cx;
+    private styles;
     private theme;
     getRootNode: TGetRootNode;
     private setRootNode;

package/components/Switcher/Switcher.js

@@ -41,14 +41,14 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import React from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
-import { cx } from '../../lib/cx.js';
 import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { Button } from '../Button/index.js';
 import { Group, getButtonCorners } from '../Group/index.js';
 import { mod } from './helpers.js';
-import { styles } from './Switcher.css.js';
+import { getStyles } from './Switcher.styles.js';
 import { getSwitcherTheme } from './switcherTheme.js';
 export var SwitcherDataTids = {
     root: 'Switcher__root',
@@ -163,18 +163,19 @@ var Switcher = /** @class */ (function (_super) {
         _this.getLabelSizeClassName = function () {
             switch (_this.props.size) {
                 case 'large':
-                    return styles.captionLarge;
+                    return _this.styles.captionLarge(_this.theme);
                 case 'medium':
-                    return styles.captionMedium;
+                    return _this.styles.captionMedium(_this.theme);
                 case 'small':
                 default:
-                    return styles.captionSmall;
+                    return _this.styles.captionSmall(_this.theme);
             }
         };
         return _this;
     }
     Switcher.prototype.render = function () {
         var _this = this;
+        this.styles = getStyles(this.emotion);
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
             _this.theme = getSwitcherTheme(theme);
             return React.createElement(ThemeContext.Provider, { value: _this.theme }, _this.renderMain());
@@ -187,16 +188,16 @@ var Switcher = /** @class */ (function (_super) {
             onKeyDown: this.handleKey,
             onFocus: this._handleFocus,
             onBlur: this._handleBlur,
-            className: styles.input,
+            className: this.styles.input(),
         };
         var items = React.createElement(Group, { width: '100%' }, this._renderItems());
-        var captionClassName = cx(styles.caption, this.getLabelSizeClassName());
-        var wrapperClassName = cx(styles.wrap, (_a = {},
-            _a[styles.error] = this.props.error,
-            _a[styles.wrapCustomWidth] = this.props.width !== undefined,
+        var captionClassName = this.cx(this.styles.caption(this.theme), this.getLabelSizeClassName());
+        var wrapperClassName = this.cx(this.styles.wrap(), (_a = {},
+            _a[this.styles.error(this.theme)] = this.props.error,
+            _a[this.styles.wrapCustomWidth()] = this.props.width !== undefined,
             _a));
         return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
-            React.createElement("div", { "data-tid": SwitcherDataTids.root, className: styles.root, style: { width: this.props.width } },
+            React.createElement("div", { "data-tid": SwitcherDataTids.root, className: this.styles.root(), style: { width: this.props.width } },
                 this.props.caption ? React.createElement("div", { className: captionClassName }, this.props.caption) : null,
                 React.createElement("div", { className: wrapperClassName },
                     React.createElement("input", __assign({}, inputProps)),
@@ -208,6 +209,7 @@ var Switcher = /** @class */ (function (_super) {
         role: 'switch',
     };
     Switcher = __decorate([
+        withRenderEnvironment,
         rootNode
     ], Switcher);
     return Switcher;

package/components/Switcher/Switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switcher.js","sourceRoot":"","sources":["Switcher.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { HTMLAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { cx } from '../../lib/cx.js';\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers.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 { Nullable } from '../../typings/utility-types.js';\nimport { Button } from '../Button/index.js';\nimport type { ButtonProps } from '../Button/index.js';\nimport { Group, getButtonCorners } from '../Group/index.js';\nimport { mod } from './helpers.js';\nimport { styles } from './Switcher.css.js';\nimport { getSwitcherTheme } from './switcherTheme.js';\n\nexport type SwitcherItems = string | SwitcherItem;\n\nexport const SwitcherDataTids = {\n  root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {\n  /** Задаёт список элементов в свитчере. Это массив строк или объектов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }` */\n  items: SwitcherItems[];\n\n  /** Значение свитчера. */\n  value?: string;\n\n  /** Событие изменения значения свитчера (value). */\n  onValueChange?: (value: string) => void;\n\n  /** Подпись около свитчера. */\n  caption?: string;\n\n  /** Переводит свитчер в состояние ошибки. */\n  error?: boolean;\n\n  /** Размер свитчера. */\n  size?: SizeProp;\n\n  /** Ширина свитчера. С этим пропом элементы внутри автоматически равномерно растянутся. */\n  width?: React.CSSProperties['width'];\n\n  /** Блокирует свитчер. */\n  disabled?: boolean;\n\n  /** Задаёт функцию отрисовки элемента. Параметр `renderDefault` - это встроенная дефолтная функция отрисовки элемента, которую можно вызывать в `renderItem`. */\n  renderItem?: (\n    label: string,\n    value: string,\n    buttonProps: ButtonProps,\n    renderDefault: () => React.ReactNode,\n    ariaLabel?: string,\n  ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n  focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n  value: string;\n  label: string;\n  'aria-label'?: string;\n  buttonProps?: Partial<ButtonProps>;\n}\n\n/**\n * Переключатель используется для выбора одного значения из нескольких. Похож на [группу радиокнопок](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-radiogroup--docs), но более компактный.\n */\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n  public static __KONTUR_REACT_UI__ = 'Switcher';\n  public static displayName = 'Switcher';\n\n  public static defaultProps: DefaultProps = {\n    role: 'switch',\n  };\n\n  public state: SwitcherState = {\n    focusedIndex: null,\n  };\n\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render(): React.JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getSwitcherTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const inputProps = {\n      type: 'checkbox',\n      onKeyDown: this.handleKey,\n      onFocus: this._handleFocus,\n      onBlur: this._handleBlur,\n      className: styles.input,\n    };\n    const items = <Group width={'100%'}>{this._renderItems()}</Group>;\n\n    const captionClassName = cx(styles.caption, this.getLabelSizeClassName());\n    const wrapperClassName = cx(styles.wrap, {\n      [styles.error]: this.props.error,\n      [styles.wrapCustomWidth]: this.props.width !== undefined,\n    });\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SwitcherDataTids.root} className={styles.root} style={{ width: this.props.width }}>\n          {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n          <div className={wrapperClassName}>\n            <input {...inputProps} />\n            {items}\n          </div>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private selectItem = (value: string) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(value);\n    }\n  };\n\n  private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n    return typeof item === 'object' ? item : { label: item, value: item };\n  };\n\n  private _extractValuesFromItems = (): string[] => {\n    return this.props.items.map((item) => {\n      const { value } = this._extractPropsFromItem(item);\n      return value;\n    });\n  };\n\n  private _focus = (index: number) => {\n    this.setState({ focusedIndex: index });\n  };\n\n  private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const focusedIndex = this.state.focusedIndex;\n    if (typeof focusedIndex !== 'number') {\n      return;\n    }\n\n    if (isKeyEnter(e)) {\n      if (this.props.onValueChange) {\n        const { value, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n        if (!buttonProps?.disabled) {\n          this.selectItem(value);\n        }\n      }\n      return;\n    }\n\n    if (isKeyArrowHorizontal(e)) {\n      e.preventDefault();\n      this.move(isKeyArrowLeft(e));\n    }\n  };\n\n  private move = (left: boolean) => {\n    const selectedIndex = this.state.focusedIndex;\n\n    if (typeof selectedIndex !== 'number') {\n      return;\n    }\n    const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n    this._focus(newFocusedIndex);\n  };\n\n  private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n    const { items, disabled } = this.props;\n    if (disabled) {\n      return focusedIndex;\n    }\n\n    for (let i = 1; i < items.length; i++) {\n      const index = mod(focusedIndex + (left ? -i : i), items.length);\n      const { buttonProps } = this._extractPropsFromItem(items[index]);\n      if (!buttonProps?.disabled) {\n        return index;\n      }\n    }\n    return focusedIndex;\n  };\n\n  private _handleFocus = () => {\n    const { value } = this.props;\n\n    const items = this._extractValuesFromItems();\n    const currentIndex = [...items].indexOf(value as string);\n    const index = currentIndex > -1 ? currentIndex : 0;\n\n    this.setState({ focusedIndex: index });\n  };\n\n  private _handleBlur = () => {\n    this.setState({ focusedIndex: null });\n  };\n\n  private _renderItems = () => {\n    const { items, value, size, width, disabled, role, renderItem } = this.props;\n\n    return items.map((item, i) => {\n      const {\n        'aria-label': ariaLabel,\n        label,\n        value: itemValue,\n        buttonProps: customButtonProps,\n      } = this._extractPropsFromItem(item);\n\n      const isChecked = value === itemValue;\n      const commonButtonProps = {\n        use: 'default',\n        _noWarningForUseDefault: true,\n        'aria-checked': isChecked,\n        role,\n        checked: isChecked,\n        visuallyFocused: this.state.focusedIndex === i,\n        onClick: () => {\n          this.selectItem(itemValue);\n        },\n        disableFocus: true,\n        size,\n        disabled,\n        corners: getButtonCorners(i === 0, i === items.length - 1),\n      } satisfies ButtonProps;\n\n      const buttonProps = {\n        ...commonButtonProps,\n        ...customButtonProps,\n      };\n\n      if (!buttonProps.width && width) {\n        buttonProps.width = '100%';\n      }\n\n      const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);\n      return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();\n    });\n  };\n\n  private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps, ariaLabel?: string) => (\n    <Button aria-label={ariaLabel} key={value} {...buttonProps}>\n      {label}\n    </Button>\n  );\n\n  private getLabelSizeClassName = (): string => {\n    switch (this.props.size) {\n      case 'large':\n        return styles.captionLarge;\n      case 'medium':\n        return styles.captionMedium;\n      case 'small':\n      default:\n        return styles.captionSmall;\n    }\n  };\n}\n"]}
+{"version":3,"file":"Switcher.js","sourceRoot":"","sources":["Switcher.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { HTMLAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers.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 type { SizeProp } from '../../lib/types/props.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { Button } from '../Button/index.js';\nimport type { ButtonProps } from '../Button/index.js';\nimport { Group, getButtonCorners } from '../Group/index.js';\nimport { mod } from './helpers.js';\nimport { getStyles } from './Switcher.styles.js';\nimport { getSwitcherTheme } from './switcherTheme.js';\n\nexport type SwitcherItems = string | SwitcherItem;\n\nexport const SwitcherDataTids = {\n  root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {\n  /** Задаёт список элементов в свитчере. Это массив строк или объектов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }` */\n  items: SwitcherItems[];\n\n  /** Значение свитчера. */\n  value?: string;\n\n  /** Событие изменения значения свитчера (value). */\n  onValueChange?: (value: string) => void;\n\n  /** Подпись около свитчера. */\n  caption?: string;\n\n  /** Переводит свитчер в состояние ошибки. */\n  error?: boolean;\n\n  /** Размер свитчера. */\n  size?: SizeProp;\n\n  /** Ширина свитчера. С этим пропом элементы внутри автоматически равномерно растянутся. */\n  width?: React.CSSProperties['width'];\n\n  /** Блокирует свитчер. */\n  disabled?: boolean;\n\n  /** Задаёт функцию отрисовки элемента. Параметр `renderDefault` - это встроенная дефолтная функция отрисовки элемента, которую можно вызывать в `renderItem`. */\n  renderItem?: (\n    label: string,\n    value: string,\n    buttonProps: ButtonProps,\n    renderDefault: () => React.ReactNode,\n    ariaLabel?: string,\n  ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n  focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n  value: string;\n  label: string;\n  'aria-label'?: string;\n  buttonProps?: Partial<ButtonProps>;\n}\n\n/**\n * Переключатель используется для выбора одного значения из нескольких. Похож на [группу радиокнопок](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-radiogroup--docs), но более компактный.\n */\n@withRenderEnvironment\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n  public static __KONTUR_REACT_UI__ = 'Switcher';\n  public static displayName = 'Switcher';\n\n  public static defaultProps: DefaultProps = {\n    role: 'switch',\n  };\n\n  public state: SwitcherState = {\n    focusedIndex: null,\n  };\n\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getSwitcherTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const inputProps = {\n      type: 'checkbox',\n      onKeyDown: this.handleKey,\n      onFocus: this._handleFocus,\n      onBlur: this._handleBlur,\n      className: this.styles.input(),\n    };\n    const items = <Group width={'100%'}>{this._renderItems()}</Group>;\n\n    const captionClassName = this.cx(this.styles.caption(this.theme), this.getLabelSizeClassName());\n    const wrapperClassName = this.cx(this.styles.wrap(), {\n      [this.styles.error(this.theme)]: this.props.error,\n      [this.styles.wrapCustomWidth()]: this.props.width !== undefined,\n    });\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SwitcherDataTids.root} className={this.styles.root()} style={{ width: this.props.width }}>\n          {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n          <div className={wrapperClassName}>\n            <input {...inputProps} />\n            {items}\n          </div>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private selectItem = (value: string) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(value);\n    }\n  };\n\n  private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n    return typeof item === 'object' ? item : { label: item, value: item };\n  };\n\n  private _extractValuesFromItems = (): string[] => {\n    return this.props.items.map((item) => {\n      const { value } = this._extractPropsFromItem(item);\n      return value;\n    });\n  };\n\n  private _focus = (index: number) => {\n    this.setState({ focusedIndex: index });\n  };\n\n  private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const focusedIndex = this.state.focusedIndex;\n    if (typeof focusedIndex !== 'number') {\n      return;\n    }\n\n    if (isKeyEnter(e)) {\n      if (this.props.onValueChange) {\n        const { value, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n        if (!buttonProps?.disabled) {\n          this.selectItem(value);\n        }\n      }\n      return;\n    }\n\n    if (isKeyArrowHorizontal(e)) {\n      e.preventDefault();\n      this.move(isKeyArrowLeft(e));\n    }\n  };\n\n  private move = (left: boolean) => {\n    const selectedIndex = this.state.focusedIndex;\n\n    if (typeof selectedIndex !== 'number') {\n      return;\n    }\n    const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n    this._focus(newFocusedIndex);\n  };\n\n  private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n    const { items, disabled } = this.props;\n    if (disabled) {\n      return focusedIndex;\n    }\n\n    for (let i = 1; i < items.length; i++) {\n      const index = mod(focusedIndex + (left ? -i : i), items.length);\n      const { buttonProps } = this._extractPropsFromItem(items[index]);\n      if (!buttonProps?.disabled) {\n        return index;\n      }\n    }\n    return focusedIndex;\n  };\n\n  private _handleFocus = () => {\n    const { value } = this.props;\n\n    const items = this._extractValuesFromItems();\n    const currentIndex = [...items].indexOf(value as string);\n    const index = currentIndex > -1 ? currentIndex : 0;\n\n    this.setState({ focusedIndex: index });\n  };\n\n  private _handleBlur = () => {\n    this.setState({ focusedIndex: null });\n  };\n\n  private _renderItems = () => {\n    const { items, value, size, width, disabled, role, renderItem } = this.props;\n\n    return items.map((item, i) => {\n      const {\n        'aria-label': ariaLabel,\n        label,\n        value: itemValue,\n        buttonProps: customButtonProps,\n      } = this._extractPropsFromItem(item);\n\n      const isChecked = value === itemValue;\n      const commonButtonProps = {\n        use: 'default',\n        _noWarningForUseDefault: true,\n        'aria-checked': isChecked,\n        role,\n        checked: isChecked,\n        visuallyFocused: this.state.focusedIndex === i,\n        onClick: () => {\n          this.selectItem(itemValue);\n        },\n        disableFocus: true,\n        size,\n        disabled,\n        corners: getButtonCorners(i === 0, i === items.length - 1),\n      } satisfies ButtonProps;\n\n      const buttonProps = {\n        ...commonButtonProps,\n        ...customButtonProps,\n      };\n\n      if (!buttonProps.width && width) {\n        buttonProps.width = '100%';\n      }\n\n      const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);\n      return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();\n    });\n  };\n\n  private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps, ariaLabel?: string) => (\n    <Button aria-label={ariaLabel} key={value} {...buttonProps}>\n      {label}\n    </Button>\n  );\n\n  private getLabelSizeClassName = (): string => {\n    switch (this.props.size) {\n      case 'large':\n        return this.styles.captionLarge(this.theme);\n      case 'medium':\n        return this.styles.captionMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.captionSmall(this.theme);\n    }\n  };\n}\n"]}

package/components/Switcher/Switcher.styles.d.ts

@@ -0,0 +1,12 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    wrap(): string;
+    wrapCustomWidth(): string;
+    input(): string;
+    caption(t: Theme): string;
+    captionSmall(t: Theme): string;
+    captionMedium(t: Theme): string;
+    captionLarge(t: Theme): string;
+    error(t: Theme): string;
+}>;

package/components/Switcher/Switcher.styles.js

@@ -0,0 +1,39 @@
+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';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      line-height: normal;\n    "], ["\n      display: flex;\n      align-items: center;\n      line-height: normal;\n    "])));
+        },
+        wrap: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: inline-block;\n      vertical-align: middle;\n    "], ["\n      display: inline-block;\n      vertical-align: middle;\n    "])));
+        },
+        wrapCustomWidth: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      flex-grow: 1;\n    "], ["\n      flex-grow: 1;\n    "])));
+        },
+        input: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    "], ["\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    "])));
+        },
+        caption: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      vertical-align: middle;\n      display: inline-block;\n    "], ["\n      color: ", ";\n      vertical-align: middle;\n      display: inline-block;\n    "])), t.switcherTextColor);
+        },
+        captionSmall: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.switcherCaptionGapSmall, t.switcherCaptionFontSizeSmall, t.switcherCaptionLineHeightSmall);
+        },
+        captionMedium: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.switcherCaptionGapMedium, t.switcherCaptionFontSizeMedium, t.switcherCaptionLineHeightMedium);
+        },
+        captionLarge: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.switcherCaptionGapLarge, t.switcherCaptionFontSizeLarge, t.switcherCaptionLineHeightLarge);
+        },
+        error: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      position: relative;\n\n      &:before {\n        content: '';\n        position: absolute;\n        pointer-events: none;\n        top: 1px;\n        right: 1px;\n        bottom: 1px;\n        left: 1px;\n        z-index: 1;\n        border-radius: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "], ["\n      position: relative;\n\n      &:before {\n        content: '';\n        position: absolute;\n        pointer-events: none;\n        top: 1px;\n        right: 1px;\n        bottom: 1px;\n        left: 1px;\n        z-index: 1;\n        border-radius: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), t.switcherBorderRadius, t.switcherOutlineWidth, t.borderColorError);
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+//# sourceMappingURL=Switcher.styles.js.map

package/components/Switcher/Switcher.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switcher.styles.js","sourceRoot":"","sources":["Switcher.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,yJAAA,sFAIT,KAAC;QACJ,CAAC;QAED,IAAI;YACF,OAAO,GAAG,wIAAA,qEAGT,KAAC;QACJ,CAAC;QAED,eAAe;YACb,OAAO,GAAG,gGAAA,6BAET,KAAC;QACJ,CAAC;QAED,KAAK;YACH,OAAO,GAAG,4JAAA,yFAKT,KAAC;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,4JAAA,iBACC,EAAmB,sEAG7B,KAHU,CAAC,CAAC,iBAAiB,EAG5B;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,wJAAA,wBACQ,EAAyB,sBAC5B,EAA8B,wBAC5B,EAAgC,SAChD,KAHiB,CAAC,CAAC,uBAAuB,EAC5B,CAAC,CAAC,4BAA4B,EAC5B,CAAC,CAAC,8BAA8B,EAC/C;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,wJAAA,wBACQ,EAA0B,sBAC7B,EAA+B,wBAC7B,EAAiC,SACjD,KAHiB,CAAC,CAAC,wBAAwB,EAC7B,CAAC,CAAC,6BAA6B,EAC7B,CAAC,CAAC,+BAA+B,EAChD;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,wJAAA,wBACQ,EAAyB,sBAC5B,EAA8B,wBAC5B,EAAgC,SAChD,KAHiB,CAAC,CAAC,uBAAuB,EAC5B,CAAC,CAAC,4BAA4B,EAC5B,CAAC,CAAC,8BAA8B,EAC/C;QACJ,CAAC;QAED,KAAK,YAAC,CAAQ;YACZ,OAAO,GAAG,gYAAA,mQAYW,EAAsB,+BACnB,EAAsB,GAAI,EAAkB,kBAEnE,KAHoB,CAAC,CAAC,oBAAoB,EACnB,CAAC,CAAC,oBAAoB,EAAI,CAAC,CAAC,gBAAgB,EAElE;QACJ,CAAC;KACF,CAAC;AAjF8D,CAiF9D,CAAC,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';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      display: flex;\n      align-items: center;\n      line-height: normal;\n    `;\n  },\n\n  wrap() {\n    return css`\n      display: inline-block;\n      vertical-align: middle;\n    `;\n  },\n\n  wrapCustomWidth() {\n    return css`\n      flex-grow: 1;\n    `;\n  },\n\n  input() {\n    return css`\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.switcherTextColor};\n      vertical-align: middle;\n      display: inline-block;\n    `;\n  },\n\n  captionSmall(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapSmall};\n      font-size: ${t.switcherCaptionFontSizeSmall};\n      line-height: ${t.switcherCaptionLineHeightSmall};\n    `;\n  },\n\n  captionMedium(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapMedium};\n      font-size: ${t.switcherCaptionFontSizeMedium};\n      line-height: ${t.switcherCaptionLineHeightMedium};\n    `;\n  },\n\n  captionLarge(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapLarge};\n      font-size: ${t.switcherCaptionFontSizeLarge};\n      line-height: ${t.switcherCaptionLineHeightLarge};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      position: relative;\n\n      &:before {\n        content: '';\n        position: absolute;\n        pointer-events: none;\n        top: 1px;\n        right: 1px;\n        bottom: 1px;\n        left: 1px;\n        z-index: 1;\n        border-radius: ${t.switcherBorderRadius};\n        box-shadow: 0 0 0 ${t.switcherOutlineWidth} ${t.borderColorError};\n      }\n    `;\n  },\n}));\n"]}

package/components/Switcher/switcherTheme.d.ts

@@ -1 +1,2 @@
-export declare const getSwitcherTheme: (theme: Readonly<typeof import("../../internal/themes/BasicTheme.js").BasicThemeClass>) => Readonly<typeof import("../../internal/themes/BasicTheme.js").BasicThemeClass>;
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getSwitcherTheme: (theme: Theme) => Theme;

package/components/Switcher/switcherTheme.js

@@ -1,6 +1,5 @@
-import { memoizeTheme } from '../../lib/theming/memoizeTheme.js';
 import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
-export var getSwitcherTheme = memoizeTheme(function (theme) {
+export var getSwitcherTheme = function (theme) {
     return ThemeFactory.create({
         btnBorderWidth: theme.switcherButtonBorderWidth,
         btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,
@@ -21,5 +20,5 @@ export var getSwitcherTheme = memoizeTheme(function (theme) {
         btnPaddingYLarge: theme.switcherButtonPaddingYLarge,
         btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge,
     }, theme);
-});
+};
 //# sourceMappingURL=switcherTheme.js.map

package/components/Switcher/switcherTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"switcherTheme.js","sourceRoot":"","sources":["switcherTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,MAAM,CAAC,IAAM,gBAAgB,GAAG,YAAY,CAAC,UAAC,KAAY;IACxD,OAAO,YAAY,CAAC,MAAM,CACxB;QACE,cAAc,EAAE,KAAK,CAAC,yBAAyB;QAC/C,sBAAsB,EAAE,KAAK,CAAC,iCAAiC;QAC/D,wBAAwB,EAAE,KAAK,CAAC,mCAAmC;QAEnE,kBAAkB,EAAE,KAAK,CAAC,6BAA6B;QACvD,gBAAgB,EAAE,KAAK,CAAC,2BAA2B;QACnD,gBAAgB,EAAE,KAAK,CAAC,2BAA2B;QACnD,gBAAgB,EAAE,KAAK,CAAC,2BAA2B;QACnD,oBAAoB,EAAE,KAAK,CAAC,+BAA+B;QAE3D,mBAAmB,EAAE,KAAK,CAAC,8BAA8B;QACzD,iBAAiB,EAAE,KAAK,CAAC,4BAA4B;QACrD,iBAAiB,EAAE,KAAK,CAAC,4BAA4B;QACrD,iBAAiB,EAAE,KAAK,CAAC,4BAA4B;QACrD,qBAAqB,EAAE,KAAK,CAAC,gCAAgC;QAE7D,kBAAkB,EAAE,KAAK,CAAC,6BAA6B;QACvD,gBAAgB,EAAE,KAAK,CAAC,2BAA2B;QACnD,gBAAgB,EAAE,KAAK,CAAC,2BAA2B;QACnD,gBAAgB,EAAE,KAAK,CAAC,2BAA2B;QACnD,oBAAoB,EAAE,KAAK,CAAC,+BAA+B;KAC5D,EACD,KAAK,CACN,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { memoizeTheme } from '../../lib/theming/memoizeTheme.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\n\nexport const getSwitcherTheme = memoizeTheme((theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      btnBorderWidth: theme.switcherButtonBorderWidth,\n      btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,\n      btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,\n\n      btnLineHeightSmall: theme.switcherButtonLineHeightSmall,\n      btnFontSizeSmall: theme.switcherButtonFontSizeSmall,\n      btnPaddingXSmall: theme.switcherButtonPaddingXSmall,\n      btnPaddingYSmall: theme.switcherButtonPaddingYSmall,\n      btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,\n\n      btnLineHeightMedium: theme.switcherButtonLineHeightMedium,\n      btnFontSizeMedium: theme.switcherButtonFontSizeMedium,\n      btnPaddingXMedium: theme.switcherButtonPaddingXMedium,\n      btnPaddingYMedium: theme.switcherButtonPaddingYMedium,\n      btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,\n\n      btnLineHeightLarge: theme.switcherButtonLineHeightLarge,\n      btnFontSizeLarge: theme.switcherButtonFontSizeLarge,\n      btnPaddingXLarge: theme.switcherButtonPaddingXLarge,\n      btnPaddingYLarge: theme.switcherButtonPaddingYLarge,\n      btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge,\n    },\n    theme,\n  );\n});\n"]}
+{"version":3,"file":"switcherTheme.js","sourceRoot":"","sources":["switcherTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,KAAY;IAC3C,OAAO,YAAY,CAAC,MAAM,CACxB;QACE,cAAc,EAAE,KAAK,CAAC,yBAAyB;QAC/C,sBAAsB,EAAE,KAAK,CAAC,iCAAiC;QAC/D,wBAAwB,EAAE,KAAK,CAAC,mCAAmC;QAEnE,kBAAkB,EAAE,KAAK,CAAC,6BAA6B;QACvD,gBAAgB,EAAE,KAAK,CAAC,2BAA2B;QACnD,gBAAgB,EAAE,KAAK,CAAC,2BAA2B;QACnD,gBAAgB,EAAE,KAAK,CAAC,2BAA2B;QACnD,oBAAoB,EAAE,KAAK,CAAC,+BAA+B;QAE3D,mBAAmB,EAAE,KAAK,CAAC,8BAA8B;QACzD,iBAAiB,EAAE,KAAK,CAAC,4BAA4B;QACrD,iBAAiB,EAAE,KAAK,CAAC,4BAA4B;QACrD,iBAAiB,EAAE,KAAK,CAAC,4BAA4B;QACrD,qBAAqB,EAAE,KAAK,CAAC,gCAAgC;QAE7D,kBAAkB,EAAE,KAAK,CAAC,6BAA6B;QACvD,gBAAgB,EAAE,KAAK,CAAC,2BAA2B;QACnD,gBAAgB,EAAE,KAAK,CAAC,2BAA2B;QACnD,gBAAgB,EAAE,KAAK,CAAC,2BAA2B;QACnD,oBAAoB,EAAE,KAAK,CAAC,+BAA+B;KAC5D,EACD,KAAK,CACN,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\n\nexport const getSwitcherTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      btnBorderWidth: theme.switcherButtonBorderWidth,\n      btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,\n      btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,\n\n      btnLineHeightSmall: theme.switcherButtonLineHeightSmall,\n      btnFontSizeSmall: theme.switcherButtonFontSizeSmall,\n      btnPaddingXSmall: theme.switcherButtonPaddingXSmall,\n      btnPaddingYSmall: theme.switcherButtonPaddingYSmall,\n      btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,\n\n      btnLineHeightMedium: theme.switcherButtonLineHeightMedium,\n      btnFontSizeMedium: theme.switcherButtonFontSizeMedium,\n      btnPaddingXMedium: theme.switcherButtonPaddingXMedium,\n      btnPaddingYMedium: theme.switcherButtonPaddingYMedium,\n      btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,\n\n      btnLineHeightLarge: theme.switcherButtonLineHeightLarge,\n      btnFontSizeLarge: theme.switcherButtonFontSizeLarge,\n      btnPaddingXLarge: theme.switcherButtonPaddingXLarge,\n      btnPaddingYLarge: theme.switcherButtonPaddingYLarge,\n      btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge,\n    },\n    theme,\n  );\n};\n"]}

package/components/Tabs/Indicator.d.ts

@@ -16,6 +16,9 @@ export declare class Indicator extends React.Component<IndicatorProps, Indicator
     context: TabsContextType;
     state: IndicatorState;
     private globalObject;
+    private emotion;
+    private cx;
+    private styles;
     private theme;
     private eventListener;
     private removeTabUpdatesListener;

package/components/Tabs/Indicator.js

@@ -21,14 +21,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import throttle from 'lodash.throttle';
 import React from 'react';
-import { cx } from '../../lib/cx.js';
 import { getDOMRect } from '../../lib/dom/getDOMRect.js';
 import { isInstanceOf } from '../../lib/isInstanceOf.js';
 import * as LayoutEvents from '../../lib/LayoutEvents.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { getRootNode, rootNode } from '../../lib/rootNode/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
-import { styles } from './Indicator.css.js';
+import { getStyles } from './Indicator.styles.js';
 import { TabsDataTids } from './Tabs.js';
 import { TabsContext } from './TabsContext.js';
 var Indicator = /** @class */ (function (_super) {
@@ -71,6 +70,7 @@ var Indicator = /** @class */ (function (_super) {
     };
     Indicator.prototype.render = function () {
         var _this = this;
+        this.styles = getStyles(this.emotion);
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
             _this.theme = theme;
             return _this.renderMain();
@@ -86,7 +86,7 @@ var Indicator = /** @class */ (function (_super) {
             primary: false,
             disabled: false,
         };
-        return (React.createElement("div", { "data-tid": TabsDataTids.indicatorRoot, className: cx(styles.root, indicators.primary && styles.primary, indicators.success && styles.success, indicators.warning && styles.warning, indicators.error && styles.error, this.props.className), style: this.state.styles, ref: this.setRootNode }));
+        return (React.createElement("div", { "data-tid": TabsDataTids.indicatorRoot, className: this.cx(this.styles.root(this.theme), indicators.primary && this.styles.primary(this.theme), indicators.success && this.styles.success(this.theme), indicators.warning && this.styles.warning(this.theme), indicators.error && this.styles.error(this.theme), this.props.className), style: this.state.styles, ref: this.setRootNode }));
     };
     Indicator.prototype.getStyles = function (node) {
         var htmlNode = getRootNode(node);

package/components/Tabs/Indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["Indicator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,KAAK,YAAY,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEpE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAiB/C;IAA+B,6BAA+C;IAA9E;;QAES,aAAO,GAAoB,KAAI,CAAC,OAAO,CAAC;QAExC,WAAK,GAAmB;YAC7B,MAAM,EAAE,EAAE;SACX,CAAC;QAKM,mBAAa,GAEhB,IAAI,CAAC;QAEF,8BAAwB,GAAyB,IAAI,CAAC;QA+DtD,YAAM,GAAG,QAAQ,CAAC;YAClB,IAAA,KAAwB,KAAI,CAAC,OAAO,EAAlC,MAAM,YAAA,EAAE,SAAS,eAAiB,CAAC;YAC3C,IAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;YAC/B,IAAM,UAAU,GAAG,KAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YACxC,IAAM,aAAa,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,IAAI,CAC3D,UAAC,IAAI,IAAK,OAAA,UAAU,CAAC,IAAiC,CAAC,KAAK,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAiC,CAAC,EAAtG,CAAsG,CACjH,CAAC;YACF,IAAI,aAAa,EAAE,CAAC;gBAClB,KAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC;YACxC,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;;IA0BV,CAAC;IA/FQ,qCAAiB,GAAxB;QACE,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9E,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtE,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,wCAAoB,GAA3B;QACE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;QAC9B,CAAC;QACD,IAAI,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAClC,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;IACH,CAAC;IAEM,sCAAkB,GAAzB;QACE,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,0BAAM,GAAb;QAAA,iBASC;QARC,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;IAEO,8BAAU,GAAlB;QACQ,IAAA,KAAwB,IAAI,CAAC,OAAO,EAAlC,MAAM,YAAA,EAAE,SAAS,eAAiB,CAAC;QAC3C,IAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAC/B,IAAM,UAAU,GAAkB,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI;YACxF,KAAK,EAAE,KAAK;YACZ,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,KAAK;SAChB,CAAC;QACF,OAAO,CACL,yCACY,YAAY,CAAC,aAAa,EACpC,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,IAAI,EACX,UAAU,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,EACpC,UAAU,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,EACpC,UAAU,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,EACpC,UAAU,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,EAChC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACxB,GAAG,EAAE,IAAI,CAAC,WAAW,GACrB,CACH,CAAC;IACJ,CAAC;IAcO,6BAAS,GAAjB,UAAkB,IAAS;QACzB,IAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QAEnC,IAAI,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;YAC1D,IAAM,IAAI,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;YAClC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,OAAO;oBACL,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc;oBAChC,IAAI,EAAE,QAAQ,CAAC,UAAU;oBACzB,GAAG,EAAE,QAAQ,CAAC,SAAS;oBACvB,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG;iBAC/B,CAAC;YACJ,CAAC;YAED,IAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC;YACpE,OAAO;gBACL,IAAI,EAAE,QAAQ,CAAC,UAAU;gBACzB,GAAG,EAAE,QAAQ,CAAC,YAAY,GAAG,QAAQ,CAAC,SAAS,GAAG,cAAc;gBAChE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI;aAC9B,CAAC;QACJ,CAAC;QAED,OAAO,EAAE,CAAC;IACZ,CAAC;IAhHa,qBAAW,GAAG,WAAW,AAAd,CAAe;IAD7B,SAAS;QAFrB,qBAAqB;QACrB,QAAQ;OACI,SAAS,CAkHrB;IAAD,gBAAC;CAAA,AAlHD,CAA+B,KAAK,CAAC,SAAS,GAkH7C;SAlHY,SAAS","sourcesContent":["import throttle from 'lodash.throttle';\nimport React from 'react';\n\nimport { cx } from '../../lib/cx.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { styles } from './Indicator.css.js';\nimport type { TabIndicators } from './Tab.js';\nimport { TabsDataTids } from './Tabs.js';\nimport { TabsContext } from './TabsContext.js';\nimport type { TabsContextType } from './TabsContext.js';\n\nexport interface IndicatorProps {\n  className?: string;\n  tabUpdates: {\n    on: (x0: () => void) => () => void;\n  };\n  vertical: boolean;\n}\n\nexport interface IndicatorState {\n  styles: React.CSSProperties;\n}\n\n@withRenderEnvironment\n@rootNode\nexport class Indicator extends React.Component<IndicatorProps, IndicatorState> {\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public state: IndicatorState = {\n    styles: {},\n  };\n\n  private globalObject!: GlobalObject;\n  private theme!: Theme;\n\n  private eventListener: Nullable<{\n    remove: () => void;\n  }> = null;\n\n  private removeTabUpdatesListener: Nullable<() => void> = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.eventListener = LayoutEvents.addListener(this.reflow, this.globalObject);\n    this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);\n    this.reflow();\n  }\n\n  public componentWillUnmount() {\n    this.reflow.cancel();\n\n    if (this.eventListener) {\n      this.eventListener.remove();\n    }\n    if (this.removeTabUpdatesListener) {\n      this.removeTabUpdatesListener();\n    }\n  }\n\n  public componentDidUpdate() {\n    this.reflow();\n  }\n\n  public render(): React.JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const indicators: TabIndicators = (node && node.getIndicators && node.getIndicators()) || {\n      error: false,\n      warning: false,\n      success: false,\n      primary: false,\n      disabled: false,\n    };\n    return (\n      <div\n        data-tid={TabsDataTids.indicatorRoot}\n        className={cx(\n          styles.root,\n          indicators.primary && styles.primary,\n          indicators.success && styles.success,\n          indicators.warning && styles.warning,\n          indicators.error && styles.error,\n          this.props.className,\n        )}\n        style={this.state.styles}\n        ref={this.setRootNode}\n      />\n    );\n  }\n\n  private reflow = throttle(() => {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const nodeStyles = this.getStyles(node);\n    const stylesUpdated = ['left', 'top', 'width', 'height'].some(\n      (prop) => nodeStyles[prop as keyof React.CSSProperties] !== this.state.styles[prop as keyof React.CSSProperties],\n    );\n    if (stylesUpdated) {\n      this.setState({ styles: nodeStyles });\n    }\n  }, 100);\n\n  private getStyles(node: any): React.CSSProperties {\n    const htmlNode = getRootNode(node);\n\n    if (isInstanceOf(htmlNode, this.globalObject.HTMLElement)) {\n      const rect = getDOMRect(htmlNode);\n      if (this.props.vertical) {\n        return {\n          width: this.theme.tabBorderWidth,\n          left: htmlNode.offsetLeft,\n          top: htmlNode.offsetTop,\n          height: rect.bottom - rect.top,\n        };\n      }\n\n      const tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;\n      return {\n        left: htmlNode.offsetLeft,\n        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,\n        width: rect.right - rect.left,\n      };\n    }\n\n    return {};\n  }\n}\n"]}
+{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["Indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport throttle from 'lodash.throttle';\nimport React from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getStyles } from './Indicator.styles.js';\nimport type { TabIndicators } from './Tab.js';\nimport { TabsDataTids } from './Tabs.js';\nimport { TabsContext } from './TabsContext.js';\nimport type { TabsContextType } from './TabsContext.js';\n\nexport interface IndicatorProps {\n  className?: string;\n  tabUpdates: {\n    on: (x0: () => void) => () => void;\n  };\n  vertical: boolean;\n}\n\nexport interface IndicatorState {\n  styles: React.CSSProperties;\n}\n\n@withRenderEnvironment\n@rootNode\nexport class Indicator extends React.Component<IndicatorProps, IndicatorState> {\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public state: IndicatorState = {\n    styles: {},\n  };\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 eventListener: Nullable<{\n    remove: () => void;\n  }> = null;\n\n  private removeTabUpdatesListener: Nullable<() => void> = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.eventListener = LayoutEvents.addListener(this.reflow, this.globalObject);\n    this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);\n    this.reflow();\n  }\n\n  public componentWillUnmount() {\n    this.reflow.cancel();\n\n    if (this.eventListener) {\n      this.eventListener.remove();\n    }\n    if (this.removeTabUpdatesListener) {\n      this.removeTabUpdatesListener();\n    }\n  }\n\n  public componentDidUpdate() {\n    this.reflow();\n  }\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(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  private renderMain() {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const indicators: TabIndicators = (node && node.getIndicators && node.getIndicators()) || {\n      error: false,\n      warning: false,\n      success: false,\n      primary: false,\n      disabled: false,\n    };\n    return (\n      <div\n        data-tid={TabsDataTids.indicatorRoot}\n        className={this.cx(\n          this.styles.root(this.theme),\n          indicators.primary && this.styles.primary(this.theme),\n          indicators.success && this.styles.success(this.theme),\n          indicators.warning && this.styles.warning(this.theme),\n          indicators.error && this.styles.error(this.theme),\n          this.props.className,\n        )}\n        style={this.state.styles}\n        ref={this.setRootNode}\n      />\n    );\n  }\n\n  private reflow = throttle(() => {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const nodeStyles = this.getStyles(node);\n    const stylesUpdated = ['left', 'top', 'width', 'height'].some(\n      (prop) => nodeStyles[prop as keyof React.CSSProperties] !== this.state.styles[prop as keyof React.CSSProperties],\n    );\n    if (stylesUpdated) {\n      this.setState({ styles: nodeStyles });\n    }\n  }, 100);\n\n  private getStyles(node: any): React.CSSProperties {\n    const htmlNode = getRootNode(node);\n\n    if (isInstanceOf(htmlNode, this.globalObject.HTMLElement)) {\n      const rect = getDOMRect(htmlNode);\n      if (this.props.vertical) {\n        return {\n          width: this.theme.tabBorderWidth,\n          left: htmlNode.offsetLeft,\n          top: htmlNode.offsetTop,\n          height: rect.bottom - rect.top,\n        };\n      }\n\n      const tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;\n      return {\n        left: htmlNode.offsetLeft,\n        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,\n        width: rect.right - rect.left,\n      };\n    }\n\n    return {};\n  }\n}\n"]}

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

@@ -0,0 +1,8 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(t: Theme): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
+}>;

package/components/Tabs/Indicator.styles.js

@@ -0,0 +1,27 @@
+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';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      height: ", ";\n      position: absolute;\n      transition: all 0.2s ease-out;\n      border-radius: ", ";\n    "], ["\n      background: ", ";\n      height: ", ";\n      position: absolute;\n      transition: all 0.2s ease-out;\n      border-radius: ", ";\n    "])), t.tabColorFocus, t.tabBorderWidth, t.tabIndicatorBorderRadius);
+        },
+        primary: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.tabColorPrimary);
+        },
+        success: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.tabColorSuccess);
+        },
+        warning: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.tabColorWarning);
+        },
+        error: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.tabColorError);
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=Indicator.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.styles.js","sourceRoot":"","sources":["Indicator.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,sNAAA,sBACM,EAAe,mBACnB,EAAgB,2FAGT,EAA0B,SAC5C,KALe,CAAC,CAAC,aAAa,EACnB,CAAC,CAAC,cAAc,EAGT,CAAC,CAAC,wBAAwB,EAC3C;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,oGAAA,sBACM,EAAiB,SAChC,KADe,CAAC,CAAC,eAAe,EAC/B;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,oGAAA,sBACM,EAAiB,SAChC,KADe,CAAC,CAAC,eAAe,EAC/B;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,oGAAA,sBACM,EAAiB,SAChC,KADe,CAAC,CAAC,eAAe,EAC/B;QACJ,CAAC;QAED,KAAK,YAAC,CAAQ;YACZ,OAAO,GAAG,oGAAA,sBACM,EAAe,SAC9B,KADe,CAAC,CAAC,aAAa,EAC7B;QACJ,CAAC;KACF,CAAC;AAlC8D,CAkC9D,CAAC,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';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root(t: Theme) {\n    return css`\n      background: ${t.tabColorFocus};\n      height: ${t.tabBorderWidth};\n      position: absolute;\n      transition: all 0.2s ease-out;\n      border-radius: ${t.tabIndicatorBorderRadius};\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      background: ${t.tabColorPrimary};\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      background: ${t.tabColorSuccess};\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      background: ${t.tabColorWarning};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      background: ${t.tabColorError};\n    `;\n  },\n}));\n"]}

package/components/Tabs/Tab.d.ts

@@ -53,6 +53,12 @@ export declare class Tab<T extends string = string> extends React.Component<TabP
     private getProps;
     state: TabState;
     private globalObject;
+    private emotion;
+    private cx;
+    private styles;
+    private horizontalStyles;
+    private verticalStyles;
+    private theme;
     private tabComponent;
     getRootNode: TGetRootNode;
     private setRootNode;
@@ -61,9 +67,10 @@ export declare class Tab<T extends string = string> extends React.Component<TabP
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
+    render(): React.JSX.Element;
     getIndicators(): TabIndicators;
     getUnderlyingNode(): Nullable<React.ReactElement<Tab<T>>>;
-    render(): React.JSX.Element;
+    private renderMain;
     private getId;
     private refTabComponent;
     private getTabInstance;