@alfalab/core-components-tabs 7.7.1 → 8.0.0

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

@@ -0,0 +1,132 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import cn from 'classnames';
+
+import { Badge } from '@alfalab/core-components-badge';
+import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';
+import {
+    PickerButtonDesktop,
+    PickerButtonDesktopProps,
+} from '@alfalab/core-components-picker-button/desktop';
+
+import { useTablistTitles } from '../../hooks/use-tablist-titles';
+import { createSyntheticMouseEvent } from '../../synthetic-events';
+import { Styles, TabListProps } from '../../typings';
+import { Title } from '../title';
+
+const DEFAULT_STYLES = {};
+
+export const CollapsiblePrimaryTabList = ({
+    size,
+    className,
+    containerClassName,
+    titles = [],
+    styles = DEFAULT_STYLES,
+    selectedId = titles.length ? titles[0].id : undefined,
+    collapsedTabsIds,
+    fullWidthScroll,
+    onChange,
+    dataTestId,
+    breakpoint = 768,
+    defaultMatchMediaValue,
+}: TabListProps & Styles) => {
+    const lineRef = useRef<HTMLDivElement>(null);
+
+    const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } =
+        useTablistTitles({
+            titles,
+            selectedId,
+            collapsedTabsIds,
+            breakpoint,
+            onChange,
+            defaultMatchMediaValue,
+        });
+
+    useEffect(() => {
+        if (selectedTab && lineRef.current) {
+            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
+            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
+        }
+    }, [selectedTab, tablistTitles]);
+
+    const collapsedOptions = useMemo(
+        () =>
+            tablistTitles.reduce<PickerButtonDesktopProps['options']>((options, title) => {
+                if (title.collapsed) {
+                    options.push({
+                        key: title.title,
+                        value: title.id,
+                        content: <Title {...title} styles={styles} isOption={true} />,
+                    });
+                }
+
+                return options;
+            }, []),
+        [tablistTitles, styles],
+    );
+
+    const collapsedAddonsLength = tablistTitles.filter(
+        (title) => title.collapsed && title.rightAddons,
+    ).length;
+
+    const handleOptionsChange = (
+        payload: Parameters<Required<PickerButtonDesktopProps>['onChange']>[0],
+    ) => {
+        if (payload.selected?.value && onChange) {
+            const nativeMouseEvent = new MouseEvent('change');
+            const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);
+
+            onChange(syntheticMouseEvent, { selectedId: payload.selected.value });
+        }
+    };
+
+    const renderContent = () => (
+        <div
+            role='tablist'
+            data-test-id={dataTestId}
+            className={cn(styles.component, className, size && styles[size], {
+                [styles.fullWidthScroll]: fullWidthScroll,
+            })}
+        >
+            {tablistTitles.map(({ dataTestId: _, ...restTitleProps }, index) => (
+                <KeyboardFocusable key={restTitleProps.id}>
+                    {(ref, focused) => (
+                        <Title
+                            {...getTabListItemProps(index, ref)}
+                            {...restTitleProps}
+                            focused={focused}
+                            styles={styles}
+                        />
+                    )}
+                </KeyboardFocusable>
+            ))}
+
+            {collapsedOptions.length ? (
+                <span ref={addonRef} role='menu' className={styles.pickerWrapper}>
+                    <PickerButtonDesktop
+                        fieldClassName={styles.title}
+                        optionClassName={cn(styles.pickerOption, size && styles[size])}
+                        options={collapsedOptions}
+                        onChange={handleOptionsChange}
+                        rightAddons={
+                            collapsedAddonsLength ? (
+                                <Badge view='count' content={collapsedAddonsLength} />
+                            ) : null
+                        }
+                        size='l'
+                        view='ghost'
+                        label='Ещё'
+                        popoverPosition='bottom-end'
+                    />
+                </span>
+            ) : null}
+
+            <div className={styles.line} ref={lineRef} />
+        </div>
+    );
+
+    return (
+        <div ref={containerRef} className={cn(styles.container, containerClassName)}>
+            {renderContent()}
+        </div>
+    );
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { TabListProps } from '../../typings';
+
+import { PrimaryTabList } from './Component';
+
+import styles from './index.module.css';
+
+export const PrimaryTabListDesktop = ({ size = 'm', ...restProps }: TabListProps) => (
+    <PrimaryTabList {...restProps} size={size} styles={styles} />
+);

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { TabListProps } from '../../typings';
+
+import { PrimaryTabList } from './Component';
+
+import commonStyles from './index.module.css';
+import mobileStyles from './mobile.module.css';
+
+const styles = {
+    ...commonStyles,
+    ...mobileStyles,
+};
+
+export type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
+
+export const PrimaryTabListMobile = ({ className, ...restProps }: PrimaryTabListMobileProps) => (
+    <PrimaryTabList {...restProps} styles={styles} className={cn(className, styles.mobile)} />
+);

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { useMatchMedia } from '@alfalab/core-components-mq';
+
+import { TabListProps } from '../../typings';
+
+import { PrimaryTabListDesktop } from './Component.desktop';
+import { PrimaryTabListMobile } from './Component.mobile';
+
+export const PrimaryTabListResponsive = ({
+    size,
+    breakpoint = 768,
+    fullWidthScroll,
+    defaultMatchMediaValue,
+    ...restProps
+}: TabListProps) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+
+    return isDesktop ? (
+        <PrimaryTabListDesktop
+            breakpoint={breakpoint}
+            size={size}
+            defaultMatchMediaValue={defaultMatchMediaValue}
+            {...restProps}
+        />
+    ) : (
+        <PrimaryTabListMobile
+            breakpoint={breakpoint}
+            defaultMatchMediaValue={defaultMatchMediaValue}
+            fullWidthScroll={fullWidthScroll}
+            {...restProps}
+        />
+    );
+};

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

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+import cn from 'classnames';
+
+import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';
+
+import { useTabs } from '../../hooks/use-tabs';
+import { Styles, TabListProps } from '../../typings';
+import { ScrollableContainer } from '../scrollable-container';
+import { Title } from '../title';
+
+export const PrimaryTabList = ({
+    size,
+    styles = {},
+    className,
+    containerClassName,
+    titles = [],
+    selectedId = titles.length ? titles[0].id : undefined,
+    scrollable = true,
+    fullWidthScroll,
+    onChange,
+    dataTestId,
+}: TabListProps & Styles) => {
+    const lineRef = useRef<HTMLDivElement>(null);
+
+    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
+        titles,
+        selectedId,
+        onChange,
+    });
+
+    useEffect(() => {
+        if (selectedTab && lineRef.current) {
+            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
+            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
+        }
+    }, [selectedTab]);
+
+    const renderContent = () => (
+        <div
+            role='tablist'
+            data-test-id={dataTestId}
+            className={cn(styles.component, className, size && styles[size], {
+                [styles.fullWidthScroll]: fullWidthScroll,
+            })}
+        >
+            {titles.map(({ dataTestId: _, ...restTitleProps }, index) => (
+                <KeyboardFocusable key={restTitleProps.id}>
+                    {(ref, focused) => (
+                        <Title
+                            {...getTabListItemProps(index, ref)}
+                            {...restTitleProps}
+                            focused={focused}
+                            styles={styles}
+                        />
+                    )}
+                </KeyboardFocusable>
+            ))}
+
+            <div className={styles.line} ref={lineRef} />
+        </div>
+    );
+
+    return scrollable ? (
+        <ScrollableContainer
+            activeChild={focusedTab || selectedTab}
+            containerClassName={containerClassName}
+            fullWidthScroll={fullWidthScroll}
+        >
+            {renderContent()}
+        </ScrollableContainer>
+    ) : (
+        <div className={cn(styles.container, containerClassName)}>{renderContent()}</div>
+    );
+};

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

