@alfalab/core-components-tabs 7.7.1 → 8.0.0

package/modern/components/secondary-tablist/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 10xbd */
+/* hash: q0qms */
 :root {
 }/* deprecated */:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 }:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -51,30 +51,30 @@
 
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
-}.tabs__component_ot1u0 {
+}.tabs__component_pex1u {
     position: relative;
     display: inline-flex;
-}.tabs__fullWidthScroll_ot1u0 {
+}.tabs__fullWidthScroll_pex1u {
     margin: 0 var(--gap-m);
-}.tabs__container_ot1u0 {
+}.tabs__container_pex1u {
     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);
-}.tabs__title_ot1u0 {
+}.tabs__title_pex1u {
     white-space: nowrap;
-}/* sizes */.tabs__xxs_ot1u0 .tabs__title_ot1u0 + .tabs__title_ot1u0 {
+}/* sizes */.tabs__xxs_pex1u .tabs__title_pex1u + .tabs__title_pex1u {
     margin-left: var(--secondary-tablist-xxs-gaps);
-}.tabs__xs_ot1u0 .tabs__title_ot1u0 + .tabs__title_ot1u0 {
+}.tabs__xs_pex1u .tabs__title_pex1u + .tabs__title_pex1u {
     margin-left: var(--secondary-tablist-xs-gaps);
-}.tabs__s_ot1u0 .tabs__title_ot1u0 + .tabs__title_ot1u0 {
+}.tabs__s_pex1u .tabs__title_pex1u + .tabs__title_pex1u {
     margin-left: var(--secondary-tablist-s-gaps);
-}.tabs__m_ot1u0 .tabs__title_ot1u0 + .tabs__title_ot1u0 {
+}.tabs__m_pex1u .tabs__title_pex1u + .tabs__title_pex1u {
     margin-left: var(--secondary-tablist-m-gaps);
-}.tabs__l_ot1u0 .tabs__title_ot1u0 + .tabs__title_ot1u0 {
+}.tabs__l_pex1u .tabs__title_pex1u + .tabs__title_pex1u {
     margin-left: var(--secondary-tablist-l-gaps);
-}.tabs__xl_ot1u0 .tabs__title_ot1u0 + .tabs__title_ot1u0 {
+}.tabs__xl_pex1u .tabs__title_pex1u + .tabs__title_pex1u {
     margin-left: var(--secondary-tablist-xl-gaps);
 } :root {
     --color-dark-indigo: #0b1f35;
@@ -458,6 +458,10 @@
     --color-dark-specialbg-component-inverted-alpha-30: rgba(11, 31, 53, 0.3);
     --color-dark-specialbg-component-inverted-shade-15: rgba(9, 26, 45, 0.2095);
     --color-dark-specialbg-component-inverted-shade-20: rgba(9, 25, 42, 0.256);
+    --color-dark-specialbg-secondary-transparent-tint-7: rgba(255, 255, 255, 0.1258);
+    --color-dark-specialbg-secondary-transparent-tint-15: rgba(255, 255, 255, 0.201);
+    --color-dark-specialbg-secondary-transparent-inverted-shade-15: rgba(9, 26, 45, 0.1925);
+    --color-dark-specialbg-secondary-transparent-inverted-shade-20: rgba(9, 25, 42, 0.24);
     --color-dark-specialbg-tertiary-transparent-tint-7: rgba(255, 255, 255, 0.1723);
     --color-dark-specialbg-tertiary-transparent-tint-15: rgba(255, 255, 255, 0.2435);
     --color-dark-specialbg-tertiary-transparent-inverted-shade-15: rgba(9, 26, 45, 0.235);
@@ -614,6 +618,10 @@
     --color-light-specialbg-component-inverted-alpha-30: rgba(255, 255, 255, 0.3);
     --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.235);
     --color-light-specialbg-component-inverted-tint-20: rgba(255, 255, 255, 0.28);
+    --color-light-specialbg-secondary-transparent-shade-7: rgba(10, 29, 49, 0.1165);
+    --color-light-specialbg-secondary-transparent-shade-15: rgba(9, 26, 45, 0.1925);
+    --color-light-specialbg-secondary-transparent-inverted-tint-15: rgba(255, 255, 255, 0.201);
+    --color-light-specialbg-secondary-transparent-inverted-tint-20: rgba(255, 255, 255, 0.248);
     --color-light-specialbg-tertiary-transparent-shade-7: rgba(10, 29, 49, 0.163);
     --color-light-specialbg-tertiary-transparent-shade-15: rgba(9, 26, 45, 0.235);
     --color-light-specialbg-tertiary-transparent-inverted-tint-15: rgba(255, 255, 255, 0.2435);
