feat(tabs): added controls to scrollable container

.changeset/lazy-avocados-mate.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-tabs': minor
+---
+
+Добавлены контролы в scrollable контейнер десктопных табов

packages/tabs/package.json

@@ -45,12 +45,15 @@
         "@alfalab/core-components-keyboard-focusable": "^4.1.0",
         "@alfalab/core-components-tag": "^6.0.1",
         "@alfalab/core-components-picker-button": "^11.1.1",
+        "@alfalab/core-components-icon-button": "^6.2.3",
         "@alfalab/core-components-badge": "^5.2.0",
         "@alfalab/core-components-mq": "^4.2.0",
-        "@alfalab/hooks": "^1.13.0",
         "@alfalab/core-components-shared": "^0.3.0",
+        "@alfalab/hooks": "^1.13.0",
+        "@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"
     },

packages/tabs/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';

packages/tabs/src/components/primary-tablist/Component.collapsible.tsx

@@ -10,25 +10,24 @@ 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,
     onChange,
     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'

packages/tabs/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' />
 );

packages/tabs/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'
+    />
 );

packages/tabs/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>

packages/tabs/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,

packages/tabs/src/components/scroll-controls/Component.tsx

@@ -0,0 +1,74 @@
+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));
+            }, 150);
+
+            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])}
+            >
+                <IconButton
+                    {...commonButtonProps}
+                    icon={ChevronLeftMIcon}
+                    disabled={disabledState.toLeft}
+                    onClick={handleScrollLeft}
+                />
+                <IconButton
+                    {...commonButtonProps}
+                    icon={ChevronRightMIcon}
+                    disabled={disabledState.toRight}
+                    onClick={handleScrollRight}
+                />
+            </div>
+        );
+    },
+);

packages/tabs/src/components/scroll-controls/index.module.css

@@ -0,0 +1,45 @@
+@import '../../../../themes/src/default.css';
+@import '../../vars.css';
+
+.component {
+    display: flex;
+    flex-shrink: 0;
+}
+
+.primary {
+    position: relative;
+    width: 72px;
+    align-items: flex-start;
+    justify-content: flex-end;
+
+    &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 1px;
+        height: 1px;
+        width: 100%;
+        background-color: var(--primary-tablist-bottom-border-color);
+    }
+
+    .button:first-child {
+        margin-right: var(--gap-xs);
+    }
+
+    &.xl .button:first-child {
+        margin-right: var(--gap-2xs);
+    }
+}
+
+.secondary {
+    align-items: center;
+    justify-content: center;
+
+    &.xs {
+        width: 76px;
+
+        .button:first-child {
+            margin-right: var(--gap-2xs);
+        }
+    }
+}

packages/tabs/src/components/scroll-controls/index.ts

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