@alfalab/core-components-tabs 8.0.8 → 8.1.1

package/modern/shared.js

@@ -4,6 +4,12 @@ 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 '@alfalab/core-components-shared/modern';
 import '@juggle/resize-observer';
 import '@alfalab/hooks';

package/modern/typings.d.ts

@@ -69,6 +69,14 @@ type TabsProps = {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Форма тега (для view secondary только)
+     */
+    tagShape?: TagProps['shape'];
+    /**
+     * Стиль тега (для view secondary только)
+     */
+    tagView?: TagProps['view'];
 };
 type TabProps = {
     /**
@@ -123,7 +131,7 @@ type TabListTitle = {
     collapsed?: boolean;
     dataTestId?: string;
 };
-type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
+type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView'> & {
     /**
      * Заголовки табов
      */
@@ -144,4 +152,7 @@ type Styles = {
         [key: string]: string;
     };
 };
-export { SelectedId, TabsProps, TabProps, TabListTitle, TabListProps, SecondaryTabListProps, UseTabsProps, Styles };
+type PlatformProps = {
+    platform: 'desktop' | 'mobile';
+};
+export { SelectedId, TabsProps, TabProps, TabListTitle, TabListProps, SecondaryTabListProps, UseTabsProps, Styles, PlatformProps };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-tabs",
-    "version": "8.0.8",
+    "version": "8.1.1",
     "description": "Tabs components",
     "keywords": [],
     "license": "MIT",
@@ -44,13 +44,16 @@
     "dependencies": {
         "@alfalab/core-components-keyboard-focusable": "^4.1.0",
         "@alfalab/core-components-tag": "^6.0.1",
-        "@alfalab/core-components-picker-button": "^11.1.3",
+        "@alfalab/core-components-picker-button": "^11.1.5",
         "@alfalab/core-components-badge": "^5.2.0",
         "@alfalab/core-components-mq": "^4.2.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/core-components-shared": "^0.4.0",
+        "@alfalab/core-components-icon-button": "^6.2.3",
+        "@alfalab/icons-glyph": "^2.108.0",
         "classnames": "^2.3.1",
         "compute-scroll-into-view": "^1.0.20",
+        "lodash.debounce": "^4.0.8",
         "@juggle/resize-observer": "^3.3.1",
         "tslib": "^2.4.0"
     },

package/shared.js

