@alfalab/core-components 44.5.0-beta.1 → 44.5.0-beta.2

package/tabs/modern/components/primary-tablist/Component.collapsible.js

@@ -6,7 +6,7 @@ import { PickerButtonDesktop } from '../../../../picker-button/modern/desktop';
 import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
 import { createSyntheticMouseEvent } from '../../synthetic-events.js';
 import { Title } from '../title/Component.js';
-import { s as styles } from '../../index.module-b0eb0617.js';
+import { s as styles } from '../../index.module-9b682de1.js';
 import '../../../../mq/modern';
 import '@juggle/resize-observer';
 import '@alfalab/hooks';
@@ -31,12 +31,12 @@ const CollapsiblePrimaryTabList = ({ size = 'm', className, containerClassName,
             lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
         }
     }, [selectedTab, tablistTitles]);
-    const collapsedOptions = useMemo(() => tablistTitles.reduce((options, { ref, ...title }) => {
+    const collapsedOptions = useMemo(() => tablistTitles.reduce((options, { toggleRef, ...title }) => {
         if (title.collapsed) {
             options.push({
                 key: title.title,
                 value: title.id,
-                content: (React.createElement(Title, { ...title, ref: ref, styles: styles, isOption: true })),
+                content: (React.createElement(Title, { ...title, ref: toggleRef, styles: styles, isOption: true })),
             });
         }
         return options;
@@ -52,7 +52,7 @@ const CollapsiblePrimaryTabList = ({ size = 'm', className, containerClassName,
     const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size], {
             [styles.fullWidthScroll]: fullWidthScroll,
         }) },
-        tablistTitles.map(({ dataTestId: _, ref: __, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
+        tablistTitles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
         collapsedOptions.length ? (React.createElement("span", { ref: addonRef, role: 'menu', className: styles.pickerWrapper },
             React.createElement(PickerButtonDesktop, { fieldClassName: styles.title, optionClassName: cn(styles.pickerOption, size && styles[size]), options: collapsedOptions, onChange: handleOptionsChange, rightAddons: collapsedAddonsLength ? (React.createElement(Badge, { view: 'count', content: collapsedAddonsLength })) : null, size: 'm', view: 'ghost', label: '\u0415\u0449\u0451', popoverPosition: 'bottom-end' }))) : null,
         React.createElement("div", { className: styles.line, ref: lineRef })));

package/tabs/modern/components/primary-tablist/Component.desktop.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { s as styles } from '../../index.module-b0eb0617.js';
+import { s as styles } from '../../index.module-9b682de1.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/modern';

package/tabs/modern/components/primary-tablist/Component.js

@@ -40,7 +40,7 @@ const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titl
     const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size], {
             [styles.fullWidthScroll]: fullWidthScroll,
         }) },
-        titles.map(({ dataTestId: _, ref: __, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
+        titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
         React.createElement("div", { className: styles.line, ref: lineRef })));
     return scrollable ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll, view: 'primary', size: size, platform: platform }, renderContent())) : (React.createElement("div", { className: cn(styles.container, containerClassName) }, renderContent()));
 };

package/tabs/modern/components/primary-tablist/Component.mobile.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import { PrimaryTabList } from './Component.js';
-import { s as styles$1 } from '../../index.module-b0eb0617.js';
+import { s as styles$1 } from '../../index.module-9b682de1.js';
 import '@juggle/resize-observer';
 import '../../../../keyboard-focusable/modern';
 import '../../../../shared/modern';

package/tabs/modern/components/primary-tablist/Component.responsive.js

@@ -15,7 +15,7 @@ import 'lodash.debounce';
 import '../../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../../index.module-b0eb0617.js';
+import '../../index.module-9b682de1.js';
 import './Component.js';
 import '../../hooks/use-tabs.js';
 import '../scroll-controls/utils.js';

package/tabs/modern/components/secondary-tablist/Component.desktop.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TagDesktop } from '../../../../tag/modern/desktop';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-11a3c51b.js';
+import { c as commonStyles } from '../../index.module-461a89ca.js';
 import 'classnames';
 import 'react-merge-refs';
 import '../../../../shared/modern';

package/tabs/modern/components/secondary-tablist/Component.mobile.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { TagMobile } from '../../../../tag/modern/mobile';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-11a3c51b.js';
+import { c as commonStyles } from '../../index.module-461a89ca.js';
 import 'react-merge-refs';
 import '../../../../shared/modern';
 import '../scrollable-container/Component.js';

