@astral/ui 4.105.0 → 4.106.0

package/node/components/ActionCellBase/MainAction/MobileMainButton/styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/ActionCellBase/MainAction/MobileMainButton/styles.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledButton = void 0;
+const Button_1 = require("../../../Button");
+const styled_1 = require("../../../styled");
+exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
+  order: 1;
+
+  width: 100%;
+`;

package/node/components/ActionCellBase/SecondaryAction/SecondaryAction.js

@@ -4,10 +4,10 @@ exports.SecondaryActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DotsVOutlineMd_1 = require("../../../icons/DotsVOutlineMd");
-const IconDropdownButton_1 = require("../../IconDropdownButton");
 const MenuItem_1 = require("../../MenuItem");
+const styles_1 = require("./styles");
 const SecondaryActions = ({ actions, onActionClick, isDisabled, }) => {
-    return ((0, jsx_runtime_1.jsx)(IconDropdownButton_1.IconDropdownButton, { "aria-label": "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F", icon: (0, jsx_runtime_1.jsx)(DotsVOutlineMd_1.DotsVOutlineMd, {}), variant: "text", disabled: isDisabled, children: actions.map((action) => {
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledIconDropdownButton, { "aria-label": "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F", title: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F", icon: (0, jsx_runtime_1.jsx)(DotsVOutlineMd_1.DotsVOutlineMd, {}), variant: "text", disabled: isDisabled, children: actions.map((action) => {
             const { onClick, name } = action;
             return ((0, react_1.createElement)(MenuItem_1.MenuItem, { ...action, key: name, tooltipPlacement: "left", onClick: onActionClick(onClick) }, name));
         }) }));

package/node/components/ActionCellBase/SecondaryAction/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledIconDropdownButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../IconDropdownButton").IconDropdownButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/ActionCellBase/SecondaryAction/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledIconDropdownButton = void 0;
+const IconDropdownButton_1 = require("../../IconDropdownButton");
+const styled_1 = require("../../styled");
+exports.StyledIconDropdownButton = (0, styled_1.styled)(IconDropdownButton_1.IconDropdownButton) `
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    order: 3;
+
+    background-color: ${({ theme }) => theme.palette.grey[100]};
+  }
+`;

package/node/components/ActionCellBase/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const actionCellBaseClassnames: {
+    root: string;
+    hasMainActions: string;
+};

package/node/components/ActionCellBase/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.actionCellBaseClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.actionCellBaseClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('action-cell-base'),
+    hasMainActions: (0, createUIKitClassname_1.createUIKitClassname)('action-cell-base_has-main-actions'),
+};

package/node/components/ActionCellBase/styles.js

@@ -2,7 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
   display: inline-flex;
   align-items: center;
+
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    width: auto;
+
+    &.${constants_1.actionCellBaseClassnames.hasMainActions} {
+      width: 100%;
+    }
+  }
 `;

package/node/components/ActionCellBase/types.d.ts

@@ -1,4 +1,5 @@
 import type { MouseEventHandler, ReactNode } from 'react';
+import { type ButtonColor } from '../Button';
 import { type ConfirmActionProps } from '../ConfirmAction';
 import { type IconButtonProps } from '../IconButton';
 import { type MenuItemProps } from '../MenuItem';
