@alfalab/core-components-tabs 8.12.3 → 8.12.4

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TabListProps } from "../typings";
-declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, breakpoint, onChange, defaultMatchMediaValue, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsedTabsIds' | 'onChange' | 'defaultMatchMediaValue'> & Required<Pick<TabListProps, 'breakpoint'>>) => {
+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>;
     tablistTitles: {

package/hooks/use-tablist-titles.js

@@ -9,9 +9,9 @@ var hooks_useCollapsibleElements = require('./use-collapsible-elements.js');
 var hooks_useTabs = require('./use-tabs.js');
 
 var useTablistTitles = function (_a) {
-    var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, collapsedTabsIds = _a.collapsedTabsIds, breakpoint = _a.breakpoint, onChange = _a.onChange, defaultMatchMediaValue = _a.defaultMatchMediaValue;
-    var _c = hooks_useCollapsibleElements.useCollapsibleElements('[role=tab]', [titles, collapsedTabsIds]), containerRef = _c.containerRef, addonRef = _c.addonRef, idsCollapsedElements = _c.idsCollapsedElements;
-    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
+    var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, collapsedTabsIds = _a.collapsedTabsIds, onChange = _a.onChange, breakpoint = _a.breakpoint, client = _a.client, _c = _a.defaultMatchMediaValue, defaultMatchMediaValue = _c === void 0 ? client === undefined ? undefined : client === 'desktop' : _c;
+    var _d = hooks_useCollapsibleElements.useCollapsibleElements('[role=tab]', [titles, collapsedTabsIds]), containerRef = _d.containerRef, addonRef = _d.addonRef, idsCollapsedElements = _d.idsCollapsedElements;
+    var isDesktop = coreComponentsMq.useIsDesktop(breakpoint, defaultMatchMediaValue);
     var tablistTitles = React.useMemo(function () {
         var idsCollapsedTitles = [];
         var idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds || []);
@@ -50,11 +50,11 @@ var useTablistTitles = function (_a) {
             return a.collapsed ? 1 : -1;
         });
     }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);
