@alfalab/core-components-tabs 7.7.1 → 8.0.0

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { useTabs } from '../../hooks/use-tabs';
+import { SecondaryTabListProps, Styles } from '../../typings';
+import { ScrollableContainer } from '../scrollable-container';
+
+export const SecondaryTabList = ({
+    styles = {},
+    className,
+    containerClassName,
+    size,
+    titles = [],
+    selectedId = titles.length ? titles[0].id : undefined,
+    scrollable = true,
+    fullWidthScroll,
+    tagSize = 'xs',
+    onChange,
+    dataTestId,
+    TagComponent,
+}: SecondaryTabListProps & Styles) => {
+    const { focusedTab, selectedTab, getTabListItemProps } = useTabs({
+        titles,
+        selectedId,
+        onChange,
+    });
+
+    const renderContent = () => {
+        if (!TagComponent) return null;
+
+        return (
+            <div
+                role='tablist'
+                data-test-id={dataTestId}
+                className={cn(styles.component, className, size && styles[size], {
+                    [styles.fullWidthScroll]: fullWidthScroll,
+                })}
+            >
+                {titles.map((item, index) => {
+                    if (item.hidden) return null;
+
+                    return (
+                        <TagComponent
+                            {...getTabListItemProps(index)}
+                            key={item.id}
+                            className={cn(styles.title, item.toggleClassName)}
+                            checked={item.id === selectedId}
+                            size={tagSize}
+                            rightAddons={item.rightAddons}
+                        >
+                            {item.title}
+                        </TagComponent>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    return scrollable ? (
+        <ScrollableContainer
+            activeChild={focusedTab || selectedTab}
+            containerClassName={containerClassName}
+            fullWidthScroll={fullWidthScroll}
+        >
+            {renderContent()}
+        </ScrollableContainer>
+    ) : (
+        <div className={cn(styles.container, containerClassName)}>{renderContent()}</div>
+    );
+};

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

@@ -0,0 +1,49 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.component {
+    position: relative;
+    display: inline-flex;
+}
+
+.fullWidthScroll {
+    margin: 0 var(--gap-m);
+}
+
+.container {
+    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 {
+    white-space: nowrap;
+}
+
+/* sizes */
+
+.xxs .title + .title {
+    margin-left: var(--secondary-tablist-xxs-gaps);
+}
+
+.xs .title + .title {
+    margin-left: var(--secondary-tablist-xs-gaps);
+}
+
+.s .title + .title {
+    margin-left: var(--secondary-tablist-s-gaps);
+}
+
+.m .title + .title {
+    margin-left: var(--secondary-tablist-m-gaps);
+}
+
+.l .title + .title {
+    margin-left: var(--secondary-tablist-l-gaps);
+}
+
+.xl .title + .title {
+    margin-left: var(--secondary-tablist-xl-gaps);
+}

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

@@ -0,0 +1,11 @@
+@import '../../vars.css';
+
+.title {
+    composes: title from 'index.module.css';
+}
+
+.mobile {
+    & .title + .title {
+        margin-left: var(--secondary-tablist-mobile-gaps);
+    }
+}

package/src/components/tab/Component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { TabProps } from '../../typings';
+
+import styles from './index.module.css';
+
+export const Tab = ({ children, hidden, className, disabled, dataTestId }: TabProps) =>
+    children ? (
+        <div
+            className={cn(
+                styles.component,
+                {
+                    [styles.hidden]: hidden,
+                },
+                className,
+            )}
+            hidden={hidden}
+            role='tabpanel'
+            tabIndex={disabled ? -1 : 0}
+            data-test-id={dataTestId}
+        >
+            {children}
+        </div>
+    ) : null;

package/src/components/tab/index.module.css

@@ -0,0 +1,7 @@
+.component {
+    outline: none;
+}
+
+.hidden {
+    display: none;
+}

package/src/components/tab/index.ts

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

package/src/components/tabs/Component.collabsible.desktop.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { TabsProps } from '../../typings';
+import { CollapsiblePrimaryTabListDesktop } from '../primary-tablist/Component.collapsible.desktop';
+
+import { Tabs } from './Component';
+
+export type TabsCollapsibleDesktopProps = Omit<
+    TabsProps,
+    'TabList' | 'fullWidthScroll' | 'scrollable' | 'view'
+>;
+
+export const TabsCollapsibleDesktop = ({ ...restProps }: TabsCollapsibleDesktopProps) => (
+    <Tabs TabList={CollapsiblePrimaryTabListDesktop} {...restProps} />
+);

package/src/components/tabs/Component.collapsible.mobile.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { TabsProps } from '../../typings';
+import { CollapsiblePrimaryTabListMobile } from '../primary-tablist/Component.collapsible.mobile';
+
+import { Tabs } from './Component';
+
+export type TabsCollapsibleMobileProps = Omit<
+    TabsProps,
+    'TabList' | 'scrollable' | 'view' | 'size'
+>;
+
+export const TabsCollapsibleMobile = ({ ...restProps }: TabsCollapsibleMobileProps) => (
+    <Tabs TabList={CollapsiblePrimaryTabListMobile} {...restProps} />
+);

package/src/components/tabs/Component.collapsible.responsive.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { TabsProps } from '../../typings';
+import { CollapsiblePrimaryTabListResponsive } from '../primary-tablist/Component.collapsible.responsive';
+
+import { Tabs } from './Component';
+
+export type TabsCollapsibleResponsiveProps = Omit<TabsProps, 'TabList' | 'scrollable' | 'view'>;
+
+export const TabsCollapsibleResponsive = ({ ...restProps }: TabsCollapsibleResponsiveProps) => (
+    <Tabs TabList={CollapsiblePrimaryTabListResponsive} {...restProps} />
+);

package/src/components/tabs/Component.desktop.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { TabsProps } from '../../typings';
+import { PrimaryTabListDesktop } from '../primary-tablist/Component.desktop';
+import { SecondaryTabListDesktop } from '../secondary-tablist/Component.desktop';
+
+import { Tabs } from './Component';
+
+const views = {
+    primary: PrimaryTabListDesktop,
+    secondary: SecondaryTabListDesktop,
+};
+
+export type TabsDesktopProps = Omit<
+    TabsProps,
+    'TabList' | 'fullWidthScroll' | 'breakpoint' | 'collapsedTabsIds'
+>;
+
+export const TabsDesktop = ({
+    view = 'primary',
+    scrollable = false,
+    size = view === 'primary' ? 'm' : 's',
+    ...restProps
+}: TabsDesktopProps) => (
+    <Tabs TabList={views[view]} scrollable={scrollable} size={size} {...restProps} />
+);

package/src/components/tabs/Component.mobile.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { TabsProps } from '../../typings';
+import { PrimaryTabListMobile } from '../primary-tablist/Component.mobile';
+import { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile';
+
+import { Tabs } from './Component';
+
+const views = {
+    primary: PrimaryTabListMobile,
+    secondary: SecondaryTabListMobile,
+};
+
+export type TabsMobileProps = Omit<TabsProps, 'TabList' | 'size' | 'collapsedTabsIds'>;
+
+export const TabsMobile = ({
+    view = 'primary',
+    scrollable = true,
+    ...restProps
+}: TabsMobileProps) => <Tabs TabList={views[view]} scrollable={scrollable} {...restProps} />;

package/src/components/tabs/Component.responsive.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { TabsProps } from '../../typings';
+import { PrimaryTabListResponsive } from '../primary-tablist/Component.responsive';
+import { SecondaryTabListResponsive } from '../secondary-tablist/Component.responsive';
+
+import { Tabs } from './Component';
+
+const views = {
+    primary: PrimaryTabListResponsive,
+    secondary: SecondaryTabListResponsive,
+};
+
+export type TabsResponsiveProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;
+
+export const TabsResponsive = ({
+    view = 'primary',
+    scrollable = false,
+    ...restProps
+}: TabsResponsiveProps) => <Tabs TabList={views[view]} scrollable={scrollable} {...restProps} />;

package/src/components/tabs/Component.tsx

@@ -0,0 +1,67 @@
+import React, { cloneElement } from 'react';
+
+import { TabsProps } from '../../typings';
+
+export const Tabs = ({
+    TabList,
+    className,
+    containerClassName,
+    size,
+    defaultMatchMediaValue,
+    children,
+    selectedId,
+    scrollable,
+    collapsedTabsIds,
+    fullWidthScroll = false,
+    keepMounted = false,
+    dataTestId,
+    onChange,
+    breakpoint = 1024,
+}: Omit<TabsProps, 'view'>) => {
+    const tabsArray = React.Children.toArray(children) as TabsProps['children'];
+    const titles = tabsArray.map(
+        ({
+            props: {
+                title,
+                id,
+                rightAddons,
+                disabled,
+                hidden,
+                toggleClassName,
+                dataTestId: toggleTestId,
+            },
+        }) => ({
+            title,
+            id,
+            disabled,
+            rightAddons,
+            hidden,
+            toggleClassName,
+            dataTestId: toggleTestId,
+        }),
+    );
+
+    const tabs = tabsArray.filter(
+        (tab) => tab.props.id === selectedId || tab.props.keepMounted || keepMounted,
+    );
+
+    return (
+        <div className={className}>
+            <TabList
+                containerClassName={containerClassName}
+                size={size}
+                titles={titles}
+                selectedId={selectedId}
+                scrollable={scrollable}
+                collapsedTabsIds={collapsedTabsIds}
+                onChange={onChange}
+                dataTestId={dataTestId}
+                defaultMatchMediaValue={defaultMatchMediaValue}
+                fullWidthScroll={fullWidthScroll}
+                breakpoint={breakpoint}
+            />
+
+            {tabs.map((tab) => cloneElement(tab, { hidden: tab.props.id !== selectedId }))}
+        </div>
+    );
+};

package/src/components/title/Component.tsx

@@ -0,0 +1,51 @@
+import React, { ButtonHTMLAttributes, forwardRef } from 'react';
+import cn from 'classnames';
+
+import { Styles, TabListTitle } from '../../typings';
+
+type Props = TabListTitle &
+    Styles &
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id'> & { focused?: boolean; isOption?: boolean };
+
+export const Title = forwardRef<HTMLButtonElement, Props>(
+    (
+        {
+            id,
+            toggleClassName,
+            title,
+            styles = {},
+            rightAddons = null,
+            hidden = false,
+            selected = false,
+            disabled = false,
+            collapsed = false,
+            focused = false,
+            isOption = false,
+            ...restProps
+        },
+        ref,
+    ) =>
+        hidden ? null : (
+            <button
+                {...restProps}
+                ref={ref}
+                disabled={disabled}
+                type='button'
+                id={String(id)}
+                className={cn(
+                    styles.title,
+                    {
+                        [styles.selected]: selected,
+                        [styles.disabled]: disabled,
+                        [styles.collapsed]: collapsed && !isOption,
+                        [styles.option]: isOption,
+                    },
+                    toggleClassName,
+                )}
+            >
+                <span className={cn(styles.content, { [styles.focused]: focused })}>{title}</span>
+
+                {rightAddons && <span className={styles.rightAddons}>{rightAddons}</span>}
+            </button>
+        ),
+);

package/src/components/title/index.ts

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

package/src/desktop.ts

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

package/src/hooks/use-collapsible-elements.ts

@@ -0,0 +1,69 @@
+import { DependencyList, useRef, useState } from 'react';
+import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
+
+import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
+
+export const useCollapsibleElements = <
+    ContainerType extends HTMLElement,
+    AddonType extends HTMLElement,
+>(
+    selectors: string,
+    deps: DependencyList = [],
+) => {
+    const [idsCollapsedElements, setIdsCollapsedElements] = useState<string[]>([]);
+
+    const containerRef = useRef<ContainerType>(null);
+    const addonRef = useRef<AddonType>(null);
+
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        const collapseElements = (inlineSize?: number) => {
+            const container = containerRef.current;
+
+            if (!container) return;
+
+            const addon = addonRef.current;
+            const containerWidth =
+                (inlineSize || container.clientWidth) - (addon?.scrollWidth || 0) * 1.5; // при расчётах, даём кнопке "Ещё" чуть больше места, чтобы точно влезла
+            const elements = Array.from(container.querySelectorAll(selectors)) as HTMLElement[];
+
+            const collapsedIds = elements.reduce<string[]>((acc, element) => {
+                const { offsetLeft, scrollWidth, id } = element;
+                const elementOffset = offsetLeft + scrollWidth;
+                const isCollapsedElement = getComputedStyle(element).visibility === 'collapse';
+                const maxWidth =
+                    addon && !isCollapsedElement
+                        ? containerWidth -
+                          (addon.scrollWidth + parseFloat(getComputedStyle(addon).marginLeft))
+                        : containerWidth;
+
+                if (elementOffset >= maxWidth) acc.push(id);
+
+                return acc;
+            }, []);
+
+            setIdsCollapsedElements(collapsedIds);
+        };
+
+        const handleElementsResize = (entries: ResizeObserverEntry[]) => {
+            const [{ inlineSize }] = entries[0].contentBoxSize;
+
+            collapseElements(inlineSize);
+        };
+
+        const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
+        const observer = new ResizeObserver(handleElementsResize);
+
+        if (containerRef.current) {
+            collapseElements();
+            observer.observe(containerRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, [selectors, ...deps]);
+
+    return {
+        containerRef,
+        addonRef,
+        idsCollapsedElements,
+    };
+};

package/src/hooks/use-tablist-titles.ts

@@ -0,0 +1,91 @@
+import { useMemo } from 'react';
+
+import { useMatchMedia } from '@alfalab/core-components-mq';
+
+import { TabListProps } from '../typings';
+
+import { useCollapsibleElements } from './use-collapsible-elements';
+import { useTabs } from './use-tabs';
+
+export const useTablistTitles = ({
+    titles = [],
+    selectedId,
+    collapsedTabsIds,
+    breakpoint,
+    onChange,
+    defaultMatchMediaValue,
+}: Pick<
+    TabListProps,
+    'titles' | 'selectedId' | 'collapsedTabsIds' | 'onChange' | 'defaultMatchMediaValue'
+> &
+    Required<Pick<TabListProps, 'breakpoint'>>) => {
+    const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements<
+        HTMLDivElement,
+        HTMLInputElement
+    >('[role=tab]', [titles, collapsedTabsIds]);
+
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+
+    const tablistTitles = useMemo(() => {
+        const idsCollapsedTitles: string[] = [];
+        const idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds || []);
+
+        if (isDesktop) {
+            const visibleTitles = titles.filter(({ id }) => !idsCollapsed.includes(String(id)));
+            const lastVisibleTitle = collapsedTabsIds
+                ? null
+                : visibleTitles[visibleTitles.length - 1];
+
+            idsCollapsed.forEach((id) => {
+                if (selectedId === id && lastVisibleTitle) {
+                    idsCollapsedTitles.push(String(lastVisibleTitle.id));
+                }
+                if (selectedId !== id) {
+                    idsCollapsedTitles.push(id);
+                }
+            });
+        }
+
+        const titlesMapped = titles.map((title) => ({
+            ...title,
+            collapsed: idsCollapsedTitles.includes(String(title.id)),
+            selected: title.id === selectedId,
+        }));
+
+        if (collapsedTabsIds?.length) {
+            titlesMapped.sort((a, b) => {
+                const hasA = collapsedTabsIds.includes(String(a.id));
+                const hasB = collapsedTabsIds.includes(String(b.id));
+
+                if (hasA === hasB) {
+                    return 0;
+                }
+
+                return hasA ? 1 : -1;
+            });
+        }
+
+        return titlesMapped.sort((a, b) => {
+            if (a.collapsed === b.collapsed) {
+                return 0;
+            }
+
+            return a.collapsed ? 1 : -1;
+        });
+    }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);
+
+    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
+        titles: tablistTitles,
+        selectedId,
+        onChange,
+    });
+
+    return {
+        containerRef,
+        addonRef,
+        tablistTitles,
+        selectedTab,
+        focusedTab,
+        getTabListItemProps,
+    };
+};