@alfalab/core-components-tabs 8.5.2 → 8.6.0

package/modern/index.js

@@ -2,31 +2,3 @@ export { PrimaryTabListResponsive } from './components/primary-tablist/Component
 export { SecondaryTabListResponsive } from './components/secondary-tablist/Component.responsive.js';
 export { Tab } from './components/tab/Component.js';
 export { TabsResponsive as Tabs } from './components/tabs/Component.responsive.js';
-import 'react';
-import '@alfalab/core-components-mq/modern';
-import './components/primary-tablist/Component.desktop.js';
-import './components/primary-tablist/Component.js';
-import '@juggle/resize-observer';
-import 'classnames';
-import '@alfalab/core-components-keyboard-focusable/modern';
-import '@alfalab/core-components-shared/modern';
-import './hooks/use-tabs.js';
-import 'react-merge-refs';
-import './components/scrollable-container/Component.js';
-import 'compute-scroll-into-view';
-import './components/scroll-controls/Component.js';
-import 'lodash.debounce';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/icons-glyph/ChevronLeftMIcon';
-import '@alfalab/icons-glyph/ChevronRightMIcon';
-import './components/scroll-controls/utils.js';
-import './components/title/Component.js';
-import './index.module-b0eb0617.js';
-import './components/primary-tablist/Component.mobile.js';
-import './components/secondary-tablist/Component.desktop.js';
-import '@alfalab/core-components-tag/modern/desktop';
-import './components/secondary-tablist/Component.js';
-import './index.module-11a3c51b.js';
-import './components/secondary-tablist/Component.mobile.js';
-import '@alfalab/core-components-tag/modern/mobile';
-import './components/tabs/Component.js';

package/modern/index.module-819ff0ab.js

@@ -0,0 +1,4 @@
+const commonStyles = {"component":"tabs__component_12vn9","fullWidthScroll":"tabs__fullWidthScroll_12vn9","container":"tabs__container_12vn9","title":"tabs__title_12vn9","xxs":"tabs__xxs_12vn9","xs":"tabs__xs_12vn9","s":"tabs__s_12vn9","m":"tabs__m_12vn9","l":"tabs__l_12vn9","xl":"tabs__xl_12vn9"};
+require('./components/secondary-tablist/index.css')
+
+export { commonStyles as c };

package/modern/index.module-ee14bf5a.js

@@ -0,0 +1,4 @@
+const styles = {"component":"tabs__component_ravim","desktop":"tabs__desktop_ravim","paragraph-primary-large":"tabs__paragraph-primary-large_ravim","title":"tabs__title_ravim","paragraph-primary-medium":"tabs__paragraph-primary-medium_ravim","paragraph-primary-small":"tabs__paragraph-primary-small_ravim","action-primary-large":"tabs__action-primary-large_ravim","action-primary-medium":"tabs__action-primary-medium_ravim","action-primary-small":"tabs__action-primary-small_ravim","accent-primary-large":"tabs__accent-primary-large_ravim","accent-primary-medium":"tabs__accent-primary-medium_ravim","accent-primary-small":"tabs__accent-primary-small_ravim","pickerWrapper":"tabs__pickerWrapper_ravim","option":"tabs__option_ravim","scrollControls":"tabs__scrollControls_ravim","headline-system-xlarge":"tabs__headline-system-xlarge_ravim","headline-system-large":"tabs__headline-system-large_ravim","headline-system-medium":"tabs__headline-system-medium_ravim","headline-system-small":"tabs__headline-system-small_ravim","headline-system-xsmall":"tabs__headline-system-xsmall_ravim","headline-xlarge":"tabs__headline-xlarge_ravim","headline-large":"tabs__headline-large_ravim","headline-medium":"tabs__headline-medium_ravim","headline-small":"tabs__headline-small_ravim","headline-xsmall":"tabs__headline-xsmall_ravim","fullWidthScroll":"tabs__fullWidthScroll_ravim","container":"tabs__container_ravim","disabled":"tabs__disabled_ravim","focused":"tabs__focused_ravim","collapsed":"tabs__collapsed_ravim","selected":"tabs__selected_ravim","line":"tabs__line_ravim","s":"tabs__s_ravim","xs":"tabs__xs_ravim","xxs":"tabs__xxs_ravim","m":"tabs__m_ravim","l":"tabs__l_ravim","xl":"tabs__xl_ravim","rightAddons":"tabs__rightAddons_ravim"};
+require('./components/primary-tablist/index.css')
+
+export { styles as s };

