@alfalab/core-components-tabs 8.1.5 → 8.2.0

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

@@ -3,10 +3,11 @@ import { PrimaryTabListDesktop } from '../primary-tablist/Component.desktop.js';
 import { SecondaryTabListDesktop } from '../secondary-tablist/Component.desktop.js';
 import { Tabs } from './Component.js';
 import '../primary-tablist/Component.js';
+import '@juggle/resize-observer';
 import 'classnames';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '../../hooks/use-tabs.js';
 import '@alfalab/core-components-shared/modern';
+import '../../hooks/use-tabs.js';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../scroll-controls/Component.js';
@@ -16,10 +17,10 @@ import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-7b0d0808.js';
+import '../../index.module-4070c7f9.js';
 import '@alfalab/core-components-tag/modern/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-2d531cfb.js';
+import '../../index.module-a791a93d.js';
 
 const views = {
     primary: PrimaryTabListDesktop,

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

@@ -4,9 +4,10 @@ import { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile.js
 import { Tabs } from './Component.js';
 import 'classnames';
 import '../primary-tablist/Component.js';
+import '@juggle/resize-observer';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '../../hooks/use-tabs.js';
 import '@alfalab/core-components-shared/modern';
+import '../../hooks/use-tabs.js';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../scroll-controls/Component.js';
@@ -16,10 +17,10 @@ import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-7b0d0808.js';
+import '../../index.module-4070c7f9.js';
 import '@alfalab/core-components-tag/modern/mobile';
 import '../secondary-tablist/Component.js';
-import '../../index.module-2d531cfb.js';
+import '../../index.module-a791a93d.js';
 
 const views = {
     primary: PrimaryTabListMobile,

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

@@ -5,10 +5,11 @@ import { Tabs } from './Component.js';
 import '@alfalab/core-components-mq/modern';
 import '../primary-tablist/Component.desktop.js';
 import '../primary-tablist/Component.js';
+import '@juggle/resize-observer';
 import 'classnames';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import '../../hooks/use-tabs.js';
 import '@alfalab/core-components-shared/modern';
+import '../../hooks/use-tabs.js';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../scroll-controls/Component.js';
@@ -18,12 +19,12 @@ import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-7b0d0808.js';
+import '../../index.module-4070c7f9.js';
 import '../primary-tablist/Component.mobile.js';
 import '../secondary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/modern/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-2d531cfb.js';
+import '../../index.module-a791a93d.js';
 import '../secondary-tablist/Component.mobile.js';
 import '@alfalab/core-components-tag/modern/mobile';
 

package/modern/desktop/index.d.ts

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

package/modern/desktop/index.js

@@ -0,0 +1,25 @@
+export { PrimaryTabListDesktop } from '../components/primary-tablist/Component.desktop.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';
+import 'react';
+import '../components/primary-tablist/Component.js';
+import '@juggle/resize-observer';
+import 'classnames';
+import '@alfalab/core-components-keyboard-focusable/modern';
+import '@alfalab/core-components-shared/modern';
+import '../hooks/use-tabs.js';
+import '../components/scrollable-container/Component.js';
+import 'compute-scroll-into-view';
+import '../components/scroll-controls/Component.js';
+import 'lodash.debounce';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/icons-glyph/ChevronLeftMIcon';
+import '@alfalab/icons-glyph/ChevronRightMIcon';
+import '../components/scroll-controls/utils.js';
+import '../components/title/Component.js';
+import '../index.module-4070c7f9.js';
+import '@alfalab/core-components-tag/modern/desktop';
+import '../components/secondary-tablist/Component.js';
+import '../index.module-a791a93d.js';
+import '../components/tabs/Component.js';

package/modern/index.js

@@ -6,10 +6,11 @@ import 'react';
 import '@alfalab/core-components-mq/modern';
 import './components/primary-tablist/Component.desktop.js';
 import './components/primary-tablist/Component.js';
+import '@juggle/resize-observer';
 import 'classnames';
 import '@alfalab/core-components-keyboard-focusable/modern';
-import './hooks/use-tabs.js';
 import '@alfalab/core-components-shared/modern';
+import './hooks/use-tabs.js';
 import './components/scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import './components/scroll-controls/Component.js';
@@ -19,12 +20,12 @@ import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
 import './components/scroll-controls/utils.js';
 import './components/title/Component.js';
-import './index.module-7b0d0808.js';
+import './index.module-4070c7f9.js';
 import './components/primary-tablist/Component.mobile.js';
 import './components/secondary-tablist/Component.desktop.js';
 import '@alfalab/core-components-tag/modern/desktop';
 import './components/secondary-tablist/Component.js';
-import './index.module-2d531cfb.js';
+import './index.module-a791a93d.js';
 import './components/secondary-tablist/Component.mobile.js';
 import '@alfalab/core-components-tag/modern/mobile';
 import './components/tabs/Component.js';

package/modern/index.module-4070c7f9.js

@@ -0,0 +1,4 @@
+const styles = {"component":"tabs__component_h18s1","fullWidthScroll":"tabs__fullWidthScroll_h18s1","container":"tabs__container_h18s1","title":"tabs__title_h18s1","disabled":"tabs__disabled_h18s1","focused":"tabs__focused_h18s1","collapsed":"tabs__collapsed_h18s1","selected":"tabs__selected_h18s1","line":"tabs__line_h18s1","option":"tabs__option_h18s1","s":"tabs__s_h18s1","xs":"tabs__xs_h18s1","xxs":"tabs__xxs_h18s1","pickerWrapper":"tabs__pickerWrapper_h18s1","m":"tabs__m_h18s1","l":"tabs__l_h18s1","xl":"tabs__xl_h18s1","rightAddons":"tabs__rightAddons_h18s1"};
+require('./components/primary-tablist/index.css')
+
+export { styles as s };

package/modern/index.module-a791a93d.js

@@ -0,0 +1,4 @@
+const commonStyles = {"component":"tabs__component_tladl","fullWidthScroll":"tabs__fullWidthScroll_tladl","container":"tabs__container_tladl","title":"tabs__title_tladl","xxs":"tabs__xxs_tladl","xs":"tabs__xs_tladl","s":"tabs__s_tladl","m":"tabs__m_tladl","l":"tabs__l_tladl","xl":"tabs__xl_tladl"};
+require('./components/secondary-tablist/index.css')
+
+export { commonStyles as c };

package/modern/mobile/index.d.ts

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

package/modern/mobile/index.js

@@ -0,0 +1,25 @@
+export { PrimaryTabListMobile } from '../components/primary-tablist/Component.mobile.js';
+export { SecondaryTabListMobile } from '../components/secondary-tablist/Component.mobile.js';
+export { Tab } from '../components/tab/Component.js';
+export { TabsMobile } from '../components/tabs/Component.mobile.js';
+import 'react';
+import 'classnames';
+import '../components/primary-tablist/Component.js';
+import '@juggle/resize-observer';
+import '@alfalab/core-components-keyboard-focusable/modern';
+import '@alfalab/core-components-shared/modern';
+import '../hooks/use-tabs.js';
+import '../components/scrollable-container/Component.js';
+import 'compute-scroll-into-view';
+import '../components/scroll-controls/Component.js';
+import 'lodash.debounce';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/icons-glyph/ChevronLeftMIcon';
+import '@alfalab/icons-glyph/ChevronRightMIcon';
+import '../components/scroll-controls/utils.js';
+import '../components/title/Component.js';
+import '../index.module-4070c7f9.js';
+import '@alfalab/core-components-tag/modern/mobile';
+import '../components/secondary-tablist/Component.js';
+import '../index.module-a791a93d.js';
+import '../components/tabs/Component.js';

package/modern/shared/index.d.ts

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

package/modern/{shared.js → shared/index.js}

@@ -1,15 +1,15 @@
-export { ScrollableContainer } from './components/scrollable-container/Component.js';
-export { useTabs } from './hooks/use-tabs.js';
-export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
+export { ScrollableContainer } from '../components/scrollable-container/Component.js';
+export { useTabs } from '../hooks/use-tabs.js';
+export { useCollapsibleElements } from '../hooks/use-collapsible-elements.js';
 import 'react';
 import 'classnames';
 import 'compute-scroll-into-view';
-import './components/scroll-controls/Component.js';
+import '../components/scroll-controls/Component.js';
 import 'lodash.debounce';
 import '@alfalab/core-components-icon-button/modern';
 import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
-import './components/scroll-controls/utils.js';
+import '../components/scroll-controls/utils.js';
 import '@alfalab/core-components-shared/modern';
 import '@juggle/resize-observer';
 import '@alfalab/hooks';

package/package.json

@@ -1,39 +1,11 @@
 {
     "name": "@alfalab/core-components-tabs",
-    "version": "8.1.5",
+    "version": "8.2.0",
     "description": "Tabs components",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
-    "exports": {
-        ".": {
-            "import": "./esm/index.js",
-            "require": "./index.js"
-        },
-        "./mobile": {
-            "import": "./esm/mobile.js",
-            "require": "./mobile.js"
-        },
-        "./desktop": {
-            "import": "./esm/desktop.js",
-            "require": "./desktop.js"
-        },
-        "./collapsible": {
-            "import": "./esm/collapsible.js",
-            "require": "./collapsible.js"
-        },
-        "./shared": {
-            "import": "./esm/shared.js",
-            "require": "./shared.js"
-        },
-        "./esm": "./esm/index.js",
-        "./cssm": "./cssm/index.js",
-        "./modern": "./modern/index.js",
-        "./esm/*": "./esm/*",
-        "./cssm/*": "./cssm/*",
-        "./modern/*": "./modern/*"
-    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
@@ -43,13 +15,13 @@
     },
     "dependencies": {
         "@alfalab/core-components-keyboard-focusable": "^4.1.0",
-        "@alfalab/core-components-tag": "^6.0.1",
-        "@alfalab/core-components-picker-button": "^11.1.9",
+        "@alfalab/core-components-tag": "^6.1.0",
+        "@alfalab/core-components-picker-button": "^11.2.0",
         "@alfalab/core-components-badge": "^5.2.0",
         "@alfalab/core-components-mq": "^4.2.0",
         "@alfalab/hooks": "^1.13.0",
-        "@alfalab/core-components-shared": "^0.6.0",
-        "@alfalab/core-components-icon-button": "^6.3.1",
+        "@alfalab/core-components-shared": "^0.7.0",
+        "@alfalab/core-components-icon-button": "^6.3.2",
         "@alfalab/icons-glyph": "^2.108.0",
         "classnames": "^2.3.1",
         "compute-scroll-into-view": "^1.0.20",

package/shared/index.d.ts

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

package/{shared.js → shared/index.js}

@@ -2,19 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
-var hooks_useTabs = require('./hooks/use-tabs.js');
-var hooks_useCollapsibleElements = require('./hooks/use-collapsible-elements.js');
+var components_scrollableContainer_Component = require('../components/scrollable-container/Component.js');
+var hooks_useTabs = require('../hooks/use-tabs.js');
+var hooks_useCollapsibleElements = require('../hooks/use-collapsible-elements.js');
 require('react');
 require('classnames');
 require('compute-scroll-into-view');
-require('./components/scroll-controls/Component.js');
+require('../components/scroll-controls/Component.js');
 require('tslib');
 require('lodash.debounce');
 require('@alfalab/core-components-icon-button');
 require('@alfalab/icons-glyph/ChevronLeftMIcon');
 require('@alfalab/icons-glyph/ChevronRightMIcon');
-require('./components/scroll-controls/utils.js');
+require('../components/scroll-controls/utils.js');
 require('@alfalab/core-components-shared');
 require('@juggle/resize-observer');
 require('@alfalab/hooks');

package/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/src/collapsible/index.ts

@@ -0,0 +1,2 @@
+export { TabsCollapsible, TabsCollapsibleProps } from '../components/tabs/Component.collapsible';
+export * from '../components/tab';

package/src/collapsible/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/collapsible/index.js"
+}

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

@@ -1,7 +1,9 @@
 import React, { useEffect, useRef } from 'react';
+import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
 import cn from 'classnames';
 
 import { KeyboardFocusable } from '@alfalab/core-components-keyboard-focusable';
+import { fnUtils } from '@alfalab/core-components-shared';
 
 import { useTabs } from '../../hooks/use-tabs';
 import { PlatformProps, Styles, TabListProps } from '../../typings';
@@ -30,10 +32,23 @@ export const PrimaryTabList = ({
     });
 
     useEffect(() => {
-        if (selectedTab && lineRef.current) {
-            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
-            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
+        if (selectedTab) {
+            const updateLineWidth = () => {
+                if (lineRef.current) {
+                    lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
+                    lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
+                }
+            };
+
+            const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
+            const observer = new ResizeObserver(updateLineWidth);
+
+            observer.observe(selectedTab);
+
+            return () => observer.disconnect();
         }
+
+        return fnUtils.noop;
     }, [selectedTab]);
 
     const renderContent = () => (

package/src/desktop/index.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/desktop/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/desktop/index.js"
+}

package/src/mobile/index.ts

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

package/src/mobile/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/mobile/index.js"
+}

package/src/shared/index.ts

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

package/src/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/Component-0f4b9bed.d.ts

@@ -1,100 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { FC, ReactNode } from "react";
-import { ModalMobileProps, ContentProps } from "./typings-bdb4c6b9";
-import { BottomSheetProps } from "./index-f12ee135";
-import { BaseSelectProps } from "./typings-0f4b9bed";
-type FooterProps = {
-    /**
-     * Контент футера
-     */
-    children?: ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Фиксирует футер
-     */
-    sticky?: boolean;
-    /**
-     * Выравнивание элементов футера
-     */
-    layout?: "start" | "center" | "space-between" | "column";
-    /**
-     * Отступы между элементами футера
-     */
-    gap?: 16 | 24 | 32;
-};
-declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./typings-bdb4c6b9").ContentProps>;
-    Header: React.FC<import("./Component-c76d6398").HeaderProps>;
-    Footer: React.FC<FooterProps>;
-};
-declare const Content: FC<ContentProps>;
-type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
-    /**
-     * Футер
-     * @deprecated Используйте bottomSheetProps.actionButton
-     */
-    footer?: ReactNode;
-    /**
-     * Будет ли свайпаться шторка
-     * @deprecated Используйте bottomSheetProps.swipeable
-     */
-    swipeable?: boolean;
-    /**
-     * Отображать в BottomSheet
-     */
-    isBottomSheet?: boolean;
-    /**
-     * Дополнительные пропсы шторки
-     */
-    bottomSheetProps?: Partial<BottomSheetProps>;
-    /**
-     *  Дополнительные пропсы модалки
-     */
-    modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
-    /**
-     *  Дополнительные пропсы шапки модалки
-     */
-    modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
-    /**
-     *  Дополнительные пропсы футера модалки
-     */
-    modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
-};
-declare const BaseSelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
-    /**
-     * Футер
-     * @deprecated Используйте bottomSheetProps.actionButton
-     */
-    footer?: ReactNode;
-    /**
-     * Будет ли свайпаться шторка
-     * @deprecated Используйте bottomSheetProps.swipeable
-     */
-    swipeable?: boolean | undefined;
-    /**
-     * Отображать в BottomSheet
-     */
-    isBottomSheet?: boolean | undefined;
-    /**
-     * Дополнительные пропсы шторки
-     */
-    bottomSheetProps?: Partial<BottomSheetProps> | undefined;
-    /**
-     *  Дополнительные пропсы модалки
-     */
-    modalProps?: Partial<ModalMobileProps & React.RefAttributes<HTMLDivElement>> | undefined;
-    /**
-     *  Дополнительные пропсы шапки модалки
-     */
-    modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
-    /**
-     *  Дополнительные пропсы футера модалки
-     */
-    modalFooterProps?: Partial<FooterProps> | undefined;
-} & React.RefAttributes<unknown>>;
-export { ModalMobile, Content, SelectMobileProps, BaseSelectMobile };
-export { ModalMobileProps } from "./typings-bdb4c6b9";

package/Component-4cd3936b.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { FC, SVGProps } from "react";
-import { OptionShape } from "./shared-4cd3936b";
-import { OptionProps as BaseOptionProps } from "./shared-4cd3936b";
-type OptionProps = Omit<BaseOptionProps, 'option'> & {
-    option: OptionShape & {
-        icon?: FC<SVGProps<SVGSVGElement>>;
-    };
-};
-declare const Option: ({ option, children, ...restProps }: OptionProps) => React.JSX.Element;
-export { Option };