@@ -33,6 +34,10 @@ export type SingleAction<TAction> = {
      * Поясняющий текст для подтверждения действия
      */
     confirmText?: ConfirmActionProps['text'];
+    /**
+     * Заголовок подтверждения действия на мобильной ширине
+     */
+    confirmMobileTitle?: string;
     /**
      * Параметры кнопки подтверждения действия
      */
@@ -49,6 +54,26 @@ export type SingleAction<TAction> = {
      * Причина блокировки строки во время загрузки
      */
     loadingNote?: string;
+    /**
+     * Если `true`, на мобильной ширине действие отображается кнопкой с текстом,
+     * а не иконкой
+     */
+    isMobilePrimary?: boolean;
+    /**
+     * Параметры кнопки действия на мобильной ширине
+     */
+    mobileProps?: {
+        /**
+         * Текст кнопки
+         * @default name
+         */
+        text?: string;
+        /**
+         * Цвет кнопки
+         * @default 'primary'
+         */
+        color?: ButtonColor;
+    };
     /**
      * Обработчик действия
      */

package/node/components/InfiniteTreeList/InfiniteTreeList.js

@@ -5,14 +5,28 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // cspell:ignore Виртуализированное
 const react_virtuoso_1 = require("react-virtuoso");
 const ContentState_1 = require("../ContentState");
+const constants_1 = require("../constants");
+const cva_1 = require("../utils/cva");
+const constants_2 = require("./constants");
 const InfiniteTreeListContext_1 = require("./InfiniteTreeListContext");
+const LevelHeader_1 = require("./LevelHeader");
 const ListFooter_1 = require("./ListFooter");
 const NoDataPlaceholder_1 = require("./NoDataPlaceholder");
 const OnTopButton_1 = require("./OnTopButton");
 const ParentItems_1 = require("./ParentItems");
+const styles_1 = require("./styles");
 const TreeItem_1 = require("./TreeItem");
 const useLogic_1 = require("./useLogic");
 const computeItemKey = (_, item) => item.id;
+const rootCva = (0, cva_1.cva)([constants_1.selfContainedClassname, constants_2.infiniteTreeListClassnames.root], {
+    variants: {
+        state: {
+            loading: constants_2.infiniteTreeListClassnames.loading,
+            error: constants_2.infiniteTreeListClassnames.error,
+            noData: constants_2.infiniteTreeListClassnames.noData,
+        },
+    },
+});
 /**
  * Виртуализированное дерево с бесконечной подгрузкой
  *
@@ -32,7 +46,7 @@ const computeItemKey = (_, item) => item.id;
  * />
  */
 const InfiniteTreeList = (props) => {
-    const { flatList, onToggle, contentStateProps, scrollParent, virtuosoProps, footerContext, onTopButtonProps, renderItem, renderParent, items, itemSkeleton, onRetry, noDataImgSrc, enterAnimation, tailRegistry, nodePaginationMap, registerChildren, notifyExpand, parentItems, acquireParentSlot, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(InfiniteTreeListContext_1.InfiniteTreeListContextProvider, { itemSkeleton: itemSkeleton, nodePaginationMap: nodePaginationMap, registerChildren: registerChildren, notifyExpand: notifyExpand, onListRetry: onRetry, enterAnimation: enterAnimation, tailRegistry: tailRegistry, renderItem: renderItem, renderParent: renderParent, onToggle: onToggle, acquireParentSlot: acquireParentSlot, children: [(0, jsx_runtime_1.jsx)(ParentItems_1.ParentItems, { parents: parentItems }), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, children: items.length > 0 && scrollParent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ...virtuosoProps, data: flatList, customScrollParent: scrollParent, computeItemKey: computeItemKey, context: footerContext, components: { Item: TreeItem_1.TreeItem, Footer: ListFooter_1.ListFooter } }), (0, jsx_runtime_1.jsx)(OnTopButton_1.OnTopButton, { ...onTopButtonProps })] })) : ((0, jsx_runtime_1.jsx)(NoDataPlaceholder_1.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, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsx)(styles_1.InfiniteTreeListWrapper, { ref: listRef, className: rootCva({ state }), children: (0, jsx_runtime_1.jsxs)(InfiniteTreeListContext_1.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: [(0, jsx_runtime_1.jsx)(ParentItems_1.ParentItems, { parents: parentItems }), levelHeaderProps && (0, jsx_runtime_1.jsx)(LevelHeader_1.LevelHeader, { ...levelHeaderProps }), (0, jsx_runtime_1.jsxs)(ContentState_1.ContentState, { ...contentStateProps, children: [isNoData && (0, jsx_runtime_1.jsx)(NoDataPlaceholder_1.NoDataPlaceholder, { noDataImgSrc: noDataImgSrc }), !isNoData && scrollParent && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ...virtuosoProps, data: displayedList, customScrollParent: scrollParent, computeItemKey: computeItemKey, context: footerContext, components: { Item: TreeItem_1.TreeItem, Footer: ListFooter_1.ListFooter } }, levelKey), (0, jsx_runtime_1.jsx)(OnTopButton_1.OnTopButton, { ...onTopButtonProps })] }))] })] }) }));
 };
 exports.InfiniteTreeList = InfiniteTreeList;

package/node/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/node/components/InfiniteTreeList/InfiniteTreeListContext/InfiniteTreeListContext.js

@@ -25,6 +25,7 @@ exports.InfiniteTreeListContext = (0, react_1.createContext)({
         register: () => undefined,
         unregister: () => undefined,
         checkRange: () => undefined,
+        forgetRange: () => undefined,
     },
     acquireParentSlot: () => null,
 });

package/node/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/node/components/InfiniteTreeList/InfiniteTreeListContext/InfiniteTreeListContextProvider/InfiniteTreeListContextProvider.js

