npm - @skbkontur/react-ui - Versions diffs - 6.4.6 → 6.4.7-9ac75.0 - Mend

@skbkontur/react-ui 6.4.6 → 6.4.7-9ac75.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (908) hide show

package/components/Switcher/Switcher.js CHANGED Viewed

@@ -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 { getStyles } from './Switcher.styles.js';
+import { styles } from './Switcher.css.js';
 import { getSwitcherTheme } from './switcherTheme.js';
 export var SwitcherDataTids = {
     root: 'Switcher__root',
@@ -163,19 +163,18 @@ var Switcher = /** @class */ (function (_super) {
         _this.getLabelSizeClassName = function () {
             switch (_this.props.size) {
                 case 'large':
-                    return _this.styles.captionLarge(_this.theme);
+                    return styles.captionLarge;
                 case 'medium':
-                    return _this.styles.captionMedium(_this.theme);
+                    return styles.captionMedium;
                 case 'small':
                 default:
-                    return _this.styles.captionSmall(_this.theme);
+                    return styles.captionSmall;
             }
         };
         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());
@@ -188,16 +187,16 @@ var Switcher = /** @class */ (function (_super) {
             onKeyDown: this.handleKey,
             onFocus: this._handleFocus,
             onBlur: this._handleBlur,
-            className: this.styles.input(),
+            className: styles.input,
         };
         var items = React.createElement(Group, { width: '100%' }, this._renderItems());
-        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,
+        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,
             _a));
         return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
-            React.createElement("div", { "data-tid": SwitcherDataTids.root, className: this.styles.root(), style: { width: this.props.width } },
+            React.createElement("div", { "data-tid": SwitcherDataTids.root, className: 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)),
@@ -209,7 +208,6 @@ var Switcher = /** @class */ (function (_super) {
         role: 'switch',
     };
     Switcher = __decorate([
-        withRenderEnvironment,
         rootNode
     ], Switcher);
     return Switcher;

package/components/Switcher/Switcher.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"]}
1	+ {"version":3,"file":"Switcher.js","sourceRoot":"","sources":["Switcher.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAE5G,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAItD,MAAM,CAAC,IAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,gBAAgB;CACd,CAAC;AAkDX;;GAEG;AAEH;IAA8B,4BAA6C;IAA3E;;QAQS,WAAK,GAAkB;YAC5B,YAAY,EAAE,IAAI;SACnB,CAAC;QA8CM,gBAAU,GAAG,UAAC,KAAa;YACjC,IAAI,KAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;gBAC7B,KAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAClC,CAAC;QACH,CAAC,CAAC;QAEM,2BAAqB,GAAG,UAAC,IAA2B;YAC1D,OAAO,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QACxE,CAAC,CAAC;QAEM,6BAAuB,GAAG;YAChC,OAAO,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI;gBACvB,IAAA,KAAK,GAAK,KAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAArC,CAAsC;gBACnD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,YAAM,GAAG,UAAC,KAAa;YAC7B,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;QAEM,eAAS,GAAG,UAAC,CAAwC;YAC3D,IAAM,YAAY,GAAG,KAAI,CAAC,KAAK,CAAC,YAAY,CAAC;YAC7C,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE,CAAC;gBACrC,OAAO;YACT,CAAC;YAED,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClB,IAAI,KAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;oBACvB,IAAA,KAAyB,KAAI,CAAC,qBAAqB,CAAC,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,EAAjF,KAAK,WAAA,EAAE,WAAW,iBAA+D,CAAC;oBAC1F,IAAI,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CAAA,EAAE,CAAC;wBAC3B,KAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;oBACzB,CAAC;gBACH,CAAC;gBACD,OAAO;YACT,CAAC;YAED,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;QAEM,UAAI,GAAG,UAAC,IAAa;YAC3B,IAAM,aAAa,GAAG,KAAI,CAAC,KAAK,CAAC,YAAY,CAAC;YAE9C,IAAI,OAAO,aAAa,KAAK,QAAQ,EAAE,CAAC;gBACtC,OAAO;YACT,CAAC;YACD,IAAM,eAAe,GAAG,KAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;YACvE,KAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEM,0BAAoB,GAAG,UAAC,IAAa,EAAE,YAAoB;YAC3D,IAAA,KAAsB,KAAI,CAAC,KAAK,EAA9B,KAAK,WAAA,EAAE,QAAQ,cAAe,CAAC;YACvC,IAAI,QAAQ,EAAE,CAAC;gBACb,OAAO,YAAY,CAAC;YACtB,CAAC;YAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACtC,IAAM,KAAK,GAAG,GAAG,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;gBACxD,IAAA,WAAW,GAAK,KAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,YAA7C,CAA8C;gBACjE,IAAI,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CAAA,EAAE,CAAC;oBAC3B,OAAO,KAAK,CAAC;gBACf,CAAC;YACH,CAAC;YACD,OAAO,YAAY,CAAC;QACtB,CAAC,CAAC;QAEM,kBAAY,GAAG;YACb,IAAA,KAAK,GAAK,KAAI,CAAC,KAAK,MAAf,CAAgB;YAE7B,IAAM,KAAK,GAAG,KAAI,CAAC,uBAAuB,EAAE,CAAC;YAC7C,IAAM,YAAY,GAAG,kBAAI,KAAK,QAAE,OAAO,CAAC,KAAe,CAAC,CAAC;YACzD,IAAM,KAAK,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;YAEnD,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;QAEM,iBAAW,GAAG;YACpB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;QACxC,CAAC,CAAC;QAEM,kBAAY,GAAG;YACf,IAAA,KAA4D,KAAI,CAAC,KAAK,EAApE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,UAAU,gBAAe,CAAC;YAE7E,OAAO,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,CAAC;gBACjB,IAAA,KAKF,KAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAJpB,SAAS,mBAAA,EACvB,KAAK,WAAA,EACE,SAAS,WAAA,EACH,iBAAiB,iBACI,CAAC;gBAErC,IAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;gBACtC,IAAM,iBAAiB,GAAG;oBACxB,GAAG,EAAE,SAAS;oBACd,uBAAuB,EAAE,IAAI;oBAC7B,cAAc,EAAE,SAAS;oBACzB,IAAI,MAAA;oBACJ,OAAO,EAAE,SAAS;oBAClB,eAAe,EAAE,KAAI,CAAC,KAAK,CAAC,YAAY,KAAK,CAAC;oBAC9C,OAAO,EAAE;wBACP,KAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;oBAC7B,CAAC;oBACD,YAAY,EAAE,IAAI;oBAClB,IAAI,MAAA;oBACJ,QAAQ,UAAA;oBACR,OAAO,EAAE,gBAAgB,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;iBACrC,CAAC;gBAExB,IAAM,WAAW,yBACZ,iBAAiB,GACjB,iBAAiB,CACrB,CAAC;gBAEF,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC;oBAChC,WAAW,CAAC,KAAK,GAAG,MAAM,CAAC;gBAC7B,CAAC;gBAED,IAAM,aAAa,GAAG,cAAM,OAAA,KAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,CAAC,EAAhE,CAAgE,CAAC;gBAC7F,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;YAC5G,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,uBAAiB,GAAG,UAAC,KAAa,EAAE,KAAa,EAAE,WAAwB,EAAE,SAAkB,IAAK,OAAA,CAC1G,oBAAC,MAAM,2BAAa,SAAS,EAAE,GAAG,EAAE,KAAK,IAAM,WAAW,GACvD,KAAK,CACC,CACV,EAJ2G,CAI3G,CAAC;QAEM,2BAAqB,GAAG;YAC9B,QAAQ,KAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBACxB,KAAK,OAAO;oBACV,OAAO,MAAM,CAAC,YAAY,CAAC;gBAC7B,KAAK,QAAQ;oBACX,OAAO,MAAM,CAAC,aAAa,CAAC;gBAC9B,KAAK,OAAO,CAAC;gBACb;oBACE,OAAO,MAAM,CAAC,YAAY,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;;IACJ,CAAC;IAtLQ,yBAAM,GAAb;QAAA,iBASC;QARC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACrC,OAAO,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAI,CAAC,KAAK,IAAG,KAAI,CAAC,UAAU,EAAE,CAAyB,CAAC;QAC/F,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEO,6BAAU,GAAlB;;QACE,IAAM,UAAU,GAAG;YACjB,IAAI,EAAE,UAAU;YAChB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,YAAY;YAC1B,MAAM,EAAE,IAAI,CAAC,WAAW;YACxB,SAAS,EAAE,MAAM,CAAC,KAAK;SACxB,CAAC;QACF,IAAM,KAAK,GAAG,oBAAC,KAAK,IAAC,KAAK,EAAE,MAAM,IAAG,IAAI,CAAC,YAAY,EAAE,CAAS,CAAC;QAElE,IAAM,gBAAgB,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;QAC1E,IAAM,gBAAgB,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI;YACrC,GAAC,MAAM,CAAC,KAAK,IAAG,IAAI,CAAC,KAAK,CAAC,KAAK;YAChC,GAAC,MAAM,CAAC,eAAe,IAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS;gBACxD,CAAC;QAEH,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAM,IAAI,CAAC,KAAK;YAC1D,yCAAe,gBAAgB,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;gBAC7F,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,gBAAgB,IAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAO,CAAC,CAAC,CAAC,IAAI;gBACzF,6BAAK,SAAS,EAAE,gBAAgB;oBAC9B,0CAAW,UAAU,EAAI;oBACxB,KAAK,CACF,CACF,CACQ,CACjB,CAAC;IACJ,CAAC;IArDa,4BAAmB,GAAG,UAAU,AAAb,CAAc;IACjC,oBAAW,GAAG,UAAU,AAAb,CAAc;IAEzB,qBAAY,GAAiB;QACzC,IAAI,EAAE,QAAQ;KACf,AAFyB,CAExB;IANS,QAAQ;QADpB,QAAQ;OACI,QAAQ,CAsMpB;IAAD,eAAC;CAAA,AAtMD,CAA8B,KAAK,CAAC,SAAS,GAsM5C;SAtMY,QAAQ","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"]}

package/components/Switcher/switcherTheme.d.ts CHANGED Viewed

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

package/components/Switcher/switcherTheme.js CHANGED Viewed

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

package/components/Switcher/switcherTheme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"]}
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"]}

package/components/Tabs/Indicator.css.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export declare const root: string;
+export declare const primary: string;
+export declare const success: string;
+export declare const warning: string;
+export declare const error: string;
+export declare const styles: {
+    root: string;
+    primary: string;
+    success: string;
+    warning: string;
+    error: string;
+};

package/components/Tabs/Indicator.css.js ADDED Viewed

@@ -0,0 +1,7 @@
+export var error = 'react-ui-Indicator__error';
+export var primary = 'react-ui-Indicator__primary';
+export var root = 'react-ui-Indicator__root';
+export var styles = {root:'react-ui-Indicator__root',primary:'react-ui-Indicator__primary',success:'react-ui-Indicator__success',warning:'react-ui-Indicator__warning',error:'react-ui-Indicator__error'};
+export var success = 'react-ui-Indicator__success';
+export var warning = 'react-ui-Indicator__warning';

package/components/Tabs/Indicator.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Indicator.css.js","sourceRoot":"","sources":["Indicator.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,OAAO,EAAE,CAAC,EAAE,MAAM,8BAA8B,CAAC;AAEjD,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC;IACxB,UAAU,EAAE,CAAC,CAAC,aAAa;IAC3B,MAAM,EAAE,CAAC,CAAC,cAAc;IACxB,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,mBAAmB;IAC/B,YAAY,EAAE,CAAC,CAAC,wBAAwB;CACzC,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,OAAO,GAAG,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,IAAM,OAAO,GAAG,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,IAAM,OAAO,GAAG,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,IAAM,KAAK,GAAG,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC;AAE5D,MAAM,CAAC,IAAM,MAAM,GAAG,EAAE,IAAI,MAAA,EAAE,OAAO,SAAA,EAAE,OAAO,SAAA,EAAE,OAAO,SAAA,EAAE,KAAK,OAAA,EAAE,CAAC","sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { t } from '../../lib/theming/vanilla.js';\n\nexport const root = style({\n background: t.tabColorFocus,\n height: t.tabBorderWidth,\n position: 'absolute',\n transition: 'all 0.2s ease-out',\n borderRadius: t.tabIndicatorBorderRadius,\n});\n\nexport const primary = style({ background: t.tabColorPrimary });\n\nexport const success = style({ background: t.tabColorSuccess });\n\nexport const warning = style({ background: t.tabColorWarning });\n\nexport const error = style({ background: t.tabColorError });\n\nexport const styles = { root, primary, success, warning, error };\n"]}

package/components/Tabs/Indicator.d.ts CHANGED Viewed

@@ -16,9 +16,6 @@ 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 CHANGED Viewed

@@ -21,13 +21,14 @@ 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 { getStyles } from './Indicator.styles.js';
+import { styles } from './Indicator.css.js';
 import { TabsDataTids } from './Tabs.js';
 import { TabsContext } from './TabsContext.js';
 var Indicator = /** @class */ (function (_super) {
@@ -70,7 +71,6 @@ 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: 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 }));
+        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 }));
     };
     Indicator.prototype.getStyles = function (node) {
         var htmlNode = getRootNode(node);

package/components/Tabs/Indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Indicator.js","sourceRoot":"","sources":["Indicator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;~~AACA~~,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,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,~~SAAS~~,EAAE,MAAM,~~uBAAuB~~,CAAC;~~AAElD~~,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;~~QAQM~~,mBAAa,GAEhB,IAAI,CAAC;QAEF,8BAAwB,GAAyB,IAAI,CAAC;~~QAiEtD~~,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;~~IAjGQ~~,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,~~iBAWC~~;~~QAVC~~,~~IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,~~OAAO,~~CAAC,CAAC;QAEtC,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,~~IAAI,CAAC,~~EAAE,~~CAChB~~,~~IAAI,CAAC,~~MAAM,CAAC,IAAI,~~CAAC~~,~~IAAI,CAAC,KAAK,CAAC,EAC5B,~~UAAU,CAAC,OAAO,IAAI,~~IAAI,CAAC,~~MAAM,CAAC,OAAO,~~CAAC~~,~~IAAI,CAAC,KAAK,CAAC,EACrD,~~UAAU,CAAC,OAAO,IAAI,~~IAAI,CAAC,~~MAAM,CAAC,OAAO,~~CAAC~~,~~IAAI,CAAC,KAAK,CAAC,EACrD,~~UAAU,CAAC,OAAO,IAAI,~~IAAI,CAAC,~~MAAM,CAAC,OAAO,~~CAAC~~,~~IAAI,CAAC,KAAK,CAAC,EACrD,~~UAAU,CAAC,KAAK,IAAI,~~IAAI,CAAC,~~MAAM,CAAC,KAAK,~~CAAC~~,IAAI,CAAC,KAAK,CAAC,~~EACjD,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;~~IArHa~~,qBAAW,GAAG,WAAW,AAAd,CAAe;IAD7B,SAAS;QAFrB,qBAAqB;QACrB,QAAQ;OACI,SAAS,~~CAuHrB~~;IAAD,gBAAC;CAAA,~~AAvHD~~,CAA+B,KAAK,CAAC,SAAS,~~GAuH7C~~;~~SAvHY~~,SAAS","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"]}
1	+ {"version":3,"file":"Indicator.js","sourceRoot":"","sources":["Indicator.tsx"],"names":[],"mappings":"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","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"]}

