@alfalab/core-components-tabs 9.1.0 → 9.2.0

package/modern/components/tabs/Component.mobile.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { TabsProps } from '../../typings';
+import { type TabsProps } from '../../typings';
 export declare type TabsMobileProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;
 export declare const TabsMobile: ({ view, scrollable, ...restProps }: TabsMobileProps) => React.JSX.Element;

package/modern/components/tabs/Component.mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.mobile.js","sources":["../../../src/components/tabs/Component.mobile.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TabsProps } from '../../typings';\nimport { PrimaryTabListMobile } from '../primary-tablist/Component.mobile';\nimport { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile';\n\nimport { Tabs } from './Component';\n\nconst views = {\n    primary: PrimaryTabListMobile,\n    secondary: SecondaryTabListMobile,\n};\n\nexport type TabsMobileProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;\n\nexport const TabsMobile = ({\n    view = 'primary',\n    scrollable = true,\n    ...restProps\n}: TabsMobileProps) => <Tabs TabList={views[view]} scrollable={scrollable} {...restProps} />;\n"],"names":[],"mappings":";;;;;AAQA,MAAM,KAAK,GAAG;AACV,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,SAAS,EAAE,sBAAsB;CACpC;AAIY,MAAA,UAAU,GAAG,CAAC,EACvB,IAAI,GAAG,SAAS,EAChB,UAAU,GAAG,IAAI,EACjB,GAAG,SAAS,EACE,KAAK,oBAAC,IAAI,EAAA,EAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,UAAU,EAAM,GAAA,SAAS;;;;"}
+{"version":3,"file":"Component.mobile.js","sources":["../../../src/components/tabs/Component.mobile.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type TabsProps } from '../../typings';\nimport { PrimaryTabListMobile } from '../primary-tablist/Component.mobile';\nimport { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile';\n\nimport { Tabs } from './Component';\n\nconst views = {\n    primary: PrimaryTabListMobile,\n    secondary: SecondaryTabListMobile,\n};\n\nexport type TabsMobileProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;\n\nexport const TabsMobile = ({\n    view = 'primary',\n    scrollable = true,\n    ...restProps\n}: TabsMobileProps) => <Tabs TabList={views[view]} scrollable={scrollable} {...restProps} />;\n"],"names":[],"mappings":";;;;;AAQA,MAAM,KAAK,GAAG;AACV,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,SAAS,EAAE,sBAAsB;CACpC;AAIY,MAAA,UAAU,GAAG,CAAC,EACvB,IAAI,GAAG,SAAS,EAChB,UAAU,GAAG,IAAI,EACjB,GAAG,SAAS,EACE,KAAK,oBAAC,IAAI,EAAA,EAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,UAAU,EAAM,GAAA,SAAS;;;;"}

package/modern/components/tabs/Component.responsive.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { TabsProps } from '../../typings';
+import { type TabsProps } from '../../typings';
 export declare type TabsResponsiveProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;
 export declare const TabsResponsive: ({ view, scrollable, breakpoint, client, defaultMatchMediaValue, ...restProps }: TabsResponsiveProps) => React.JSX.Element;

package/modern/components/tabs/Component.responsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.responsive.js","sources":["../../../src/components/tabs/Component.responsive.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TabsProps } from '../../typings';\nimport { PrimaryTabListResponsive } from '../primary-tablist/Component.responsive';\nimport { SecondaryTabListResponsive } from '../secondary-tablist/Component.responsive';\n\nimport { Tabs } from './Component';\n\nconst views = {\n    primary: PrimaryTabListResponsive,\n    secondary: SecondaryTabListResponsive,\n};\n\nexport type TabsResponsiveProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;\n\nexport const TabsResponsive = ({\n    view = 'primary',\n    scrollable = false,\n    breakpoint,\n    client,\n    defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n    ...restProps\n}: TabsResponsiveProps) => (\n    <Tabs\n        TabList={views[view]}\n        scrollable={scrollable}\n        defaultMatchMediaValue={defaultMatchMediaValue}\n        breakpoint={breakpoint}\n        client={client}\n        {...restProps}\n    />\n);\n"],"names":[],"mappings":";;;;;AAQA,MAAM,KAAK,GAAG;AACV,IAAA,OAAO,EAAE,wBAAwB;AACjC,IAAA,SAAS,EAAE,0BAA0B;CACxC;AAIM,MAAM,cAAc,GAAG,CAAC,EAC3B,IAAI,GAAG,SAAS,EAChB,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,MAAM,EACN,sBAAsB,GAAG,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,EAChF,GAAG,SAAS,EACM,MAClB,oBAAC,IAAI,EAAA,EACD,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,EACpB,UAAU,EAAE,UAAU,EACtB,sBAAsB,EAAE,sBAAsB,EAC9C,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EAAA,GACV,SAAS,EAAA,CACf;;;;"}
+{"version":3,"file":"Component.responsive.js","sources":["../../../src/components/tabs/Component.responsive.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type TabsProps } from '../../typings';\nimport { PrimaryTabListResponsive } from '../primary-tablist/Component.responsive';\nimport { SecondaryTabListResponsive } from '../secondary-tablist/Component.responsive';\n\nimport { Tabs } from './Component';\n\nconst views = {\n    primary: PrimaryTabListResponsive,\n    secondary: SecondaryTabListResponsive,\n};\n\nexport type TabsResponsiveProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;\n\nexport const TabsResponsive = ({\n    view = 'primary',\n    scrollable = false,\n    breakpoint,\n    client,\n    defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n    ...restProps\n}: TabsResponsiveProps) => (\n    <Tabs\n        TabList={views[view]}\n        scrollable={scrollable}\n        defaultMatchMediaValue={defaultMatchMediaValue}\n        breakpoint={breakpoint}\n        client={client}\n        {...restProps}\n    />\n);\n"],"names":[],"mappings":";;;;;AAQA,MAAM,KAAK,GAAG;AACV,IAAA,OAAO,EAAE,wBAAwB;AACjC,IAAA,SAAS,EAAE,0BAA0B;CACxC;AAIM,MAAM,cAAc,GAAG,CAAC,EAC3B,IAAI,GAAG,SAAS,EAChB,UAAU,GAAG,KAAK,EAClB,UAAU,EACV,MAAM,EACN,sBAAsB,GAAG,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,EAChF,GAAG,SAAS,EACM,MAClB,oBAAC,IAAI,EAAA,EACD,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,EACpB,UAAU,EAAE,UAAU,EACtB,sBAAsB,EAAE,sBAAsB,EAC9C,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EAAA,GACV,SAAS,EAAA,CACf;;;;"}

