@alfalab/core-components 48.6.0-beta.1 → 48.7.0

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

@@ -7,5 +7,6 @@ declare const Title: React.ForwardRefExoticComponent<TabListTitle & Styles & Omi
     isOption?: boolean | undefined;
     showSkeleton?: boolean | undefined;
     skeletonProps?: Omit<SkeletonProps, "visible"> | undefined;
+    onResize?: (() => void) | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { Title };

package/tabs/components/title/Component.js

@@ -2,22 +2,41 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var coreComponentsSkeleton = require('../../../skeleton');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 var Title = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var id = _a.id, toggleClassName = _a.toggleClassName, title = _a.title, _e = _a.styles, styles = _e === void 0 ? {} : _e, _f = _a.rightAddons, rightAddons = _f === void 0 ? null : _f, _g = _a.hidden, hidden = _g === void 0 ? false : _g, _h = _a.selected, selected = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, _k = _a.collapsed, collapsed = _k === void 0 ? false : _k, _l = _a.focused, focused = _l === void 0 ? false : _l, _m = _a.isOption, isOption = _m === void 0 ? false : _m, _o = _a.showSkeleton, showSkeleton = _o === void 0 ? false : _o, skeletonProps = _a.skeletonProps, restProps = tslib.__rest(_a, ["id", "toggleClassName", "title", "styles", "rightAddons", "hidden", "selected", "disabled", "collapsed", "focused", "isOption", "showSkeleton", "skeletonProps"]);
+    var id = _a.id, toggleClassName = _a.toggleClassName, title = _a.title, _e = _a.styles, styles = _e === void 0 ? {} : _e, _f = _a.rightAddons, rightAddons = _f === void 0 ? null : _f, _g = _a.hidden, hidden = _g === void 0 ? false : _g, _h = _a.selected, selected = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, _k = _a.collapsed, collapsed = _k === void 0 ? false : _k, _l = _a.focused, focused = _l === void 0 ? false : _l, _m = _a.isOption, isOption = _m === void 0 ? false : _m, _o = _a.showSkeleton, showSkeleton = _o === void 0 ? false : _o, skeletonProps = _a.skeletonProps, onResize = _a.onResize, restProps = tslib.__rest(_a, ["id", "toggleClassName", "title", "styles", "rightAddons", "hidden", "selected", "disabled", "collapsed", "focused", "isOption", "showSkeleton", "skeletonProps", "onResize"]);
+    var buttonRef = React.useRef(null);
     var titleClassName = (_b = {},
         _b[styles.content] = true,
         _b[styles.focused] = focused,
         _b);
