@salutejs/plasma-new-hope 0.326.1-canary.2043.15849605311.0 → 0.327.0-canary.1741.15743877104.0

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.js","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, useRef, KeyboardEvent, useLayoutEffect } from 'react';\nimport type { MutableRefObject } from 'react';\nimport { cx, safeUseId } from 'src/utils';\nimport type { RootProps } from 'src/engines/types';\n\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';\nimport { classes } from '../../../tokens';\nimport { TabItemRefs, TabsContext } from '../../../TabsContext';\nimport type { HorizontalTabsProps } from '../../../Tabs.types';\nimport { getFirstOverflowingTab, getLastOverflowingTab } from '../../../utils';\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 './HorizontalTabs.styles';\n\nenum Keys {\n    end = 35,\n    home = 36,\n    left = 37,\n    right = 39,\n}\n\nconst getIconSize = (size?: string) => {\n    return size === 'h1' || size === 'h2' ? 'm' : 's';\n};\n\n// TODO: https://github.com/salute-developers/plasma/issues/1474\nexport const horizontalTabsRoot = (Root: RootProps<HTMLDivElement, HorizontalTabsProps>) =>\n    forwardRef<HTMLDivElement, HorizontalTabsProps>((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            hasDivider = true,\n            ...rest\n        } = props;\n        const [firstItemVisible, setFirstItemVisible] = useState(true);\n        const [lastItemVisible, setLastItemVisible] = useState(false);\n\n        // Триггер доп. скролла при появлении левой стрелки, которая отъедает ширину scroll-контейнера\n        const [shouldTriggerAdditionalScroll, setShouldTriggerAdditionalScroll] = useState(false);\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 noDividerClass = !hasDivider ? classes.tabsNoDivider : undefined;\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 } = scrollRef.current;\n            const firstOverflowingTab = getFirstOverflowingTab(\n                refs.items.slice().reverse(),\n                scrollLeft,\n                rest.orientation,\n            );\n\n            if (!firstOverflowingTab?.current) {\n                return;\n            }\n\n            const scrollElStyle = getComputedStyle(scrollRef.current);\n            scrollRef.current.scrollTo({\n                left: firstOverflowingTab.current.offsetLeft - parseInt(scrollElStyle.paddingLeft, 10),\n            });\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 = getLastOverflowingTab(refs.items, scrollRight, rest.orientation);\n\n            if (!lastOverflowingTab?.current) {\n                return;\n            }\n\n            if (firstItemVisible) {\n                setShouldTriggerAdditionalScroll(true);\n            }\n\n            const scrollElStyle = getComputedStyle(scrollRef.current);\n            scrollRef.current.scrollTo({\n                left: Math.round(\n                    lastOverflowingTab.current.offsetLeft +\n                        lastOverflowingTab.current.offsetWidth -\n                        scrollRef.current.clientWidth +\n                        parseInt(scrollElStyle.paddingRight, 10),\n                ),\n            });\n        }, [firstItemVisible, 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 size={getIconSize(size)} color=\"inherit\" />\n                </StyledArrow>\n            ),\n            [onPrev, size, 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 size={getIconSize(size)} color=\"inherit\" />\n                </StyledArrow>\n            ),\n            [onNext, size, disabled, isFilled],\n        );\n\n        const handleScroll = useCallback(\n            (event: React.UIEvent<HTMLElement>): void => {\n                event.stopPropagation();\n                const scrollElStyle = getComputedStyle(event.currentTarget);\n                const minScrollLeft = parseInt(scrollElStyle.paddingLeft, 10);\n                const maxScrollLeft =\n                    event.currentTarget.scrollWidth -\n                    event.currentTarget.clientWidth -\n                    parseInt(scrollElStyle.paddingRight, 10);\n                const scrollLeft = Math.round(event.currentTarget.scrollLeft);\n\n                setFirstItemVisible(scrollLeft <= minScrollLeft);\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: 'nearest',\n                        inline: 'center',\n                        behavior: 'smooth',\n                    });\n                }\n            },\n            [index],\n        );\n\n        useLayoutEffect(() => {\n            setLastItemVisible(scrollRef.current?.scrollWidth === scrollRef.current?.clientWidth);\n        }, []);\n\n        // Этот хук компенсирует появление левой стрелки при прокрутке\n        useLayoutEffect(() => {\n            if (firstItemVisible || !shouldTriggerAdditionalScroll || !scrollRef.current || !leftArrowRef.current) {\n                return;\n            }\n            const style = getComputedStyle(scrollRef.current);\n            scrollRef.current.scrollTo({\n                left: Math.round(\n                    scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth + parseInt(style.paddingLeft, 10),\n                ),\n            });\n            setShouldTriggerAdditionalScroll(false);\n        }, [firstItemVisible, shouldTriggerAdditionalScroll, scrollRef, leftArrowRef]);\n\n        return (\n            <TabsContext.Provider value={refs}>\n                <Root\n                    view={view}\n                    role=\"tablist\"\n                    // TODO: убрать каст any, когда будут удалены deprecated props\n                    size={size as any}\n                    pilled={pilled}\n                    id={tabsId}\n                    ref={outerRef}\n                    disabled={disabled}\n                    className={cx(\n                        pilledClass,\n                        stretchClass,\n                        hasLeftArrowClass,\n                        hasRightArrowClass,\n                        noDividerClass,\n                        className,\n                    )}\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 horizontalTabsConfig = {\n    name: 'HorizontalTabs',\n    tag: 'div',\n    layout: horizontalTabsRoot,\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","getIconSize","size","horizontalTabsRoot","Root","forwardRef","props","outerRef","id","_props$stretch","stretch","_props$disabled","disabled","_props$clip","clip","view","children","_props$pilled","pilled","index","className","_props$hasDivider","hasDivider","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","firstItemVisible","setFirstItemVisible","_useState3","_useState4","lastItemVisible","setLastItemVisible","_useState5","_useState6","shouldTriggerAdditionalScroll","setShouldTriggerAdditionalScroll","refs","useMemo","TabItemRefs","uniqId","safeUseId","tabsId","isFilled","pilledAttr","pilledClass","classes","tabsPilled","undefined","noDividerClass","tabsNoDivider","stretchClass","tabsStretch","hasLeftArrowClass","tabsHasLeftArrow","hasRightArrowClass","tabsHasRightArrow","clipScrollClass","tabsClipScroll","clipShowAllClass","tabsClipShowAll","scrollRef","useRef","trackRef","leftArrowRef","onPrev","useCallback","current","scrollLeft","firstOverflowingTab","getFirstOverflowingTab","items","slice","reverse","orientation","scrollElStyle","getComputedStyle","scrollTo","left","offsetLeft","parseInt","paddingLeft","onNext","scrollRight","Math","round","clientWidth","lastOverflowingTab","getLastOverflowingTab","offsetWidth","paddingRight","PreviousButton","React","createElement","StyledArrow","type","onClick","tabIndex","ref","isLeftArrow","IconDisclosureLeft","color","NextButton","IconDisclosureRight","handleScroll","event","stopPropagation","currentTarget","minScrollLeft","maxScrollLeft","scrollWidth","onKeyDown","minIndex","maxIndex","length","nextIndex","keyCode","end","right","home","_refs$items$nextIndex","_refs$items$nextIndex2","preventDefault","focus","scrollIntoView","block","inline","behavior","useLayoutEffect","_scrollRef$current","_scrollRef$current2","style","TabsContext","Provider","value","_extends","role","cx","StyledContentWrapper","onScroll","StyledContent","horizontalTabsConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","stretchCSS","pilledCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"HorizontalTabs.js","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, useRef, KeyboardEvent, useLayoutEffect } 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 } from '../../../tokens';\nimport { cx } from '../../../../../utils';\nimport { TabItemRefs, TabsContext } from '../../../TabsContext';\nimport type { HorizontalTabsProps } from '../../../Tabs.types';\nimport { getFirstOverflowingTab, getLastOverflowingTab } from '../../../utils';\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 './HorizontalTabs.styles';\n\nenum Keys {\n    end = 35,\n    home = 36,\n    left = 37,\n    right = 39,\n}\n\nconst getIconSize = (size?: string) => {\n    return size === 'h1' || size === 'h2' ? 'm' : 's';\n};\n\n// TODO: https://github.com/salute-developers/plasma/issues/1474\nexport const horizontalTabsRoot = (Root: RootProps<HTMLDivElement, HorizontalTabsProps>) =>\n    forwardRef<HTMLDivElement, HorizontalTabsProps>((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            hasDivider = true,\n            ...rest\n        } = props;\n        const [firstItemVisible, setFirstItemVisible] = useState(true);\n        const [lastItemVisible, setLastItemVisible] = useState(false);\n\n        // Триггер доп. скролла при появлении левой стрелки, которая отъедает ширину scroll-контейнера\n        const [shouldTriggerAdditionalScroll, setShouldTriggerAdditionalScroll] = useState(false);\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 noDividerClass = !hasDivider ? classes.tabsNoDivider : undefined;\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 } = scrollRef.current;\n            const firstOverflowingTab = getFirstOverflowingTab(\n                refs.items.slice().reverse(),\n                scrollLeft,\n                rest.orientation,\n            );\n\n            if (!firstOverflowingTab?.current) {\n                return;\n            }\n\n            const scrollElStyle = getComputedStyle(scrollRef.current);\n            scrollRef.current.scrollTo({\n                left: firstOverflowingTab.current.offsetLeft - parseInt(scrollElStyle.paddingLeft, 10),\n            });\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 = getLastOverflowingTab(refs.items, scrollRight, rest.orientation);\n\n            if (!lastOverflowingTab?.current) {\n                return;\n            }\n\n            if (firstItemVisible) {\n                setShouldTriggerAdditionalScroll(true);\n            }\n\n            const scrollElStyle = getComputedStyle(scrollRef.current);\n            scrollRef.current.scrollTo({\n                left: Math.round(\n                    lastOverflowingTab.current.offsetLeft +\n                        lastOverflowingTab.current.offsetWidth -\n                        scrollRef.current.clientWidth +\n                        parseInt(scrollElStyle.paddingRight, 10),\n                ),\n            });\n        }, [firstItemVisible, 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 size={getIconSize(size)} color=\"inherit\" />\n                </StyledArrow>\n            ),\n            [onPrev, size, 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 size={getIconSize(size)} color=\"inherit\" />\n                </StyledArrow>\n            ),\n            [onNext, size, disabled, isFilled],\n        );\n\n        const handleScroll = useCallback(\n            (event: React.UIEvent<HTMLElement>): void => {\n                event.stopPropagation();\n                const scrollElStyle = getComputedStyle(event.currentTarget);\n                const minScrollLeft = parseInt(scrollElStyle.paddingLeft, 10);\n                const maxScrollLeft =\n                    event.currentTarget.scrollWidth -\n                    event.currentTarget.clientWidth -\n                    parseInt(scrollElStyle.paddingRight, 10);\n                const scrollLeft = Math.round(event.currentTarget.scrollLeft);\n\n                setFirstItemVisible(scrollLeft <= minScrollLeft);\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: 'nearest',\n                        inline: 'center',\n                        behavior: 'smooth',\n                    });\n                }\n            },\n            [index],\n        );\n\n        useLayoutEffect(() => {\n            setLastItemVisible(scrollRef.current?.scrollWidth === scrollRef.current?.clientWidth);\n        }, []);\n\n        // Этот хук компенсирует появление левой стрелки при прокрутке\n        useLayoutEffect(() => {\n            if (firstItemVisible || !shouldTriggerAdditionalScroll || !scrollRef.current || !leftArrowRef.current) {\n                return;\n            }\n            const style = getComputedStyle(scrollRef.current);\n            scrollRef.current.scrollTo({\n                left: Math.round(\n                    scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth + parseInt(style.paddingLeft, 10),\n                ),\n            });\n            setShouldTriggerAdditionalScroll(false);\n        }, [firstItemVisible, shouldTriggerAdditionalScroll, scrollRef, leftArrowRef]);\n\n        return (\n            <TabsContext.Provider value={refs}>\n                <Root\n                    view={view}\n                    role=\"tablist\"\n                    // TODO: убрать каст any, когда будут удалены deprecated props\n                    size={size as any}\n                    pilled={pilled}\n                    id={tabsId}\n                    ref={outerRef}\n                    disabled={disabled}\n                    className={cx(\n                        pilledClass,\n                        stretchClass,\n                        hasLeftArrowClass,\n                        hasRightArrowClass,\n                        noDividerClass,\n                        className,\n                    )}\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 horizontalTabsConfig = {\n    name: 'HorizontalTabs',\n    tag: 'div',\n    layout: horizontalTabsRoot,\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","getIconSize","size","horizontalTabsRoot","Root","forwardRef","props","outerRef","id","stretch","disabled","clip","view","children","pilled","index","className","hasDivider","rest","firstItemVisible","setFirstItemVisible","useState","lastItemVisible","setLastItemVisible","shouldTriggerAdditionalScroll","setShouldTriggerAdditionalScroll","refs","useMemo","TabItemRefs","uniqId","safeUseId","tabsId","isFilled","pilledAttr","pilledClass","classes","tabsPilled","undefined","noDividerClass","tabsNoDivider","stretchClass","tabsStretch","hasLeftArrowClass","tabsHasLeftArrow","hasRightArrowClass","tabsHasRightArrow","clipScrollClass","tabsClipScroll","clipShowAllClass","tabsClipShowAll","scrollRef","useRef","trackRef","leftArrowRef","onPrev","useCallback","current","scrollLeft","firstOverflowingTab","getFirstOverflowingTab","items","slice","reverse","orientation","scrollElStyle","getComputedStyle","scrollTo","left","offsetLeft","parseInt","paddingLeft","onNext","scrollRight","Math","round","clientWidth","lastOverflowingTab","getLastOverflowingTab","offsetWidth","paddingRight","PreviousButton","React","createElement","StyledArrow","type","onClick","tabIndex","ref","isLeftArrow","IconDisclosureLeft","color","NextButton","IconDisclosureRight","handleScroll","event","stopPropagation","currentTarget","minScrollLeft","maxScrollLeft","scrollWidth","onKeyDown","minIndex","maxIndex","length","nextIndex","keyCode","end","right","home","preventDefault","focus","scrollIntoView","block","inline","behavior","useLayoutEffect","style","TabsContext","Provider","value","_extends","role","cx","StyledContentWrapper","onScroll","StyledContent","horizontalTabsConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","stretchCSS","pilledCSS","defaults"],"mappings":"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"}