package/components/Tabs/Tab.css.d.ts ADDED Viewed

@@ -0,0 +1,55 @@
+export declare const globalClasses: {
+    focus: string;
+};
+export declare const rootSmall: string;
+export declare const rootMedium: string;
+export declare const rootLarge: string;
+export declare const verticalSmall: string;
+export declare const verticalMedium: string;
+export declare const verticalLarge: string;
+export declare const focusSmall: string;
+export declare const focusMedium: string;
+export declare const focusLarge: string;
+export declare const disabled: string;
+export declare const active: string;
+export declare const horizontalActive: string;
+export declare const horizontalDisabled: string;
+export declare const horizontalPrimary: string;
+export declare const horizontalSuccess: string;
+export declare const horizontalWarning: string;
+export declare const horizontalError: string;
+export declare const verticalActive: string;
+export declare const verticalDisabled: string;
+export declare const verticalPrimary: string;
+export declare const verticalSuccess: string;
+export declare const verticalWarning: string;
+export declare const verticalError: string;
+export declare const styles: {
+    rootSmall: string;
+    rootMedium: string;
+    rootLarge: string;
+    verticalSmall: string;
+    verticalMedium: string;
+    verticalLarge: string;
+    focusSmall: string;
+    focusMedium: string;
+    focusLarge: string;
+    disabled: string;
+    active: string;
+};
+export declare const horizontalStyles: {
+    active: string;
+    disabled: string;
+    primary: string;
+    success: string;
+    warning: string;
+    error: string;
+};
+export declare const verticalStyles: {
+    active: string;
+    disabled: string;
+    primary: string;
+    success: string;
+    warning: string;
+    error: string;
+};

