@astral/ui 4.104.2 → 4.106.0

package/components/ActionGroup/styles.js

@@ -1,5 +1,10 @@
 import { styled } from '../styled';
+import { actionGroupClassnames } from './constants';
 export const Wrapper = styled.div `
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
+
+  .${actionGroupClassnames.action} {
+    flex-grow: 1;
+  }
 `;

package/components/ActionGroup/types.d.ts

@@ -1,9 +1,51 @@
-import type { ComponentProps, ElementType, ReactNode } from 'react';
+import type { ComponentProps, ElementType, ReactElement, ReactNode } from 'react';
 import type { ButtonProps, ButtonSize } from '../Button';
 import type { DropdownButtonProps } from '../DropdownButton';
 import type { ListItemButtonProps } from '../ListItemButton';
 import type { MenuItemProps } from '../MenuItem';
 import type { TooltipProps } from '../Tooltip';
+/** Свойства стандартного элемента действия, из которых продукт может собрать собственный элемент в `renderAction` */
+export type ActionElementProps = {
+    /** Содержимое действия: название */
+    children: ReactNode;
+    /** Признак блокировки действия */
+    disabled?: boolean;
+    /** Признак загрузки действия */
+    loading?: boolean;
+    /** Обработчик нажатия на действие */
+    onClick?: ButtonProps['onClick'];
+    /** Размер, совпадающий с размером группы действий */
+    size: ButtonSize;
+    /** Класс, отвечающий за поведение действия в ряду группы */
+    className: string;
+};
+/** Контекст renderAction */
+export type ActionRenderContext = {
+    /** Стандартный элемент действия */
+    defaultElement: ReactElement;
+    /** Свойства действия */
+    elementProps: ActionElementProps;
+    /** DOM-узел действия */
+    anchorEl: HTMLElement | null;
+};
+/** Контекст renderAction у действия с выпадающим списком */
+export type NestedActionRenderContext = Pick<ActionRenderContext, 'defaultElement'>;
+type WithRenderAction<TContext = ActionRenderContext> = {
+    /**
+     * Подменяет отображение действия: стандартный элемент можно обернуть
+     * или собрать заново из `elementProps`
+     */
+    renderAction?: (context: TContext) => ReactNode;
+};
+type WithRenderActionDisabled = {
+    /**
+     * Отключает вызов `renderAction` — для копии действий, скрытой через css:
+     * попап из подмены открывается в портале, и css его не прячет
+     *
+     * @default false
+     */
+    isRenderActionDisabled?: boolean;
+};
 type NestedAction = MenuItemProps & {
     /** Название действия */
     text: string;
@@ -33,7 +75,7 @@ export type SingleAction<TMainActionComponent extends ElementType> = Omit<Button
      * Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонент
      */
     component?: TMainActionComponent;
-} & Omit<ComponentProps<ElementType extends TMainActionComponent ? 'button' : TMainActionComponent>, ''>;
+} & WithRenderAction & Omit<ComponentProps<ElementType extends TMainActionComponent ? 'button' : TMainActionComponent>, ''>;
 export type MultipleAction<TMainActionComponent extends ElementType> = Omit<DropdownButtonProps, 'children' | 'name' | 'component'> & {
     /**
      * Флаг показа выпадающего списка при клике
@@ -63,7 +105,7 @@ export type MultipleAction<TMainActionComponent extends ElementType> = Omit<Drop
      * Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонент
      */
     component?: TMainActionComponent;
-} & Omit<ComponentProps<ElementType extends TMainActionComponent ? 'button' : TMainActionComponent>, ''>;
+} & WithRenderAction<NestedActionRenderContext> & Omit<ComponentProps<ElementType extends TMainActionComponent ? 'button' : TMainActionComponent>, ''>;
 /** Модель основного экшена */
 export type MainAction<TMainActionComponent extends ElementType> = SingleAction<TMainActionComponent> | MultipleAction<TMainActionComponent>;
 export type MainActionsProps<TMainActionComponent extends ElementType> = {
@@ -73,7 +115,7 @@ export type MainActionsProps<TMainActionComponent extends ElementType> = {
      */
     isDisabled?: boolean;
     size?: ButtonSize;
-};
+} & WithRenderActionDisabled;
 /** Модель второстепенного экшена */
 export type SecondaryAction<TSecondaryActionComponent extends ElementType> = Omit<ListItemButtonProps, 'children' | 'component'> & {
     /**
@@ -114,7 +156,7 @@ export type SecondaryVisibleAction = Omit<ButtonProps, 'children'> & {
      * Если true, блокирует взаимодействие с actions
      */
     isBlockingOperation?: boolean;
-};
+} & WithRenderAction;
 export type SecondaryVisibleActionProps = {
     /**
      * Видимые второстепенные действия
@@ -125,7 +167,7 @@ export type SecondaryVisibleActionProps = {
      */
     className?: string;
     size?: ButtonSize;
-};
+} & WithRenderActionDisabled;
 export type ActionGroupProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = {
     /**
      * Основные действия

package/components/InfiniteTreeList/InfiniteTreeList.js

@@ -2,14 +2,28 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // cspell:ignore Виртуализированное
 import { Virtuoso } from 'react-virtuoso';
 import { ContentState } from '../ContentState';
+import { selfContainedClassname } from '../constants';
+import { cva } from '../utils/cva';
+import { infiniteTreeListClassnames } from './constants';
 import { InfiniteTreeListContextProvider, } from './InfiniteTreeListContext';
+import { LevelHeader } from './LevelHeader';
 import { ListFooter } from './ListFooter';
 import { NoDataPlaceholder } from './NoDataPlaceholder';
 import { OnTopButton } from './OnTopButton';
 import { ParentItems } from './ParentItems';
+import { InfiniteTreeListWrapper } from './styles';
 import { TreeItem } from './TreeItem';
 import { useLogic } from './useLogic';
 const computeItemKey = (_, item) => item.id;
+const rootCva = cva([selfContainedClassname, infiniteTreeListClassnames.root], {
+    variants: {
+        state: {
+            loading: infiniteTreeListClassnames.loading,
+            error: infiniteTreeListClassnames.error,
+            noData: infiniteTreeListClassnames.noData,
+        },
+    },
+});
 /**
  * Виртуализированное дерево с бесконечной подгрузкой
  *
@@ -29,6 +43,6 @@ const computeItemKey = (_, item) => item.id;
  * />
  */
 export const InfiniteTreeList = (props) => {
-    const { flatList, onToggle, contentStateProps, scrollParent, virtuosoProps, footerContext, onTopButtonProps, renderItem, renderParent, items, itemSkeleton, onRetry, noDataImgSrc, enterAnimation, tailRegistry, nodePaginationMap, registerChildren, notifyExpand, parentItems, acquireParentSlot, } = useLogic(props);
-    return (_jsxs(InfiniteTreeListContextProvider, { itemSkeleton: itemSkeleton, nodePaginationMap: nodePaginationMap, registerChildren: registerChildren, notifyExpand: notifyExpand, onListRetry: onRetry, enterAnimation: enterAnimation, tailRegistry: tailRegistry, renderItem: renderItem, renderParent: renderParent, onToggle: onToggle, acquireParentSlot: acquireParentSlot, children: [_jsx(ParentItems, { parents: parentItems }), _jsx(ContentState, { ...contentStateProps, children: items.length > 0 && scrollParent ? (_jsxs(_Fragment, { children: [_jsx(Virtuoso, { ...virtuosoProps, data: flatList, customScrollParent: scrollParent, computeItemKey: computeItemKey, context: footerContext, components: { Item: TreeItem, Footer: ListFooter } }), _jsx(OnTopButton, { ...onTopButtonProps })] })) : (_jsx(NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) })] }));
+    const { displayedList, levelKey, lastRowId, levelHeaderProps, onToggle, contentStateProps, isNoData, state, scrollParent, listRef, virtuosoProps, footerContext, onTopButtonProps, renderItem, renderParent, itemSkeleton, onRetry, noDataImgSrc, enterAnimation, tailRegistry, nodePaginationMap, registerChildren, notifyExpand, parentItems, acquireParentSlot, } = useLogic(props);
+    return (_jsx(InfiniteTreeListWrapper, { ref: listRef, className: rootCva({ state }), children: _jsxs(InfiniteTreeListContextProvider, { itemSkeleton: itemSkeleton, nodePaginationMap: nodePaginationMap, registerChildren: registerChildren, notifyExpand: notifyExpand, onListRetry: onRetry, enterAnimation: enterAnimation, tailRegistry: tailRegistry, renderItem: renderItem, renderParent: renderParent, onToggle: onToggle, acquireParentSlot: acquireParentSlot, lastRowId: lastRowId, children: [_jsx(ParentItems, { parents: parentItems }), levelHeaderProps && _jsx(LevelHeader, { ...levelHeaderProps }), _jsxs(ContentState, { ...contentStateProps, children: [isNoData && _jsx(NoDataPlaceholder, { noDataImgSrc: noDataImgSrc }), !isNoData && scrollParent && (_jsxs(_Fragment, { children: [_jsx(Virtuoso, { ...virtuosoProps, data: displayedList, customScrollParent: scrollParent, computeItemKey: computeItemKey, context: footerContext, components: { Item: TreeItem, Footer: ListFooter } }, levelKey), _jsx(OnTopButton, { ...onTopButtonProps })] }))] })] }) }));
 };

package/components/InfiniteTreeList/InfiniteTreeListContext/InfiniteTreeListContext.d.ts

@@ -84,5 +84,9 @@ export type InfiniteTreeListContextProps = {
      * виртуализации, а её контейнер переносится в строку скролла
      */
     acquireParentSlot: (itemId: string) => HTMLDivElement | null;
+    /**
+     * Id последней строки данных
+     */
+    lastRowId?: string;
 };
 export declare const InfiniteTreeListContext: import("react").Context<InfiniteTreeListContextProps>;

package/components/InfiniteTreeList/InfiniteTreeListContext/InfiniteTreeListContext.js

@@ -22,6 +22,7 @@ export const InfiniteTreeListContext = createContext({
         register: () => undefined,
         unregister: () => undefined,
         checkRange: () => undefined,
+        forgetRange: () => undefined,
     },
     acquireParentSlot: () => null,
 });

package/components/InfiniteTreeList/InfiniteTreeListContext/InfiniteTreeListContextProvider/InfiniteTreeListContextProvider.d.ts

@@ -1,8 +1,8 @@
 import { type ReactNode } from 'react';
 import { type InfiniteTreeListContextProps } from '../InfiniteTreeListContext';
-type Props = Pick<InfiniteTreeListContextProps, 'itemSkeleton' | 'nodePaginationMap' | 'enterAnimation' | 'tailRegistry' | 'registerChildren' | 'notifyExpand' | 'renderItem' | 'renderParent' | 'onToggle' | 'acquireParentSlot'> & {
+type Props = Pick<InfiniteTreeListContextProps, 'itemSkeleton' | 'nodePaginationMap' | 'enterAnimation' | 'tailRegistry' | 'registerChildren' | 'notifyExpand' | 'renderItem' | 'renderParent' | 'onToggle' | 'acquireParentSlot' | 'lastRowId'> & {
     children: ReactNode;
     onListRetry: () => void;
 };
-export declare const InfiniteTreeListContextProvider: ({ children, itemSkeleton, nodePaginationMap, onListRetry, registerChildren, notifyExpand, enterAnimation, tailRegistry, renderItem, renderParent, onToggle, acquireParentSlot, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const InfiniteTreeListContextProvider: ({ children, itemSkeleton, nodePaginationMap, onListRetry, registerChildren, notifyExpand, enterAnimation, tailRegistry, renderItem, renderParent, onToggle, acquireParentSlot, lastRowId, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/InfiniteTreeList/InfiniteTreeListContext/InfiniteTreeListContextProvider/InfiniteTreeListContextProvider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { InfiniteTreeListContext, } from '../InfiniteTreeListContext';
-export const InfiniteTreeListContextProvider = ({ children, itemSkeleton, nodePaginationMap, onListRetry, registerChildren, notifyExpand, enterAnimation, tailRegistry, renderItem, renderParent, onToggle, acquireParentSlot, }) => {
+export const InfiniteTreeListContextProvider = ({ children, itemSkeleton, nodePaginationMap, onListRetry, registerChildren, notifyExpand, enterAnimation, tailRegistry, renderItem, renderParent, onToggle, acquireParentSlot, lastRowId, }) => {
     const [disabledIdList, setDisabledIdList] = useState(new Set());
     const childrenCallbacksRef = useRef({});
     const setDisabled = useCallback((itemId, disabled) => {
@@ -51,6 +51,7 @@ export const InfiniteTreeListContextProvider = ({ children, itemSkeleton, nodePa
         enterAnimation,
         tailRegistry,
         acquireParentSlot,
+        lastRowId,
     }), [
         renderItem,
         renderParent,
@@ -67,6 +68,7 @@ export const InfiniteTreeListContextProvider = ({ children, itemSkeleton, nodePa
         enterAnimation,
         tailRegistry,
         acquireParentSlot,
+        lastRowId,
     ]);
     return (_jsx(InfiniteTreeListContext.Provider, { value: value, children: children }));
 };

package/components/InfiniteTreeList/InfiniteTreeListItem/ErrorPlaceholder/styles.js

@@ -5,4 +5,12 @@ export const Wrapper = styled.div `
   align-items: center;
 
   padding: ${({ theme }) => theme.spacing(0, 4)};
+
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    flex-direction: column;
+    gap: ${({ theme }) => theme.microSpacing(9)};
+
+    width: 100%;
+    padding: ${({ theme }) => theme.microSpacing(11, 0, 10)};
+  }
 `;

package/components/InfiniteTreeList/InfiniteTreeListItem/InfiniteTreeListItem.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Chevron } from '../../Chevron';
 import { ContentState } from '../../ContentState';
 import { Loader } from '../../Loader';
 import { Tooltip } from '../../Tooltip';
@@ -8,7 +7,7 @@ import { cva } from '../../utils/cva';
 import { getInertProps } from '../../utils/getInertProps';
 import { infiniteTreeListItemClassnames } from './constants';
 import { ErrorPlaceholder } from './ErrorPlaceholder';
-import { ActionsWrapper, LoaderWrapper, Wrapper } from './styles';
+import { ActionsWrapper, Content, LoaderWrapper, NestedIndicator, StyledChevron, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 const infiniteTreeListItemCva = cva(infiniteTreeListItemClassnames.root, {
     variants: {
@@ -21,6 +20,9 @@ const infiniteTreeListItemCva = cva(infiniteTreeListItemClassnames.root, {
         hasNested: {
             true: infiniteTreeListItemClassnames.hasNested,
         },
+        hasActions: {
+            true: infiniteTreeListItemClassnames.hasActions,
+        },
     },
 });
 export const InfiniteTreeListItem = (props) => {
@@ -29,9 +31,10 @@ export const InfiniteTreeListItem = (props) => {
     if (isRowError) {
         return _jsx(ErrorPlaceholder, { onRetry: onRetry, errorMsg: errorMsg });
     }
-    return (_jsx(ContentState, { isLoading: isRowLoading, isSmoothLoading: false, loadingContent: _jsx(Wrapper, { className: infiniteTreeListItemCva({ isLoading: true }), children: itemSkeleton || (_jsx(LoaderWrapper, { children: _jsx(Loader, {}) })) }), children: _jsx(Tooltip, { ...tooltipProps, children: _jsxs(Wrapper, { onClick: handleClick, className: cn(infiniteTreeListItemCva({
+    return (_jsx(ContentState, { isLoading: isRowLoading, isSmoothLoading: false, loadingContent: _jsx(Wrapper, { className: infiniteTreeListItemCva({ isLoading: true }), children: _jsx(Content, { children: itemSkeleton || (_jsx(LoaderWrapper, { children: _jsx(Loader, {}) })) }) }), children: _jsx(Tooltip, { ...tooltipProps, children: _jsxs(Wrapper, { onClick: handleClick, className: cn(infiniteTreeListItemCva({
                     isDisabled: Boolean(isDisabled || isDisabledByActions),
                     isLoading: isRowLoading,
                     hasNested: item.meta.hasNested,
-                }), className), ...getInertProps(isDisabled || isDisabledByActions), children: [item.meta.hasNested && _jsx(Chevron, { isActive: isChevronActive }), children, actions && _jsx(ActionsWrapper, { children: actions })] }, `infinite-tree-list-item-${item.id}`) }) }));
+                    hasActions: Boolean(actions),
+                }), className), ...getInertProps(isDisabled || isDisabledByActions), children: [item.meta.hasNested && (_jsx(NestedIndicator, { children: _jsx(StyledChevron, { isActive: isChevronActive }) })), _jsx(Content, { className: infiniteTreeListItemClassnames.content, children: children }), actions && _jsx(ActionsWrapper, { children: actions })] }, `infinite-tree-list-item-${item.id}`) }) }));
 };

package/components/InfiniteTreeList/InfiniteTreeListItem/constants.d.ts

@@ -1,6 +1,8 @@
 export declare const infiniteTreeListItemClassnames: {
     root: string;
+    content: string;
     disabled: string;
     loading: string;
     hasNested: string;
+    hasActions: string;
 };

package/components/InfiniteTreeList/InfiniteTreeListItem/constants.js

@@ -1,7 +1,9 @@
 import { createUIKitClassname } from '../../utils/createUIKitClassname';
 export const infiniteTreeListItemClassnames = {
     root: createUIKitClassname('infinite-tree-list__item'),
+    content: createUIKitClassname('infinite-tree-list__item-content'),
     disabled: createUIKitClassname('infinite-tree-list__item_disabled'),
     loading: createUIKitClassname('infinite-tree-list__item_loading'),
     hasNested: createUIKitClassname('infinite-tree-list__item_has-nested'),
+    hasActions: createUIKitClassname('infinite-tree-list__item_has-actions'),
 };

package/components/InfiniteTreeList/InfiniteTreeListItem/index.d.ts

@@ -1,3 +1,4 @@
 export * from './InfiniteTreeListItem';
 export * from './types';
 export * from './TreeListItemContext';
+export { infiniteTreeListItemClassnames } from './constants';

package/components/InfiniteTreeList/InfiniteTreeListItem/index.js

@@ -1,3 +1,4 @@
 export * from './InfiniteTreeListItem';
 export * from './types';
 export * from './TreeListItemContext';
+export { infiniteTreeListItemClassnames } from './constants';

package/components/InfiniteTreeList/InfiniteTreeListItem/styles.d.ts

@@ -3,6 +3,20 @@ export declare const Wrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NestedIndicator: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledChevron: import("../../styled").StyledComponent<{
+    isActive?: boolean | undefined;
+    className?: string | undefined;
+} & Omit<import("../..").WithoutEmotionSpecific<import("../..").SvgIconProps>, "classes" | "children" | "ref"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export declare const ActionsWrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/InfiniteTreeList/InfiniteTreeListItem/styles.js

@@ -1,10 +1,12 @@
+import { Chevron } from '../../Chevron';
 import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 import { infiniteTreeListItemClassnames } from './constants';
 export const Wrapper = styled.div `
   cursor: default;
 
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr;
   gap: ${({ theme }) => theme.spacing(3)};
   align-items: center;
 
@@ -25,8 +27,18 @@ export const Wrapper = styled.div `
     }
   }
 
+  &.${infiniteTreeListItemClassnames.hasActions} {
+    grid-template-columns: 1fr auto;
+  }
+
   &.${infiniteTreeListItemClassnames.hasNested} {
     cursor: pointer;
+
+    grid-template-columns: auto 1fr;
+
+    &.${infiniteTreeListItemClassnames.hasActions} {
+      grid-template-columns: auto 1fr auto;
+    }
   }
 
   &.${infiniteTreeListItemClassnames.loading} {
@@ -43,11 +55,63 @@ export const Wrapper = styled.div `
   &.${infiniteTreeListItemClassnames.disabled}:hover {
     background-color: ${({ theme }) => theme.palette.background.default};
   }
+
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    grid-template-columns: 1fr;
+    row-gap: ${({ theme }) => theme.spacing(4)};
+
+    padding: ${({ theme }) => theme.spacing(5, 4)};
+
+    &.${infiniteTreeListItemClassnames.hasNested} {
+      grid-template-columns: 1fr auto;
+      
+      &.${infiniteTreeListItemClassnames.hasActions} {
+        grid-template-columns: 1fr auto;
+      }
+    }
+  }
+`;
+export const Content = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(3)};
+  align-items: center;
+
+  min-width: 0;
+
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    grid-column: 1;
+    grid-row: 1;
+  }
+`;
+export const NestedIndicator = styled.div `
+  display: flex;
+  align-items: center;
+
+  min-height: ${({ theme }) => theme.typography.body1.lineHeight};
+
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: center;
+  }
+`;
+export const StyledChevron = styled(Chevron) `
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    transform: rotateZ(270deg);
+
+    width: 24px;
+    height: 24px;
+
+    transition: none;
+  }
 `;
 export const ActionsWrapper = styled.div `
   display: flex;
 
-  margin-left: auto;
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
 `;
 export const LoaderWrapper = styled.div `
   display: flex;

package/components/InfiniteTreeList/LevelHeader/LevelHeader.d.ts

@@ -0,0 +1,5 @@
+import { type LevelHeaderProps } from './types';
+/**
+ * Шапка отображаемого уровня на мобильной ширине
+ */
+export declare const LevelHeader: ({ title, hasBackButton, onBack, }: LevelHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/components/InfiniteTreeList/LevelHeader/LevelHeader.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLOutlineMd } from '../../../icons/ChevronLOutlineMd';
+import { cva } from '../../utils/cva';
+import { infiniteTreeListClassnames } from '../constants';
+import { LEVEL_BACK_TITLE } from './constants';
+import { BackButton, Title, Wrapper } from './styles';
+const wrapperCva = cva(infiniteTreeListClassnames.levelHeader, {
+    variants: {
+        hasBackButton: {
+            true: infiniteTreeListClassnames.levelHeaderWithBackButton,
+        },
+    },
+});
+/**
+ * Шапка отображаемого уровня на мобильной ширине
+ */
+export const LevelHeader = ({ title = LEVEL_BACK_TITLE, hasBackButton, onBack, }) => (_jsxs(Wrapper, { className: wrapperCva({ hasBackButton }), children: [hasBackButton && (_jsx(BackButton, { className: infiniteTreeListClassnames.levelHeaderBackButton, variant: "text", "aria-label": LEVEL_BACK_TITLE, onClick: onBack, children: _jsx(ChevronLOutlineMd, {}) })), _jsx(Title, { rowsCount: 2, children: title })] }));

package/components/InfiniteTreeList/LevelHeader/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const LEVEL_BACK_TITLE = "\u041D\u0430\u0437\u0430\u0434";
+export declare const LEVEL_BACK_BUTTON_WIDTH = "72px";
+export declare const LEVEL_BACK_BUTTON_ICON_SIZE = "24px";

package/components/InfiniteTreeList/LevelHeader/constants.js

@@ -0,0 +1,3 @@
+export const LEVEL_BACK_TITLE = 'Назад';
+export const LEVEL_BACK_BUTTON_WIDTH = '72px';
+export const LEVEL_BACK_BUTTON_ICON_SIZE = '24px';

package/components/InfiniteTreeList/LevelHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './LevelHeader';
+export * from './types';

package/components/InfiniteTreeList/LevelHeader/index.js

@@ -0,0 +1,2 @@
+export * from './LevelHeader';
+export * from './types';