package/modern/mobile/index.js

@@ -2,25 +2,3 @@ export { PrimaryTabListMobile } from '../components/primary-tablist/Component.mo
 export { SecondaryTabListMobile } from '../components/secondary-tablist/Component.mobile.js';
 export { Tab } from '../components/tab/Component.js';
 export { TabsMobile } from '../components/tabs/Component.mobile.js';
-import 'react';
-import 'classnames';
-import '../components/primary-tablist/Component.js';
-import '@juggle/resize-observer';
-import '@alfalab/core-components-keyboard-focusable/modern';
-import '@alfalab/core-components-shared/modern';
-import '../hooks/use-tabs.js';
-import 'react-merge-refs';
-import '../components/scrollable-container/Component.js';
-import 'compute-scroll-into-view';
-import '../components/scroll-controls/Component.js';
-import 'lodash.debounce';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/icons-glyph/ChevronLeftMIcon';
-import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../components/scroll-controls/utils.js';
-import '../components/title/Component.js';
-import '../index.module-b0eb0617.js';
-import '@alfalab/core-components-tag/modern/mobile';
-import '../components/secondary-tablist/Component.js';
-import '../index.module-11a3c51b.js';
-import '../components/tabs/Component.js';

package/modern/shared/index.js

@@ -1,16 +1,3 @@
 export { ScrollableContainer } from '../components/scrollable-container/Component.js';
 export { useTabs } from '../hooks/use-tabs.js';
 export { useCollapsibleElements } from '../hooks/use-collapsible-elements.js';
-import 'react';
-import 'classnames';
-import 'compute-scroll-into-view';
-import '../components/scroll-controls/Component.js';
-import 'lodash.debounce';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/icons-glyph/ChevronLeftMIcon';
-import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../components/scroll-controls/utils.js';
-import 'react-merge-refs';
-import '@alfalab/core-components-shared/modern';
-import '@juggle/resize-observer';
-import '@alfalab/hooks';

package/modern/typings.d.ts

