@sberbusiness/triplex-next 0.45.0 → 0.47.0

package/components/TabsLine/components/TabsLineDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsLineDropdown.js","sources":["../../../../src/components/TabsLine/components/TabsLineDropdown.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { TestProps } from \"../../../types/CoreTypes\";\nimport { Dropdown, DropdownList, DropdownListContext, EDropdownWidth } from \"../../Dropdown\";\nimport { CaretdownStrokeSrvIcon16 } from \"@sberbusiness/icons-next\";\nimport { isKey } from \"../../../utils/keyboard\";\nimport { uniqueId } from \"lodash-es\";\nimport { ITabsLineItemProps } from \"./TabsLineItem\";\nimport styles from \"../styles/TabsLine.module.less\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { Text, EFontType } from \"../../Typography\";\nimport { tabsLineSizeToTextSizeMap } from \"../utils\";\n\n/** Свойства компонента TabsLineDropdown. */\ninterface ITabsLineDropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Табы дропдауна. */\n    tabs: ITabsLineItemProps[];\n    /** Выбранный таб находится в дропдауне. */\n    active: boolean;\n    /** Текст таргет кнопки дропдауна. */\n    label: string;\n    /** Коллбэк выбора таба. */\n    onClickTab: (tab: ITabsLineItemProps) => void;\n    /** Выбранный таб. */\n    selected?: ITabsLineItemProps;\n    /** Размер таба кнопки дропдауна. */\n    size?: EComponentSize;\n    /** Атрибуты кнопки дропдауна. */\n    targetHtmlAttributes?: React.HTMLAttributes<HTMLButtonElement> & TestProps;\n}\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\nexport const TabsLineDropdown: React.FC<ITabsLineDropdownProps> = ({\n    tabs,\n    active,\n    label,\n    onClickTab,\n    selected,\n    size = EComponentSize.MD,\n    targetHtmlAttributes,\n    ...rest\n}) => {\n    const [activeDescendant, setActiveDescendant] = useState<string | undefined>(undefined);\n    const [opened, setOpened] = useState(false);\n    const [focused, setFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n\n    const targetRef = useRef<HTMLDivElement>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const instanceId = useRef(uniqueId());\n\n    useEffect(() => {\n        if (!opened) {\n            return;\n        }\n\n        const handleClickOutside = (event: Event) => {\n            if (\n                !targetRef.current?.contains(event.target as Node) &&\n                !dropdownRef.current?.contains(event.target as Node)\n            ) {\n                setOpened(false);\n            }\n        };\n\n        document.addEventListener(\"mouseup\", handleClickOutside);\n\n        return () => {\n            document.removeEventListener(\"mouseup\", handleClickOutside);\n        };\n    }, [opened]);\n\n    const handleTargetClick = () => {\n        setOpened(!opened);\n    };\n\n    const handleTargetKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (!opened) {\n            // При нажатии Enter, Space, ArrowUp или ArrowDown открывается выпадающий список.\n            if (isKey(event.code, \"ARROW_UP\") || isKey(event.code, \"ARROW_DOWN\")) {\n                event.preventDefault();\n                setOpened(true);\n            }\n        }\n\n        if (opened) {\n            // При нажатии Tab или Esc закрывается выпадающий список.\n            if (isKey(event.code, \"TAB\") || isKey(event.code, \"ESCAPE\")) {\n                setOpened(false);\n            }\n        }\n    };\n\n    const handleClickTab = (tab: ITabsLineItemProps) => {\n        onClickTab(tab);\n        setOpened(!opened);\n    };\n\n    const renderTarget = () => {\n        const { onFocus, onBlur, onMouseEnter, onMouseLeave, ...restTargetHtmlAttributes } = targetHtmlAttributes || {};\n\n        const buttonClassName = clsx(styles.tab, SIZE_TO_CLASS_NAME_MAP[size], styles.dropdownTarget, {\n            [styles.active]: active,\n        });\n\n        const caretClassName = clsx(styles.dropdownTargetCaret, { [styles.opened]: opened });\n\n        const handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(true);\n            onFocus?.(e);\n        };\n\n        const handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(false);\n            onBlur?.(e);\n        };\n\n        const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {\n            setHovered(true);\n            onMouseEnter?.(e);\n        };\n\n        const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n            setHovered(false);\n            onMouseLeave?.(e);\n        };\n\n        return (\n            <button\n                {...restTargetHtmlAttributes}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onMouseEnter={handleMouseEnter}\n                onMouseLeave={handleMouseLeave}\n                className={buttonClassName}\n                onClick={handleTargetClick}\n                onKeyDown={handleTargetKeyDown}\n                type=\"button\"\n                role=\"tab\"\n                aria-haspopup=\"menu\"\n                aria-expanded={opened}\n                aria-controls={instanceId.current}\n                aria-activedescendant={activeDescendant}\n            >\n                <span className={styles.tabInner}>\n                    <span className={styles.dropdownTargetInner}>\n                        <Text\n                            size={tabsLineSizeToTextSizeMap[size]}\n                            type={active || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY}\n                        >\n                            {label}\n                        </Text>\n                        <CaretdownStrokeSrvIcon16 className={caretClassName} paletteIndex={5} />\n                    </span>\n                </span>\n            </button>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <Dropdown\n                className={styles.dropdown}\n                opened={opened}\n                setOpened={setOpened}\n                size={size}\n                width={EDropdownWidth.MIN_TARGET}\n                targetRef={targetRef}\n                ref={dropdownRef}\n            >\n                <DropdownListContext.Provider value={{ activeDescendant, setActiveDescendant }}>\n                    <DropdownList dropdownOpened={opened} id={instanceId.current} size={size}>\n                        {tabs.map((tab) => {\n                            const { id, label, showNotificationIcon, ...htmlDivAttributes } = tab;\n                            const className = clsx(styles.dropdownItem);\n\n                            return (\n                                <DropdownList.Item\n                                    {...(htmlDivAttributes as React.HTMLAttributes<HTMLDivElement>)}\n                                    className={className}\n                                    id={id}\n                                    key={id}\n                                    onSelect={() => {\n                                        handleClickTab(tab);\n                                    }}\n                                    selected={tab === selected}\n                                    showNotificationIcon={showNotificationIcon}\n                                >\n                                    <span className={styles.dropdownItemInner}>{label}</span>\n                                </DropdownList.Item>\n                            );\n                        })}\n                    </DropdownList>\n                </DropdownListContext.Provider>\n            </Dropdown>\n        );\n    };\n\n    return (\n        <div className={styles.tabsLineDropdown} ref={targetRef} {...rest}>\n            {/* eslint-disable-next-line react-hooks/refs */}\n            {renderTarget()}\n            {/* eslint-disable-next-line react-hooks/refs */}\n            {renderDropdown()}\n        </div>\n    );\n};\n"],"names":["label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,yBAAyB,yBAAyB,MAAM;AAEvD,MAAM,mBAAqD,CAAC;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,eAAe;AAAA,EACtB;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,MAAS;AACtF,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,aAAa,OAAO,UAAU;AAEpC,YAAU,MAAM;AACZ,QAAI,CAAC,QAAQ;AACT;AAAA,IACJ;AAEA,UAAM,qBAAqB,CAAC,UAAiB;;AACzC,UACI,GAAC,eAAU,YAAV,mBAAmB,SAAS,MAAM,YACnC,GAAC,iBAAY,YAAZ,mBAAqB,SAAS,MAAM,UACvC;AACE,kBAAU,KAAK;AAAA,MACnB;AAAA,IACJ;AAEA,aAAS,iBAAiB,WAAW,kBAAkB;AAEvD,WAAO,MAAM;AACT,eAAS,oBAAoB,WAAW,kBAAkB;AAAA,IAC9D;AAAA,EACJ,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,oBAAoB,MAAM;AAC5B,cAAU,CAAC,MAAM;AAAA,EACrB;AAEA,QAAM,sBAAsB,CAAC,UAAkD;AAC3E,QAAI,CAAC,QAAQ;AAET,UAAI,MAAM,MAAM,MAAM,UAAU,KAAK,MAAM,MAAM,MAAM,YAAY,GAAG;AAClE,cAAM,eAAA;AACN,kBAAU,IAAI;AAAA,MAClB;AAAA,IACJ;AAEA,QAAI,QAAQ;AAER,UAAI,MAAM,MAAM,MAAM,KAAK,KAAK,MAAM,MAAM,MAAM,QAAQ,GAAG;AACzD,kBAAU,KAAK;AAAA,MACnB;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,iBAAiB,CAAC,QAA4B;AAChD,eAAW,GAAG;AACd,cAAU,CAAC,MAAM;AAAA,EACrB;AAEA,QAAM,eAAe,MAAM;AACvB,UAAM,EAAE,SAAS,QAAQ,cAAc,cAAc,GAAG,yBAAA,IAA6B,wBAAwB,CAAA;AAE7G,UAAM,kBAAkB,KAAK,OAAO,KAAK,uBAAuB,IAAI,GAAG,OAAO,gBAAgB;AAAA,MAC1F,CAAC,OAAO,MAAM,GAAG;AAAA,IAAA,CACpB;AAED,UAAM,iBAAiB,KAAK,OAAO,qBAAqB,EAAE,CAAC,OAAO,MAAM,GAAG,QAAQ;AAEnF,UAAM,cAAc,CAAC,MAA2C;AAC5D,iBAAW,IAAI;AACf,yCAAU;AAAA,IACd;AAEA,UAAM,aAAa,CAAC,MAA2C;AAC3D,iBAAW,KAAK;AAChB,uCAAS;AAAA,IACb;AAEA,UAAM,mBAAmB,CAAC,MAA2C;AACjE,iBAAW,IAAI;AACf,mDAAe;AAAA,IACnB;AAEA,UAAM,mBAAmB,CAAC,MAA2C;AACjE,iBAAW,KAAK;AAChB,mDAAe;AAAA,IACnB;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,cAAc;AAAA,QACd,WAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,iBAAe,WAAW;AAAA,QAC1B,yBAAuB;AAAA,QAEvB,UAAA,oBAAC,UAAK,WAAW,OAAO,UACpB,UAAA,qBAAC,QAAA,EAAK,WAAW,OAAO,qBACpB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAM,0BAA0B,IAAI;AAAA,cACpC,MAAM,UAAU,WAAW,UAAU,UAAU,UAAU,UAAU;AAAA,cAElE,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEL,oBAAC,0BAAA,EAAyB,WAAW,gBAAgB,cAAc,EAAA,CAAG;AAAA,QAAA,EAAA,CAC1E,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AAEA,QAAM,iBAAiB,MAAM;AACzB,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,OAAO;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,eAAe;AAAA,QACtB;AAAA,QACA,KAAK;AAAA,QAEL,UAAA,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,EAAE,kBAAkB,uBACrD,UAAA,oBAAC,gBAAa,gBAAgB,QAAQ,IAAI,WAAW,SAAS,MACzD,UAAA,KAAK,IAAI,CAAC,QAAQ;AACf,gBAAM,EAAE,IAAI,OAAAA,QAAO,sBAAsB,GAAG,sBAAsB;AAClE,gBAAM,YAAY,KAAK,OAAO,YAAY;AAE1C,iBACI;AAAA,YAAC,aAAa;AAAA,YAAb;AAAA,cACI,GAAI;AAAA,cACL;AAAA,cACA;AAAA,cACA,KAAK;AAAA,cACL,UAAU,MAAM;AACZ,+BAAe,GAAG;AAAA,cACtB;AAAA,cACA,UAAU,QAAQ;AAAA,cAClB;AAAA,YAAA;AAAA,gCAEC,QAAA,EAAK,WAAW,OAAO,mBAAoB,UAAAA,OAAAA,CAAM;AAAA,UAAA;AAAA,QAG9D,CAAC,GACL,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AAEA,SACI,qBAAC,SAAI,WAAW,OAAO,kBAAkB,KAAK,WAAY,GAAG,MAExD,UAAA;AAAA,IAAA,aAAA;AAAA,IAEA,eAAA;AAAA,EAAe,GACpB;AAER;"}
+{"version":3,"file":"TabsLineDropdown.js","sources":["../../../../src/components/TabsLine/components/TabsLineDropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport { CaretdownStrokeSrvIcon16 } from \"@sberbusiness/icons-next\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { TestProps } from \"../../../types/CoreTypes\";\nimport { isKey } from \"../../../utils/keyboard\";\nimport { Dropdown, DropdownList, DropdownListContext, EDropdownWidth } from \"../../Dropdown\";\nimport { Text, EFontType } from \"../../Typography\";\nimport { tabsLineSizeToTextSizeMap } from \"../utils\";\nimport { ITabsLineItemProps } from \"./TabsLineItem\";\nimport styles from \"../styles/TabsLine.module.less\";\n\n/** Свойства компонента TabsLineDropdown. */\ninterface ITabsLineDropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Табы дропдауна. */\n    tabs: ITabsLineItemProps[];\n    /** Выбранный таб находится в дропдауне. */\n    active: boolean;\n    /** Текст таргет кнопки дропдауна. */\n    label: string;\n    /** Коллбэк выбора таба. */\n    onClickTab: (tab: ITabsLineItemProps) => void;\n    /** Выбранный таб. */\n    selected?: ITabsLineItemProps;\n    /** Размер таба кнопки дропдауна. По умолчанию EComponentSize.MD. */\n    size?: EComponentSize;\n    /** Атрибуты кнопки дропдауна. */\n    targetHtmlAttributes?: React.HTMLAttributes<HTMLButtonElement> & TestProps;\n}\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/** Таб-кнопка TabsLine, раскрывающая выпадающий список с не поместившимися табами. */\nexport const TabsLineDropdown = React.forwardRef<HTMLDivElement, ITabsLineDropdownProps>((props, ref) => {\n    const {\n        className,\n        tabs,\n        active,\n        label,\n        onClickTab,\n        selected,\n        size = EComponentSize.MD,\n        targetHtmlAttributes,\n        ...htmlDivAttributes\n    } = props;\n\n    const [activeDescendant, setActiveDescendant] = useState<string | undefined>(undefined);\n    const [opened, setOpened] = useState(false);\n    const [focused, setFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n\n    const targetRef = useRef<HTMLDivElement | null>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const instanceId = useRef(uniqueId());\n\n    /** Корневой элемент нужен и снаружи (forwarded ref), и внутри — по нему позиционируется Dropdown. */\n    const setRootRef = useCallback(\n        (node: HTMLDivElement | null) => {\n            targetRef.current = node;\n\n            if (typeof ref === \"function\") {\n                ref(node);\n            } else if (ref) {\n                ref.current = node;\n            }\n        },\n        [ref],\n    );\n\n    useEffect(() => {\n        if (!opened) {\n            return;\n        }\n\n        const handleClickOutside = (event: Event) => {\n            if (\n                !targetRef.current?.contains(event.target as Node) &&\n                !dropdownRef.current?.contains(event.target as Node)\n            ) {\n                setOpened(false);\n            }\n        };\n\n        document.addEventListener(\"mouseup\", handleClickOutside);\n\n        return () => {\n            document.removeEventListener(\"mouseup\", handleClickOutside);\n        };\n    }, [opened]);\n\n    const handleTargetClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setOpened((prevOpened) => !prevOpened);\n        targetHtmlAttributes?.onClick?.(event);\n    };\n\n    const handleTargetKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (!opened) {\n            // Enter и Space раскрывают список нативной активацией кнопки, ArrowUp/ArrowDown обрабатываются здесь.\n            if (isKey(event.code, \"ARROW_UP\") || isKey(event.code, \"ARROW_DOWN\")) {\n                event.preventDefault();\n                setOpened(true);\n            }\n        } else {\n            // При нажатии Tab или Esc закрывается выпадающий список.\n            if (isKey(event.code, \"TAB\") || isKey(event.code, \"ESCAPE\")) {\n                setOpened(false);\n            }\n        }\n\n        targetHtmlAttributes?.onKeyDown?.(event);\n    };\n\n    const handleClickTab = (tab: ITabsLineItemProps) => {\n        onClickTab(tab);\n        setOpened(false);\n    };\n\n    const handleTargetFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        setFocused(true);\n        targetHtmlAttributes?.onFocus?.(event);\n    };\n\n    const handleTargetBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n        setFocused(false);\n        targetHtmlAttributes?.onBlur?.(event);\n    };\n\n    const handleTargetMouseEnter = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setHovered(true);\n        targetHtmlAttributes?.onMouseEnter?.(event);\n    };\n\n    const handleTargetMouseLeave = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setHovered(false);\n        targetHtmlAttributes?.onMouseLeave?.(event);\n    };\n\n    const renderTarget = () => {\n        // className и обработчики выделяем, чтобы не потерять переданные потребителем:\n        // ниже идут одноимённые внутренние props, и спред их бы не пережил.\n        // onClick и onKeyDown деструктурируются только ради исключения из спреда —\n        // вызываются они внутри handleTargetClick / handleTargetKeyDown.\n        const {\n            className: targetClassName,\n            onFocus,\n            onBlur,\n            onMouseEnter,\n            onMouseLeave,\n            onClick,\n            onKeyDown,\n            ...restTargetHtmlAttributes\n        } = targetHtmlAttributes || {};\n\n        return (\n            <button\n                {...restTargetHtmlAttributes}\n                onFocus={handleTargetFocus}\n                onBlur={handleTargetBlur}\n                onMouseEnter={handleTargetMouseEnter}\n                onMouseLeave={handleTargetMouseLeave}\n                className={clsx(\n                    styles.tab,\n                    SIZE_TO_CLASS_NAME_MAP[size],\n                    styles.dropdownTarget,\n                    {\n                        [styles.active]: active,\n                    },\n                    targetClassName,\n                )}\n                onClick={handleTargetClick}\n                onKeyDown={handleTargetKeyDown}\n                type=\"button\"\n                role=\"tab\"\n                aria-haspopup=\"menu\"\n                aria-expanded={opened}\n                aria-controls={instanceId.current}\n                aria-activedescendant={activeDescendant}\n            >\n                <span className={styles.dropdownTargetInner}>\n                    <Text\n                        size={tabsLineSizeToTextSizeMap[size]}\n                        type={active || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY}\n                    >\n                        {label}\n                    </Text>\n                    <CaretdownStrokeSrvIcon16\n                        className={clsx(styles.dropdownTargetCaret, { [styles.opened]: opened })}\n                        paletteIndex={5}\n                    />\n                </span>\n            </button>\n        );\n    };\n\n    const renderDropdown = () => (\n        <Dropdown\n            className={styles.dropdown}\n            opened={opened}\n            setOpened={setOpened}\n            size={size}\n            width={EDropdownWidth.MIN_TARGET}\n            targetRef={targetRef}\n            ref={dropdownRef}\n        >\n            <DropdownListContext.Provider value={{ activeDescendant, setActiveDescendant }}>\n                <DropdownList dropdownOpened={opened} id={instanceId.current} size={size}>\n                    {tabs.map((tab, index) => {\n                        const { id, label: tabLabel, showNotificationIcon, ...htmlButtonAttributes } = tab;\n\n                        return (\n                            <DropdownList.Item\n                                // Свойства таба типизированы под <button>, а пункт списка рендерит <div>.\n                                // Набор атрибутов совпадает, расходятся только дженерики обработчиков событий.\n                                {...(htmlButtonAttributes as React.HTMLAttributes<HTMLDivElement>)}\n                                // DOM id выводим из instanceId, а не из tab.id: два TabsLine с одинаковыми\n                                // tab.id иначе дают дублирующиеся id, и aria-activedescendant адресует\n                                // пункт чужого экземпляра. Исходный tab.id уходит в onClickTab.\n                                id={`${instanceId.current}-item-${index}`}\n                                key={id}\n                                onSelect={() => {\n                                    handleClickTab(tab);\n                                }}\n                                selected={tab === selected}\n                                showNotificationIcon={showNotificationIcon}\n                            >\n                                {tabLabel}\n                            </DropdownList.Item>\n                        );\n                    })}\n                </DropdownList>\n            </DropdownListContext.Provider>\n        </Dropdown>\n    );\n\n    return (\n        <div {...htmlDivAttributes} className={clsx(styles.tabsLineDropdown, className)} ref={setRootRef}>\n            {renderTarget()}\n            {renderDropdown()}\n        </div>\n    );\n});\n\nTabsLineDropdown.displayName = \"TabsLineDropdown\";\n"],"names":[],"mappings":"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"}

