@astral/ui 4.113.2 → 4.114.0

package/components/DataGridInfinite/useLogic/useLogic.d.ts

@@ -2,9 +2,13 @@ import { type ChangeEvent } from 'react';
 import type { ListRange } from 'react-virtuoso';
 import { type DataGridRow } from '../../DataGrid';
 import { type CellValue } from '../../DataGrid/types';
+import { type FooterContext } from '../Footer';
 import { type DataGridInfiniteProps, type DataGridInfiniteVirtuosoHandle } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridInfiniteProps<TData, TSortField>;
-export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, maxHeight, isLoading, isError, isDisabled, isEndReached, onEndReached, onStartReached, isStartReached, onSelectRow, isHideSelectAll, initialVisibleItemIndex, isHideHeaderIfNoData, gridViewMode: gridViewModeProp, mobileDisplayVariant, virtuosoRef, }: UseLogicParams<TData, TSortField>) => {
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, maxHeight, isLoading, isError, isDisabled, isEndReached, endOfScrollMsg, onRetry, onEndReached, onStartReached, isStartReached, onSelectRow, isHideSelectAll, initialVisibleItemIndex, isHideHeaderIfNoData, gridViewMode: gridViewModeProp, massActions, mobileDisplayVariant, virtuosoRef, }: UseLogicParams<TData, TSortField>) => {
+    footerContext: FooterContext;
+    hasMassActions: boolean;
+    isMassActionsOpen: boolean;
     containerCssVars: import("react").CSSProperties;
     mobileSkeletonProps: {
         cellsCount: number;
@@ -19,7 +23,6 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
         expandedLevel?: number | undefined;
         initialVisibleChildrenCount?: number | undefined;
     } | undefined;
-    isEndReached: boolean | undefined;
     isHideHead: boolean;
     hasGroupedColumns: boolean;
     gridViewMode: "standard" | "full";
@@ -32,7 +35,7 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
         ref: (node: DataGridInfiniteVirtuosoHandle | null) => void;
         endReached: () => void;
         rangeChanged: (range: ListRange) => void;
-        totalListHeightChanged: () => void;
+        totalListHeightChanged: (listHeight: number) => void;
         startReached: () => void;
         firstItemIndex: number;
     };

package/components/DataGridInfinite/useLogic/useLogic.js

@@ -2,12 +2,12 @@ import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { EXPANDED_LEVEL_BY_DEFAULT, INITIAL_OPENED_NESTED_CHILDREN_COUNT_ON_MOBILE_BY_DEFAULT, } from '../../DataGrid/constants';
 import { Variant } from '../../DataGrid/enums';
 import { useDataGridMobileLogic } from '../../DataGrid/useLogic/hooks';
-import { getDataGridCssVars, getFlattenColumns, getGridTemplateColumns, isGroupColumns, } from '../../DataGrid/utils';
+import { checkIsMassActionsOpen, getDataGridCssVars, getFlattenColumns, getGridTemplateColumns, isGroupColumns, } from '../../DataGrid/utils';
 import { useViewportType } from '../../useViewportType';
 import { prop } from '../../utils/prop';
 import { uniqueBy } from '../../utils/uniqueBy';
