@salutejs/plasma-new-hope 0.119.2-canary.1333.10286827108.0 → 0.120.0-canary.1347.10286315854.0

package/cjs/components/Autocomplete/Autocomplete.js

@@ -15,7 +15,7 @@ var SuggestionItem = require('./ui/SuggestionItem/SuggestionItem.js');
 var Autocomplete_styles = require('./Autocomplete.styles.js');
 var useKeyboardNavigation = require('./hooks/useKeyboardNavigation.js');
 
-var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch"];
+var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch"];
 
 /**
  * Компонент Autocomplete. Поле ввода с подсказками в выпадающем списке.
@@ -39,6 +39,7 @@ var autocompleteRoot = function autocompleteRoot(Root) {
       onScroll = _ref.onScroll,
       listMaxHeight = _ref.listMaxHeight,
       listWidth = _ref.listWidth,
+      portal = _ref.portal,
       filter = _ref.filter,
       onSuggestionSelect = _ref.onSuggestionSelect,
       _ref$threshold = _ref.threshold,
@@ -119,6 +120,8 @@ var autocompleteRoot = function autocompleteRoot(Root) {
       offset: [0, 0],
       placement: getPopoverPlacement.getPlacements('bottom'),
       isFocusTrapped: false,
+      usePortal: Boolean(portal),
+      frame: portal,
       target: /*#__PURE__*/React.createElement(TextField_styles.StyledTextField, _rollupPluginBabelHelpers.extends({
         value: value,
         onChange: handleChange,
@@ -146,7 +149,13 @@ var autocompleteRoot = function autocompleteRoot(Root) {
       preventOverflow: false,
       ref: targetRef,
       listWidth: listWidth
-    }, renderList && renderList(finalResults) || Boolean(finalResults.length) && /*#__PURE__*/React.createElement(Autocomplete_styles.Ul, {
+    }, renderList && renderList(finalResults) || Boolean(finalResults.length) && /*#__PURE__*/React.createElement(Root, {
+      view: view,
+      size: size,
+      labelPlacement: labelPlacement,
+      disabled: disabled,
+      readOnly: readOnly
+    }, /*#__PURE__*/React.createElement(Autocomplete_styles.Ul, {
       id: listId,
       role: "listbox",
       "aria-label": label,
@@ -160,7 +169,7 @@ var autocompleteRoot = function autocompleteRoot(Root) {
         id: "".concat(listId, "/").concat(index),
         focused: focused === index
       });
-    }), renderListEnd && /*#__PURE__*/React.createElement(Autocomplete_styles.InfiniteLoaderWrapper, null, renderListEnd()))), leftHelper && /*#__PURE__*/React.createElement(Autocomplete_styles.LeftHelper, {
+    }), renderListEnd && /*#__PURE__*/React.createElement(Autocomplete_styles.InfiniteLoaderWrapper, null, renderListEnd())))), leftHelper && /*#__PURE__*/React.createElement(Autocomplete_styles.LeftHelper, {
       id: helperTextId,
       disabled: disabled,
       readOnly: readOnly

package/cjs/components/Autocomplete/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React, { forwardRef, useState, useReducer } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport { useDidMountEffect, useOutsideClick } from '../../hooks';\nimport { RootProps } from '../../engines';\nimport { getPlacements } from '../../utils';\n\nimport { focusedReducer } from './reducers/focusedReducer';\nimport { SuggestionItem, StyledTextField } from './ui';\nimport { StyledPopover, Ul, LeftHelper, base, InfiniteLoaderWrapper } from './Autocomplete.styles';\nimport type { AutocompleteProps, SuggestionItemType } from './Autocomplete.types';\nimport { useKeyNavigation } from './hooks/useKeyboardNavigation';\n\n/**\n * Компонент Autocomplete. Поле ввода с подсказками в выпадающем списке.\n */\nexport const autocompleteRoot = (Root: RootProps<HTMLInputElement, AutocompleteProps>) =>\n    forwardRef<HTMLInputElement, AutocompleteProps>(\n        (\n            {\n                value: outerValue,\n                onChange,\n                suggestions,\n                view,\n                size,\n                labelPlacement,\n                disabled,\n                readOnly,\n                label,\n                leftHelper,\n                contentLeft,\n                contentRight,\n                textBefore,\n                textAfter,\n                onScroll,\n                listMaxHeight,\n                listWidth,\n                filter,\n                onSuggestionSelect,\n                threshold = 2,\n                renderList,\n                renderListEnd,\n                onSearch,\n                ...rest\n            },\n            ref,\n        ) => {\n            const [focused, dispatchFocused] = useReducer(focusedReducer, null);\n            const [innerValue, setInnerValue] = useState<string | number>('');\n            const [isOpen, setIsOpen] = useState(false);\n\n            const listId = safeUseId();\n            const value = outerValue || innerValue;\n            const helperTextId = safeUseId();\n\n            const targetRef = useOutsideClick<HTMLDivElement>(() => {\n                setIsOpen(false);\n            });\n\n            const handleFocus = () => {\n                if (value.toString().length >= threshold) {\n                    setIsOpen(true);\n                }\n            };\n\n            const handleItemClick = (e: SuggestionItemType) => {\n                setInnerValue(e.label);\n\n                if (onSuggestionSelect) {\n                    onSuggestionSelect(e);\n                }\n\n                setIsOpen(false);\n            };\n\n            const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n                const currentValue = e.target.value;\n\n                setInnerValue(currentValue);\n\n                if (onChange) {\n                    onChange(e);\n                }\n\n                if (currentValue.toString().length >= threshold) {\n                    setIsOpen(true);\n                } else {\n                    setIsOpen(false);\n                }\n            };\n\n            const defaultFilterCallback = ({ label }: { label: string }) => {\n                return label.toLowerCase().includes(value.toString().toLowerCase());\n            };\n\n            const finalResults = suggestions?.filter(filter || defaultFilterCallback) || [];\n\n            const { onKeyDown } = useKeyNavigation({\n                isOpen,\n                setIsOpen,\n                focused,\n                dispatchFocused,\n                finalResults,\n                handleItemClick,\n            });\n\n            useDidMountEffect(() => {\n                dispatchFocused({ type: 'reset' });\n            }, [value]);\n\n            return (\n                <Root view={view} size={size} labelPlacement={labelPlacement} disabled={disabled} readOnly={readOnly}>\n                    <StyledPopover\n                        isOpen={isOpen}\n                        offset={[0, 0]}\n                        placement={getPlacements('bottom')}\n                        isFocusTrapped={false}\n                        target={\n                            <StyledTextField\n                                value={value}\n                                onChange={handleChange}\n                                onSearch={focused === null ? onSearch : undefined}\n                                ref={ref}\n                                size={size}\n                                view={view}\n                                labelPlacement={labelPlacement}\n                                disabled={disabled}\n                                readOnly={readOnly}\n                                label={label}\n                                contentLeft={contentLeft}\n                                contentRight={contentRight}\n                                textBefore={textBefore}\n                                textAfter={textAfter}\n                                onFocus={handleFocus}\n                                onKeyDown={onKeyDown}\n                                role=\"combobox\"\n                                aria-autocomplete=\"list\"\n                                aria-controls={listId}\n                                aria-expanded={isOpen}\n                                aria-activedescendant={`${listId}/${focused}`}\n                                aria-describedby={helperTextId}\n                                {...rest}\n                            />\n                        }\n                        preventOverflow={false}\n                        ref={targetRef}\n                        listWidth={listWidth}\n                    >\n                        {(renderList && renderList(finalResults)) ||\n                            (Boolean(finalResults.length) && (\n                                <Ul\n                                    id={listId}\n                                    role=\"listbox\"\n                                    aria-label={label}\n                                    onScroll={onScroll}\n                                    listMaxHeight={listMaxHeight}\n                                >\n                                    {finalResults.map((suggestion, index) => (\n                                        <SuggestionItem\n                                            key={index}\n                                            item={suggestion}\n                                            onClick={handleItemClick}\n                                            id={`${listId}/${index}`}\n                                            focused={focused === index}\n                                        />\n                                    ))}\n\n                                    {renderListEnd && <InfiniteLoaderWrapper>{renderListEnd()}</InfiniteLoaderWrapper>}\n                                </Ul>\n                            ))}\n                    </StyledPopover>\n\n                    {/* TODO: Дублируем хелпер для корректного позиционирования списка подсказок */}\n                    {leftHelper && (\n                        <LeftHelper id={helperTextId} disabled={disabled} readOnly={readOnly}>\n                            {leftHelper}\n                        </LeftHelper>\n                    )}\n                </Root>\n            );\n        },\n    );\n\nexport const autocompleteConfig = {\n    name: 'Autocomplete',\n    tag: 'div',\n    layout: autocompleteRoot,\n    base,\n    defaults: {\n        view: 'default',\n        size: 'l',\n        labelPlacement: 'outer',\n    },\n    variations: {\n        view: {\n            css: '',\n        },\n    },\n};\n"],"names":["autocompleteRoot","Root","forwardRef","_ref","ref","outerValue","value","onChange","suggestions","view","size","labelPlacement","disabled","readOnly","label","leftHelper","contentLeft","contentRight","textBefore","textAfter","onScroll","listMaxHeight","listWidth","filter","onSuggestionSelect","_ref$threshold","threshold","renderList","renderListEnd","onSearch","rest","_objectWithoutProperties","_excluded","_useReducer","useReducer","focusedReducer","_useReducer2","_slicedToArray","focused","dispatchFocused","_useState","useState","_useState2","innerValue","setInnerValue","_useState3","_useState4","isOpen","setIsOpen","listId","safeUseId","helperTextId","targetRef","useOutsideClick","handleFocus","toString","length","handleItemClick","e","handleChange","currentValue","target","defaultFilterCallback","_ref2","toLowerCase","includes","finalResults","_useKeyNavigation","useKeyNavigation","onKeyDown","useDidMountEffect","type","React","createElement","StyledPopover","offset","placement","getPlacements","isFocusTrapped","StyledTextField","_extends","undefined","onFocus","role","concat","preventOverflow","Boolean","Ul","id","map","suggestion","index","SuggestionItem","key","item","onClick","InfiniteLoaderWrapper","LeftHelper","autocompleteConfig","name","tag","layout","base","defaults","variations","css"],"mappings":"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"}
+{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React, { forwardRef, useState, useReducer } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport { useDidMountEffect, useOutsideClick } from '../../hooks';\nimport { RootProps } from '../../engines';\nimport { getPlacements } from '../../utils';\n\nimport { focusedReducer } from './reducers/focusedReducer';\nimport { SuggestionItem, StyledTextField } from './ui';\nimport { StyledPopover, Ul, LeftHelper, base, InfiniteLoaderWrapper } from './Autocomplete.styles';\nimport type { AutocompleteProps, SuggestionItemType } from './Autocomplete.types';\nimport { useKeyNavigation } from './hooks/useKeyboardNavigation';\n\n/**\n * Компонент Autocomplete. Поле ввода с подсказками в выпадающем списке.\n */\nexport const autocompleteRoot = (Root: RootProps<HTMLInputElement, AutocompleteProps>) =>\n    forwardRef<HTMLInputElement, AutocompleteProps>(\n        (\n            {\n                value: outerValue,\n                onChange,\n                suggestions,\n                view,\n                size,\n                labelPlacement,\n                disabled,\n                readOnly,\n                label,\n                leftHelper,\n                contentLeft,\n                contentRight,\n                textBefore,\n                textAfter,\n                onScroll,\n                listMaxHeight,\n                listWidth,\n                portal,\n                filter,\n                onSuggestionSelect,\n                threshold = 2,\n                renderList,\n                renderListEnd,\n                onSearch,\n                ...rest\n            },\n            ref,\n        ) => {\n            const [focused, dispatchFocused] = useReducer(focusedReducer, null);\n            const [innerValue, setInnerValue] = useState<string | number>('');\n            const [isOpen, setIsOpen] = useState(false);\n\n            const listId = safeUseId();\n            const value = outerValue || innerValue;\n            const helperTextId = safeUseId();\n\n            const targetRef = useOutsideClick<HTMLDivElement>(() => {\n                setIsOpen(false);\n            });\n\n            const handleFocus = () => {\n                if (value.toString().length >= threshold) {\n                    setIsOpen(true);\n                }\n            };\n\n            const handleItemClick = (e: SuggestionItemType) => {\n                setInnerValue(e.label);\n\n                if (onSuggestionSelect) {\n                    onSuggestionSelect(e);\n                }\n\n                setIsOpen(false);\n            };\n\n            const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n                const currentValue = e.target.value;\n\n                setInnerValue(currentValue);\n\n                if (onChange) {\n                    onChange(e);\n                }\n\n                if (currentValue.toString().length >= threshold) {\n                    setIsOpen(true);\n                } else {\n                    setIsOpen(false);\n                }\n            };\n\n            const defaultFilterCallback = ({ label }: { label: string }) => {\n                return label.toLowerCase().includes(value.toString().toLowerCase());\n            };\n\n            const finalResults = suggestions?.filter(filter || defaultFilterCallback) || [];\n\n            const { onKeyDown } = useKeyNavigation({\n                isOpen,\n                setIsOpen,\n                focused,\n                dispatchFocused,\n                finalResults,\n                handleItemClick,\n            });\n\n            useDidMountEffect(() => {\n                dispatchFocused({ type: 'reset' });\n            }, [value]);\n\n            return (\n                <Root view={view} size={size} labelPlacement={labelPlacement} disabled={disabled} readOnly={readOnly}>\n                    <StyledPopover\n                        isOpen={isOpen}\n                        offset={[0, 0]}\n                        placement={getPlacements('bottom')}\n                        isFocusTrapped={false}\n                        usePortal={Boolean(portal)}\n                        frame={portal}\n                        target={\n                            <StyledTextField\n                                value={value}\n                                onChange={handleChange}\n                                onSearch={focused === null ? onSearch : undefined}\n                                ref={ref}\n                                size={size}\n                                view={view}\n                                labelPlacement={labelPlacement}\n                                disabled={disabled}\n                                readOnly={readOnly}\n                                label={label}\n                                contentLeft={contentLeft}\n                                contentRight={contentRight}\n                                textBefore={textBefore}\n                                textAfter={textAfter}\n                                onFocus={handleFocus}\n                                onKeyDown={onKeyDown}\n                                role=\"combobox\"\n                                aria-autocomplete=\"list\"\n                                aria-controls={listId}\n                                aria-expanded={isOpen}\n                                aria-activedescendant={`${listId}/${focused}`}\n                                aria-describedby={helperTextId}\n                                {...rest}\n                            />\n                        }\n                        preventOverflow={false}\n                        ref={targetRef}\n                        listWidth={listWidth}\n                    >\n                        {(renderList && renderList(finalResults)) ||\n                            (Boolean(finalResults.length) && (\n                                <Root\n                                    view={view}\n                                    size={size}\n                                    labelPlacement={labelPlacement}\n                                    disabled={disabled}\n                                    readOnly={readOnly}\n                                >\n                                    <Ul\n                                        id={listId}\n                                        role=\"listbox\"\n                                        aria-label={label}\n                                        onScroll={onScroll}\n                                        listMaxHeight={listMaxHeight}\n                                    >\n                                        {finalResults.map((suggestion, index) => (\n                                            <SuggestionItem\n                                                key={index}\n                                                item={suggestion}\n                                                onClick={handleItemClick}\n                                                id={`${listId}/${index}`}\n                                                focused={focused === index}\n                                            />\n                                        ))}\n\n                                        {renderListEnd && (\n                                            <InfiniteLoaderWrapper>{renderListEnd()}</InfiniteLoaderWrapper>\n                                        )}\n                                    </Ul>\n                                </Root>\n                            ))}\n                    </StyledPopover>\n\n                    {/* TODO: Дублируем хелпер для корректного позиционирования списка подсказок */}\n                    {leftHelper && (\n                        <LeftHelper id={helperTextId} disabled={disabled} readOnly={readOnly}>\n                            {leftHelper}\n                        </LeftHelper>\n                    )}\n                </Root>\n            );\n        },\n    );\n\nexport const autocompleteConfig = {\n    name: 'Autocomplete',\n    tag: 'div',\n    layout: autocompleteRoot,\n    base,\n    defaults: {\n        view: 'default',\n        size: 'l',\n        labelPlacement: 'outer',\n    },\n    variations: {\n        view: {\n            css: '',\n        },\n    },\n};\n"],"names":["autocompleteRoot","Root","forwardRef","_ref","ref","outerValue","value","onChange","suggestions","view","size","labelPlacement","disabled","readOnly","label","leftHelper","contentLeft","contentRight","textBefore","textAfter","onScroll","listMaxHeight","listWidth","portal","filter","onSuggestionSelect","_ref$threshold","threshold","renderList","renderListEnd","onSearch","rest","_objectWithoutProperties","_excluded","_useReducer","useReducer","focusedReducer","_useReducer2","_slicedToArray","focused","dispatchFocused","_useState","useState","_useState2","innerValue","setInnerValue","_useState3","_useState4","isOpen","setIsOpen","listId","safeUseId","helperTextId","targetRef","useOutsideClick","handleFocus","toString","length","handleItemClick","e","handleChange","currentValue","target","defaultFilterCallback","_ref2","toLowerCase","includes","finalResults","_useKeyNavigation","useKeyNavigation","onKeyDown","useDidMountEffect","type","React","createElement","StyledPopover","offset","placement","getPlacements","isFocusTrapped","usePortal","Boolean","frame","StyledTextField","_extends","undefined","onFocus","role","concat","preventOverflow","Ul","id","map","suggestion","index","SuggestionItem","key","item","onClick","InfiniteLoaderWrapper","LeftHelper","autocompleteConfig","name","tag","layout","base","defaults","variations","css"],"mappings":"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"}

package/cjs/components/Tabs/tokens.js

@@ -13,9 +13,7 @@ var classes = {
   tabRightContent: 'tab-item-right-content',
   tabLeftContent: 'tab-item-left-content',
   tabsHasLeftArrow: 'tabs-has-left-arrow',
-  tabsHasRightArrow: 'tabs-has-right-arrow',
-  tabsClipScroll: 'tabs-clip-scroll',
-  tabsClipShowAll: 'tabs-clip-show-all'
+  tabsHasRightArrow: 'tabs-has-right-arrow'
 };
 var tokens = {
   disabledOpacity: '--plasma-tabs-disabled-opacity',
@@ -32,7 +30,7 @@ var tokens = {
   outlineFocusColor: '--plasma-tabs-outline-focus-color',
   arrowColor: '--plasma-tabs-arrow-color',
   tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',
-  tabsBackgroundColor: '--plasma-tabs-background-color',
+  tabsBackgroundColor: '--plasma-tabs-backgorund-color',
   tabsBorderRadius: '--plasma-tabs-border-radius',
   tabsWidth: '--plasma-tabs-width',
   tabsHeight: '--plasma-tabs-height',
@@ -56,7 +54,6 @@ var tokens = {
   itemColor: '--plasma-tab-item-color',
   itemBackgroundColor: '--plasma-tab-item-background-color',
   itemColorHover: '--plasma-tab-item-color-hover',
-  itemColorActive: '--plasma-tab-item-color-active',
   itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',
   itemSelectedColor: '--plasma-tab-item-selected-color',
   itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',

package/cjs/components/Tabs/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../src/components/Tabs/tokens.ts"],"sourcesContent":["export const classes = {\n    selectedTabsItem: 'selected-tabs-item',\n    tabsPilled: 'tabs-pilled',\n    tabsGroupFilledBackground: 'tabs-group-filled-background',\n    tabsStretch: 'tabs-stretched',\n    tabItemDivider: 'tab-item-divider',\n    tabItemAnimated: 'tab-item-animated',\n    tabContent: 'tab-item-content',\n    tabRightContent: 'tab-item-right-content',\n    tabLeftContent: 'tab-item-left-content',\n    tabsHasLeftArrow: 'tabs-has-left-arrow',\n    tabsHasRightArrow: 'tabs-has-right-arrow',\n    tabsClipScroll: 'tabs-clip-scroll',\n    tabsClipShowAll: 'tabs-clip-show-all',\n};\n\nexport const tokens = {\n    disabledOpacity: '--plasma-tabs-disabled-opacity',\n    containerWidth: '--plasma-tabs-container-width',\n    cursor: '--plasma-tabs-cursor',\n    color: '--plasma-tabs-color',\n    colorHover: '--plasma-tabs-color-hover',\n\n    tabsDividerHeight: '--plasma-tabs-divider-height',\n    tabsDividerColor: '--plasma-tabs-divider-color',\n    tabsDividerBorderRadius: '--plasma-tabs-divider-border-radius',\n\n    itemSelectedDividerHeight: '--plasma-tab-item-selected-divider-height',\n    itemSelectedDividerColor: '--plasma-tab-item-selected-divider-color',\n    itemSelectedDividerColorHover: '--plasma-tab-item-selected-hover-divider-color',\n\n    outlineFocusColor: '--plasma-tabs-outline-focus-color',\n    arrowColor: '--plasma-tabs-arrow-color',\n    tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',\n\n    tabsBackgroundColor: '--plasma-tabs-background-color',\n    tabsBorderRadius: '--plasma-tabs-border-radius',\n    tabsWidth: '--plasma-tabs-width',\n    tabsHeight: '--plasma-tabs-height',\n    tabsPadding: '--plasma-tabs-padding',\n    tabsPilledBorderRadius: '--plasma-tabs-pilled-border-radius',\n\n    itemBorderRadius: '--plasma-tab-item-border-radius',\n    itemPilledBorderRadius: '--plasma-tab-item-pilled-border-radius',\n    itemWidth: '--plasma-tab-item-width',\n    itemHeight: '--plasma-tab-item-height',\n    itemPadding: '--plasma-tab-item-padding',\n    itemPaddingClear: '--plasma-tab-item-padding-clear',\n    itemPaddingPilled: '--plasma-tab-item-padding-pilled',\n    itemMarginLeft: '--plasma-tab-item-margin-left',\n    itemMarginLeftFilled: '--plasma-tab-item-margin-left-filled',\n    itemContentGap: '--plasma-tab-item-content-gap',\n\n    itemContentPadding: '--plasma-tab-item-content-padding',\n    itemContentPaddingClear: '--plasma-tab-item-content-padding-clear',\n\n    arrowInnerPadding: '--plasma-tab-arrow-inner-padding',\n    arrowOuterPadding: '--plasma-tab-arrow-outer-padding',\n    arrowViewOuterPadding: '--plasma-tab-arrow-view-outer-padding',\n\n    itemColor: '--plasma-tab-item-color',\n    itemBackgroundColor: '--plasma-tab-item-background-color',\n    itemColorHover: '--plasma-tab-item-color-hover',\n    itemColorActive: '--plasma-tab-item-color-active',\n    itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',\n\n    itemSelectedColor: '--plasma-tab-item-selected-color',\n    itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',\n    itemSelectedColorHover: '--plasma-tab-item-selected-color-hover',\n    itemSelectedBackgroundColorHover: '--plasma-tab-item-selected-background-color-hover',\n\n    itemBackgroundTransition: '--plasma-tab-item-background-transition',\n\n    additionalContentColor: '--plasma-tab-item-additional-content-color',\n    additionalContentHoverColor: '--plasma-tab-item-hover-additional-content-color',\n    additionalContentSelectedColor: '--plasma-tab-item-selected-additional-content-color',\n    additionalContentSelectedHoverColor: '--plasma-tab-item-selected-hover-additional-content-color',\n\n    fontFamily: '--plasma-tab-item-font-family',\n    fontSize: '--plasma-tab-item-font-size',\n    fontStyle: '--plasma-tab-item-font-style',\n    fontWeight: '--plasma-tab-item-font-weight',\n    letterSpacing: '--plasma-tab-item-letter-spacing',\n    lineHeight: '--plasma-tab-item-lineheight',\n};\n"],"names":["classes","selectedTabsItem","tabsPilled","tabsGroupFilledBackground","tabsStretch","tabItemDivider","tabItemAnimated","tabContent","tabRightContent","tabLeftContent","tabsHasLeftArrow","tabsHasRightArrow","tabsClipScroll","tabsClipShowAll","tokens","disabledOpacity","containerWidth","cursor","color","colorHover","tabsDividerHeight","tabsDividerColor","tabsDividerBorderRadius","itemSelectedDividerHeight","itemSelectedDividerColor","itemSelectedDividerColorHover","outlineFocusColor","arrowColor","tabsFilledBackgroundColor","tabsBackgroundColor","tabsBorderRadius","tabsWidth","tabsHeight","tabsPadding","tabsPilledBorderRadius","itemBorderRadius","itemPilledBorderRadius","itemWidth","itemHeight","itemPadding","itemPaddingClear","itemPaddingPilled","itemMarginLeft","itemMarginLeftFilled","itemContentGap","itemContentPadding","itemContentPaddingClear","arrowInnerPadding","arrowOuterPadding","arrowViewOuterPadding","itemColor","itemBackgroundColor","itemColorHover","itemColorActive","itemBackgroundColorHover","itemSelectedColor","itemSelectedBackgroundColor","itemSelectedColorHover","itemSelectedBackgroundColorHover","itemBackgroundTransition","additionalContentColor","additionalContentHoverColor","additionalContentSelectedColor","additionalContentSelectedHoverColor","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight"],"mappings":"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"}
+{"version":3,"file":"tokens.js","sources":["../../../src/components/Tabs/tokens.ts"],"sourcesContent":["export const classes = {\n    selectedTabsItem: 'selected-tabs-item',\n    tabsPilled: 'tabs-pilled',\n    tabsGroupFilledBackground: 'tabs-group-filled-background',\n    tabsStretch: 'tabs-stretched',\n    tabItemDivider: 'tab-item-divider',\n    tabItemAnimated: 'tab-item-animated',\n    tabContent: 'tab-item-content',\n    tabRightContent: 'tab-item-right-content',\n    tabLeftContent: 'tab-item-left-content',\n    tabsHasLeftArrow: 'tabs-has-left-arrow',\n    tabsHasRightArrow: 'tabs-has-right-arrow',\n};\n\nexport const tokens = {\n    disabledOpacity: '--plasma-tabs-disabled-opacity',\n    containerWidth: '--plasma-tabs-container-width',\n    cursor: '--plasma-tabs-cursor',\n    color: '--plasma-tabs-color',\n    colorHover: '--plasma-tabs-color-hover',\n\n    tabsDividerHeight: '--plasma-tabs-divider-height',\n    tabsDividerColor: '--plasma-tabs-divider-color',\n    tabsDividerBorderRadius: '--plasma-tabs-divider-border-radius',\n\n    itemSelectedDividerHeight: '--plasma-tab-item-selected-divider-height',\n    itemSelectedDividerColor: '--plasma-tab-item-selected-divider-color',\n    itemSelectedDividerColorHover: '--plasma-tab-item-selected-hover-divider-color',\n\n    outlineFocusColor: '--plasma-tabs-outline-focus-color',\n    arrowColor: '--plasma-tabs-arrow-color',\n    tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',\n\n    tabsBackgroundColor: '--plasma-tabs-backgorund-color',\n    tabsBorderRadius: '--plasma-tabs-border-radius',\n    tabsWidth: '--plasma-tabs-width',\n    tabsHeight: '--plasma-tabs-height',\n    tabsPadding: '--plasma-tabs-padding',\n    tabsPilledBorderRadius: '--plasma-tabs-pilled-border-radius',\n\n    itemBorderRadius: '--plasma-tab-item-border-radius',\n    itemPilledBorderRadius: '--plasma-tab-item-pilled-border-radius',\n    itemWidth: '--plasma-tab-item-width',\n    itemHeight: '--plasma-tab-item-height',\n    itemPadding: '--plasma-tab-item-padding',\n    itemPaddingClear: '--plasma-tab-item-padding-clear',\n    itemPaddingPilled: '--plasma-tab-item-padding-pilled',\n    itemMarginLeft: '--plasma-tab-item-margin-left',\n    itemMarginLeftFilled: '--plasma-tab-item-margin-left-filled',\n    itemContentGap: '--plasma-tab-item-content-gap',\n\n    itemContentPadding: '--plasma-tab-item-content-padding',\n    itemContentPaddingClear: '--plasma-tab-item-content-padding-clear',\n\n    arrowInnerPadding: '--plasma-tab-arrow-inner-padding',\n    arrowOuterPadding: '--plasma-tab-arrow-outer-padding',\n    arrowViewOuterPadding: '--plasma-tab-arrow-view-outer-padding',\n\n    itemColor: '--plasma-tab-item-color',\n    itemBackgroundColor: '--plasma-tab-item-background-color',\n    itemColorHover: '--plasma-tab-item-color-hover',\n    itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',\n\n    itemSelectedColor: '--plasma-tab-item-selected-color',\n    itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',\n    itemSelectedColorHover: '--plasma-tab-item-selected-color-hover',\n    itemSelectedBackgroundColorHover: '--plasma-tab-item-selected-background-color-hover',\n\n    itemBackgroundTransition: '--plasma-tab-item-background-transition',\n\n    additionalContentColor: '--plasma-tab-item-additional-content-color',\n    additionalContentHoverColor: '--plasma-tab-item-hover-additional-content-color',\n    additionalContentSelectedColor: '--plasma-tab-item-selected-additional-content-color',\n    additionalContentSelectedHoverColor: '--plasma-tab-item-selected-hover-additional-content-color',\n\n    fontFamily: '--plasma-tab-item-font-family',\n    fontSize: '--plasma-tab-item-font-size',\n    fontStyle: '--plasma-tab-item-font-style',\n    fontWeight: '--plasma-tab-item-font-weight',\n    letterSpacing: '--plasma-tab-item-letter-spacing',\n    lineHeight: '--plasma-tab-item-lineheight',\n};\n"],"names":["classes","selectedTabsItem","tabsPilled","tabsGroupFilledBackground","tabsStretch","tabItemDivider","tabItemAnimated","tabContent","tabRightContent","tabLeftContent","tabsHasLeftArrow","tabsHasRightArrow","tokens","disabledOpacity","containerWidth","cursor","color","colorHover","tabsDividerHeight","tabsDividerColor","tabsDividerBorderRadius","itemSelectedDividerHeight","itemSelectedDividerColor","itemSelectedDividerColorHover","outlineFocusColor","arrowColor","tabsFilledBackgroundColor","tabsBackgroundColor","tabsBorderRadius","tabsWidth","tabsHeight","tabsPadding","tabsPilledBorderRadius","itemBorderRadius","itemPilledBorderRadius","itemWidth","itemHeight","itemPadding","itemPaddingClear","itemPaddingPilled","itemMarginLeft","itemMarginLeftFilled","itemContentGap","itemContentPadding","itemContentPaddingClear","arrowInnerPadding","arrowOuterPadding","arrowViewOuterPadding","itemColor","itemBackgroundColor","itemColorHover","itemBackgroundColorHover","itemSelectedColor","itemSelectedBackgroundColor","itemSelectedColorHover","itemSelectedBackgroundColorHover","itemBackgroundTransition","additionalContentColor","additionalContentHoverColor","additionalContentSelectedColor","additionalContentSelectedHoverColor","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight"],"mappings":"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"}

package/cjs/components/Tabs/ui/TabItem/TabItem.css

@@ -1,4 +1,4 @@
-.base_7pcxtm_b5uyjxl__b67ab7ce{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);margin-left:var(--plasma-tab-item-margin-left-filled,var(--plasma-tab-item-margin-left));}.base_7pcxtm_b5uyjxl__b67ab7ce:hover{color:var(--plasma-tab-item-color-hover);background-color:var(--plasma-tab-item-background-color-hover);}.base_7pcxtm_b5uyjxl__b67ab7ce:hover .base_7pcxtm_r265xop__b67ab7ce{color:var(--plasma-tab-item-hover-additional-content-color);}.base_7pcxtm_b5uyjxl__b67ab7ce:active{color:var(--plasma-tab-item-color-active);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_tabItemAnimated__b67ab7ce{-webkit-transition:var(--plasma-tab-item-background-transition);transition:var(--plasma-tab-item-background-transition);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce:hover{color:var(--plasma-tab-item-selected-color-hover);background-color:var(--plasma-tab-item-selected-background-color-hover);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce:hover::after{background:var(--plasma-tab-item-selected-hover-divider-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce .base_7pcxtm_r265xop__b67ab7ce{color:var(--plasma-tab-item-selected-additional-content-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce .base_7pcxtm_r265xop__b67ab7ce:hover{color:var(--plasma-tab-item-selected-hover-additional-content-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(--plasma-tab-item-selected-divider-color);height:var(--plasma-tab-item-selected-divider-height);border-radius:1px;}
+.base_q8xs21_b5uyjxl__66eab5c4{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);margin-left:var(--plasma-tab-item-margin-left-filled,var(--plasma-tab-item-margin-left));}.base_q8xs21_b5uyjxl__66eab5c4:hover{color:var(--plasma-tab-item-color-hover);background-color:var(--plasma-tab-item-background-color-hover);}.base_q8xs21_b5uyjxl__66eab5c4:hover .base_q8xs21_r265xop__66eab5c4{color:var(--plasma-tab-item-hover-additional-content-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_tabItemAnimated__66eab5c4{-webkit-transition:var(--plasma-tab-item-background-transition);transition:var(--plasma-tab-item-background-transition);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4:hover{color:var(--plasma-tab-item-selected-color-hover);background-color:var(--plasma-tab-item-selected-background-color-hover);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4:hover::after{background:var(--plasma-tab-item-selected-hover-divider-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4 .base_q8xs21_r265xop__66eab5c4{color:var(--plasma-tab-item-selected-additional-content-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4 .base_q8xs21_r265xop__66eab5c4:hover{color:var(--plasma-tab-item-selected-hover-additional-content-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(--plasma-tab-item-selected-divider-color);height:var(--plasma-tab-item-selected-divider-height);border-radius:1px;}
 
 .base_1d7e3fp_bvmpqz9__8fd7c45d{font-family:var(--plasma-tab-item-font-family);font-size:var(--plasma-tab-item-font-size);font-style:var(--plasma-tab-item-font-style);font-weight:var(--plasma-tab-item-font-weight);-webkit-letter-spacing:var(--plasma-tab-item-letter-spacing);-moz-letter-spacing:var(--plasma-tab-item-letter-spacing);-ms-letter-spacing:var(--plasma-tab-item-letter-spacing);letter-spacing:var(--plasma-tab-item-letter-spacing);line-height:var(--plasma-tab-item-lineheight);--plasma_private-outline-radius:var(--plasma-tab-item-border-radius);border-radius:var(--plasma-tab-item-border-radius);width:var(--plasma-tab-item-width);height:var(--plasma-tab-item-height);}
 

package/cjs/components/Tabs/ui/TabItem/TabItem.js

@@ -14,7 +14,7 @@ var base$3 = require('./variations/_pilled/base.js');
 var base$2 = require('./variations/_disabled/base.js');
 var TabItem_styles = require('./TabItem.styles.js');
 
-var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
+var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className"];
 var tabItemRoot = function tabItemRoot(Root) {
   return /*#__PURE__*/React.forwardRef(function (props, outerRef) {
     var size = props.size,
@@ -34,7 +34,6 @@ var tabItemRoot = function tabItemRoot(Root) {
       itemIndex = props.itemIndex,
       tabIndex = props.tabIndex,
       className = props.className,
-      onClick = props.onClick,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
     var innerRef = React.useRef(null);
     var ref = plasmaCore.useForkRef(outerRef, innerRef);
@@ -76,16 +75,6 @@ var tabItemRoot = function tabItemRoot(Root) {
       onIndexChange === null || onIndexChange === void 0 || onIndexChange(focusIndex);
       refs.setCurrent(focusIndex);
     }, [refs, innerRef, onIndexChange, disabled]);
-    var handleClick = function handleClick(event) {
-      event.currentTarget.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest'
-      });
-      if (!onClick) {
-        return;
-      }
-      onClick(event);
-    };
     return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
       ref: ref,
       disabled: disabled,
@@ -95,8 +84,7 @@ var tabItemRoot = function tabItemRoot(Root) {
       size: size,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: index.cx(pilledClass, selectedClass, animatedClass, className),
-      onClick: handleClick
+      className: index.cx(pilledClass, selectedClass, animatedClass, className)
     }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(TabItem_styles.LeftContent, {
       className: tokens.classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/React.createElement(TabItem_styles.StyledContent, {

package/cjs/components/Tabs/ui/TabItem/TabItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.js","sources":["../../../../../src/components/Tabs/ui/TabItem/TabItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { ComponentConfig, RootProps } from '../../../../engines';\nimport { classes } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { TabsContext } from '../../TabsContext';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { TabItemProps } from './TabItem.types';\nimport { LeftContent, RightContent, StyledContent, base } from './TabItem.styles';\n\nexport const tabItemRoot = (Root: RootProps<HTMLDivElement, TabItemProps>) =>\n    forwardRef<HTMLDivElement, TabItemProps>((props, outerRef) => {\n        const {\n            size,\n            view,\n            isActive,\n            selected,\n            disabled = false,\n            pilled = false,\n            children,\n            contentLeft,\n            contentRight,\n            animated = true,\n            onIndexChange,\n            itemIndex,\n            tabIndex,\n            className,\n            onClick,\n            ...rest\n        } = props;\n\n        const innerRef = useRef<HTMLDivElement>(null);\n        const ref = useForkRef(outerRef, innerRef);\n        const refs = useContext(TabsContext);\n\n        const role = 'tab';\n\n        const pilledAttr = view !== 'clear' && pilled;\n        const animatedClass = animated ? classes.tabItemAnimated : undefined;\n        const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n        const selectedClass = isActive || selected ? classes.selectedTabsItem : undefined;\n        const hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;\n        const navigationTabIndex = !disabled && refs?.current === itemIndex ? 0 : -1;\n\n        useEffect(() => {\n            if (!refs) {\n                return;\n            }\n\n            refs.register(innerRef);\n\n            return () => refs.unregister(innerRef);\n        }, [refs]);\n\n        const onItemFocus = useCallback<React.FocusEventHandler>(\n            (event) => {\n                if (!hasKeyNavigation && innerRef?.current) {\n                    innerRef.current.scrollTo({\n                        top: 0,\n                        left: innerRef.current.offsetLeft,\n                        behavior: 'smooth',\n                    });\n\n                    return;\n                }\n\n                if (disabled || !refs) {\n                    return;\n                }\n\n                const focusIndex = refs.items.findIndex((itemRef) => itemRef.current === event.target);\n\n                if (focusIndex === refs.current) {\n                    return;\n                }\n\n                onIndexChange?.(focusIndex);\n                refs.setCurrent(focusIndex);\n            },\n            [refs, innerRef, onIndexChange, disabled],\n        );\n\n        const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.currentTarget.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n\n            if (!onClick) {\n                return;\n            }\n\n            onClick(event);\n        };\n\n        return (\n            <Root\n                ref={ref}\n                disabled={disabled}\n                pilled={pilled}\n                role={role}\n                view={view}\n                size={size}\n                onFocus={onItemFocus}\n                tabIndex={hasKeyNavigation ? navigationTabIndex : tabIndex}\n                className={cx(pilledClass, selectedClass, animatedClass, className)}\n                onClick={handleClick}\n                {...rest}\n            >\n                <>\n                    {contentLeft && <LeftContent className={classes.tabLeftContent}>{contentLeft}</LeftContent>}\n                    <StyledContent className={classes.tabContent}>{children}</StyledContent>\n                    {contentRight && <RightContent className={classes.tabRightContent}>{contentRight}</RightContent>}\n                </>\n            </Root>\n        );\n    });\n\nexport const tabItemConfig: ComponentConfig = {\n    name: 'TabItem',\n    tag: 'button',\n    layout: tabItemRoot,\n    base,\n    variations: {\n        size: {\n            css: sizeCSS,\n        },\n        view: {\n            css: viewCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n        pilled: {\n            css: pilledCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n    },\n};\n"],"names":["tabItemRoot","Root","forwardRef","props","outerRef","size","view","isActive","selected","_props$disabled","disabled","_props$pilled","pilled","children","contentLeft","contentRight","_props$animated","animated","onIndexChange","itemIndex","tabIndex","className","onClick","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","refs","useContext","TabsContext","role","pilledAttr","animatedClass","classes","tabItemAnimated","undefined","pilledClass","tabsPilled","selectedClass","selectedTabsItem","hasKeyNavigation","navigationTabIndex","current","useEffect","register","unregister","onItemFocus","useCallback","event","scrollTo","top","left","offsetLeft","behavior","focusIndex","items","findIndex","itemRef","target","setCurrent","handleClick","currentTarget","scrollIntoView","block","inline","React","createElement","_extends","onFocus","cx","Fragment","LeftContent","tabLeftContent","StyledContent","tabContent","RightContent","tabRightContent","tabItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"TabItem.js","sources":["../../../../../src/components/Tabs/ui/TabItem/TabItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { ComponentConfig, RootProps } from '../../../../engines';\nimport { classes } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { TabsContext } from '../../TabsContext';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { TabItemProps } from './TabItem.types';\nimport { LeftContent, RightContent, StyledContent, base } from './TabItem.styles';\n\nexport const tabItemRoot = (Root: RootProps<HTMLDivElement, TabItemProps>) =>\n    forwardRef<HTMLDivElement, TabItemProps>((props, outerRef) => {\n        const {\n            size,\n            view,\n            isActive,\n            selected,\n            disabled = false,\n            pilled = false,\n            children,\n            contentLeft,\n            contentRight,\n            animated = true,\n            onIndexChange,\n            itemIndex,\n            tabIndex,\n            className,\n            ...rest\n        } = props;\n\n        const innerRef = useRef<HTMLDivElement>(null);\n        const ref = useForkRef(outerRef, innerRef);\n        const refs = useContext(TabsContext);\n\n        const role = 'tab';\n\n        const pilledAttr = view !== 'clear' && pilled;\n        const animatedClass = animated ? classes.tabItemAnimated : undefined;\n        const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n        const selectedClass = isActive || selected ? classes.selectedTabsItem : undefined;\n        const hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;\n        const navigationTabIndex = !disabled && refs?.current === itemIndex ? 0 : -1;\n\n        useEffect(() => {\n            if (!refs) {\n                return;\n            }\n\n            refs.register(innerRef);\n\n            return () => refs.unregister(innerRef);\n        }, [refs]);\n\n        const onItemFocus = useCallback<React.FocusEventHandler>(\n            (event) => {\n                if (!hasKeyNavigation && innerRef?.current) {\n                    innerRef.current.scrollTo({\n                        top: 0,\n                        left: innerRef.current.offsetLeft,\n                        behavior: 'smooth',\n                    });\n\n                    return;\n                }\n\n                if (disabled || !refs) {\n                    return;\n                }\n\n                const focusIndex = refs.items.findIndex((itemRef) => itemRef.current === event.target);\n\n                if (focusIndex === refs.current) {\n                    return;\n                }\n\n                onIndexChange?.(focusIndex);\n                refs.setCurrent(focusIndex);\n            },\n            [refs, innerRef, onIndexChange, disabled],\n        );\n\n        return (\n            <Root\n                ref={ref}\n                disabled={disabled}\n                pilled={pilled}\n                role={role}\n                view={view}\n                size={size}\n                onFocus={onItemFocus}\n                tabIndex={hasKeyNavigation ? navigationTabIndex : tabIndex}\n                className={cx(pilledClass, selectedClass, animatedClass, className)}\n                {...rest}\n            >\n                <>\n                    {contentLeft && <LeftContent className={classes.tabLeftContent}>{contentLeft}</LeftContent>}\n                    <StyledContent className={classes.tabContent}>{children}</StyledContent>\n                    {contentRight && <RightContent className={classes.tabRightContent}>{contentRight}</RightContent>}\n                </>\n            </Root>\n        );\n    });\n\nexport const tabItemConfig: ComponentConfig = {\n    name: 'TabItem',\n    tag: 'button',\n    layout: tabItemRoot,\n    base,\n    variations: {\n        size: {\n            css: sizeCSS,\n        },\n        view: {\n            css: viewCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n        pilled: {\n            css: pilledCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n    },\n};\n"],"names":["tabItemRoot","Root","forwardRef","props","outerRef","size","view","isActive","selected","_props$disabled","disabled","_props$pilled","pilled","children","contentLeft","contentRight","_props$animated","animated","onIndexChange","itemIndex","tabIndex","className","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","refs","useContext","TabsContext","role","pilledAttr","animatedClass","classes","tabItemAnimated","undefined","pilledClass","tabsPilled","selectedClass","selectedTabsItem","hasKeyNavigation","navigationTabIndex","current","useEffect","register","unregister","onItemFocus","useCallback","event","scrollTo","top","left","offsetLeft","behavior","focusIndex","items","findIndex","itemRef","target","setCurrent","React","createElement","_extends","onFocus","cx","Fragment","LeftContent","tabLeftContent","StyledContent","tabContent","RightContent","tabRightContent","tabItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":";;;;;;;;;;;;;;;;;IAeaA,WAAW,GAAG,SAAdA,WAAWA,CAAIC,IAA6C,EAAA;AAAA,EAAA,oBACrEC,gBAAU,CAA+B,UAACC,KAAK,EAAEC,QAAQ,EAAK;AAC1D,IAAA,IACIC,IAAI,GAeJF,KAAK,CAfLE,IAAI;MACJC,IAAI,GAcJH,KAAK,CAdLG,IAAI;MACJC,QAAQ,GAaRJ,KAAK,CAbLI,QAAQ;MACRC,QAAQ,GAYRL,KAAK,CAZLK,QAAQ;MAAAC,eAAA,GAYRN,KAAK,CAXLO,QAAQ;AAARA,MAAAA,QAAQ,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA;MAAAE,aAAA,GAWhBR,KAAK,CAVLS,MAAM;AAANA,MAAAA,MAAM,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,aAAA;MACdE,QAAQ,GASRV,KAAK,CATLU,QAAQ;MACRC,WAAW,GAQXX,KAAK,CARLW,WAAW;MACXC,YAAY,GAOZZ,KAAK,CAPLY,YAAY;MAAAC,eAAA,GAOZb,KAAK,CANLc,QAAQ;AAARA,MAAAA,QAAQ,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,eAAA;MACfE,aAAa,GAKbf,KAAK,CALLe,aAAa;MACbC,SAAS,GAIThB,KAAK,CAJLgB,SAAS;MACTC,QAAQ,GAGRjB,KAAK,CAHLiB,QAAQ;MACRC,SAAS,GAETlB,KAAK,CAFLkB,SAAS;AACNC,MAAAA,IAAI,GAAAC,iDAAA,CACPpB,KAAK,EAAAqB,SAAA,CAAA,CAAA;AAET,IAAA,IAAMC,QAAQ,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAA;AAC7C,IAAA,IAAMC,GAAG,GAAGC,qBAAU,CAACxB,QAAQ,EAAEqB,QAAQ,CAAC,CAAA;AAC1C,IAAA,IAAMI,IAAI,GAAGC,gBAAU,CAACC,uBAAW,CAAC,CAAA;IAEpC,IAAMC,IAAI,GAAG,KAAK,CAAA;AAElB,IAAA,IAAMC,UAAU,GAAG3B,IAAI,KAAK,OAAO,IAAIM,MAAM,CAAA;IAC7C,IAAMsB,aAAa,GAAGjB,QAAQ,GAAGkB,cAAO,CAACC,eAAe,GAAGC,SAAS,CAAA;IACpE,IAAMC,WAAW,GAAGL,UAAU,GAAGE,cAAO,CAACI,UAAU,GAAGF,SAAS,CAAA;IAC/D,IAAMG,aAAa,GAAGjC,QAAQ,IAAIC,QAAQ,GAAG2B,cAAO,CAACM,gBAAgB,GAAGJ,SAAS,CAAA;IACjF,IAAMK,gBAAgB,GAAGvB,SAAS,KAAKkB,SAAS,IAAInB,aAAa,KAAKmB,SAAS,CAAA;AAC/E,IAAA,IAAMM,kBAAkB,GAAG,CAACjC,QAAQ,IAAI,CAAAmB,IAAI,KAAJA,IAAAA,IAAAA,IAAI,uBAAJA,IAAI,CAAEe,OAAO,MAAKzB,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AAE5E0B,IAAAA,eAAS,CAAC,YAAM;MACZ,IAAI,CAAChB,IAAI,EAAE;AACP,QAAA,OAAA;AACJ,OAAA;AAEAA,MAAAA,IAAI,CAACiB,QAAQ,CAACrB,QAAQ,CAAC,CAAA;MAEvB,OAAO,YAAA;AAAA,QAAA,OAAMI,IAAI,CAACkB,UAAU,CAACtB,QAAQ,CAAC,CAAA;AAAA,OAAA,CAAA;AAC1C,KAAC,EAAE,CAACI,IAAI,CAAC,CAAC,CAAA;AAEV,IAAA,IAAMmB,WAAW,GAAGC,iBAAW,CAC3B,UAACC,KAAK,EAAK;MACP,IAAI,CAACR,gBAAgB,IAAIjB,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,IAAAA,QAAQ,CAAEmB,OAAO,EAAE;AACxCnB,QAAAA,QAAQ,CAACmB,OAAO,CAACO,QAAQ,CAAC;AACtBC,UAAAA,GAAG,EAAE,CAAC;AACNC,UAAAA,IAAI,EAAE5B,QAAQ,CAACmB,OAAO,CAACU,UAAU;AACjCC,UAAAA,QAAQ,EAAE,QAAA;AACd,SAAC,CAAC,CAAA;AAEF,QAAA,OAAA;AACJ,OAAA;AAEA,MAAA,IAAI7C,QAAQ,IAAI,CAACmB,IAAI,EAAE;AACnB,QAAA,OAAA;AACJ,OAAA;MAEA,IAAM2B,UAAU,GAAG3B,IAAI,CAAC4B,KAAK,CAACC,SAAS,CAAC,UAACC,OAAO,EAAA;AAAA,QAAA,OAAKA,OAAO,CAACf,OAAO,KAAKM,KAAK,CAACU,MAAM,CAAA;OAAC,CAAA,CAAA;AAEtF,MAAA,IAAIJ,UAAU,KAAK3B,IAAI,CAACe,OAAO,EAAE;AAC7B,QAAA,OAAA;AACJ,OAAA;AAEA1B,MAAAA,aAAa,aAAbA,aAAa,KAAA,KAAA,CAAA,IAAbA,aAAa,CAAGsC,UAAU,CAAC,CAAA;AAC3B3B,MAAAA,IAAI,CAACgC,UAAU,CAACL,UAAU,CAAC,CAAA;KAC9B,EACD,CAAC3B,IAAI,EAAEJ,QAAQ,EAAEP,aAAa,EAAER,QAAQ,CAC5C,CAAC,CAAA;AAED,IAAA,oBACIoD,KAAA,CAAAC,aAAA,CAAC9D,IAAI,EAAA+D,iCAAA,CAAA;AACDrC,MAAAA,GAAG,EAAEA,GAAI;AACTjB,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,MAAM,EAAEA,MAAO;AACfoB,MAAAA,IAAI,EAAEA,IAAK;AACX1B,MAAAA,IAAI,EAAEA,IAAK;AACXD,MAAAA,IAAI,EAAEA,IAAK;AACX4D,MAAAA,OAAO,EAAEjB,WAAY;AACrB5B,MAAAA,QAAQ,EAAEsB,gBAAgB,GAAGC,kBAAkB,GAAGvB,QAAS;MAC3DC,SAAS,EAAE6C,QAAE,CAAC5B,WAAW,EAAEE,aAAa,EAAEN,aAAa,EAAEb,SAAS,CAAA;AAAE,KAAA,EAChEC,IAAI,CAERwC,eAAAA,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAK,QAAA,EAAA,IAAA,EACKrD,WAAW,iBAAIgD,KAAA,CAAAC,aAAA,CAACK,0BAAW,EAAA;MAAC/C,SAAS,EAAEc,cAAO,CAACkC,cAAAA;AAAe,KAAA,EAAEvD,WAAyB,CAAC,eAC3FgD,KAAA,CAAAC,aAAA,CAACO,4BAAa,EAAA;MAACjD,SAAS,EAAEc,cAAO,CAACoC,UAAAA;KAAa1D,EAAAA,QAAwB,CAAC,EACvEE,YAAY,iBAAI+C,KAAA,CAAAC,aAAA,CAACS,2BAAY,EAAA;MAACnD,SAAS,EAAEc,cAAO,CAACsC,eAAAA;KAAkB1D,EAAAA,YAA2B,CACjG,CACA,CAAC,CAAA;AAEf,GAAC,CAAC,CAAA;AAAA,EAAA;AAEC,IAAM2D,aAA8B,GAAG;AAC1CC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,GAAG,EAAE,QAAQ;AACbC,EAAAA,MAAM,EAAE7E,WAAW;AACnB8E,EAAAA,IAAI,EAAJA,mBAAI;AACJC,EAAAA,UAAU,EAAE;AACR1E,IAAAA,IAAI,EAAE;AACF2E,MAAAA,GAAG,EAAEC,SAAAA;KACR;AACD3E,IAAAA,IAAI,EAAE;AACF0E,MAAAA,GAAG,EAAEE,WAAAA;KACR;AACDxE,IAAAA,QAAQ,EAAE;AACNsE,MAAAA,GAAG,EAAEG,WAAW;AAChBC,MAAAA,KAAK,EAAE,IAAA;KACV;AACDxE,IAAAA,MAAM,EAAE;AACJoE,MAAAA,GAAG,EAAEK,WAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNhF,IAAAA,IAAI,EAAE,SAAA;AACV,GAAA;AACJ;;;;;"}

package/cjs/components/Tabs/ui/TabItem/variations/_view/base.js

@@ -1,4 +1,4 @@
-import './base_7pcxtm.css';
+import './base_q8xs21.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/components/Tabs/ui/TabItem/variations/_view/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Tabs/ui/TabItem/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\nimport { RightContent } from '../../TabItem.styles';\n\nexport const base = css`\n    color: var(${tokens.itemColor});\n    background-color: var(${tokens.itemBackgroundColor});\n\n    margin-left: var(${tokens.itemMarginLeftFilled}, var(${tokens.itemMarginLeft}));\n\n    &:hover {\n        color: var(${tokens.itemColorHover});\n        background-color: var(${tokens.itemBackgroundColorHover});\n\n        ${RightContent} {\n            color: var(${tokens.additionalContentHoverColor});\n        }\n    }\n\n    &:active {\n        color: var(${tokens.itemColorActive});\n    }\n\n    &.${String(classes.tabItemAnimated)} {\n        transition: var(${tokens.itemBackgroundTransition});\n    }\n\n    &.${String(classes.selectedTabsItem)} {\n        color: var(${tokens.itemSelectedColor});\n        background-color: var(${tokens.itemSelectedBackgroundColor});\n\n        &:hover {\n            color: var(${tokens.itemSelectedColorHover});\n            background-color: var(${tokens.itemSelectedBackgroundColorHover});\n\n            &::after {\n                background: var(${tokens.itemSelectedDividerColorHover});\n            }\n        }\n\n        ${RightContent} {\n            color: var(${tokens.additionalContentSelectedColor});\n\n            &:hover {\n                color: var(${tokens.additionalContentSelectedHoverColor});\n            }\n        }\n\n        &::after {\n            content: '';\n            position: absolute;\n            bottom: 0px;\n            left: 0;\n            right: 0;\n            background: var(${tokens.itemSelectedDividerColor});\n            height: var(${tokens.itemSelectedDividerHeight});\n            border-radius: 1px;\n        }\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,IAAMA,IAAI,GAuDhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Tabs/ui/TabItem/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\nimport { RightContent } from '../../TabItem.styles';\n\nexport const base = css`\n    color: var(${tokens.itemColor});\n    background-color: var(${tokens.itemBackgroundColor});\n\n    margin-left: var(${tokens.itemMarginLeftFilled}, var(${tokens.itemMarginLeft}));\n\n    &:hover {\n        color: var(${tokens.itemColorHover});\n        background-color: var(${tokens.itemBackgroundColorHover});\n\n        ${RightContent} {\n            color: var(${tokens.additionalContentHoverColor});\n        }\n    }\n\n    &.${String(classes.tabItemAnimated)} {\n        transition: var(${tokens.itemBackgroundTransition});\n    }\n\n    &.${String(classes.selectedTabsItem)} {\n        color: var(${tokens.itemSelectedColor});\n        background-color: var(${tokens.itemSelectedBackgroundColor});\n\n        &:hover {\n            color: var(${tokens.itemSelectedColorHover});\n            background-color: var(${tokens.itemSelectedBackgroundColorHover});\n\n            &::after {\n                background: var(${tokens.itemSelectedDividerColorHover});\n            }\n        }\n\n        ${RightContent} {\n            color: var(${tokens.additionalContentSelectedColor});\n\n            &:hover {\n                color: var(${tokens.additionalContentSelectedHoverColor});\n            }\n        }\n\n        &::after {\n            content: '';\n            position: absolute;\n            bottom: 0px;\n            left: 0;\n            right: 0;\n            background: var(${tokens.itemSelectedDividerColor});\n            height: var(${tokens.itemSelectedDividerHeight});\n            border-radius: 1px;\n        }\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,IAAMA,IAAI,GAmDhB;;;;"}

package/cjs/components/Tabs/ui/TabItem/variations/_view/base_q8xs21.css

@@ -0,0 +1 @@
+.b5uyjxl{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);margin-left:var(--plasma-tab-item-margin-left-filled,var(--plasma-tab-item-margin-left));}.b5uyjxl:hover{color:var(--plasma-tab-item-color-hover);background-color:var(--plasma-tab-item-background-color-hover);}.b5uyjxl:hover .r265xop{color:var(--plasma-tab-item-hover-additional-content-color);}.b5uyjxl.tab-item-animated{-webkit-transition:var(--plasma-tab-item-background-transition);transition:var(--plasma-tab-item-background-transition);}.b5uyjxl.selected-tabs-item{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}.b5uyjxl.selected-tabs-item:hover{color:var(--plasma-tab-item-selected-color-hover);background-color:var(--plasma-tab-item-selected-background-color-hover);}.b5uyjxl.selected-tabs-item:hover::after{background:var(--plasma-tab-item-selected-hover-divider-color);}.b5uyjxl.selected-tabs-item .r265xop{color:var(--plasma-tab-item-selected-additional-content-color);}.b5uyjxl.selected-tabs-item .r265xop:hover{color:var(--plasma-tab-item-selected-hover-additional-content-color);}.b5uyjxl.selected-tabs-item::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(--plasma-tab-item-selected-divider-color);height:var(--plasma-tab-item-selected-divider-height);border-radius:1px;}

package/cjs/components/Tabs/ui/Tabs/Tabs.css

@@ -2,15 +2,15 @@
 
 .base_iw773q_b12fajph__34b9af5a{width:var(--plasma-tabs-width);height:var(--plasma-tabs-height);--plasma_private-outline-radius:var(--plasma-tabs-border-radius);border-radius:var(--plasma-tabs-border-radius);}
 
-.base_aij3sf_b1mh5p08__d6b8b2c3{background-color:var(--plasma-tabs-background-color);}.base_aij3sf_b1mh5p08__d6b8b2c3::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(--plasma-tabs-divider-color);height:var(--plasma-tabs-divider-height);border-radius:var(--plasma-tabs-divider-border-radius);}.base_aij3sf_b1mh5p08__d6b8b2c3.base_aij3sf_tabsHasLeftArrow__d6b8b2c3::after{left:1.5rem;}.base_aij3sf_b1mh5p08__d6b8b2c3.base_aij3sf_tabsHasRightArrow__d6b8b2c3::after{right:1.5rem;}
+.base_4xkt26_b1mh5p08__45365c21{background-color:var(--plasma-tabs-backgorund-color);}.base_4xkt26_b1mh5p08__45365c21::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(--plasma-tabs-divider-color);height:var(--plasma-tabs-divider-height);border-radius:var(--plasma-tabs-divider-border-radius);}.base_4xkt26_b1mh5p08__45365c21.base_4xkt26_tabsHasLeftArrow__45365c21::after{left:1.5rem;}.base_4xkt26_b1mh5p08__45365c21.base_4xkt26_tabsHasRightArrow__45365c21::after{right:1.5rem;}
 
 .base_1i8tr9c_b1lwejhw__63d2542b{opacity:var(--plasma-tabs-disabled-opacity);}
 
 .base_1ujjl52_b1aa8x3y__dbe55f93.base_1ujjl52_tabsPilled__dbe55f93{--plasma_private-outline-radius:var(--plasma-tabs-pilled-border-radius);border-radius:var(--plasma-tabs-pilled-border-radius);}
 
-.base_1c7lnrm_be36ynn__a2a07cea.base_1c7lnrm_tabsStretched__a2a07cea{width:100%;}.base_1c7lnrm_be36ynn__a2a07cea.base_1c7lnrm_tabsStretched__a2a07cea .base_1c7lnrm_sh5e38r__a2a07cea,.base_1c7lnrm_be36ynn__a2a07cea.base_1c7lnrm_tabsStretched__a2a07cea .base_1c7lnrm_s8qwlso__a2a07cea,.base_1c7lnrm_be36ynn__a2a07cea.base_1c7lnrm_tabsStretched__a2a07cea .base_1c7lnrm_s8qwlso__a2a07cea > button{width:100%;margin-left:0;}
+.base_176tz0n_be36ynn__f15737ac.base_176tz0n_tabsStretched__f15737ac{width:100%;}.base_176tz0n_be36ynn__f15737ac.base_176tz0n_tabsStretched__f15737ac .base_176tz0n_sh5e38r__f15737ac,.base_176tz0n_be36ynn__f15737ac.base_176tz0n_tabsStretched__f15737ac .base_176tz0n_s8qwlso__f15737ac,.base_176tz0n_be36ynn__f15737ac.base_176tz0n_tabsStretched__f15737ac .base_176tz0n_s8qwlso__f15737ac > button{width:100%;}
 
-.Tabs_styles_z4dnzh_bu8v92r__3f447f56{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0.125rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}
-.Tabs_styles_z4dnzh_s8qwlso__3f447f56{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.Tabs_styles_z4dnzh_sh5e38r__3f447f56{margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Tabs_styles_z4dnzh_sh5e38r__3f447f56.Tabs_styles_z4dnzh_tabsClipScroll__3f447f56{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.Tabs_styles_z4dnzh_sh5e38r__3f447f56.Tabs_styles_z4dnzh_tabsClipScroll__3f447f56::-webkit-scrollbar{display:none;}.Tabs_styles_z4dnzh_sh5e38r__3f447f56.Tabs_styles_z4dnzh_tabsClipShowAll__3f447f56{overflow:visible;}
-.Tabs_styles_z4dnzh_s1ekwj92__3f447f56{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;--plasma_private-outer-padding:var(--s1ekwj92-0);padding-right:var(--s1ekwj92-1);padding-left:var(--s1ekwj92-2);}.Tabs_styles_z4dnzh_s1ekwj92__3f447f56::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Tabs_styles_z4dnzh_s1ekwj92__3f447f56.Tabs_styles_z4dnzh_focusVisible__3f447f56:focus::before,.Tabs_styles_z4dnzh_s1ekwj92__3f447f56[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.Tabs_styles_z4dnzh_s1ekwj92__3f447f56[disabled]{cursor:not-allowed;}
+.Tabs_styles_1b8qt33_bu8v92r__719988cb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}
+.Tabs_styles_1b8qt33_s8qwlso__719988cb{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.Tabs_styles_1b8qt33_sh5e38r__719988cb{margin:-0.125rem;padding:0.25rem;box-sizing:content-box;overflow:scroll;position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.Tabs_styles_1b8qt33_sh5e38r__719988cb::-webkit-scrollbar{display:none;}
+.Tabs_styles_1b8qt33_s1ekwj92__719988cb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;--plasma_private-outer-padding:var(--s1ekwj92-0);padding-right:var(--s1ekwj92-1);padding-left:var(--s1ekwj92-2);}.Tabs_styles_1b8qt33_s1ekwj92__719988cb::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Tabs_styles_1b8qt33_s1ekwj92__719988cb.Tabs_styles_1b8qt33_focusVisible__719988cb:focus::before,.Tabs_styles_1b8qt33_s1ekwj92__719988cb[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.Tabs_styles_1b8qt33_s1ekwj92__719988cb[disabled]{cursor:not-allowed;}

package/cjs/components/Tabs/ui/Tabs/Tabs.js

@@ -18,7 +18,7 @@ var base$4 = require('./variations/_pilled/base.js');
 var base$3 = require('./variations/_stretch/base.js');
 var Tabs_styles = require('./Tabs.styles.js');
 
-var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
+var _excluded = ["id", "stretch", "disabled", "size", "view", "children", "pilled", "index", "className"];
 var Keys = /*#__PURE__*/function (Keys) {
   Keys[Keys["end"] = 35] = "end";
   Keys[Keys["home"] = 36] = "home";
@@ -33,13 +33,10 @@ var tabsRoot = function tabsRoot(Root) {
       stretch = _props$stretch === void 0 ? false : _props$stretch,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$clip = props.clip,
-      clip = _props$clip === void 0 ? 'scroll' : _props$clip,
       size = props.size,
       view = props.view,
       children = props.children,
-      _props$pilled = props.pilled,
-      pilled = _props$pilled === void 0 ? false : _props$pilled,
+      pilled = props.pilled,
       index$1 = props.index,
       className = props.className,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
@@ -62,47 +59,14 @@ var tabsRoot = function tabsRoot(Root) {
     var stretchClass = firstItemVisible && lastItemVisible && stretch ? tokens.classes.tabsStretch : undefined;
     var hasLeftArrowClass = !firstItemVisible ? tokens.classes.tabsHasLeftArrow : undefined;
     var hasRightArrowClass = !lastItemVisible ? tokens.classes.tabsHasRightArrow : undefined;
-    var clipScrollClass = clip === 'scroll' ? tokens.classes.tabsClipScroll : undefined;
-    var clipShowAllClass = clip === 'showAll' ? tokens.classes.tabsClipShowAll : undefined;
     var scrollRef = React.useRef(null);
     var trackRef = React.useRef(null);
-    var leftArrowRef = React.useRef(null);
     var onPrev = React.useCallback(function () {
-      var _firstOverflowingTab$;
-      if (disabled || !scrollRef.current) {
-        return;
-      }
-      var scrollLeft = Math.round(scrollRef.current.scrollLeft);
-      var firstOverflowingTab = refs.items.slice().reverse().find(function (item) {
-        if (!item.current || item.current.offsetLeft === undefined) {
-          return;
-        }
-        var tabStartX = item.current.offsetLeft;
-        return tabStartX < scrollLeft;
-      });
-      firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest'
-      });
-    }, [disabled, scrollRef, refs]);
+      !disabled && scrollRef.current && plasmaCore.animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft - scrollRef.current.offsetWidth / 2);
+    }, [disabled, scrollRef]);
     var onNext = React.useCallback(function () {
-      var _lastOverflowingTab$c;
-      if (disabled || !scrollRef.current) {
-        return;
-      }
-      var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
-      var lastOverflowingTab = refs.items.find(function (item) {
-        if (!item.current || item.current.offsetLeft === undefined) {
-          return;
-        }
-        var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
-        return tabEndX > scrollRight;
-      });
-      lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest'
-      });
-    }, [disabled, scrollRef, refs]);
+      !disabled && scrollRef.current && plasmaCore.animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft + scrollRef.current.offsetWidth / 2);
+    }, [disabled, scrollRef]);
     var PreviousButton = React.useMemo(function () {
       return /*#__PURE__*/React.createElement(Tabs_styles.StyledArrow, {
         type: "button",
@@ -111,7 +75,6 @@ var tabsRoot = function tabsRoot(Root) {
         tabIndex: disabled ? -1 : 0,
         disabled: disabled,
         isFilled: isFilled,
-        ref: leftArrowRef,
         isLeftArrow: true
       }, /*#__PURE__*/React.createElement(IconDisclosureLeft.IconDisclosureLeft, {
         color: "var(".concat(tokens.tokens.arrowColor, ")")
@@ -132,9 +95,8 @@ var tabsRoot = function tabsRoot(Root) {
     var handleScroll = React.useCallback(function (event) {
       event.stopPropagation();
       var maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;
-      var scrollLeft = Math.round(event.currentTarget.scrollLeft);
-      setFirstItemVisible(scrollLeft <= 0);
-      setLastItemVisible(scrollLeft >= maxScrollLeft);
+      setFirstItemVisible(event.currentTarget.scrollLeft <= 0);
+      setLastItemVisible(event.currentTarget.scrollLeft >= maxScrollLeft);
     }, [setFirstItemVisible, setLastItemVisible]);
     var onKeyDown = React.useCallback(function (event) {
       if (index$1 === undefined) {
@@ -174,16 +136,6 @@ var tabsRoot = function tabsRoot(Root) {
       var _scrollRef$current, _scrollRef$current2;
       setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollWidth) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientWidth));
     }, []);
-
-    // Этот хук компенсирует появление левой стрелки при прокрутке
-    React.useEffect(function () {
-      if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
-        return;
-      }
-      scrollRef.current.scrollTo({
-        left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
-      });
-    }, [firstItemVisible, scrollRef, leftArrowRef]);
     return /*#__PURE__*/React.createElement(TabsContext.TabsContext.Provider, {
       value: refs
     }, /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
@@ -197,7 +149,6 @@ var tabsRoot = function tabsRoot(Root) {
       className: index.cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
       onKeyDown: onKeyDown
     }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(Tabs_styles.StyledContentWrapper, {
-      className: index.cx(clipScrollClass, clipShowAllClass),
       ref: scrollRef,
       onScroll: handleScroll
     }, /*#__PURE__*/React.createElement(Tabs_styles.StyledContent, {

package/cjs/components/Tabs/ui/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef, KeyboardEvent } from 'react';\nimport type { MutableRefObject } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';\nimport { classes, tokens } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { TabItemRefs, TabsContext } from '../../TabsContext';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport { StyledArrow, StyledContent, StyledContentWrapper, base } from './Tabs.styles';\nimport type { TabsProps } from './Tabs.types';\n\nenum Keys {\n    end = 35,\n    home = 36,\n    left = 37,\n    right = 39,\n}\n\nexport const tabsRoot = (Root: RootProps<HTMLDivElement, TabsProps>) =>\n    forwardRef<HTMLDivElement, TabsProps>((props, outerRef) => {\n        const {\n            id,\n            stretch = false,\n            disabled = false,\n            clip = 'scroll',\n            size,\n            view,\n            children,\n            pilled = false,\n            index,\n            className,\n            ...rest\n        } = props;\n        const [firstItemVisible, setFirstItemVisible] = useState(true);\n        const [lastItemVisible, setLastItemVisible] = useState(true);\n\n        const refs = useMemo(() => new TabItemRefs(index), []);\n\n        const uniqId = safeUseId();\n        const tabsId = id || uniqId;\n\n        const isFilled = view === 'filled'; // outer padding is only for filled view\n        const pilledAttr = view !== 'clear' && pilled;\n        const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n\n        const stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;\n        const hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;\n        const hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;\n        const clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;\n        const clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;\n\n        const scrollRef = useRef<HTMLElement | null>(null);\n        const trackRef = useRef<HTMLElement | null>(null);\n        const leftArrowRef = useRef<HTMLButtonElement | null>(null);\n\n        const onPrev = useCallback(() => {\n            if (disabled || !scrollRef.current) {\n                return;\n            }\n\n            const scrollLeft = Math.round(scrollRef.current.scrollLeft);\n            const firstOverflowingTab = refs.items\n                .slice()\n                .reverse()\n                .find((item: MutableRefObject<HTMLElement | null>) => {\n                    if (!item.current || item.current.offsetLeft === undefined) {\n                        return;\n                    }\n                    const tabStartX = item.current.offsetLeft;\n\n                    return tabStartX < scrollLeft;\n                });\n\n            firstOverflowingTab?.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n        }, [disabled, scrollRef, refs]);\n\n        const onNext = useCallback(() => {\n            if (disabled || !scrollRef.current) {\n                return;\n            }\n\n            const scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);\n            const lastOverflowingTab = refs.items.find((item: MutableRefObject<HTMLElement | null>) => {\n                if (!item.current || item.current.offsetLeft === undefined) {\n                    return;\n                }\n                const tabEndX = item.current.offsetLeft + item.current.offsetWidth;\n\n                return tabEndX > scrollRight;\n            });\n\n            lastOverflowingTab?.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n        }, [disabled, scrollRef, refs]);\n\n        const PreviousButton = useMemo(\n            () => (\n                <StyledArrow\n                    type=\"button\"\n                    aria-label=\"Предыдущий таб\"\n                    onClick={onPrev}\n                    tabIndex={disabled ? -1 : 0}\n                    disabled={disabled}\n                    isFilled={isFilled}\n                    ref={leftArrowRef}\n                    isLeftArrow\n                >\n                    <IconDisclosureLeft color={`var(${tokens.arrowColor})`} />\n                </StyledArrow>\n            ),\n            [onPrev, disabled, isFilled],\n        );\n\n        const NextButton = useMemo(\n            () => (\n                <StyledArrow\n                    type=\"button\"\n                    aria-label=\"Следующий таб\"\n                    onClick={onNext}\n                    tabIndex={disabled ? -1 : 0}\n                    disabled={disabled}\n                    isFilled={isFilled}\n                >\n                    <IconDisclosureRight color={`var(${tokens.arrowColor})`} />\n                </StyledArrow>\n            ),\n            [onNext, disabled, isFilled],\n        );\n\n        const handleScroll = useCallback(\n            (event: React.UIEvent<HTMLElement>): void => {\n                event.stopPropagation();\n                const maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;\n                const scrollLeft = Math.round(event.currentTarget.scrollLeft);\n\n                setFirstItemVisible(scrollLeft <= 0);\n                setLastItemVisible(scrollLeft >= maxScrollLeft);\n            },\n            [setFirstItemVisible, setLastItemVisible],\n        );\n\n        const onKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                if (index === undefined) {\n                    return;\n                }\n\n                const minIndex = 0;\n                const maxIndex = refs.items.length - 1;\n                let nextIndex: number;\n\n                switch (event.keyCode) {\n                    case Keys.end:\n                        nextIndex = maxIndex;\n                        break;\n                    case Keys.left:\n                        nextIndex = index > minIndex ? index - 1 : index;\n                        break;\n                    case Keys.right:\n                        nextIndex = index < maxIndex ? index + 1 : index;\n                        break;\n                    case Keys.home:\n                        nextIndex = minIndex;\n                        break;\n                    default:\n                        return;\n                }\n\n                if (nextIndex !== index) {\n                    event.preventDefault();\n                    refs.items[nextIndex].current?.focus();\n                    refs.items[nextIndex].current?.scrollIntoView({\n                        block: 'center',\n                        inline: 'center',\n                        behavior: 'smooth',\n                    });\n                }\n            },\n            [index],\n        );\n\n        useEffect(() => {\n            setLastItemVisible(scrollRef.current?.scrollWidth === scrollRef.current?.clientWidth);\n        }, []);\n\n        // Этот хук компенсирует появление левой стрелки при прокрутке\n        useEffect(() => {\n            if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {\n                return;\n            }\n\n            scrollRef.current.scrollTo({\n                left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth),\n            });\n        }, [firstItemVisible, scrollRef, leftArrowRef]);\n\n        return (\n            <TabsContext.Provider value={refs}>\n                <Root\n                    view={view}\n                    role=\"tablist\"\n                    size={size}\n                    pilled={pilled}\n                    id={tabsId}\n                    ref={outerRef}\n                    disabled={disabled}\n                    className={cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className)}\n                    onKeyDown={onKeyDown}\n                    {...rest}\n                >\n                    {!firstItemVisible && PreviousButton}\n                    <StyledContentWrapper\n                        className={cx(clipScrollClass, clipShowAllClass)}\n                        ref={scrollRef as MutableRefObject<HTMLDivElement | null>}\n                        onScroll={handleScroll}\n                    >\n                        <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>\n                            {children}\n                        </StyledContent>\n                    </StyledContentWrapper>\n                    {!lastItemVisible && NextButton}\n                </Root>\n            </TabsContext.Provider>\n        );\n    });\n\nexport const tabsConfig = {\n    name: 'Tabs',\n    tag: 'div',\n    layout: tabsRoot,\n    base,\n    variations: {\n        size: {\n            css: sizeCSS,\n        },\n        view: {\n            css: viewCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n        stretch: {\n            css: stretchCSS,\n            attrs: true,\n        },\n        pilled: {\n            css: pilledCSS,\n        },\n    },\n    defaults: {\n        view: 'clear',\n        size: 'xs',\n    },\n};\n"],"names":["Keys","tabsRoot","Root","forwardRef","props","outerRef","id","_props$stretch","stretch","_props$disabled","disabled","_props$clip","clip","size","view","children","_props$pilled","pilled","index","className","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","firstItemVisible","setFirstItemVisible","_useState3","_useState4","lastItemVisible","setLastItemVisible","refs","useMemo","TabItemRefs","uniqId","safeUseId","tabsId","isFilled","pilledAttr","pilledClass","classes","tabsPilled","undefined","stretchClass","tabsStretch","hasLeftArrowClass","tabsHasLeftArrow","hasRightArrowClass","tabsHasRightArrow","clipScrollClass","tabsClipScroll","clipShowAllClass","tabsClipShowAll","scrollRef","useRef","trackRef","leftArrowRef","onPrev","useCallback","_firstOverflowingTab$","current","scrollLeft","Math","round","firstOverflowingTab","items","slice","reverse","find","item","offsetLeft","tabStartX","scrollIntoView","block","inline","onNext","_lastOverflowingTab$c","scrollRight","clientWidth","lastOverflowingTab","tabEndX","offsetWidth","PreviousButton","React","createElement","StyledArrow","type","onClick","tabIndex","ref","isLeftArrow","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","handleScroll","event","stopPropagation","maxScrollLeft","currentTarget","scrollWidth","onKeyDown","minIndex","maxIndex","length","nextIndex","keyCode","end","left","right","home","_refs$items$nextIndex","_refs$items$nextIndex2","preventDefault","focus","behavior","useEffect","_scrollRef$current","_scrollRef$current2","scrollTo","TabsContext","Provider","value","_extends","role","cx","StyledContentWrapper","onScroll","StyledContent","tabsConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","stretchCSS","pilledCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef, KeyboardEvent } from 'react';\nimport type { MutableRefObject } from 'react';\nimport { animatedScrollToX, safeUseId } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';\nimport { classes, tokens } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { TabItemRefs, TabsContext } from '../../TabsContext';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport { StyledArrow, StyledContent, StyledContentWrapper, base } from './Tabs.styles';\nimport type { TabsProps } from './Tabs.types';\n\nenum Keys {\n    end = 35,\n    home = 36,\n    left = 37,\n    right = 39,\n}\n\nexport const tabsRoot = (Root: RootProps<HTMLDivElement, TabsProps>) =>\n    forwardRef<HTMLDivElement, TabsProps>((props, outerRef) => {\n        const {\n            id,\n            stretch = false,\n            disabled = false,\n            size,\n            view,\n            children,\n            pilled,\n            index,\n            className,\n            ...rest\n        } = props;\n\n        const [firstItemVisible, setFirstItemVisible] = useState(true);\n        const [lastItemVisible, setLastItemVisible] = useState(true);\n\n        const refs = useMemo(() => new TabItemRefs(index), []);\n\n        const uniqId = safeUseId();\n        const tabsId = id || uniqId;\n\n        const isFilled = view === 'filled'; // outer padding is only for filled view\n        const pilledAttr = view !== 'clear' && pilled;\n        const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n\n        const stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;\n        const hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;\n        const hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;\n\n        const scrollRef = useRef<HTMLElement | null>(null);\n        const trackRef = useRef<HTMLElement | null>(null);\n\n        const onPrev = useCallback(() => {\n            !disabled &&\n                scrollRef.current &&\n                animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft - scrollRef.current.offsetWidth / 2);\n        }, [disabled, scrollRef]);\n\n        const onNext = useCallback(() => {\n            !disabled &&\n                scrollRef.current &&\n                animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft + scrollRef.current.offsetWidth / 2);\n        }, [disabled, scrollRef]);\n\n        const PreviousButton = useMemo(\n            () => (\n                <StyledArrow\n                    type=\"button\"\n                    aria-label=\"Предыдущий таб\"\n                    onClick={onPrev}\n                    tabIndex={disabled ? -1 : 0}\n                    disabled={disabled}\n                    isFilled={isFilled}\n                    isLeftArrow\n                >\n                    <IconDisclosureLeft color={`var(${tokens.arrowColor})`} />\n                </StyledArrow>\n            ),\n            [onPrev, disabled, isFilled],\n        );\n\n        const NextButton = useMemo(\n            () => (\n                <StyledArrow\n                    type=\"button\"\n                    aria-label=\"Следующий таб\"\n                    onClick={onNext}\n                    tabIndex={disabled ? -1 : 0}\n                    disabled={disabled}\n                    isFilled={isFilled}\n                >\n                    <IconDisclosureRight color={`var(${tokens.arrowColor})`} />\n                </StyledArrow>\n            ),\n            [onNext, disabled, isFilled],\n        );\n\n        const handleScroll = useCallback(\n            (event: React.UIEvent<HTMLElement>): void => {\n                event.stopPropagation();\n                const maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;\n\n                setFirstItemVisible(event.currentTarget.scrollLeft <= 0);\n                setLastItemVisible(event.currentTarget.scrollLeft >= maxScrollLeft);\n            },\n            [setFirstItemVisible, setLastItemVisible],\n        );\n\n        const onKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                if (index === undefined) {\n                    return;\n                }\n\n                const minIndex = 0;\n                const maxIndex = refs.items.length - 1;\n                let nextIndex: number;\n\n                switch (event.keyCode) {\n                    case Keys.end:\n                        nextIndex = maxIndex;\n                        break;\n                    case Keys.left:\n                        nextIndex = index > minIndex ? index - 1 : index;\n                        break;\n                    case Keys.right:\n                        nextIndex = index < maxIndex ? index + 1 : index;\n                        break;\n                    case Keys.home:\n                        nextIndex = minIndex;\n                        break;\n                    default:\n                        return;\n                }\n\n                if (nextIndex !== index) {\n                    event.preventDefault();\n                    refs.items[nextIndex].current?.focus();\n                    refs.items[nextIndex].current?.scrollIntoView({\n                        block: 'center',\n                        inline: 'center',\n                        behavior: 'smooth',\n                    });\n                }\n            },\n            [index],\n        );\n\n        useEffect(() => {\n            setLastItemVisible(scrollRef.current?.scrollWidth === scrollRef.current?.clientWidth);\n        }, []);\n\n        return (\n            <TabsContext.Provider value={refs}>\n                <Root\n                    view={view}\n                    role=\"tablist\"\n                    size={size}\n                    pilled={pilled}\n                    id={tabsId}\n                    ref={outerRef}\n                    disabled={disabled}\n                    className={cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className)}\n                    onKeyDown={onKeyDown}\n                    {...rest}\n                >\n                    {!firstItemVisible && PreviousButton}\n                    <StyledContentWrapper\n                        ref={scrollRef as MutableRefObject<HTMLDivElement | null>}\n                        onScroll={handleScroll}\n                    >\n                        <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>\n                            {children}\n                        </StyledContent>\n                    </StyledContentWrapper>\n                    {!lastItemVisible && NextButton}\n                </Root>\n            </TabsContext.Provider>\n        );\n    });\n\nexport const tabsConfig = {\n    name: 'Tabs',\n    tag: 'div',\n    layout: tabsRoot,\n    base,\n    variations: {\n        size: {\n            css: sizeCSS,\n        },\n        view: {\n            css: viewCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n        stretch: {\n            css: stretchCSS,\n            attrs: true,\n        },\n        pilled: {\n            css: pilledCSS,\n        },\n    },\n    defaults: {\n        view: 'clear',\n        size: 'xs',\n    },\n};\n"],"names":["Keys","tabsRoot","Root","forwardRef","props","outerRef","id","_props$stretch","stretch","_props$disabled","disabled","size","view","children","pilled","index","className","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","firstItemVisible","setFirstItemVisible","_useState3","_useState4","lastItemVisible","setLastItemVisible","refs","useMemo","TabItemRefs","uniqId","safeUseId","tabsId","isFilled","pilledAttr","pilledClass","classes","tabsPilled","undefined","stretchClass","tabsStretch","hasLeftArrowClass","tabsHasLeftArrow","hasRightArrowClass","tabsHasRightArrow","scrollRef","useRef","trackRef","onPrev","useCallback","current","animatedScrollToX","scrollLeft","offsetWidth","onNext","PreviousButton","React","createElement","StyledArrow","type","onClick","tabIndex","isLeftArrow","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","handleScroll","event","stopPropagation","maxScrollLeft","currentTarget","scrollWidth","clientWidth","onKeyDown","minIndex","maxIndex","items","length","nextIndex","keyCode","end","left","right","home","_refs$items$nextIndex","_refs$items$nextIndex2","preventDefault","focus","scrollIntoView","block","inline","behavior","useEffect","_scrollRef$current","_scrollRef$current2","TabsContext","Provider","value","_extends","role","ref","cx","StyledContentWrapper","onScroll","StyledContent","tabsConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","stretchCSS","pilledCSS","defaults"],"mappings":"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"}