package/components/TabsLine/components/TabsLineItem.js

@@ -1,16 +1,18 @@
-import { jsx } from "react/jsx-runtime";
-import React, { useState, createElement } from "react";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
+import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
 import { Badge } from "../../Badge/Badge.js";
-import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { Text } from "../../Typography/Text.js";
-import { tabsLineSizeToTextSizeMap } from "../utils.js";
 import { EFontType } from "../../Typography/enums.js";
-import { s as styles } from "../../../chunks/TabsLine.module-dwyKZLoq.js";
-const sizeToClassNameMap = createSizeToClassNameMap(styles);
+import { tabsLineSizeToTextSizeMap } from "../utils.js";
+import { s as styles } from "../../../chunks/TabsLine.module-IS5FiKUt.js";
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
 const TabsLineItem = React.forwardRef(
   ({
+    className,
+    // id — идентификатор таба в модели данных, а не DOM-атрибут: на <button> он намеренно не уходит.
     id,
     label,
     selected,
@@ -24,38 +26,52 @@ const TabsLineItem = React.forwardRef(
   }, ref) => {
     const [focused, setFocused] = useState(false);
     const [hovered, setHovered] = useState(false);
-    const handleFocus = (e) => {
+    const handleFocus = (event) => {
       setFocused(true);
-      onFocus == null ? void 0 : onFocus(e);
+      onFocus == null ? void 0 : onFocus(event);
     };
-    const handleBlur = (e) => {
+    const handleBlur = (event) => {
       setFocused(false);
-      onBlur == null ? void 0 : onBlur(e);
+      onBlur == null ? void 0 : onBlur(event);
+    };
+    const handleMouseEnter = (event) => {
+      setHovered(true);
+      onMouseEnter == null ? void 0 : onMouseEnter(event);
+    };
+    const handleMouseLeave = (event) => {
+      setHovered(false);
+      onMouseLeave == null ? void 0 : onMouseLeave(event);
     };
-    return /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         onFocus: handleFocus,
         onBlur: handleBlur,
-        onMouseEnter: () => setHovered(true),
-        onMouseLeave: () => setHovered(false),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
         ...htmlButtonAttributes,
-        key: id,
-        className: clsx(styles.tab, sizeToClassNameMap[size], { [styles.active]: Boolean(selected) }),
+        className: clsx(
+          styles.tab,
+          SIZE_TO_CLASS_NAME_MAP[size],
+          { [styles.active]: Boolean(selected) },
+          className
+        ),
         role: "tab",
         "aria-selected": selected,
-        ref
-      },
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          size: tabsLineSizeToTextSizeMap[size],
-          type: selected || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY,
-          children: label
-        }
-      ),
-      showNotificationIcon && /* @__PURE__ */ jsx(Badge.Dot, { size, className: styles.notificationIcon })
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: tabsLineSizeToTextSizeMap[size],
+              type: selected || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY,
+              children: label
+            }
+          ),
+          showNotificationIcon && /* @__PURE__ */ jsx(Badge.Dot, { size, className: styles.notificationIcon })
+        ]
+      }
     );
   }
 );