package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.styles.js

@@ -6,43 +6,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('@linaria/react');
 var tokens = require('../../../tokens.js');
 
-var base = "b7gl603";
-var StyledContent = /*#__PURE__*/react.styled('div')({
+const base = "b7gl603";
+const StyledContent = /*#__PURE__*/react.styled('div')({
   name: "StyledContent",
-  "class": "s191iwmt",
+  class: "s191iwmt",
   propsAsIs: false
 });
-var StyledContentWrapper = /*#__PURE__*/react.styled('div')({
+const StyledContentWrapper = /*#__PURE__*/react.styled('div')({
   name: "StyledContentWrapper",
-  "class": "s158pfyo",
+  class: "s158pfyo",
   propsAsIs: false
 });
-var _exp4 = function _exp4() {
-  return function (_ref) {
-    var isFilled = _ref.isFilled;
-    return isFilled ? "var(".concat(tokens.tokens.arrowOuterPadding, ")") : '';
-  };
-};
-var _exp5 = function _exp5() {
-  return function (_ref2) {
-    var isLeftArrow = _ref2.isLeftArrow;
-    return isLeftArrow ? "var(".concat(tokens.tokens.arrowInnerPadding, ")") : 'var(--plasma_private-outer-padding)';
-  };
-};
-var _exp6 = function _exp6() {
-  return function (_ref3) {
-    var isLeftArrow = _ref3.isLeftArrow;
-    return isLeftArrow ? 'var(--plasma_private-outer-padding)' : "var(".concat(tokens.tokens.arrowInnerPadding, ")");
-  };
-};
-var StyledArrow = /*#__PURE__*/react.styled('button')({
+const _exp4 = /*#__PURE__*/() => ({
+  isFilled
+}) => isFilled ? `var(${tokens.tokens.arrowOuterPadding})` : '';
+const _exp5 = /*#__PURE__*/() => ({
+  isLeftArrow
+}) => isLeftArrow ? `var(${tokens.tokens.arrowInnerPadding})` : 'var(--plasma_private-outer-padding)';
+const _exp6 = /*#__PURE__*/() => ({
+  isLeftArrow
+}) => isLeftArrow ? 'var(--plasma_private-outer-padding)' : `var(${tokens.tokens.arrowInnerPadding})`;
+const StyledArrow = /*#__PURE__*/react.styled('button')({
   name: "StyledArrow",
-  "class": "s1in38wj",
+  class: "s1in38wj",
   propsAsIs: false,
   vars: {
-    "s1in38wj-0": [/*#__PURE__*/_exp4()],
-    "s1in38wj-1": [/*#__PURE__*/_exp5()],
-    "s1in38wj-2": [/*#__PURE__*/_exp6()]
+    "s1in38wj-0": [_exp4()],
+    "s1in38wj-1": [_exp5()],
+    "s1in38wj-2": [_exp6()]
   }
 });
 

package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.styles.js","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../../mixins';\nimport { classes, tokens } from '../../../tokens';\n\nexport const base = css`\n    display: flex;\n    gap: 0.125rem;\n    align-items: center;\n    position: relative;\n`;\n\nexport const StyledContent = styled.div`\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n`;\n\nexport const StyledContentWrapper = styled.div`\n    /* allows correctly display outline focus on tabs item */\n    margin: -0.125rem;\n    padding: 0.25rem;\n\n    box-sizing: content-box;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    align-items: center;\n\n    z-index: 1;\n\n    &.${classes.tabsClipScroll} {\n        overflow: scroll;\n\n        scrollbar-width: none;\n        ::-webkit-scrollbar {\n            display: none;\n        }\n    }\n\n    &.${classes.tabsClipShowAll} {\n        overflow: visible;\n    }\n`;\n\nexport const StyledArrow = styled.button<{ isLeftArrow?: boolean; isFilled?: boolean }>`\n    display: flex;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    outline: none;\n\n    ${addFocus({\n        outlineSize: '0.063rem',\n        outlineOffset: '-0.125rem',\n        outlineColor: `var(${tokens.outlineFocusColor})`,\n        outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)',\n    })};\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n\n    --plasma_private-outer-padding: ${({ isFilled }) => (isFilled ? `var(${tokens.arrowOuterPadding})` : '')};\n\n    padding-right: ${({ isLeftArrow }) =>\n        isLeftArrow ? `var(${tokens.arrowInnerPadding})` : 'var(--plasma_private-outer-padding)'};\n    padding-left: ${({ isLeftArrow }) =>\n        isLeftArrow ? 'var(--plasma_private-outer-padding)' : `var(${tokens.arrowInnerPadding})`};\n\n    color: var(${tokens.arrowColor});\n\n    &:hover {\n        color: var(${tokens.arrowColorHover});\n    }\n\n    &:active {\n        color: var(${tokens.arrowColorActive});\n    }\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","_exp4","_ref","isFilled","concat","tokens","arrowOuterPadding","_exp5","_ref2","isLeftArrow","arrowInnerPadding","_exp6","_ref3","StyledArrow","vars"],"mappings":";;;;;;;AAMO,IAAMA,IAAI,GAKhB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIlC,EAAA;AAEM,IAAMC,oBAAoB,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CA0BzC,EAAA;AAAC,IAAAE,KAAA,GA5CgBA,SA4ChBA,KAAAA,GAAA;AAAA,EAAA,OAqBoC,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,QAAAA,GAAAA,IAAAA,CAAAA,QAAAA,CAAAA;IAAAA,OAAgBA,QAAQ,UAAAC,MAAA,CAAUC,aAAM,CAACC,iBAAiB,SAAM,EAAG,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GAjE1FA,SAiE0FA,KAAAA,GAAA;AAAA,EAAA,OAEvF,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,WAAAA,GAAAA,KAAAA,CAAAA,WAAAA,CAAAA;IAAAA,OAChBA,WAAW,UAAAL,MAAA,CAAUC,aAAM,CAACK,iBAAiB,SAAM,qCAAqC,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GApE9EA,SAoE8EA,KAAAA,GAAA;AAAA,EAAA,OAC5E,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGH,WAAAA,GAAAA,KAAAA,CAAAA,WAAAA,CAAAA;IAAAA,OACfA,WAAW,GAAG,qCAAqC,GAAA,MAAA,CAAAL,MAAA,CAAUC,aAAM,CAACK,iBAAiB,EAAG,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAxBzF,IAAMG,WAAW,gBAAGjB,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAe,EAAAA,IAAA,EAAA;AAAA,IAAA,YAAA,EAAA,cAmBKb,KAAsE,EAAA,CAAA;AAAA,IAAA,YAAA,EAAA,cAEvFM,KAC2E,EAAA,CAAA;AAAA,IAAA,YAAA,EAAA,cAC5EI,KAC4E,EAAA,CAAA;AAAA,GAAA;AAAA,CAW/F;;;;;;;"}
+{"version":3,"file":"HorizontalTabs.styles.js","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../../mixins';\nimport { classes, tokens } from '../../../tokens';\n\nexport const base = css`\n    display: flex;\n    gap: 0.125rem;\n    align-items: center;\n    position: relative;\n`;\n\nexport const StyledContent = styled.div`\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n`;\n\nexport const StyledContentWrapper = styled.div`\n    /* allows correctly display outline focus on tabs item */\n    margin: -0.125rem;\n    padding: 0.25rem;\n\n    box-sizing: content-box;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    align-items: center;\n\n    z-index: 1;\n\n    &.${classes.tabsClipScroll} {\n        overflow: scroll;\n\n        scrollbar-width: none;\n        ::-webkit-scrollbar {\n            display: none;\n        }\n    }\n\n    &.${classes.tabsClipShowAll} {\n        overflow: visible;\n    }\n`;\n\nexport const StyledArrow = styled.button<{ isLeftArrow?: boolean; isFilled?: boolean }>`\n    display: flex;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    outline: none;\n\n    ${addFocus({\n        outlineSize: '0.063rem',\n        outlineOffset: '-0.125rem',\n        outlineColor: `var(${tokens.outlineFocusColor})`,\n        outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)',\n    })};\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n\n    --plasma_private-outer-padding: ${({ isFilled }) => (isFilled ? `var(${tokens.arrowOuterPadding})` : '')};\n\n    padding-right: ${({ isLeftArrow }) =>\n        isLeftArrow ? `var(${tokens.arrowInnerPadding})` : 'var(--plasma_private-outer-padding)'};\n    padding-left: ${({ isLeftArrow }) =>\n        isLeftArrow ? 'var(--plasma_private-outer-padding)' : `var(${tokens.arrowInnerPadding})`};\n\n    color: var(${tokens.arrowColor});\n\n    &:hover {\n        color: var(${tokens.arrowColorHover});\n    }\n\n    &:active {\n        color: var(${tokens.arrowColorActive});\n    }\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","_exp4","isFilled","tokens","arrowOuterPadding","_exp5","isLeftArrow","arrowInnerPadding","_exp6","StyledArrow","vars"],"mappings":";;;;;;;AAMO,MAAMA,IAAI,GAKhB,UAAA;AAEM,MAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,KAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIlC,EAAA;AAEM,MAAMC,oBAAoB,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,KAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CA0BzC,EAAA;AAAC,MAAAE,KAAA,gBA5CgBA,MAiEoB,CAAC;AAAEC,EAAAA,QAAAA;AAAS,CAAC,KAAMA,QAAQ,GAAG,CAAA,IAAA,EAAOC,aAAM,CAACC,iBAAiB,CAAG,CAAA,CAAA,GAAG,EAAG,CAAA;AAAA,MAAAC,KAAA,gBAjE1FA,MAmEG,CAAC;AAAEC,EAAAA,WAAAA;AAAY,CAAC,KAC7BA,WAAW,GAAG,CAAA,IAAA,EAAOH,aAAM,CAACI,iBAAiB,CAAG,CAAA,CAAA,GAAG,qCAAqC,CAAA;AAAA,MAAAC,KAAA,gBApE9EA,MAqEE,CAAC;AAAEF,EAAAA,WAAAA;AAAY,CAAC,KAC5BA,WAAW,GAAG,qCAAqC,GAAG,CAAOH,IAAAA,EAAAA,aAAM,CAACI,iBAAiB,CAAG,CAAA,CAAA,CAAA;AAxBzF,MAAME,WAAW,gBAAGb,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,KAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAW,EAAAA,IAAA,EAAA;AAAA,IAAA,YAAA,EAAA,CAmBKT,KAAsE,EAAA,CAAA;AAAA,IAAA,YAAA,EAAA,CAEvFI,KAC2E,EAAA,CAAA;AAAA,IAAA,YAAA,EAAA,CAC5EG,KAC4E,EAAA,CAAA;AAAA,GAAA;AAAA,CAW/F;;;;;;;"}

package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_disabled/base.js

@@ -3,7 +3,7 @@ require('./base_j9bg3m.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var base = "bbh58a1";
+const base = "bbh58a1";
 
 exports.base = base;
 //# sourceMappingURL=base.js.map

package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_disabled/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/variations/_disabled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../../../../tokens';\n\nexport const base = css`\n    opacity: var(${tokens.disabledOpacity});\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAEhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/variations/_disabled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../../../../tokens';\n\nexport const base = css`\n    opacity: var(${tokens.disabledOpacity});\n`;\n"],"names":["base"],"mappings":";;;;AAIO,MAAMA,IAAI,GAEhB;;;;"}

package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_pilled/base.js

@@ -3,7 +3,7 @@ require('./base_r0ggur.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var base = "bc7z19b";
+const base = "bc7z19b";
 
 exports.base = base;
 //# sourceMappingURL=base.js.map

package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_pilled/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/variations/_pilled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../../tokens';\n\nexport const base = css`\n    &.${classes.tabsPilled} {\n        --plasma_private-outline-radius: var(${tokens.tabsPilledBorderRadius});\n        border-radius: var(${tokens.tabsPilledBorderRadius});\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAKhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/variations/_pilled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../../tokens';\n\nexport const base = css`\n    &.${classes.tabsPilled} {\n        --plasma_private-outline-radius: var(${tokens.tabsPilledBorderRadius});\n        border-radius: var(${tokens.tabsPilledBorderRadius});\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,MAAMA,IAAI,GAKhB;;;;"}

package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_size/base.js

@@ -3,7 +3,7 @@ require('./base_1sq08yf.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var base = "bxoicu2";
+const base = "bxoicu2";
 
 exports.base = base;
 //# sourceMappingURL=base.js.map

package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_size/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../../../../tokens';\n\nexport const base = css`\n    width: var(${tokens.tabsWidth});\n    height: var(${tokens.tabsHeight});\n\n    --plasma_private-outline-radius: var(${tokens.tabsBorderRadius});\n    border-radius: var(${tokens.tabsBorderRadius});\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAMhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../../../../tokens';\n\nexport const base = css`\n    width: var(${tokens.tabsWidth});\n    height: var(${tokens.tabsHeight});\n\n    --plasma_private-outline-radius: var(${tokens.tabsBorderRadius});\n    border-radius: var(${tokens.tabsBorderRadius});\n`;\n"],"names":["base"],"mappings":";;;;AAIO,MAAMA,IAAI,GAMhB;;;;"}

package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_stretch/base.js

@@ -3,7 +3,7 @@ require('./base_1j9ii1x.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var base = "b1eicxhd";
+const base = "b1eicxhd";
 
 exports.base = base;
 //# sourceMappingURL=base.js.map

package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_stretch/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/variations/_stretch/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes } from '../../../../../tokens';\nimport { StyledContent, StyledContentWrapper } from '../../HorizontalTabs.styles';\n\nexport const base = css`\n    &.${classes.tabsStretch} {\n        width: 100%;\n\n        ${StyledContentWrapper}, ${StyledContent}, ${StyledContent} > button {\n            width: 100%;\n            margin-left: 0;\n        }\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,IAAMA,IAAI,GAShB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/variations/_stretch/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes } from '../../../../../tokens';\nimport { StyledContent, StyledContentWrapper } from '../../HorizontalTabs.styles';\n\nexport const base = css`\n    &.${classes.tabsStretch} {\n        width: 100%;\n\n        ${StyledContentWrapper}, ${StyledContent}, ${StyledContent} > button {\n            width: 100%;\n            margin-left: 0;\n        }\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,MAAMA,IAAI,GAShB;;;;"}

package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_view/base.js

@@ -3,7 +3,7 @@ require('./base_4ob3q5.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var base = "bupjtit";
+const base = "bupjtit";
 
 exports.base = base;
 //# sourceMappingURL=base.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../../tokens';\n\nexport const base = css`\n    background-color: var(${tokens.tabsBackgroundColor});\n\n    &::after {\n        content: '';\n        position: absolute;\n        bottom: 0.125rem;\n        left: 0.125rem;\n        right: 0.125rem;\n        background: var(${tokens.tabsDividerColor});\n        height: var(${tokens.tabsDividerHeight});\n        border-radius: var(${tokens.tabsDividerBorderRadius});\n    }\n\n    &.${classes.tabsHasLeftArrow} {\n        &::after {\n            left: 1.5rem;\n        }\n    }\n\n    &.${classes.tabsHasRightArrow} {\n        &::after {\n            right: 1.5rem;\n        }\n    }\n\n    &.${classes.tabsNoDivider} {\n        &::after {\n            height: 0;\n        }\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GA+BhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../../tokens';\n\nexport const base = css`\n    background-color: var(${tokens.tabsBackgroundColor});\n\n    &::after {\n        content: '';\n        position: absolute;\n        bottom: 0.125rem;\n        left: 0.125rem;\n        right: 0.125rem;\n        background: var(${tokens.tabsDividerColor});\n        height: var(${tokens.tabsDividerHeight});\n        border-radius: var(${tokens.tabsDividerBorderRadius});\n    }\n\n    &.${classes.tabsHasLeftArrow} {\n        &::after {\n            left: 1.5rem;\n        }\n    }\n\n    &.${classes.tabsHasRightArrow} {\n        &::after {\n            right: 1.5rem;\n        }\n    }\n\n    &.${classes.tabsNoDivider} {\n        &::after {\n            height: 0;\n        }\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,MAAMA,IAAI,GA+BhB;;;;"}

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

@@ -17,110 +17,103 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var _excluded = ["size", "view", "selected", "disabled", "children", "value", "contentLeft", "contentRight", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "maxItemWidth"];
-var verticalTabItemRoot = function verticalTabItemRoot(Root) {
-  return /*#__PURE__*/React.forwardRef(function (props, outerRef) {
-    var size = props.size,
-      view = props.view,
-      selected = props.selected,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      children = props.children,
-      value = props.value,
-      contentLeft = props.contentLeft,
-      contentRight = props.contentRight,
-      onIndexChange = props.onIndexChange,
-      itemIndex = props.itemIndex,
-      tabIndex = props.tabIndex,
-      className = props.className,
-      onClick = props.onClick,
-      _props$maxItemWidth = props.maxItemWidth,
-      maxWidth = _props$maxItemWidth === void 0 ? 'auto' : _props$maxItemWidth,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-    var innerRef = React.useRef(null);
-    var ref = plasmaCore.useForkRef(outerRef, innerRef);
-    var refs = React.useContext(TabsContext.TabsContext);
-    var role = 'tab';
-    var selectedClass = selected ? tokens.classes.selectedTabsItem : undefined;
-    var truncateClass = maxWidth !== 'auto' ? tokens.classes.tabsTruncate : undefined;
-    var hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;
-    var navigationTabIndex = !disabled && (refs === null || refs === void 0 ? void 0 : refs.current) === itemIndex ? 0 : -1;
-    React.useEffect(function () {
-      if (!refs) {
-        return;
-      }
-      refs.register(innerRef);
-      return function () {
-        return refs.unregister(innerRef);
-      };
-    }, [refs]);
-    React.useLayoutEffect(function () {
-      var _innerRef$current$par;
-      if (!selected || !innerRef.current) {
-        return;
-      }
-      var scrollEl = (_innerRef$current$par = innerRef.current.parentElement) === null || _innerRef$current$par === void 0 ? void 0 : _innerRef$current$par.parentElement;
-      if (!scrollEl) {
-        return;
-      }
-      var scrollElStyle = getComputedStyle(scrollEl);
-      scrollEl.scrollTo({
-        top: innerRef.current.offsetTop - parseInt(scrollElStyle.paddingTop, 10)
-      });
-    }, [selected]);
-    var onItemFocus = React.useCallback(function (event) {
-      if (disabled) {
-        return;
-      }
-      if (!hasKeyNavigation && innerRef !== null && innerRef !== void 0 && innerRef.current) {
-        innerRef.current.scrollTo({
-          top: innerRef.current.offsetTop,
-          behavior: 'smooth'
-        });
-        return;
-      }
-      if (!refs) {
-        return;
-      }
-      var focusIndex = refs.items.findIndex(function (itemRef) {
-        return itemRef.current === event.target;
+const verticalTabItemRoot = Root => /*#__PURE__*/React.forwardRef((props, outerRef) => {
+  const {
+    size,
+    view,
+    selected,
+    disabled = false,
+    children,
+    value,
+    contentLeft,
+    contentRight,
+    onIndexChange,
+    itemIndex,
+    tabIndex,
+    className,
+    onClick,
+    maxItemWidth: maxWidth = 'auto',
+    ...rest
+  } = props;
+  const innerRef = React.useRef(null);
+  const ref = plasmaCore.useForkRef(outerRef, innerRef);
+  const refs = React.useContext(TabsContext.TabsContext);
+  const role = 'tab';
+  const selectedClass = selected ? tokens.classes.selectedTabsItem : undefined;
+  const truncateClass = maxWidth !== 'auto' ? tokens.classes.tabsTruncate : undefined;
+  const hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;
+  const navigationTabIndex = !disabled && refs?.current === itemIndex ? 0 : -1;
+  React.useEffect(() => {
+    if (!refs) {
+      return;
+    }
+    refs.register(innerRef);
+    return () => refs.unregister(innerRef);
+  }, [refs]);
+  React.useLayoutEffect(() => {
+    if (!selected || !innerRef.current) {
+      return;
+    }
+    const scrollEl = innerRef.current.parentElement?.parentElement;
+    if (!scrollEl) {
+      return;
+    }
+    const scrollElStyle = getComputedStyle(scrollEl);
+    scrollEl.scrollTo({
+      top: innerRef.current.offsetTop - parseInt(scrollElStyle.paddingTop, 10)
+    });
+  }, [selected]);
+  const onItemFocus = React.useCallback(event => {
+    if (disabled) {
+      return;
+    }
+    if (!hasKeyNavigation && innerRef?.current) {
+      innerRef.current.scrollTo({
+        top: innerRef.current.offsetTop,
+        behavior: 'smooth'
       });
-      if (focusIndex === refs.current) {
-        return;
-      }
-      onIndexChange === null || onIndexChange === void 0 || onIndexChange(focusIndex);
-      refs.setCurrent(focusIndex);
-    }, [refs, innerRef, onIndexChange, disabled]);
-    var handleClick = function handleClick(event) {
-      if (!onClick) {
-        return;
-      }
-      onClick(event);
-    };
-    return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
-      ref: ref,
-      disabled: disabled,
-      role: role,
-      view: view,
-      size: size,
-      onFocus: onItemFocus,
-      tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: index.cx(selectedClass, truncateClass, className),
-      onClick: handleClick
-    }, rest, {
-      style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest.style), {}, {
-        maxWidth: maxWidth
-      })
-    }), /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, contentLeft && /*#__PURE__*/React__default.default.createElement(VerticalTabItem_styles.LeftContent, {
-      className: tokens.classes.tabLeftContent
-    }, contentLeft), /*#__PURE__*/React__default.default.createElement(VerticalTabItem_styles.StyledContent, {
-      className: tokens.classes.tabContent
-    }, children), !contentRight && value && /*#__PURE__*/React__default.default.createElement(VerticalTabItem_styles.TabItemValue, null, value), !value && contentRight && /*#__PURE__*/React__default.default.createElement(VerticalTabItem_styles.RightContent, {
-      className: tokens.classes.tabRightContent
-    }, contentRight)));
-  });
-};
-var verticalTabItemConfig = {
+      return;
+    }
+    if (!refs) {
+      return;
+    }
+    const focusIndex = refs.items.findIndex(itemRef => itemRef.current === event.target);
+    if (focusIndex === refs.current) {
+      return;
+    }
+    onIndexChange?.(focusIndex);
+    refs.setCurrent(focusIndex);
+  }, [refs, innerRef, onIndexChange, disabled]);
+  const handleClick = event => {
+    if (!onClick) {
+      return;
+    }
+    onClick(event);
+  };
+  return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
+    ref: ref,
+    disabled: disabled,
+    role: role,
+    view: view,
+    size: size,
+    onFocus: onItemFocus,
+    tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
+    className: index.cx(selectedClass, truncateClass, className),
+    onClick: handleClick
+  }, rest, {
+    style: {
+      ...rest.style,
+      maxWidth
+    }
+  }), /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, contentLeft && /*#__PURE__*/React__default.default.createElement(VerticalTabItem_styles.LeftContent, {
+    className: tokens.classes.tabLeftContent
+  }, contentLeft), /*#__PURE__*/React__default.default.createElement(VerticalTabItem_styles.StyledContent, {
+    className: tokens.classes.tabContent
+  }, children), !contentRight && value && /*#__PURE__*/React__default.default.createElement(VerticalTabItem_styles.TabItemValue, null, value), !value && contentRight && /*#__PURE__*/React__default.default.createElement(VerticalTabItem_styles.RightContent, {
+    className: tokens.classes.tabRightContent
+  }, contentRight)));
+});
+const verticalTabItemConfig = {
   name: 'VerticalTabItem',
   tag: 'button',
   layout: verticalTabItemRoot,

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabItem.js","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useContext, useEffect, useCallback, useLayoutEffect } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../../../../engines';\nimport { classes } from '../../../tokens';\nimport { cx } from '../../../../../utils';\nimport { TabsContext } from '../../../TabsContext';\nimport { VerticalTabItemProps } from '../../../TabItem.types';\n\nimport { base, LeftContent, RightContent, StyledContent, TabItemValue } from './VerticalTabItem.styles';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\n\nexport const verticalTabItemRoot = (Root: RootProps<HTMLButtonElement, VerticalTabItemProps>) =>\n    forwardRef<HTMLButtonElement, VerticalTabItemProps>((props, outerRef) => {\n        const {\n            size,\n            view,\n            selected,\n            disabled = false,\n            children,\n            value,\n            contentLeft,\n            contentRight,\n            onIndexChange,\n            itemIndex,\n            tabIndex,\n            className,\n            onClick,\n            maxItemWidth: maxWidth = 'auto',\n            ...rest\n        } = props;\n\n        const innerRef = useRef<HTMLButtonElement>(null);\n        const ref = useForkRef(outerRef, innerRef);\n        const refs = useContext(TabsContext);\n\n        const role = 'tab';\n\n        const selectedClass = selected ? classes.selectedTabsItem : undefined;\n        const truncateClass = maxWidth !== 'auto' ? classes.tabsTruncate : undefined;\n\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        useLayoutEffect(() => {\n            if (!selected || !innerRef.current) {\n                return;\n            }\n\n            const scrollEl = innerRef.current.parentElement?.parentElement;\n            if (!scrollEl) {\n                return;\n            }\n\n            const scrollElStyle = getComputedStyle(scrollEl);\n            scrollEl.scrollTo({\n                top: innerRef.current.offsetTop - parseInt(scrollElStyle.paddingTop, 10),\n            });\n        }, [selected]);\n\n        const onItemFocus = useCallback<React.FocusEventHandler>(\n            (event) => {\n                if (disabled) {\n                    return;\n                }\n\n                if (!hasKeyNavigation && innerRef?.current) {\n                    innerRef.current.scrollTo({\n                        top: innerRef.current.offsetTop,\n                        behavior: 'smooth',\n                    });\n\n                    return;\n                }\n\n                if (!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            if (!onClick) {\n                return;\n            }\n\n            onClick(event);\n        };\n\n        return (\n            <Root\n                ref={ref}\n                disabled={disabled}\n                role={role}\n                view={view}\n                size={size}\n                onFocus={onItemFocus}\n                tabIndex={hasKeyNavigation ? navigationTabIndex : tabIndex}\n                className={cx(selectedClass, truncateClass, className)}\n                onClick={handleClick}\n                {...rest}\n                style={{\n                    ...rest.style,\n                    maxWidth,\n                }}\n            >\n                <>\n                    {contentLeft && <LeftContent className={classes.tabLeftContent}>{contentLeft}</LeftContent>}\n                    <StyledContent className={classes.tabContent}>{children}</StyledContent>\n                    {!contentRight && value && <TabItemValue>{value}</TabItemValue>}\n                    {!value && contentRight && (\n                        <RightContent className={classes.tabRightContent}>{contentRight}</RightContent>\n                    )}\n                </>\n            </Root>\n        );\n    });\n\nexport const verticalTabItemConfig = {\n    name: 'VerticalTabItem',\n    tag: 'button',\n    layout: verticalTabItemRoot,\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    },\n    defaults: {\n        view: 'divider',\n    },\n};\n"],"names":["verticalTabItemRoot","Root","forwardRef","props","outerRef","size","view","selected","_props$disabled","disabled","children","value","contentLeft","contentRight","onIndexChange","itemIndex","tabIndex","className","onClick","_props$maxItemWidth","maxItemWidth","maxWidth","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","refs","useContext","TabsContext","role","selectedClass","classes","selectedTabsItem","undefined","truncateClass","tabsTruncate","hasKeyNavigation","navigationTabIndex","current","useEffect","register","unregister","useLayoutEffect","_innerRef$current$par","scrollEl","parentElement","scrollElStyle","getComputedStyle","scrollTo","top","offsetTop","parseInt","paddingTop","onItemFocus","useCallback","event","behavior","focusIndex","items","findIndex","itemRef","target","setCurrent","handleClick","React","createElement","_extends","onFocus","cx","style","_objectSpread","Fragment","LeftContent","tabLeftContent","StyledContent","tabContent","TabItemValue","RightContent","tabRightContent","verticalTabItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","defaults"],"mappings":"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"}
+{"version":3,"file":"VerticalTabItem.js","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useContext, useEffect, useCallback, useLayoutEffect } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../../../../engines';\nimport { classes } from '../../../tokens';\nimport { cx } from '../../../../../utils';\nimport { TabsContext } from '../../../TabsContext';\nimport { VerticalTabItemProps } from '../../../TabItem.types';\n\nimport { base, LeftContent, RightContent, StyledContent, TabItemValue } from './VerticalTabItem.styles';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\n\nexport const verticalTabItemRoot = (Root: RootProps<HTMLButtonElement, VerticalTabItemProps>) =>\n    forwardRef<HTMLButtonElement, VerticalTabItemProps>((props, outerRef) => {\n        const {\n            size,\n            view,\n            selected,\n            disabled = false,\n            children,\n            value,\n            contentLeft,\n            contentRight,\n            onIndexChange,\n            itemIndex,\n            tabIndex,\n            className,\n            onClick,\n            maxItemWidth: maxWidth = 'auto',\n            ...rest\n        } = props;\n\n        const innerRef = useRef<HTMLButtonElement>(null);\n        const ref = useForkRef(outerRef, innerRef);\n        const refs = useContext(TabsContext);\n\n        const role = 'tab';\n\n        const selectedClass = selected ? classes.selectedTabsItem : undefined;\n        const truncateClass = maxWidth !== 'auto' ? classes.tabsTruncate : undefined;\n\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        useLayoutEffect(() => {\n            if (!selected || !innerRef.current) {\n                return;\n            }\n\n            const scrollEl = innerRef.current.parentElement?.parentElement;\n            if (!scrollEl) {\n                return;\n            }\n\n            const scrollElStyle = getComputedStyle(scrollEl);\n            scrollEl.scrollTo({\n                top: innerRef.current.offsetTop - parseInt(scrollElStyle.paddingTop, 10),\n            });\n        }, [selected]);\n\n        const onItemFocus = useCallback<React.FocusEventHandler>(\n            (event) => {\n                if (disabled) {\n                    return;\n                }\n\n                if (!hasKeyNavigation && innerRef?.current) {\n                    innerRef.current.scrollTo({\n                        top: innerRef.current.offsetTop,\n                        behavior: 'smooth',\n                    });\n\n                    return;\n                }\n\n                if (!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            if (!onClick) {\n                return;\n            }\n\n            onClick(event);\n        };\n\n        return (\n            <Root\n                ref={ref}\n                disabled={disabled}\n                role={role}\n                view={view}\n                size={size}\n                onFocus={onItemFocus}\n                tabIndex={hasKeyNavigation ? navigationTabIndex : tabIndex}\n                className={cx(selectedClass, truncateClass, className)}\n                onClick={handleClick}\n                {...rest}\n                style={{\n                    ...rest.style,\n                    maxWidth,\n                }}\n            >\n                <>\n                    {contentLeft && <LeftContent className={classes.tabLeftContent}>{contentLeft}</LeftContent>}\n                    <StyledContent className={classes.tabContent}>{children}</StyledContent>\n                    {!contentRight && value && <TabItemValue>{value}</TabItemValue>}\n                    {!value && contentRight && (\n                        <RightContent className={classes.tabRightContent}>{contentRight}</RightContent>\n                    )}\n                </>\n            </Root>\n        );\n    });\n\nexport const verticalTabItemConfig = {\n    name: 'VerticalTabItem',\n    tag: 'button',\n    layout: verticalTabItemRoot,\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    },\n    defaults: {\n        view: 'divider',\n    },\n};\n"],"names":["verticalTabItemRoot","Root","forwardRef","props","outerRef","size","view","selected","disabled","children","value","contentLeft","contentRight","onIndexChange","itemIndex","tabIndex","className","onClick","maxItemWidth","maxWidth","rest","innerRef","useRef","ref","useForkRef","refs","useContext","TabsContext","role","selectedClass","classes","selectedTabsItem","undefined","truncateClass","tabsTruncate","hasKeyNavigation","navigationTabIndex","current","useEffect","register","unregister","useLayoutEffect","scrollEl","parentElement","scrollElStyle","getComputedStyle","scrollTo","top","offsetTop","parseInt","paddingTop","onItemFocus","useCallback","event","behavior","focusIndex","items","findIndex","itemRef","target","setCurrent","handleClick","React","createElement","_extends","onFocus","cx","style","Fragment","LeftContent","tabLeftContent","StyledContent","tabContent","TabItemValue","RightContent","tabRightContent","verticalTabItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","defaults"],"mappings":"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"}

