@alfalab/core-components 35.2.0 → 36.1.0

package/tabs/esm/components/secondary-tablist/mobile.css

@@ -49,26 +49,26 @@
 
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
-}.tabs__component_1mau6 {
+}.tabs__component_1y9yr {
     position: relative;
     display: inline-flex;
-}.tabs__fullWidthScroll_1mau6 {
+}.tabs__fullWidthScroll_1y9yr {
     margin: 0 var(--gap-m);
-}.tabs__container_1mau6 {
+}.tabs__container_1y9yr {
     overflow: hidden;
-}.tabs__title_1mau6 {
+}.tabs__title_1y9yr {
     white-space: nowrap;
-}/* sizes */.tabs__xxs_1mau6 .tabs__title_1mau6 + .tabs__title_1mau6 {
+}/* sizes */.tabs__xxs_1y9yr .tabs__title_1y9yr + .tabs__title_1y9yr {
     margin-left: var(--secondary-tablist-xxs-gaps);
-}.tabs__xs_1mau6 .tabs__title_1mau6 + .tabs__title_1mau6 {
+}.tabs__xs_1y9yr .tabs__title_1y9yr + .tabs__title_1y9yr {
     margin-left: var(--secondary-tablist-xs-gaps);
-}.tabs__s_1mau6 .tabs__title_1mau6 + .tabs__title_1mau6 {
+}.tabs__s_1y9yr .tabs__title_1y9yr + .tabs__title_1y9yr {
     margin-left: var(--secondary-tablist-s-gaps);
-}.tabs__m_1mau6 .tabs__title_1mau6 + .tabs__title_1mau6 {
+}.tabs__m_1y9yr .tabs__title_1y9yr + .tabs__title_1y9yr {
     margin-left: var(--secondary-tablist-m-gaps);
-}.tabs__l_1mau6 .tabs__title_1mau6 + .tabs__title_1mau6 {
+}.tabs__l_1y9yr .tabs__title_1y9yr + .tabs__title_1y9yr {
     margin-left: var(--secondary-tablist-l-gaps);
-}.tabs__xl_1mau6 .tabs__title_1mau6 + .tabs__title_1mau6 {
+}.tabs__xl_1y9yr .tabs__title_1y9yr + .tabs__title_1y9yr {
     margin-left: var(--secondary-tablist-xl-gaps);
 }
 :root {
@@ -879,8 +879,8 @@
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
 }
-.tabs__title_3fptq {
+.tabs__title_r1ggh {
 }
-.tabs__mobile_3fptq .tabs__title_3fptq + .tabs__title_3fptq {
+.tabs__mobile_r1ggh .tabs__title_r1ggh + .tabs__title_r1ggh {
         margin-left: var(--secondary-tablist-mobile-gaps);
     }

package/tabs/esm/components/tab/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"tabs__component_h3w38","hidden":"tabs__hidden_h3w38"};
+var styles = {"component":"tabs__component_pdmvf","hidden":"tabs__hidden_pdmvf"};
 require('./index.css');
 
 var Tab = function (_a) {

package/tabs/esm/components/tab/index.css

@@ -1,8 +1,8 @@
 /* hash: rxvh2 */
-.tabs__component_h3w38 {
+.tabs__component_pdmvf {
     outline: none;
 }
 
-.tabs__hidden_h3w38 {
+.tabs__hidden_pdmvf {
     display: none;
 }

package/tabs/esm/components/tabs/Component.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TabsProps } from "../../typings";
-declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatch, children, selectedId, scrollable, fullWidthScroll, keepMounted, dataTestId, onChange, }: Omit<TabsProps, 'view'>) => JSX.Element;
+declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatch, children, selectedId, scrollable, collapsible, fullWidthScroll, keepMounted, dataTestId, onChange, }: Omit<TabsProps, 'view'>) => JSX.Element;
 export { Tabs };

package/tabs/esm/components/tabs/Component.desktop.js

@@ -1,16 +1,24 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-5c5cdb7c.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-e74e5c93.js';
 import React from 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '../../../../badge/esm';
 import '../../../../keyboard-focusable/esm';
-import '../../useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../synthetic-events.js';
 import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