package/tabs/modern/components/secondary-tablist/Component.responsive.js

@@ -13,7 +13,7 @@ import 'lodash.debounce';
 import '../../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../../index.module-11a3c51b.js';
+import '../../index.module-461a89ca.js';
 import '../../../../tag/modern/mobile';
 import './Component.js';
 import '../../hooks/use-tabs.js';

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

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

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

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import cn from 'classnames';
 
 const styles = {"component":"tabs__component_fie4e","hidden":"tabs__hidden_fie4e"};
 require('./index.css');
 
-const Tab = forwardRef(({ children, hidden, className, disabled, dataTestId }, ref) => children ? (React.createElement("div", { ref: ref, className: cn(styles.component, {
+const Tab = ({ children, hidden, className, disabled, dataTestId }) => children ? (React.createElement("div", { className: cn(styles.component, {
         [styles.hidden]: hidden,
-    }, className), hidden: hidden, role: 'tabpanel', tabIndex: disabled ? -1 : 0, "data-test-id": dataTestId }, children)) : null);
+    }, className), hidden: hidden, role: 'tabpanel', tabIndex: disabled ? -1 : 0, "data-test-id": dataTestId }, children)) : null;
 
 export { Tab };

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

@@ -11,7 +11,7 @@ import '@alfalab/hooks';
 import 'react-merge-refs';
 import '../../../../shared/modern';
 import '../title/Component.js';
-import '../../index.module-b0eb0617.js';
+import '../../index.module-9b682de1.js';
 import '../../hooks/use-tablist-titles.js';
 import '../../hooks/use-collapsible-elements.js';
 import '../../hooks/use-tabs.js';

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

@@ -15,9 +15,9 @@ import 'lodash.debounce';
 import '../../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../../index.module-b0eb0617.js';
+import '../../index.module-9b682de1.js';
 import '../../../../tag/modern/desktop';
-import '../../index.module-11a3c51b.js';
+import '../../index.module-461a89ca.js';
 import '../primary-tablist/Component.js';
 import '../../hooks/use-tabs.js';
 import '../scroll-controls/utils.js';

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