@@ -8,8 +8,14 @@ var hooks_useCollapsibleElements = require('./hooks/use-collapsible-elements.js'
 require('react');
 require('classnames');
 require('compute-scroll-into-view');
-require('@alfalab/core-components-shared');
+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('@alfalab/core-components-shared');
 require('@juggle/resize-observer');
 require('@alfalab/hooks');
 

package/src/collapsible.ts

@@ -1,10 +1,2 @@
-export {
-    TabsCollapsibleResponsive as TabsCollapsible,
-    TabsCollapsibleResponsiveProps as TabsCollapsibleProps,
-} from './components/tabs/Component.collapsible.responsive';
-export * from './components/tabs/Component.collabsible.desktop';
-export * from './components/tabs/Component.collapsible.mobile';
-export * from './components/primary-tablist/Component.collapsible.responsive';
-export * from './components/primary-tablist/Component.collapsible.desktop';
-export * from './components/primary-tablist/Component.collapsible.mobile';
+export { TabsCollapsible, TabsCollapsibleProps } from './components/tabs/Component.collapsible';
 export * from './components/tab';

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

@@ -10,17 +10,16 @@ import {
 
 import { useTablistTitles } from '../../hooks/use-tablist-titles';
 import { createSyntheticMouseEvent } from '../../synthetic-events';
-import { Styles, TabListProps } from '../../typings';
+import { TabListProps } from '../../typings';
 import { Title } from '../title';
 
-const DEFAULT_STYLES = {};
+import styles from './index.module.css';
 
 export const CollapsiblePrimaryTabList = ({
-    size,
+    size = 'm',
     className,
     containerClassName,
     titles = [],
-    styles = DEFAULT_STYLES,
     selectedId = titles.length ? titles[0].id : undefined,
     collapsedTabsIds,
     fullWidthScroll,
@@ -28,7 +27,7 @@ export const CollapsiblePrimaryTabList = ({
     dataTestId,
     breakpoint = 1024,
     defaultMatchMediaValue,
-}: TabListProps & Styles) => {
+}: TabListProps) => {
     const lineRef = useRef<HTMLDivElement>(null);
 
     const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } =
@@ -61,7 +60,7 @@ export const CollapsiblePrimaryTabList = ({
 
                 return options;
             }, []),
-        [tablistTitles, styles],
+        [tablistTitles],
     );
 
     const collapsedAddonsLength = tablistTitles.filter(
@@ -112,7 +111,7 @@ export const CollapsiblePrimaryTabList = ({
                                 <Badge view='count' content={collapsedAddonsLength} />
                             ) : null
                         }
-                        size='l'
+                        size='m'
                         view='ghost'
                         label='Ещё'
                         popoverPosition='bottom-end'

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

@@ -7,5 +7,5 @@ import { PrimaryTabList } from './Component';
 import styles from './index.module.css';
 
 export const PrimaryTabListDesktop = ({ size = 'm', ...restProps }: TabListProps) => (
-    <PrimaryTabList {...restProps} size={size} styles={styles} />
+    <PrimaryTabList {...restProps} size={size} styles={styles} platform='desktop' />
 );

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

@@ -16,5 +16,10 @@ const styles = {
 export type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
 
 export const PrimaryTabListMobile = ({ className, ...restProps }: PrimaryTabListMobileProps) => (
-    <PrimaryTabList {...restProps} styles={styles} className={cn(className, styles.mobile)} />
+    <PrimaryTabList
+        {...restProps}
+        styles={styles}
+        className={cn(className, styles.mobile)}
+        platform='mobile'
+    />
 );

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

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';
 
 import { useTabs } from '../../hooks/use-tabs';
-import { Styles, TabListProps } from '../../typings';
+import { PlatformProps, Styles, TabListProps } from '../../typings';
 import { ScrollableContainer } from '../scrollable-container';
 import { Title } from '../title';
 
@@ -19,7 +19,8 @@ export const PrimaryTabList = ({
     fullWidthScroll,
     onChange,
     dataTestId,
-}: TabListProps & Styles) => {
+    platform,
+}: TabListProps & Styles & PlatformProps) => {
     const lineRef = useRef<HTMLDivElement>(null);
 
     const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
@@ -65,6 +66,9 @@ export const PrimaryTabList = ({
             activeChild={focusedTab || selectedTab}
             containerClassName={containerClassName}
             fullWidthScroll={fullWidthScroll}
+            view='primary'
+            size={size}
+            platform={platform}
         >
             {renderContent()}
         </ScrollableContainer>

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

@@ -81,6 +81,10 @@
     transition: transform 0.2s ease, width 0.2s ease;
 }
 
+.option {
+    color: var(--color-light-text-primary);
+}
+
 /* sizes */
 
 .s,

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

@@ -0,0 +1,78 @@
+import React, { forwardRef, RefObject, useEffect, useState } from 'react';
+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 { TabsProps } from '../../typings';
+
+import { getDisabledState, scrollIntoFirstTab, scrollIntoLastTab } from './utils';
+
+import styles from './index.module.css';
+
+type ScrollControlsProps = {
+    view: Exclude<TabsProps['view'], undefined>;
+    size: TabsProps['size'];
+    containerRef: RefObject<HTMLDivElement>;
+};
+
+export const ScrollControls = forwardRef<HTMLDivElement, ScrollControlsProps>(
+    ({ containerRef, view, size: sizeProp }, ref) => {
+        const container = containerRef.current;
+        const [disabledState, updateDisabledState] = useState(() => getDisabledState(container));
+
+        useEffect(() => {
+            const handleScroll = _debounce(
+                () => updateDisabledState(getDisabledState(container)),
+                100,
+                { leading: true, maxWait: 100, trailing: true },
+            );
+
+            container?.addEventListener('scroll', handleScroll);
+
+            return () => container?.removeEventListener('scroll', handleScroll);
+        }, [container]);
+
+        const getSize = () => {
+            if (view === 'primary') {
+                return sizeProp === 'xl' ? 'xs' : 'xxs';
+            }
+
+            return sizeProp && ['s', 'm', 'l', 'xl'].includes(sizeProp) ? 's' : 'xs';
+        };
+
+        const handleScrollLeft = () => scrollIntoFirstTab(container);
+
+        const handleScrollRight = () => scrollIntoLastTab(container);
+
+        const commonButtonProps = {
+            className: styles.button,
+            size: getSize(),
+            view: 'secondary',
+        } as const;
+
+        return (
+            <div
+                ref={ref}
+                className={cn(styles.component, styles[view], sizeProp && styles[sizeProp], {
+                    [styles.borderVisible]: !disabledState.toRight,
+                })}
+            >
+                <IconButton
+                    {...commonButtonProps}
+                    icon={ChevronLeftMIcon}
+                    disabled={disabledState.toLeft}
+                    onClick={handleScrollLeft}
+                />
+                <IconButton
+                    {...commonButtonProps}
+                    icon={ChevronRightMIcon}
+                    disabled={disabledState.toRight}
+                    onClick={handleScrollRight}
+                />
+            </div>
+        );
+    },
+);

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

@@ -0,0 +1,68 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.component {
+    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-specialbg-tertiary-transparent);
+}
+
+.primary {
+    align-items: flex-start;
+    justify-content: flex-end;
+
+    &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 1px;
+        height: 1px;
+        width: 100%;
+        background-color: var(--primary-tablist-bottom-border-color);
+    }
+
+    &:before {
+        bottom: 2px;
+    }
+
+    .button:first-child {
+        padding-left: var(--gap-xs);
+        margin-right: var(--gap-xs);
+    }
+
+    &.xl .button:first-child {
+        margin-right: var(--gap-2xs);
+    }
+}
+
+.secondary {
+    align-items: center;
+    justify-content: center;
+
+    &:before {
+        bottom: 0;
+    }
+
+    &.xs {
+        width: 76px;
+
+        .button:first-child {
+            margin-right: var(--gap-2xs);
+        }
+    }
+}

package/src/components/scroll-controls/index.ts

@@ -0,0 +1 @@
+export { ScrollControls } from './Component';

package/src/components/scroll-controls/utils.ts

@@ -0,0 +1,60 @@
+const ADDITIONAL_OFFSET = 15;
+
+function getTabs(container: HTMLDivElement) {
+    return Array.from(container.querySelectorAll('button[role="tab"]')) as HTMLButtonElement[];
+}
+
+function findLastVisibleTab(container: HTMLDivElement) {
+    const tabs = getTabs(container);
+
+    return tabs.reduce((res, tab) => {
+        if (tab.offsetLeft + ADDITIONAL_OFFSET < container.clientWidth + container.scrollLeft) {
+            return tab;
+        }
+
+        return res;
+    }, tabs[0]);
+}
+
+function findFirstVisibleTab(container: HTMLDivElement) {
+    const tabs = getTabs(container);
+
+    return tabs.reduceRight((res, tab) => {
+        if (tab.offsetLeft + tab.clientWidth > container.scrollLeft + ADDITIONAL_OFFSET) {
+            return tab;
+        }
+
+        return res;
+    }, tabs[tabs.length - 1]);
+}
+
+export function scrollIntoLastTab(container: HTMLDivElement | null) {
+    if (!container) return;
+
+    findLastVisibleTab(container).scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start',
+    });
+}
+
+export function scrollIntoFirstTab(container: HTMLDivElement | null) {
+    if (!container) return;
+
+    findFirstVisibleTab(container).scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'end',
+    });
+}
+
+export function getDisabledState(container: HTMLDivElement | null) {
+    if (!container) return { toLeft: false, toRight: false };
+    const scrollOffset = 2;
+
+    const toLeft = container.scrollLeft <= scrollOffset;
+    const toRight =
+        container.scrollLeft + container.clientWidth >= container.scrollWidth - scrollOffset;
+
+    return { toLeft, toRight };
+}

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