@@ -4,7 +4,7 @@ exports.InfiniteTreeListContextProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InfiniteTreeListContext_1 = require("../InfiniteTreeListContext");
-const InfiniteTreeListContextProvider = ({ children, itemSkeleton, nodePaginationMap, onListRetry, registerChildren, notifyExpand, enterAnimation, tailRegistry, renderItem, renderParent, onToggle, acquireParentSlot, }) => {
+const InfiniteTreeListContextProvider = ({ children, itemSkeleton, nodePaginationMap, onListRetry, registerChildren, notifyExpand, enterAnimation, tailRegistry, renderItem, renderParent, onToggle, acquireParentSlot, lastRowId, }) => {
     const [disabledIdList, setDisabledIdList] = (0, react_1.useState)(new Set());
     const childrenCallbacksRef = (0, react_1.useRef)({});
     const setDisabled = (0, react_1.useCallback)((itemId, disabled) => {
@@ -54,6 +54,7 @@ const InfiniteTreeListContextProvider = ({ children, itemSkeleton, nodePaginatio
         enterAnimation,
         tailRegistry,
         acquireParentSlot,
+        lastRowId,
     }), [
         renderItem,
         renderParent,
@@ -70,6 +71,7 @@ const InfiniteTreeListContextProvider = ({ children, itemSkeleton, nodePaginatio
         enterAnimation,
         tailRegistry,
         acquireParentSlot,
+        lastRowId,
     ]);
     return ((0, jsx_runtime_1.jsx)(InfiniteTreeListContext_1.InfiniteTreeListContext.Provider, { value: value, children: children }));
 };

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

@@ -8,4 +8,12 @@ exports.Wrapper = styled_1.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/node/components/InfiniteTreeList/InfiniteTreeListItem/InfiniteTreeListItem.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfiniteTreeListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Chevron_1 = require("../../Chevron");
 const ContentState_1 = require("../../ContentState");
 const Loader_1 = require("../../Loader");
 const Tooltip_1 = require("../../Tooltip");
@@ -24,6 +23,9 @@ const infiniteTreeListItemCva = (0, cva_1.cva)(constants_1.infiniteTreeListItemC
         hasNested: {
             true: constants_1.infiniteTreeListItemClassnames.hasNested,
         },
+        hasActions: {
+            true: constants_1.infiniteTreeListItemClassnames.hasActions,
+        },
     },
 });
 const InfiniteTreeListItem = (props) => {
@@ -32,10 +34,11 @@ const InfiniteTreeListItem = (props) => {
     if (isRowError) {
         return (0, jsx_runtime_1.jsx)(ErrorPlaceholder_1.ErrorPlaceholder, { onRetry: onRetry, errorMsg: errorMsg });
     }
-    return ((0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isRowLoading, isSmoothLoading: false, loadingContent: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: infiniteTreeListItemCva({ isLoading: true }), children: itemSkeleton || ((0, jsx_runtime_1.jsx)(styles_1.LoaderWrapper, { children: (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}) })) }), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onClick: handleClick, className: (0, cn_1.cn)(infiniteTreeListItemCva({
+    return ((0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isRowLoading, isSmoothLoading: false, loadingContent: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: infiniteTreeListItemCva({ isLoading: true }), children: (0, jsx_runtime_1.jsx)(styles_1.Content, { children: itemSkeleton || ((0, jsx_runtime_1.jsx)(styles_1.LoaderWrapper, { children: (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}) })) }) }), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onClick: handleClick, className: (0, cn_1.cn)(infiniteTreeListItemCva({
                     isDisabled: Boolean(isDisabled || isDisabledByActions),
                     isLoading: isRowLoading,
                     hasNested: item.meta.hasNested,
-                }), className), ...(0, getInertProps_1.getInertProps)(isDisabled || isDisabledByActions), children: [item.meta.hasNested && (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { isActive: isChevronActive }), children, actions && (0, jsx_runtime_1.jsx)(styles_1.ActionsWrapper, { children: actions })] }, `infinite-tree-list-item-${item.id}`) }) }));
+                    hasActions: Boolean(actions),
+                }), className), ...(0, getInertProps_1.getInertProps)(isDisabled || isDisabledByActions), children: [item.meta.hasNested && ((0, jsx_runtime_1.jsx)(styles_1.NestedIndicator, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledChevron, { isActive: isChevronActive }) })), (0, jsx_runtime_1.jsx)(styles_1.Content, { className: constants_1.infiniteTreeListItemClassnames.content, children: children }), actions && (0, jsx_runtime_1.jsx)(styles_1.ActionsWrapper, { children: actions })] }, `infinite-tree-list-item-${item.id}`) }) }));
 };
 exports.InfiniteTreeListItem = InfiniteTreeListItem;

package/node/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/node/components/InfiniteTreeList/InfiniteTreeListItem/constants.js

@@ -4,7 +4,9 @@ exports.infiniteTreeListItemClassnames = void 0;
 const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
 exports.infiniteTreeListItemClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__item'),
+    content: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__item-content'),
     disabled: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__item_disabled'),
     loading: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__item_loading'),
     hasNested: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__item_has-nested'),