package/components/TabsLine/components/TabsLineItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsLineItem.js","sources":["../../../../src/components/TabsLine/components/TabsLineItem.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { TestProps } from \"../../../types/CoreTypes\";\nimport clsx from \"clsx\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { Badge } from \"../../Badge/Badge\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums\";\nimport { Text } from \"../../Typography/Text\";\nimport { tabsLineSizeToTextSizeMap } from \"../utils\";\nimport { EFontType } from \"../../Typography/enums\";\nimport styles from \"../styles/TabsLine.module.less\";\n\n/** Свойства TabsLineItem. */\nexport interface ITabsLineItemProps extends React.HTMLAttributes<HTMLButtonElement>, TestProps {\n    /** Таб выбран. */\n    selected?: boolean;\n    /** Идентификатор таба. */\n    id: string;\n    /** Отображаемое значение. */\n    label: string;\n    /** Флаг отображения значка новых уведомлений. */\n    showNotificationIcon?: boolean;\n    /** Размер таба. */\n    size?: EComponentSize;\n}\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Компонент TabsLineItem. */\nexport const TabsLineItem = React.forwardRef<HTMLButtonElement, ITabsLineItemProps>(\n    (\n        {\n            id,\n            label,\n            selected,\n            showNotificationIcon,\n            size = EComponentSize.MD,\n            onFocus,\n            onBlur,\n            onMouseEnter,\n            onMouseLeave,\n            ...htmlButtonAttributes\n        },\n        ref,\n    ) => {\n        const [focused, setFocused] = useState(false);\n        const [hovered, setHovered] = useState(false);\n\n        const handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(true);\n            onFocus?.(e);\n        };\n\n        const handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(false);\n            onBlur?.(e);\n        };\n\n        return (\n            <button\n                type=\"button\"\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onMouseEnter={() => setHovered(true)}\n                onMouseLeave={() => setHovered(false)}\n                {...htmlButtonAttributes}\n                key={id}\n                className={clsx(styles.tab, sizeToClassNameMap[size], { [styles.active]: Boolean(selected) })}\n                role=\"tab\"\n                aria-selected={selected}\n                ref={ref}\n            >\n                <Text\n                    size={tabsLineSizeToTextSizeMap[size]}\n                    type={selected || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY}\n                >\n                    {label}\n                </Text>\n                {showNotificationIcon && <Badge.Dot size={size} className={styles.notificationIcon} />}\n            </button>\n        );\n    },\n);\n\nTabsLineItem.displayName = \"TabsLineItem\";\n"],"names":[],"mappings":";;;;;;;;;;AAyBA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,eAAe,MAAM;AAAA,EAC9B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,UAAM,cAAc,CAAC,MAA2C;AAC5D,iBAAW,IAAI;AACf,yCAAU;AAAA,IACd;AAEA,UAAM,aAAa,CAAC,MAA2C;AAC3D,iBAAW,KAAK;AAChB,uCAAS;AAAA,IACb;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,cAAc,MAAM,WAAW,IAAI;AAAA,QACnC,cAAc,MAAM,WAAW,KAAK;AAAA,QACnC,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,KAAK,OAAO,KAAK,mBAAmB,IAAI,GAAG,EAAE,CAAC,OAAO,MAAM,GAAG,QAAQ,QAAQ,GAAG;AAAA,QAC5F,MAAK;AAAA,QACL,iBAAe;AAAA,QACf;AAAA,MAAA;AAAA,MAEA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAM,0BAA0B,IAAI;AAAA,UACpC,MAAM,YAAY,WAAW,UAAU,UAAU,UAAU,UAAU;AAAA,UAEpE,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,4CAAyB,MAAM,KAAN,EAAU,MAAY,WAAW,OAAO,iBAAA,CAAkB;AAAA,IAAA;AAAA,EAGhG;AACJ;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"TabsLineItem.js","sources":["../../../../src/components/TabsLine/components/TabsLineItem.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport clsx from \"clsx\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { TestProps } from \"../../../types/CoreTypes\";\nimport { Badge } from \"../../Badge/Badge\";\nimport { Text } from \"../../Typography/Text\";\nimport { EFontType } from \"../../Typography/enums\";\nimport { tabsLineSizeToTextSizeMap } from \"../utils\";\nimport styles from \"../styles/TabsLine.module.less\";\n\n/** Свойства компонента TabsLineItem. */\nexport interface ITabsLineItemProps extends React.HTMLAttributes<HTMLButtonElement>, TestProps {\n    /** Таб выбран. По умолчанию false. */\n    selected?: boolean;\n    /** Идентификатор таба. Сопоставляется с selectedId и приходит в onChangeTab. В DOM не попадает. */\n    id: string;\n    /** Отображаемое значение. */\n    label: string;\n    /** Флаг отображения значка новых уведомлений. По умолчанию false. */\n    showNotificationIcon?: boolean;\n    /** Размер таба. По умолчанию EComponentSize.MD. */\n    size?: EComponentSize;\n}\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/** Кнопка одного таба TabsLine: текст и опциональный значок новых уведомлений. */\nexport const TabsLineItem = React.forwardRef<HTMLButtonElement, ITabsLineItemProps>(\n    (\n        {\n            className,\n            // id — идентификатор таба в модели данных, а не DOM-атрибут: на <button> он намеренно не уходит.\n            id,\n            label,\n            selected,\n            showNotificationIcon,\n            size = EComponentSize.MD,\n            onFocus,\n            onBlur,\n            onMouseEnter,\n            onMouseLeave,\n            ...htmlButtonAttributes\n        },\n        ref,\n    ) => {\n        const [focused, setFocused] = useState(false);\n        const [hovered, setHovered] = useState(false);\n\n        const handleFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(true);\n            onFocus?.(event);\n        };\n\n        const handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(false);\n            onBlur?.(event);\n        };\n\n        const handleMouseEnter = (event: React.MouseEvent<HTMLButtonElement>) => {\n            setHovered(true);\n            onMouseEnter?.(event);\n        };\n\n        const handleMouseLeave = (event: React.MouseEvent<HTMLButtonElement>) => {\n            setHovered(false);\n            onMouseLeave?.(event);\n        };\n\n        return (\n            <button\n                type=\"button\"\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onMouseEnter={handleMouseEnter}\n                onMouseLeave={handleMouseLeave}\n                {...htmlButtonAttributes}\n                className={clsx(\n                    styles.tab,\n                    SIZE_TO_CLASS_NAME_MAP[size],\n                    { [styles.active]: Boolean(selected) },\n                    className,\n                )}\n                role=\"tab\"\n                aria-selected={selected}\n                ref={ref}\n            >\n                <Text\n                    size={tabsLineSizeToTextSizeMap[size]}\n                    type={selected || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY}\n                >\n                    {label}\n                </Text>\n                {showNotificationIcon && <Badge.Dot size={size} className={styles.notificationIcon} />}\n            </button>\n        );\n    },\n);\n\nTabsLineItem.displayName = \"TabsLineItem\";\n"],"names":[],"mappings":";;;;;;;;;;AAyBA,MAAM,yBAAyB,yBAAyB,MAAM;AAGvD,MAAM,eAAe,MAAM;AAAA,EAC9B,CACI;AAAA,IACI;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,UAAM,cAAc,CAAC,UAA+C;AAChE,iBAAW,IAAI;AACf,yCAAU;AAAA,IACd;AAEA,UAAM,aAAa,CAAC,UAA+C;AAC/D,iBAAW,KAAK;AAChB,uCAAS;AAAA,IACb;AAEA,UAAM,mBAAmB,CAAC,UAA+C;AACrE,iBAAW,IAAI;AACf,mDAAe;AAAA,IACnB;AAEA,UAAM,mBAAmB,CAAC,UAA+C;AACrE,iBAAW,KAAK;AAChB,mDAAe;AAAA,IACnB;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,cAAc;AAAA,QACb,GAAG;AAAA,QACJ,WAAW;AAAA,UACP,OAAO;AAAA,UACP,uBAAuB,IAAI;AAAA,UAC3B,EAAE,CAAC,OAAO,MAAM,GAAG,QAAQ,QAAQ,EAAA;AAAA,UACnC;AAAA,QAAA;AAAA,QAEJ,MAAK;AAAA,QACL,iBAAe;AAAA,QACf;AAAA,QAEA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAM,0BAA0B,IAAI;AAAA,cACpC,MAAM,YAAY,WAAW,UAAU,UAAU,UAAU,UAAU;AAAA,cAEpE,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEJ,4CAAyB,MAAM,KAAN,EAAU,MAAY,WAAW,OAAO,iBAAA,CAAkB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhG;AACJ;AAEA,aAAa,cAAc;"}

