@astral/ui 4.105.0 → 4.106.0

package/components/ActionCellBase/ActionCellBase.js

@@ -1,10 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from '../utils/cva';
+import { actionCellBaseClassnames } from './constants';
 import { MainAction } from './MainAction';
 import { SecondaryActions } from './SecondaryAction';
 import { Wrapper } from './styles';
+const actionCellCva = cva(actionCellBaseClassnames.root, {
+    variants: {
+        hasMainActions: {
+            true: actionCellBaseClassnames.hasMainActions,
+        },
+    },
+});
 export const ActionCellBase = ({ actions, isDisabledAction, handleWrapperClick, handleActionClick, }) => {
     const { main, secondary } = actions;
-    return (_jsxs(Wrapper, { onClick: handleWrapperClick, children: [main.map((action) => {
+    return (_jsxs(Wrapper, { onClick: handleWrapperClick, className: actionCellCva({ hasMainActions: Boolean(main.length) }), children: [main.map((action) => {
                 return (_jsx(MainAction, { action: action, onActionClick: handleActionClick, isDisabled: isDisabledAction }, action.name));
             }), secondary && (_jsx(SecondaryActions, { actions: secondary, onActionClick: handleActionClick, isDisabled: isDisabledAction }))] }));
 };

package/components/ActionCellBase/MainAction/MainAction.js

@@ -3,11 +3,17 @@ import { createElement as _createElement } from "react";
 import { IconDropdownButton } from '../../IconDropdownButton';
 import { MenuItem } from '../../MenuItem';
 import { Tooltip } from '../../Tooltip';
+import { useViewportType } from '../../useViewportType';
 import { MainIconButton } from './MainIconButton';
+import { MobileMainButton } from './MobileMainButton';
 export const MainAction = ({ action, onActionClick, isDisabled, }) => {
+    const { isMobile } = useViewportType();
     if ('actions' in action) {
         const { disabled, icon, name, disabledReason, actions } = action;
         return (_jsx(Tooltip, { title: disabledReason || name, withoutContainer: !disabled, placement: "top", children: _jsx(IconDropdownButton, { icon: icon, variant: "text", disabled: isDisabled || disabled, children: actions.map(({ name: nestedActionName, onClick: onClickNested, ...props }) => (_createElement(MenuItem, { ...props, key: nestedActionName, onClick: onActionClick(onClickNested) }, nestedActionName))) }) }, name));
     }
+    if (isMobile && action.isMobilePrimary) {
+        return (_jsx(MobileMainButton, { action: action, onActionClick: onActionClick, isDisabled: isDisabled }));
+    }
     return (_jsx(MainIconButton, { action: action, onActionClick: onActionClick, isDisabled: isDisabled }));
 };

package/components/ActionCellBase/MainAction/MainIconButton/MainIconButton.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { ConfirmAction, } from '../../../ConfirmAction';
-import { IconButton } from '../../../IconButton';
 import { Tooltip } from '../../../Tooltip';
+import { mainIconButtonClassnames } from './constants';
+import { StyledIconButton } from './styles';
 import { useLogic } from './useLogic';
 export const MainIconButton = (props) => {
     const { tooltipProps } = useLogic(props);
     const { action, onActionClick, isDisabled } = props;
-    const { name, icon, needConfirm, confirmText, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, ...actions } = action;
-    const renderButton = (renderProps) => (_jsx(Tooltip, { withoutContainer: !disabled, placement: "top", ...tooltipProps, children: _jsx(IconButton, { disabled: isDisabled || disabled, loading: loading, ...actions, variant: "text", ...renderProps, children: icon }) }, name));
-    return (_jsx(_Fragment, { children: needConfirm ? (_jsx(ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
+    const { name, icon, needConfirm, confirmText, confirmMobileTitle, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, isMobilePrimary, mobileProps, ...actions } = action;
+    const renderButton = (renderProps) => (_jsx(Tooltip, { withoutContainer: !disabled, placement: "top", ...tooltipProps, children: _jsx(StyledIconButton, { disabled: isDisabled || disabled, loading: loading, ...actions, variant: "text", ...renderProps, className: mainIconButtonClassnames.root, children: icon }) }, name));
+    return (_jsx(_Fragment, { children: needConfirm ? (_jsx(ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, popoverProps: {
+                title: confirmMobileTitle,
+            }, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
             onClick: onActionClick(onClick),
         })) }));
 };

package/components/ActionCellBase/MainAction/MainIconButton/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const mainIconButtonClassnames: {
+    root: string;
+};

package/components/ActionCellBase/MainAction/MainIconButton/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../../../utils/createUIKitClassname';
+export const mainIconButtonClassnames = {
+    root: createUIKitClassname('action-cell-base__main-icon-button'),
+};

package/components/ActionCellBase/MainAction/MainIconButton/styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledIconButton: import("../../../styled").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/components/ActionCellBase/MainAction/MainIconButton/styles.js

@@ -0,0 +1,9 @@
+import { IconButton } from '../../../IconButton';
+import { styled } from '../../../styled';
+export const StyledIconButton = styled(IconButton) `
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    order: 2;
+
+    background-color: ${({ theme }) => theme.palette.grey[100]};
+  }
+`;

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

@@ -0,0 +1,14 @@
+import { type IconButtonProps } from '../../../IconButton';
+import { type ActionHandler, type SingleAction } from '../../types';
+export type MobileMainButtonProps<TAction> = {
+    action: IconButtonProps & SingleAction<TAction>;
+    /**
+     *  Обработчик клика на действие
+     */
+    onActionClick: ActionHandler<TAction>;
+    /**
+     *  Если true, action не доступен
+     */
+    isDisabled?: boolean;
+};
+export declare const MobileMainButton: <TAction>({ action, isDisabled, onActionClick, }: MobileMainButtonProps<TAction>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfirmAction, } from '../../../ConfirmAction';
+import { StyledButton } from './styles';
+export const MobileMainButton = ({ action, isDisabled, onActionClick, }) => {
+    const { mobileProps, name, icon, needConfirm, confirmText, confirmMobileTitle, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, isMobilePrimary, ...actions } = action;
+    const text = mobileProps?.text ?? name;
+    const color = mobileProps?.color ?? 'primary';
+    const renderButton = (renderProps) => (_jsx(StyledButton, { disabled: isDisabled || disabled, loading: loading, color: color, ...actions, variant: "contained", ...renderProps, children: text }));
+    if (needConfirm) {
+        return (_jsx(ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, popoverProps: {
+                title: confirmMobileTitle,
+            }, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) }));
+    }
+    return renderButton({
+        onClick: onActionClick(onClick),
+    });
+};

package/components/ActionCellBase/MainAction/MobileMainButton/index.d.ts

@@ -0,0 +1 @@
+export * from './MobileMainButton';

package/components/ActionCellBase/MainAction/MobileMainButton/index.js

@@ -0,0 +1 @@
+export * from './MobileMainButton';

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledButton: import("../../../styled").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/components/ActionCellBase/MainAction/MobileMainButton/styles.js

@@ -0,0 +1,7 @@
+import { Button } from '../../../Button';
+import { styled } from '../../../styled';
+export const StyledButton = styled(Button) `
+  order: 1;
+
+  width: 100%;
+`;

package/components/ActionCellBase/SecondaryAction/SecondaryAction.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { DotsVOutlineMd } from '../../../icons/DotsVOutlineMd';
-import { IconDropdownButton } from '../../IconDropdownButton';
 import { MenuItem } from '../../MenuItem';
+import { StyledIconDropdownButton } from './styles';
 export const SecondaryActions = ({ actions, onActionClick, isDisabled, }) => {
-    return (_jsx(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: _jsx(DotsVOutlineMd, {}), variant: "text", disabled: isDisabled, children: actions.map((action) => {
+    return (_jsx(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: _jsx(DotsVOutlineMd, {}), variant: "text", disabled: isDisabled, children: actions.map((action) => {
             const { onClick, name } = action;
             return (_createElement(MenuItem, { ...action, key: name, tooltipPlacement: "left", onClick: onActionClick(onClick) }, name));
         }) }));

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

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

package/components/ActionCellBase/SecondaryAction/styles.js

@@ -0,0 +1,9 @@
+import { IconDropdownButton } from '../../IconDropdownButton';
+import { styled } from '../../styled';
+export const StyledIconDropdownButton = styled(IconDropdownButton) `
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    order: 3;
+
+    background-color: ${({ theme }) => theme.palette.grey[100]};
+  }
+`;

package/components/ActionCellBase/constants.d.ts

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

package/components/ActionCellBase/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const actionCellBaseClassnames = {
+    root: createUIKitClassname('action-cell-base'),
+    hasMainActions: createUIKitClassname('action-cell-base_has-main-actions'),
+};

package/components/ActionCellBase/styles.js

@@ -1,5 +1,16 @@
 import { styled } from '../styled';
+import { actionCellBaseClassnames } from './constants';
 export const Wrapper = styled.div `
   display: inline-flex;
   align-items: center;
+
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    width: auto;
+
+    &.${actionCellBaseClassnames.hasMainActions} {
+      width: 100%;
+    }
+  }
 `;

package/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/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';