@@ -2,7 +2,7 @@ import React, { cloneElement } from 'react';
 
 const Tabs = ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, breakpoint = 1024, tagShape, tagView, }) => {
     const tabsArray = React.Children.toArray(children);
-    const titles = tabsArray.map(({ props: { title, id, rightAddons, disabled, hidden, toggleClassName, dataTestId: toggleTestId, }, ref, }) => ({
+    const titles = tabsArray.map(({ props: { title, id, rightAddons, disabled, hidden, toggleClassName, dataTestId: toggleTestId, toggleRef, }, }) => ({
         title,
         id,
         disabled,
@@ -10,7 +10,7 @@ const Tabs = ({ TabList, className, containerClassName, size, defaultMatchMediaV
         hidden,
         toggleClassName,
         dataTestId: toggleTestId,
-        ref,
+        toggleRef,
     }));
     const tabs = tabsArray.filter((tab) => tab.props.id === selectedId || tab.props.keepMounted || keepMounted);
     return (React.createElement("div", { className: className },

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

@@ -15,9 +15,9 @@ import 'lodash.debounce';
 import '../../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../../index.module-b0eb0617.js';
+import '../../index.module-9b682de1.js';
 import '../../../../tag/modern/mobile';
-import '../../index.module-11a3c51b.js';
+import '../../index.module-461a89ca.js';
 import '../primary-tablist/Component.js';
 import '../../hooks/use-tabs.js';
 import '../scroll-controls/utils.js';

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

@@ -16,10 +16,10 @@ import 'lodash.debounce';
 import '../../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../../index.module-b0eb0617.js';
+import '../../index.module-9b682de1.js';
 import '../primary-tablist/Component.mobile.js';
 import '../../../../tag/modern/desktop';
-import '../../index.module-11a3c51b.js';
+import '../../index.module-461a89ca.js';
 import '../secondary-tablist/Component.mobile.js';
 import '../../../../tag/modern/mobile';
 import '../primary-tablist/Component.desktop.js';

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

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

package/tabs/modern/desktop/index.js

@@ -16,9 +16,9 @@ import 'lodash.debounce';
 import '../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../index.module-b0eb0617.js';
+import '../index.module-9b682de1.js';
 import '../../../tag/modern/desktop';
-import '../index.module-11a3c51b.js';
+import '../index.module-461a89ca.js';
 import '../components/primary-tablist/Component.js';
 import '../hooks/use-tabs.js';
 import '../components/scroll-controls/utils.js';

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

@@ -13,7 +13,7 @@ declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, breakpo
         hidden?: boolean | undefined;
         toggleClassName?: string | undefined;
         dataTestId?: string | undefined;
-        ref?: import("react").Ref<HTMLDivElement> | undefined;
+        toggleRef?: import("react").Ref<HTMLDivElement> | undefined;
     }[];
     selectedTab: HTMLButtonElement | null;
     focusedTab: HTMLButtonElement | null;

package/tabs/modern/hooks/use-tabs.js

@@ -78,8 +78,8 @@ function useTabs({ titles = [], selectedId, onChange }) {
                 handleItemRef(node, item, index);
             },
         ];
-        if (item.ref) {
-            refs.push(item.ref);
+        if (item.toggleRef) {
+            refs.push(item.toggleRef);
         }
         return {
             role: 'tab',

package/tabs/modern/index.js

@@ -17,10 +17,10 @@ import 'lodash.debounce';
 import '../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
-import './index.module-b0eb0617.js';
+import './index.module-9b682de1.js';
 import './components/primary-tablist/Component.mobile.js';
 import '../../tag/modern/desktop';
-import './index.module-11a3c51b.js';
+import './index.module-461a89ca.js';
 import './components/secondary-tablist/Component.mobile.js';
 import '../../tag/modern/mobile';
 import './components/primary-tablist/Component.desktop.js';

package/tabs/modern/mobile/index.js

@@ -16,9 +16,9 @@ import 'lodash.debounce';
 import '../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronLeftMIcon';
 import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../index.module-b0eb0617.js';
+import '../index.module-9b682de1.js';
 import '../../../tag/modern/mobile';
-import '../index.module-11a3c51b.js';
+import '../index.module-461a89ca.js';
 import '../components/primary-tablist/Component.js';
 import '../hooks/use-tabs.js';
 import '../components/scroll-controls/utils.js';

package/tabs/modern/typings.d.ts

@@ -1,4 +1,4 @@
-import { FC, FunctionComponentElement, MouseEvent, ReactNode, Ref } from 'react';
+import { FC, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 import { TagProps } from "../../tag";
 type SelectedId = string | number;
 type TabsProps = {
@@ -49,7 +49,7 @@ type TabsProps = {
     /**
      * Компоненты табов
      */
-    children: Array<FunctionComponentElement<TabProps>>;
+    children: Array<ReactElement<TabProps>>;
     /**
      * Компонент заголовков табов
      */
@@ -120,9 +120,9 @@ type TabProps = {
      */
     dataTestId?: string;
     /**
-     * Реф на компонент таба
+     * Реф для кнопки переключения таба
      */
-    ref?: Ref<HTMLDivElement>;
+    toggleRef?: Ref<HTMLDivElement>;
 };
 type TabListTitle = {
     title: string;
@@ -134,7 +134,7 @@ type TabListTitle = {
     selected?: boolean;
     collapsed?: boolean;
     dataTestId?: string;
-    ref?: Ref<HTMLDivElement>;
+    toggleRef?: Ref<HTMLDivElement>;
 };
 type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView'> & {
     /**

package/tabs/typings.d.ts

@@ -1,4 +1,4 @@
-import { FC, FunctionComponentElement, MouseEvent, ReactNode, Ref } from 'react';
+import { FC, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 import { TagProps } from "../tag";
 type SelectedId = string | number;
 type TabsProps = {
@@ -49,7 +49,7 @@ type TabsProps = {
     /**
      * Компоненты табов
      */
-    children: Array<FunctionComponentElement<TabProps>>;
+    children: Array<ReactElement<TabProps>>;
     /**
      * Компонент заголовков табов
      */
@@ -120,9 +120,9 @@ type TabProps = {
      */
     dataTestId?: string;
     /**
-     * Реф на компонент таба
+     * Реф для кнопки переключения таба
      */
-    ref?: Ref<HTMLDivElement>;
+    toggleRef?: Ref<HTMLDivElement>;
 };
 type TabListTitle = {
     title: string;
@@ -134,7 +134,7 @@ type TabListTitle = {
     selected?: boolean;
     collapsed?: boolean;
     dataTestId?: string;
-    ref?: Ref<HTMLDivElement>;
+    toggleRef?: Ref<HTMLDivElement>;
 };
 type TabListProps = Pick<TabsProps, 'className' | 'containerClassName' | 'size' | 'defaultMatchMediaValue' | 'selectedId' | 'scrollable' | 'collapsedTabsIds' | 'onChange' | 'dataTestId' | 'fullWidthScroll' | 'tagShape' | 'tagView'> & {
     /**

package/themes/compiled/mobile-dark-bluetint.css

@@ -1,4 +1,8 @@
-.badge__component_p8duf.badge__background-accent_p8duf {
+.card-image__cardImage_1k8yn {
+    background: #e7e8ea;
+} .card-image__loaded_1k8yn {
+    background: transparent
+}.badge__component_p8duf.badge__background-accent_p8duf {
         background-color: #f83a2a;
         color: #fff;
     } .badge__component_p8duf.badge__background-specialbg-secondary-transparent_p8duf {
@@ -58,10 +62,6 @@
         background-color: #fff;
     } .badge__dot_p8duf.badge__outlineCount_p8duf {
     border: 1px solid #0e0e0e;
-}.card-image__cardImage_1k8yn {
-    background: #e7e8ea;
-} .card-image__loaded_1k8yn {
-    background: transparent
 }.backdrop__backdrop_14bwb {
     -webkit-tap-highlight-color: transparent;
 } .backdrop__appear_14bwb,
@@ -168,15 +168,7 @@
         background: #fff;
     } .hatching-progress-bar__accent_1wgx6 {
         background: #f83a2a;
-    }.icon-view__component_177z0 {
-    color: rgba(238, 238, 251, 0.55)
-} .icon-view__bg_177z0 {
-    fill: #1c1c1e;
-} .icon-view__border_177z0 {
-    stroke: rgba(225, 225, 248, 0.09);
-    fill: transparent;
-} .icon-view__children_177z0 {
-}.indicator__component_1s4fn {
+    }.indicator__component_1s4fn {
     color: #fff;
     background-color: #f83a2a;
 } .indicator__red_1s4fn {
@@ -194,7 +186,15 @@
     color: #fff
 } .indicator__grey_1s4fn.indicator__border_1s4fn {
         outline: 2px solid #0e0e0e;
-    }@keyframes loader__blink_19mvr {
+    }.icon-view__component_177z0 {
+    color: rgba(238, 238, 251, 0.55)
+} .icon-view__bg_177z0 {
+    fill: #1c1c1e;
+} .icon-view__border_177z0 {
+    stroke: rgba(225, 225, 248, 0.09);
+    fill: transparent;
+} .icon-view__children_177z0 {
+}@keyframes loader__blink_19mvr {
 }.link__primary_1gtu8 {
     color: #fff;
     border-bottom-color: #fff
@@ -264,7 +264,17 @@
         background: #fff;
     } .progress-bar__filled_uf3eh.progress-bar__accent_uf3eh {
         background: #f83a2a;
-    }.skeleton__component_j6u5v {
+    }.scrollbar__component_1cqd8 .scrollbar:before {
+            background-color: rgba(228, 228, 251, 0.28);
+        } .scrollbar__component_1cqd8.dragging .track .scrollbar.visible:before {
+            background-color: rgba(238, 238, 254, 0.46);
+        }
+
+.scrollbar__component_vrncm .scrollbar:before {
+            background-color: rgba(9, 12, 37, 0.28);
+        } .scrollbar__component_vrncm.dragging .track .scrollbar.visible:before {
+            background-color: rgba(4, 4, 21, 0.47);
+        }.skeleton__component_j6u5v {
     color: transparent;
     background: rgba(214, 214, 229, 0.07);
 } .skeleton__component_j6u5v:before {
@@ -286,17 +296,7 @@
     100% {
         background: rgb(198, 205, 214);
     }
-}.scrollbar__component_1cqd8 .scrollbar:before {
-            background-color: rgba(228, 228, 251, 0.28);
-        } .scrollbar__component_1cqd8.dragging .track .scrollbar.visible:before {
-            background-color: rgba(238, 238, 254, 0.46);
-        }
-
-.scrollbar__component_vrncm .scrollbar:before {
-            background-color: rgba(9, 12, 37, 0.28);
-        } .scrollbar__component_vrncm.dragging .track .scrollbar.visible:before {
-            background-color: rgba(4, 4, 21, 0.47);
-        }.segmented-control__wrapper_1kily {
+}.segmented-control__wrapper_1kily {
     background-color: rgba(225, 225, 248, 0.09);
 } .segmented-control__segment_1kily.segmented-control__selected_1kily {
     color: #fff;