@@ -971,7 +979,7 @@
 
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
-} .tabs__title_149yx {
-} .tabs__mobile_149yx .tabs__title_149yx + .tabs__title_149yx {
+} .tabs__title_16krq {
+} .tabs__mobile_16krq .tabs__title_16krq + .tabs__title_16krq {
         margin-left: var(--secondary-tablist-mobile-gaps);
     }

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import React from 'react';
 import { TabProps } from "../../typings";
-declare const Tab: ({ children, hidden, className, disabled, dataTestId }: TabProps) => JSX.Element | null;
+declare const Tab: ({ children, hidden, className, disabled, dataTestId }: TabProps) => React.JSX.Element | null;
 export { Tab };

package/modern/components/tab/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"component":"tabs__component_1k35g","hidden":"tabs__hidden_1k35g"};
+const styles = {"component":"tabs__component_1h68e","hidden":"tabs__hidden_1h68e"};
 require('./index.css')
 
 const Tab = ({ children, hidden, className, disabled, dataTestId }) => children ? (React.createElement("div", { className: cn(styles.component, {

package/modern/components/tab/index.css

@@ -1,8 +1,8 @@
-/* hash: 1qnyx */
-.tabs__component_1k35g {
+/* hash: 2jfms */
+.tabs__component_1h68e {
     outline: none;
 }
 
-.tabs__hidden_1k35g {
+.tabs__hidden_1h68e {
     display: none;
 }

package/modern/components/tabs/Component.collabsible.desktop.d.ts

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

package/modern/components/tabs/Component.collabsible.desktop.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CollapsiblePrimaryTabListDesktop } from '../primary-tablist/Component.collapsible.desktop.js';
+import { Tabs } from './Component.js';
+import '../primary-tablist/Component.collapsible.js';
+import 'classnames';
+import '@alfalab/core-components-badge/modern';
+import '@alfalab/core-components-keyboard-focusable/modern';
+import '@alfalab/core-components-picker-button/modern/desktop';
+import '../../hooks/use-tablist-titles.js';
+import '@alfalab/core-components-mq/modern';
+import '../../hooks/use-collapsible-elements.js';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../hooks/use-tabs.js';
+import '@alfalab/core-components-shared/modern';
+import '../../synthetic-events.js';
+import '../title/Component.js';
+import '../../index.module-264a8450.js';
+
+const TabsCollapsibleDesktop = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabListDesktop, ...restProps }));
+
+export { TabsCollapsibleDesktop };

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

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { CollapsiblePrimaryTabListMobile } from '../primary-tablist/Component.collapsible.mobile.js';
+import { Tabs } from './Component.js';
+import 'classnames';
+import '../primary-tablist/Component.collapsible.js';
+import '@alfalab/core-components-badge/modern';
+import '@alfalab/core-components-keyboard-focusable/modern';
+import '@alfalab/core-components-picker-button/modern/desktop';
+import '../../hooks/use-tablist-titles.js';
+import '@alfalab/core-components-mq/modern';
+import '../../hooks/use-collapsible-elements.js';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../hooks/use-tabs.js';
+import '@alfalab/core-components-shared/modern';
+import '../../synthetic-events.js';
+import '../title/Component.js';
+import '../../index.module-264a8450.js';
+import '../../mobile.module-9693b0a4.js';
+
+const TabsCollapsibleMobile = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabListMobile, ...restProps }));
+
+export { TabsCollapsibleMobile };

package/modern/components/tabs/Component.collapsible.responsive.d.ts

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CollapsiblePrimaryTabListResponsive } from '../primary-tablist/Component.collapsible.responsive.js';
+import { Tabs } from './Component.js';
+import '@alfalab/core-components-mq/modern';
+import '../primary-tablist/Component.collapsible.desktop.js';
+import '../primary-tablist/Component.collapsible.js';
+import 'classnames';
+import '@alfalab/core-components-badge/modern';
+import '@alfalab/core-components-keyboard-focusable/modern';
+import '@alfalab/core-components-picker-button/modern/desktop';
+import '../../hooks/use-tablist-titles.js';
+import '../../hooks/use-collapsible-elements.js';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../hooks/use-tabs.js';
+import '@alfalab/core-components-shared/modern';
+import '../../synthetic-events.js';
+import '../title/Component.js';
+import '../../index.module-264a8450.js';
+import '../primary-tablist/Component.collapsible.mobile.js';
+import '../../mobile.module-9693b0a4.js';
+
+const TabsCollapsibleResponsive = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabListResponsive, ...restProps }));
+
+export { TabsCollapsibleResponsive };

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import React from 'react';
 import { TabsProps } from "../../typings";
-declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatch, children, selectedId, scrollable, collapsible, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, }: Omit<TabsProps, 'view'>) => JSX.Element;
+declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, }: Omit<TabsProps, 'view'>) => React.JSX.Element;
 export { Tabs };

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

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

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

@@ -4,22 +4,16 @@ import { SecondaryTabListDesktop } from '../secondary-tablist/Component.desktop.
 import { Tabs } from './Component.js';
 import '../primary-tablist/Component.js';
 import 'classnames';
-import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '@alfalab/core-components-picker-button/modern/desktop';
-import '../../hooks/use-tablist-titles.js';
-import '@alfalab/hooks';
-import '../../hooks/use-collapsible-elements.js';
-import '@juggle/resize-observer';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
+import '@alfalab/core-components-shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../title/Component.js';
-import '../../index.module-75cf2354.js';
+import '../../index.module-264a8450.js';
+import '@alfalab/core-components-tag/modern/desktop';
 import '../secondary-tablist/Component.js';
-import '@alfalab/core-components-tag/modern';
-import '../../index.module-77d8ef59.js';
+import '../../index.module-fede443b.js';
 
 const views = {
     primary: PrimaryTabListDesktop,

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, collapsible, collapsedTabsIds, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, }) => {
+const Tabs = ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, breakpoint = 1024, }) => {
     const tabsArray = React.Children.toArray(children);
     const titles = tabsArray.map(({ props: { title, id, rightAddons, disabled, hidden, toggleClassName, dataTestId: toggleTestId, }, }) => ({
         title,
@@ -13,7 +13,7 @@ const Tabs = ({ TabList, className, containerClassName, size, defaultMatch, chil
     }));
     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, collapsible: collapsible, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatch: defaultMatch, fullWidthScroll: fullWidthScroll }),
+        React.createElement(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 }))));
 };
 

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

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

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