@@ -0,0 +1,181 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.component {
+    position: relative;
+    display: inline-flex;
+    min-width: 100%;
+
+    &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 1px;
+        height: 1px;
+        width: 100%;
+        background-color: var(--primary-tablist-bottom-border-color);
+    }
+}
+
+.fullWidthScroll {
+    min-width: calc(100% - 2 * var(--gap-m));
+    margin: 0 var(--gap-m);
+}
+
+.container {
+    position: relative;
+    overflow: hidden;
+
+    /* focus-outline fix */
+    margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
+    padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs);
+}
+
+.title {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0;
+    cursor: pointer;
+    color: var(--primary-tablist-color);
+    font-feature-settings: var(--primary-tablist-font-feature-settings);
+    transition: color 0.2s ease;
+    border: 0;
+    background: none;
+    white-space: nowrap;
+    box-shadow: none;
+    user-select: none;
+    cursor: pointer;
+    outline: none;
+
+    &:not(.disabled):hover {
+        color: var(--primary-tablist-hover-color);
+    }
+}
+
+.focused {
+    @mixin focus-outline;
+}
+
+.collapsed {
+    order: 99;
+    visibility: collapse;
+}
+
+.selected {
+    cursor: default;
+    color: var(--primary-tablist-selected-color);
+}
+
+.disabled {
+    cursor: var(--disabled-cursor);
+    color: var(--primary-tablist-disabled-color);
+}
+
+.line {
+    position: absolute;
+    height: 3px;
+    bottom: 0;
+    left: 0;
+    background-color: var(--primary-tablist-line-color);
+    transition: transform 0.2s ease, width 0.2s ease;
+}
+
+/* sizes */
+
+.s,
+.xs,
+.xxs {
+    & .title {
+        padding: var(--primary-tablist-s-padding);
+        font-size: var(--primary-tablist-s-font-size);
+        font-weight: var(--primary-tablist-s-font-weight);
+        font-family: var(--primary-tablist-s-font-family);
+        line-height: 24px;
+    }
+
+    & .title + .title {
+        margin-left: var(--primary-tablist-s-gaps);
+    }
+
+    & .pickerWrapper {
+        margin-left: var(--primary-tablist-s-gaps);
+    }
+
+    & .option {
+        padding: 0;
+    }
+}
+
+.m {
+    & .title {
+        padding: var(--primary-tablist-m-padding);
+        font-size: var(--primary-tablist-m-font-size);
+        font-weight: var(--primary-tablist-m-font-weight);
+        font-family: var(--primary-tablist-m-font-family);
+        line-height: 24px;
+    }
+
+    & .title + .title {
+        margin-left: var(--primary-tablist-m-gaps);
+    }
+
+    & .pickerWrapper {
+        margin-left: var(--primary-tablist-m-gaps);
+    }
+
+    & .option {
+        padding: 0;
+    }
+}
+
+.l {
+    & .title {
+        padding: var(--primary-tablist-l-padding);
+        font-size: var(--primary-tablist-l-font-size);
+        font-weight: var(--primary-tablist-l-font-weight);
+        font-family: var(--primary-tablist-l-font-family);
+        line-height: 24px;
+    }
+
+    & .title + .title {
+        margin-left: var(--primary-tablist-l-gaps);
+    }
+
+    & .pickerWrapper {
+        margin-left: var(--primary-tablist-l-gaps);
+    }
+
+    & .option {
+        padding: 0;
+    }
+}
+
+.xl {
+    & .title {
+        padding: var(--primary-tablist-xl-padding);
+        font-size: var(--primary-tablist-xl-font-size);
+        font-weight: var(--primary-tablist-xl-font-weight);
+        font-family: var(--primary-tablist-xl-font-family);
+        line-height: 32px;
+    }
+
+    & .title + .title {
+        margin-left: var(--primary-tablist-xl-gaps);
+    }
+
+    & .pickerWrapper {
+        margin-left: var(--primary-tablist-xl-gaps);
+    }
+
+    & .option {
+        padding: 0;
+    }
+}
+
+.rightAddons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: var(--gap-xs);
+}

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