package/components/Tabs/Tab.css.js ADDED Viewed

@@ -0,0 +1,28 @@
+export var active = 'react-ui-Tab__active';
+export var disabled = 'react-ui-Tab__disabled';
+export var focusLarge = 'react-ui-Tab__focusLarge';
+export var focusMedium = 'react-ui-Tab__focusMedium';
+export var focusSmall = 'react-ui-Tab__focusSmall';
+export var globalClasses = {focus:'react-ui-tab-focus'};
+export var horizontalActive = 'react-ui-Tab__active-2';
+export var horizontalDisabled = 'react-ui-Tab__disabled-2';
+export var horizontalError = 'react-ui-Tab__error';
+export var horizontalPrimary = 'react-ui-Tab__primary';
+export var horizontalStyles = {active:'react-ui-Tab__active-2',disabled:'react-ui-Tab__disabled-2',primary:'react-ui-Tab__primary',success:'react-ui-Tab__success',warning:'react-ui-Tab__warning',error:'react-ui-Tab__error'};
+export var horizontalSuccess = 'react-ui-Tab__success';
+export var horizontalWarning = 'react-ui-Tab__warning';
+export var rootLarge = 'react-ui-Tab__rootLarge';
+export var rootMedium = 'react-ui-Tab__rootMedium';
+export var rootSmall = 'react-ui-Tab__rootSmall';
+export var styles = {rootSmall:'react-ui-Tab__rootSmall',rootMedium:'react-ui-Tab__rootMedium',rootLarge:'react-ui-Tab__rootLarge',verticalSmall:'react-ui-Tab__verticalSmall',verticalMedium:'react-ui-Tab__verticalMedium',verticalLarge:'react-ui-Tab__verticalLarge',focusSmall:'react-ui-Tab__focusSmall',focusMedium:'react-ui-Tab__focusMedium',focusLarge:'react-ui-Tab__focusLarge',disabled:'react-ui-Tab__disabled',active:'react-ui-Tab__active'};
+export var verticalActive = 'react-ui-Tab__active-3';
+export var verticalDisabled = 'react-ui-Tab__disabled-3';
+export var verticalError = 'react-ui-Tab__error-2';
+export var verticalLarge = 'react-ui-Tab__verticalLarge';
+export var verticalMedium = 'react-ui-Tab__verticalMedium';
+export var verticalPrimary = 'react-ui-Tab__primary-2';
+export var verticalSmall = 'react-ui-Tab__verticalSmall';
+export var verticalStyles = {active:'react-ui-Tab__active-3',disabled:'react-ui-Tab__disabled-3',primary:'react-ui-Tab__primary-2',success:'react-ui-Tab__success-2',warning:'react-ui-Tab__warning-2',error:'react-ui-Tab__error-2'};
+export var verticalSuccess = 'react-ui-Tab__success-2';
+export var verticalWarning = 'react-ui-Tab__warning-2';