@@ -22,6 +22,10 @@ type TabsProps = {
      * Внешний вид заголовков табов
      */
     view?: 'primary' | 'secondary';
+    /**
+     * Стиль текста. Имеет приоритет над size. Работает только в primary табах.
+     */
+    textStyle?: 'paragraph-primary-large' | 'paragraph-primary-medium' | 'paragraph-primary-small' | 'action-primary-large' | 'action-primary-medium' | 'action-primary-small' | 'accent-primary-large' | 'accent-primary-medium' | 'accent-primary-small' | 'headline-system-xlarge' | 'headline-system-large' | 'headline-system-medium' | 'headline-system-small' | 'headline-system-xsmall' | 'headline-xlarge' | 'headline-large' | 'headline-medium' | 'headline-small' | 'headline-xsmall';
     /**
      * Высота заголовков табов
      */
@@ -136,7 +140,7 @@ type TabListTitle = {
     dataTestId?: string;
     toggleRef?: Ref<HTMLDivElement>;
 };
-type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView'> & {
+type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView' | 'textStyle'> & {
     /**
      * Заголовки табов
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-tabs",
-    "version": "8.5.2",
+    "version": "8.6.0",
     "description": "Tabs components",
     "keywords": [],
     "license": "MIT",
@@ -15,13 +15,13 @@
     },
     "dependencies": {
         "@alfalab/core-components-keyboard-focusable": "^4.1.0",
-        "@alfalab/core-components-tag": "^8.0.1",
-        "@alfalab/core-components-picker-button": "^11.5.2",
+        "@alfalab/core-components-tag": "^8.1.0",
+        "@alfalab/core-components-picker-button": "^11.5.3",
         "@alfalab/core-components-badge": "^5.5.1",
         "@alfalab/core-components-mq": "^4.2.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/core-components-shared": "^0.9.1",
-        "@alfalab/core-components-icon-button": "^6.5.1",
+        "@alfalab/core-components-icon-button": "^6.5.2",
         "@alfalab/icons-glyph": "^2.139.0",
         "classnames": "^2.3.1",
         "compute-scroll-into-view": "^3.1.0",

package/shared/index.js

@@ -5,20 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var components_scrollableContainer_Component = require('../components/scrollable-container/Component.js');
 var hooks_useTabs = require('../hooks/use-tabs.js');
 var hooks_useCollapsibleElements = require('../hooks/use-collapsible-elements.js');
-require('react');
-require('classnames');
-require('compute-scroll-into-view');
-require('../components/scroll-controls/Component.js');
-require('tslib');
-require('lodash.debounce');
-require('@alfalab/core-components-icon-button');
-require('@alfalab/icons-glyph/ChevronLeftMIcon');
-require('@alfalab/icons-glyph/ChevronRightMIcon');
-require('../components/scroll-controls/utils.js');
-require('react-merge-refs');
-require('@alfalab/core-components-shared');
-require('@juggle/resize-observer');
-require('@alfalab/hooks');
 
 
 

package/src/components/primary-tablist/Component.collapsible.tsx

@@ -27,6 +27,7 @@ export const CollapsiblePrimaryTabList = ({
     dataTestId,
     breakpoint = 1024,
     defaultMatchMediaValue,
+    textStyle,
 }: TabListProps) => {
     const lineRef = useRef<HTMLDivElement>(null);
 
@@ -92,7 +93,7 @@ export const CollapsiblePrimaryTabList = ({
         <div
             role='tablist'
             data-test-id={dataTestId}
-            className={cn(styles.component, className, size && styles[size], {
+            className={cn(styles.component, className, !textStyle && size && styles[size], {
                 [styles.fullWidthScroll]: fullWidthScroll,
             })}
         >
@@ -113,7 +114,7 @@ export const CollapsiblePrimaryTabList = ({
                 <span ref={addonRef} role='menu' className={styles.pickerWrapper}>
                     <PickerButtonDesktop
                         fieldClassName={styles.title}
-                        optionClassName={cn(styles.pickerOption, size && styles[size])}
+                        optionClassName={cn(size && styles[size])}
                         options={collapsedOptions}
                         onChange={handleOptionsChange}
                         rightAddons={
@@ -134,7 +135,15 @@ export const CollapsiblePrimaryTabList = ({
     );
 
     return (
-        <div ref={containerRef} className={cn(styles.container, containerClassName)}>
+        <div
+            ref={containerRef}
+            className={cn(
+                styles.container,
+                textStyle && styles[textStyle],
+                styles.desktop,
+                containerClassName,
+            )}
+        >
             {renderContent()}
         </div>
     );

package/src/components/primary-tablist/Component.mobile.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import cn from 'classnames';
 
 import { TabListProps } from '../../typings';
 
@@ -15,11 +14,6 @@ const styles = {
 
 export type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
 
-export const PrimaryTabListMobile = ({ className, ...restProps }: PrimaryTabListMobileProps) => (
-    <PrimaryTabList
-        {...restProps}
-        styles={styles}
-        className={cn(className, styles.mobile)}
-        platform='mobile'
-    />
+export const PrimaryTabListMobile = (props: PrimaryTabListMobileProps) => (
+    <PrimaryTabList {...props} styles={styles} platform='mobile' />
 );

package/src/components/primary-tablist/Component.tsx

@@ -22,6 +22,7 @@ export const PrimaryTabList = ({
     onChange,
     dataTestId,
     platform,
+    textStyle,
 }: TabListProps & Styles & PlatformProps) => {
     const lineRef = useRef<HTMLDivElement>(null);
 
@@ -55,7 +56,7 @@ export const PrimaryTabList = ({
         <div
             role='tablist'
             data-test-id={dataTestId}
-            className={cn(styles.component, className, size && styles[size], {
+            className={cn(styles.component, className, !textStyle && size && styles[size], {
                 [styles.fullWidthScroll]: fullWidthScroll,
             })}
         >
@@ -76,18 +77,24 @@ export const PrimaryTabList = ({
         </div>
     );
 
+    const wrapperClassName = cn(textStyle && styles[textStyle], styles[platform]);
+
     return scrollable ? (
         <ScrollableContainer
+            containerWrapperClassName={wrapperClassName}
             activeChild={focusedTab || selectedTab}
             containerClassName={containerClassName}
+            scrollControlsClassName={cn(textStyle && styles.scrollControls)}
             fullWidthScroll={fullWidthScroll}
             view='primary'
-            size={size}
+            size={textStyle ? undefined : size}
             platform={platform}
         >
             {renderContent()}
         </ScrollableContainer>
     ) : (
-        <div className={cn(styles.container, containerClassName)}>{renderContent()}</div>
+        <div className={cn(styles.container, wrapperClassName, containerClassName)}>
+            {renderContent()}
+        </div>
     );
 };

package/src/components/primary-tablist/index.module.css

@@ -1,5 +1,6 @@
 @import '@alfalab/core-components-themes/src/default.css';
 @import '../../vars.css';
+@import './text-styles.module.css';
 
 .component {
     position: relative;
@@ -17,6 +18,11 @@
     }
 }
 
+.desktop {
+    @mixin text-style;
+    @mixin text-style-desktop;
+}
+
 .fullWidthScroll {
     min-width: calc(100% - 2 * var(--gap-m));
     margin: 0 var(--gap-m);

package/src/components/primary-tablist/mobile.module.css

@@ -1,5 +1,6 @@
 @import '@alfalab/core-components-themes/src/default.css';
 @import '../../vars.css';
+@import './text-styles.module.css';
 
 .title {
     composes: title from 'index.module.css';
@@ -17,4 +18,7 @@
             margin-left: var(--primary-tablist-mobile-gaps);
         }
     }
+
+    @mixin text-style;
+    @mixin text-style-mobile;
 }

package/src/components/primary-tablist/text-styles.module.css

@@ -0,0 +1,228 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+@define-mixin element_styles $lh {
+    & .title {
+        padding-bottom: calc($lh / 2);
+    }
+
+    & .title + .title,
+    & .pickerWrapper {
+        margin-left: $lh;
+    }
+
+    & .option {
+        padding: 0;
+    }
+
+    & .scrollControls {
+        & > button {
+            box-sizing: content-box;
+            width: $lh;
+            height: $lh;
+            padding: 0;
+        }
+
+        & button:first-child {
+            margin: 0 0 0 calc($lh / 2);
+        }
+    }
+}
+
+@define-mixin text-style {
+    &.paragraph-primary-large .title {
+        @mixin paragraph_primary_large;
+    }
+
+    &.paragraph-primary-medium .title {
+        @mixin paragraph_primary_medium;
+    }
+
+    &.paragraph-primary-small .title {
+        @mixin paragraph_primary_small;
+    }
+
+    &.action-primary-large .title {
+        @mixin action_primary_large;
+    }
+
+    &.action-primary-medium .title {
+        @mixin action_primary_medium;
+    }
+
+    &.action-primary-small .title {
+        @mixin action_primary_small;
+    }
+
+    &.accent-primary-large .title {
+        @mixin accent_primary_large;
+    }
+
+    &.accent-primary-medium .title {
+        @mixin accent_primary_medium;
+    }
+
+    &.accent-primary-small .title {
+        @mixin accent_primary_small;
+    }
+
+    &.paragraph-primary-large,
+    &.paragraph-primary-medium,
+    &.accent-primary-large,
+    &.accent-primary-medium,
+    &.action-primary-large,
+    &.action-primary-medium {
+        @mixin element_styles 24px;
+    }
+
+    &.paragraph-primary-small,
+    &.accent-primary-small,
+    &.action-primary-small {
+        @mixin element_styles 20px;
+    }
+}
+
+@define-mixin text-style-desktop {
+    &.headline-system-xlarge .title {
+        @mixin headline-system_xlarge;
+    }
+
+    &.headline-system-large .title {
+        @mixin headline-system_large;
+    }
+
+    &.headline-system-medium .title {
+        @mixin headline-system_medium;
+    }
+
+    &.headline-system-small .title {
+        @mixin headline-system_small;
+    }
+
+    &.headline-system-xsmall .title {
+        @mixin headline-system_xsmall;
+    }
+
+    &.headline-xlarge .title {
+        @mixin headline_xlarge;
+    }
+
+    &.headline-large .title {
+        @mixin headline_large;
+    }
+
+    &.headline-medium .title {
+        @mixin headline_medium;
+    }
+
+    &.headline-small .title {
+        @mixin headline_small;
+    }
+
+    &.headline-xsmall .title {
+        @mixin headline_xsmall;
+    }
+
+    &.headline-system-xlarge {
+        @mixin element_styles 52px;
+    }
+
+    &.headline-system-large,
+    &.headline-large {
+        @mixin element_styles 48px;
+    }
+
+    &.headline-system-medium {
+        @mixin element_styles 36px;
+    }
+
+    &.headline-system-small {
+        @mixin element_styles 26px;
+    }
+
+    &.headline-system-xsmall {
+        @mixin element_styles 22px;
+    }
+
+    &.headline-xlarge {
+        @mixin element_styles 64px;
+    }
+
+    &.headline-medium {
+        @mixin element_styles 40px;
+    }
+
+    &.headline-small {
+        @mixin element_styles 32px;
+    }
+
+    &.headline-xsmall {
+        @mixin element_styles 24px;
+    }
+}
+
+@define-mixin text-style-mobile {
+    &.headline-system-xlarge .title {
+        @mixin headline-system-mobile_xlarge;
+    }
+
+    &.headline-system-large .title {
+        @mixin headline-system-mobile_large;
+    }
+
+    &.headline-system-medium .title {
+        @mixin headline-system-mobile_medium;
+    }
+
+    &.headline-system-small .title {
+        @mixin headline-system-mobile_small;
+    }
+
+    &.headline-system-xsmall .title {
+        @mixin headline-system-mobile_xsmall;
+    }
+
+    &.headline-xlarge .title {
+        @mixin headline-mobile_xlarge;
+    }
+
+    &.headline-large .title {
+        @mixin headline-mobile_large;
+    }
+
+    &.headline-medium .title {
+        @mixin headline-mobile_medium;
+    }
+
+    &.headline-small .title {
+        @mixin headline-mobile_small;
+    }
+
+    &.headline-xsmall .title {
+        @mixin headline-mobile_xsmall;
+    }
+
+    &.headline-system-xlarge,
+    &.headline-xlarge {
+        @mixin element_styles 40px;
+    }
+
+    &.headline-system-large,
+    &.headline-large {
+        @mixin element_styles 36px;
+    }
+
+    &.headline-system-medium,
+    &.headline-medium {
+        @mixin element_styles 32px;
+    }
+
+    &.headline-system-small,
+    &.headline-small {
+        @mixin element_styles 28px;
+    }
+
+    &.headline-system-xsmall,
+    &.headline-xsmall {
+        @mixin element_styles 20px;
+    }
+}

package/src/components/scroll-controls/Component.tsx

@@ -3,8 +3,8 @@ import cn from 'classnames';
 import _debounce from 'lodash.debounce';
 
 import { IconButton } from '@alfalab/core-components-icon-button';
-import { ChevronLeftMIcon } from '@alfalab/icons-glyph/ChevronLeftMIcon';
-import { ChevronRightMIcon } from '@alfalab/icons-glyph/ChevronRightMIcon';
+import { ChevronLeftCompactSIcon } from '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
+import { ChevronRightCompactSIcon } from '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 
 import { TabsProps } from '../../typings';
 
@@ -13,13 +13,14 @@ import { getDisabledState, scrollIntoFirstTab, scrollIntoLastTab } from './utils
 import styles from './index.module.css';
 
 type ScrollControlsProps = {
+    className?: string;
     view: Exclude<TabsProps['view'], undefined>;
     size: TabsProps['size'];
     containerRef: RefObject<HTMLDivElement>;
 };
 
 export const ScrollControls = forwardRef<HTMLDivElement, ScrollControlsProps>(
-    ({ containerRef, view, size: sizeProp }, ref) => {
+    ({ containerRef, view, size: sizeProp, className }, ref) => {
         const container = containerRef.current;
         const [disabledState, updateDisabledState] = useState(() => getDisabledState(container));
 
@@ -56,19 +57,25 @@ export const ScrollControls = forwardRef<HTMLDivElement, ScrollControlsProps>(
         return (
             <div
                 ref={ref}
-                className={cn(styles.component, styles[view], sizeProp && styles[sizeProp], {
-                    [styles.borderVisible]: !disabledState.toRight,
-                })}
+                className={cn(
+                    styles.component,
+                    styles[view],
+                    sizeProp && styles[sizeProp],
+                    className,
+                    {
+                        [styles.borderVisible]: !disabledState.toRight,
+                    },
+                )}
             >
                 <IconButton
                     {...commonButtonProps}
-                    icon={ChevronLeftMIcon}
+                    icon={ChevronLeftCompactSIcon}
                     disabled={disabledState.toLeft}
                     onClick={handleScrollLeft}
                 />
                 <IconButton
                     {...commonButtonProps}
-                    icon={ChevronRightMIcon}
+                    icon={ChevronRightCompactSIcon}
                     disabled={disabledState.toRight}
                     onClick={handleScrollRight}
                 />

package/src/components/scroll-controls/index.module.css

@@ -5,21 +5,6 @@
     position: relative;
     display: flex;
     flex-shrink: 0;
-
-    &:before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1px;
-        background-color: transparent;
-        transition: background-color 0.3s ease;
-    }
-}
-
-.borderVisible:before {
-    background-color: var(--color-light-neutral-translucent-300);
 }
 
 .primary {
@@ -36,10 +21,6 @@
         background-color: var(--primary-tablist-bottom-border-color);
     }
 
-    &:before {
-        bottom: 2px;
-    }
-
     .button:first-child {
         padding-left: var(--gap-xs);
         margin-right: var(--gap-xs);
@@ -55,6 +36,14 @@
     justify-content: center;
 
     &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1px;
+        background-color: transparent;
+        transition: background-color 0.3s ease;
         bottom: 0;
     }
 
@@ -66,3 +55,7 @@
         }
     }
 }
+
+.borderVisible:before {
+    background-color: var(--color-light-neutral-translucent-300);
+}

package/src/components/scrollable-container/Component.tsx

@@ -23,6 +23,11 @@ export type ScrollableContainerProps = {
      */
     containerClassName?: string;
 
+    /**
+     * Дополнительный класс кнопок прокрутки
+     */
+    scrollControlsClassName?: string;
+
     /**
      * Дочерние компоненты
      */
@@ -56,6 +61,7 @@ const isOverflown = (
 export const ScrollableContainer = ({
     containerWrapperClassName,
     containerClassName,
+    scrollControlsClassName,
     children,
     activeChild,
     fullWidthScroll,
@@ -123,6 +129,7 @@ export const ScrollableContainer = ({
             </div>
             {overflown && platform === 'desktop' ? (
                 <ScrollControls
+                    className={scrollControlsClassName}
                     ref={controlsRef}
                     containerRef={containerRef}
                     view={view}