@alfalab/core-components-tabs 7.7.2 → 8.0.1

package/src/hooks/use-tabs.tsx

@@ -0,0 +1,129 @@
+import { KeyboardEvent, MouseEvent, MutableRefObject, useCallback, useRef, useState } from 'react';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { TabListTitle, UseTabsProps } from '../typings';
+
+export function useTabs({ titles = [], selectedId, onChange }: UseTabsProps) {
+    const [selectedTab, setSelectedTab] = useState<HTMLButtonElement | null>(null);
+    const [focusedTab, setFocusedTab] = useState<HTMLButtonElement | null>(null);
+    const itemRefs = useRef<HTMLButtonElement[]>([]);
+
+    const handleItemRef = useCallback(
+        (node: HTMLButtonElement, item: TabListTitle, index: number) => {
+            if (node && item.id === selectedId) setSelectedTab(node);
+            itemRefs.current[index] = node;
+        },
+        [selectedId],
+    );
+
+    const handleItemClick = useCallback(
+        (event: MouseEvent, item: TabListTitle) => {
+            if (onChange && item.id !== selectedId) {
+                onChange(event, { selectedId: item.id });
+            }
+        },
+        [onChange, selectedId],
+    );
+
+    const focusTab = useCallback(
+        (position: 'prev' | 'next' | 'start' | 'end') => {
+            const refs = itemRefs.current;
+
+            const tabAvailable = (ref: HTMLButtonElement) => ref && !ref.disabled;
+
+            if (refs.every((ref) => !tabAvailable(ref))) return;
+
+            let focusedTabIndex = refs.findIndex((node) => document.activeElement === node);
+
+            if (focusedTabIndex === -1) {
+                focusedTabIndex = refs.findIndex((node) => node === selectedTab);
+            }
+
+            let newFocusIndex;
+
+            switch (position) {
+                case 'prev':
+                    newFocusIndex = focusedTabIndex === 0 ? refs.length - 1 : focusedTabIndex - 1;
+                    break;
+                case 'next':
+                    newFocusIndex = focusedTabIndex === refs.length - 1 ? 0 : focusedTabIndex + 1;
+                    break;
+                case 'start':
+                    newFocusIndex = 0;
+                    break;
+                case 'end':
+                    newFocusIndex = refs.length - 1;
+                    break;
+            }
+
+            const shift = ['prev', 'end'].includes(position) ? -1 : 1;
+
+            while (!tabAvailable(refs[newFocusIndex])) {
+                newFocusIndex = (refs.length + newFocusIndex + shift) % refs.length;
+            }
+
+            refs[newFocusIndex].focus();
+
+            setFocusedTab(refs[newFocusIndex]);
+        },
+        [selectedTab, itemRefs],
+    );
+
+    const handleKeyDown = useCallback(
+        (event: KeyboardEvent<HTMLButtonElement>) => {
+            switch (event.key) {
+                case 'ArrowLeft':
+                    focusTab('prev');
+
+                    event.preventDefault();
+                    break;
+                case 'ArrowRight':
+                    focusTab('next');
+
+                    event.preventDefault();
+                    break;
+                case 'Home':
+                    focusTab('start');
+
+                    event.preventDefault();
+                    break;
+                case 'End':
+                    focusTab('end');
+
+                    event.preventDefault();
+                    break;
+                default:
+                    break;
+            }
+        },
+        [focusTab],
+    );
+
+    const getTabListItemProps = (index: number, outerRef?: MutableRefObject<HTMLElement>) => {
+        const item = titles[index];
+        const itemSelected = item.id === selectedId;
+
+        return {
+            role: 'tab',
+            tabIndex: itemSelected ? 0 : -1,
+            'aria-selected': itemSelected,
+            selected: itemSelected,
+            'data-test-id': getDataTestId(item.dataTestId, 'toggle'),
+            disabled: item.disabled,
+            ref: (node: HTMLButtonElement) => {
+                // eslint-disable-next-line no-param-reassign
+                if (outerRef) outerRef.current = node;
+                handleItemRef(node, item, index);
+            },
+            onKeyDown: handleKeyDown,
+            onClick: (event?: MouseEvent) => handleItemClick(event as MouseEvent, item),
+        };
+    };
+
+    return {
+        getTabListItemProps,
+        selectedTab,
+        focusedTab,
+    };
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './components/primary-tablist/Component.responsive';
+export * from './components/secondary-tablist/Component.responsive';
+export * from './components/tab';
+export {
+    TabsResponsive as Tabs,
+    TabsResponsiveProps as TabsProps,
+} from './components/tabs/Component.responsive';

package/src/mobile.ts

@@ -0,0 +1,4 @@
+export * from './components/primary-tablist/Component.mobile';
+export * from './components/secondary-tablist/Component.mobile';
+export * from './components/tab';
+export * from './components/tabs/Component.mobile';

package/src/shared.ts

@@ -0,0 +1,4 @@
+export * from './components/scrollable-container';
+export * from './hooks/use-tabs';
+export * from './hooks/use-collapsible-elements';
+export * from './typings';

package/src/synthetic-events.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+
+export const createSyntheticEvent = <T extends Element, E extends Event>(
+    event: E,
+): React.SyntheticEvent<T, E> => {
+    let isDefaultPrevented = false;
+    let isPropagationStopped = false;
+    const preventDefault = () => {
+        isDefaultPrevented = true;
+        event.preventDefault();
+    };
+    const stopPropagation = () => {
+        isPropagationStopped = true;
+        event.stopPropagation();
+    };
+
+    return {
+        nativeEvent: event,
+        currentTarget: event.currentTarget as EventTarget & T,
+        target: event.target as EventTarget & T,
+        bubbles: event.bubbles,
+        cancelable: event.cancelable,
+        defaultPrevented: event.defaultPrevented,
+        eventPhase: event.eventPhase,
+        isTrusted: event.isTrusted,
+        preventDefault,
+        isDefaultPrevented: () => isDefaultPrevented,
+        stopPropagation,
+        isPropagationStopped: () => isPropagationStopped,
+        persist: () => {},
+        timeStamp: event.timeStamp,
+        type: event.type,
+    };
+};
+
+export const createUIEvent = <T extends Element, E extends Event>(
+    event: E,
+): React.UIEvent<T, E> => ({
+    ...createSyntheticEvent(event),
+    detail: 0,
+    view: {
+        styleMedia: {
+            type: '',
+            matchMedium: () => false,
+        },
+        document,
+    },
+});
+
+export const createSyntheticMouseEvent = <T extends Element>(
+    event: MouseEvent,
+): React.MouseEvent<T, MouseEvent> => ({
+    ...createUIEvent<T, MouseEvent>(event),
+    altKey: event.altKey,
+    button: event.button,
+    buttons: event.buttons,
+    clientX: event.clientX,
+    clientY: event.clientY,
+    ctrlKey: event.ctrlKey,
+    getModifierState: event.getModifierState,
+    metaKey: event.metaKey,
+    movementX: event.movementX,
+    movementY: event.movementY,
+    pageX: event.pageX,
+    pageY: event.pageY,
+    relatedTarget: event.relatedTarget,
+    screenX: event.screenX,
+    screenY: event.screenY,
+    shiftKey: event.shiftKey,
+});

package/src/typings.ts

@@ -0,0 +1,187 @@
+import { FC, MouseEvent, ReactElement, ReactNode } from 'react';
+
+import { TagProps } from '@alfalab/core-components-tag';
+
+export type SelectedId = string | number;
+
+export type TabsProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Дополнительный класс контейнера
+     */
+    containerClassName?: string;
+
+    /**
+     * Id активного таба
+     */
+    selectedId?: SelectedId;
+
+    /**
+     * Рендерить неактивные табы
+     */
+    keepMounted?: boolean;
+
+    /**
+     * Внешний вид заголовков табов
+     */
+    view?: 'primary' | 'secondary';
+
+    /**
+     * Высота заголовков табов
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+
+    /**
+     * Мобильный вид
+     */
+    mobile?: boolean;
+
+    /**
+     * Рендерить заголовки табов в контейнере со скроллом
+     */
+    scrollable?: boolean;
+
+    /**
+     * Список табов, для контроля переноса вкладок в PickerButton
+     */
+    collapsedTabsIds?: string[];
+
+    /**
+     * При скроле табы будут уходить в край экрана
+     */
+    fullWidthScroll?: boolean;
+
+    /**
+     * Компоненты табов
+     */
+    children: Array<ReactElement<TabProps>>;
+
+    /**
+     * Компонент заголовков табов
+     */
+    TabList: FC<TabListProps>;
+
+    /**
+     * Обработчик переключения табов
+     */
+    onChange?: (event: MouseEvent, payload: { selectedId: SelectedId }) => void;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+
+    /**
+     * Контрольная точка для тега, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+
+export type TabProps = {
+    /**
+     * Id таба
+     */
+    id: SelectedId;
+
+    /**
+     * Заголовок таба
+     */
+    title: string;
+
+    /**
+     * Дополнительный класс для контейнера содержимого таба
+     */
+    className?: string;
+
+    /**
+     * Дополнительный класс для кнопки таба
+     */
+    toggleClassName?: string;
+
+    /**
+     * Блокирует таб
+     */
+    disabled?: boolean;
+
+    /**
+     * Управление видимостью таба
+     */
+    hidden?: boolean;
+
+    /**
+     * Рендерить таб, если он неактивен
+     */
+    keepMounted?: boolean;
+
+    /**
+     * Контент таба
+     */
+    children?: ReactNode;
+
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export type TabListTitle = {
+    title: string;
+    id: SelectedId;
+    disabled?: boolean;
+    rightAddons?: ReactNode;
+    hidden?: boolean;
+    toggleClassName?: string;
+    selected?: boolean;
+    collapsed?: boolean;
+    dataTestId?: string;
+};
+
+export type TabListProps = Pick<
+    TabsProps,
+    | 'className'
+    | 'containerClassName'
+    | 'size'
+    | 'defaultMatchMediaValue'
+    | 'selectedId'
+    | 'scrollable'
+    | 'collapsedTabsIds'
+    | 'onChange'
+    | 'dataTestId'
+    | 'fullWidthScroll'
+> & {
+    /**
+     * Заголовки табов
+     */
+    titles?: TabListTitle[];
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+
+export type SecondaryTabListProps = TabListProps & {
+    tagSize?: TagProps['size'];
+    TagComponent?: FC<Omit<TagProps, 'breakpoint'>>;
+};
+
+export type UseTabsProps = TabListProps;
+
+export type Styles = {
+    styles?: { [key: string]: string };
+};

package/src/vars.css

@@ -0,0 +1,68 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+:root {
+    --primary-tablist-color: var(--color-light-text-secondary);
+    --primary-tablist-hover-color: var(--color-light-text-primary);
+    --primary-tablist-selected-color: var(--color-light-text-primary);
+    --primary-tablist-disabled-color: var(--color-light-text-tertiary);
+    --primary-tablist-bottom-border-color: var(--color-light-border-primary);
+    --primary-tablist-line-color: var(--color-light-border-accent);
+    --primary-tablist-font-feature-settings: normal;
+
+    /* mobile */
+    --primary-tablist-mobile-gaps: var(--gap-xl);
+    --primary-tablist-mobile-font-size: 16px;
+    --primary-tablist-mobile-line-height: 24px;
+    --primary-tablist-mobile-font-weight: 400;
+    --primary-tablist-mobile-font-family: var(--font-family-system);
+    --primary-tablist-mobile-padding: 0 0 var(--gap-s);
+
+    /* size s */
+    --primary-tablist-s-gaps: var(--gap-2xl);
+    --primary-tablist-s-font-size: 18px;
+    --primary-tablist-s-font-weight: 400;
+    --primary-tablist-s-font-family: var(--font-family-system);
+    --primary-tablist-s-padding: 0 0 var(--gap-s);
+
+    /* size m */
+    --primary-tablist-m-gaps: var(--gap-2xl);
+    --primary-tablist-m-font-size: 18px;
+    --primary-tablist-m-font-weight: 400;
+    --primary-tablist-m-font-family: var(--font-family-system);
+    --primary-tablist-m-padding: 0 0 var(--gap-m);
+
+    /* size l */
+    --primary-tablist-l-gaps: var(--gap-2xl);
+    --primary-tablist-l-font-size: 18px;
+    --primary-tablist-l-font-weight: 400;
+    --primary-tablist-l-font-family: var(--font-family-system);
+    --primary-tablist-l-padding: 0 0 var(--gap-l);
+
+    /* size xl */
+    --primary-tablist-xl-gaps: var(--gap-2xl);
+    --primary-tablist-xl-font-size: 18px;
+    --primary-tablist-xl-font-weight: 400;
+    --primary-tablist-xl-font-family: var(--font-family-system);
+    --primary-tablist-xl-padding: 0 0 var(--gap-l);
+
+    /* mobile */
+    --secondary-tablist-mobile-gaps: var(--gap-xs);
+
+    /* size xxs */
+    --secondary-tablist-xxs-gaps: var(--gap-xs);
+
+    /* size xs */
+    --secondary-tablist-xs-gaps: var(--gap-xs);
+
+    /* size s */
+    --secondary-tablist-s-gaps: var(--gap-s);
+
+    /* size m */
+    --secondary-tablist-m-gaps: var(--gap-s);
+
+    /* size l */
+    --secondary-tablist-l-gaps: var(--gap-m);
+
+    /* size xl */
+    --secondary-tablist-xl-gaps: var(--gap-m);
+}

package/types-4480ac4f.d.ts

@@ -0,0 +1,3 @@
+type PickerButtonSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+type PickerButtonVariant = 'default' | 'compact';
+export { PickerButtonSize, PickerButtonVariant };

package/typings-5e1b8383.d.ts

@@ -1,5 +1,6 @@
 import { AriaAttributes, FC, FocusEvent, MouseEvent, ReactElement, ReactNode, RefAttributes, SVGProps } from 'react';
-import { InputProps, PopoverProps } from "./index-ebda875c";
+import { InputProps } from "./index-c44170fe";
+import { PopoverProps } from "./index-ebda875c";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**

package/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };

package/typings.d.ts

@@ -1,7 +1,6 @@
 import { FC, MouseEvent, ReactElement, ReactNode } from 'react';
 import { TagProps } from "@alfalab/core-components-tag";
 type SelectedId = string | number;
-type TabsMatchMedia = 'desktop' | 'mobile';
 type TabsProps = {
     /**
      * Дополнительный класс
@@ -28,9 +27,9 @@ type TabsProps = {
      */
     size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
     /**
-     * Режим отображения по умолчанию
+     * Значение по-умолчанию для хука useMatchMedia
      */
-    defaultMatch?: TabsMatchMedia;
+    defaultMatchMediaValue?: boolean | (() => boolean);
     /**
      * Мобильный вид
      */
@@ -39,10 +38,6 @@ type TabsProps = {
      * Рендерить заголовки табов в контейнере со скроллом
      */
     scrollable?: boolean;
-    /**
-     * Сворачивает не помещающиеся в окне табы в PickerButton
-     */
-    collapsible?: boolean;
     /**
      * Список табов, для контроля переноса вкладок в PickerButton
      */
@@ -69,6 +64,11 @@ type TabsProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Контрольная точка для тега, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
 };
 type TabProps = {
     /**
@@ -123,7 +123,7 @@ type TabListTitle = {
     collapsed?: boolean;
     dataTestId?: string;
 };
-type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatch' | 'selectedId' | 'scrollable' | 'collapsible' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
+type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
     /**
      * Заголовки табов
      */
@@ -136,11 +136,12 @@ type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size'
 };
 type SecondaryTabListProps = TabListProps & {
     tagSize?: TagProps['size'];
+    TagComponent?: FC<Omit<TagProps, 'breakpoint'>>;
 };
 type UseTabsProps = TabListProps;
 type Styles = {
-    styles: {
+    styles?: {
         [key: string]: string;
     };
 };
-export { SelectedId, TabsMatchMedia, TabsProps, TabProps, TabListTitle, TabListProps, SecondaryTabListProps, UseTabsProps, Styles };
+export { SelectedId, TabsProps, TabProps, TabListTitle, TabListProps, SecondaryTabListProps, UseTabsProps, Styles };