@alfalab/core-components 48.6.0 → 48.7.0

package/tabs/index.module-e8478416.js

@@ -0,0 +1,4 @@
+var styles = {"component":"tabs__component_ey0uv","desktop":"tabs__desktop_ey0uv","paragraph-primary-large":"tabs__paragraph-primary-large_ey0uv","title":"tabs__title_ey0uv","paragraph-primary-medium":"tabs__paragraph-primary-medium_ey0uv","paragraph-primary-small":"tabs__paragraph-primary-small_ey0uv","action-primary-large":"tabs__action-primary-large_ey0uv","action-primary-medium":"tabs__action-primary-medium_ey0uv","action-primary-small":"tabs__action-primary-small_ey0uv","accent-primary-large":"tabs__accent-primary-large_ey0uv","accent-primary-medium":"tabs__accent-primary-medium_ey0uv","accent-primary-small":"tabs__accent-primary-small_ey0uv","pickerWrapper":"tabs__pickerWrapper_ey0uv","option":"tabs__option_ey0uv","scrollControls":"tabs__scrollControls_ey0uv","headline-system-xlarge":"tabs__headline-system-xlarge_ey0uv","headline-system-large":"tabs__headline-system-large_ey0uv","headline-system-medium":"tabs__headline-system-medium_ey0uv","headline-system-small":"tabs__headline-system-small_ey0uv","headline-system-xsmall":"tabs__headline-system-xsmall_ey0uv","headline-xlarge":"tabs__headline-xlarge_ey0uv","headline-large":"tabs__headline-large_ey0uv","headline-medium":"tabs__headline-medium_ey0uv","headline-small":"tabs__headline-small_ey0uv","headline-xsmall":"tabs__headline-xsmall_ey0uv","fullWidthScroll":"tabs__fullWidthScroll_ey0uv","container":"tabs__container_ey0uv","focused":"tabs__focused_ey0uv","collapsed":"tabs__collapsed_ey0uv","selected":"tabs__selected_ey0uv","disabled":"tabs__disabled_ey0uv","line":"tabs__line_ey0uv","s":"tabs__s_ey0uv","xs":"tabs__xs_ey0uv","xxs":"tabs__xxs_ey0uv","m":"tabs__m_ey0uv","l":"tabs__l_ey0uv","xl":"tabs__xl_ey0uv","rightAddons":"tabs__rightAddons_ey0uv","rightAddonsMarginZero":"tabs__rightAddonsMarginZero_ey0uv"};
+require('./components/primary-tablist/index.css');
+
+exports.styles = styles;

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-1dd05e8a.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-1dd05e8a.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-1dd05e8a.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-1dd05e8a.js';
+import { s as styles$1 } from '../../index.module-e008d842.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/modern';
@@ -18,7 +18,7 @@ import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../../../skeleton/modern';
 
-const mobileStyles = {"title":"tabs__title_1pvgw tabs__title_9dsso","mobile":"tabs__mobile_1pvgw","paragraph-primary-large":"tabs__paragraph-primary-large_1pvgw","paragraph-primary-medium":"tabs__paragraph-primary-medium_1pvgw","paragraph-primary-small":"tabs__paragraph-primary-small_1pvgw","action-primary-large":"tabs__action-primary-large_1pvgw","action-primary-medium":"tabs__action-primary-medium_1pvgw","action-primary-small":"tabs__action-primary-small_1pvgw","accent-primary-large":"tabs__accent-primary-large_1pvgw","accent-primary-medium":"tabs__accent-primary-medium_1pvgw","accent-primary-small":"tabs__accent-primary-small_1pvgw","pickerWrapper":"tabs__pickerWrapper_1pvgw","option":"tabs__option_1pvgw","scrollControls":"tabs__scrollControls_1pvgw","headline-system-xlarge":"tabs__headline-system-xlarge_1pvgw","headline-system-large":"tabs__headline-system-large_1pvgw","headline-system-medium":"tabs__headline-system-medium_1pvgw","headline-system-small":"tabs__headline-system-small_1pvgw","headline-system-xsmall":"tabs__headline-system-xsmall_1pvgw","headline-xlarge":"tabs__headline-xlarge_1pvgw","headline-large":"tabs__headline-large_1pvgw","headline-medium":"tabs__headline-medium_1pvgw","headline-small":"tabs__headline-small_1pvgw","headline-xsmall":"tabs__headline-xsmall_1pvgw"};
+const mobileStyles = {"title":"tabs__title_jal5q tabs__title_ey0uv","mobile":"tabs__mobile_jal5q","paragraph-primary-large":"tabs__paragraph-primary-large_jal5q","paragraph-primary-medium":"tabs__paragraph-primary-medium_jal5q","paragraph-primary-small":"tabs__paragraph-primary-small_jal5q","action-primary-large":"tabs__action-primary-large_jal5q","action-primary-medium":"tabs__action-primary-medium_jal5q","action-primary-small":"tabs__action-primary-small_jal5q","accent-primary-large":"tabs__accent-primary-large_jal5q","accent-primary-medium":"tabs__accent-primary-medium_jal5q","accent-primary-small":"tabs__accent-primary-small_jal5q","pickerWrapper":"tabs__pickerWrapper_jal5q","option":"tabs__option_jal5q","scrollControls":"tabs__scrollControls_jal5q","headline-system-xlarge":"tabs__headline-system-xlarge_jal5q","headline-system-large":"tabs__headline-system-large_jal5q","headline-system-medium":"tabs__headline-system-medium_jal5q","headline-system-small":"tabs__headline-system-small_jal5q","headline-system-xsmall":"tabs__headline-system-xsmall_jal5q","headline-xlarge":"tabs__headline-xlarge_jal5q","headline-large":"tabs__headline-large_jal5q","headline-medium":"tabs__headline-medium_jal5q","headline-small":"tabs__headline-small_jal5q","headline-xsmall":"tabs__headline-xsmall_jal5q"};
 require('./mobile.css');
 
 const styles = {

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-1dd05e8a.js';
+import '../../index.module-e008d842.js';
 
 const PrimaryTabListResponsive = ({ size, breakpoint, client, fullWidthScroll, defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop', ...restProps }) => {
     const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);