+    hasActions: (0, createUIKitClassname_1.createUIKitClassname)('infinite-tree-list__item_has-actions'),
 };

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

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

package/node/components/InfiniteTreeList/InfiniteTreeListItem/index.js

@@ -14,6 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.infiniteTreeListItemClassnames = void 0;
 __exportStar(require("./InfiniteTreeListItem"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./TreeListItemContext"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "infiniteTreeListItemClassnames", { enumerable: true, get: function () { return constants_1.infiniteTreeListItemClassnames; } });

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

@@ -3,6 +3,20 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     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("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

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

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoaderWrapper = exports.ActionsWrapper = exports.Wrapper = void 0;
+exports.LoaderWrapper = exports.ActionsWrapper = exports.StyledChevron = exports.NestedIndicator = exports.Content = exports.Wrapper = void 0;
+const Chevron_1 = require("../../Chevron");
 const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
   cursor: default;
 
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr;
   gap: ${({ theme }) => theme.spacing(3)};
   align-items: center;
 
@@ -28,8 +30,18 @@ exports.Wrapper = styled_1.styled.div `
     }
   }
 
+  &.${constants_2.infiniteTreeListItemClassnames.hasActions} {
+    grid-template-columns: 1fr auto;
+  }
+
   &.${constants_2.infiniteTreeListItemClassnames.hasNested} {
     cursor: pointer;
+
+    grid-template-columns: auto 1fr;
+
+    &.${constants_2.infiniteTreeListItemClassnames.hasActions} {
+      grid-template-columns: auto 1fr auto;
+    }
   }
 
   &.${constants_2.infiniteTreeListItemClassnames.loading} {
@@ -46,11 +58,63 @@ exports.Wrapper = styled_1.styled.div `
   &.${constants_2.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)};
+
+    &.${constants_2.infiniteTreeListItemClassnames.hasNested} {
+      grid-template-columns: 1fr auto;
+      
+      &.${constants_2.infiniteTreeListItemClassnames.hasActions} {
+        grid-template-columns: 1fr auto;
+      }
+    }
+  }
+`;
+exports.Content = styled_1.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;
+  }
+`;
+exports.NestedIndicator = styled_1.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;
+  }
+`;
+exports.StyledChevron = (0, styled_1.styled)(Chevron_1.Chevron) `
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    transform: rotateZ(270deg);
+
+    width: 24px;
+    height: 24px;
+
+    transition: none;
+  }
 `;
 exports.ActionsWrapper = styled_1.styled.div `
   display: flex;
 
-  margin-left: auto;
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
 `;
 exports.LoaderWrapper = styled_1.styled.div `
   display: flex;

package/node/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/node/components/InfiniteTreeList/LevelHeader/LevelHeader.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LevelHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ChevronLOutlineMd_1 = require("../../../icons/ChevronLOutlineMd");
+const cva_1 = require("../../utils/cva");
+const constants_1 = require("../constants");
+const constants_2 = require("./constants");
+const styles_1 = require("./styles");
+const wrapperCva = (0, cva_1.cva)(constants_1.infiniteTreeListClassnames.levelHeader, {
+    variants: {
+        hasBackButton: {
+            true: constants_1.infiniteTreeListClassnames.levelHeaderWithBackButton,
+        },
+    },
+});
+/**
+ * Шапка отображаемого уровня на мобильной ширине
+ */
+const LevelHeader = ({ title = constants_2.LEVEL_BACK_TITLE, hasBackButton, onBack, }) => ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: wrapperCva({ hasBackButton }), children: [hasBackButton && ((0, jsx_runtime_1.jsx)(styles_1.BackButton, { className: constants_1.infiniteTreeListClassnames.levelHeaderBackButton, variant: "text", "aria-label": constants_2.LEVEL_BACK_TITLE, onClick: onBack, children: (0, jsx_runtime_1.jsx)(ChevronLOutlineMd_1.ChevronLOutlineMd, {}) })), (0, jsx_runtime_1.jsx)(styles_1.Title, { rowsCount: 2, children: title })] }));
+exports.LevelHeader = LevelHeader;

package/node/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/node/components/InfiniteTreeList/LevelHeader/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LEVEL_BACK_BUTTON_ICON_SIZE = exports.LEVEL_BACK_BUTTON_WIDTH = exports.LEVEL_BACK_TITLE = void 0;
+exports.LEVEL_BACK_TITLE = 'Назад';
+exports.LEVEL_BACK_BUTTON_WIDTH = '72px';
+exports.LEVEL_BACK_BUTTON_ICON_SIZE = '24px';

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

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

package/node/components/InfiniteTreeList/LevelHeader/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./LevelHeader"), exports);
+__exportStar(require("./types"), exports);