package/modern/components/title/Component.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SkeletonProps } from '@alfalab/core-components-skeleton/modern';
-import { Styles, TabListTitle } from '../../typings';
+import { type SkeletonProps } from '@alfalab/core-components-skeleton/modern';
+import { type Styles, type TabListTitle } from '../../typings';
 export declare const Title: React.ForwardRefExoticComponent<TabListTitle & Styles & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "title"> & {
     focused?: boolean | undefined;
     isOption?: boolean | undefined;

package/modern/components/title/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/title/Component.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, forwardRef, useEffect, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { Skeleton, SkeletonProps } from '@alfalab/core-components-skeleton';\n\nimport { Styles, TabListTitle } from '../../typings';\n\ntype Props = TabListTitle &\n    Styles &\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'title'> & {\n        focused?: boolean;\n        isOption?: boolean;\n        showSkeleton?: boolean;\n        skeletonProps?: Omit<SkeletonProps, 'visible'>;\n        onResize?: () => void;\n    };\n\nexport const Title = forwardRef<HTMLButtonElement, Props>(\n    (\n        {\n            id,\n            toggleClassName,\n            title,\n            styles = {},\n            rightAddons = null,\n            hidden = false,\n            selected = false,\n            disabled = false,\n            collapsed = false,\n            focused = false,\n            isOption = false,\n            showSkeleton = false,\n            skeletonProps,\n            onResize,\n            dataTestId,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n        const titleClassName = cn(styles.content, {\n            [styles.focused]: focused,\n        });\n\n        useEffect(() => {\n            const resizeObserver = new ResizeObserver(() => {\n                if (onResize) {\n                    onResize();\n                }\n            });\n\n            const button = buttonRef.current;\n\n            if (button) {\n                resizeObserver.observe(button);\n            }\n\n            return () => {\n                if (button) {\n                    resizeObserver.unobserve(button);\n                }\n            };\n        }, [onResize]);\n\n        return hidden ? null : (\n            <button\n                {...restProps}\n                data-test-id={dataTestId}\n                ref={mergeRefs([ref, buttonRef])}\n                disabled={disabled || showSkeleton}\n                type='button'\n                id={String(id)}\n                className={cn(\n                    styles.title,\n                    {\n                        [styles.selected]: selected,\n                        [styles.disabled]: disabled,\n                        [styles.collapsed]: collapsed && !isOption,\n                        [styles.option]: isOption,\n                    },\n                    toggleClassName,\n                )}\n            >\n                {showSkeleton ? (\n                    <Skeleton\n                        {...skeletonProps}\n                        className={cn(titleClassName, skeletonProps?.className)}\n                        visible={true}\n                    >\n                        {title}\n                    </Skeleton>\n                ) : (\n                    <span className={titleClassName}>{title}</span>\n                )}\n\n                {rightAddons && (\n                    <span\n                        className={cn(styles.rightAddons, {\n                            [styles.rightAddonsMarginZero]: !title,\n                        })}\n                    >\n                        {rightAddons}\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC3B,CACI,EACI,EAAE,EACF,eAAe,EACf,KAAK,EACL,MAAM,GAAG,EAAE,EACX,WAAW,GAAG,IAAI,EAClB,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,KAAK,EACpB,aAAa,EACb,QAAQ,EACR,UAAU,EACV,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC;AAExD,IAAA,MAAM,cAAc,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE;AACtC,QAAA,CAAC,MAAM,CAAC,OAAO,GAAG,OAAO;AAC5B,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;AAC3C,YAAA,IAAI,QAAQ,EAAE;AACV,gBAAA,QAAQ,EAAE;AACb;AACL,SAAC,CAAC;AAEF,QAAA,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO;AAEhC,QAAA,IAAI,MAAM,EAAE;AACR,YAAA,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC;AACjC;AAED,QAAA,OAAO,MAAK;AACR,YAAA,IAAI,MAAM,EAAE;AACR,gBAAA,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC;AACnC;AACL,SAAC;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,OAAO,MAAM,GAAG,IAAI,IAChB,KACQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GAAA,SAAS,kBACC,UAAU,EACxB,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,EAChC,QAAQ,EAAE,QAAQ,IAAI,YAAY,EAClC,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,EACd,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,KAAK,EACZ;AACI,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;YAC3B,CAAC,MAAM,CAAC,SAAS,GAAG,SAAS,IAAI,CAAC,QAAQ;AAC1C,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ;AAC5B,SAAA,EACD,eAAe,CAClB,EAAA;AAEA,QAAA,YAAY,IACT,KAAA,CAAA,aAAA,CAAC,QAAQ,EACD,EAAA,GAAA,aAAa,EACjB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,aAAa,EAAE,SAAS,CAAC,EACvD,OAAO,EAAE,IAAI,EAAA,EAEZ,KAAK,CACC,KAEX,8BAAM,SAAS,EAAE,cAAc,EAAG,EAAA,KAAK,CAAQ,CAClD;QAEA,WAAW,KACR,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,CAAC,KAAK;AACzC,aAAA,CAAC,IAED,WAAW,CACT,CACV,CACI,CACZ;AACL,CAAC;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/title/Component.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, forwardRef, useEffect, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { Skeleton, type SkeletonProps } from '@alfalab/core-components-skeleton';\n\nimport { type Styles, type TabListTitle } from '../../typings';\n\ntype Props = TabListTitle &\n    Styles &\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'title'> & {\n        focused?: boolean;\n        isOption?: boolean;\n        showSkeleton?: boolean;\n        skeletonProps?: Omit<SkeletonProps, 'visible'>;\n        onResize?: () => void;\n    };\n\nexport const Title = forwardRef<HTMLButtonElement, Props>(\n    (\n        {\n            id,\n            toggleClassName,\n            title,\n            styles = {},\n            rightAddons = null,\n            hidden = false,\n            selected = false,\n            disabled = false,\n            collapsed = false,\n            focused = false,\n            isOption = false,\n            showSkeleton = false,\n            skeletonProps,\n            onResize,\n            dataTestId,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n        const titleClassName = cn(styles.content, {\n            [styles.focused]: focused,\n        });\n\n        useEffect(() => {\n            const resizeObserver = new ResizeObserver(() => {\n                if (onResize) {\n                    onResize();\n                }\n            });\n\n            const button = buttonRef.current;\n\n            if (button) {\n                resizeObserver.observe(button);\n            }\n\n            return () => {\n                if (button) {\n                    resizeObserver.unobserve(button);\n                }\n            };\n        }, [onResize]);\n\n        return hidden ? null : (\n            <button\n                {...restProps}\n                data-test-id={dataTestId}\n                ref={mergeRefs([ref, buttonRef])}\n                disabled={disabled || showSkeleton}\n                type='button'\n                id={String(id)}\n                className={cn(\n                    styles.title,\n                    {\n                        [styles.selected]: selected,\n                        [styles.disabled]: disabled,\n                        [styles.collapsed]: collapsed && !isOption,\n                        [styles.option]: isOption,\n                    },\n                    toggleClassName,\n                )}\n            >\n                {showSkeleton ? (\n                    <Skeleton\n                        {...skeletonProps}\n                        className={cn(titleClassName, skeletonProps?.className)}\n                        visible={true}\n                    >\n                        {title}\n                    </Skeleton>\n                ) : (\n                    <span className={titleClassName}>{title}</span>\n                )}\n\n                {rightAddons && (\n                    <span\n                        className={cn(styles.rightAddons, {\n                            [styles.rightAddonsMarginZero]: !title,\n                        })}\n                    >\n                        {rightAddons}\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC3B,CACI,EACI,EAAE,EACF,eAAe,EACf,KAAK,EACL,MAAM,GAAG,EAAE,EACX,WAAW,GAAG,IAAI,EAClB,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,KAAK,EACpB,aAAa,EACb,QAAQ,EACR,UAAU,EACV,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC;AAExD,IAAA,MAAM,cAAc,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE;AACtC,QAAA,CAAC,MAAM,CAAC,OAAO,GAAG,OAAO;AAC5B,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;AAC3C,YAAA,IAAI,QAAQ,EAAE;AACV,gBAAA,QAAQ,EAAE;AACb;AACL,SAAC,CAAC;AAEF,QAAA,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO;AAEhC,QAAA,IAAI,MAAM,EAAE;AACR,YAAA,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC;AACjC;AAED,QAAA,OAAO,MAAK;AACR,YAAA,IAAI,MAAM,EAAE;AACR,gBAAA,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC;AACnC;AACL,SAAC;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,OAAO,MAAM,GAAG,IAAI,IAChB,KACQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GAAA,SAAS,kBACC,UAAU,EACxB,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,EAChC,QAAQ,EAAE,QAAQ,IAAI,YAAY,EAClC,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,EACd,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,KAAK,EACZ;AACI,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;YAC3B,CAAC,MAAM,CAAC,SAAS,GAAG,SAAS,IAAI,CAAC,QAAQ;AAC1C,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ;AAC5B,SAAA,EACD,eAAe,CAClB,EAAA;AAEA,QAAA,YAAY,IACT,KAAA,CAAA,aAAA,CAAC,QAAQ,EACD,EAAA,GAAA,aAAa,EACjB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,aAAa,EAAE,SAAS,CAAC,EACvD,OAAO,EAAE,IAAI,EAAA,EAEZ,KAAK,CACC,KAEX,8BAAM,SAAS,EAAE,cAAc,EAAG,EAAA,KAAK,CAAQ,CAClD;QAEA,WAAW,KACR,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,CAAC,KAAK;AACzC,aAAA,CAAC,IAED,WAAW,CACT,CACV,CACI,CACZ;AACL,CAAC;;;;"}

package/modern/hooks/use-collapsible-elements.d.ts

@@ -1,4 +1,4 @@
-import { DependencyList } from 'react';
+import { type DependencyList } from 'react';
 export declare const useCollapsibleElements: <ContainerType extends HTMLElement, AddonType extends HTMLElement>(selectors: string, deps?: DependencyList) => {
     containerRef: import("react").RefObject<ContainerType>;
     addonRef: import("react").RefObject<AddonType>;

package/modern/hooks/use-collapsible-elements.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-collapsible-elements.js","sources":["../../src/hooks/use-collapsible-elements.ts"],"sourcesContent":["import { DependencyList, useRef, useState } from 'react';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\n\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nexport const useCollapsibleElements = <\n    ContainerType extends HTMLElement,\n    AddonType extends HTMLElement,\n>(\n    selectors: string,\n    deps: DependencyList = [],\n) => {\n    const [idsCollapsedElements, setIdsCollapsedElements] = useState<string[]>([]);\n\n    const containerRef = useRef<ContainerType>(null);\n    const addonRef = useRef<AddonType>(null);\n\n    useLayoutEffect_SAFE_FOR_SSR(() => {\n        const collapseElements = (inlineSize?: number) => {\n            const container = containerRef.current;\n\n            if (!container) return;\n\n            const addon = addonRef.current;\n            const containerWidth =\n                (inlineSize || container.clientWidth) - (addon?.scrollWidth || 0) * 1.5; // при расчётах, даём кнопке \"Ещё\" чуть больше места, чтобы точно влезла\n            const elements = Array.from(container.querySelectorAll(selectors)) as HTMLElement[];\n\n            const collapsedIds = elements.reduce<string[]>((acc, element) => {\n                const { offsetLeft, scrollWidth, id } = element;\n                const elementOffset = offsetLeft + scrollWidth;\n                const isCollapsedElement = getComputedStyle(element).visibility === 'collapse';\n                const maxWidth =\n                    addon && !isCollapsedElement\n                        ? containerWidth -\n                          (addon.scrollWidth + parseFloat(getComputedStyle(addon).marginLeft))\n                        : containerWidth;\n\n                if (elementOffset >= maxWidth) acc.push(id);\n\n                return acc;\n            }, []);\n\n            setIdsCollapsedElements(collapsedIds);\n        };\n\n        const handleElementsResize = (entries: ResizeObserverEntry[]) => {\n            if (Array.isArray(entries[0].contentBoxSize)) {\n                const [{ inlineSize }] = entries[0].contentBoxSize;\n\n                collapseElements(inlineSize);\n            } else {\n                // old browser compatibility. See https://caniuse.com/mdn-api_resizeobserverentry_contentboxsize\n                collapseElements(entries[0].contentRect.width);\n            }\n        };\n\n        const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;\n        const observer = new ResizeObserver(handleElementsResize);\n\n        if (containerRef.current) {\n            collapseElements();\n            observer.observe(containerRef.current);\n        }\n\n        return () => observer.disconnect();\n    }, [selectors, ...deps]);\n\n    return {\n        containerRef,\n        addonRef,\n        idsCollapsedElements,\n    };\n};\n"],"names":["ResizeObserver","ResizeObserverPolyfill"],"mappings":";;;;AAKa,MAAA,sBAAsB,GAAG,CAIlC,SAAiB,EACjB,IAAA,GAAuB,EAAE,KACzB;IACA,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC;AAE9E,IAAA,MAAM,YAAY,GAAG,MAAM,CAAgB,IAAI,CAAC;AAChD,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAY,IAAI,CAAC;IAExC,4BAA4B,CAAC,MAAK;AAC9B,QAAA,MAAM,gBAAgB,GAAG,CAAC,UAAmB,KAAI;AAC7C,YAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AAEtC,YAAA,IAAI,CAAC,SAAS;gBAAE;AAEhB,YAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;YAC9B,MAAM,cAAc,GAChB,CAAC,UAAU,IAAI,SAAS,CAAC,WAAW,IAAI,CAAC,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,GAAG,CAAC;AAC5E,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAkB;YAEnF,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAW,CAAC,GAAG,EAAE,OAAO,KAAI;gBAC5D,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,OAAO;AAC/C,gBAAA,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW;gBAC9C,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK,UAAU;AAC9E,gBAAA,MAAM,QAAQ,GACV,KAAK,IAAI,CAAC;AACN,sBAAE,cAAc;AACd,yBAAC,KAAK,CAAC,WAAW,GAAG,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;sBACnE,cAAc;gBAExB,IAAI,aAAa,IAAI,QAAQ;AAAE,oBAAA,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;AAE3C,gBAAA,OAAO,GAAG;aACb,EAAE,EAAE,CAAC;YAEN,uBAAuB,CAAC,YAAY,CAAC;AACzC,SAAC;AAED,QAAA,MAAM,oBAAoB,GAAG,CAAC,OAA8B,KAAI;YAC5D,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE;AAC1C,gBAAA,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc;gBAElD,gBAAgB,CAAC,UAAU,CAAC;AAC/B;AAAM,iBAAA;;gBAEH,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;AACjD;AACL,SAAC;AAED,QAAA,MAAMA,gBAAc,GAAG,MAAM,CAAC,cAAc,IAAIC,cAAsB;AACtE,QAAA,MAAM,QAAQ,GAAG,IAAID,gBAAc,CAAC,oBAAoB,CAAC;QAEzD,IAAI,YAAY,CAAC,OAAO,EAAE;AACtB,YAAA,gBAAgB,EAAE;AAClB,YAAA,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;AACzC;AAED,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;KACrC,EAAE,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,CAAC;IAExB,OAAO;QACH,YAAY;QACZ,QAAQ;QACR,oBAAoB;KACvB;AACL;;;;"}
+{"version":3,"file":"use-collapsible-elements.js","sources":["../../src/hooks/use-collapsible-elements.ts"],"sourcesContent":["import { type DependencyList, useRef, useState } from 'react';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\n\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nexport const useCollapsibleElements = <\n    ContainerType extends HTMLElement,\n    AddonType extends HTMLElement,\n>(\n    selectors: string,\n    deps: DependencyList = [],\n) => {\n    const [idsCollapsedElements, setIdsCollapsedElements] = useState<string[]>([]);\n\n    const containerRef = useRef<ContainerType>(null);\n    const addonRef = useRef<AddonType>(null);\n\n    useLayoutEffect_SAFE_FOR_SSR(() => {\n        const collapseElements = (inlineSize?: number) => {\n            const container = containerRef.current;\n\n            if (!container) return;\n\n            const addon = addonRef.current;\n            const containerWidth =\n                (inlineSize || container.clientWidth) - (addon?.scrollWidth || 0) * 1.5; // при расчётах, даём кнопке \"Ещё\" чуть больше места, чтобы точно влезла\n            const elements = Array.from(container.querySelectorAll<HTMLElement>(selectors));\n\n            const collapsedIds = elements.reduce<string[]>((acc, element) => {\n                const { offsetLeft, scrollWidth, id } = element;\n                const elementOffset = offsetLeft + scrollWidth;\n                const isCollapsedElement = getComputedStyle(element).visibility === 'collapse';\n                const maxWidth =\n                    addon && !isCollapsedElement\n                        ? containerWidth -\n                          (addon.scrollWidth + parseFloat(getComputedStyle(addon).marginLeft))\n                        : containerWidth;\n\n                if (elementOffset >= maxWidth) acc.push(id);\n\n                return acc;\n            }, []);\n\n            setIdsCollapsedElements(collapsedIds);\n        };\n\n        const handleElementsResize = (entries: ResizeObserverEntry[]) => {\n            if (Array.isArray(entries[0].contentBoxSize)) {\n                const [{ inlineSize }] = entries[0].contentBoxSize;\n\n                collapseElements(inlineSize);\n            } else {\n                // old browser compatibility. See https://caniuse.com/mdn-api_resizeobserverentry_contentboxsize\n                collapseElements(entries[0].contentRect.width);\n            }\n        };\n\n        const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;\n        const observer = new ResizeObserver(handleElementsResize);\n\n        if (containerRef.current) {\n            collapseElements();\n            observer.observe(containerRef.current);\n        }\n\n        return () => observer.disconnect();\n    }, [selectors, ...deps]);\n\n    return {\n        containerRef,\n        addonRef,\n        idsCollapsedElements,\n    };\n};\n"],"names":["ResizeObserver","ResizeObserverPolyfill"],"mappings":";;;;AAKa,MAAA,sBAAsB,GAAG,CAIlC,SAAiB,EACjB,IAAA,GAAuB,EAAE,KACzB;IACA,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC;AAE9E,IAAA,MAAM,YAAY,GAAG,MAAM,CAAgB,IAAI,CAAC;AAChD,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAY,IAAI,CAAC;IAExC,4BAA4B,CAAC,MAAK;AAC9B,QAAA,MAAM,gBAAgB,GAAG,CAAC,UAAmB,KAAI;AAC7C,YAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AAEtC,YAAA,IAAI,CAAC,SAAS;gBAAE;AAEhB,YAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;YAC9B,MAAM,cAAc,GAChB,CAAC,UAAU,IAAI,SAAS,CAAC,WAAW,IAAI,CAAC,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,GAAG,CAAC;AAC5E,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAc,SAAS,CAAC,CAAC;YAE/E,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAW,CAAC,GAAG,EAAE,OAAO,KAAI;gBAC5D,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,OAAO;AAC/C,gBAAA,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW;gBAC9C,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK,UAAU;AAC9E,gBAAA,MAAM,QAAQ,GACV,KAAK,IAAI,CAAC;AACN,sBAAE,cAAc;AACd,yBAAC,KAAK,CAAC,WAAW,GAAG,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;sBACnE,cAAc;gBAExB,IAAI,aAAa,IAAI,QAAQ;AAAE,oBAAA,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;AAE3C,gBAAA,OAAO,GAAG;aACb,EAAE,EAAE,CAAC;YAEN,uBAAuB,CAAC,YAAY,CAAC;AACzC,SAAC;AAED,QAAA,MAAM,oBAAoB,GAAG,CAAC,OAA8B,KAAI;YAC5D,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE;AAC1C,gBAAA,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc;gBAElD,gBAAgB,CAAC,UAAU,CAAC;AAC/B;AAAM,iBAAA;;gBAEH,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;AACjD;AACL,SAAC;AAED,QAAA,MAAMA,gBAAc,GAAG,MAAM,CAAC,cAAc,IAAIC,cAAsB;AACtE,QAAA,MAAM,QAAQ,GAAG,IAAID,gBAAc,CAAC,oBAAoB,CAAC;QAEzD,IAAI,YAAY,CAAC,OAAO,EAAE;AACtB,YAAA,gBAAgB,EAAE;AAClB,YAAA,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;AACzC;AAED,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;KACrC,EAAE,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,CAAC;IAExB,OAAO;QACH,YAAY;QACZ,QAAQ;QACR,oBAAoB;KACvB;AACL;;;;"}

package/modern/hooks/use-tablist-titles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TabListProps } from '../typings';
+import { type TabListProps } from '../typings';
 export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, onChange, breakpoint, client, defaultMatchMediaValue, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsedTabsIds' | 'onChange' | 'defaultMatchMediaValue' | 'breakpoint' | 'client'>) => {
     containerRef: import("react").RefObject<HTMLDivElement>;
     addonRef: import("react").RefObject<HTMLInputElement>;
@@ -14,6 +14,55 @@ export declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds,
         toggleClassName?: string | undefined;
         dataTestId?: string | undefined;
         toggleRef?: import("react").Ref<HTMLDivElement> | undefined;
+        titleProps?: import("../typings").TitleProps | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-colcount'?: number | undefined;
+        'aria-colindex'?: number | undefined;
+        'aria-colspan'?: number | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: boolean | "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: number | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: number | undefined;
+        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: number | undefined;
+        'aria-rowindex'?: number | undefined;
+        'aria-rowspan'?: number | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: number | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
     }[];
     selectedTab: HTMLButtonElement | null;
     focusedTab: HTMLButtonElement | null;

package/modern/hooks/use-tablist-titles.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tablist-titles.js","sources":["../../src/hooks/use-tablist-titles.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { TabListProps } from '../typings';\n\nimport { useCollapsibleElements } from './use-collapsible-elements';\nimport { useTabs } from './use-tabs';\n\nexport const useTablistTitles = ({\n    titles = [],\n    selectedId,\n    collapsedTabsIds,\n    onChange,\n    breakpoint,\n    client,\n    defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n}: Pick<\n    TabListProps,\n    | 'titles'\n    | 'selectedId'\n    | 'collapsedTabsIds'\n    | 'onChange'\n    | 'defaultMatchMediaValue'\n    | 'breakpoint'\n    | 'client'\n>) => {\n    const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements<\n        HTMLDivElement,\n        HTMLInputElement\n    >('[role=tab]', [titles, collapsedTabsIds]);\n\n    const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n    const tablistTitles = useMemo(() => {\n        const idsCollapsedTitles: string[] = [];\n        const idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds || []);\n\n        if (isDesktop) {\n            const visibleTitles = titles.filter(({ id }) => !idsCollapsed.includes(String(id)));\n            const lastVisibleTitle = collapsedTabsIds\n                ? null\n                : visibleTitles[visibleTitles.length - 1];\n\n            idsCollapsed.forEach((id) => {\n                if (selectedId === id && lastVisibleTitle) {\n                    idsCollapsedTitles.push(String(lastVisibleTitle.id));\n                }\n                if (selectedId !== id) {\n                    idsCollapsedTitles.push(id);\n                }\n            });\n        }\n\n        const titlesMapped = titles.map((title) => ({\n            ...title,\n            collapsed: idsCollapsedTitles.includes(String(title.id)),\n            selected: title.id === selectedId,\n        }));\n\n        if (collapsedTabsIds?.length) {\n            titlesMapped.sort((a, b) => {\n                const hasA = collapsedTabsIds.includes(String(a.id));\n                const hasB = collapsedTabsIds.includes(String(b.id));\n\n                if (hasA === hasB) {\n                    return 0;\n                }\n\n                return hasA ? 1 : -1;\n            });\n        }\n\n        return titlesMapped.sort((a, b) => {\n            if (a.collapsed === b.collapsed) {\n                return 0;\n            }\n\n            return a.collapsed ? 1 : -1;\n        });\n    }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);\n\n    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({\n        titles: tablistTitles,\n        selectedId,\n        onChange,\n    });\n\n    return {\n        containerRef,\n        addonRef,\n        tablistTitles,\n        selectedTab,\n        focusedTab,\n        getTabListItemProps,\n    };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-tablist-titles.js","sources":["../../src/hooks/use-tablist-titles.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { type TabListProps } from '../typings';\n\nimport { useCollapsibleElements } from './use-collapsible-elements';\nimport { useTabs } from './use-tabs';\n\nexport const useTablistTitles = ({\n    titles = [],\n    selectedId,\n    collapsedTabsIds,\n    onChange,\n    breakpoint,\n    client,\n    defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n}: Pick<\n    TabListProps,\n    | 'titles'\n    | 'selectedId'\n    | 'collapsedTabsIds'\n    | 'onChange'\n    | 'defaultMatchMediaValue'\n    | 'breakpoint'\n    | 'client'\n>) => {\n    const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements<\n        HTMLDivElement,\n        HTMLInputElement\n    >('[role=tab]', [titles, collapsedTabsIds]);\n\n    const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n    const tablistTitles = useMemo(() => {\n        const idsCollapsedTitles: string[] = [];\n        const idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds || []);\n\n        if (isDesktop) {\n            const visibleTitles = titles.filter(({ id }) => !idsCollapsed.includes(String(id)));\n            const lastVisibleTitle = collapsedTabsIds\n                ? null\n                : visibleTitles[visibleTitles.length - 1];\n\n            idsCollapsed.forEach((id) => {\n                if (selectedId === id && lastVisibleTitle) {\n                    idsCollapsedTitles.push(String(lastVisibleTitle.id));\n                }\n                if (selectedId !== id) {\n                    idsCollapsedTitles.push(id);\n                }\n            });\n        }\n\n        const titlesMapped = titles.map((title) => ({\n            ...title,\n            collapsed: idsCollapsedTitles.includes(String(title.id)),\n            selected: title.id === selectedId,\n        }));\n\n        if (collapsedTabsIds?.length) {\n            titlesMapped.sort((a, b) => {\n                const hasA = collapsedTabsIds.includes(String(a.id));\n                const hasB = collapsedTabsIds.includes(String(b.id));\n\n                if (hasA === hasB) {\n                    return 0;\n                }\n\n                return hasA ? 1 : -1;\n            });\n        }\n\n        return titlesMapped.sort((a, b) => {\n            if (a.collapsed === b.collapsed) {\n                return 0;\n            }\n\n            return a.collapsed ? 1 : -1;\n        });\n    }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);\n\n    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({\n        titles: tablistTitles,\n        selectedId,\n        onChange,\n    });\n\n    return {\n        containerRef,\n        addonRef,\n        tablistTitles,\n        selectedTab,\n        focusedTab,\n        getTabListItemProps,\n    };\n};\n"],"names":[],"mappings":"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"}

package/modern/hooks/use-tabs.d.ts

@@ -1,5 +1,5 @@
-import { KeyboardEvent, MouseEvent, MutableRefObject } from 'react';
-import { UseTabsProps } from '../typings';
+import { type KeyboardEvent, type MouseEvent, type MutableRefObject } from 'react';
+import { type UseTabsProps } from '../typings';
 export declare function useTabs({ titles, selectedId, onChange }: UseTabsProps): {
     getTabListItemProps: (index: number, outerRef?: MutableRefObject<HTMLElement>) => {
         role: string;

package/modern/hooks/use-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tabs.js","sources":["../../src/hooks/use-tabs.tsx"],"sourcesContent":["import {\n    KeyboardEvent,\n    MouseEvent,\n    MutableRefObject,\n    Ref,\n    useCallback,\n    useRef,\n    useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { TabListTitle, UseTabsProps } from '../typings';\n\nexport function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {\n    const [selectedTab, setSelectedTab] = useState<HTMLButtonElement | null>(null);\n    const [focusedTab, setFocusedTab] = useState<HTMLButtonElement | null>(null);\n    const itemRefs = useRef<HTMLButtonElement[]>([]);\n\n    const handleItemRef = useCallback(\n        (node: HTMLButtonElement, item: TabListTitle, index: number) => {\n            if (node && item.id === selectedId) setSelectedTab(node);\n            itemRefs.current[index] = node;\n        },\n        [selectedId],\n    );\n\n    const handleItemClick = useCallback(\n        (event: MouseEvent, item: TabListTitle) => {\n            if (onChange && item.id !== selectedId) {\n                onChange(event, { selectedId: item.id });\n            }\n        },\n        [onChange, selectedId],\n    );\n\n    const focusTab = useCallback(\n        (position: 'prev' | 'next' | 'start' | 'end') => {\n            const refs = itemRefs.current;\n\n            const tabAvailable = (ref: HTMLButtonElement) => ref && !ref.disabled;\n\n            if (refs.every((ref) => !tabAvailable(ref))) return;\n\n            let focusedTabIndex = refs.findIndex((node) => document.activeElement === node);\n\n            if (focusedTabIndex === -1) {\n                focusedTabIndex = refs.findIndex((node) => node === selectedTab);\n            }\n\n            let newFocusIndex;\n\n            switch (position) {\n                case 'prev':\n                    newFocusIndex = focusedTabIndex === 0 ? refs.length - 1 : focusedTabIndex - 1;\n                    break;\n                case 'next':\n                    newFocusIndex = focusedTabIndex === refs.length - 1 ? 0 : focusedTabIndex + 1;\n                    break;\n                case 'start':\n                    newFocusIndex = 0;\n                    break;\n                case 'end':\n                    newFocusIndex = refs.length - 1;\n                    break;\n            }\n\n            const shift = ['prev', 'end'].includes(position) ? -1 : 1;\n\n            while (!tabAvailable(refs[newFocusIndex])) {\n                newFocusIndex = (refs.length + newFocusIndex + shift) % refs.length;\n            }\n\n            refs[newFocusIndex].focus();\n\n            setFocusedTab(refs[newFocusIndex]);\n        },\n        [selectedTab, itemRefs],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent<HTMLButtonElement>) => {\n            switch (event.key) {\n                case 'ArrowLeft':\n                    focusTab('prev');\n\n                    event.preventDefault();\n                    break;\n                case 'ArrowRight':\n                    focusTab('next');\n\n                    event.preventDefault();\n                    break;\n                case 'Home':\n                    focusTab('start');\n\n                    event.preventDefault();\n                    break;\n                case 'End':\n                    focusTab('end');\n\n                    event.preventDefault();\n                    break;\n                default:\n                    break;\n            }\n        },\n        [focusTab],\n    );\n\n    const getTabListItemProps = (index: number, outerRef?: MutableRefObject<HTMLElement>) => {\n        const item = titles[index];\n        const itemSelected = item.id === selectedId;\n\n        const refs: Array<Ref<HTMLElement>> = [\n            (node: HTMLButtonElement) => {\n                // eslint-disable-next-line no-param-reassign\n                if (outerRef) outerRef.current = node;\n                handleItemRef(node, item, index);\n            },\n        ];\n\n        if (item.toggleRef) {\n            refs.push(item.toggleRef);\n        }\n\n        return {\n            role: 'tab',\n            tabIndex: itemSelected ? 0 : -1,\n            'aria-selected': itemSelected,\n            selected: itemSelected,\n            dataTestId: getDataTestId(item.dataTestId, 'toggle'),\n            disabled: item.disabled,\n            ref: mergeRefs(refs),\n            onKeyDown: handleKeyDown,\n            onClick: (event?: MouseEvent) => handleItemClick(event as MouseEvent, item),\n        };\n    };\n\n    return {\n        getTabListItemProps,\n        selectedTab,\n        focusedTab,\n    };\n}\n"],"names":[],"mappings":";;;;AAeM,SAAU,OAAO,CAAC,EAAE,MAAM,GAAG,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAgB,EAAA;IACvE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC;IAC9E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC;AAC5E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAsB,EAAE,CAAC;IAEhD,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,IAAuB,EAAE,IAAkB,EAAE,KAAa,KAAI;AAC3D,QAAA,IAAI,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,UAAU;YAAE,cAAc,CAAC,IAAI,CAAC;AACxD,QAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI;AAClC,KAAC,EACD,CAAC,UAAU,CAAC,CACf;IAED,MAAM,eAAe,GAAG,WAAW,CAC/B,CAAC,KAAiB,EAAE,IAAkB,KAAI;AACtC,QAAA,IAAI,QAAQ,IAAI,IAAI,CAAC,EAAE,KAAK,UAAU,EAAE;YACpC,QAAQ,CAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;AAC3C;AACL,KAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACzB;AAED,IAAA,MAAM,QAAQ,GAAG,WAAW,CACxB,CAAC,QAA2C,KAAI;AAC5C,QAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO;AAE7B,QAAA,MAAM,YAAY,GAAG,CAAC,GAAsB,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ;AAErE,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;YAAE;AAE7C,QAAA,IAAI,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC;AAE/E,QAAA,IAAI,eAAe,KAAK,EAAE,EAAE;AACxB,YAAA,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,WAAW,CAAC;AACnE;AAED,QAAA,IAAI,aAAa;AAEjB,QAAA,QAAQ,QAAQ;AACZ,YAAA,KAAK,MAAM;AACP,gBAAA,aAAa,GAAG,eAAe,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,GAAG,CAAC;gBAC7E;AACJ,YAAA,KAAK,MAAM;AACP,gBAAA,aAAa,GAAG,eAAe,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,eAAe,GAAG,CAAC;gBAC7E;AACJ,YAAA,KAAK,OAAO;gBACR,aAAa,GAAG,CAAC;gBACjB;AACJ,YAAA,KAAK,KAAK;AACN,gBAAA,aAAa,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAC/B;AACP;QAED,MAAM,KAAK,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC;QAEzD,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE;AACvC,YAAA,aAAa,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,KAAK,IAAI,IAAI,CAAC,MAAM;AACtE;AAED,QAAA,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE;AAE3B,QAAA,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACtC,KAAC,EACD,CAAC,WAAW,EAAE,QAAQ,CAAC,CAC1B;AAED,IAAA,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,KAAuC,KAAI;QACxC,QAAQ,KAAK,CAAC,GAAG;AACb,YAAA,KAAK,WAAW;gBACZ,QAAQ,CAAC,MAAM,CAAC;gBAEhB,KAAK,CAAC,cAAc,EAAE;gBACtB;AACJ,YAAA,KAAK,YAAY;gBACb,QAAQ,CAAC,MAAM,CAAC;gBAEhB,KAAK,CAAC,cAAc,EAAE;gBACtB;AACJ,YAAA,KAAK,MAAM;gBACP,QAAQ,CAAC,OAAO,CAAC;gBAEjB,KAAK,CAAC,cAAc,EAAE;gBACtB;AACJ,YAAA,KAAK,KAAK;gBACN,QAAQ,CAAC,KAAK,CAAC;gBAEf,KAAK,CAAC,cAAc,EAAE;gBACtB;AAGP;AACL,KAAC,EACD,CAAC,QAAQ,CAAC,CACb;AAED,IAAA,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAE,QAAwC,KAAI;AACpF,QAAA,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC;AAC1B,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,KAAK,UAAU;AAE3C,QAAA,MAAM,IAAI,GAA4B;YAClC,CAAC,IAAuB,KAAI;;AAExB,gBAAA,IAAI,QAAQ;AAAE,oBAAA,QAAQ,CAAC,OAAO,GAAG,IAAI;AACrC,gBAAA,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC;aACnC;SACJ;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AAC5B;QAED,OAAO;AACH,YAAA,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,YAAY,GAAG,CAAC,GAAG,EAAE;AAC/B,YAAA,eAAe,EAAE,YAAY;AAC7B,YAAA,QAAQ,EAAE,YAAY;YACtB,UAAU,EAAE,aAAa,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC;YACpD,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,GAAG,EAAE,SAAS,CAAC,IAAI,CAAC;AACpB,YAAA,SAAS,EAAE,aAAa;YACxB,OAAO,EAAE,CAAC,KAAkB,KAAK,eAAe,CAAC,KAAmB,EAAE,IAAI,CAAC;SAC9E;AACL,KAAC;IAED,OAAO;QACH,mBAAmB;QACnB,WAAW;QACX,UAAU;KACb;AACL;;;;"}
+{"version":3,"file":"use-tabs.js","sources":["../../src/hooks/use-tabs.ts"],"sourcesContent":["import {\n    type KeyboardEvent,\n    type MouseEvent,\n    type MutableRefObject,\n    type Ref,\n    useCallback,\n    useRef,\n    useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { type TabListTitle, type UseTabsProps } from '../typings';\n\nexport function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {\n    const [selectedTab, setSelectedTab] = useState<HTMLButtonElement | null>(null);\n    const [focusedTab, setFocusedTab] = useState<HTMLButtonElement | null>(null);\n    const itemRefs = useRef<HTMLButtonElement[]>([]);\n\n    const handleItemRef = useCallback(\n        (node: HTMLButtonElement, item: TabListTitle, index: number) => {\n            if (node && item.id === selectedId) setSelectedTab(node);\n            itemRefs.current[index] = node;\n        },\n        [selectedId],\n    );\n\n    const handleItemClick = useCallback(\n        (event: MouseEvent, item: TabListTitle) => {\n            if (onChange && item.id !== selectedId) {\n                onChange(event, { selectedId: item.id });\n            }\n        },\n        [onChange, selectedId],\n    );\n\n    const focusTab = useCallback(\n        (position: 'prev' | 'next' | 'start' | 'end') => {\n            const refs = itemRefs.current;\n\n            const tabAvailable = (ref: HTMLButtonElement) => ref && !ref.disabled;\n\n            if (refs.every((ref) => !tabAvailable(ref))) return;\n\n            let focusedTabIndex = refs.findIndex((node) => document.activeElement === node);\n\n            if (focusedTabIndex === -1) {\n                focusedTabIndex = refs.findIndex((node) => node === selectedTab);\n            }\n\n            let newFocusIndex;\n\n            switch (position) {\n                case 'prev':\n                    newFocusIndex = focusedTabIndex === 0 ? refs.length - 1 : focusedTabIndex - 1;\n                    break;\n                case 'next':\n                    newFocusIndex = focusedTabIndex === refs.length - 1 ? 0 : focusedTabIndex + 1;\n                    break;\n                case 'start':\n                    newFocusIndex = 0;\n                    break;\n                case 'end':\n                    newFocusIndex = refs.length - 1;\n                    break;\n            }\n\n            const shift = ['prev', 'end'].includes(position) ? -1 : 1;\n\n            while (!tabAvailable(refs[newFocusIndex])) {\n                newFocusIndex = (refs.length + newFocusIndex + shift) % refs.length;\n            }\n\n            refs[newFocusIndex].focus();\n\n            setFocusedTab(refs[newFocusIndex]);\n        },\n        [selectedTab, itemRefs],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent<HTMLButtonElement>) => {\n            switch (event.key) {\n                case 'ArrowLeft':\n                    focusTab('prev');\n\n                    event.preventDefault();\n                    break;\n                case 'ArrowRight':\n                    focusTab('next');\n\n                    event.preventDefault();\n                    break;\n                case 'Home':\n                    focusTab('start');\n\n                    event.preventDefault();\n                    break;\n                case 'End':\n                    focusTab('end');\n\n                    event.preventDefault();\n                    break;\n                default:\n                    break;\n            }\n        },\n        [focusTab],\n    );\n\n    const getTabListItemProps = (index: number, outerRef?: MutableRefObject<HTMLElement>) => {\n        const item = titles[index];\n        const itemSelected = item.id === selectedId;\n\n        const refs: Array<Ref<HTMLElement>> = [\n            (node: HTMLButtonElement) => {\n                // eslint-disable-next-line no-param-reassign\n                if (outerRef) outerRef.current = node;\n                handleItemRef(node, item, index);\n            },\n        ];\n\n        if (item.toggleRef) {\n            refs.push(item.toggleRef);\n        }\n\n        return {\n            role: 'tab',\n            tabIndex: itemSelected ? 0 : -1,\n            'aria-selected': itemSelected,\n            selected: itemSelected,\n            dataTestId: getDataTestId(item.dataTestId, 'toggle'),\n            disabled: item.disabled,\n            ref: mergeRefs(refs),\n            onKeyDown: handleKeyDown,\n            onClick: (event?: MouseEvent) => handleItemClick(event as MouseEvent, item),\n        };\n    };\n\n    return {\n        getTabListItemProps,\n        selectedTab,\n        focusedTab,\n    };\n}\n"],"names":[],"mappings":"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"}

package/modern/synthetic-events.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare const createSyntheticEvent: <T extends Element, E extends Event>(event: E) => React.SyntheticEvent<T, E>;
 export declare const createUIEvent: <T extends Element, E extends Event>(event: E) => React.UIEvent<T, E>;
 export declare const createSyntheticMouseEvent: <T extends Element>(event: MouseEvent) => React.MouseEvent<T, MouseEvent>;

package/modern/synthetic-events.js.map

@@ -1 +1 @@
-{"version":3,"file":"synthetic-events.js","sources":["../src/synthetic-events.ts"],"sourcesContent":["import React from 'react';\n\nexport const createSyntheticEvent = <T extends Element, E extends Event>(\n    event: E,\n): React.SyntheticEvent<T, E> => {\n    let isDefaultPrevented = false;\n    let isPropagationStopped = false;\n    const preventDefault = () => {\n        isDefaultPrevented = true;\n        event.preventDefault();\n    };\n    const stopPropagation = () => {\n        isPropagationStopped = true;\n        event.stopPropagation();\n    };\n\n    return {\n        nativeEvent: event,\n        currentTarget: event.currentTarget as EventTarget & T,\n        target: event.target as EventTarget & T,\n        bubbles: event.bubbles,\n        cancelable: event.cancelable,\n        defaultPrevented: event.defaultPrevented,\n        eventPhase: event.eventPhase,\n        isTrusted: event.isTrusted,\n        preventDefault,\n        isDefaultPrevented: () => isDefaultPrevented,\n        stopPropagation,\n        isPropagationStopped: () => isPropagationStopped,\n        persist: () => {},\n        timeStamp: event.timeStamp,\n        type: event.type,\n    };\n};\n\nexport const createUIEvent = <T extends Element, E extends Event>(\n    event: E,\n): React.UIEvent<T, E> => ({\n    ...createSyntheticEvent(event),\n    detail: 0,\n    view: {\n        styleMedia: {\n            type: '',\n            matchMedium: () => false,\n        },\n        document,\n    },\n});\n\nexport const createSyntheticMouseEvent = <T extends Element>(\n    event: MouseEvent,\n): React.MouseEvent<T, MouseEvent> => ({\n    ...createUIEvent<T, MouseEvent>(event),\n    altKey: event.altKey,\n    button: event.button,\n    buttons: event.buttons,\n    clientX: event.clientX,\n    clientY: event.clientY,\n    ctrlKey: event.ctrlKey,\n    getModifierState: event.getModifierState,\n    metaKey: event.metaKey,\n    movementX: event.movementX,\n    movementY: event.movementY,\n    pageX: event.pageX,\n    pageY: event.pageY,\n    relatedTarget: event.relatedTarget,\n    screenX: event.screenX,\n    screenY: event.screenY,\n    shiftKey: event.shiftKey,\n});\n"],"names":[],"mappings":"AAEa,MAAA,oBAAoB,GAAG,CAChC,KAAQ,KACoB;IAC5B,IAAI,kBAAkB,GAAG,KAAK;IAC9B,IAAI,oBAAoB,GAAG,KAAK;IAChC,MAAM,cAAc,GAAG,MAAK;QACxB,kBAAkB,GAAG,IAAI;QACzB,KAAK,CAAC,cAAc,EAAE;AAC1B,KAAC;IACD,MAAM,eAAe,GAAG,MAAK;QACzB,oBAAoB,GAAG,IAAI;QAC3B,KAAK,CAAC,eAAe,EAAE;AAC3B,KAAC;IAED,OAAO;AACH,QAAA,WAAW,EAAE,KAAK;QAClB,aAAa,EAAE,KAAK,CAAC,aAAgC;QACrD,MAAM,EAAE,KAAK,CAAC,MAAyB;QACvC,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,cAAc;AACd,QAAA,kBAAkB,EAAE,MAAM,kBAAkB;QAC5C,eAAe;AACf,QAAA,oBAAoB,EAAE,MAAM,oBAAoB;AAChD,QAAA,OAAO,EAAE,MAAK,GAAG;QACjB,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,IAAI,EAAE,KAAK,CAAC,IAAI;KACnB;AACL;MAEa,aAAa,GAAG,CACzB,KAAQ,MACe;IACvB,GAAG,oBAAoB,CAAC,KAAK,CAAC;AAC9B,IAAA,MAAM,EAAE,CAAC;AACT,IAAA,IAAI,EAAE;AACF,QAAA,UAAU,EAAE;AACR,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,WAAW,EAAE,MAAM,KAAK;AAC3B,SAAA;QACD,QAAQ;AACX,KAAA;AACJ,CAAA;MAEY,yBAAyB,GAAG,CACrC,KAAiB,MACkB;IACnC,GAAG,aAAa,CAAgB,KAAK,CAAC;IACtC,MAAM,EAAE,KAAK,CAAC,MAAM;IACpB,MAAM,EAAE,KAAK,CAAC,MAAM;IACpB,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;IACxC,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS;IAC1B,KAAK,EAAE,KAAK,CAAC,KAAK;IAClB,KAAK,EAAE,KAAK,CAAC,KAAK;IAClB,aAAa,EAAE,KAAK,CAAC,aAAa;IAClC,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;AAC3B,CAAA;;;;"}
+{"version":3,"file":"synthetic-events.js","sources":["../src/synthetic-events.ts"],"sourcesContent":["import type React from 'react';\n\nexport const createSyntheticEvent = <T extends Element, E extends Event>(\n    event: E,\n): React.SyntheticEvent<T, E> => {\n    let isDefaultPrevented = false;\n    let isPropagationStopped = false;\n    const preventDefault = () => {\n        isDefaultPrevented = true;\n        event.preventDefault();\n    };\n    const stopPropagation = () => {\n        isPropagationStopped = true;\n        event.stopPropagation();\n    };\n\n    return {\n        nativeEvent: event,\n        currentTarget: event.currentTarget as EventTarget & T,\n        target: event.target as EventTarget & T,\n        bubbles: event.bubbles,\n        cancelable: event.cancelable,\n        defaultPrevented: event.defaultPrevented,\n        eventPhase: event.eventPhase,\n        isTrusted: event.isTrusted,\n        preventDefault,\n        isDefaultPrevented: () => isDefaultPrevented,\n        stopPropagation,\n        isPropagationStopped: () => isPropagationStopped,\n        persist: () => {},\n        timeStamp: event.timeStamp,\n        type: event.type,\n    };\n};\n\nexport const createUIEvent = <T extends Element, E extends Event>(\n    event: E,\n): React.UIEvent<T, E> => ({\n    ...createSyntheticEvent(event),\n    detail: 0,\n    view: {\n        styleMedia: {\n            type: '',\n            matchMedium: () => false,\n        },\n        document,\n    },\n});\n\nexport const createSyntheticMouseEvent = <T extends Element>(\n    event: MouseEvent,\n): React.MouseEvent<T, MouseEvent> => ({\n    ...createUIEvent<T, MouseEvent>(event),\n    altKey: event.altKey,\n    button: event.button,\n    buttons: event.buttons,\n    clientX: event.clientX,\n    clientY: event.clientY,\n    ctrlKey: event.ctrlKey,\n    getModifierState: event.getModifierState,\n    metaKey: event.metaKey,\n    movementX: event.movementX,\n    movementY: event.movementY,\n    pageX: event.pageX,\n    pageY: event.pageY,\n    relatedTarget: event.relatedTarget,\n    screenX: event.screenX,\n    screenY: event.screenY,\n    shiftKey: event.shiftKey,\n});\n"],"names":[],"mappings":"AAEa,MAAA,oBAAoB,GAAG,CAChC,KAAQ,KACoB;IAC5B,IAAI,kBAAkB,GAAG,KAAK;IAC9B,IAAI,oBAAoB,GAAG,KAAK;IAChC,MAAM,cAAc,GAAG,MAAK;QACxB,kBAAkB,GAAG,IAAI;QACzB,KAAK,CAAC,cAAc,EAAE;AAC1B,KAAC;IACD,MAAM,eAAe,GAAG,MAAK;QACzB,oBAAoB,GAAG,IAAI;QAC3B,KAAK,CAAC,eAAe,EAAE;AAC3B,KAAC;IAED,OAAO;AACH,QAAA,WAAW,EAAE,KAAK;QAClB,aAAa,EAAE,KAAK,CAAC,aAAgC;QACrD,MAAM,EAAE,KAAK,CAAC,MAAyB;QACvC,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,cAAc;AACd,QAAA,kBAAkB,EAAE,MAAM,kBAAkB;QAC5C,eAAe;AACf,QAAA,oBAAoB,EAAE,MAAM,oBAAoB;AAChD,QAAA,OAAO,EAAE,MAAK,GAAG;QACjB,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,IAAI,EAAE,KAAK,CAAC,IAAI;KACnB;AACL;MAEa,aAAa,GAAG,CACzB,KAAQ,MACe;IACvB,GAAG,oBAAoB,CAAC,KAAK,CAAC;AAC9B,IAAA,MAAM,EAAE,CAAC;AACT,IAAA,IAAI,EAAE;AACF,QAAA,UAAU,EAAE;AACR,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,WAAW,EAAE,MAAM,KAAK;AAC3B,SAAA;QACD,QAAQ;AACX,KAAA;AACJ,CAAA;MAEY,yBAAyB,GAAG,CACrC,KAAiB,MACkB;IACnC,GAAG,aAAa,CAAgB,KAAK,CAAC;IACtC,MAAM,EAAE,KAAK,CAAC,MAAM;IACpB,MAAM,EAAE,KAAK,CAAC,MAAM;IACpB,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;IACxC,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS;IAC1B,KAAK,EAAE,KAAK,CAAC,KAAK;IAClB,KAAK,EAAE,KAAK,CAAC,KAAK;IAClB,aAAa,EAAE,KAAK,CAAC,aAAa;IAClC,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,OAAO,EAAE,KAAK,CAAC,OAAO;IACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;AAC3B,CAAA;;;;"}

package/modern/typings.d.ts

@@ -1,7 +1,8 @@
-import { AriaAttributes, FC, HTMLAttributes, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
-import { SkeletonProps } from '@alfalab/core-components-skeleton/modern';
-import { TagProps } from '@alfalab/core-components-tag/modern';
+import { type AriaAttributes, type FC, type HTMLAttributes, type MouseEvent, type ReactElement, type ReactNode, type Ref } from 'react';
+import { type SkeletonProps } from '@alfalab/core-components-skeleton/modern';
+import { type TagProps } from '@alfalab/core-components-tag/modern';
 export declare type SelectedId = string | number;
+export declare type TitleProps = Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown' | 'className' | 'disabled' | 'id' | 'role' | 'tabIndex' | 'aria-selected'> & AriaAttributes;
 export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children' | 'className'>, AriaAttributes {
     /**
      * Дополнительный класс
@@ -99,6 +100,10 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChang
      * Доп. пропсы для скелетона
      */
     skeletonProps?: Omit<SkeletonProps, 'visible'>;
+    /**
+     * Доп. пропсы для заголовка таба
+     */
+    titleProps?: TitleProps;
 }
 export interface TabProps extends AriaAttributes {
     /**
@@ -145,8 +150,12 @@ export interface TabProps extends AriaAttributes {
      * Реф для кнопки переключения таба
      */
     toggleRef?: Ref<HTMLDivElement>;
+    /**
+     * Доп. пропсы для заголовка таба
+     */
+    titleProps?: TitleProps;
 }
-export interface TabListTitle {
+export interface TabListTitle extends AriaAttributes {
     title: NonNullable<ReactNode>;
     id: SelectedId;
     disabled?: boolean;
@@ -157,6 +166,7 @@ export interface TabListTitle {
     collapsed?: boolean;
     dataTestId?: string;
     toggleRef?: Ref<HTMLDivElement>;
+    titleProps?: TitleProps;
 }
 export interface TabListProps extends Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView' | 'textStyle' | 'showSkeleton' | 'skeletonProps'> {
     /**

package/moderncssm/components/primary-tablist/Component.collapsible.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { TabListProps } from '../../typings';
+import { type TabListProps } from '../../typings';
 export declare const CollapsiblePrimaryTabList: ({ size, className, containerClassName, titles, selectedId, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint, client, defaultMatchMediaValue, textStyle, showSkeleton, skeletonProps, }: TabListProps) => React.JSX.Element;

package/moderncssm/components/primary-tablist/Component.collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.collapsible.js","sources":["../../../src/components/primary-tablist/Component.collapsible.tsx"],"sourcesContent":["import React, { Ref, useEffect, useMemo, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport {\n    PickerButtonDesktop,\n    PickerButtonDesktopProps,\n} from '@alfalab/core-components-picker-button/desktop';\n\nimport { useTablistTitles } from '../../hooks/use-tablist-titles';\nimport { createSyntheticMouseEvent } from '../../synthetic-events';\nimport { TabListProps } from '../../typings';\nimport { Title } from '../title';\n\nimport styles from './index.module.css';\n\nexport const CollapsiblePrimaryTabList = ({\n    size = 'm',\n    className,\n    containerClassName,\n    titles = [],\n    selectedId = titles.length ? titles[0].id : undefined,\n    collapsedTabsIds,\n    fullWidthScroll,\n    onChange,\n    dataTestId,\n    breakpoint,\n    client,\n    defaultMatchMediaValue,\n    textStyle,\n    showSkeleton,\n    skeletonProps,\n}: TabListProps) => {\n    const lineRef = useRef<HTMLDivElement>(null);\n\n    const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } =\n        useTablistTitles({\n            titles,\n            selectedId,\n            collapsedTabsIds,\n            onChange,\n            breakpoint,\n            client,\n            defaultMatchMediaValue,\n        });\n\n    useEffect(() => {\n        if (selectedTab && lineRef.current) {\n            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n        }\n    }, [selectedTab, tablistTitles]);\n\n    const collapsedOptions = useMemo(\n        () =>\n            tablistTitles.reduce<PickerButtonDesktopProps['options']>(\n                (options, { toggleRef, ...title }) => {\n                    if (title.collapsed) {\n                        options.push({\n                            key: String(title.id),\n                            value: title.id,\n                            content: (\n                                <Title\n                                    {...title}\n                                    ref={toggleRef as Ref<HTMLButtonElement>}\n                                    styles={styles}\n                                    isOption={true}\n                                />\n                            ),\n                        });\n                    }\n\n                    return options;\n                },\n                [],\n            ),\n        [tablistTitles],\n    );\n\n    const collapsedAddonsLength = tablistTitles.filter(\n        (title) => title.collapsed && title.rightAddons,\n    ).length;\n\n    const handleOptionsChange = (\n        payload: Parameters<Required<PickerButtonDesktopProps>['onChange']>[0],\n    ) => {\n        if (payload.selected?.value && onChange) {\n            const nativeMouseEvent = new MouseEvent('change');\n            const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);\n\n            onChange(syntheticMouseEvent, { selectedId: payload.selected.value });\n        }\n    };\n\n    const renderContent = () => (\n        <div\n            role='tablist'\n            data-test-id={dataTestId}\n            className={cn(styles.component, className, !textStyle && size && styles[size], {\n                [styles.fullWidthScroll]: fullWidthScroll,\n            })}\n        >\n            {tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n                <KeyboardFocusable key={restTitleProps.id}>\n                    {(ref, focused) => (\n                        <Title\n                            {...getTabListItemProps(index, ref)}\n                            {...restTitleProps}\n                            focused={focused}\n                            styles={styles}\n                            showSkeleton={showSkeleton}\n                            skeletonProps={skeletonProps}\n                        />\n                    )}\n                </KeyboardFocusable>\n            ))}\n\n            {collapsedOptions.length ? (\n                <span ref={addonRef} role='menu' className={styles.pickerWrapper}>\n                    <PickerButtonDesktop\n                        fieldClassName={styles.title}\n                        optionClassName={cn(size && styles[size])}\n                        options={collapsedOptions}\n                        onChange={handleOptionsChange}\n                        rightAddons={\n                            collapsedAddonsLength ? (\n                                <Badge view='count' content={collapsedAddonsLength} />\n                            ) : null\n                        }\n                        size='m'\n                        view='text'\n                        label='Ещё'\n                        popoverPosition='bottom-end'\n                        disabled={showSkeleton}\n                    />\n                </span>\n            ) : null}\n\n            <div className={styles.line} ref={lineRef} />\n        </div>\n    );\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(\n                styles.container,\n                textStyle && styles[textStyle],\n                styles.desktop,\n                containerClassName,\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAiBa,MAAA,yBAAyB,GAAG,CAAC,EACtC,IAAI,GAAG,GAAG,EACV,SAAS,EACT,kBAAkB,EAClB,MAAM,GAAG,EAAE,EACX,UAAU,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,EACrD,gBAAgB,EAChB,eAAe,EACf,QAAQ,EACR,UAAU,EACV,UAAU,EACV,MAAM,EACN,sBAAsB,EACtB,SAAS,EACT,YAAY,EACZ,aAAa,GACF,KAAI;AACf,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE5C,IAAA,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,mBAAmB,EAAE,GAC7E,gBAAgB,CAAC;QACb,MAAM;QACN,UAAU;QACV,gBAAgB;QAChB,QAAQ;QACR,UAAU;QACV,MAAM;QACN,sBAAsB;AACzB,KAAA,CAAC;IAEN,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,WAAW,IAAI,OAAO,CAAC,OAAO,EAAE;AAChC,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,WAAW,CAAC,WAAW,CAAA,EAAA,CAAI;AAC5D,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,WAAW,CAAC,UAAU,CAAA,GAAA,CAAK;AAC9E;AACL,KAAC,EAAE,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;IAEhC,MAAM,gBAAgB,GAAG,OAAO,CAC5B,MACI,aAAa,CAAC,MAAM,CAChB,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,KAAI;QACjC,IAAI,KAAK,CAAC,SAAS,EAAE;YACjB,OAAO,CAAC,IAAI,CAAC;AACT,gBAAA,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;gBACrB,KAAK,EAAE,KAAK,CAAC,EAAE;AACf,gBAAA,OAAO,GACH,KAAA,CAAA,aAAA,CAAC,KAAK,EACE,EAAA,GAAA,KAAK,EACT,GAAG,EAAE,SAAmC,EACxC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,GAChB,CACL;AACJ,aAAA,CAAC;AACL;AAED,QAAA,OAAO,OAAO;KACjB,EACD,EAAE,CACL,EACL,CAAC,aAAa,CAAC,CAClB;IAED,MAAM,qBAAqB,GAAG,aAAa,CAAC,MAAM,CAC9C,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,WAAW,CAClD,CAAC,MAAM;AAER,IAAA,MAAM,mBAAmB,GAAG,CACxB,OAAsE,KACtE;AACA,QAAA,IAAI,OAAO,CAAC,QAAQ,EAAE,KAAK,IAAI,QAAQ,EAAE;AACrC,YAAA,MAAM,gBAAgB,GAAG,IAAI,UAAU,CAAC,QAAQ,CAAC;AACjD,YAAA,MAAM,mBAAmB,GAAG,yBAAyB,CAAC,gBAAgB,CAAC;AAEvE,YAAA,QAAQ,CAAC,mBAAmB,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;AACxE;AACL,KAAC;AAED,IAAA,MAAM,aAAa,GAAG,OAClB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,IAAI,EAAC,SAAS,EAAA,cAAA,EACA,UAAU,EACxB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC,SAAS,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE;AAC3E,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,eAAe;SAC5C,CAAC,EAAA;AAED,QAAA,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,cAAc,EAAE,EAAE,KAAK,MAC1E,oBAAC,iBAAiB,EAAA,EAAC,GAAG,EAAE,cAAc,CAAC,EAAE,EACpC,EAAA,CAAC,GAAG,EAAE,OAAO,MACV,KAAC,CAAA,aAAA,CAAA,KAAK,OACE,mBAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,EAC/B,GAAA,cAAc,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAAA,CAC9B,CACL,CACe,CACvB,CAAC;AAED,QAAA,gBAAgB,CAAC,MAAM,IACpB,8BAAM,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA;AAC5D,YAAA,KAAA,CAAA,aAAA,CAAC,mBAAmB,EAChB,EAAA,cAAc,EAAE,MAAM,CAAC,KAAK,EAC5B,eAAe,EAAE,EAAE,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,EACzC,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EACP,qBAAqB,IACjB,oBAAC,KAAK,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,qBAAqB,GAAI,IACtD,IAAI,EAEZ,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,oBAAK,EACX,eAAe,EAAC,YAAY,EAC5B,QAAQ,EAAE,YAAY,EACxB,CAAA,CACC,IACP,IAAI;AAER,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAA,CAAI,CAC3C,CACT;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,EAC9B,MAAM,CAAC,OAAO,EACd,kBAAkB,CACrB,EAEA,EAAA,aAAa,EAAE,CACd;AAEd;;;;"}
+{"version":3,"file":"Component.collapsible.js","sources":["../../../src/components/primary-tablist/Component.collapsible.tsx"],"sourcesContent":["import React, { type Ref, useEffect, useMemo, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport {\n    PickerButtonDesktop,\n    type PickerButtonDesktopProps,\n} from '@alfalab/core-components-picker-button/desktop';\n\nimport { useTablistTitles } from '../../hooks/use-tablist-titles';\nimport { createSyntheticMouseEvent } from '../../synthetic-events';\nimport { type TabListProps } from '../../typings';\nimport { Title } from '../title';\n\nimport styles from './index.module.css';\n\nexport const CollapsiblePrimaryTabList = ({\n    size = 'm',\n    className,\n    containerClassName,\n    titles = [],\n    selectedId = titles.length ? titles[0].id : undefined,\n    collapsedTabsIds,\n    fullWidthScroll,\n    onChange,\n    dataTestId,\n    breakpoint,\n    client,\n    defaultMatchMediaValue,\n    textStyle,\n    showSkeleton,\n    skeletonProps,\n}: TabListProps) => {\n    const lineRef = useRef<HTMLDivElement>(null);\n\n    const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } =\n        useTablistTitles({\n            titles,\n            selectedId,\n            collapsedTabsIds,\n            onChange,\n            breakpoint,\n            client,\n            defaultMatchMediaValue,\n        });\n\n    useEffect(() => {\n        if (selectedTab && lineRef.current) {\n            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n        }\n    }, [selectedTab, tablistTitles]);\n\n    const collapsedOptions = useMemo(\n        () =>\n            tablistTitles.reduce<PickerButtonDesktopProps['options']>(\n                (options, { toggleRef, ...title }) => {\n                    if (title.collapsed) {\n                        options.push({\n                            key: String(title.id),\n                            value: title.id,\n                            content: (\n                                <Title\n                                    {...title}\n                                    ref={toggleRef as Ref<HTMLButtonElement>}\n                                    styles={styles}\n                                    isOption={true}\n                                />\n                            ),\n                        });\n                    }\n\n                    return options;\n                },\n                [],\n            ),\n        [tablistTitles],\n    );\n\n    const collapsedAddonsLength = tablistTitles.filter(\n        (title) => title.collapsed && title.rightAddons,\n    ).length;\n\n    const handleOptionsChange = (\n        payload: Parameters<Required<PickerButtonDesktopProps>['onChange']>[0],\n    ) => {\n        if (payload.selected?.value && onChange) {\n            const nativeMouseEvent = new MouseEvent('change');\n            const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);\n\n            onChange(syntheticMouseEvent, { selectedId: payload.selected.value });\n        }\n    };\n\n    const renderContent = () => (\n        <div\n            role='tablist'\n            data-test-id={dataTestId}\n            className={cn(styles.component, className, !textStyle && size && styles[size], {\n                [styles.fullWidthScroll]: fullWidthScroll,\n            })}\n        >\n            {tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n                <KeyboardFocusable key={restTitleProps.id}>\n                    {(ref, focused) => (\n                        <Title\n                            {...getTabListItemProps(index, ref)}\n                            {...restTitleProps}\n                            focused={focused}\n                            styles={styles}\n                            showSkeleton={showSkeleton}\n                            skeletonProps={skeletonProps}\n                        />\n                    )}\n                </KeyboardFocusable>\n            ))}\n\n            {collapsedOptions.length ? (\n                <span ref={addonRef} role='menu' className={styles.pickerWrapper}>\n                    <PickerButtonDesktop\n                        fieldClassName={styles.title}\n                        optionClassName={cn(size && styles[size])}\n                        options={collapsedOptions}\n                        onChange={handleOptionsChange}\n                        rightAddons={\n                            collapsedAddonsLength ? (\n                                <Badge view='count' content={collapsedAddonsLength} />\n                            ) : null\n                        }\n                        size='m'\n                        view='text'\n                        label='Ещё'\n                        popoverPosition='bottom-end'\n                        disabled={showSkeleton}\n                    />\n                </span>\n            ) : null}\n\n            <div className={styles.line} ref={lineRef} />\n        </div>\n    );\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(\n                styles.container,\n                textStyle && styles[textStyle],\n                styles.desktop,\n                containerClassName,\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/components/primary-tablist/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { PlatformProps, Styles, TabListProps } from '../../typings';
+import { type PlatformProps, type Styles, type TabListProps } from '../../typings';
 export declare const PrimaryTabList: ({ size, styles, className, containerClassName, titles, selectedId, scrollable, fullWidthScroll, onChange, dataTestId, platform, textStyle, inlineStyle, showSkeleton, skeletonProps, }: TabListProps & Styles & PlatformProps) => React.JSX.Element;

package/moderncssm/components/primary-tablist/Component.desktop.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { TabListProps } from '../../typings';
+import { type TabListProps } from '../../typings';
 export declare const PrimaryTabListDesktop: ({ size, ...restProps }: TabListProps) => React.JSX.Element;

package/moderncssm/components/primary-tablist/Component.desktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.desktop.js","sources":["../../../src/components/primary-tablist/Component.desktop.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TabListProps } from '../../typings';\n\nimport { PrimaryTabList } from './Component';\n\nimport styles from './index.module.css';\n\nexport const PrimaryTabListDesktop = ({ size = 'm', ...restProps }: TabListProps) => (\n    <PrimaryTabList {...restProps} size={size} styles={styles} platform='desktop' />\n);\n"],"names":[],"mappings":";;;;AAQO,MAAM,qBAAqB,GAAG,CAAC,EAAE,IAAI,GAAG,GAAG,EAAE,GAAG,SAAS,EAAgB,MAC5E,KAAC,CAAA,aAAA,CAAA,cAAc,OAAK,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAC,SAAS,EAAA,CAAG;;;;"}
+{"version":3,"file":"Component.desktop.js","sources":["../../../src/components/primary-tablist/Component.desktop.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type TabListProps } from '../../typings';\n\nimport { PrimaryTabList } from './Component';\n\nimport styles from './index.module.css';\n\nexport const PrimaryTabListDesktop = ({ size = 'm', ...restProps }: TabListProps) => (\n    <PrimaryTabList {...restProps} size={size} styles={styles} platform='desktop' />\n);\n"],"names":[],"mappings":";;;;AAQO,MAAM,qBAAqB,GAAG,CAAC,EAAE,IAAI,GAAG,GAAG,EAAE,GAAG,SAAS,EAAgB,MAC5E,KAAC,CAAA,aAAA,CAAA,cAAc,OAAK,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAC,SAAS,EAAA,CAAG;;;;"}

package/moderncssm/components/primary-tablist/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/primary-tablist/Component.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\nimport cn from 'classnames';\n\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport { fnUtils } from '@alfalab/core-components-shared';\n\nimport { useTabs } from '../../hooks/use-tabs';\nimport { PlatformProps, Styles, TabListProps } from '../../typings';\nimport { ScrollableContainer } from '../scrollable-container';\nimport { Title } from '../title';\n\nexport const PrimaryTabList = ({\n    size,\n    styles = {},\n    className,\n    containerClassName,\n    titles = [],\n    selectedId = titles.length ? titles[0].id : undefined,\n    scrollable = true,\n    fullWidthScroll,\n    onChange,\n    dataTestId,\n    platform,\n    textStyle,\n    inlineStyle,\n    showSkeleton,\n    skeletonProps,\n}: TabListProps & Styles & PlatformProps) => {\n    const lineRef = useRef<HTMLDivElement>(null);\n\n    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({\n        titles,\n        selectedId,\n        onChange,\n    });\n\n    // расчет размера и положения нижней полосы\n    useEffect(() => {\n        if (selectedTab) {\n            const updateLineWidth = () => {\n                if (lineRef.current) {\n                    lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n                    lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n                }\n            };\n\n            const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;\n            const observer = new ResizeObserver(updateLineWidth);\n\n            observer.observe(selectedTab);\n\n            return () => observer.disconnect();\n        }\n\n        return fnUtils.noop;\n    }, [selectedTab, titles]);\n\n    const handleTitleResize = useCallback(() => {\n        if (selectedTab && lineRef.current) {\n            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n        }\n    }, [selectedTab]);\n\n    const renderContent = () => (\n        <div\n            role='tablist'\n            data-test-id={dataTestId}\n            className={cn(styles.component, className, !textStyle && size && styles[size], {\n                [styles.fullWidthScroll]: fullWidthScroll,\n            })}\n        >\n            {titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n                <KeyboardFocusable key={restTitleProps.id}>\n                    {(ref, focused) => (\n                        <Title\n                            {...getTabListItemProps(index, ref)}\n                            {...restTitleProps}\n                            focused={focused}\n                            styles={styles}\n                            showSkeleton={showSkeleton}\n                            skeletonProps={skeletonProps}\n                            onResize={handleTitleResize}\n                        />\n                    )}\n                </KeyboardFocusable>\n            ))}\n\n            <div className={styles.line} ref={lineRef} />\n        </div>\n    );\n\n    const wrapperClassName = cn(textStyle && styles[textStyle], styles[platform]);\n\n    return scrollable ? (\n        <ScrollableContainer\n            containerWrapperClassName={wrapperClassName}\n            activeChild={focusedTab || selectedTab}\n            containerClassName={containerClassName}\n            scrollControlsClassName={cn(textStyle && styles.scrollControls)}\n            fullWidthScroll={fullWidthScroll}\n            view='primary'\n            size={textStyle ? undefined : size}\n            platform={platform}\n            inlineStyle={inlineStyle}\n            showSkeleton={showSkeleton}\n        >\n            {renderContent()}\n        </ScrollableContainer>\n    ) : (\n        <div\n            className={cn(styles.container, wrapperClassName, containerClassName)}\n            style={inlineStyle}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["ResizeObserver","ResizeObserverPolyfill"],"mappings":";;;;;;;;;AAYO,MAAM,cAAc,GAAG,CAAC,EAC3B,IAAI,EACJ,MAAM,GAAG,EAAE,EACX,SAAS,EACT,kBAAkB,EAClB,MAAM,GAAG,EAAE,EACX,UAAU,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,EACrD,UAAU,GAAG,IAAI,EACjB,eAAe,EACf,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAa,GACuB,KAAI;AACxC,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;IAE5C,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAAG,OAAO,CAAC;QAC7D,MAAM;QACN,UAAU;QACV,QAAQ;AACX,KAAA,CAAC;;IAGF,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,WAAW,EAAE;YACb,MAAM,eAAe,GAAG,MAAK;gBACzB,IAAI,OAAO,CAAC,OAAO,EAAE;AACjB,oBAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,WAAW,CAAC,WAAW,CAAA,EAAA,CAAI;AAC5D,oBAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,WAAW,CAAC,UAAU,CAAA,GAAA,CAAK;AAC9E;AACL,aAAC;AAED,YAAA,MAAMA,gBAAc,GAAG,MAAM,CAAC,cAAc,IAAIC,cAAsB;AACtE,YAAA,MAAM,QAAQ,GAAG,IAAID,gBAAc,CAAC,eAAe,CAAC;AAEpD,YAAA,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC;AAE7B,YAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACrC;QAED,OAAO,OAAO,CAAC,IAAI;AACvB,KAAC,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAEzB,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;AACvC,QAAA,IAAI,WAAW,IAAI,OAAO,CAAC,OAAO,EAAE;AAChC,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,WAAW,CAAC,WAAW,CAAA,EAAA,CAAI;AAC5D,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,WAAW,CAAC,UAAU,CAAA,GAAA,CAAK;AAC9E;AACL,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjB,IAAA,MAAM,aAAa,GAAG,OAClB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,IAAI,EAAC,SAAS,EAAA,cAAA,EACA,UAAU,EACxB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC,SAAS,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE;AAC3E,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,eAAe;SAC5C,CAAC,EAAA;AAED,QAAA,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,cAAc,EAAE,EAAE,KAAK,MACnE,KAAC,CAAA,aAAA,CAAA,iBAAiB,IAAC,GAAG,EAAE,cAAc,CAAC,EAAE,EACpC,EAAA,CAAC,GAAG,EAAE,OAAO,MACV,KAAC,CAAA,aAAA,CAAA,KAAK,EACE,EAAA,GAAA,mBAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,KAC/B,cAAc,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,iBAAiB,EAAA,CAC7B,CACL,CACe,CACvB,CAAC;AAEF,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAA,CAAI,CAC3C,CACT;AAED,IAAA,MAAM,gBAAgB,GAAG,EAAE,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAE7E,OAAO,UAAU,IACb,KAAC,CAAA,aAAA,CAAA,mBAAmB,IAChB,yBAAyB,EAAE,gBAAgB,EAC3C,WAAW,EAAE,UAAU,IAAI,WAAW,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,uBAAuB,EAAE,EAAE,CAAC,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,EAC/D,eAAe,EAAE,eAAe,EAChC,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,EAClC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAAA,EAEzB,aAAa,EAAE,CACE,KAEtB,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,EACrE,KAAK,EAAE,WAAW,IAEjB,aAAa,EAAE,CACd,CACT;AACL;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/primary-tablist/Component.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\nimport cn from 'classnames';\n\nimport { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';\nimport { fnUtils } from '@alfalab/core-components-shared';\n\nimport { useTabs } from '../../hooks/use-tabs';\nimport { type PlatformProps, type Styles, type TabListProps } from '../../typings';\nimport { ScrollableContainer } from '../scrollable-container';\nimport { Title } from '../title';\n\nexport const PrimaryTabList = ({\n    size,\n    styles = {},\n    className,\n    containerClassName,\n    titles = [],\n    selectedId = titles.length ? titles[0].id : undefined,\n    scrollable = true,\n    fullWidthScroll,\n    onChange,\n    dataTestId,\n    platform,\n    textStyle,\n    inlineStyle,\n    showSkeleton,\n    skeletonProps,\n}: TabListProps & Styles & PlatformProps) => {\n    const lineRef = useRef<HTMLDivElement>(null);\n\n    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({\n        titles,\n        selectedId,\n        onChange,\n    });\n\n    // расчет размера и положения нижней полосы\n    useEffect(() => {\n        if (selectedTab) {\n            const updateLineWidth = () => {\n                if (lineRef.current) {\n                    lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n                    lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n                }\n            };\n\n            const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;\n            const observer = new ResizeObserver(updateLineWidth);\n\n            observer.observe(selectedTab);\n\n            return () => observer.disconnect();\n        }\n\n        return fnUtils.noop;\n    }, [selectedTab, titles]);\n\n    const handleTitleResize = useCallback(() => {\n        if (selectedTab && lineRef.current) {\n            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;\n            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;\n        }\n    }, [selectedTab]);\n\n    const renderContent = () => (\n        <div\n            role='tablist'\n            data-test-id={dataTestId}\n            className={cn(styles.component, className, !textStyle && size && styles[size], {\n                [styles.fullWidthScroll]: fullWidthScroll,\n            })}\n        >\n            {titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (\n                <KeyboardFocusable key={restTitleProps.id}>\n                    {(ref, focused) => (\n                        <Title\n                            {...getTabListItemProps(index, ref)}\n                            {...restTitleProps}\n                            focused={focused}\n                            styles={styles}\n                            showSkeleton={showSkeleton}\n                            skeletonProps={skeletonProps}\n                            onResize={handleTitleResize}\n                        />\n                    )}\n                </KeyboardFocusable>\n            ))}\n\n            <div className={styles.line} ref={lineRef} />\n        </div>\n    );\n\n    const wrapperClassName = cn(textStyle && styles[textStyle], styles[platform]);\n\n    return scrollable ? (\n        <ScrollableContainer\n            containerWrapperClassName={wrapperClassName}\n            activeChild={focusedTab || selectedTab}\n            containerClassName={containerClassName}\n            scrollControlsClassName={cn(textStyle && styles.scrollControls)}\n            fullWidthScroll={fullWidthScroll}\n            view='primary'\n            size={textStyle ? undefined : size}\n            platform={platform}\n            inlineStyle={inlineStyle}\n            showSkeleton={showSkeleton}\n        >\n            {renderContent()}\n        </ScrollableContainer>\n    ) : (\n        <div\n            className={cn(styles.container, wrapperClassName, containerClassName)}\n            style={inlineStyle}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["ResizeObserver","ResizeObserverPolyfill"],"mappings":"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"}

package/moderncssm/components/primary-tablist/Component.mobile.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { TabListProps } from '../../typings';
+import { type TabListProps } from '../../typings';
 export declare type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
 export declare const PrimaryTabListMobile: (props: PrimaryTabListMobileProps) => React.JSX.Element;

package/moderncssm/components/primary-tablist/Component.mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.mobile.js","sources":["../../../src/components/primary-tablist/Component.mobile.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TabListProps } from '../../typings';\n\nimport { PrimaryTabList } from './Component';\n\nimport commonStyles from './index.module.css';\nimport mobileStyles from './mobile.module.css';\n\nconst styles = {\n    ...commonStyles,\n    ...mobileStyles,\n};\n\nexport type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;\n\nexport const PrimaryTabListMobile = (props: PrimaryTabListMobileProps) => (\n    <PrimaryTabList {...props} styles={styles} platform='mobile' />\n);\n"],"names":["commonStyles"],"mappings":";;;;;AASA,MAAM,MAAM,GAAG;AACX,IAAA,GAAGA,QAAY;AACf,IAAA,GAAG,YAAY;CAClB;AAIY,MAAA,oBAAoB,GAAG,CAAC,KAAgC,MACjE,KAAC,CAAA,aAAA,CAAA,cAAc,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAC,QAAQ,EAAG,CAAA;;;;"}
+{"version":3,"file":"Component.mobile.js","sources":["../../../src/components/primary-tablist/Component.mobile.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type TabListProps } from '../../typings';\n\nimport { PrimaryTabList } from './Component';\n\nimport commonStyles from './index.module.css';\nimport mobileStyles from './mobile.module.css';\n\nconst styles = {\n    ...commonStyles,\n    ...mobileStyles,\n};\n\nexport type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;\n\nexport const PrimaryTabListMobile = (props: PrimaryTabListMobileProps) => (\n    <PrimaryTabList {...props} styles={styles} platform='mobile' />\n);\n"],"names":["commonStyles"],"mappings":";;;;;AASA,MAAM,MAAM,GAAG;AACX,IAAA,GAAGA,QAAY;AACf,IAAA,GAAG,YAAY;CAClB;AAIY,MAAA,oBAAoB,GAAG,CAAC,KAAgC,MACjE,KAAC,CAAA,aAAA,CAAA,cAAc,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAC,QAAQ,EAAG,CAAA;;;;"}

package/moderncssm/components/primary-tablist/Component.responsive.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { TabListProps } from '../../typings';
+import { type TabListProps } from '../../typings';
 export declare const PrimaryTabListResponsive: ({ size, breakpoint, client, fullWidthScroll, defaultMatchMediaValue, ...restProps }: TabListProps) => React.JSX.Element;

package/moderncssm/components/primary-tablist/Component.responsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.responsive.js","sources":["../../../src/components/primary-tablist/Component.responsive.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { TabListProps } from '../../typings';\n\nimport { PrimaryTabListDesktop } from './Component.desktop';\nimport { PrimaryTabListMobile } from './Component.mobile';\n\nexport const PrimaryTabListResponsive = ({\n    size,\n    breakpoint,\n    client,\n    fullWidthScroll,\n    defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n    ...restProps\n}: TabListProps) => {\n    const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n    return isDesktop ? (\n        <PrimaryTabListDesktop\n            breakpoint={breakpoint}\n            size={size}\n            defaultMatchMediaValue={defaultMatchMediaValue}\n            {...restProps}\n        />\n    ) : (\n        <PrimaryTabListMobile\n            breakpoint={breakpoint}\n            defaultMatchMediaValue={defaultMatchMediaValue}\n            fullWidthScroll={fullWidthScroll}\n            {...restProps}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;;AASO,MAAM,wBAAwB,GAAG,CAAC,EACrC,IAAI,EACJ,UAAU,EACV,MAAM,EACN,eAAe,EACf,sBAAsB,GAAG,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,EAChF,GAAG,SAAS,EACD,KAAI;IACf,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAElE,OAAO,SAAS,IACZ,KAAC,CAAA,aAAA,CAAA,qBAAqB,IAClB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,sBAAsB,EAAE,sBAAsB,KAC1C,SAAS,EAAA,CACf,KAEF,KAAA,CAAA,aAAA,CAAC,oBAAoB,EACjB,EAAA,UAAU,EAAE,UAAU,EACtB,sBAAsB,EAAE,sBAAsB,EAC9C,eAAe,EAAE,eAAe,EAC5B,GAAA,SAAS,EACf,CAAA,CACL;AACL;;;;"}
+{"version":3,"file":"Component.responsive.js","sources":["../../../src/components/primary-tablist/Component.responsive.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { type TabListProps } from '../../typings';\n\nimport { PrimaryTabListDesktop } from './Component.desktop';\nimport { PrimaryTabListMobile } from './Component.mobile';\n\nexport const PrimaryTabListResponsive = ({\n    size,\n    breakpoint,\n    client,\n    fullWidthScroll,\n    defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n    ...restProps\n}: TabListProps) => {\n    const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n    return isDesktop ? (\n        <PrimaryTabListDesktop\n            breakpoint={breakpoint}\n            size={size}\n            defaultMatchMediaValue={defaultMatchMediaValue}\n            {...restProps}\n        />\n    ) : (\n        <PrimaryTabListMobile\n            breakpoint={breakpoint}\n            defaultMatchMediaValue={defaultMatchMediaValue}\n            fullWidthScroll={fullWidthScroll}\n            {...restProps}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;;AASO,MAAM,wBAAwB,GAAG,CAAC,EACrC,IAAI,EACJ,UAAU,EACV,MAAM,EACN,eAAe,EACf,sBAAsB,GAAG,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,EAChF,GAAG,SAAS,EACD,KAAI;IACf,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAElE,OAAO,SAAS,IACZ,KAAC,CAAA,aAAA,CAAA,qBAAqB,IAClB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,sBAAsB,EAAE,sBAAsB,KAC1C,SAAS,EAAA,CACf,KAEF,KAAA,CAAA,aAAA,CAAC,oBAAoB,EACjB,EAAA,UAAU,EAAE,UAAU,EACtB,sBAAsB,EAAE,sBAAsB,EAC9C,eAAe,EAAE,eAAe,EAC5B,GAAA,SAAS,EACf,CAAA,CACL;AACL;;;;"}

package/moderncssm/components/primary-tablist/index.module.css

@@ -426,7 +426,9 @@
     bottom: var(--gap-0);
     left: var(--gap-0);
     background-color: var(--primary-tablist-line-color);
-    transition: transform 0.2s ease, width 0.2s ease;
+    transition:
+        transform 0.2s ease,
+        width 0.2s ease;
 }
 .option {
     color: var(--color-light-text-primary);

package/moderncssm/components/scroll-controls/Component.d.ts

@@ -1,5 +1,5 @@
-import React, { RefObject } from 'react';
-import { TabsProps } from '../../typings';
+import React, { type RefObject } from 'react';
+import { type TabsProps } from '../../typings';
 declare type ScrollControlsProps = {
     className?: string;
     view: Exclude<TabsProps['view'], undefined>;

package/moderncssm/components/scroll-controls/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/scroll-controls/Component.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport _debounce from 'lodash/debounce';\n\nimport { IconButton } from '@alfalab/core-components-icon-button';\nimport { ChevronLeftCompactSIcon } from '@alfalab/icons-glyph/ChevronLeftCompactSIcon';\nimport { ChevronRightCompactSIcon } from '@alfalab/icons-glyph/ChevronRightCompactSIcon';\n\nimport { TabsProps } from '../../typings';\n\nimport { getDisabledState, scrollIntoFirstTab, scrollIntoLastTab } from './utils';\n\nimport styles from './index.module.css';\n\ntype ScrollControlsProps = {\n    className?: string;\n    view: Exclude<TabsProps['view'], undefined>;\n    size: TabsProps['size'];\n    containerRef: RefObject<HTMLDivElement>;\n    showSkeleton?: boolean;\n};\n\nexport const ScrollControls = forwardRef<HTMLDivElement, ScrollControlsProps>(\n    ({ containerRef, view, size: sizeProp, className, showSkeleton }, ref) => {\n        const container = containerRef.current;\n        const [disabledState, updateDisabledState] = useState(() => getDisabledState(container));\n\n        useEffect(() => {\n            const handleScroll = _debounce(\n                () => updateDisabledState(getDisabledState(container)),\n                100,\n                { leading: true, maxWait: 100, trailing: true },\n            );\n\n            container?.addEventListener('scroll', handleScroll);\n\n            return () => container?.removeEventListener('scroll', handleScroll);\n        }, [container]);\n\n        const getSize = () => {\n            if (view === 'primary') {\n                return sizeProp === 'xl' ? 'xs' : 'xxs';\n            }\n\n            return sizeProp && ['s', 'm', 'l', 'xl'].includes(sizeProp) ? 's' : 'xs';\n        };\n\n        const handleScrollLeft = () => scrollIntoFirstTab(container);\n\n        const handleScrollRight = () => scrollIntoLastTab(container);\n\n        const commonButtonProps = {\n            className: styles.button,\n            size: getSize(),\n            view: 'secondary',\n        } as const;\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    styles[view],\n                    sizeProp && styles[sizeProp],\n                    className,\n                    {\n                        [styles.borderVisible]: !disabledState.toRight,\n                    },\n                )}\n            >\n                <IconButton\n                    {...commonButtonProps}\n                    icon={ChevronLeftCompactSIcon}\n                    disabled={disabledState.toLeft || showSkeleton}\n                    onClick={handleScrollLeft}\n                />\n                <IconButton\n                    {...commonButtonProps}\n                    icon={ChevronRightCompactSIcon}\n                    disabled={disabledState.toRight || showSkeleton}\n                    onClick={handleScrollRight}\n                />\n            </div>\n        );\n    },\n);\n\nScrollControls.displayName = 'ScrollControls';\n"],"names":[],"mappings":";;;;;;;;;MAsBa,cAAc,GAAG,UAAU,CACpC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,GAAG,KAAI;AACrE,IAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AACtC,IAAA,MAAM,CAAC,aAAa,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,MAAM,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAExF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,YAAY,GAAG,SAAS,CAC1B,MAAM,mBAAmB,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,EACtD,GAAG,EACH,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAClD;AAED,QAAA,SAAS,EAAE,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QAEnD,OAAO,MAAM,SAAS,EAAE,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;AACvE,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,MAAK;QACjB,IAAI,IAAI,KAAK,SAAS,EAAE;YACpB,OAAO,QAAQ,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK;AAC1C;QAED,OAAO,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,IAAI;AAC5E,KAAC;IAED,MAAM,gBAAgB,GAAG,MAAM,kBAAkB,CAAC,SAAS,CAAC;IAE5D,MAAM,iBAAiB,GAAG,MAAM,iBAAiB,CAAC,SAAS,CAAC;AAE5D,IAAA,MAAM,iBAAiB,GAAG;QACtB,SAAS,EAAE,MAAM,CAAC,MAAM;QACxB,IAAI,EAAE,OAAO,EAAE;AACf,QAAA,IAAI,EAAE,WAAW;KACX;IAEV,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,IAAI,CAAC,EACZ,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC5B,SAAS,EACT;YACI,CAAC,MAAM,CAAC,aAAa,GAAG,CAAC,aAAa,CAAC,OAAO;SACjD,CACJ,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EACH,EAAA,GAAA,iBAAiB,EACrB,IAAI,EAAE,uBAAuB,EAC7B,QAAQ,EAAE,aAAa,CAAC,MAAM,IAAI,YAAY,EAC9C,OAAO,EAAE,gBAAgB,EAC3B,CAAA;QACF,KAAC,CAAA,aAAA,CAAA,UAAU,OACH,iBAAiB,EACrB,IAAI,EAAE,wBAAwB,EAC9B,QAAQ,EAAE,aAAa,CAAC,OAAO,IAAI,YAAY,EAC/C,OAAO,EAAE,iBAAiB,EAAA,CAC5B,CACA;AAEd,CAAC;AAGL,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/scroll-controls/Component.tsx"],"sourcesContent":["import React, { forwardRef, type RefObject, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport _debounce from 'lodash/debounce';\n\nimport { IconButton } from '@alfalab/core-components-icon-button';\nimport { ChevronLeftCompactSIcon } from '@alfalab/icons-glyph/ChevronLeftCompactSIcon';\nimport { ChevronRightCompactSIcon } from '@alfalab/icons-glyph/ChevronRightCompactSIcon';\n\nimport { type TabsProps } from '../../typings';\n\nimport { getDisabledState, scrollIntoFirstTab, scrollIntoLastTab } from './utils';\n\nimport styles from './index.module.css';\n\ntype ScrollControlsProps = {\n    className?: string;\n    view: Exclude<TabsProps['view'], undefined>;\n    size: TabsProps['size'];\n    containerRef: RefObject<HTMLDivElement>;\n    showSkeleton?: boolean;\n};\n\nexport const ScrollControls = forwardRef<HTMLDivElement, ScrollControlsProps>(\n    ({ containerRef, view, size: sizeProp, className, showSkeleton }, ref) => {\n        const container = containerRef.current;\n        const [disabledState, updateDisabledState] = useState(() => getDisabledState(container));\n\n        useEffect(() => {\n            const handleScroll = _debounce(\n                () => updateDisabledState(getDisabledState(container)),\n                100,\n                { leading: true, maxWait: 100, trailing: true },\n            );\n\n            container?.addEventListener('scroll', handleScroll);\n\n            return () => container?.removeEventListener('scroll', handleScroll);\n        }, [container]);\n\n        const getSize = () => {\n            if (view === 'primary') {\n                return sizeProp === 'xl' ? 'xs' : 'xxs';\n            }\n\n            return sizeProp && ['s', 'm', 'l', 'xl'].includes(sizeProp) ? 's' : 'xs';\n        };\n\n        const handleScrollLeft = () => scrollIntoFirstTab(container);\n\n        const handleScrollRight = () => scrollIntoLastTab(container);\n\n        const commonButtonProps = {\n            className: styles.button,\n            size: getSize(),\n            view: 'secondary',\n        } as const;\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    styles.component,\n                    styles[view],\n                    sizeProp && styles[sizeProp],\n                    className,\n                    {\n                        [styles.borderVisible]: !disabledState.toRight,\n                    },\n                )}\n            >\n                <IconButton\n                    {...commonButtonProps}\n                    icon={ChevronLeftCompactSIcon}\n                    disabled={disabledState.toLeft || showSkeleton}\n                    onClick={handleScrollLeft}\n                />\n                <IconButton\n                    {...commonButtonProps}\n                    icon={ChevronRightCompactSIcon}\n                    disabled={disabledState.toRight || showSkeleton}\n                    onClick={handleScrollRight}\n                />\n            </div>\n        );\n    },\n);\n\nScrollControls.displayName = 'ScrollControls';\n"],"names":[],"mappings":";;;;;;;;;MAsBa,cAAc,GAAG,UAAU,CACpC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,GAAG,KAAI;AACrE,IAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AACtC,IAAA,MAAM,CAAC,aAAa,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,MAAM,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAExF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,YAAY,GAAG,SAAS,CAC1B,MAAM,mBAAmB,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,EACtD,GAAG,EACH,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAClD;AAED,QAAA,SAAS,EAAE,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QAEnD,OAAO,MAAM,SAAS,EAAE,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;AACvE,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,MAAK;QACjB,IAAI,IAAI,KAAK,SAAS,EAAE;YACpB,OAAO,QAAQ,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK;AAC1C;QAED,OAAO,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,IAAI;AAC5E,KAAC;IAED,MAAM,gBAAgB,GAAG,MAAM,kBAAkB,CAAC,SAAS,CAAC;IAE5D,MAAM,iBAAiB,GAAG,MAAM,iBAAiB,CAAC,SAAS,CAAC;AAE5D,IAAA,MAAM,iBAAiB,GAAG;QACtB,SAAS,EAAE,MAAM,CAAC,MAAM;QACxB,IAAI,EAAE,OAAO,EAAE;AACf,QAAA,IAAI,EAAE,WAAW;KACX;IAEV,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,IAAI,CAAC,EACZ,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC5B,SAAS,EACT;YACI,CAAC,MAAM,CAAC,aAAa,GAAG,CAAC,aAAa,CAAC,OAAO;SACjD,CACJ,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EACH,EAAA,GAAA,iBAAiB,EACrB,IAAI,EAAE,uBAAuB,EAC7B,QAAQ,EAAE,aAAa,CAAC,MAAM,IAAI,YAAY,EAC9C,OAAO,EAAE,gBAAgB,EAC3B,CAAA;QACF,KAAC,CAAA,aAAA,CAAA,UAAU,OACH,iBAAiB,EACrB,IAAI,EAAE,wBAAwB,EAC9B,QAAQ,EAAE,aAAa,CAAC,OAAO,IAAI,YAAY,EAC/C,OAAO,EAAE,iBAAiB,EAAA,CAC5B,CACA;AAEd,CAAC;AAGL,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/moderncssm/components/scroll-controls/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/scroll-controls/utils.ts"],"sourcesContent":["const ADDITIONAL_OFFSET = 15;\n\nfunction getTabs(container: HTMLDivElement) {\n    return Array.from(container.querySelectorAll('button[role=\"tab\"]')) as HTMLButtonElement[];\n}\n\nfunction findLastVisibleTab(container: HTMLDivElement) {\n    const tabs = getTabs(container);\n\n    return tabs.reduce((res, tab) => {\n        if (tab.offsetLeft + ADDITIONAL_OFFSET < container.clientWidth + container.scrollLeft) {\n            return tab;\n        }\n\n        return res;\n    }, tabs[0]);\n}\n\nfunction findFirstVisibleTab(container: HTMLDivElement) {\n    const tabs = getTabs(container);\n\n    return tabs.reduceRight((res, tab) => {\n        if (tab.offsetLeft + tab.clientWidth > container.scrollLeft + ADDITIONAL_OFFSET) {\n            return tab;\n        }\n\n        return res;\n    }, tabs[tabs.length - 1]);\n}\n\nexport function scrollIntoLastTab(container: HTMLDivElement | null) {\n    if (!container) return;\n\n    findLastVisibleTab(container).scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'start',\n    });\n}\n\nexport function scrollIntoFirstTab(container: HTMLDivElement | null) {\n    if (!container) return;\n\n    findFirstVisibleTab(container).scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'end',\n    });\n}\n\nexport function getDisabledState(container: HTMLDivElement | null) {\n    if (!container) return { toLeft: false, toRight: false };\n    const scrollOffset = 2;\n\n    const toLeft = container.scrollLeft <= scrollOffset;\n    const toRight =\n        container.scrollLeft + container.clientWidth >= container.scrollWidth - scrollOffset;\n\n    return { toLeft, toRight };\n}\n"],"names":[],"mappings":"AAAA,MAAM,iBAAiB,GAAG,EAAE;AAE5B,SAAS,OAAO,CAAC,SAAyB,EAAA;IACtC,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAwB;AAC9F;AAEA,SAAS,kBAAkB,CAAC,SAAyB,EAAA;AACjD,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC;IAE/B,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,KAAI;AAC5B,QAAA,IAAI,GAAG,CAAC,UAAU,GAAG,iBAAiB,GAAG,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE;AACnF,YAAA,OAAO,GAAG;AACb;AAED,QAAA,OAAO,GAAG;AACd,KAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;AACf;AAEA,SAAS,mBAAmB,CAAC,SAAyB,EAAA;AAClD,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC;IAE/B,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,EAAE,GAAG,KAAI;AACjC,QAAA,IAAI,GAAG,CAAC,UAAU,GAAG,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,GAAG,iBAAiB,EAAE;AAC7E,YAAA,OAAO,GAAG;AACb;AAED,QAAA,OAAO,GAAG;KACb,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAC7B;AAEM,SAAU,iBAAiB,CAAC,SAAgC,EAAA;AAC9D,IAAA,IAAI,CAAC,SAAS;QAAE;AAEhB,IAAA,kBAAkB,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC;AACzC,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,OAAO;AAClB,KAAA,CAAC;AACN;AAEM,SAAU,kBAAkB,CAAC,SAAgC,EAAA;AAC/D,IAAA,IAAI,CAAC,SAAS;QAAE;AAEhB,IAAA,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC;AAC1C,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,KAAK;AAChB,KAAA,CAAC;AACN;AAEM,SAAU,gBAAgB,CAAC,SAAgC,EAAA;AAC7D,IAAA,IAAI,CAAC,SAAS;QAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;IACxD,MAAM,YAAY,GAAG,CAAC;AAEtB,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,IAAI,YAAY;AACnD,IAAA,MAAM,OAAO,GACT,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,WAAW,GAAG,YAAY;AAExF,IAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE;AAC9B;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/scroll-controls/utils.ts"],"sourcesContent":["const ADDITIONAL_OFFSET = 15;\n\nfunction getTabs(container: HTMLDivElement) {\n    return Array.from(container.querySelectorAll<HTMLButtonElement>('button[role=\"tab\"]'));\n}\n\nfunction findLastVisibleTab(container: HTMLDivElement) {\n    const tabs = getTabs(container);\n\n    return tabs.reduce((res, tab) => {\n        if (tab.offsetLeft + ADDITIONAL_OFFSET < container.clientWidth + container.scrollLeft) {\n            return tab;\n        }\n\n        return res;\n    }, tabs[0]);\n}\n\nfunction findFirstVisibleTab(container: HTMLDivElement) {\n    const tabs = getTabs(container);\n\n    return tabs.reduceRight(\n        (res, tab) => {\n            if (tab.offsetLeft + tab.clientWidth > container.scrollLeft + ADDITIONAL_OFFSET) {\n                return tab;\n            }\n\n            return res;\n        },\n        tabs[tabs.length - 1],\n    );\n}\n\nexport function scrollIntoLastTab(container: HTMLDivElement | null) {\n    if (!container) return;\n\n    findLastVisibleTab(container).scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'start',\n    });\n}\n\nexport function scrollIntoFirstTab(container: HTMLDivElement | null) {\n    if (!container) return;\n\n    findFirstVisibleTab(container).scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n        inline: 'end',\n    });\n}\n\nexport function getDisabledState(container: HTMLDivElement | null) {\n    if (!container) return { toLeft: false, toRight: false };\n    const scrollOffset = 2;\n\n    const toLeft = container.scrollLeft <= scrollOffset;\n    const toRight =\n        container.scrollLeft + container.clientWidth >= container.scrollWidth - scrollOffset;\n\n    return { toLeft, toRight };\n}\n"],"names":[],"mappings":"AAAA,MAAM,iBAAiB,GAAG,EAAE;AAE5B,SAAS,OAAO,CAAC,SAAyB,EAAA;IACtC,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAoB,oBAAoB,CAAC,CAAC;AAC1F;AAEA,SAAS,kBAAkB,CAAC,SAAyB,EAAA;AACjD,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC;IAE/B,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,KAAI;AAC5B,QAAA,IAAI,GAAG,CAAC,UAAU,GAAG,iBAAiB,GAAG,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE;AACnF,YAAA,OAAO,GAAG;AACb;AAED,QAAA,OAAO,GAAG;AACd,KAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;AACf;AAEA,SAAS,mBAAmB,CAAC,SAAyB,EAAA;AAClD,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC;IAE/B,OAAO,IAAI,CAAC,WAAW,CACnB,CAAC,GAAG,EAAE,GAAG,KAAI;AACT,QAAA,IAAI,GAAG,CAAC,UAAU,GAAG,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,GAAG,iBAAiB,EAAE;AAC7E,YAAA,OAAO,GAAG;AACb;AAED,QAAA,OAAO,GAAG;KACb,EACD,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CACxB;AACL;AAEM,SAAU,iBAAiB,CAAC,SAAgC,EAAA;AAC9D,IAAA,IAAI,CAAC,SAAS;QAAE;AAEhB,IAAA,kBAAkB,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC;AACzC,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,OAAO;AAClB,KAAA,CAAC;AACN;AAEM,SAAU,kBAAkB,CAAC,SAAgC,EAAA;AAC/D,IAAA,IAAI,CAAC,SAAS;QAAE;AAEhB,IAAA,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC;AAC1C,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,MAAM,EAAE,KAAK;AAChB,KAAA,CAAC;AACN;AAEM,SAAU,gBAAgB,CAAC,SAAgC,EAAA;AAC7D,IAAA,IAAI,CAAC,SAAS;QAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;IACxD,MAAM,YAAY,GAAG,CAAC;AAEtB,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,IAAI,YAAY;AACnD,IAAA,MAAM,OAAO,GACT,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,WAAW,GAAG,YAAY;AAExF,IAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE;AAC9B;;;;"}

package/moderncssm/components/scrollable-container/Component.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { PlatformProps, TabsProps } from '../../typings';
+import React, { type ReactNode } from 'react';
+import { type PlatformProps, type TabsProps } from '../../typings';
 export declare type ScrollableContainerProps = {
     /**
      * Дополнительный класс враппера контейнера