package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js

@@ -5,27 +5,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('@linaria/react');
 
-var StyledContent = /*#__PURE__*/react.styled('div')({
+const StyledContent = /*#__PURE__*/react.styled('div')({
   name: "StyledContent",
-  "class": "s1vnvg8i",
+  class: "s1vnvg8i",
   propsAsIs: false
 });
-var TabItemValue = /*#__PURE__*/react.styled('span')({
+const TabItemValue = /*#__PURE__*/react.styled('span')({
   name: "TabItemValue",
-  "class": "t4s0t81",
+  class: "t4s0t81",
   propsAsIs: false
 });
-var RightContent = /*#__PURE__*/react.styled('div')({
+const RightContent = /*#__PURE__*/react.styled('div')({
   name: "RightContent",
-  "class": "rur46hh",
+  class: "rur46hh",
   propsAsIs: false
 });
-var LeftContent = /*#__PURE__*/react.styled('div')({
+const LeftContent = /*#__PURE__*/react.styled('div')({
   name: "LeftContent",
-  "class": "l1ms3p4x",
+  class: "l1ms3p4x",
   propsAsIs: false
 });
-var base = "b1yz2xa4";
+const base = "b1yz2xa4";
 
 exports.LeftContent = LeftContent;
 exports.RightContent = RightContent;