-    return hidden ? null : (React__default.default.createElement("button", tslib.__assign({}, restProps, { ref: ref, disabled: disabled || showSkeleton, type: 'button', id: String(id), className: cn__default.default(styles.title, (_c = {},
+    React.useEffect(function () {
+        var resizeObserver = new ResizeObserver(function () {
+            if (onResize) {
+                onResize();
+            }
+        });
+        var button = buttonRef.current;
+        if (button) {
+            resizeObserver.observe(button);
+        }
+        return function () {
+            if (button) {
+                resizeObserver.unobserve(button);
+            }
+        };
+    }, [onResize]);
+    return hidden ? null : (React__default.default.createElement("button", tslib.__assign({}, restProps, { ref: mergeRefs__default.default([ref, buttonRef]), disabled: disabled || showSkeleton, type: 'button', id: String(id), className: cn__default.default(styles.title, (_c = {},
             _c[styles.selected] = selected,
             _c[styles.disabled] = disabled,
             _c[styles.collapsed] = collapsed && !isOption,

package/tabs/cssm/components/primary-tablist/Component.js

@@ -38,6 +38,12 @@ var PrimaryTabList = function (_a) {
         }
         return coreComponentsShared.fnUtils.noop;
     }, [selectedTab]);
+    var handleTitleResize = React.useCallback(function () {
+        if (selectedTab && lineRef.current) {
+            lineRef.current.style.width = "".concat(selectedTab.offsetWidth, "px");
+            lineRef.current.style.transform = "translateX(".concat(selectedTab.offsetLeft, "px)");
+        }
+    }, [selectedTab]);
     var renderContent = function () {
         var _a;
         return (React__default.default.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn__default.default(styles.component, className, !textStyle && size && styles[size], (_a = {},
@@ -45,7 +51,7 @@ var PrimaryTabList = function (_a) {
                 _a)) },
             titles.map(function (_a, index) {
                 _a.dataTestId; _a.toggleRef; var restTitleProps = tslib.__rest(_a, ["dataTestId", "toggleRef"]);
-                return (React__default.default.createElement(coreComponentsKeyboardFocusable.KeyboardFocusable, { key: restTitleProps.id }, function (ref, focused) { return (React__default.default.createElement(components_title_Component.Title, tslib.__assign({}, getTabListItemProps(index, ref), restTitleProps, { focused: focused, styles: styles, showSkeleton: showSkeleton, skeletonProps: skeletonProps }))); }));
+                return (React__default.default.createElement(coreComponentsKeyboardFocusable.KeyboardFocusable, { key: restTitleProps.id }, function (ref, focused) { return (React__default.default.createElement(components_title_Component.Title, tslib.__assign({}, getTabListItemProps(index, ref), restTitleProps, { focused: focused, styles: styles, showSkeleton: showSkeleton, skeletonProps: skeletonProps, onResize: handleTitleResize }))); }));
             }),
             React__default.default.createElement("div", { className: styles.line, ref: lineRef })));
     };

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

@@ -7,5 +7,6 @@ declare const Title: React.ForwardRefExoticComponent<TabListTitle & Styles & Omi
     isOption?: boolean | undefined;
     showSkeleton?: boolean | undefined;
     skeletonProps?: Omit<SkeletonProps, "visible"> | undefined;
+    onResize?: (() => void) | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { Title };

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

@@ -2,22 +2,41 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var coreComponentsSkeleton = require('../../../../skeleton/cssm');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 var Title = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var id = _a.id, toggleClassName = _a.toggleClassName, title = _a.title, _e = _a.styles, styles = _e === void 0 ? {} : _e, _f = _a.rightAddons, rightAddons = _f === void 0 ? null : _f, _g = _a.hidden, hidden = _g === void 0 ? false : _g, _h = _a.selected, selected = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, _k = _a.collapsed, collapsed = _k === void 0 ? false : _k, _l = _a.focused, focused = _l === void 0 ? false : _l, _m = _a.isOption, isOption = _m === void 0 ? false : _m, _o = _a.showSkeleton, showSkeleton = _o === void 0 ? false : _o, skeletonProps = _a.skeletonProps, restProps = tslib.__rest(_a, ["id", "toggleClassName", "title", "styles", "rightAddons", "hidden", "selected", "disabled", "collapsed", "focused", "isOption", "showSkeleton", "skeletonProps"]);
+    var id = _a.id, toggleClassName = _a.toggleClassName, title = _a.title, _e = _a.styles, styles = _e === void 0 ? {} : _e, _f = _a.rightAddons, rightAddons = _f === void 0 ? null : _f, _g = _a.hidden, hidden = _g === void 0 ? false : _g, _h = _a.selected, selected = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, _k = _a.collapsed, collapsed = _k === void 0 ? false : _k, _l = _a.focused, focused = _l === void 0 ? false : _l, _m = _a.isOption, isOption = _m === void 0 ? false : _m, _o = _a.showSkeleton, showSkeleton = _o === void 0 ? false : _o, skeletonProps = _a.skeletonProps, onResize = _a.onResize, restProps = tslib.__rest(_a, ["id", "toggleClassName", "title", "styles", "rightAddons", "hidden", "selected", "disabled", "collapsed", "focused", "isOption", "showSkeleton", "skeletonProps", "onResize"]);
+    var buttonRef = React.useRef(null);
     var titleClassName = (_b = {},
         _b[styles.content] = true,
         _b[styles.focused] = focused,
         _b);
-    return hidden ? null : (React__default.default.createElement("button", tslib.__assign({}, restProps, { ref: ref, disabled: disabled || showSkeleton, type: 'button', id: String(id), className: cn__default.default(styles.title, (_c = {},
+    React.useEffect(function () {
+        var resizeObserver = new ResizeObserver(function () {
+            if (onResize) {
+                onResize();
+            }
+        });
+        var button = buttonRef.current;
+        if (button) {
+            resizeObserver.observe(button);
+        }
+        return function () {
+            if (button) {
+                resizeObserver.unobserve(button);
+            }
+        };
+    }, [onResize]);
+    return hidden ? null : (React__default.default.createElement("button", tslib.__assign({}, restProps, { ref: mergeRefs__default.default([ref, buttonRef]), disabled: disabled || showSkeleton, type: 'button', id: String(id), className: cn__default.default(styles.title, (_c = {},
             _c[styles.selected] = selected,
             _c[styles.disabled] = disabled,
             _c[styles.collapsed] = collapsed && !isOption,

package/tabs/esm/collapsible/index.js

@@ -18,5 +18,5 @@ import '../../../shared/esm';
 import '../synthetic-events.js';
 import '../components/title/Component.js';
 import '../../../skeleton/esm';
-import '../index.module-bf409628.js';
+import '../index.module-56154675.js';
 import '../components/tabs/Component.js';

package/tabs/esm/components/primary-tablist/Component.collapsible.js

@@ -7,7 +7,7 @@ import { PickerButtonDesktop } from '../../../../picker-button/esm/desktop';
 import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
 import { createSyntheticMouseEvent } from '../../synthetic-events.js';
 import { Title } from '../title/Component.js';
-import { s as styles } from '../../index.module-bf409628.js';
+import { s as styles } from '../../index.module-56154675.js';
 import '../../../../mq/esm';
 import '../../hooks/use-collapsible-elements.js';
 import '@juggle/resize-observer';

package/tabs/esm/components/primary-tablist/Component.desktop.js

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { s as styles } from '../../index.module-bf409628.js';
+import { s as styles } from '../../index.module-56154675.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/esm';

package/tabs/esm/components/primary-tablist/Component.js

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useCallback } from 'react';
 import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import { KeyboardFocusable } from '../../../../keyboard-focusable/esm';
@@ -40,6 +40,12 @@ var PrimaryTabList = function (_a) {
         }
         return fnUtils.noop;
     }, [selectedTab]);
+    var handleTitleResize = useCallback(function () {
+        if (selectedTab && lineRef.current) {
+            lineRef.current.style.width = "".concat(selectedTab.offsetWidth, "px");
+            lineRef.current.style.transform = "translateX(".concat(selectedTab.offsetLeft, "px)");
+        }
+    }, [selectedTab]);
     var renderContent = function () {
         var _a;
         return (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, !textStyle && size && styles[size], (_a = {},
@@ -47,7 +53,7 @@ var PrimaryTabList = function (_a) {
                 _a)) },
             titles.map(function (_a, index) {
                 _a.dataTestId; _a.toggleRef; var restTitleProps = __rest(_a, ["dataTestId", "toggleRef"]);
-                return (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, function (ref, focused) { return (React.createElement(Title, __assign({}, getTabListItemProps(index, ref), restTitleProps, { focused: focused, styles: styles, showSkeleton: showSkeleton, skeletonProps: skeletonProps }))); }));
+                return (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, function (ref, focused) { return (React.createElement(Title, __assign({}, getTabListItemProps(index, ref), restTitleProps, { focused: focused, styles: styles, showSkeleton: showSkeleton, skeletonProps: skeletonProps, onResize: handleTitleResize }))); }));
             }),
             React.createElement("div", { className: styles.line, ref: lineRef })));
     };

package/tabs/esm/components/primary-tablist/Component.mobile.js

@@ -1,7 +1,7 @@
 import { __assign } from 'tslib';
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { s as styles$1 } from '../../index.module-bf409628.js';
+import { s as styles$1 } from '../../index.module-56154675.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/esm';

package/tabs/esm/components/primary-tablist/Component.responsive.js

@@ -20,7 +20,7 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../../../skeleton/esm';
-import '../../index.module-bf409628.js';
+import '../../index.module-56154675.js';
 
 var PrimaryTabListResponsive = function (_a) {
     var size = _a.size, breakpoint = _a.breakpoint, client = _a.client, fullWidthScroll = _a.fullWidthScroll, _b = _a.defaultMatchMediaValue, defaultMatchMediaValue = _b === void 0 ? client === undefined ? undefined : client === 'desktop' : _b, restProps = __rest(_a, ["size", "breakpoint", "client", "fullWidthScroll", "defaultMatchMediaValue"]);

package/tabs/esm/components/secondary-tablist/Component.desktop.js

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { TagDesktop } from '../../../../tag/esm/desktop';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-68d92895.js';
+import { c as commonStyles } from '../../index.module-b46d929a.js';
 import 'classnames';
 import '../../../../skeleton/esm';
 import '../../hooks/use-tabs.js';

package/tabs/esm/components/secondary-tablist/Component.mobile.js

@@ -3,7 +3,7 @@ import React from 'react';
 import cn from 'classnames';
 import { TagMobile } from '../../../../tag/esm/mobile';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-68d92895.js';
+import { c as commonStyles } from '../../index.module-b46d929a.js';
 import '../../../../skeleton/esm';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';

package/tabs/esm/components/secondary-tablist/Component.responsive.js

@@ -18,7 +18,7 @@ import '../../../../icon-button/esm';
 import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
-import '../../index.module-68d92895.js';
+import '../../index.module-b46d929a.js';
 import '../../../../tag/esm/mobile';
 
 var SecondaryTabListResponsive = function (_a) {

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

@@ -17,7 +17,7 @@ import '../../../../shared/esm';
 import '../../synthetic-events.js';
 import '../title/Component.js';
 import '../../../../skeleton/esm';
-import '../../index.module-bf409628.js';
+import '../../index.module-56154675.js';
 
 var TabsCollapsible = function (_a) {
     var restProps = __rest(_a, []);

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

@@ -20,10 +20,10 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../../../skeleton/esm';
-import '../../index.module-bf409628.js';
+import '../../index.module-56154675.js';
 import '../../../../tag/esm/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-68d92895.js';
+import '../../index.module-b46d929a.js';
 
 var views = {
     primary: PrimaryTabListDesktop,

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

@@ -20,10 +20,10 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../../../skeleton/esm';
-import '../../index.module-bf409628.js';
+import '../../index.module-56154675.js';
 import '../../../../tag/esm/mobile';
 import '../secondary-tablist/Component.js';
-import '../../index.module-68d92895.js';
+import '../../index.module-b46d929a.js';
 
 var views = {
     primary: PrimaryTabListMobile,

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

@@ -22,12 +22,12 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../../../skeleton/esm';
-import '../../index.module-bf409628.js';
+import '../../index.module-56154675.js';
 import '../primary-tablist/Component.mobile.js';
 import '../secondary-tablist/Component.desktop.js';
 import '../../../../tag/esm/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-68d92895.js';
+import '../../index.module-b46d929a.js';
 import '../secondary-tablist/Component.mobile.js';
 import '../../../../tag/esm/mobile';
 

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

@@ -7,5 +7,6 @@ declare const Title: React.ForwardRefExoticComponent<TabListTitle & Styles & Omi
     isOption?: boolean | undefined;
     showSkeleton?: boolean | undefined;
     skeletonProps?: Omit<SkeletonProps, "visible"> | undefined;
+    onResize?: (() => void) | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { Title };

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

@@ -1,16 +1,34 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { Skeleton } from '../../../../skeleton/esm';
 
 var Title = forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var id = _a.id, toggleClassName = _a.toggleClassName, title = _a.title, _e = _a.styles, styles = _e === void 0 ? {} : _e, _f = _a.rightAddons, rightAddons = _f === void 0 ? null : _f, _g = _a.hidden, hidden = _g === void 0 ? false : _g, _h = _a.selected, selected = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, _k = _a.collapsed, collapsed = _k === void 0 ? false : _k, _l = _a.focused, focused = _l === void 0 ? false : _l, _m = _a.isOption, isOption = _m === void 0 ? false : _m, _o = _a.showSkeleton, showSkeleton = _o === void 0 ? false : _o, skeletonProps = _a.skeletonProps, restProps = __rest(_a, ["id", "toggleClassName", "title", "styles", "rightAddons", "hidden", "selected", "disabled", "collapsed", "focused", "isOption", "showSkeleton", "skeletonProps"]);
+    var id = _a.id, toggleClassName = _a.toggleClassName, title = _a.title, _e = _a.styles, styles = _e === void 0 ? {} : _e, _f = _a.rightAddons, rightAddons = _f === void 0 ? null : _f, _g = _a.hidden, hidden = _g === void 0 ? false : _g, _h = _a.selected, selected = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, _k = _a.collapsed, collapsed = _k === void 0 ? false : _k, _l = _a.focused, focused = _l === void 0 ? false : _l, _m = _a.isOption, isOption = _m === void 0 ? false : _m, _o = _a.showSkeleton, showSkeleton = _o === void 0 ? false : _o, skeletonProps = _a.skeletonProps, onResize = _a.onResize, restProps = __rest(_a, ["id", "toggleClassName", "title", "styles", "rightAddons", "hidden", "selected", "disabled", "collapsed", "focused", "isOption", "showSkeleton", "skeletonProps", "onResize"]);
+    var buttonRef = useRef(null);
     var titleClassName = (_b = {},
         _b[styles.content] = true,
         _b[styles.focused] = focused,
         _b);
-    return hidden ? null : (React.createElement("button", __assign({}, restProps, { ref: ref, disabled: disabled || showSkeleton, type: 'button', id: String(id), className: cn(styles.title, (_c = {},
+    useEffect(function () {
+        var resizeObserver = new ResizeObserver(function () {
+            if (onResize) {
+                onResize();
+            }
+        });
+        var button = buttonRef.current;
+        if (button) {
+            resizeObserver.observe(button);
+        }
+        return function () {
+            if (button) {
+                resizeObserver.unobserve(button);
+            }
+        };
+    }, [onResize]);
+    return hidden ? null : (React.createElement("button", __assign({}, restProps, { ref: mergeRefs([ref, buttonRef]), disabled: disabled || showSkeleton, type: 'button', id: String(id), className: cn(styles.title, (_c = {},
             _c[styles.selected] = selected,
             _c[styles.disabled] = disabled,
             _c[styles.collapsed] = collapsed && !isOption,

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

@@ -1,5 +1,6 @@
 export { Title } from './Component.js';
 import 'tslib';
 import 'react';
+import 'react-merge-refs';
 import 'classnames';
 import '../../../../skeleton/esm';

package/tabs/esm/desktop/index.js

@@ -21,8 +21,8 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../components/scroll-controls/utils.js';
 import '../components/title/Component.js';
 import '../../../skeleton/esm';
-import '../index.module-bf409628.js';
+import '../index.module-56154675.js';
 import '../../../tag/esm/desktop';
 import '../components/secondary-tablist/Component.js';
-import '../index.module-68d92895.js';
+import '../index.module-b46d929a.js';
 import '../components/tabs/Component.js';

package/tabs/esm/index.js

@@ -23,12 +23,12 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import './components/scroll-controls/utils.js';
 import './components/title/Component.js';
 import '../../skeleton/esm';
-import './index.module-bf409628.js';
+import './index.module-56154675.js';
 import './components/primary-tablist/Component.mobile.js';
 import './components/secondary-tablist/Component.desktop.js';
 import '../../tag/esm/desktop';
 import './components/secondary-tablist/Component.js';
-import './index.module-68d92895.js';
+import './index.module-b46d929a.js';
 import './components/secondary-tablist/Component.mobile.js';
 import '../../tag/esm/mobile';
 import './components/tabs/Component.js';

package/tabs/esm/mobile/index.js

@@ -21,8 +21,8 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../components/scroll-controls/utils.js';
 import '../components/title/Component.js';
 import '../../../skeleton/esm';
-import '../index.module-bf409628.js';
+import '../index.module-56154675.js';
 import '../../../tag/esm/mobile';
 import '../components/secondary-tablist/Component.js';
-import '../index.module-68d92895.js';
+import '../index.module-b46d929a.js';
 import '../components/tabs/Component.js';

package/tabs/modern/collapsible/index.js

@@ -17,5 +17,5 @@ import '../../../shared/modern';
 import '../synthetic-events.js';
 import '../components/title/Component.js';
 import '../../../skeleton/modern';
-import '../index.module-48a1b54e.js';
+import '../index.module-e008d842.js';
 import '../components/tabs/Component.js';

package/tabs/modern/components/primary-tablist/Component.collapsible.js

@@ -6,7 +6,7 @@ import { PickerButtonDesktop } from '../../../../picker-button/modern/desktop';
 import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
 import { createSyntheticMouseEvent } from '../../synthetic-events.js';
 import { Title } from '../title/Component.js';
-import { s as styles } from '../../index.module-48a1b54e.js';
+import { s as styles } from '../../index.module-e008d842.js';
 import '../../../../mq/modern';
 import '../../hooks/use-collapsible-elements.js';
 import '@juggle/resize-observer';

package/tabs/modern/components/primary-tablist/Component.desktop.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { s as styles } from '../../index.module-48a1b54e.js';
+import { s as styles } from '../../index.module-e008d842.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/modern';

package/tabs/modern/components/primary-tablist/Component.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useCallback } from 'react';
 import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import { KeyboardFocusable } from '../../../../keyboard-focusable/modern';
@@ -38,10 +38,16 @@ const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titl
         }
         return fnUtils.noop;
     }, [selectedTab]);
+    const handleTitleResize = useCallback(() => {
+        if (selectedTab && lineRef.current) {
+            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
+            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
+        }
+    }, [selectedTab]);
     const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, !textStyle && size && styles[size], {
             [styles.fullWidthScroll]: fullWidthScroll,
         }) },
-        titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles, showSkeleton: showSkeleton, skeletonProps: skeletonProps }))))),
+        titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles, showSkeleton: showSkeleton, skeletonProps: skeletonProps, onResize: handleTitleResize }))))),
         React.createElement("div", { className: styles.line, ref: lineRef })));
     const wrapperClassName = cn(textStyle && styles[textStyle], styles[platform]);
     return scrollable ? (React.createElement(ScrollableContainer, { containerWrapperClassName: wrapperClassName, activeChild: focusedTab || selectedTab, containerClassName: containerClassName, scrollControlsClassName: cn(textStyle && styles.scrollControls), fullWidthScroll: fullWidthScroll, view: 'primary', size: textStyle ? undefined : size, platform: platform, inlineStyle: inlineStyle, showSkeleton: showSkeleton }, renderContent())) : (React.createElement("div", { className: cn(styles.container, wrapperClassName, containerClassName), style: inlineStyle }, renderContent()));

package/tabs/modern/components/primary-tablist/Component.mobile.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { s as styles$1 } from '../../index.module-48a1b54e.js';
+import { s as styles$1 } from '../../index.module-e008d842.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/modern';

package/tabs/modern/components/primary-tablist/Component.responsive.js

@@ -19,7 +19,7 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../../../skeleton/modern';
-import '../../index.module-48a1b54e.js';
+import '../../index.module-e008d842.js';
 
 const PrimaryTabListResponsive = ({ size, breakpoint, client, fullWidthScroll, defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop', ...restProps }) => {
     const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);

package/tabs/modern/components/secondary-tablist/Component.desktop.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TagDesktop } from '../../../../tag/modern/desktop';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-923d7cbd.js';
+import { c as commonStyles } from '../../index.module-1d462755.js';
 import 'classnames';
 import '../../../../skeleton/modern';
 import '../../hooks/use-tabs.js';

package/tabs/modern/components/secondary-tablist/Component.mobile.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { TagMobile } from '../../../../tag/modern/mobile';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-923d7cbd.js';
+import { c as commonStyles } from '../../index.module-1d462755.js';
 import '../../../../skeleton/modern';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';

package/tabs/modern/components/secondary-tablist/Component.responsive.js

@@ -17,7 +17,7 @@ import '../../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
-import '../../index.module-923d7cbd.js';
+import '../../index.module-1d462755.js';
 import '../../../../tag/modern/mobile';
 
 const SecondaryTabListResponsive = ({ fullWidthScroll, breakpoint, client, defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop', ...restProps }) => {

package/tabs/modern/components/tabs/Component.collapsible.js

@@ -16,7 +16,7 @@ import '../../../../shared/modern';
 import '../../synthetic-events.js';
 import '../title/Component.js';
 import '../../../../skeleton/modern';
-import '../../index.module-48a1b54e.js';
+import '../../index.module-e008d842.js';
 
 const TabsCollapsible = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabList, ...restProps }));
 

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

@@ -19,10 +19,10 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../../../skeleton/modern';
-import '../../index.module-48a1b54e.js';
+import '../../index.module-e008d842.js';
 import '../../../../tag/modern/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-923d7cbd.js';
+import '../../index.module-1d462755.js';
 
 const views = {
     primary: PrimaryTabListDesktop,

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

@@ -19,10 +19,10 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../../../skeleton/modern';
-import '../../index.module-48a1b54e.js';
+import '../../index.module-e008d842.js';
 import '../../../../tag/modern/mobile';
 import '../secondary-tablist/Component.js';
-import '../../index.module-923d7cbd.js';
+import '../../index.module-1d462755.js';
 
 const views = {
     primary: PrimaryTabListMobile,

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

@@ -21,12 +21,12 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../../../skeleton/modern';
-import '../../index.module-48a1b54e.js';
+import '../../index.module-e008d842.js';
 import '../primary-tablist/Component.mobile.js';
 import '../secondary-tablist/Component.desktop.js';
 import '../../../../tag/modern/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-923d7cbd.js';
+import '../../index.module-1d462755.js';
 import '../secondary-tablist/Component.mobile.js';
 import '../../../../tag/modern/mobile';
 

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

@@ -7,5 +7,6 @@ declare const Title: React.ForwardRefExoticComponent<TabListTitle & Styles & Omi
     isOption?: boolean | undefined;
     showSkeleton?: boolean | undefined;
     skeletonProps?: Omit<SkeletonProps, "visible"> | undefined;
+    onResize?: (() => void) | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { Title };

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

@@ -1,13 +1,31 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { Skeleton } from '../../../../skeleton/modern';
 
-const Title = forwardRef(({ id, toggleClassName, title, styles = {}, rightAddons = null, hidden = false, selected = false, disabled = false, collapsed = false, focused = false, isOption = false, showSkeleton = false, skeletonProps, ...restProps }, ref) => {
+const Title = forwardRef(({ id, toggleClassName, title, styles = {}, rightAddons = null, hidden = false, selected = false, disabled = false, collapsed = false, focused = false, isOption = false, showSkeleton = false, skeletonProps, onResize, ...restProps }, ref) => {
+    const buttonRef = useRef(null);
     const titleClassName = {
         [styles.content]: true,
         [styles.focused]: focused,
     };
-    return hidden ? null : (React.createElement("button", { ...restProps, ref: ref, disabled: disabled || showSkeleton, type: 'button', id: String(id), className: cn(styles.title, {
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            if (onResize) {
+                onResize();
+            }
+        });
+        const button = buttonRef.current;
+        if (button) {
+            resizeObserver.observe(button);
+        }
+        return () => {
+            if (button) {
+                resizeObserver.unobserve(button);
+            }
+        };
+    }, [onResize]);
+    return hidden ? null : (React.createElement("button", { ...restProps, ref: mergeRefs([ref, buttonRef]), disabled: disabled || showSkeleton, type: 'button', id: String(id), className: cn(styles.title, {
             [styles.selected]: selected,
             [styles.disabled]: disabled,
             [styles.collapsed]: collapsed && !isOption,

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

@@ -1,4 +1,5 @@
 export { Title } from './Component.js';
 import 'react';
+import 'react-merge-refs';
 import 'classnames';
 import '../../../../skeleton/modern';