@@ -0,0 +1,20 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.title {
+    composes: title from 'index.module.css';
+}
+
+.mobile {
+    & .title {
+        padding: var(--primary-tablist-mobile-padding);
+        font-size: var(--primary-tablist-mobile-font-size);
+        font-weight: var(--primary-tablist-mobile-font-weight);
+        font-family: var(--primary-tablist-mobile-font-family);
+        line-height: var(--primary-tablist-mobile-line-height);
+
+        & + .title {
+            margin-left: var(--primary-tablist-mobile-gaps);
+        }
+    }
+}

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

@@ -0,0 +1,66 @@
+import React, { ReactNode, useEffect } from 'react';
+import cn from 'classnames';
+import computeScrollIntoView from 'compute-scroll-into-view';
+
+import { TabsProps } from '../../typings';
+
+import styles from './index.module.css';
+
+/**
+ * Дополнительная прокрутка при клике на не поместившийся таб
+ */
+const ADDITIONAL_SCROLLLEFT_VALUE = 40;
+
+export type ScrollableContainerProps = {
+    /**
+     * Дополнительный класс контейнера
+     */
+    containerClassName?: string;
+
+    /**
+     * Дочерние компоненты
+     */
+    children: ReactNode;
+
+    /**
+     * Активный элемент (всегда будет в видимой области)
+     */
+    activeChild: HTMLElement | null;
+};
+
+export const ScrollableContainer = ({
+    containerClassName,
+    children,
+    activeChild,
+    fullWidthScroll,
+}: ScrollableContainerProps & Pick<TabsProps, 'fullWidthScroll'>) => {
+    useEffect(() => {
+        if (activeChild) {
+            const actions = computeScrollIntoView(activeChild, {
+                scrollMode: 'if-needed',
+                block: 'nearest',
+                inline: 'nearest',
+            });
+
+            // TODO: animate?
+            actions.forEach(({ el, left }, index) => {
+                if (index === 0) return;
+                // eslint-disable-next-line no-param-reassign
+                el.scrollLeft =
+                    el.scrollLeft > left
+                        ? left - ADDITIONAL_SCROLLLEFT_VALUE
+                        : left + ADDITIONAL_SCROLLLEFT_VALUE;
+            });
+        }
+    }, [activeChild]);
+
+    return (
+        <div
+            className={cn(styles.container, containerClassName, {
+                [styles.fullWidthScroll]: fullWidthScroll,
+            })}
+        >
+            {children}
+        </div>
+    );
+};

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

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

