@alfalab/core-components-tabs 8.12.3 → 8.12.4

package/cssm/components/secondary-tablist/Component.responsive.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('@alfalab/core-components-mq/cssm');
-var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
 var components_secondaryTablist_Component_desktop = require('./Component.desktop.js');
 var components_secondaryTablist_Component_mobile = require('./Component.mobile.js');
 
@@ -14,8 +13,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SecondaryTabListResponsive = function (_a) {
-    var defaultMatchMediaValue = _a.defaultMatchMediaValue, fullWidthScroll = _a.fullWidthScroll, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["defaultMatchMediaValue", "fullWidthScroll", "breakpoint"]);
-    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
+    var fullWidthScroll = _a.fullWidthScroll, breakpoint = _a.breakpoint, client = _a.client, _b = _a.defaultMatchMediaValue, defaultMatchMediaValue = _b === void 0 ? client === undefined ? undefined : client === 'desktop' : _b, restProps = tslib.__rest(_a, ["fullWidthScroll", "breakpoint", "client", "defaultMatchMediaValue"]);
+    var isDesktop = coreComponentsMq.useIsDesktop(breakpoint, defaultMatchMediaValue);
     return isDesktop ? (React__default.default.createElement(components_secondaryTablist_Component_desktop.SecondaryTabListDesktop, tslib.__assign({}, restProps))) : (React__default.default.createElement(components_secondaryTablist_Component_mobile.SecondaryTabListMobile, tslib.__assign({ fullWidthScroll: fullWidthScroll }, restProps)));
 };
 

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
 import { TabsProps } from "../../typings";
-declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, tagShape, tagView, showSkeleton, skeletonProps, textStyle, style, }: Omit<TabsProps, 'view'>) => React.JSX.Element;
+declare const Tabs: ({ TabList, className, containerClassName, size, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, client, defaultMatchMediaValue, tagShape, tagView, showSkeleton, skeletonProps, textStyle, style, }: Omit<TabsProps, 'view'>) => React.JSX.Element;
 export { Tabs };

package/cssm/components/tabs/Component.js

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var Tabs = function (_a) {
-    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, _d = _a.breakpoint, breakpoint = _d === void 0 ? coreComponentsShared.getComponentBreakpoint() : _d, tagShape = _a.tagShape, tagView = _a.tagView, _e = _a.showSkeleton, showSkeleton = _e === void 0 ? false : _e, skeletonProps = _a.skeletonProps, textStyle = _a.textStyle, style = _a.style;
+    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, breakpoint = _a.breakpoint, client = _a.client, defaultMatchMediaValue = _a.defaultMatchMediaValue, tagShape = _a.tagShape, tagView = _a.tagView, _d = _a.showSkeleton, showSkeleton = _d === void 0 ? false : _d, skeletonProps = _a.skeletonProps, textStyle = _a.textStyle, style = _a.style;
     var tabsArray = React__default.default.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, toggleTestId = _b.dataTestId, toggleRef = _b.toggleRef;
@@ -27,7 +26,7 @@ var Tabs = function (_a) {
     });
     var tabs = tabsArray.filter(function (tab) { return tab.props.id === selectedId || tab.props.keepMounted || keepMounted; });
     return (React__default.default.createElement("div", { className: className },
-        React__default.default.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll, breakpoint: breakpoint, tagShape: tagShape, tagView: tagView, textStyle: textStyle, inlineStyle: style, showSkeleton: showSkeleton, skeletonProps: skeletonProps }),
+        React__default.default.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatchMediaValue: defaultMatchMediaValue, breakpoint: breakpoint, client: client, fullWidthScroll: fullWidthScroll, tagShape: tagShape, tagView: tagView, textStyle: textStyle, inlineStyle: style, showSkeleton: showSkeleton, skeletonProps: skeletonProps }),
         tabs.map(function (tab) { return React.cloneElement(tab, { hidden: tab.props.id !== selectedId }); })));
 };
 

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

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

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

@@ -17,8 +17,8 @@ var views = {
     secondary: components_secondaryTablist_Component_responsive.SecondaryTabListResponsive,
 };
 var TabsResponsive = function (_a) {
-    var _b = _a.view, view = _b === void 0 ? 'primary' : _b, _c = _a.scrollable, scrollable = _c === void 0 ? false : _c, restProps = tslib.__rest(_a, ["view", "scrollable"]);
-    return React__default.default.createElement(components_tabs_Component.Tabs, tslib.__assign({ TabList: views[view], scrollable: scrollable }, restProps));
+    var _b = _a.view, view = _b === void 0 ? 'primary' : _b, _c = _a.scrollable, scrollable = _c === void 0 ? false : _c, breakpoint = _a.breakpoint, client = _a.client, _d = _a.defaultMatchMediaValue, defaultMatchMediaValue = _d === void 0 ? client === undefined ? undefined : client === 'desktop' : _d, restProps = tslib.__rest(_a, ["view", "scrollable", "breakpoint", "client", "defaultMatchMediaValue"]);
+    return (React__default.default.createElement(components_tabs_Component.Tabs, tslib.__assign({ TabList: views[view], scrollable: scrollable, defaultMatchMediaValue: defaultMatchMediaValue, breakpoint: breakpoint, client: client }, restProps)));
 };
 
 exports.TabsResponsive = TabsResponsive;

