@alfalab/core-components-tabs 7.1.2 → 7.2.0

package/modern/components/tabs/Component.js

@@ -1,6 +1,6 @@
 import React, { cloneElement } from 'react';
 
-const Tabs = ({ TabList, className, containerClassName, size, defaultMatch, children, selectedId, scrollable, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, }) => {
+const Tabs = ({ TabList, className, containerClassName, size, defaultMatch, children, selectedId, scrollable, collapsible, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, }) => {
     const tabsArray = React.Children.toArray(children);
     const titles = tabsArray.map(({ props: { title, id, rightAddons, disabled, hidden, toggleClassName } }) => ({
         title,
@@ -10,10 +10,10 @@ const Tabs = ({ TabList, className, containerClassName, size, defaultMatch, chil
         hidden,
         toggleClassName,
     }));
-    const tabs = tabsArray.filter(tab => tab.props.id === selectedId || tab.props.keepMounted || keepMounted);
+    const tabs = tabsArray.filter((tab) => tab.props.id === selectedId || tab.props.keepMounted || keepMounted);
     return (React.createElement("div", { className: className },
-        React.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, onChange: onChange, dataTestId: dataTestId, defaultMatch: defaultMatch, fullWidthScroll: fullWidthScroll }),
-        tabs.map(tab => cloneElement(tab, { hidden: tab.props.id !== selectedId }))));
+        React.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsible: collapsible, onChange: onChange, dataTestId: dataTestId, defaultMatch: defaultMatch, fullWidthScroll: fullWidthScroll }),
+        tabs.map((tab) => cloneElement(tab, { hidden: tab.props.id !== selectedId }))));
 };
 
 export { Tabs };

package/modern/components/tabs/Component.mobile.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TabsProps } from "../../typings";
-type TabsMobileProps = Omit<TabsProps, 'TabList' | 'size'>;
+type TabsMobileProps = Omit<TabsProps, 'TabList' | 'size' | 'collapsible'>;
 declare const TabsMobile: ({ view, scrollable, ...restProps }: TabsMobileProps) => JSX.Element;
 export { TabsMobileProps, TabsMobile };

package/modern/components/tabs/Component.mobile.js

@@ -1,14 +1,22 @@
 import React from 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '../../useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../synthetic-events.js';
 import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
+import '../title/Component.js';
 import '../primary-tablist/Component.js';
-import '../../index.module-7ca9e703.js';
+import '../../index.module-01d292c0.js';
 import '@alfalab/core-components-tag/modern';
 import '../secondary-tablist/Component.js';
-import '../../index.module-e51ae308.js';
+import '../../index.module-16a12061.js';
 import { Tabs } from './Component.js';
 import { PrimaryTabListMobile } from '../primary-tablist/Component.mobile.js';
 import { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile.js';

package/modern/components/tabs/Component.responsive.js

@@ -1,18 +1,25 @@
 import React from 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '../../useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../synthetic-events.js';
 import 'compute-scroll-into-view';
 import '../scrollable-container/Component.js';
+import '../title/Component.js';
 import '../primary-tablist/Component.js';
-import '../../index.module-7ca9e703.js';
+import '../../index.module-01d292c0.js';
 import '../primary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/modern';
 import '../secondary-tablist/Component.js';
-import '../../index.module-e51ae308.js';
+import '../../index.module-16a12061.js';
 import '../secondary-tablist/Component.desktop.js';
 import { Tabs } from './Component.js';
-import '@alfalab/hooks';
 import '../primary-tablist/Component.mobile.js';
 import { PrimaryTabListResponsive } from '../primary-tablist/Component.responsive.js';
 import '../secondary-tablist/Component.mobile.js';

package/modern/components/title/Component.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+import { Styles, TabListTitle } from "../../typings";
+declare const Title: React.ForwardRefExoticComponent<TabListTitle & Styles & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id"> & {
+    focused?: boolean | undefined;
+    isOption?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Title };

package/modern/components/title/Component.js

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+const Title = forwardRef(({ id, toggleClassName, title, styles = {}, rightAddons = null, hidden = false, selected = false, disabled = false, collapsed = false, focused = false, isOption = false, ...restProps }, ref) => hidden ? null : (React.createElement("button", { ...restProps, ref: ref, type: 'button', id: String(id), className: cn(styles.title, {
+        [styles.selected]: selected,
+        [styles.disabled]: disabled,
+        [styles.collapsed]: collapsed && !isOption,
+        [styles.option]: isOption,
+    }, toggleClassName) },
+    React.createElement("span", { className: cn(styles.content, { [styles.focused]: focused }) }, title),
+    rightAddons && React.createElement("span", { className: styles.rightAddons }, rightAddons))));
+
+export { Title };

