@alfalab/core-components-tabs 7.7.2 → 8.0.1

package/cssm/components/tabs/Component.responsive.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
 import { TabsProps } from "../../typings";
-type TabsResponsiveProps = Omit<TabsProps, 'TabList'>;
+type TabsResponsiveProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;
 declare const TabsResponsive: ({ view, scrollable, ...restProps }: TabsResponsiveProps) => React.JSX.Element;
 export { TabsResponsiveProps, TabsResponsive };

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

@@ -7,18 +7,13 @@ var React = require('react');
 var components_primaryTablist_Component_responsive = require('../primary-tablist/Component.responsive.js');
 var components_secondaryTablist_Component_responsive = require('../secondary-tablist/Component.responsive.js');
 var components_tabs_Component = require('./Component.js');
-require('@alfalab/hooks');
+require('@alfalab/core-components-mq/cssm');
 require('../primary-tablist/Component.desktop.js');
 require('../primary-tablist/Component.js');
 require('classnames');
-require('@alfalab/core-components-badge/cssm');
 require('@alfalab/core-components-keyboard-focusable/cssm');
-require('@alfalab/core-components-picker-button/cssm/desktop');
-require('../../hooks/use-tablist-titles.js');
-require('../../hooks/use-collapsible-elements.js');
-require('@juggle/resize-observer');
 require('../../hooks/use-tabs.js');
-require('../../synthetic-events.js');
+require('@alfalab/core-components-shared/cssm');
 require('../scrollable-container/Component.js');
 require('compute-scroll-into-view');
 require('../scrollable-container/index.module.css');
@@ -27,10 +22,11 @@ require('../primary-tablist/index.module.css');
 require('../primary-tablist/Component.mobile.js');
 require('../primary-tablist/mobile.module.css');
 require('../secondary-tablist/Component.desktop.js');
+require('@alfalab/core-components-tag/cssm/desktop');
 require('../secondary-tablist/Component.js');
-require('@alfalab/core-components-tag/cssm');
 require('../secondary-tablist/index.module.css');
 require('../secondary-tablist/Component.mobile.js');