package/components/TabsLine/components/TabsLineMobile.js

@@ -1,25 +1,30 @@
 import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { TabsLineItem } from "./TabsLineItem.js";
-const tabsLineMobileWrapper = "tabsLineMobileWrapper__7fe848f2";
-const tabsLineMobile = "tabsLineMobile__eea88372";
+const tabsLineMobileWrapper = "tabsLineMobileWrapper__c5e486d2";
+const tabsLineMobile = "tabsLineMobile__e597f07d";
 const styles = {
   tabsLineMobileWrapper,
   tabsLineMobile
 };
-const TabsLineMobile = ({ onChangeTab, selectedId, tabs }) => {
-  if (!tabs.length) {
-    return null;
-  }
-  const renderTab = ({ selected, ...item }) => {
-    const handleClick = (event) => {
-      var _a;
-      onChangeTab(item.id);
-      (_a = item.onClick) == null ? void 0 : _a.call(item, event);
+const TabsLineMobile = React.forwardRef(
+  // size намеренно не используется — он исключён из спреда, чтобы не уйти на <div> как невалидный атрибут.
+  ({ className, onChangeTab, selectedId, size, tabs, ...htmlDivAttributes }, ref) => {
+    const renderTab = ({ selected, onClick, ...item }) => {
+      const handleClick = (event) => {
+        onChangeTab(item.id);
+        onClick == null ? void 0 : onClick(event);
+      };
+      return /* @__PURE__ */ jsx(TabsLineItem, { selected: selectedId === item.id, ...item, onClick: handleClick }, item.id);
     };
-    return /* @__PURE__ */ jsx(TabsLineItem, { selected: selectedId === item.id, ...item, onClick: handleClick }, item.id);
-  };
-  return /* @__PURE__ */ jsx("div", { className: styles.tabsLineMobileWrapper, children: /* @__PURE__ */ jsx("div", { className: styles.tabsLineMobile, children: tabs.map(renderTab) }) });
-};
+    if (tabs.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { ...htmlDivAttributes, className: clsx(styles.tabsLineMobileWrapper, className), ref, children: /* @__PURE__ */ jsx("div", { className: styles.tabsLineMobile, children: tabs.map(renderTab) }) });
+  }
+);
+TabsLineMobile.displayName = "TabsLineMobile";
 export {
   TabsLineMobile
 };

package/components/TabsLine/components/TabsLineMobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsLineMobile.js","sources":["../../../../src/components/TabsLine/components/TabsLineMobile.tsx"],"sourcesContent":["import React from \"react\";\nimport { ITabsLineItemProps, TabsLineItem } from \"./TabsLineItem\";\nimport { ITabsLineBaseProps } from \"../types\";\nimport styles from \"../styles/TabsLineMobile.module.less\";\n\n/** Свойства компонента ITabsLineMobileProps. */\ninterface ITabsLineMobileProps extends ITabsLineBaseProps {}\n\n/** Компонент TabsLineMobile. */\nexport const TabsLineMobile: React.FC<ITabsLineMobileProps> = ({ onChangeTab, selectedId, tabs }) => {\n    if (!tabs.length) {\n        return null;\n    }\n\n    const renderTab = ({ selected, ...item }: ITabsLineItemProps) => {\n        const handleClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            onChangeTab(item.id);\n            item.onClick?.(event as React.MouseEvent<HTMLButtonElement>);\n        };\n\n        return <TabsLineItem key={item.id} selected={selectedId === item.id} {...item} onClick={handleClick} />;\n    };\n\n    return (\n        <div className={styles.tabsLineMobileWrapper}>\n            <div className={styles.tabsLineMobile}>{tabs.map(renderTab)}</div>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;AASO,MAAM,iBAAiD,CAAC,EAAE,aAAa,YAAY,WAAW;AACjG,MAAI,CAAC,KAAK,QAAQ;AACd,WAAO;AAAA,EACX;AAEA,QAAM,YAAY,CAAC,EAAE,UAAU,GAAG,WAA+B;AAC7D,UAAM,cAAc,CAAC,UAAgE;;AACjF,kBAAY,KAAK,EAAE;AACnB,iBAAK,YAAL,8BAAe;AAAA,IACnB;AAEA,WAAO,oBAAC,cAAA,EAA2B,UAAU,eAAe,KAAK,IAAK,GAAG,MAAM,SAAS,YAAA,GAA9D,KAAK,EAAsE;AAAA,EACzG;AAEA,SACI,oBAAC,OAAA,EAAI,WAAW,OAAO,uBACnB,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,gBAAiB,UAAA,KAAK,IAAI,SAAS,GAAE,GAChE;AAER;"}
+{"version":3,"file":"TabsLineMobile.js","sources":["../../../../src/components/TabsLine/components/TabsLineMobile.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { ITabsLineBaseProps } from \"../types\";\nimport { ITabsLineItemProps, TabsLineItem } from \"./TabsLineItem\";\nimport styles from \"../styles/TabsLineMobile.module.less\";\n\n/** Свойства компонента TabsLineMobile. */\ninterface ITabsLineMobileProps extends ITabsLineBaseProps {}\n\n/**\n * Мобильный вариант TabsLine: табы в одну строку с горизонтальной прокруткой, без дропдауна.\n * Размер таба здесь всегда дефолтный: prop size мобильным вариантом не поддерживается.\n */\nexport const TabsLineMobile = React.forwardRef<HTMLDivElement, ITabsLineMobileProps>(\n    // size намеренно не используется — он исключён из спреда, чтобы не уйти на <div> как невалидный атрибут.\n    ({ className, onChangeTab, selectedId, size, tabs, ...htmlDivAttributes }, ref) => {\n        const renderTab = ({ selected, onClick, ...item }: ITabsLineItemProps) => {\n            const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n                onChangeTab(item.id);\n                onClick?.(event);\n            };\n\n            return <TabsLineItem key={item.id} selected={selectedId === item.id} {...item} onClick={handleClick} />;\n        };\n\n        if (tabs.length === 0) {\n            return null;\n        }\n\n        return (\n            <div {...htmlDivAttributes} className={clsx(styles.tabsLineMobileWrapper, className)} ref={ref}>\n                <div className={styles.tabsLineMobile}>{tabs.map(renderTab)}</div>\n            </div>\n        );\n    },\n);\n\nTabsLineMobile.displayName = \"TabsLineMobile\";\n"],"names":[],"mappings":";;;;;;;;;;AAaO,MAAM,iBAAiB,MAAM;AAAA;AAAA,EAEhC,CAAC,EAAE,WAAW,aAAa,YAAY,MAAM,MAAM,GAAG,kBAAA,GAAqB,QAAQ;AAC/E,UAAM,YAAY,CAAC,EAAE,UAAU,SAAS,GAAG,WAA+B;AACtE,YAAM,cAAc,CAAC,UAA+C;AAChE,oBAAY,KAAK,EAAE;AACnB,2CAAU;AAAA,MACd;AAEA,aAAO,oBAAC,cAAA,EAA2B,UAAU,eAAe,KAAK,IAAK,GAAG,MAAM,SAAS,YAAA,GAA9D,KAAK,EAAsE;AAAA,IACzG;AAEA,QAAI,KAAK,WAAW,GAAG;AACnB,aAAO;AAAA,IACX;AAEA,WACI,oBAAC,SAAK,GAAG,mBAAmB,WAAW,KAAK,OAAO,uBAAuB,SAAS,GAAG,KAClF,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,gBAAiB,eAAK,IAAI,SAAS,GAAE,EAAA,CAChE;AAAA,EAER;AACJ;AAEA,eAAe,cAAc;"}