@@ -1,17 +1,23 @@
-import React, { ReactNode, useEffect } from 'react';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import cn from 'classnames';
 import computeScrollIntoView from 'compute-scroll-into-view';
 
-import { TabsProps } from '../../typings';
+import { PlatformProps, TabsProps } from '../../typings';
+import { ScrollControls } from '../scroll-controls';
 
 import styles from './index.module.css';
 
 /**
  * Дополнительная прокрутка при клике на не поместившийся таб
  */
-const ADDITIONAL_SCROLLLEFT_VALUE = 40;
+const ADDITIONAL_SCROLL_LEFT_VALUE = 50;
 
 export type ScrollableContainerProps = {
+    /**
+     * Дополнительный класс враппера контейнера
+     */
+    containerWrapperClassName?: string;
+
     /**
      * Дополнительный класс контейнера
      */
@@ -26,20 +32,48 @@ export type ScrollableContainerProps = {
      * Активный элемент (всегда будет в видимой области)
      */
     activeChild: HTMLElement | null;
+
+    /**
+     * Внешний вид заголовков табов
+     */
+    view: Exclude<TabsProps['view'], undefined>;
+
+    /**
+     *  Размер
+     */
+    size: TabsProps['size'];
+};
+
+const isOverflown = (
+    { clientWidth, scrollWidth }: HTMLDivElement,
+    controlsNode: HTMLDivElement | null,
+) => {
+    const controlsWidth = controlsNode?.offsetWidth || 0;
+
+    return scrollWidth > clientWidth + controlsWidth;
 };
 
 export const ScrollableContainer = ({
+    containerWrapperClassName,
     containerClassName,
     children,
     activeChild,
     fullWidthScroll,
-}: ScrollableContainerProps & Pick<TabsProps, 'fullWidthScroll'>) => {
+    view,
+    size,
+    platform,
+}: ScrollableContainerProps & Pick<TabsProps, 'fullWidthScroll'> & PlatformProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const controlsRef = useRef<HTMLDivElement>(null);
+    const [overflown, setOverflown] = useState(false);
+
     useEffect(() => {
         if (activeChild) {
             const actions = computeScrollIntoView(activeChild, {
                 scrollMode: 'if-needed',
                 block: 'nearest',
                 inline: 'nearest',
+                boundary: (parent) => !parent.isSameNode(containerRef.current),
             });
 
             // TODO: animate?
@@ -47,19 +81,54 @@ export const ScrollableContainer = ({
                 // eslint-disable-next-line no-param-reassign
                 el.scrollLeft =
                     el.scrollLeft > left
-                        ? left - ADDITIONAL_SCROLLLEFT_VALUE
-                        : left + ADDITIONAL_SCROLLLEFT_VALUE;
+                        ? left - ADDITIONAL_SCROLL_LEFT_VALUE
+                        : left + ADDITIONAL_SCROLL_LEFT_VALUE;
             });
         }
     }, [activeChild]);
 
+    useEffect(() => {
+        const scrollableNode = containerRef.current;
+        const tabsContainer = scrollableNode?.firstElementChild;
+
+        if (platform === 'desktop' && scrollableNode && tabsContainer && window.ResizeObserver) {
+            const observerCb = () => {
+                if (isOverflown(scrollableNode, controlsRef.current)) {
+                    setOverflown(true);
+                } else {
+                    setOverflown(false);
+                }
+            };
+
+            const observer = new ResizeObserver(observerCb);
+
+            observer.observe(scrollableNode);
+            observer.observe(tabsContainer);
+
+            return () => observer.disconnect();
+        }
+
+        return () => {};
+    }, [platform]);
+
     return (
-        <div
-            className={cn(styles.container, containerClassName, {
-                [styles.fullWidthScroll]: fullWidthScroll,
-            })}
-        >
-            {children}
+        <div className={cn(styles.scrollableContainerWrapper, containerWrapperClassName)}>
+            <div
+                ref={containerRef}
+                className={cn(styles.container, containerClassName, {
+                    [styles.fullWidthScroll]: fullWidthScroll,
+                })}
+            >
+                {children}
+            </div>
+            {overflown && platform === 'desktop' ? (
+                <ScrollControls
+                    ref={controlsRef}
+                    containerRef={containerRef}
+                    view={view}
+                    size={size}
+                />
+            ) : null}
         </div>
     );
 };