package/components/Tabs/Tab.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Tab.css.js","sourceRoot":"","sources":["Tab.css.ts"],"names":[],"mappings":"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","sourcesContent":["import { globalStyle, style } from '@vanilla-extract/css';\n\nimport { prefix } from '../../lib/prefix.js';\nimport { t } from '../../lib/theming/vanilla.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\nconst tabRoot = (size: SizeProp) =>\n ({\n borderBottom: `${t.tabBorderWidth} solid transparent`,\n boxSizing: 'border-box',\n color: t.tabTextColorDefault,\n cursor: 'pointer',\n display: 'inline-block',\n fontSize: fontSize(t, size),\n lineHeight: lineHeight(t, size),\n marginLeft: paddingX(t, size),\n marginRight: paddingX(t, size),\n paddingBottom: `calc(${paddingY(t, size)} - ${t.tabBorderWidth})`,\n paddingTop: paddingY(t, size),\n position: 'relative',\n textDecoration: 'inherit',\n transition: `border-bottom ${t.transitionDuration} ${t.transitionTimingFunction}`,\n }) as const;\n\nconst tabVertical = (size: SizeProp) =>\n ({\n borderBottom: 'none',\n borderLeft: `${t.tabBorderWidth} solid transparent`,\n display: 'block',\n marginLeft: 0,\n marginRight: 0,\n paddingLeft: `calc(${paddingX(t, size)} - ${t.tabBorderWidth})`,\n paddingRight: paddingX(t, size),\n }) as const;\n\nconst tabFocus = (size: SizeProp) =>\n ({\n border: `${t.tabOutlineWidth} solid ${t.tabColorFocus}`,\n bottom: `calc(-1 * ${t.tabBorderWidth})`,\n left: `calc(-1 * ${paddingX(t, size)})`,\n position: 'absolute',\n right: `calc(-1 * ${paddingX(t, size)})`,\n top: 0,\n }) as const;\n\nexport const rootSmall = style(tabRoot('small'));\nexport const rootMedium = style(tabRoot('medium'));\nexport const rootLarge = style(tabRoot('large'));\n\nexport const verticalSmall = style(tabVertical('small'));\nexport const verticalMedium = style(tabVertical('medium'));\nexport const verticalLarge = style(tabVertical('large'));\n\nexport const focusSmall = style(tabFocus('small'));\nexport const focusMedium = style(tabFocus('medium'));\nexport const focusLarge = style(tabFocus('large'));\n\nexport const disabled = style({\n color: `color-mix(in srgb, ${t.tabTextColorDefault}, transparent 50%)`,\n cursor: 'default',\n});\n\nexport const active = style({ cursor: 'default' });\n\n// классы getHorizontalStyles и getVerticalStyles: своих баз нет, только :hover;\n// имена с номером — как у одноимённых геттеров второй и третьей карты в Emotion-версии\nexport const horizontalActive = style({}, 'active-2');\nexport const horizontalDisabled = style({}, 'disabled-2');\nexport const horizontalPrimary = style({}, 'primary');\nexport const horizontalSuccess = style({}, 'success');\nexport const horizontalWarning = style({}, 'warning');\nexport const horizontalError = style({}, 'error');\n\nexport const verticalActive = style({}, 'active-3');\nexport const verticalDisabled = style({}, 'disabled-3');\nexport const verticalPrimary = style({}, 'primary-2');\nexport const verticalSuccess = style({}, 'success-2');\nexport const verticalWarning = style({}, 'warning-2');\nexport const verticalError = style({}, 'error-2');\n\n// вложенные правила — после баз всех классов файла\n[rootSmall, rootMedium, rootLarge].forEach((root) => {\n globalStyle(`${root}:hover`, {\n outline: 'inherit',\n borderBottom: `${t.tabBorderWidth} solid ${t.tabColorHover}`,\n });\n globalStyle(`${root}:focus`, { outline: 'inherit' });\n});\n\n[verticalSmall, verticalMedium, verticalLarge].forEach((vertical) => {\n globalStyle(`${vertical}:hover`, {\n borderBottom: 'none',\n borderLeft: `${t.tabBorderWidth} solid ${t.tabColorHover}`,\n });\n globalStyle(`${vertical} .${globalClasses.focus}`, {\n bottom: 0,\n left: `calc(-1 * ${t.tabBorderWidth})`,\n right: 0,\n });\n});\n\nglobalStyle(`${horizontalActive}:hover`, { borderBottom: `${t.tabBorderWidth} solid transparent` });\nglobalStyle(`${horizontalDisabled}:hover`, { borderBottomColor: 'transparent' });\nglobalStyle(`${horizontalPrimary}:hover`, { borderBottomColor: t.tabColorHoverPrimary });\nglobalStyle(`${horizontalSuccess}:hover`, { borderBottomColor: t.tabColorHoverSuccess });\nglobalStyle(`${horizontalWarning}:hover`, { borderBottomColor: t.tabColorHoverWarning });\nglobalStyle(`${horizontalError}:hover`, { borderBottomColor: t.tabColorHoverError });\n\nglobalStyle(`${verticalActive}:hover`, { borderLeft: `${t.tabBorderWidth} solid transparent` });\nglobalStyle(`${verticalDisabled}:hover`, { borderLeftColor: 'transparent' });\nglobalStyle(`${verticalPrimary}:hover`, { borderLeftColor: t.tabColorHoverPrimary });\nglobalStyle(`${verticalSuccess}:hover`, { borderLeftColor: t.tabColorHoverSuccess });\nglobalStyle(`${verticalWarning}:hover`, { borderLeftColor: t.tabColorHoverWarning });\nglobalStyle(`${verticalError}:hover`, { borderLeftColor: t.tabColorHoverError });\n\nexport const styles = {\n rootSmall,\n rootMedium,\n rootLarge,\n verticalSmall,\n verticalMedium,\n verticalLarge,\n focusSmall,\n focusMedium,\n focusLarge,\n disabled,\n active,\n};\n\nexport const horizontalStyles = {\n active: horizontalActive,\n disabled: horizontalDisabled,\n primary: horizontalPrimary,\n success: horizontalSuccess,\n warning: horizontalWarning,\n error: horizontalError,\n};\n\nexport const verticalStyles = {\n active: verticalActive,\n disabled: verticalDisabled,\n primary: verticalPrimary,\n success: verticalSuccess,\n warning: verticalWarning,\n error: verticalError,\n};\n"]}