package/modern/components/title/index.d.ts

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

package/modern/components/title/index.js

@@ -0,0 +1,3 @@
+import 'react';
+import 'classnames';
+export { Title } from './Component.js';

package/modern/desktop.d.ts

@@ -3,5 +3,6 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.desktop";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.desktop";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
+export * from "./hooks/use-collapsible-elements";
 export * from "./typings";

package/modern/desktop.js

@@ -1,15 +1,23 @@
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-export { useTabs } from './useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
+export { useTabs } from './hooks/use-tabs.js';
+import './hooks/use-tablist-titles.js';
+import './synthetic-events.js';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
+import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-7ca9e703.js';
+import './index.module-01d292c0.js';
 export { PrimaryTabListDesktop } from './components/primary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/modern';
 import './components/secondary-tablist/Component.js';
-import './index.module-e51ae308.js';
+import './index.module-16a12061.js';
 export { SecondaryTabListDesktop } from './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';

package/modern/hooks/use-collapsible-elements.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DependencyList } from 'react';
+declare const useCollapsibleElements: <ContainerType extends HTMLElement, AddonType extends HTMLElement>(selectors: string, deps?: DependencyList) => {
+    containerRef: import("react").RefObject<ContainerType>;
+    addonRef: import("react").RefObject<AddonType>;
+    idsCollapsedElements: string[];
+};
+export { useCollapsibleElements };

package/modern/hooks/use-collapsible-elements.js

@@ -0,0 +1,50 @@
+import { useState, useRef } from 'react';
+import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
+import { ResizeObserver } from '@juggle/resize-observer';
+
+const useCollapsibleElements = (selectors, deps = []) => {
+    const [idsCollapsedElements, setIdsCollapsedElements] = useState([]);
+    const containerRef = useRef(null);
+    const addonRef = useRef(null);
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        const collapseElements = (inlineSize) => {
+            const container = containerRef.current;
+            if (!container)
+                return;
+            const addon = addonRef.current;
+            const containerWidth = inlineSize || container.clientWidth;
+            const elements = Array.from(container.querySelectorAll(selectors));
+            const idsCollapsedElements = elements.reduce((acc, element) => {
+                const { offsetLeft, offsetWidth, id } = element;
+                const elementOffset = offsetLeft + offsetWidth;
+                const isCollapsedElement = getComputedStyle(element).visibility === 'collapse';
+                const maxWidth = addon && !isCollapsedElement
+                    ? containerWidth -
+                        (addon.offsetWidth + parseFloat(getComputedStyle(addon).marginLeft))
+                    : containerWidth;
+                if (elementOffset >= maxWidth)
+                    acc.push(id);
+                return acc;
+            }, []);
+            setIdsCollapsedElements(idsCollapsedElements);
+        };
+        const handleElementsResize = (entries) => {
+            const [{ inlineSize }] = entries[0].contentBoxSize;
+            collapseElements(inlineSize);
+        };
+        const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        const observer = new ResizeObserver$1(handleElementsResize);
+        if (containerRef.current) {
+            collapseElements();
+            observer.observe(containerRef.current);
+        }
+        return () => observer.disconnect();
+    }, [selectors, ...deps]);
+    return {
+        containerRef,
+        addonRef,
+        idsCollapsedElements,
+    };
+};
+
+export { useCollapsibleElements };