package/src/components/scrollable-container/index.ts

@@ -0,0 +1 @@
+export * from './Component';

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

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { TagDesktop } from '@alfalab/core-components-tag/desktop';
+
+import { SecondaryTabListProps } from '../../typings';
+
+import { SecondaryTabList } from './Component';
+
+import commonStyles from './index.module.css';
+
+export type SecondaryTabListDesktopProps = Omit<SecondaryTabListProps, 'tagSize' | 'breakpoint'>;
+
+export const SecondaryTabListDesktop = ({
+    size = 's',
+    ...restProps
+}: SecondaryTabListDesktopProps) => (
+    <SecondaryTabList
+        {...restProps}
+        TagComponent={TagDesktop}
+        size={size}
+        styles={commonStyles}
+        tagSize={size}
+    />
+);

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { TagMobile } from '@alfalab/core-components-tag/mobile';
+
+import { SecondaryTabListProps } from '../../typings';
+
+import { SecondaryTabList } from './Component';
+
+import commonStyles from './index.module.css';
+import mobileStyles from './mobile.module.css';
+
+const styles = {
+    ...commonStyles,
+    ...mobileStyles,
+};
+
+export type SecondaryTabListMobileProps = Omit<SecondaryTabListProps, 'size' | 'tagSize'>;
+
+export const SecondaryTabListMobile = ({
+    className,
+    ...restProps
+}: SecondaryTabListMobileProps) => (
+    <SecondaryTabList
+        {...restProps}
+        TagComponent={TagMobile}
+        styles={styles}
+        className={cn(className, styles.mobile)}
+        tagSize='xs'
+    />
+);

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

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { useMatchMedia } from '@alfalab/core-components-mq';
+
+import { SecondaryTabListProps } from '../../typings';
+
+import { SecondaryTabListDesktop } from './Component.desktop';
+import { SecondaryTabListMobile } from './Component.mobile';
+
+export const SecondaryTabListResponsive = ({
+    size,
+    defaultMatchMediaValue,
+    fullWidthScroll,
+    breakpoint = 768,
+    ...restProps
+}: SecondaryTabListProps) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+
+    return isDesktop ? (
+        <SecondaryTabListDesktop size={size} {...restProps} />
+    ) : (
+        <SecondaryTabListMobile fullWidthScroll={fullWidthScroll} {...restProps} />
+    );
+};