package/components/TabsLine/utils.js

@@ -5,7 +5,15 @@ const tabsLineSizeToTextSizeMap = {
   [EComponentSize.MD]: ETextSize.B3,
   [EComponentSize.SM]: ETextSize.B4
 };
+const splitTabsByMaxVisible = (tabs, maxVisible) => {
+  if (!maxVisible || tabs.length <= maxVisible) {
+    return { inlineTabs: tabs, dropdownTabs: [] };
+  }
+  const inlineCount = Math.max(maxVisible - 1, 0);
+  return { inlineTabs: tabs.slice(0, inlineCount), dropdownTabs: tabs.slice(inlineCount) };
+};
 export {
+  splitTabsByMaxVisible,
   tabsLineSizeToTextSizeMap
 };
 //# sourceMappingURL=utils.js.map

package/components/TabsLine/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/TabsLine/utils.ts"],"sourcesContent":["import { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { ETextSize } from \"../Typography/enums\";\n\nexport const tabsLineSizeToTextSizeMap = {\n    [EComponentSize.LG]: ETextSize.B2,\n    [EComponentSize.MD]: ETextSize.B3,\n    [EComponentSize.SM]: ETextSize.B4,\n};\n"],"names":[],"mappings":";;AAGO,MAAM,4BAA4B;AAAA,EACrC,CAAC,eAAe,EAAE,GAAG,UAAU;AAAA,EAC/B,CAAC,eAAe,EAAE,GAAG,UAAU;AAAA,EAC/B,CAAC,eAAe,EAAE,GAAG,UAAU;AACnC;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/TabsLine/utils.ts"],"sourcesContent":["import { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { ETextSize } from \"../Typography/enums\";\n\n/** Соответствие размера таба размеру текста внутри него. */\nexport const tabsLineSizeToTextSizeMap = {\n    [EComponentSize.LG]: ETextSize.B2,\n    [EComponentSize.MD]: ETextSize.B3,\n    [EComponentSize.SM]: ETextSize.B4,\n} satisfies Record<EComponentSize, ETextSize>;\n\n/**\n * Результат разделения табов между строкой и выпадающим списком.\n * Тип таба параметризован: utils не должен зависеть от модуля компонента —\n * TabsLineItem импортирует отсюда tabsLineSizeToTextSizeMap, и обратный импорт замкнул бы цикл.\n */\nexport interface ITabsLineSplit<T> {\n    /** Табы, отображаемые в строке. */\n    inlineTabs: T[];\n    /** Табы, уехавшие в выпадающий список. */\n    dropdownTabs: T[];\n}\n\n/**\n * Разделить табы на отображаемые в строке и уехавшие в выпадающий список.\n * maxVisible ограничивает общее число элементов строки вместе с кнопкой выпадающего списка,\n * поэтому в строке остаётся maxVisible - 1 табов. Пока табов не больше maxVisible, список не нужен\n * и все табы остаются в строке.\n */\nexport const splitTabsByMaxVisible = <T>(tabs: T[], maxVisible?: number): ITabsLineSplit<T> => {\n    if (!maxVisible || tabs.length <= maxVisible) {\n        return { inlineTabs: tabs, dropdownTabs: [] };\n    }\n\n    const inlineCount = Math.max(maxVisible - 1, 0);\n\n    return { inlineTabs: tabs.slice(0, inlineCount), dropdownTabs: tabs.slice(inlineCount) };\n};\n"],"names":[],"mappings":";;AAIO,MAAM,4BAA4B;AAAA,EACrC,CAAC,eAAe,EAAE,GAAG,UAAU;AAAA,EAC/B,CAAC,eAAe,EAAE,GAAG,UAAU;AAAA,EAC/B,CAAC,eAAe,EAAE,GAAG,UAAU;AACnC;AAoBO,MAAM,wBAAwB,CAAI,MAAW,eAA2C;AAC3F,MAAI,CAAC,cAAc,KAAK,UAAU,YAAY;AAC1C,WAAO,EAAE,YAAY,MAAM,cAAc,CAAA,EAAC;AAAA,EAC9C;AAEA,QAAM,cAAc,KAAK,IAAI,aAAa,GAAG,CAAC;AAE9C,SAAO,EAAE,YAAY,KAAK,MAAM,GAAG,WAAW,GAAG,cAAc,KAAK,MAAM,WAAW,EAAA;AACzF;"}