package/modern/hooks/use-tablist-titles.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { TabListProps } from "../typings";
+declare const useTablistTitles: ({ titles, selectedId, collapsible, breakpoint, onChange, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsible' | 'onChange'> & Required<Pick<TabListProps, 'breakpoint'>>) => {
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    addonRef: import("react").RefObject<HTMLInputElement>;
+    tablistTitles: {
+        collapsed: boolean;
+        selected: boolean;
+        title: string;
+        id: import("../typings").SelectedId;
+        disabled?: boolean | undefined;
+        rightAddons?: import("react").ReactNode;
+        hidden?: boolean | undefined;
+        toggleClassName?: string | undefined;
+    }[];
+    selectedTab: HTMLButtonElement | null;
+    focusedTab: HTMLButtonElement | null;
+    getTabListItemProps: (index: number, outerRef?: import("react").MutableRefObject<HTMLElement> | undefined) => {
+        role: string;
+        tabIndex: number;
+        'aria-selected': boolean;
+        disabled: boolean | undefined;
+        ref: (node: HTMLButtonElement) => void;
+        onKeyDown: (event: import("react").KeyboardEvent<HTMLButtonElement>) => void;
+        onClick: (event?: import("react").MouseEvent<Element, MouseEvent> | undefined) => void;
+    };
+};
+export { useTablistTitles };

package/modern/hooks/use-tablist-titles.js

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { useMedia } from '@alfalab/hooks';
+import '@juggle/resize-observer';
+import { useCollapsibleElements } from './use-collapsible-elements.js';
+import { useTabs } from './use-tabs.js';
+
+const useTablistTitles = ({ titles = [], selectedId, collapsible, breakpoint, onChange, }) => {
+    const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements('[role=tab]', [titles]);
+    const [view] = useMedia([['desktop', `(min-width: ${breakpoint}px)`]], 'desktop');
+    const tablistTitles = useMemo(() => {
+        const idsCollapsedTitles = [];
+        if (view === 'desktop' && collapsible) {
+            const visibleTitles = titles.filter(({ id }) => !idsCollapsedElements.includes(String(id)));
+            const lastVisibleTitle = visibleTitles[visibleTitles.length - 1];
+            idsCollapsedElements.forEach((id) => {
+                idsCollapsedTitles.push(selectedId === id && lastVisibleTitle ? String(lastVisibleTitle.id) : id);
+            });
+        }
+        return titles.map((title) => ({
+            ...title,
+            collapsed: idsCollapsedTitles.includes(String(title.id)),
+            selected: title.id === selectedId,
+        }));
+    }, [titles, collapsible, selectedId, idsCollapsedElements, view]);
+    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
+        titles: tablistTitles,
+        selectedId,
+        onChange,
+    });
+    return {
+        containerRef,
+        addonRef,
+        tablistTitles,
+        selectedTab,
+        focusedTab,
+        getTabListItemProps,
+    };
+};
+
+export { useTablistTitles };

package/{useTabs.d.ts → modern/hooks/use-tabs.d.ts}

@@ -1,5 +1,5 @@
 import { KeyboardEvent, MouseEvent, MutableRefObject } from 'react';