package/cssm/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/cssm/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/cssm/typings.d.ts

@@ -32,10 +32,6 @@ type TabsProps = {
      * Высота заголовков табов
      */
     size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
-    /**
-     * Значение по-умолчанию для хука useMatchMedia
-     */
-    defaultMatchMediaValue?: boolean | (() => boolean);
     /**
      * Мобильный вид
      */
@@ -71,10 +67,19 @@ type TabsProps = {
      */
     dataTestId?: string;
     /**
-     * Контрольная точка для тега, с нее начинается desktop версия
+     * Контрольная точка, с нее начинается desktop версия
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
     /**
      * Форма тега (для view secondary только)
      */
@@ -164,6 +169,10 @@ type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size'
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
     /**
      * Дополнительные инлайн стили для заголовка
      */

package/esm/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/esm/components/primary-tablist/Component.collapsible.js

@@ -4,23 +4,23 @@ import cn from 'classnames';
 import { Badge } from '@alfalab/core-components-badge/esm';
 import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable/esm';
 import { PickerButtonDesktop } from '@alfalab/core-components-picker-button/esm/desktop';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared/esm';
 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-058dc572.js';
+import { s as styles } from '../../index.module-db169a3f.js';
 
 var CollapsiblePrimaryTabList = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'm' : _b, className = _a.className, containerClassName = _a.containerClassName, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, collapsedTabsIds = _a.collapsedTabsIds, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, _e = _a.breakpoint, breakpoint = _e === void 0 ? getComponentBreakpoint() : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle, showSkeleton = _a.showSkeleton, skeletonProps = _a.skeletonProps;
+    var _b = _a.size, size = _b === void 0 ? 'm' : _b, className = _a.className, containerClassName = _a.containerClassName, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, collapsedTabsIds = _a.collapsedTabsIds, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, breakpoint = _a.breakpoint, client = _a.client, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle, showSkeleton = _a.showSkeleton, skeletonProps = _a.skeletonProps;
     var lineRef = useRef(null);
-    var _f = useTablistTitles({
+    var _e = useTablistTitles({
         titles: titles,
         selectedId: selectedId,
         collapsedTabsIds: collapsedTabsIds,
-        breakpoint: breakpoint,
         onChange: onChange,
+        breakpoint: breakpoint,
+        client: client,
         defaultMatchMediaValue: defaultMatchMediaValue,
-    }), containerRef = _f.containerRef, addonRef = _f.addonRef, tablistTitles = _f.tablistTitles, selectedTab = _f.selectedTab, getTabListItemProps = _f.getTabListItemProps;
+    }), containerRef = _e.containerRef, addonRef = _e.addonRef, tablistTitles = _e.tablistTitles, selectedTab = _e.selectedTab, getTabListItemProps = _e.getTabListItemProps;
     useEffect(function () {
         if (selectedTab && lineRef.current) {
             lineRef.current.style.width = "".concat(selectedTab.offsetWidth, "px");

package/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-058dc572.js';
+import { s as styles } from '../../index.module-db169a3f.js';
 
 var PrimaryTabListDesktop = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'm' : _b, restProps = __rest(_a, ["size"]);

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

@@ -1,9 +1,9 @@
 import { __assign } from 'tslib';
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { s as styles$1 } from '../../index.module-058dc572.js';
+import { s as styles$1 } from '../../index.module-db169a3f.js';
 
-var 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"};
+var 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')
 
 var styles = __assign(__assign({}, styles$1), mobileStyles);

package/esm/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/esm/components/primary-tablist/Component.responsive.js

@@ -1,13 +1,12 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
-import { useMatchMedia } from '@alfalab/core-components-mq/esm';
-import { getComponentBreakpoint } from '@alfalab/core-components-shared/esm';
+import { useIsDesktop } from '@alfalab/core-components-mq/esm';
 import { PrimaryTabListDesktop } from './Component.desktop.js';
 import { PrimaryTabListMobile } from './Component.mobile.js';
 
 var PrimaryTabListResponsive = function (_a) {
-    var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
-    var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
+    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"]);
+    var isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
     return isDesktop ? (React.createElement(PrimaryTabListDesktop, __assign({ breakpoint: breakpoint, size: size, defaultMatchMediaValue: defaultMatchMediaValue }, restProps))) : (React.createElement(PrimaryTabListMobile, __assign({ breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll }, restProps)));
 };