package/components/Tabs/Tab.d.ts CHANGED Viewed

@@ -53,12 +53,6 @@ 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;
@@ -67,10 +61,9 @@ 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>>>;
-    private renderMain;
+    render(): React.JSX.Element;
     private getId;
     private refTabComponent;
     private getTabInstance;

package/components/Tabs/Tab.js CHANGED Viewed

@@ -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 { getHorizontalStyles, getStyles, getVerticalStyles, globalClasses } from './Tab.styles.js';
+import { horizontalStyles, styles, verticalStyles, globalClasses } from './Tab.css.js';
 import { TabsContext, TabsContextDefaultValue } from './TabsContext.js';
 export var TabDataTids = {
     root: 'Tab__root',
@@ -148,16 +148,6 @@ 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),
@@ -170,7 +160,7 @@ var Tab = /** @class */ (function (_super) {
     Tab.prototype.getUnderlyingNode = function () {
         return this.tabComponent;
     };
-    Tab.prototype.renderMain = function () {
+    Tab.prototype.render = 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;
@@ -181,29 +171,29 @@ var Tab = /** @class */ (function (_super) {
             isActive = this.context.activeTab === this.getId();
             isVertical = this.context.vertical;
         }
-        var orientationStyles = isVertical ? this.verticalStyles : this.horizontalStyles;
+        var orientationStyles = isVertical ? verticalStyles : horizontalStyles;
         return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, getVisualStateDataAttributes({ active: isActive, disabled: disabled }), this.props),
-            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,
+            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,
                     _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: 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',
+                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',
                         _b)) })))));
     };
     var Tab_1;