-import { UseTabsProps } from "./typings";
+import { UseTabsProps } from "../typings";
 declare function useTabs({ titles, selectedId, onChange }: UseTabsProps): {
     getTabListItemProps: (index: number, outerRef?: MutableRefObject<HTMLElement> | undefined) => {
         role: string;

package/modern/{useTabs.js → hooks/use-tabs.js}

@@ -17,11 +17,11 @@ function useTabs({ titles = [], selectedId, onChange }) {
     const focusTab = useCallback((position) => {
         const refs = itemRefs.current;
         const tabAvailable = (ref) => ref && !ref.disabled;
-        if (refs.every(ref => !tabAvailable(ref)))
+        if (refs.every((ref) => !tabAvailable(ref)))
             return;
-        let focusedTabIndex = refs.findIndex(node => document.activeElement === node);
+        let focusedTabIndex = refs.findIndex((node) => document.activeElement === node);
         if (focusedTabIndex === -1) {
-            focusedTabIndex = refs.findIndex(node => node === selectedTab);
+            focusedTabIndex = refs.findIndex((node) => node === selectedTab);
         }
         let newFocusIndex;
         switch (position) {

package/modern/index.d.ts

@@ -3,5 +3,5 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.responsive";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.responsive";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
 export * from "./typings";

package/modern/index.js

@@ -1,19 +1,26 @@
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-export { useTabs } from './useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import './hooks/use-collapsible-elements.js';
+export { useTabs } from './hooks/use-tabs.js';
+import './hooks/use-tablist-titles.js';
+import './synthetic-events.js';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
+import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-7ca9e703.js';
+import './index.module-01d292c0.js';
 import './components/primary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/modern';
 import './components/secondary-tablist/Component.js';
-import './index.module-e51ae308.js';
+import './index.module-16a12061.js';
 import './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';
-import '@alfalab/hooks';
 import './components/primary-tablist/Component.mobile.js';
 export { PrimaryTabListResponsive } from './components/primary-tablist/Component.responsive.js';
 import './components/secondary-tablist/Component.mobile.js';

package/modern/index.module-01d292c0.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_1qgkh","fullWidthScroll":"tabs__fullWidthScroll_1qgkh","container":"tabs__container_1qgkh","title":"tabs__title_1qgkh","disabled":"tabs__disabled_1qgkh","focused":"tabs__focused_1qgkh","collapsed":"tabs__collapsed_1qgkh","selected":"tabs__selected_1qgkh","line":"tabs__line_1qgkh","s":"tabs__s_1qgkh","xs":"tabs__xs_1qgkh","xxs":"tabs__xxs_1qgkh","pickerWrapper":"tabs__pickerWrapper_1qgkh","option":"tabs__option_1qgkh","m":"tabs__m_1qgkh","l":"tabs__l_1qgkh","xl":"tabs__xl_1qgkh","rightAddons":"tabs__rightAddons_1qgkh"};
+require('./components/primary-tablist/index.css')
+
+export { commonStyles as c };

package/modern/index.module-16a12061.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"tabs__component_1y9yr","fullWidthScroll":"tabs__fullWidthScroll_1y9yr","container":"tabs__container_1y9yr","title":"tabs__title_1y9yr","xxs":"tabs__xxs_1y9yr","xs":"tabs__xs_1y9yr","s":"tabs__s_1y9yr","m":"tabs__m_1y9yr","l":"tabs__l_1y9yr","xl":"tabs__xl_1y9yr"};
+require('./components/secondary-tablist/index.css')
+
+export { commonStyles as c };

package/modern/mobile.d.ts

@@ -3,5 +3,5 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.mobile";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.mobile";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
 export * from "./typings";

package/modern/mobile.js

@@ -1,14 +1,22 @@
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-export { useTabs } from './useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+import './hooks/use-collapsible-elements.js';
+export { useTabs } from './hooks/use-tabs.js';
+import './hooks/use-tablist-titles.js';
+import './synthetic-events.js';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
+import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-7ca9e703.js';
+import './index.module-01d292c0.js';
 import '@alfalab/core-components-tag/modern';
 import './components/secondary-tablist/Component.js';
-import './index.module-e51ae308.js';
+import './index.module-16a12061.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';
 export { PrimaryTabListMobile } from './components/primary-tablist/Component.mobile.js';

package/modern/responsive.d.ts

@@ -3,5 +3,6 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.responsive";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.responsive";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
+export * from "./hooks/use-collapsible-elements";
 export * from "./typings";

package/modern/responsive.js

@@ -1,19 +1,26 @@
 import 'react';
 import 'classnames';
+import '@alfalab/core-components/picker-button/desktop';
+import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-export { useTabs } from './useTabs.js';
+import '@alfalab/hooks';
+import '@juggle/resize-observer';
+export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
+export { useTabs } from './hooks/use-tabs.js';
+import './hooks/use-tablist-titles.js';
+import './synthetic-events.js';
 import 'compute-scroll-into-view';
 export { ScrollableContainer } from './components/scrollable-container/Component.js';
+import './components/title/Component.js';
 import './components/primary-tablist/Component.js';
-import './index.module-7ca9e703.js';
+import './index.module-01d292c0.js';
 import './components/primary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/modern';
 import './components/secondary-tablist/Component.js';
-import './index.module-e51ae308.js';
+import './index.module-16a12061.js';
 import './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 import './components/tabs/Component.js';
-import '@alfalab/hooks';
 import './components/primary-tablist/Component.mobile.js';
 export { PrimaryTabListResponsive } from './components/primary-tablist/Component.responsive.js';
 import './components/secondary-tablist/Component.mobile.js';

package/modern/synthetic-events.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+declare const createSyntheticEvent: <T extends Element, E extends Event>(event: E) => React.SyntheticEvent<T, E>;
+declare const createUIEvent: <T extends Element, E extends Event>(event: E) => React.UIEvent<T, E>;
+declare const createSyntheticMouseEvent: <T extends Element>(event: MouseEvent) => React.MouseEvent<T, MouseEvent>;
+export { createSyntheticEvent, createUIEvent, createSyntheticMouseEvent };

package/modern/synthetic-events.js

@@ -0,0 +1,61 @@
+const createSyntheticEvent = (event) => {
+    let isDefaultPrevented = false;
+    let isPropagationStopped = false;
+    const preventDefault = () => {
+        isDefaultPrevented = true;
+        event.preventDefault();
+    };
+    const stopPropagation = () => {
+        isPropagationStopped = true;
+        event.stopPropagation();
+    };
+    return {
+        nativeEvent: event,
+        currentTarget: event.currentTarget,
+        target: event.target,
+        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,
+    };
+};
+const createUIEvent = (event) => ({
+    ...createSyntheticEvent(event),
+    detail: 0,
+    view: {
+        styleMedia: {
+            type: '',
+            matchMedium: () => false,
+        },
+        document,
+    },
+});
+const createSyntheticMouseEvent = (event) => ({
+    ...createUIEvent(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,
+});
+
+export { createSyntheticEvent, createSyntheticMouseEvent, createUIEvent };

package/modern/typings.d.ts

@@ -39,6 +39,10 @@ type TabsProps = {
      * Рендерить заголовки табов в контейнере со скроллом
      */
     scrollable?: boolean;
+    /**
+     * Сворачивает не помещающиеся в окне табы в PickerButton
+     */
+    collapsible?: boolean;
     /**
      * При скроле табы будут уходить в край экрана
      */
@@ -111,12 +115,19 @@ type TabListTitle = {
     rightAddons?: ReactNode;
     hidden?: boolean;
     toggleClassName?: string;
+    selected?: boolean;
+    collapsed?: boolean;
 };
-type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatch' | 'selectedId' | 'scrollable' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
+type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatch' | 'selectedId' | 'scrollable' | 'collapsible' | 'onChange' | 'dataTestId' | 'fullWidthScroll'> & {
     /**
      * Заголовки табов
      */
     titles?: TabListTitle[];
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
 };
 type SecondaryTabListProps = TabListProps & {
     tagSize?: TagProps['size'];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-tabs",
-    "version": "7.1.2",
+    "version": "7.2.0",
     "description": "Tabs components",
     "keywords": [],
     "license": "MIT",
@@ -19,9 +19,12 @@
     "dependencies": {
         "@alfalab/core-components-keyboard-focusable": "^4.0.2",
         "@alfalab/core-components-tag": "^5.0.2",
+        "@alfalab/core-components-picker-button": "^10.0.1",
+        "@alfalab/core-components-badge": "^4.0.2",
         "classnames": "^2.3.1",
         "compute-scroll-into-view": "^1.0.13",
-        "lodash.debounce": "^4.0.8"
+        "lodash.debounce": "^4.0.8",
+        "@juggle/resize-observer": "^3.3.1"
     },
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0",

package/responsive.d.ts

@@ -3,5 +3,6 @@ export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.responsive";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.responsive";
-export * from "./useTabs";
+export * from "./hooks/use-tabs";
+export * from "./hooks/use-collapsible-elements";
 export * from "./typings";

package/responsive.js

@@ -2,23 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-3a2676d6.js');
+require('./tslib.es6-cbc5fb87.js');
 require('react');
 require('classnames');
+require('@alfalab/core-components/picker-button/desktop');
+require('@alfalab/core-components-badge');
 require('@alfalab/core-components-keyboard-focusable');
-var useTabs = require('./useTabs.js');
+require('@alfalab/hooks');
+require('@juggle/resize-observer');
+var hooks_useCollapsibleElements = require('./hooks/use-collapsible-elements.js');
+var hooks_useTabs = require('./hooks/use-tabs.js');
+require('./hooks/use-tablist-titles.js');
+require('./synthetic-events.js');
 require('compute-scroll-into-view');
 var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
+require('./components/title/Component.js');
 require('./components/primary-tablist/Component.js');
-require('./index.module-7a6d77c2.js');
+require('./index.module-370f6bd7.js');
 require('./components/primary-tablist/Component.desktop.js');
 require('@alfalab/core-components-tag');
 require('./components/secondary-tablist/Component.js');
-require('./index.module-d59767dd.js');
+require('./index.module-872dcef9.js');
 require('./components/secondary-tablist/Component.desktop.js');
 var components_tab_Component = require('./components/tab/Component.js');
 require('./components/tabs/Component.js');
-require('@alfalab/hooks');
 require('./components/primary-tablist/Component.mobile.js');
 var components_primaryTablist_Component_responsive = require('./components/primary-tablist/Component.responsive.js');
 require('./components/secondary-tablist/Component.mobile.js');
@@ -27,7 +34,8 @@ var components_tabs_Component_responsive = require('./components/tabs/Component.
 
 
 
-exports.useTabs = useTabs.useTabs;
+exports.useCollapsibleElements = hooks_useCollapsibleElements.useCollapsibleElements;
+exports.useTabs = hooks_useTabs.useTabs;
 exports.ScrollableContainer = components_scrollableContainer_Component.ScrollableContainer;
 exports.Tab = components_tab_Component.Tab;
 exports.PrimaryTabListResponsive = components_primaryTablist_Component_responsive.PrimaryTabListResponsive;

package/send-stats.js

@@ -55,7 +55,7 @@ async function main() {
         };
 
         return new Promise((resolve, reject) => {
-            const req = http.request(options, res => {
+            const req = http.request(options, (res) => {
                 res.on('end', () => {
                     resolve();
                 });