+import '../title/Component.js';
 import '../primary-tablist/Component.js';
-import '../../index.module-c6a01bfc.js';
+import '../../index.module-01d292c0.js';
 import { PrimaryTabListDesktop } from '../primary-tablist/Component.desktop.js';
 import '../../../../tag/esm';
 import '../secondary-tablist/Component.js';
-import '../../index.module-e9bccf7a.js';
+import '../../index.module-16a12061.js';
 import { SecondaryTabListDesktop } from '../secondary-tablist/Component.desktop.js';
 import { Tabs } from './Component.js';
 

package/tabs/esm/components/tabs/Component.js

@@ -1,7 +1,7 @@
 import React, { cloneElement } from 'react';
 
 var Tabs = function (_a) {
-    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatch = _a.defaultMatch, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange;
+    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatch = _a.defaultMatch, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsible = _a.collapsible, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange;
     var tabsArray = React.Children.toArray(children);
     var titles = tabsArray.map(function (_a) {
         var _b = _a.props, title = _b.title, id = _b.id, rightAddons = _b.rightAddons, disabled = _b.disabled, hidden = _b.hidden, toggleClassName = _b.toggleClassName;
@@ -16,7 +16,7 @@ var Tabs = function (_a) {
     });
     var tabs = tabsArray.filter(function (tab) { return tab.props.id === selectedId || tab.props.keepMounted || keepMounted; });
     return (React.createElement("div", { className: className },
-        React.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, onChange: onChange, dataTestId: dataTestId, defaultMatch: defaultMatch, fullWidthScroll: fullWidthScroll }),
+        React.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsible: collapsible, onChange: onChange, dataTestId: dataTestId, defaultMatch: defaultMatch, fullWidthScroll: fullWidthScroll }),
         tabs.map(function (tab) { return cloneElement(tab, { hidden: tab.props.id !== selectedId }); })));
 };
 

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

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

package/tabs/esm/components/tabs/Component.mobile.js

@@ -1,15 +1,23 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-5c5cdb7c.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-e74e5c93.js';
 import React from 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '../../../../badge/esm';
 import '../../../../keyboard-focusable/esm';
-import '../../useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../synthetic-events.js';
 import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
+import '../title/Component.js';
 import '../primary-tablist/Component.js';
-import '../../index.module-c6a01bfc.js';
+import '../../index.module-01d292c0.js';
 import '../../../../tag/esm';
 import '../secondary-tablist/Component.js';
-import '../../index.module-e9bccf7a.js';
+import '../../index.module-16a12061.js';
 import { Tabs } from './Component.js';
 import { PrimaryTabListMobile } from '../primary-tablist/Component.mobile.js';
 import { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile.js';

package/tabs/esm/components/tabs/Component.responsive.js

@@ -1,19 +1,26 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-5c5cdb7c.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-e74e5c93.js';
 import React from 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '../../../../badge/esm';
 import '../../../../keyboard-focusable/esm';
-import '../../useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../synthetic-events.js';
 import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
+import '../title/Component.js';
 import '../primary-tablist/Component.js';
-import '../../index.module-c6a01bfc.js';
+import '../../index.module-01d292c0.js';
 import '../primary-tablist/Component.desktop.js';
 import '../../../../tag/esm';
 import '../secondary-tablist/Component.js';
-import '../../index.module-e9bccf7a.js';
+import '../../index.module-16a12061.js';
 import '../secondary-tablist/Component.desktop.js';
 import { Tabs } from './Component.js';
-import '@alfalab/hooks';
 import '../primary-tablist/Component.mobile.js';
 import { PrimaryTabListResponsive } from '../primary-tablist/Component.responsive.js';
 import '../secondary-tablist/Component.mobile.js';

package/tabs/esm/components/title/Component.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+import { Styles, TabListTitle } from "../../typings";
+declare const Title: React.ForwardRefExoticComponent<TabListTitle & Styles & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id"> & {
+    focused?: boolean | undefined;
+    isOption?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Title };

package/tabs/esm/components/title/Component.js