+require('@alfalab/core-components-tag/cssm/mobile');
 require('../secondary-tablist/mobile.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

package/cssm/desktop-2e2b2125.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop-2e2b2125";
+export {};

package/cssm/desktop.d.ts

@@ -1,8 +1,4 @@
 export * from "./components/primary-tablist/Component.desktop";
-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 "./hooks/use-tabs";
-export * from "./hooks/use-collapsible-elements";
-export * from "./typings";

package/cssm/desktop.js

@@ -3,39 +3,30 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_primaryTablist_Component_desktop = require('./components/primary-tablist/Component.desktop.js');
-var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
 var components_secondaryTablist_Component_desktop = require('./components/secondary-tablist/Component.desktop.js');
 var components_tab_Component = require('./components/tab/Component.js');
 var components_tabs_Component_desktop = require('./components/tabs/Component.desktop.js');
-var hooks_useTabs = require('./hooks/use-tabs.js');
-var hooks_useCollapsibleElements = require('./hooks/use-collapsible-elements.js');
 require('tslib');
 require('react');
 require('./components/primary-tablist/Component.js');
 require('classnames');
-require('@alfalab/core-components-badge/cssm');
 require('@alfalab/core-components-keyboard-focusable/cssm');
-require('@alfalab/core-components-picker-button/cssm/desktop');
-require('./hooks/use-tablist-titles.js');
-require('@alfalab/hooks');
-require('./synthetic-events.js');
-require('./components/title/Component.js');
-require('./components/primary-tablist/index.module.css');
+require('./hooks/use-tabs.js');
+require('@alfalab/core-components-shared/cssm');
+require('./components/scrollable-container/Component.js');
 require('compute-scroll-into-view');
 require('./components/scrollable-container/index.module.css');
+require('./components/title/Component.js');
+require('./components/primary-tablist/index.module.css');
+require('@alfalab/core-components-tag/cssm/desktop');
 require('./components/secondary-tablist/Component.js');
-require('@alfalab/core-components-tag/cssm');
 require('./components/secondary-tablist/index.module.css');
 require('./components/tab/index.module.css');
 require('./components/tabs/Component.js');
-require('@juggle/resize-observer');
 
 
 
 exports.PrimaryTabListDesktop = components_primaryTablist_Component_desktop.PrimaryTabListDesktop;
-exports.ScrollableContainer = components_scrollableContainer_Component.ScrollableContainer;
 exports.SecondaryTabListDesktop = components_secondaryTablist_Component_desktop.SecondaryTabListDesktop;
 exports.Tab = components_tab_Component.Tab;
 exports.TabsDesktop = components_tabs_Component_desktop.TabsDesktop;
-exports.useTabs = hooks_useTabs.useTabs;
-exports.useCollapsibleElements = hooks_useCollapsibleElements.useCollapsibleElements;

package/cssm/{hook-3e68f8db.d.ts → hook-9ea9e32c.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseSelectProps, OptionShape } from "./index-3e68f8db";
+import { BaseSelectProps, OptionShape } from "./typings-5e1b8383";
 type UseSelectWithApplyProps = {
     /**
      * Список выбранных пунктов
@@ -36,18 +36,20 @@ type UseSelectWithApplyProps = {
 };
 declare const SELECT_ALL_KEY = "select_all";
 declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, }: UseSelectWithApplyProps): {
-    OptionsList: import("react").ForwardRefExoticComponent<import("./index-3e68f8db").OptionsListProps & {
+    OptionsList: import("react").ForwardRefExoticComponent<import("./typings-5e1b8383").OptionsListProps & {
         showClear?: boolean | undefined;
         onClose?: (() => void) | undefined;
         selectedDraft?: OptionShape[] | undefined;
-        OptionsList?: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
-        Footer?: import("react").FC<import("./Component-ebda875c").FooterProps> | undefined;
+        OptionsList?: import("react").FC<import("./typings-5e1b8383").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        Footer?: import("react").FC<import("./Component-5e1b8383").FooterProps> | undefined;
         Header?: import("react").FC<import("./Component-ebda875c").HeaderProps> | undefined;
-        headerProps?: import("./Component-ebda875c").HeaderProps | undefined;
+        headerProps?: import("./Component-ebda875c").HeaderProps | undefined; /**
+         * Показывать кнопку очистки
+         */
         showHeaderWithSelectAll?: boolean | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
-        OptionsList: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        OptionsList: import("react").FC<import("./typings-5e1b8383").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
         showClear: boolean;
         onClear: () => void;
         onApply: () => void;
@@ -62,11 +64,11 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
     };
     allowUnselect: boolean;
     multiple: boolean;
-    options: (OptionShape | import("./index-3e68f8db").GroupShape | {
+    options: (OptionShape | import("./typings-5e1b8383").GroupShape | {
         key: string;
         content: string;
     })[];
-    onChange: (payload: import("./index-3e68f8db").BaseSelectChangePayload) => void;
+    onChange: (payload: import("./typings-5e1b8383").BaseSelectChangePayload) => void;
     selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
 };
 export * from "./Component-5e1b8383";

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

@@ -35,8 +35,15 @@ var useCollapsibleElements = function (selectors, deps) {
             setIdsCollapsedElements(collapsedIds);
         };
         var handleElementsResize = function (entries) {
-            var inlineSize = entries[0].contentBoxSize[0].inlineSize;
-            collapseElements(inlineSize);
+            if (Array.isArray(entries[0].contentBoxSize)) {
+                var inlineSize = entries[0].contentBoxSize[0].inlineSize;
+                collapseElements(inlineSize);
+            }
+            else {
+                // firefox v69-91 compatibility. See https://caniuse.com/mdn-api_resizeobserverentry_contentboxsize
+                var inlineSize = entries[0].contentBoxSize.inlineSize;
+                collapseElements(inlineSize);
+            }
         };
         var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
         var observer = new ResizeObserver(handleElementsResize);

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TabListProps } from "../typings";
-declare const useTablistTitles: ({ titles, selectedId, collapsible, collapsedTabsIds, breakpoint, onChange, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsible' | 'collapsedTabsIds' | 'onChange'> & Required<Pick<TabListProps, 'breakpoint'>>) => {
+declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, breakpoint, onChange, defaultMatchMediaValue, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsedTabsIds' | 'onChange' | 'defaultMatchMediaValue'> & Required<Pick<TabListProps, 'breakpoint'>>) => {
     containerRef: import("react").RefObject<HTMLDivElement>;
     addonRef: import("react").RefObject<HTMLInputElement>;
     tablistTitles: {
@@ -20,6 +20,7 @@ declare const useTablistTitles: ({ titles, selectedId, collapsible, collapsedTab
         role: string;
         tabIndex: number;
         'aria-selected': boolean;
+        selected: boolean;
         'data-test-id': string | undefined;
         disabled: boolean | undefined;
         ref: (node: HTMLButtonElement) => void;

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

@@ -4,19 +4,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var hooks = require('@alfalab/hooks');
+var coreComponentsMq = require('@alfalab/core-components-mq/cssm');
 var hooks_useCollapsibleElements = require('./use-collapsible-elements.js');
 var hooks_useTabs = require('./use-tabs.js');
 require('@juggle/resize-observer');
+require('@alfalab/hooks');
+require('@alfalab/core-components-shared/cssm');
 
 var useTablistTitles = function (_a) {
-    var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, collapsible = _a.collapsible, collapsedTabsIds = _a.collapsedTabsIds, breakpoint = _a.breakpoint, onChange = _a.onChange;
+    var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, collapsedTabsIds = _a.collapsedTabsIds, breakpoint = _a.breakpoint, onChange = _a.onChange, defaultMatchMediaValue = _a.defaultMatchMediaValue;
     var _c = hooks_useCollapsibleElements.useCollapsibleElements('[role=tab]', [titles, collapsedTabsIds]), containerRef = _c.containerRef, addonRef = _c.addonRef, idsCollapsedElements = _c.idsCollapsedElements;
-    var view = hooks.useMedia([['desktop', "(min-width: ".concat(breakpoint, "px)")]], 'desktop')[0];
+    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     var tablistTitles = React.useMemo(function () {
         var idsCollapsedTitles = [];
         var idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds || []);
-        if (view === 'desktop' && collapsible) {
+        if (isDesktop) {
             var visibleTitles = titles.filter(function (_a) {
                 var id = _a.id;
                 return !idsCollapsed.includes(String(id));
@@ -50,7 +52,7 @@ var useTablistTitles = function (_a) {
             }
             return a.collapsed ? 1 : -1;
         });
-    }, [collapsedTabsIds, idsCollapsedElements, view, collapsible, titles, selectedId]);
+    }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);
     var _d = hooks_useTabs.useTabs({
         titles: tablistTitles,
         selectedId: selectedId,

package/cssm/hooks/use-tabs.d.ts

@@ -5,6 +5,7 @@ declare function useTabs({ titles, selectedId, onChange }: UseTabsProps): {
         role: string;
         tabIndex: number;
         'aria-selected': boolean;
+        selected: boolean;
         'data-test-id': string | undefined;
         disabled: boolean | undefined;
         ref: (node: HTMLButtonElement) => void;

package/cssm/hooks/use-tabs.js

@@ -3,11 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-
-var getDataTestId = function (dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-};
+var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
 
 function useTabs(_a) {
     var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, onChange = _a.onChange;
@@ -82,7 +78,8 @@ function useTabs(_a) {
             role: 'tab',
             tabIndex: itemSelected ? 0 : -1,
             'aria-selected': itemSelected,
-            'data-test-id': getDataTestId(item.dataTestId, 'toggle'),
+            selected: itemSelected,
+            'data-test-id': coreComponentsShared.getDataTestId(item.dataTestId, 'toggle'),
             disabled: item.disabled,
             ref: function (node) {
                 // eslint-disable-next-line no-param-reassign

package/cssm/index-8b2c2707.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from "react";
+import { ButtonProps } from "./typings-9211a437";
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { Button };
+export type { ButtonProps } from "./typings-9211a437";

package/cssm/index-c44170fe.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import React from "react";
+type InputProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+type InputDesktopProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles">;
+declare const InputDesktop: React.ForwardRefExoticComponent<InputDesktopProps & React.RefAttributes<HTMLInputElement>>;
+type InputMobileProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles">;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { InputProps, Input, InputDesktopProps, InputDesktop, InputMobileProps, InputMobile };
+export * from "./Component.desktop-785df74d";

package/{esm/types-ebda875c.d.ts → cssm/index-c76d6398.d.ts}

@@ -1,7 +1,37 @@
 /// <reference types="react" />
-import React from 'react';
-import { ReactNode } from "react";
-import { CloserProps } from "./index-ebda875c";
+/* eslint-disable complexity */
+import React from "react";
+import { ReactNode, ButtonHTMLAttributes, ElementType } from "react";
+interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Вид компонента
+     */
+    view: "desktop" | "mobile";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Позиция крестика
+     */
+    align?: "left" | "right";
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Коллбэк закрытия.
+     */
+    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+}
 type NavigationBarProps = {
     /**
      * Контент шапки
@@ -18,7 +48,7 @@ type NavigationBarProps = {
     /**
      * Размер заголовка (compact доступен только в мобильной версии)
      */
-    titleSize?: 'default' | 'compact';
+    titleSize?: "default" | "compact";
     /**
      * Доп. класс для аддонов
      */
@@ -66,7 +96,7 @@ type NavigationBarProps = {
     /**
      * Выравнивание заголовка
      */
-    align?: 'left' | 'center';
+    align?: "left" | "center";
     /**
      * Обрезать ли заголовок
      */
@@ -90,7 +120,7 @@ type NavigationBarProps = {
     /**
      * Обработчик закрытия
      */
-    onClose?: CloserProps['onClose'];
+    onClose?: CloserProps["onClose"];
     /**
      * обработчик клика по кнопке "назад"
      */
@@ -98,16 +128,14 @@ type NavigationBarProps = {
     /**
      * Вид шапки - мобильный или десктоп
      */
-    view: 'desktop' | 'mobile';
+    view: "desktop" | "mobile";
     /**
      * Ссылка на родительскую ноду overflow: auto
      */
     scrollableParentRef?: React.RefObject<HTMLDivElement>;
 };
-type ContentParams = {
-    extraClassName?: string;
-    wrapperRef?: React.RefObject<HTMLDivElement>;
-    style?: React.CSSProperties;
-    hidden?: boolean;
-};
-export { NavigationBarProps, ContentParams };
+declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
+export { NavigationBar };
+export * from "./Component-63dec22f";
+export * from "./Component-8b2c2707";
+export type { NavigationBarProps };

package/cssm/index-ebda875c.d.ts

@@ -1,37 +1,105 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
 import React from "react";
-import { ButtonHTMLAttributes, ElementType, FC } from "react";
-interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import { ButtonHTMLAttributes, ReactNode, RefObject } from "react";
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type NativeProps = ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseTagProps = Omit<NativeProps, "onClick"> & {
     /**
-     * Вид компонента
+     * Отображение кнопки в отмеченном (зажатом) состоянии
      */
-    view: "desktop" | "mobile";
+    checked?: boolean;
     /**
-     * Дополнительный класс
+     * Размер компонента
      */
-    className?: string;
+    size?: "xxs" | "xs" | "s" | "m" | "l" | "xl";
     /**
-     * Позиция крестика
+     * Дочерние элементы.
      */
-    align?: "left" | "right";
+    children?: ReactNode;
     /**
-     * Фиксирует крестик
+     * Дополнительный класс для обёртки children
      */
-    sticky?: boolean;
+    childrenClassName?: string;
     /**
-     * Иконка
+     * Слот слева
      */
-    icon?: ElementType;
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
     /**
-     * Коллбэк закрытия.
+     * Обработчик нажатия
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        checked: boolean;
+        name?: string;
+    }) => void;
+    /**
+     * ref на children
+     */
+    childrenRef?: RefObject<HTMLSpanElement>;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Используйте props shape и view
+     * Вариант тега
+     */
+    variant?: "default" | "alt";
+    /**
+     * Форма тега
+     */
+    shape?: "rounded" | "rectangular";
+    /**
+     * Стиль тега
+     */
+    view?: "outlined" | "filled";
+    /**
+     * Основные стили компонента.
+     */
+    styles?: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
      */
-    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
-}
-declare const Closer: FC<CloserProps>;
-export { CloserProps, Closer };
-export * from "./Component-ebda875c";
+    colorStylesMap?: StyleColors;
+};
+declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClick"> & {
+    checked?: boolean | undefined;
+    size?: "s" | "xxs" | "xs" | "m" | "l" | "xl" | undefined;
+    children?: ReactNode;
+    childrenClassName?: string | undefined;
+    leftAddons?: ReactNode;
+    rightAddons?: ReactNode;
+    dataTestId?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        checked: boolean;
+        name?: string;
+    }) => void) | undefined;
+    childrenRef?: React.RefObject<HTMLSpanElement> | undefined;
+    colors?: "default" | "inverted" | undefined;
+    variant?: "default" | "alt" | undefined;
+    shape?: "rounded" | "rectangular" | undefined;
+    view?: "outlined" | "filled" | undefined;
+    styles?: {
+        [key: string]: string;
+    } | undefined;
+    colorStylesMap?: StyleColors | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { StyleColors, NativeProps, BaseTagProps, BaseTag };