-    var _d = hooks_useTabs.useTabs({
+    var _e = hooks_useTabs.useTabs({
         titles: tablistTitles,
         selectedId: selectedId,
         onChange: onChange,
-    }), selectedTab = _d.selectedTab, focusedTab = _d.focusedTab, getTabListItemProps = _d.getTabListItemProps;
+    }), selectedTab = _e.selectedTab, focusedTab = _e.focusedTab, getTabListItemProps = _e.getTabListItemProps;
     return {
         containerRef: containerRef,
         addonRef: addonRef,

package/index.module-b736b98c.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var commonStyles = {"component":"tabs__component_ndl57","fullWidthScroll":"tabs__fullWidthScroll_ndl57","container":"tabs__container_ndl57","title":"tabs__title_ndl57","xxs":"tabs__xxs_ndl57","skeleton":"tabs__skeleton_ndl57","xs":"tabs__xs_ndl57","s":"tabs__s_ndl57","m":"tabs__m_ndl57","l":"tabs__l_ndl57","xl":"tabs__xl_ndl57"};
+require('./components/secondary-tablist/index.css')
+
+exports.commonStyles = commonStyles;

package/index.module-fd8afcc7.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {"component":"tabs__component_3iblt","desktop":"tabs__desktop_3iblt","paragraph-primary-large":"tabs__paragraph-primary-large_3iblt","title":"tabs__title_3iblt","paragraph-primary-medium":"tabs__paragraph-primary-medium_3iblt","paragraph-primary-small":"tabs__paragraph-primary-small_3iblt","action-primary-large":"tabs__action-primary-large_3iblt","action-primary-medium":"tabs__action-primary-medium_3iblt","action-primary-small":"tabs__action-primary-small_3iblt","accent-primary-large":"tabs__accent-primary-large_3iblt","accent-primary-medium":"tabs__accent-primary-medium_3iblt","accent-primary-small":"tabs__accent-primary-small_3iblt","pickerWrapper":"tabs__pickerWrapper_3iblt","option":"tabs__option_3iblt","scrollControls":"tabs__scrollControls_3iblt","headline-system-xlarge":"tabs__headline-system-xlarge_3iblt","headline-system-large":"tabs__headline-system-large_3iblt","headline-system-medium":"tabs__headline-system-medium_3iblt","headline-system-small":"tabs__headline-system-small_3iblt","headline-system-xsmall":"tabs__headline-system-xsmall_3iblt","headline-xlarge":"tabs__headline-xlarge_3iblt","headline-large":"tabs__headline-large_3iblt","headline-medium":"tabs__headline-medium_3iblt","headline-small":"tabs__headline-small_3iblt","headline-xsmall":"tabs__headline-xsmall_3iblt","fullWidthScroll":"tabs__fullWidthScroll_3iblt","container":"tabs__container_3iblt","focused":"tabs__focused_3iblt","collapsed":"tabs__collapsed_3iblt","selected":"tabs__selected_3iblt","disabled":"tabs__disabled_3iblt","line":"tabs__line_3iblt","s":"tabs__s_3iblt","xs":"tabs__xs_3iblt","xxs":"tabs__xxs_3iblt","m":"tabs__m_3iblt","l":"tabs__l_3iblt","xl":"tabs__xl_3iblt","rightAddons":"tabs__rightAddons_3iblt","rightAddonsMarginZero":"tabs__rightAddonsMarginZero_3iblt"};
+require('./components/primary-tablist/index.css')
+
+exports.styles = styles;

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

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

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

@@ -3,20 +3,20 @@ import cn from 'classnames';
 import { Badge } from '@alfalab/core-components-badge/modern';
 import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable/modern';
 import { PickerButtonDesktop } from '@alfalab/core-components-picker-button/modern/desktop';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared/modern';
 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-062ab45d.js';
+import { s as styles } from '../../index.module-71eadc23.js';
 
-const CollapsiblePrimaryTabList = ({ size = 'm', className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, textStyle, showSkeleton, skeletonProps, }) => {
+const CollapsiblePrimaryTabList = ({ size = 'm', className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint, client, defaultMatchMediaValue, textStyle, showSkeleton, skeletonProps, }) => {
     const lineRef = useRef(null);
     const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } = useTablistTitles({
         titles,
         selectedId,
         collapsedTabsIds,
-        breakpoint,
         onChange,
+        breakpoint,
+        client,
         defaultMatchMediaValue,
     });
     useEffect(() => {

package/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-062ab45d.js';
+import { s as styles } from '../../index.module-71eadc23.js';
 
 const PrimaryTabListDesktop = ({ size = 'm', ...restProps }) => (React.createElement(PrimaryTabList, { ...restProps, size: size, styles: styles, platform: 'desktop' }));
 

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { s as styles$1 } from '../../index.module-062ab45d.js';
+import { s as styles$1 } from '../../index.module-71eadc23.js';
 
-const mobileStyles = {"title":"tabs__title_1wmdj tabs__title_6x63j","mobile":"tabs__mobile_1wmdj","paragraph-primary-large":"tabs__paragraph-primary-large_1wmdj","paragraph-primary-medium":"tabs__paragraph-primary-medium_1wmdj","paragraph-primary-small":"tabs__paragraph-primary-small_1wmdj","action-primary-large":"tabs__action-primary-large_1wmdj","action-primary-medium":"tabs__action-primary-medium_1wmdj","action-primary-small":"tabs__action-primary-small_1wmdj","accent-primary-large":"tabs__accent-primary-large_1wmdj","accent-primary-medium":"tabs__accent-primary-medium_1wmdj","accent-primary-small":"tabs__accent-primary-small_1wmdj","pickerWrapper":"tabs__pickerWrapper_1wmdj","option":"tabs__option_1wmdj","scrollControls":"tabs__scrollControls_1wmdj","headline-system-xlarge":"tabs__headline-system-xlarge_1wmdj","headline-system-large":"tabs__headline-system-large_1wmdj","headline-system-medium":"tabs__headline-system-medium_1wmdj","headline-system-small":"tabs__headline-system-small_1wmdj","headline-system-xsmall":"tabs__headline-system-xsmall_1wmdj","headline-xlarge":"tabs__headline-xlarge_1wmdj","headline-large":"tabs__headline-large_1wmdj","headline-medium":"tabs__headline-medium_1wmdj","headline-small":"tabs__headline-small_1wmdj","headline-xsmall":"tabs__headline-xsmall_1wmdj"};
+const mobileStyles = {"title":"tabs__title_p3olt tabs__title_3iblt","mobile":"tabs__mobile_p3olt","paragraph-primary-large":"tabs__paragraph-primary-large_p3olt","paragraph-primary-medium":"tabs__paragraph-primary-medium_p3olt","paragraph-primary-small":"tabs__paragraph-primary-small_p3olt","action-primary-large":"tabs__action-primary-large_p3olt","action-primary-medium":"tabs__action-primary-medium_p3olt","action-primary-small":"tabs__action-primary-small_p3olt","accent-primary-large":"tabs__accent-primary-large_p3olt","accent-primary-medium":"tabs__accent-primary-medium_p3olt","accent-primary-small":"tabs__accent-primary-small_p3olt","pickerWrapper":"tabs__pickerWrapper_p3olt","option":"tabs__option_p3olt","scrollControls":"tabs__scrollControls_p3olt","headline-system-xlarge":"tabs__headline-system-xlarge_p3olt","headline-system-large":"tabs__headline-system-large_p3olt","headline-system-medium":"tabs__headline-system-medium_p3olt","headline-system-small":"tabs__headline-system-small_p3olt","headline-system-xsmall":"tabs__headline-system-xsmall_p3olt","headline-xlarge":"tabs__headline-xlarge_p3olt","headline-large":"tabs__headline-large_p3olt","headline-medium":"tabs__headline-medium_p3olt","headline-small":"tabs__headline-small_p3olt","headline-xsmall":"tabs__headline-xsmall_p3olt"};
 require('./mobile.css')
 
 const styles = {

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

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

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { useMatchMedia } from '@alfalab/core-components-mq/modern';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared/modern';
+import { useIsDesktop } from '@alfalab/core-components-mq/modern';
 import { PrimaryTabListDesktop } from './Component.desktop.js';
 import { PrimaryTabListMobile } from './Component.mobile.js';
 
-const PrimaryTabListResponsive = ({ size, breakpoint = getComponentBreakpoint(), fullWidthScroll, defaultMatchMediaValue, ...restProps }) => {
-    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+const PrimaryTabListResponsive = ({ size, breakpoint, client, fullWidthScroll, defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop', ...restProps }) => {
+    const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
     return isDesktop ? (React.createElement(PrimaryTabListDesktop, { breakpoint: breakpoint, size: size, defaultMatchMediaValue: defaultMatchMediaValue, ...restProps })) : (React.createElement(PrimaryTabListMobile, { breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll, ...restProps }));
 };