@@ -0,0 +1,18 @@
+import { _ as __rest, a as __assign } from '../../tslib.es6-e74e5c93.js';
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+var Title = forwardRef(function (_a, ref) {
+    var _b, _c;
+    var id = _a.id, toggleClassName = _a.toggleClassName, title = _a.title, _d = _a.styles, styles = _d === void 0 ? {} : _d, _e = _a.rightAddons, rightAddons = _e === void 0 ? null : _e, _f = _a.hidden, hidden = _f === void 0 ? false : _f, _g = _a.selected, selected = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.collapsed, collapsed = _j === void 0 ? false : _j, _k = _a.focused, focused = _k === void 0 ? false : _k, _l = _a.isOption, isOption = _l === void 0 ? false : _l, restProps = __rest(_a, ["id", "toggleClassName", "title", "styles", "rightAddons", "hidden", "selected", "disabled", "collapsed", "focused", "isOption"]);
+    return hidden ? null : (React.createElement("button", __assign({}, restProps, { ref: ref, type: 'button', id: String(id), className: cn(styles.title, (_b = {},
+            _b[styles.selected] = selected,
+            _b[styles.disabled] = disabled,
+            _b[styles.collapsed] = collapsed && !isOption,
+            _b[styles.option] = isOption,
+            _b), toggleClassName) }),
+        React.createElement("span", { className: cn(styles.content, (_c = {}, _c[styles.focused] = focused, _c)) }, title),
+        rightAddons && React.createElement("span", { className: styles.rightAddons }, rightAddons)));
+});
+
+export { Title };

package/tabs/esm/components/title/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/tabs/esm/components/title/index.js

@@ -0,0 +1,4 @@
+import '../../tslib.es6-e74e5c93.js';
+import 'react';
+import 'classnames';
+export { Title } from './Component.js';

package/tabs/esm/desktop.d.ts

@@ -3,5 +3,6 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.desktop";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.desktop";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
+export * from "./hooks/use-collapsible-elements";
 export * from "./typings";

package/tabs/esm/desktop.js

@@ -1,16 +1,24 @@
-import './tslib.es6-5c5cdb7c.js';
+import './tslib.es6-e74e5c93.js';
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '../../badge/esm';
 import '../../keyboard-focusable/esm';
-export { useTabs } from './useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
+export { useTabs } from './hooks/use-tabs.js';
+import './hooks/use-tablist-titles.js';
+import './synthetic-events.js';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
+import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-c6a01bfc.js';
+import './index.module-01d292c0.js';
 export { PrimaryTabListDesktop } from './components/primary-tablist/Component.desktop.js';
 import '../../tag/esm';
 import './components/secondary-tablist/Component.js';
-import './index.module-e9bccf7a.js';
+import './index.module-16a12061.js';
 export { SecondaryTabListDesktop } from './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';

package/tabs/esm/hooks/use-collapsible-elements.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DependencyList } from 'react';
+declare const useCollapsibleElements: <ContainerType extends HTMLElement, AddonType extends HTMLElement>(selectors: string, deps?: DependencyList) => {
+    containerRef: import("react").RefObject<ContainerType>;
+    addonRef: import("react").RefObject<AddonType>;
+    idsCollapsedElements: string[];
+};
+export { useCollapsibleElements };

package/tabs/esm/hooks/use-collapsible-elements.js