package/components/Tag/Tag.js

@@ -1,17 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { EditStrokeSrvIcon24, EditStrokeSrvIcon20, EditStrokeSrvIcon16, CrossStrokeSrvIcon24, CrossStrokeSrvIcon20, CrossStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { Text } from "../Typography/Text.js";
 import { ETextSize, EFontType } from "../Typography/enums.js";
 import { ButtonIcon } from "../Button/ButtonIcon.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
-const tag = "tag__af5dd503";
-const sm = "sm__22563a79";
-const md = "md__bb8c3c33";
-const lg = "lg__f9f9bade";
-const content = "content__a7e79d8e";
+const tag = "tag__19518098";
+const sm = "sm__81cb35ec";
+const md = "md__47f897b4";
+const lg = "lg__c35b5e44";
+const content = "content__83eb7223";
 const styles = {
   tag,
   sm,

package/components/TagColor/TagColor.js

@@ -1,23 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
 import { ETagColorStatus } from "./enums.js";
-const tagColor = "tagColor__b1a882fe";
-const sm = "sm__f227d16f";
-const md = "md__e996f31a";
-const lg = "lg__4e8f8a73";
-const success = "success__5a49e8a0";
-const info = "info__74401954";
-const warning = "warning__5b669e90";
-const error = "error__ecc50fab";
-const content = "content__6eb78399";
+const tagColor = "tagColor__6fd8ffa2";
+const sm = "sm__a677c1a7";
+const md = "md__ba233824";
+const lg = "lg__e95b500e";
+const success = "success__e8d495c6";
+const info = "info__0e8a8878";
+const warning = "warning__c5df5017";
+const error = "error__cd6078c3";
+const content = "content__f4b0ef08";
 const styles = {
   tagColor,
   sm,
   md,
   lg,
-  "default": "default__e4491760",
+  "default": "default__2c818641",
   success,
   info,
   warning,

package/components/TagGroup/TagGroup.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const tagGroup = "tagGroup__7c1f1596";
-const sm = "sm__ff0d6964";
-const md = "md__19e37a85";
-const lg = "lg__03273318";
+const tagGroup = "tagGroup__ded43550";
+const sm = "sm__305fd87f";
+const md = "md__d97e9205";
+const lg = "lg__845371fd";
 const styles = {
   tagGroup,
   sm,

package/components/TextareaField/TextareaField.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import React from "react";
 import { TextFieldBase } from "../TextField/TextFieldBase.js";
 import "../FormField/components/FormFieldClear.js";
 import "../FormField/components/FormFieldCounter.js";
@@ -11,7 +12,10 @@ import "../FormField/components/FormFieldPrefix.js";
 import "../FormField/components/FormFieldTarget.js";
 import { FormFieldTextarea } from "../FormField/components/FormFieldTextarea.js";
 import "../FormField/FormField.js";
-const TextareaField = ({ textareaProps, ...restProps }) => /* @__PURE__ */ jsx(TextFieldBase, { ...restProps, children: /* @__PURE__ */ jsx(FormFieldTextarea, { ...textareaProps }) });
+const TextareaField = React.forwardRef(
+  ({ textareaProps, ...restProps }, ref) => /* @__PURE__ */ jsx(TextFieldBase, { ...restProps, ref, children: /* @__PURE__ */ jsx(FormFieldTextarea, { ...textareaProps }) })
+);
+TextareaField.displayName = "TextareaField";
 export {
   TextareaField
 };

package/components/TextareaField/TextareaField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaField.js","sources":["../../../src/components/TextareaField/TextareaField.tsx"],"sourcesContent":["import React from \"react\";\nimport { ITextareaFieldProps } from \"./types\";\nimport { TextFieldBase } from \"../TextField/TextFieldBase\";\nimport { FormFieldTextarea } from \"../FormField\";\n\n/** Многострочное текстовое поле для ввода большого объема текста. */\nexport const TextareaField: React.FC<ITextareaFieldProps> = ({ textareaProps, ...restProps }) => (\n    <TextFieldBase {...restProps}>\n        <FormFieldTextarea {...textareaProps} />\n    </TextFieldBase>\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AAMO,MAAM,gBAA+C,CAAC,EAAE,eAAe,GAAG,UAAA,MAC7E,oBAAC,eAAA,EAAe,GAAG,WACf,UAAA,oBAAC,mBAAA,EAAmB,GAAG,eAAe,EAAA,CAC1C;"}
+{"version":3,"file":"TextareaField.js","sources":["../../../src/components/TextareaField/TextareaField.tsx"],"sourcesContent":["import React from \"react\";\nimport { ITextareaFieldProps } from \"./types\";\nimport { TextFieldBase } from \"../TextField/TextFieldBase\";\nimport { FormFieldTextarea } from \"../FormField\";\n\n/**\n * Многострочное текстовое поле для ввода большого объема текста.\n * Отличается от TextField элементом ввода — вместо input используется FormFieldTextarea.\n */\nexport const TextareaField = React.forwardRef<HTMLDivElement, ITextareaFieldProps>(\n    ({ textareaProps, ...restProps }, ref) => (\n        <TextFieldBase {...restProps} ref={ref}>\n            <FormFieldTextarea {...textareaProps} />\n        </TextFieldBase>\n    ),\n);\n\nTextareaField.displayName = \"TextareaField\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;AASO,MAAM,gBAAgB,MAAM;AAAA,EAC/B,CAAC,EAAE,eAAe,GAAG,UAAA,GAAa,QAC9B,oBAAC,eAAA,EAAe,GAAG,WAAW,KAC1B,UAAA,oBAAC,mBAAA,EAAmB,GAAG,eAAe,EAAA,CAC1C;AAER;AAEA,cAAc,cAAc;"}

package/components/ThemeProvider/ThemeProvider.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo, useLayoutEffect } from "react";
-import { s as canUseDom, w as updateCSS, x as removeCSS } from "../../chunks/vendor-DqGxntec.js";
+import { q as canUseDom, s as updateCSS, w as removeCSS } from "../../chunks/vendor-Bf_-FiU6.js";
 import { DesignTokenUtils } from "../DesignTokens/DesignTokenUtils.js";
 import { ThemeProviderView } from "./components/ThemeProviderView.js";
 import { ETriplexNextTheme } from "./ETriplexNextTheme.js";

package/components/ThemeProvider/components/ThemeProviderView.js

@@ -6,7 +6,7 @@ import { DesignTokensCore } from "../../DesignTokens/DesignTokensCore.js";
 import { DesignTokensCoreThemeDark } from "../../DesignTokens/DesignTokensCoreThemeDark.js";
 import { DesignTokensComponents } from "../../DesignTokens/DesignTokensComponents.js";
 import { DesignTokensComponentsThemeDark } from "../../DesignTokens/DesignTokensComponentsThemeDark.js";
-import { k as defaultsDeep } from "../../../chunks/vendor-DqGxntec.js";
+import { k as defaultsDeep } from "../../../chunks/vendor-Bf_-FiU6.js";
 const ThemeProviderView = ({
   children,
   scopeClassName,

package/components/Tooltip/components/common/TooltipBody.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
 import { MobileView } from "../../../MobileView/MobileView.js";
 import { Text } from "../../../Typography/Text.js";
 import { ELineType, ETextSize } from "../../../Typography/enums.js";
-import { s as styles } from "../../../../chunks/TooltipDesktop.module-geF3CkPi.js";
+import { s as styles } from "../../../../chunks/TooltipDesktop.module-BJkCPSlK.js";
 const TooltipBody = React.forwardRef(({ className, ...rest }, ref) => {
   const classNames = clsx(styles.tooltipBody, className);
   return /* @__PURE__ */ jsx(MobileView, { fallback: /* @__PURE__ */ jsx("div", { className: classNames, ...rest, ref }), children: /* @__PURE__ */ jsx(Text, { className: classNames, size: ETextSize.B3, line: ELineType.NORMAL, tag: "div", ...rest, ref }) });

package/components/Tooltip/components/common/TooltipLink.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
 import { MobileView } from "../../../MobileView/MobileView.js";
 import { getSafeRel } from "../../../../utils/html/anchorSecurity.js";
-const tooltipLink = "tooltipLink__329afbc9";
-const desktop = "desktop__2751f355";
-const mobile = "mobile__a8685b61";
+const tooltipLink = "tooltipLink__ac42f7e9";
+const desktop = "desktop__de36a37c";
+const mobile = "mobile__18d5e55b";
 const styles = {
   tooltipLink,
   desktop,
@@ -21,7 +21,7 @@ const TooltipLink = React.forwardRef(
         ...rest,
         target,
         rel: safeRel,
-        "data-tx": "0.45.0",
+        "data-tx": "0.47.0",
         ref,
         children
       }

package/components/Tooltip/components/common/TooltipXButton.js

@@ -3,7 +3,7 @@ import { useContext } from "react";
 import { CrossStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { TooltipContext } from "../../TootlipContext.js";
 import { ButtonIcon } from "../../../Button/ButtonIcon.js";
-import { s as styles } from "../../../../chunks/TooltipDesktop.module-geF3CkPi.js";
+import { s as styles } from "../../../../chunks/TooltipDesktop.module-BJkCPSlK.js";
 const TooltipXButton = ({ onClick, ...rest }) => {
   const { setTooltipOpen } = useContext(TooltipContext);
   const handleClick = (event) => {

package/components/Tooltip/components/desktop/components/TooltipDesktopBase.js

@@ -3,13 +3,13 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React from "react";
-import { i as isEqual, c as clsx } from "../../../../../chunks/vendor-DqGxntec.js";
+import { i as isEqual, c as clsx } from "../../../../../chunks/vendor-Bf_-FiU6.js";
 import { TooltipContext } from "../../../TootlipContext.js";
 import { Portal } from "../../../../Portal/Portal.js";
 import { ETooltipFlowTypes, ETooltipPreferPlace, ETooltipDirection, ETooltipAlign, ETooltipSizeParameter, ETooltipTypeName, ETooltipEndCoordinates, ETooltipStartCoordinates, ETooltipAxesType, ETooltipSize } from "../../../enums.js";
 import { TooltipDesktopTip } from "./TooltipDesktopTip.js";
 import { pickZone, axes, calcRelPos, centerOfBoundsFromBounds, calcBounds, equalCoords } from "../../../utils/Positioning.js";
-import { s as styles } from "../../../../../chunks/TooltipDesktop.module-geF3CkPi.js";
+import { s as styles } from "../../../../../chunks/TooltipDesktop.module-BJkCPSlK.js";
 const flowToTipTranslations = {
   [ETooltipFlowTypes.COLUMN]: "translateX",
   [ETooltipFlowTypes.ROW]: "translateY"

package/components/Tooltip/components/desktop/components/TooltipDesktopTip.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { ETooltipDirection } from "../../../enums.js";
-import { c as clsx } from "../../../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../../../chunks/TooltipDesktop.module-geF3CkPi.js";
+import { c as clsx } from "../../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../../../chunks/TooltipDesktop.module-BJkCPSlK.js";
 const DIRECTION_CLASS_NAMES = {
   [ETooltipDirection.UP]: styles.up,
   [ETooltipDirection.DOWN]: styles.down,

package/components/Tooltip/components/mobile/TooltipMobile.js

@@ -5,11 +5,11 @@ import { Portal } from "../../../Portal/Portal.js";
 import { DropdownMobile } from "../../../Dropdown/mobile/DropdownMobile.js";
 import { DropdownMobileBody } from "../../../Dropdown/mobile/DropdownMobileBody.js";
 import { TooltipMobileCloseButton } from "./components/TooltipMobileCloseButton.js";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-const tooltipMobile = "tooltipMobile__f4786c9e";
-const tooltipMobileContent = "tooltipMobileContent__37dee05b";
-const headerless = "headerless__9bf31bd8";
-const closeButton = "closeButton__e8f04fe9";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+const tooltipMobile = "tooltipMobile__03a4aea6";
+const tooltipMobileContent = "tooltipMobileContent__a5e24e50";
+const headerless = "headerless__4404c2d4";
+const closeButton = "closeButton__5fc0175a";
 const styles = {
   tooltipMobile,
   tooltipMobileContent,

package/components/TopOverlay/TopOverlay.js

@@ -1,16 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect } from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { FocusTrapExtended } from "../FocusTrapExtended/FocusTrapExtended.js";
 import { Overlay } from "../Overlay/Overlay.js";
 import { EOverlayDirection } from "../Overlay/OverlayBase.js";
 import { getLightBoxScreenTop, getNextTopPosition } from "./utils.js";
-const topOverlayMask = "topOverlayMask__1cf156bd";
-const topOverlayWrapper = "topOverlayWrapper__1fbd97fb";
-const closing = "closing__6384ec13";
-const opened = "opened__e46acfb8";
-const topOverlayPanel = "topOverlayPanel__4aa7553d";
-const topOverlay = "topOverlay__8cdc76c7";
+const topOverlayMask = "topOverlayMask__3d5616c4";
+const topOverlayWrapper = "topOverlayWrapper__361e2f0a";
+const closing = "closing__81f5b476";
+const opened = "opened__e139c0e1";
+const topOverlayPanel = "topOverlayPanel__5aed3ce9";
+const topOverlay = "topOverlay__9b376012";
 const styles = {
   topOverlayMask,
   topOverlayWrapper,

package/components/TreeView/TreeView.js

@@ -9,10 +9,10 @@ import { TreeViewContext } from "./TreeViewContext.js";
 import { TreeViewAbstractNode } from "./TreeViewAbstractNode.js";
 import { TreeViewNode } from "./components/TreeViewNode.js";
 import { TreeViewGroup } from "./components/TreeViewGroup.js";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../chunks/TreeView.module-Baejw-6t.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../chunks/TreeView.module-DmqSTVDj.js";
 const rootNodeId = "rootNode";
-class TreeView extends React.Component {
+class TreeViewBase extends React.Component {
   constructor(props) {
     super(props);
     __publicField(this, "abstractRootNode");
@@ -114,7 +114,7 @@ class TreeView extends React.Component {
     this.detachKeyDownListener();
   }
   render() {
-    const { children, className, ...props } = this.props;
+    const { children, className, forwardedRef, ...props } = this.props;
     const { updateCount } = this.state;
     return /* @__PURE__ */ jsx(
       TreeViewContext.Provider,
@@ -129,14 +129,19 @@ class TreeView extends React.Component {
           setOpenedNode: this.setOpenedNode,
           updateCount
         },
-        children: /* @__PURE__ */ jsx("ul", { className: clsx(styles.treeView, className), ...props, role: "tree", children })
+        children: /* @__PURE__ */ jsx("ul", { ref: forwardedRef, className: clsx(styles.treeView, className), ...props, role: "tree", children })
       }
     );
   }
 }
-__publicField(TreeView, "displayName", "TreeView");
-__publicField(TreeView, "Node", TreeViewNode);
-__publicField(TreeView, "Group", TreeViewGroup);
+const TreeView = Object.assign(
+  React.forwardRef((props, ref) => /* @__PURE__ */ jsx(TreeViewBase, { ...props, forwardedRef: ref })),
+  {
+    Group: TreeViewGroup,
+    Node: TreeViewNode
+  }
+);
+TreeView.displayName = "TreeView";
 export {
   TreeView
 };