@@ -4,22 +4,17 @@ import { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile.js
 import { Tabs } from './Component.js';
 import 'classnames';
 import '../primary-tablist/Component.js';
-import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '@alfalab/core-components-picker-button/modern/desktop';
-import '../../hooks/use-tablist-titles.js';
-import '@alfalab/hooks';
-import '../../hooks/use-collapsible-elements.js';
-import '@juggle/resize-observer';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
+import '@alfalab/core-components-shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../title/Component.js';
-import '../../index.module-75cf2354.js';
+import '../../index.module-264a8450.js';
+import '../../mobile.module-9693b0a4.js';
+import '@alfalab/core-components-tag/modern/mobile';
 import '../secondary-tablist/Component.js';
-import '@alfalab/core-components-tag/modern';
-import '../../index.module-77d8ef59.js';
+import '../../index.module-fede443b.js';
 
 const views = {
     primary: PrimaryTabListMobile,

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

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

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

@@ -2,28 +2,25 @@ import React from 'react';
 import { PrimaryTabListResponsive } from '../primary-tablist/Component.responsive.js';
 import { SecondaryTabListResponsive } from '../secondary-tablist/Component.responsive.js';
 import { Tabs } from './Component.js';
-import '@alfalab/hooks';
+import '@alfalab/core-components-mq/modern';
 import '../primary-tablist/Component.desktop.js';
 import '../primary-tablist/Component.js';
 import 'classnames';
-import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '@alfalab/core-components-picker-button/modern/desktop';
-import '../../hooks/use-tablist-titles.js';
-import '../../hooks/use-collapsible-elements.js';
-import '@juggle/resize-observer';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
+import '@alfalab/core-components-shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../title/Component.js';
-import '../../index.module-75cf2354.js';
+import '../../index.module-264a8450.js';
 import '../primary-tablist/Component.mobile.js';
+import '../../mobile.module-9693b0a4.js';
 import '../secondary-tablist/Component.desktop.js';
+import '@alfalab/core-components-tag/modern/desktop';
 import '../secondary-tablist/Component.js';
-import '@alfalab/core-components-tag/modern';
-import '../../index.module-77d8ef59.js';
+import '../../index.module-fede443b.js';
 import '../secondary-tablist/Component.mobile.js';
+import '@alfalab/core-components-tag/modern/mobile';
 
 const views = {
     primary: PrimaryTabListResponsive,

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

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

package/modern/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/modern/desktop.js

@@ -1,24 +1,18 @@
 export { PrimaryTabListDesktop } from './components/primary-tablist/Component.desktop.js';
-export { ScrollableContainer } from './components/scrollable-container/Component.js';
 export { SecondaryTabListDesktop } from './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 export { TabsDesktop } from './components/tabs/Component.desktop.js';
-export { useTabs } from './hooks/use-tabs.js';
-export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
 import 'react';
 import './components/primary-tablist/Component.js';
 import 'classnames';
-import '@alfalab/core-components-badge/modern';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '@alfalab/core-components-picker-button/modern/desktop';
-import './hooks/use-tablist-titles.js';
-import '@alfalab/hooks';
-import './synthetic-events.js';
-import './components/title/Component.js';
-import './index.module-75cf2354.js';
+import './hooks/use-tabs.js';
+import '@alfalab/core-components-shared/modern';
+import './components/scrollable-container/Component.js';
 import 'compute-scroll-into-view';
+import './components/title/Component.js';
+import './index.module-264a8450.js';
+import '@alfalab/core-components-tag/modern/desktop';
 import './components/secondary-tablist/Component.js';
-import '@alfalab/core-components-tag/modern';
-import './index.module-77d8ef59.js';
+import './index.module-fede443b.js';
 import './components/tabs/Component.js';
-import '@juggle/resize-observer';

package/{esm/hook-3e68f8db.d.ts → modern/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/modern/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/modern/hooks/use-tablist-titles.js

@@ -1,16 +1,18 @@
 import { useMemo } from 'react';
-import { useMedia } from '@alfalab/hooks';
+import { useMatchMedia } from '@alfalab/core-components-mq/modern';
 import { useCollapsibleElements } from './use-collapsible-elements.js';
 import { useTabs } from './use-tabs.js';
 import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '@alfalab/core-components-shared/modern';
 
-const useTablistTitles = ({ titles = [], selectedId, collapsible, collapsedTabsIds, breakpoint, onChange, }) => {
+const useTablistTitles = ({ titles = [], selectedId, collapsedTabsIds, breakpoint, onChange, defaultMatchMediaValue, }) => {
     const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements('[role=tab]', [titles, collapsedTabsIds]);
-    const [view] = useMedia([['desktop', `(min-width: ${breakpoint}px)`]], 'desktop');
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
     const tablistTitles = useMemo(() => {
         const idsCollapsedTitles = [];
         const idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds || []);
-        if (view === 'desktop' && collapsible) {
+        if (isDesktop) {
             const visibleTitles = titles.filter(({ id }) => !idsCollapsed.includes(String(id)));
             const lastVisibleTitle = collapsedTabsIds
                 ? null
@@ -45,7 +47,7 @@ const useTablistTitles = ({ titles = [], selectedId, collapsible, collapsedTabsI
             }
             return a.collapsed ? 1 : -1;
         });
-    }, [collapsedTabsIds, idsCollapsedElements, view, collapsible, titles, selectedId]);
+    }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);
     const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
         titles: tablistTitles,
         selectedId,

package/modern/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/modern/hooks/use-tabs.js

@@ -1,9 +1,5 @@
 import { useState, useRef, useCallback } from 'react';
-
-const getDataTestId = (dataTestId, element) => {
-    const elementPart = element ? `-${element.toLowerCase()}` : '';
-    return dataTestId ? `${dataTestId}${elementPart}` : undefined;
-};
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
 
 function useTabs({ titles = [], selectedId, onChange }) {
     const [selectedTab, setSelectedTab] = useState(null);
@@ -77,6 +73,7 @@ function useTabs({ titles = [], selectedId, onChange }) {
             role: 'tab',
             tabIndex: itemSelected ? 0 : -1,
             'aria-selected': itemSelected,
+            selected: itemSelected,
             'data-test-id': getDataTestId(item.dataTestId, 'toggle'),
             disabled: item.disabled,
             ref: (node) => {

package/modern/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/modern/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";