@@ -0,0 +1,52 @@
+import { b as __spreadArray } from '../tslib.es6-e74e5c93.js';
+import { useState, useRef } from 'react';
+import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
+import { ResizeObserver } from '@juggle/resize-observer';
+
+var useCollapsibleElements = function (selectors, deps) {
+    if (deps === void 0) { deps = []; }
+    var _a = useState([]), idsCollapsedElements = _a[0], setIdsCollapsedElements = _a[1];
+    var containerRef = useRef(null);
+    var addonRef = useRef(null);
+    useLayoutEffect_SAFE_FOR_SSR(function () {
+        var collapseElements = function (inlineSize) {
+            var container = containerRef.current;
+            if (!container)
+                return;
+            var addon = addonRef.current;
+            var containerWidth = inlineSize || container.clientWidth;
+            var elements = Array.from(container.querySelectorAll(selectors));
+            var idsCollapsedElements = elements.reduce(function (acc, element) {
+                var offsetLeft = element.offsetLeft, offsetWidth = element.offsetWidth, id = element.id;
+                var elementOffset = offsetLeft + offsetWidth;
+                var isCollapsedElement = getComputedStyle(element).visibility === 'collapse';
+                var maxWidth = addon && !isCollapsedElement
+                    ? containerWidth -
+                        (addon.offsetWidth + parseFloat(getComputedStyle(addon).marginLeft))
+                    : containerWidth;
+                if (elementOffset >= maxWidth)
+                    acc.push(id);
+                return acc;
+            }, []);
+            setIdsCollapsedElements(idsCollapsedElements);
+        };
+        var handleElementsResize = function (entries) {
+            var inlineSize = entries[0].contentBoxSize[0].inlineSize;
+            collapseElements(inlineSize);
+        };
+        var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        var observer = new ResizeObserver$1(handleElementsResize);
+        if (containerRef.current) {
+            collapseElements();
+            observer.observe(containerRef.current);
+        }
+        return function () { return observer.disconnect(); };
+    }, __spreadArray([selectors], deps, true));
+    return {
+        containerRef: containerRef,
+        addonRef: addonRef,
+        idsCollapsedElements: idsCollapsedElements,
+    };
+};
+
+export { useCollapsibleElements };

