@astral/ui 4.113.3 → 4.115.0

package/components/DataGridInfinite/faker.d.ts

@@ -7,11 +7,7 @@ type DataType = {
     actions?: object;
 };
 export declare const makeRandomDate: () => string;
-export declare const makeDataList: (length?: number, options?: {
-    isDisabled?: boolean;
-    isDisabledLastCell?: boolean;
-    disabledReason?: string;
-}) => DataType[];
+export declare const makeDataList: (length?: number) => DataType[];
 export declare const makeDataListWithTree: (length?: number, options?: {
     isNotSelectable?: boolean;
     childrenCount?: number;

package/components/DataGridInfinite/faker.js

@@ -11,13 +11,12 @@ export const makeRandomDate = () => {
     });
     return randomDate.toISOString();
 };
-export const makeDataList = (length = 10, options) => {
+export const makeDataList = (length = 10) => {
     return Array.from({ length }).map((_, i) => ({
         id: i.toString(),
         documentName: `Договор №${i + 1}`,
         recipient: RECIPIENTS[faker.number.int({ min: 0, max: RECIPIENTS.length })],
         createDate: makeRandomDate(),
-        options: Math.random() < 0.4 ? options : {},
     }));
 };
 export const makeDataListWithTree = (length = 10, options) => {

package/components/DataGridInfinite/styles.d.ts

@@ -30,3 +30,7 @@ export declare const StyledContainer: import("../styled").StyledComponent<{
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const MassActionsSpacer: 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>, {}>;

package/components/DataGridInfinite/styles.js

@@ -1,3 +1,4 @@
+import { dataGridClassnames } from '../DataGrid/constants';
 import { Container } from '../DataGrid/styles';
 import { ScrollToTopButton } from '../ScrollToTopButton';
 import { styled } from '../styled';
@@ -52,6 +53,26 @@ export const StyledScrollToTopButton = styled(ScrollToTopButton) `
   }
 `;
 export const StyledContainer = styled(Container) `
+  &.${dataGridClassnames.hasMassActions} {
+    /* Резерв места под панель массовых действий убирается одновременно с анимацией её скрытия, чтобы строки не прыгали */
+    & .${dataGridInfiniteClassnames.massActionsSpacer} {
+      transition: height
+        ${({ theme }) => theme.transitions.duration.leavingScreen}ms
+        ${({ theme }) => theme.transitions.easing.easeIn};
+    }
+
+    &.${dataGridClassnames.massActionsOpen} {
+      & .${dataGridInfiniteClassnames.massActionsSpacer} {
+        height: var(--mass-actions-reserved-space);
+      }
+
+      /* Кнопка «Наверх» скрыта при открытой панели, чтобы не перегружать интерфейс */
+      & .${dataGridInfiniteClassnames.scrollToTopButton} {
+        display: none;
+      }
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     & .${dataGridInfiniteListClassnames.root} {
       display: flex;
@@ -60,3 +81,6 @@ export const StyledContainer = styled(Container) `
     }
   }
 `;
+export const MassActionsSpacer = styled.div `
+  height: 0;
+`;

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

@@ -2,9 +2,14 @@ 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 DataGridInfiniteItemContext } from '../Row';
 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, getRowDisabled, isEndReached, endOfScrollMsg, onRetry, onEndReached, onStartReached, isStartReached, onSelectRow, isHideSelectAll, initialVisibleItemIndex, isHideHeaderIfNoData, gridViewMode: gridViewModeProp, massActions, mobileDisplayVariant, virtuosoRef, }: UseLogicParams<TData, TSortField>) => {
+    virtuosoContext: DataGridInfiniteItemContext & FooterContext;
+    hasMassActions: boolean;
+    isMassActionsOpen: boolean;
     containerCssVars: import("react").CSSProperties;
     mobileSkeletonProps: {
         cellsCount: number;
@@ -19,7 +24,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 +36,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

@@ -1,13 +1,13 @@
 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 { useWarnRowsWithoutDisabledReason } from '../../DataGrid/hooks';
 import { useDataGridMobileLogic } from '../../DataGrid/useLogic/hooks';
-import { getDataGridCssVars, getFlattenColumns, getGridTemplateColumns, isGroupColumns, } from '../../DataGrid/utils';
+import { checkIsMassActionsOpen, getDataGridCssVars, getFlattenColumns, getGridTemplateColumns, isGroupColumns, resolveRowsDisabled, } 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, getRowDisabled, 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;
@@ -66,7 +66,16 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
         }
         return config;
     }, [variant, subrows, tree, isMobile]);
-    const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
+    // Блокировки строк: getRowDisabled вызывается один раз на строку
+    const { rowsDisabled, idsWithoutReason } = useMemo(() => resolveRowsDisabled(rows, keyId, getRowDisabled), [rows, keyId, getRowDisabled]);
+    useWarnRowsWithoutDisabledReason(idsWithoutReason);
+    const selectedIds = useMemo(() => new Set(selectedRows.map((row) => row[keyId])), [selectedRows, keyId]);
+    const itemContext = useMemo(() => ({
+        selectedIds,
+        rowsDisabled,
+        getRowDisabled: getRowDisabled,
+    }), [selectedIds, rowsDisabled, getRowDisabled]);
+    const availableRows = useMemo(() => rows.filter((row) => !row.options?.isNotSelectable && !rowsDisabled.get(row[keyId])), [rows, rowsDisabled, keyId]);
     const flattenColumns = useMemo(() => getFlattenColumns(columns), [columns]);
     const hasGroupedColumns = columns.some(isGroupColumns);
     const gridViewMode = hasGroupedColumns ? 'full' : gridViewModeProp;
@@ -81,9 +90,7 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
             onStartReached();
         }
     }, [isStartReached, onStartReached]);
-    const uncheckedRowsCount = useMemo(() => {
-        return availableRows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
-    }, [availableRows, selectedRows, keyId]);
+    const uncheckedRowsCount = useMemo(() => availableRows.filter((row) => !selectedIds.has(row[keyId])).length, [availableRows, selectedIds, keyId]);
     const handleRangeChanged = useCallback((range) => {
         if (scrollToTopButtonRef.current) {
             scrollToTopButtonRef.current.classList.toggle(dataGridInfiniteClassnames.visibleScrollToTopButton, range.startIndex > baseIndex.current + 2);
@@ -94,11 +101,11 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
             return;
         }
         if (event.target.checked) {
-            const mergedSelectedRows = uniqueBy([...selectedRows, ...availableRows], prop(keyId));
+            const mergedSelectedRows = uniqueBy([...selectedRowsRef.current, ...availableRows], (row) => row[keyId]);
             return onSelectRow(mergedSelectedRows);
         }
-        const filteredRows = selectedRows.filter((selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]));
-        onSelectRow(filteredRows);
+        const rowsIds = new Set(rows.map((row) => row[keyId]));
+        onSelectRow(selectedRowsRef.current.filter((selectedRow) => !rowsIds.has(selectedRow[keyId])));
     };
     const handleSelectRow = useCallback((row) => (event) => {
         if (!onSelectRow) {
@@ -112,11 +119,15 @@ 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) {
+            // listHeight включает header и footer
+            const getHeight = (className) => container.querySelector(`.${className}`)?.clientHeight ?? 0;
+            const rowsHeight = listHeight -
+                getHeight(dataGridInfiniteClassnames.header) -
+                getHeight(dataGridInfiniteClassnames.footer);
+            setHasVerticalScroll(rowsHeight > container.clientHeight);
         }
     };
     const isHideHead = isHideHeaderIfNoData && rows.length === 0;
@@ -130,14 +141,39 @@ 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,
+    ]);
+    const virtuosoContext = useMemo(() => ({ ...itemContext, ...footerContext }), [itemContext, footerContext]);
     return {
+        virtuosoContext,
+        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;
+}, {}, {}>;