package/src/components/scrollable-container/index.module.css

@@ -1,12 +1,17 @@
 @import '@alfalab/core-components-themes/src/default.css';
 @import '../../vars.css';
 
+.scrollableContainerWrapper {
+    display: flex;
+}
+
 .container {
     position: relative;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-behavior: smooth;
     scrollbar-width: none;
+    flex: 1;
 
     /* focus-outline fix */
     margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
@@ -22,5 +27,6 @@
 }
 
 .fullWidthScroll {
-    margin: 0 var(--gap-m-neg);
+    padding-left: 0;
+    margin: var(--gap-2xs-neg) var(--gap-m-neg);
 }

package/src/components/secondary-tablist/Component.desktop.tsx

@@ -20,5 +20,6 @@ export const SecondaryTabListDesktop = ({
         size={size}
         styles={commonStyles}
         tagSize={size}
+        platform='desktop'
     />
 );

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

@@ -15,10 +15,11 @@ const styles = {
     ...mobileStyles,
 };
 
-export type SecondaryTabListMobileProps = Omit<SecondaryTabListProps, 'size' | 'tagSize'>;
+export type SecondaryTabListMobileProps = Omit<SecondaryTabListProps, 'tagSize'>;
 
 export const SecondaryTabListMobile = ({
     className,
+    size,
     ...restProps
 }: SecondaryTabListMobileProps) => (
     <SecondaryTabList
@@ -26,6 +27,7 @@ export const SecondaryTabListMobile = ({
         TagComponent={TagMobile}
         styles={styles}
         className={cn(className, styles.mobile)}
-        tagSize='xs'
+        tagSize={size}
+        platform='mobile'
     />
 );

package/src/components/secondary-tablist/Component.responsive.tsx

@@ -8,7 +8,6 @@ import { SecondaryTabListDesktop } from './Component.desktop';
 import { SecondaryTabListMobile } from './Component.mobile';
 
 export const SecondaryTabListResponsive = ({
-    size,
     defaultMatchMediaValue,
     fullWidthScroll,
     breakpoint = 1024,
@@ -17,7 +16,7 @@ export const SecondaryTabListResponsive = ({
     const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
 
     return isDesktop ? (
-        <SecondaryTabListDesktop size={size} {...restProps} />
+        <SecondaryTabListDesktop {...restProps} />
     ) : (
         <SecondaryTabListMobile fullWidthScroll={fullWidthScroll} {...restProps} />
     );

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

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 
 import { useTabs } from '../../hooks/use-tabs';
-import { SecondaryTabListProps, Styles } from '../../typings';
+import { PlatformProps, SecondaryTabListProps, Styles } from '../../typings';
 import { ScrollableContainer } from '../scrollable-container';
 
 export const SecondaryTabList = ({
@@ -18,7 +18,10 @@ export const SecondaryTabList = ({
     onChange,
     dataTestId,
     TagComponent,
-}: SecondaryTabListProps & Styles) => {
+    platform,
+    tagShape,
+    tagView,
+}: SecondaryTabListProps & Styles & PlatformProps) => {
     const { focusedTab, selectedTab, getTabListItemProps } = useTabs({
         titles,
         selectedId,
@@ -42,6 +45,8 @@ export const SecondaryTabList = ({
                     return (
                         <TagComponent
                             {...getTabListItemProps(index)}
+                            shape={tagShape}
+                            view={tagView}
                             key={item.id}
                             className={cn(styles.title, item.toggleClassName)}
                             checked={item.id === selectedId}
@@ -61,6 +66,9 @@ export const SecondaryTabList = ({
             activeChild={focusedTab || selectedTab}
             containerClassName={containerClassName}
             fullWidthScroll={fullWidthScroll}
+            view='secondary'
+            size={size}
+            platform={platform}
         >
             {renderContent()}
         </ScrollableContainer>