package/tabs/esm/hooks/use-tablist-titles.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { TabListProps } from "../typings";
+declare const useTablistTitles: ({ titles, selectedId, collapsible, breakpoint, onChange, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsible' | 'onChange'> & Required<Pick<TabListProps, 'breakpoint'>>) => {
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    addonRef: import("react").RefObject<HTMLInputElement>;
+    tablistTitles: {
+        collapsed: boolean;
+        selected: boolean;
+        title: string;
+        id: import("../typings").SelectedId;
+        disabled?: boolean | undefined;
+        rightAddons?: import("react").ReactNode;
+        hidden?: boolean | undefined;
+        toggleClassName?: string | undefined;
+    }[];
+    selectedTab: HTMLButtonElement | null;
+    focusedTab: HTMLButtonElement | null;
+    getTabListItemProps: (index: number, outerRef?: import("react").MutableRefObject<HTMLElement> | undefined) => {
+        role: string;
+        tabIndex: number;
+        'aria-selected': boolean;
+        disabled: boolean | undefined;
+        ref: (node: HTMLButtonElement) => void;
+        onKeyDown: (event: import("react").KeyboardEvent<HTMLButtonElement>) => void;
+        onClick: (event?: import("react").MouseEvent<Element, MouseEvent> | undefined) => void;
+    };
+};
+export { useTablistTitles };

package/tabs/esm/hooks/use-tablist-titles.js

@@ -0,0 +1,41 @@
+import { a as __assign } from '../tslib.es6-e74e5c93.js';
+import { useMemo } from 'react';
+import { useMedia } from '@alfalab/hooks';
+import '@juggle/resize-observer';
+import { useCollapsibleElements } from './use-collapsible-elements.js';
+import { useTabs } from './use-tabs.js';
+
+var useTablistTitles = function (_a) {
+    var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, collapsible = _a.collapsible, breakpoint = _a.breakpoint, onChange = _a.onChange;
+    var _c = useCollapsibleElements('[role=tab]', [titles]), containerRef = _c.containerRef, addonRef = _c.addonRef, idsCollapsedElements = _c.idsCollapsedElements;
+    var view = useMedia([['desktop', "(min-width: " + breakpoint + "px)"]], 'desktop')[0];
+    var tablistTitles = useMemo(function () {
+        var idsCollapsedTitles = [];
+        if (view === 'desktop' && collapsible) {
+            var visibleTitles = titles.filter(function (_a) {
+                var id = _a.id;
+                return !idsCollapsedElements.includes(String(id));
+            });
+            var lastVisibleTitle_1 = visibleTitles[visibleTitles.length - 1];
+            idsCollapsedElements.forEach(function (id) {
+                idsCollapsedTitles.push(selectedId === id && lastVisibleTitle_1 ? String(lastVisibleTitle_1.id) : id);
+            });
+        }
+        return titles.map(function (title) { return (__assign(__assign({}, title), { collapsed: idsCollapsedTitles.includes(String(title.id)), selected: title.id === selectedId })); });
+    }, [titles, collapsible, selectedId, idsCollapsedElements, view]);
+    var _d = useTabs({
+        titles: tablistTitles,
+        selectedId: selectedId,
+        onChange: onChange,
+    }), selectedTab = _d.selectedTab, focusedTab = _d.focusedTab, getTabListItemProps = _d.getTabListItemProps;
+    return {
+        containerRef: containerRef,
+        addonRef: addonRef,
+        tablistTitles: tablistTitles,
+        selectedTab: selectedTab,
+        focusedTab: focusedTab,
+        getTabListItemProps: getTabListItemProps,
+    };
+};
+
+export { useTablistTitles };

package/tabs/{modern/useTabs.d.ts → esm/hooks/use-tabs.d.ts}

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

package/tabs/esm/index.d.ts

@@ -3,5 +3,5 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.responsive";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.responsive";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
 export * from "./typings";

package/tabs/esm/index.js

@@ -1,20 +1,27 @@
-import './tslib.es6-5c5cdb7c.js';
+import './tslib.es6-e74e5c93.js';
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '../../badge/esm';
 import '../../keyboard-focusable/esm';
-export { useTabs } from './useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import './hooks/use-collapsible-elements.js';
+export { useTabs } from './hooks/use-tabs.js';
+import './hooks/use-tablist-titles.js';
+import './synthetic-events.js';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
+import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-c6a01bfc.js';
+import './index.module-01d292c0.js';
 import './components/primary-tablist/Component.desktop.js';
 import '../../tag/esm';
 import './components/secondary-tablist/Component.js';
-import './index.module-e9bccf7a.js';
+import './index.module-16a12061.js';
 import './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';
-import '@alfalab/hooks';
 import './components/primary-tablist/Component.mobile.js';
 export { PrimaryTabListResponsive } from './components/primary-tablist/Component.responsive.js';
 import './components/secondary-tablist/Component.mobile.js';

package/tabs/esm/index.module-01d292c0.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_1qgkh","fullWidthScroll":"tabs__fullWidthScroll_1qgkh","container":"tabs__container_1qgkh","title":"tabs__title_1qgkh","disabled":"tabs__disabled_1qgkh","focused":"tabs__focused_1qgkh","collapsed":"tabs__collapsed_1qgkh","selected":"tabs__selected_1qgkh","line":"tabs__line_1qgkh","s":"tabs__s_1qgkh","xs":"tabs__xs_1qgkh","xxs":"tabs__xxs_1qgkh","pickerWrapper":"tabs__pickerWrapper_1qgkh","option":"tabs__option_1qgkh","m":"tabs__m_1qgkh","l":"tabs__l_1qgkh","xl":"tabs__xl_1qgkh","rightAddons":"tabs__rightAddons_1qgkh"};
+require('./components/primary-tablist/index.css');
+
+export { commonStyles as c };

package/tabs/esm/index.module-16a12061.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_1y9yr","fullWidthScroll":"tabs__fullWidthScroll_1y9yr","container":"tabs__container_1y9yr","title":"tabs__title_1y9yr","xxs":"tabs__xxs_1y9yr","xs":"tabs__xs_1y9yr","s":"tabs__s_1y9yr","m":"tabs__m_1y9yr","l":"tabs__l_1y9yr","xl":"tabs__xl_1y9yr"};
+require('./components/secondary-tablist/index.css');
+
+export { commonStyles as c };

package/tabs/esm/mobile.d.ts

@@ -3,5 +3,5 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.mobile";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.mobile";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
 export * from "./typings";

package/tabs/esm/mobile.js

@@ -1,15 +1,23 @@
-import './tslib.es6-5c5cdb7c.js';
+import './tslib.es6-e74e5c93.js';
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '../../badge/esm';
 import '../../keyboard-focusable/esm';
-export { useTabs } from './useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import './hooks/use-collapsible-elements.js';
+export { useTabs } from './hooks/use-tabs.js';
+import './hooks/use-tablist-titles.js';
+import './synthetic-events.js';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
+import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-c6a01bfc.js';
+import './index.module-01d292c0.js';
 import '../../tag/esm';
 import './components/secondary-tablist/Component.js';
-import './index.module-e9bccf7a.js';
+import './index.module-16a12061.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';
 export { PrimaryTabListMobile } from './components/primary-tablist/Component.mobile.js';

package/tabs/esm/responsive.d.ts

@@ -3,5 +3,6 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.responsive";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.responsive";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
+export * from "./hooks/use-collapsible-elements";
 export * from "./typings";

package/tabs/esm/responsive.js

@@ -1,20 +1,27 @@
-import './tslib.es6-5c5cdb7c.js';
+import './tslib.es6-e74e5c93.js';
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '../../badge/esm';
 import '../../keyboard-focusable/esm';
-export { useTabs } from './useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
+export { useTabs } from './hooks/use-tabs.js';
+import './hooks/use-tablist-titles.js';
+import './synthetic-events.js';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
+import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-c6a01bfc.js';
+import './index.module-01d292c0.js';
 import './components/primary-tablist/Component.desktop.js';
 import '../../tag/esm';
 import './components/secondary-tablist/Component.js';
-import './index.module-e9bccf7a.js';
+import './index.module-16a12061.js';
 import './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';
-import '@alfalab/hooks';
 import './components/primary-tablist/Component.mobile.js';
 export { PrimaryTabListResponsive } from './components/primary-tablist/Component.responsive.js';
 import './components/secondary-tablist/Component.mobile.js';

package/tabs/esm/synthetic-events.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+declare const createSyntheticEvent: <T extends Element, E extends Event>(event: E) => React.SyntheticEvent<T, E>;
+declare const createUIEvent: <T extends Element, E extends Event>(event: E) => React.UIEvent<T, E>;
+declare const createSyntheticMouseEvent: <T extends Element>(event: MouseEvent) => React.MouseEvent<T, MouseEvent>;
+export { createSyntheticEvent, createUIEvent, createSyntheticMouseEvent };

package/tabs/esm/synthetic-events.js

@@ -0,0 +1,41 @@
+import { a as __assign } from './tslib.es6-e74e5c93.js';
+
+var createSyntheticEvent = function (event) {
+    var isDefaultPrevented = false;
+    var isPropagationStopped = false;
+    var preventDefault = function () {
+        isDefaultPrevented = true;
+        event.preventDefault();
+    };
+    var stopPropagation = function () {
+        isPropagationStopped = true;
+        event.stopPropagation();
+    };
+    return {
+        nativeEvent: event,
+        currentTarget: event.currentTarget,
+        target: event.target,
+        bubbles: event.bubbles,
+        cancelable: event.cancelable,
+        defaultPrevented: event.defaultPrevented,
+        eventPhase: event.eventPhase,
+        isTrusted: event.isTrusted,
+        preventDefault: preventDefault,
+        isDefaultPrevented: function () { return isDefaultPrevented; },
+        stopPropagation: stopPropagation,
+        isPropagationStopped: function () { return isPropagationStopped; },
+        persist: function () { },
+        timeStamp: event.timeStamp,
+        type: event.type,
+    };
+};
+var createUIEvent = function (event) { return (__assign(__assign({}, createSyntheticEvent(event)), { detail: 0, view: {
+        styleMedia: {
+            type: '',
+            matchMedium: function () { return false; },
+        },
+        document: document,
+    } })); };
+var createSyntheticMouseEvent = function (event) { return (__assign(__assign({}, createUIEvent(event)), { altKey: event.altKey, button: event.button, buttons: event.buttons, clientX: event.clientX, clientY: event.clientY, ctrlKey: event.ctrlKey, getModifierState: event.getModifierState, metaKey: event.metaKey, movementX: event.movementX, movementY: event.movementY, pageX: event.pageX, pageY: event.pageY, relatedTarget: event.relatedTarget, screenX: event.screenX, screenY: event.screenY, shiftKey: event.shiftKey })); };
+
+export { createSyntheticEvent, createSyntheticMouseEvent, createUIEvent };