-import { dataGridInfiniteClassnames, VIRTUOSO_CONTAINER_ID, VIRTUOSO_LIST_ID, } from '../constants';
-export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isError, isDisabled, isEndReached, onEndReached, onStartReached, isStartReached, onSelectRow, isHideSelectAll, initialVisibleItemIndex, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', virtuosoRef, }) => {
+import { dataGridInfiniteClassnames, VIRTUOSO_CONTAINER_ID, } from '../constants';
+export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isError, isDisabled, isEndReached, endOfScrollMsg, onRetry, onEndReached, onStartReached, isStartReached, onSelectRow, isHideSelectAll, initialVisibleItemIndex, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', massActions, mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', virtuosoRef, }) => {
     const virtuoso = useRef(null);
     const handleVirtuosoRef = useCallback((node) => {
         virtuoso.current = node;
@@ -112,11 +112,11 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
     const handleScrollToTop = () => {
         virtuoso.current?.scrollIntoView({ index: 0, behavior: 'smooth' });
     };
-    const recalculateVerticalScroll = () => {
+    const recalculateVerticalScroll = (listHeight) => {
         const container = document.getElementById(VIRTUOSO_CONTAINER_ID);
-        const list = document.getElementById(VIRTUOSO_LIST_ID);
-        if (container && list) {
-            setHasVerticalScroll(list?.clientHeight > container?.clientHeight);
+        if (container) {
+            const massActionsSpacerHeight = container.querySelector(`.${dataGridInfiniteClassnames.massActionsSpacer}`)?.clientHeight ?? 0;
+            setHasVerticalScroll(listHeight - massActionsSpacerHeight > container.clientHeight);
         }
     };
     const isHideHead = isHideHeaderIfNoData && rows.length === 0;
@@ -130,14 +130,38 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
     const isNotRenderHeader = (!isLoading && !isError && !isStartReached) ||
         !onStartReached ||
         isStartReached;
+    const hasMassActions = Boolean(massActions);
+    const isMassActionsOpen = checkIsMassActionsOpen({
+        hasMassActions,
+        selectedRowsCount: selectedRows.length,
+        isMobile,
+    });
+    const footerContext = useMemo(() => ({
+        isLoading,
+        isError,
+        isEndReached: isEndReached && hasVerticalScroll,
+        endOfScrollMsg,
+        onRetry,
+        hasMassActions,
+    }), [
+        isLoading,
+        isError,
+        isEndReached,
+        hasVerticalScroll,
+        endOfScrollMsg,
+        onRetry,
+        hasMassActions,
+    ]);
     return {
+        footerContext,
+        hasMassActions,
+        isMassActionsOpen,
         containerCssVars,
         mobileSkeletonProps,
         isNoData,
         isMobile,
         isDataGridDisabled,
         treeRenderConfig,
-        isEndReached: isEndReached && hasVerticalScroll,
         isHideHead,
         hasGroupedColumns,
         gridViewMode,

package/components/DataGridMassActions/DataGridMassActions.d.ts

@@ -0,0 +1,15 @@
+import { type DataGridMassActionsProps } from './types';
+/**
+ * Панель массовых действий над выбранными строками `DataGrid` и `DataGridInfinite`.
+ *
+ * @example
+ * <DataGrid
+ *   massActions={
+ *     <DataGridMassActions
+ *       entityDeclension={['документ', 'документа', 'документов']}
+ *       main={[{ text: 'Отправить', onClick: handleSend }]}
+ *     />
+ *   }
+ * />
+ */
+export declare const DataGridMassActions: ({ className, ...props }: DataGridMassActionsProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/DataGridMassActions/DataGridMassActions.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from '../utils/cva';
+import { dataGridMassActionsClassnames } from './constants';
+import { StyledMassActions } from './styles';
+import { useLogic } from './useLogic';
+const rootCva = cva(dataGridMassActionsClassnames.root, {
+    variants: {
+        isOpen: {
+            true: dataGridMassActionsClassnames.open,
+        },
+    },
+});
+/**
+ * Панель массовых действий над выбранными строками `DataGrid` и `DataGridInfinite`.
+ *
+ * @example
+ * <DataGrid
+ *   massActions={
+ *     <DataGridMassActions
+ *       entityDeclension={['документ', 'документа', 'документов']}
+ *       main={[{ text: 'Отправить', onClick: handleSend }]}
+ *     />
+ *   }
+ * />
+ */
+export const DataGridMassActions = ({ className, ...props }) => {
+    const { isOpen, isMounted, selectedCount, handleClose } = useLogic();
+    if (!isOpen && !isMounted) {
+        return null;
+    }
+    return (_jsx(StyledMassActions, { ...props, className: rootCva({ isOpen, className }), selectedCount: selectedCount, onClose: handleClose }));
+};

package/components/DataGridMassActions/constants.d.ts

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

package/components/DataGridMassActions/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const dataGridMassActionsClassnames = {
+    root: createUIKitClassname('data-grid-mass-actions'),
+    open: createUIKitClassname('data-grid-mass-actions_open'),
+};

package/components/DataGridMassActions/index.d.ts

@@ -0,0 +1,2 @@
+export { DataGridMassActions } from './DataGridMassActions';
+export type { DataGridMassActionsProps } from './types';

package/components/DataGridMassActions/index.js

@@ -0,0 +1 @@
+export { DataGridMassActions } from './DataGridMassActions';

package/components/DataGridMassActions/public.d.ts

@@ -0,0 +1,2 @@
+export { DataGridMassActions } from './DataGridMassActions';
+export type { DataGridMassActionsProps } from './types';

package/components/DataGridMassActions/public.js

@@ -0,0 +1 @@
+export { DataGridMassActions } from './DataGridMassActions';

package/components/DataGridMassActions/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const StyledMassActions: import("../styled").StyledComponent<Pick<import("..").ActionGroupProps, "main" | "secondary"> & {
+    selectedCount: number;
+    entityDeclension: [string, string, string];
+    onClose: () => void;
+    className?: string | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/DataGridMassActions/styles.js

@@ -0,0 +1,49 @@
+import { MassActions } from '../MassActions';
+import { keyframes, styled } from '../styled';
+import { dataGridMassActionsClassnames } from './constants';
+const slideIn = keyframes `
+  from {
+    transform: translateY(100%);
+
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+
+    opacity: 1;
+  }
+`;
+const slideOut = keyframes `
+  from {
+    transform: translateY(0);
+
+    opacity: 1;
+  }
+
+  to {
+    transform: translateY(100%);
+
+    opacity: 0;
+  }
+`;
+export const StyledMassActions = styled(MassActions) `
+  position: absolute;
+  z-index: ${({ theme }) => theme.zIndex.appBar};
+  right: 0;
+  bottom: ${({ theme }) => theme.spacing(3)};
+  left: 0;
+  
+  max-width: calc(100% - ${({ theme }) => theme.spacing(8)});
+  margin-inline: auto;
+
+  animation: ${slideOut}
+    ${({ theme }) => theme.transitions.duration.leavingScreen}ms
+    ${({ theme }) => theme.transitions.easing.easeIn} forwards;
+
+  &.${dataGridMassActionsClassnames.open} {
+    animation: ${slideIn}
+      ${({ theme }) => theme.transitions.duration.standard}ms
+      ${({ theme }) => theme.transitions.easing.easeOut} forwards;
+  }
+`;

package/components/DataGridMassActions/tests/testDataGridMassActions.d.ts

@@ -0,0 +1,23 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type DataGridColumns } from '../../DataGrid/types';
+type DataItem = {
+    id: string;
+    name: string;
+};
+type GridRenderProps = {
+    rows: DataItem[];
+    columns: DataGridColumns<DataItem>[];
+    selectedRows: DataItem[];
+    onSelectRow: (rows: DataItem[]) => void;
+    massActions: ReactNode;
+    onRetry: () => void;
+};
+type TestDataGridMassActionsParams = {
+    render: (ui: ReactElement) => void;
+    renderGrid: (props: GridRenderProps) => ReactNode;
+};
+/**
+ * Общие тесты связки таблицы и DataGridMassActions для DataGrid и DataGridInfinite
+ */
+export declare const testDataGridMassActions: ({ render, renderGrid, }: TestDataGridMassActionsParams) => void;
+export {};

package/components/DataGridMassActions/tests/testDataGridMassActions.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, setWindowWidth, userEvents, viewportSize, waitForElementToBeRemoved, } from '@ui/dev/tests';
+import { useState } from 'react';
+import { beforeEach, expect, it } from 'vitest';
+import { DataGridMassActions } from '../DataGridMassActions';
+const TEST_ROWS = [
+    { id: '1', name: 'Договор поставки' },
+    { id: '2', name: 'Счёт-фактура' },
+];
+const TEST_COLUMNS = [
+    {
+        field: 'name',
+        label: 'Наименование',
+    },
+];
+/**
+ * Общие тесты связки таблицы и DataGridMassActions для DataGrid и DataGridInfinite
+ */
+export const testDataGridMassActions = ({ render, renderGrid, }) => {
+    const TestComponent = ({ initialSelectedRows, }) => {
+        const [selectedRows, setSelectedRows] = useState(initialSelectedRows);
+        return renderGrid({
+            rows: TEST_ROWS,
+            columns: TEST_COLUMNS,
+            selectedRows,
+            onSelectRow: setSelectedRows,
+            massActions: (_jsx(DataGridMassActions, { entityDeclension: ['документ', 'документа', 'документов'], main: [{ text: 'Отправить' }] })),
+            onRetry: () => { },
+        });
+    };
+    const setup = ({ initialSelectedRows = [], } = {}) => {
+        render(_jsx(TestComponent, { initialSelectedRows: initialSelectedRows }));
+    };
+    beforeEach(() => {
+        setWindowWidth(viewportSize.desktop.default.width);
+    });
+    it('Панель не отображается при пустом выборе', () => {
+        setup();
+        const closeButton = screen.queryByRole('button', {
+            name: 'Снять выделение',
+        });
+        expect(closeButton).toBeNull();
+    });
+    it('Панель отображается при выборе строки', async () => {
+        setup();
+        // 0 - "Выбрать все", 1 - первая строка
+        await userEvents.click(screen.getAllByRole('checkbox')[1]);
+        expect(screen.getByText('Выбрано: 1 документ')).toBeVisible();
+    });
+    it('Панель остаётся открытой после нажатия на действие, если выбор не очищен', async () => {
+        setup({ initialSelectedRows: TEST_ROWS });
+        await userEvents.click(screen.getByRole('button', { name: 'Отправить' }));
+        expect(screen.getByText('Выбрано: 2 документа')).toBeVisible();
+    });
+    it('Выбор строк снимается при закрытии панели', async () => {
+        setup({ initialSelectedRows: TEST_ROWS });
+        await userEvents.click(screen.getByRole('button', { name: 'Снять выделение' }));
+        const checkedCheckboxes = screen.queryAllByRole('checkbox', {
+            checked: true,
+        });
+        expect(checkedCheckboxes).toHaveLength(0);
+    });
+    it('Панель скрывается при закрытии', async () => {
+        setup({ initialSelectedRows: TEST_ROWS });
+        await userEvents.click(screen.getByRole('button', { name: 'Снять выделение' }));
+        // Панель размонтируется после анимации скрытия
+        await expect(waitForElementToBeRemoved(() => screen.queryByRole('button', { name: 'Снять выделение' }))).resolves.toBeUndefined();
+    });
+    it('Панель не отображается на мобильных разрешениях', () => {
+        setWindowWidth(viewportSize.mobile.default.width);
+        setup({ initialSelectedRows: TEST_ROWS });
+        const closeButton = screen.queryByRole('button', {
+            name: 'Снять выделение',
+        });
+        expect(closeButton).toBeNull();
+    });
+};

package/components/DataGridMassActions/types.d.ts

@@ -0,0 +1,2 @@
+import { type MassActionsProps } from '../MassActions';
+export type DataGridMassActionsProps = Omit<MassActionsProps, 'selectedCount' | 'onClose'>;

package/components/DataGridMassActions/types.js

@@ -0,0 +1 @@
+export {};

package/components/DataGridMassActions/useLogic/index.d.ts

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

package/components/DataGridMassActions/useLogic/index.js

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

package/components/DataGridMassActions/useLogic/useLogic.d.ts

@@ -0,0 +1,6 @@
+export declare const useLogic: () => {
+    isOpen: boolean;
+    isMounted: boolean;
+    selectedCount: number;
+    handleClose: () => void | undefined;
+};

package/components/DataGridMassActions/useLogic/useLogic.js

@@ -0,0 +1,21 @@
+import { useContext, useState } from 'react';
+import { DataGridSelectionContext } from '../../DataGrid/DataGridSelectionContext';
+import { useTheme } from '../../theme/hooks';
+import { useDelayedUnmount } from '../../useDelayedUnmount';
+export const useLogic = () => {
+    const { selectedRows, onSelectRow, isMassActionsOpen: isOpen, } = useContext(DataGridSelectionContext);
+    const { transitions: { duration: { leavingScreen }, }, } = useTheme();
+    const { isMounted } = useDelayedUnmount({ isOpen, duration: leavingScreen });
+    // Во время анимации скрытия выбор уже пустой — показываем последнее количество выбранных строк
+    const [lastSelectedCount, setLastSelectedCount] = useState(selectedRows.length);
+    if (selectedRows.length > 0 && selectedRows.length !== lastSelectedCount) {
+        setLastSelectedCount(selectedRows.length);
+    }
+    const handleClose = () => onSelectRow?.([]);
+    return {
+        isOpen,
+        isMounted,
+        selectedCount: lastSelectedCount,
+        handleClose,
+    };
+};

package/components/IconDropdownButton/IconDropdownButton.d.ts

@@ -1,9 +1,14 @@
 import { type ReactNode } from 'react';
 import { type IconButtonProps } from '../IconButton';
+import { type MenuProps } from '../Menu';
 export type IconDropdownButtonProps = IconButtonProps & {
     /**
      * Иконка кнопки
      */
     icon: ReactNode;
+    /**
+     * Пропсы выпадающего меню
+     */
+    popoverProps?: Omit<MenuProps, 'open' | 'anchorEl' | 'title' | 'children'>;
 };
 export declare const IconDropdownButton: import("react").ForwardRefExoticComponent<Omit<IconDropdownButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/components/IconDropdownButton/IconDropdownButton.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { IconButton } from '../IconButton';
 import { Menu } from '../Menu';
 import { useMenu } from '../useMenu';
-export const IconDropdownButton = forwardRef(({ children, icon, title, ...props }, ref) => {
+export const IconDropdownButton = forwardRef(({ children, icon, title, popoverProps, ...props }, ref) => {
     const { open, anchorRef, handleOpenMenu, handleCloseMenu } = useMenu(ref);
-    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, { onClickAway: handleCloseMenu, mouseEvent: "onMouseUp", children: _jsx(IconButton, { ...props, ref: anchorRef, onClick: handleOpenMenu, selected: open, title: title, children: icon }) }), _jsx(Menu, { title: title, open: open, anchorEl: anchorRef.current, children: children })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, { onClickAway: handleCloseMenu, mouseEvent: "onMouseUp", children: _jsx(IconButton, { ...props, ref: anchorRef, onClick: handleOpenMenu, selected: open, title: title, children: icon }) }), _jsx(Menu, { ...popoverProps, title: title, open: open, anchorEl: anchorRef.current, children: children })] }));
 });

package/components/MassActions/MassActions.d.ts

@@ -0,0 +1,5 @@
+import { type MassActionsProps } from './types';
+/**
+ * Базовый компонент панели массовых действий
+ */
+export declare const MassActions: ({ main, secondary, selectedCount, entityDeclension, onClose, className, }: MassActionsProps) => import("react/jsx-runtime").JSX.Element;

package/components/MassActions/MassActions.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
+import { IconButton } from '../IconButton';
+import { Tag } from '../Tag';
+import { SECONDARY_POPOVER_PROPS } from './constants';
+import { ReservedLabel, Selection, SelectionLabel, StyledActionGroup, Wrapper, } from './styles';
+import { useLogic } from './useLogic';
+/**
+ * Базовый компонент панели массовых действий
+ */
+export const MassActions = ({ main, secondary, selectedCount, entityDeclension, onClose, className, }) => {
+    const { selectionLabel, reservedLabel } = useLogic({
+        entityDeclension,
+        selectedCount,
+    });
+    return (_jsxs(Wrapper, { className: className, children: [_jsx(StyledActionGroup, { main: main, secondary: secondary, secondaryPopoverProps: SECONDARY_POPOVER_PROPS, size: "large" }), _jsxs(Selection, { children: [_jsxs(SelectionLabel, { children: [_jsx(ReservedLabel, { variant: "text", size: "large", label: reservedLabel, "aria-hidden": true }), _jsx(Tag, { variant: "text", size: "large", label: selectionLabel, "aria-live": "polite" })] }), _jsx(IconButton, { variant: "text", "aria-label": "\u0421\u043D\u044F\u0442\u044C \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u0438\u0435", onClick: onClose, children: _jsx(CrossOutlineMd, {}) })] })] }));
+};

package/components/MassActions/constants.d.ts

@@ -0,0 +1,6 @@
+import { type IconDropdownButtonProps } from '../IconDropdownButton';
+export declare const SECONDARY_POPOVER_PROPS: IconDropdownButtonProps['popoverProps'];
+/**
+ * Количество выбранных строк, под которое заранее резервируется ширина счётчика
+ */
+export declare const RESERVED_SELECTED_COUNT = 999;

package/components/MassActions/constants.js

@@ -0,0 +1,12 @@
+/**
+ * Смещение меню вверх от кнопки. Компенсирует margin-top 8px у меню из темы и оставляет отступ 8px до кнопки
+ */
+const ANCHOR_VERTICAL_POSITION = -16;
+export const SECONDARY_POPOVER_PROPS = {
+    anchorOrigin: { vertical: ANCHOR_VERTICAL_POSITION, horizontal: 'left' },
+    transformOrigin: { vertical: 'bottom', horizontal: 'left' },
+};
+/**
+ * Количество выбранных строк, под которое заранее резервируется ширина счётчика
+ */
+export const RESERVED_SELECTED_COUNT = 999;

package/components/MassActions/index.d.ts

@@ -0,0 +1,2 @@
+export { MassActions } from './MassActions';
+export type { MassActionsProps } from './types';

package/components/MassActions/index.js

@@ -0,0 +1 @@
+export { MassActions } from './MassActions';

package/components/MassActions/styles.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+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 Selection: 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 StyledActionGroup: import("../styled").StyledComponent<import("../ActionGroup").ActionGroupProps<import("react").ElementType, import("react").ElementType> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+/**
+ * Невидимая заглушка и счётчик лежат в одной ячейке: ширину задаёт заглушка, поэтому панель не прыгает при смене количества
+ */
+export declare const SelectionLabel: 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 ReservedLabel: import("../styled").StyledComponent<{
+    disabled?: boolean | undefined;
+    label?: import("react").ReactNode;
+    icon?: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
+    className?: string | undefined;
+    onDelete?: ((event: import("react").SyntheticEvent<Element, Event>) => void) | undefined;
+    color?: import("../Tag").TagColor | undefined;
+    variant?: import("../Tag").TagVariant | undefined;
+    size?: import("../Tag").TagSize | undefined;
+    startAddon?: import("../Tag").TagAddon | undefined;
+    endAddon?: import("../Tag").TagAddon | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/MassActions/styles.js

@@ -0,0 +1,43 @@
+import { ActionGroup } from '../ActionGroup';
+import { styled } from '../styled';
+import { Tag } from '../Tag';
+export const Wrapper = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(3)};
+  align-items: center;
+
+  width: fit-content;
+  padding: ${({ theme }) => theme.spacing(4)};
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+
+  /* 16px по макету, токена под это значение в теме нет */
+  border-radius: calc(${({ theme }) => theme.shape.medium} * 2);
+  box-shadow: ${({ theme }) => theme.elevation[200]};
+`;
+export const Selection = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  align-items: center;
+
+  padding-left: ${({ theme }) => theme.spacing(2)};
+`;
+export const StyledActionGroup = styled(ActionGroup) `
+  gap: ${({ theme }) => theme.spacing(3)};
+`;
+/**
+ * Невидимая заглушка и счётчик лежат в одной ячейке: ширину задаёт заглушка, поэтому панель не прыгает при смене количества
+ */
+export const SelectionLabel = styled.div `
+  display: grid;
+  justify-items: start;
+
+  font-variant-numeric: tabular-nums;
+
+  & > * {
+    grid-area: 1 / 1;
+  }
+`;
+export const ReservedLabel = styled(Tag) `
+  visibility: hidden;
+`;

package/components/MassActions/types.d.ts

@@ -0,0 +1,20 @@
+import { type ActionGroupProps } from '../ActionGroup';
+export type MassActionsProps = Pick<ActionGroupProps, 'main' | 'secondary'> & {
+    /**
+     * Количество выбранных элементов
+     */
+    selectedCount: number;
+    /**
+     * Три формы названия выбранной сущности
+     * @example ['документ', 'документа', 'документов']
+     */
+    entityDeclension: [string, string, string];
+    /**
+     * Обработчик закрытия панели
+     */
+    onClose: () => void;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+};

package/components/MassActions/types.js

@@ -0,0 +1 @@
+export {};

package/components/MassActions/useLogic/index.d.ts

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

package/components/MassActions/useLogic/index.js

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

package/components/MassActions/useLogic/useLogic.d.ts

@@ -0,0 +1,7 @@
+import { type MassActionsProps } from '../types';
+type UseLogicParams = Pick<MassActionsProps, 'entityDeclension' | 'selectedCount'>;
+export declare const useLogic: ({ entityDeclension, selectedCount, }: UseLogicParams) => {
+    selectionLabel: string;
+    reservedLabel: string;
+};
+export {};

package/components/MassActions/useLogic/useLogic.js

@@ -0,0 +1,9 @@
+import { declensionOfWords } from '@astral/utils/declension/declensionOfWords';
+import { RESERVED_SELECTED_COUNT } from '../constants';
+export const useLogic = ({ entityDeclension, selectedCount, }) => {
+    const selectionLabel = `Выбрано: ${selectedCount} ${declensionOfWords(entityDeclension)(selectedCount)}`;
+    // Самая длинная форма слова — чтобы ширина панели не менялась при смене склонения
+    const longestEntity = entityDeclension.reduce((longest, entity) => entity.length > longest.length ? entity : longest);
+    const reservedLabel = `Выбрано: ${RESERVED_SELECTED_COUNT} ${longestEntity}`;
+    return { selectionLabel, reservedLabel };
+};

package/components/PageHeader/PageActions/SecondaryActions/styles.d.ts

@@ -9,4 +9,4 @@ export declare const StyledMobileButton: import("../../../styled").StyledCompone
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledSecondaryActions: <TSecondaryActionComponent extends import("react").ElementType = import("react").ElementType>({ actions, isDisabled, className, size, }: import("../../../ActionGroup").SecondaryActionProps<TSecondaryActionComponent>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const StyledSecondaryActions: <TSecondaryActionComponent extends import("react").ElementType = import("react").ElementType>({ actions, isDisabled, className, size, popoverProps, }: import("../../../ActionGroup").SecondaryActionProps<TSecondaryActionComponent>) => import("react/jsx-runtime").JSX.Element | null;

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/hooks/index.d.ts

@@ -1,3 +1,2 @@
-export * from './useDelayedUnmount';
 export * from './usePanelHeader';
 export * from './useRegisterClose';

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/hooks/index.js

@@ -1,3 +1,2 @@
-export * from './useDelayedUnmount';
 export * from './usePanelHeader';
 export * from './useRegisterClose';

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/useLogic.js

@@ -1,7 +1,8 @@
 import { useContext } from 'react';
 import { useTheme } from '../../../../../theme/hooks';
+import { useDelayedUnmount } from '../../../../../useDelayedUnmount';
 import { MobileSlidePanelContext } from '../../MobileSlidePanelContext';
-import { useDelayedUnmount, usePanelHeader, useRegisterClose } from './hooks';
+import { usePanelHeader, useRegisterClose } from './hooks';
 /**
  * Собирает жизненный цикл панели: присутствие в DOM, закрытие и шапку стека.
  */