@astral/ui 4.114.0 → 4.115.1

package/components/PageContent/styles.js

@@ -1,4 +1,4 @@
-import { HOVER_MEDIA, selfContainedClassname } from '../constants';
+import { HOVER_MEDIA, SCROLLBAR_SIZE, selfContainedClassname, } from '../constants';
 import { pdfViewerClassnames } from '../PdfViewer/constants';
 import { styled } from '../styled';
 import { PAGE_CONTENT_ANIMATION, pageContentClassnames } from './constants';
@@ -60,10 +60,16 @@ export const Content = styled.div `
 
   ${HOVER_MEDIA} {
     scrollbar-gutter: stable;
+
+    padding-right: ${({ theme }) => `calc(${theme.spacing(6)} - ${SCROLLBAR_SIZE})`};
   }
 
   &.${pageContentClassnames.contentHasHeader}, &.${pageContentClassnames.hasAside} {
     padding: ${({ theme }) => theme.spacing(4, 6, 4)};
+
+    ${HOVER_MEDIA} {
+      padding-right: ${({ theme }) => `calc(${theme.spacing(6)} - ${SCROLLBAR_SIZE})`};
+    }
   }
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
@@ -71,8 +77,16 @@ export const Content = styled.div `
     padding-bottom: ${({ theme }) => theme.spacing(3)};
     padding-left: ${({ theme }) => theme.spacing(4)};
 
+    ${HOVER_MEDIA} {
+      padding-right: ${({ theme }) => `calc(${theme.spacing(4)} - ${SCROLLBAR_SIZE})`};
+    }
+
     &.${pageContentClassnames.contentHasHeader}, &.${pageContentClassnames.hasAside} {
       padding: ${({ theme }) => theme.spacing(4, 4, 3)};
+
+      ${HOVER_MEDIA} {
+        padding-right: ${({ theme }) => `calc(${theme.spacing(4)} - ${SCROLLBAR_SIZE})`};
+      }
     }
   }
 
@@ -88,6 +102,16 @@ export const Content = styled.div `
     border: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: ${({ theme }) => theme.shape.medium};
 
+    ${HOVER_MEDIA} {
+      padding-right: ${({ theme }) => theme.spacing(4)};
+    }
+    
+    &.${pageContentClassnames.contentHasHeader}, &.${pageContentClassnames.hasAside} {
+      ${HOVER_MEDIA} {
+        padding-right: ${({ theme }) => theme.spacing(4)};
+      }
+    }
+
     &.${pageContentClassnames.contentHasHeader} {
       border-top-left-radius: 0;
       border-top-right-radius: 0;

package/components/index.d.ts

@@ -131,7 +131,7 @@ export * from './MenuItem';
 export * from './MenuList';
 export { MinimalisticPagination, type MinimalisticPaginationProps, } from './MinimalisticPagination';
 export * from './NavMenu';
-export { type DataGridColumns, type DataGridRenderLink, type DataGridRenderLinkParams, type DataGridRow, type DataGridRowOptions, type DataGridSort, DataGrid, type DataGridProps, } from './DataGrid';
+export { type DataGridColumns, type DataGridRenderLink, type DataGridRenderLinkParams, type DataGridRow, type DataGridRowDisabled, type DataGridRowOptions, type DataGridSort, DataGrid, type DataGridProps, } from './DataGrid';
 export { DataGridInfinite, type DataGridInfiniteProps, } from './DataGridInfinite';
 export { DataGridColumnHintIcon, type DataGridColumnHintIconProps, } from './DataGridColumnHintIcon';
 export { type DateItemProps, type DateRangePickerProps, type DateRangePickerValue, DateRangePicker, } from './DateRangePicker';

package/node/components/DataGrid/Body/Body.d.ts

@@ -1,2 +1,2 @@
 import type { BodyProps } from './types';
-export declare const Body: <TData extends Record<string, unknown>>({ rows, selectedRows, minDisplayRows, keyId, noDataPlaceholder, className, renderRow, columns, isSelectable, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, ...rowProps }: BodyProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const Body: <TData extends Record<string, unknown>>({ rows, selectedIds, rowsDisabled, getRowDisabled, minDisplayRows, keyId, noDataPlaceholder, className, renderRow, columns, isSelectable, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, ...rowProps }: BodyProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/node/components/DataGrid/Body/Body.js

@@ -18,13 +18,17 @@ const bodyCva = (0, cva_1.cva)(constants_1.bodyClassnames.root, {
         },
     },
 });
-const Body = ({ rows, selectedRows = [], minDisplayRows, keyId, noDataPlaceholder, className, renderRow, columns, isSelectable, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, ...rowProps }) => {
+const Body = ({ rows, selectedIds, rowsDisabled, getRowDisabled, minDisplayRows, keyId, noDataPlaceholder, className, renderRow, columns, isSelectable, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, ...rowProps }) => {
     const { disableMinHeight, bodyCssVars } = (0, useLogic_1.useLogic)({ minDisplayRows });
     const renderedRows = rows.map((row, index) => {
         const rowId = row[keyId];
-        const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
+        const isSelected = selectedIds.has(rowId);
+        const rowDisabled = rowsDisabled.get(rowId);
         const { children, options } = row;
-        return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { row: row, onSelectRow: onSelectRow, onRowEnter: onRowEnter, onRowLeave: onRowLeave, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, isSelectable: isSelectable, isSelected: isSelected, children: renderRow ? ((0, jsx_runtime_1.jsx)(CustomRowWrapper_1.CustomRowWrapper, { index: index, renderRow: renderRow, row: row })) : ((0, jsx_runtime_1.jsx)(Row_1.Row, { row: row, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, columns: columns, isSelectable: isSelectable, onSelectRow: onSelectRow, onRowEnter: onRowEnter, onRowLeave: onRowLeave, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, ...rowProps }, rowId)) }, rowId));
+        const hasNestedChildren = Array.isArray(children) && children.length > 0;
+        return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { row: row, onSelectRow: onSelectRow, onRowEnter: onRowEnter, onRowLeave: onRowLeave, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, isSelectable: isSelectable, isSelected: isSelected, disabledMode: rowDisabled?.mode, disabledReason: rowDisabled?.reason, children: renderRow ? ((0, jsx_runtime_1.jsx)(CustomRowWrapper_1.CustomRowWrapper, { index: index, renderRow: renderRow, row: row })) : ((0, jsx_runtime_1.jsx)(Row_1.Row, { row: row, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, 
+                // Функция нужна только для расчёта блокировки вложенных строк, остальным не передаём, чтобы не сбрасывать memo
+                getRowDisabled: hasNestedChildren ? getRowDisabled : undefined, columns: columns, isSelectable: isSelectable, onSelectRow: onSelectRow, onRowEnter: onRowEnter, onRowLeave: onRowLeave, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, ...rowProps }, rowId)) }, rowId));
     });
     return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, cn_1.cn)(className, bodyCva({ disableMinHeight })), style: bodyCssVars, children: rows.length ? renderedRows : noDataPlaceholder }));
 };

package/node/components/DataGrid/Body/types.d.ts

@@ -1,6 +1,6 @@
 import { type ChangeEvent, type ReactNode } from 'react';
 import { type Variant } from '../enums';
-import { type CellValue, type DataGridColumns, type DataGridRowOptions } from '../types';
+import { type CellValue, type DataGridColumns, type DataGridProps, type DataGridRowDisabled, type DataGridRowOptions } from '../types';
 export type BodyProps<TData extends Record<string, CellValue>> = {
     /**
      * Конфигурация колонок для таблицы
@@ -46,9 +46,17 @@ export type BodyProps<TData extends Record<string, CellValue>> = {
      */
     isSelectable?: boolean;
     /**
-     * Массив выбранных строк
+     * Идентификаторы выбранных строк
      */
-    selectedRows?: TData[];
+    selectedIds: Set<unknown>;
+    /**
+     * Блокировки строк по идентификатору
+     */
+    rowsDisabled: Map<unknown, DataGridRowDisabled | undefined>;
+    /**
+     * Функция блокировки для вложенных строк
+     */
+    getRowDisabled?: DataGridProps<TData>['getRowDisabled'];
     /**
      * Массив данных для отображения
      */

package/node/components/DataGrid/DataGrid.js

@@ -82,7 +82,6 @@ const DataGrid = (props) => {
     const commonBodyProps = {
         ...bodyProps,
         keyId,
-        selectedRows,
         minDisplayRows,
         rows: renderRows,
         variant,

package/node/components/DataGrid/PinnedSections/PinnedSections.js

@@ -7,9 +7,9 @@ const Section_1 = require("./Section");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const PinnedSections = ({ gridColumns, className, isDisabled, headProps, bodyProps, sections, isNoData, }) => {
-    const { pinnedContainerStyles, sectionOffsets } = (0, useLogic_1.useLogic)({ sections });
+    const { pinnedContainerStyles, sectionOffsets, totalColumnsCount } = (0, useLogic_1.useLogic)({ sections });
     return ((0, jsx_runtime_1.jsx)(styles_1.PinnedColumnsContainer, { "$gridColumns": gridColumns, className: className, ...(0, getInertProps_1.getInertProps)(isDisabled), style: pinnedContainerStyles, children: sections.map(({ columns, position }) => {
-            return ((0, jsx_runtime_1.jsx)(Section_1.Section, { columns: columns, position: position, sectionOffset: sectionOffsets[position], bodyProps: bodyProps, headProps: headProps, isNoData: isNoData }, position));
+            return ((0, jsx_runtime_1.jsx)(Section_1.Section, { columns: columns, position: position, sectionOffset: sectionOffsets[position], bodyProps: { ...bodyProps, totalColumnsCount }, headProps: headProps, isNoData: isNoData }, position));
         }) }));
 };
 exports.PinnedSections = PinnedSections;

package/node/components/DataGrid/PinnedSections/useLogic/useLogic.d.ts

@@ -5,5 +5,6 @@ type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow> = Pic
 export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow>({ sections, }: UseLogicParams<TData>) => {
     pinnedContainerStyles: CSSProperties;
     sectionOffsets: Record<string, number>;
+    totalColumnsCount: number;
 };
 export {};

package/node/components/DataGrid/PinnedSections/useLogic/useLogic.js

@@ -14,15 +14,16 @@ const useLogic = ({ sections, }) => {
             ? (0, utils_1.getFlattenColumns)(rightColumns).length
             : 0,
     };
-    const sectionOffsets = (0, react_1.useMemo)(() => {
+    // Строка в секции видит только свои колонки, поэтому для поиска последней ячейки таблицы ей передаётся общее число колонок всех секций
+    const { sectionOffsets, totalColumnsCount } = (0, react_1.useMemo)(() => {
         const offsets = {};
         let currentOffset = 0;
         sections.forEach((section) => {
             offsets[section.position] = currentOffset;
             currentOffset += (0, utils_1.getFlattenColumns)(section.columns).length;
         });
-        return offsets;
+        return { sectionOffsets: offsets, totalColumnsCount: currentOffset };
     }, [sections]);
-    return { pinnedContainerStyles, sectionOffsets };
+    return { pinnedContainerStyles, sectionOffsets, totalColumnsCount };
 };
 exports.useLogic = useLogic;

package/node/components/DataGrid/Row/Row.js

@@ -4,12 +4,12 @@ exports.Row = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const BottomDrawer_1 = require("../../BottomDrawer");
-const Checkbox_1 = require("../../Checkbox");
 const Tooltip_1 = require("../../Tooltip");
 const cn_1 = require("../../utils/cn");
 const cva_1 = require("../../utils/cva");
 const getInertProps_1 = require("../../utils/getInertProps");
 const Cell_1 = require("../Cell");
+const RowCheckbox_1 = require("../RowCheckbox");
 const utils_1 = require("../utils");
 const constants_1 = require("./constants");
 const NestedChildren_1 = require("./NestedChildren");
@@ -60,17 +60,17 @@ const singleCellCva = (0, cva_1.cva)(constants_1.dataGridRowCellClassnames.singl
  * который позволяет полностью контролировать рендер каждой строки.
  */
 const RowInner = (props) => {
-    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, isHovered, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, rowStyles, drawerProps, disabledReasonText, isActive, isSelectable, mobileDisplayVariant, rootRowElement, rootRowRef, } = (0, useLogic_1.useLogic)(props);
-    const { className, row, options, variant, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, activeRowId, keyId, onSelectRow, onRowClick, sectionOffset, totalColumnsCount, registerRowElement, unregisterRowElement, onRowEnter, onRowLeave, style, 
+    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, isHovered, tooltipProps, nestedChildrenProps, isDisabled, isDisabledLastCell, isRenderCollapseButton, rowRef, rowStyles, drawerProps, disabledReason, isActive, isSelectable, mobileDisplayVariant, rootRowElement, rootRowRef, } = (0, useLogic_1.useLogic)(props);
+    const { className, row, options, variant, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, activeRowId, keyId, onSelectRow, onRowClick, sectionOffset, totalColumnsCount, registerRowElement, unregisterRowElement, onRowEnter, onRowLeave, style, getRowDisabled, isNested, 
     // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
     // Необходимы для DataGridInfinite
     ...selfProps } = props;
-    const { isDisabledLastCell = true, isNotSelectable, href, target, } = options || {};
+    const { isNotSelectable, href, target } = options || {};
     const renderStartAdornment = () => {
         if (!isRenderCollapseButton && (!isSelectable || isNotSelectable)) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRenderCollapseButton && ((0, jsx_runtime_1.jsx)(styles_1.CollapseCell, { children: (0, jsx_runtime_1.jsx)(styles_1.CollapseButton, { variant: "text", onClick: handleToggle, children: (0, jsx_runtime_1.jsx)(styles_1.ChevronIcon, { "$isActive": isOpen }) }) })), isSelectable && !isNotSelectable && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { ...(0, getInertProps_1.getInertProps)(disabled), onClick: (event) => event.stopPropagation(), className: constants_1.dataGridRowClassnames.checkbox, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps }) }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRenderCollapseButton && ((0, jsx_runtime_1.jsx)(styles_1.CollapseCell, { children: (0, jsx_runtime_1.jsx)(styles_1.CollapseButton, { variant: "text", onClick: handleToggle, children: (0, jsx_runtime_1.jsx)(styles_1.ChevronIcon, { "$isActive": isOpen }) }) })), isSelectable && !isNotSelectable && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { ...(0, getInertProps_1.getInertProps)(isDisabled), onClick: (event) => event.stopPropagation(), className: constants_1.dataGridRowClassnames.checkbox, children: (0, jsx_runtime_1.jsx)(RowCheckbox_1.RowCheckbox, { ...checkboxProps }) }))] }));
     };
     const renderCells = (0, react_1.useCallback)(() => {
         const lastCellGlobalIndex = (totalColumnsCount ?? columns.length) - 1;
@@ -80,7 +80,7 @@ const RowInner = (props) => {
         return columns?.map((cell, index) => {
             const cellId = `${rowId}-${index}`;
             const globalIndex = (sectionOffset ?? 0) + index;
-            const isDisabledCell = (0, utils_2.checkIsDisabled)(disabled, availableCellsByIndex, globalIndex);
+            const isDisabledCell = (0, utils_2.checkIsDisabled)(isDisabled, availableCellsByIndex, globalIndex);
             const isFirstCell = globalIndex === 0;
             if ((0, utils_1.isGroupColumns)(cell)) {
                 const { label, children, hideTitleOnMobile, isHideOnMobile } = cell;
@@ -98,13 +98,16 @@ const RowInner = (props) => {
         row,
         isOpen,
         columns,
-        disabled,
+        isDisabled,
+        isDisabledLastCell,
         checkboxProps.checked,
+        checkboxProps.disabled,
+        checkboxProps.disabledReason,
         totalColumnsCount,
         sectionOffset,
         rootRowElement,
     ]);
-    const renderRow = (0, react_1.useCallback)(({ key, ...nestedRowProps }) => ((0, jsx_runtime_1.jsx)(RowInner, { keyId: keyId, ...nestedRowProps, variant: variant, isSelectable: isSelectable, gridColumns: gridColumns, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, activeRowId: activeRowId, columns: childrenColumns, onSelectRow: onSelectRow, onRowClick: onRowClick, totalColumnsCount: totalColumnsCount, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, onRowEnter: onRowEnter, onRowLeave: onRowLeave, sectionOffset: sectionOffset }, key)), [
+    const renderRow = (0, react_1.useCallback)(({ key, ...nestedRowProps }) => ((0, jsx_runtime_1.jsx)(RowInner, { keyId: keyId, ...nestedRowProps, variant: variant, isSelectable: isSelectable, gridColumns: gridColumns, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, activeRowId: activeRowId, columns: childrenColumns, onSelectRow: onSelectRow, onRowClick: onRowClick, totalColumnsCount: totalColumnsCount, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, onRowEnter: onRowEnter, onRowLeave: onRowLeave, sectionOffset: sectionOffset, getRowDisabled: getRowDisabled, isNested: true }, key)), [
         keyId,
         variant,
         isSelectable,
@@ -123,11 +126,12 @@ const RowInner = (props) => {
         unregisterRowElement,
         onRowEnter,
         onRowLeave,
+        getRowDisabled,
     ]);
     return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, cn_1.cn)(className, rootCva({
             isShowConnector,
             mobileDisplayVariant,
             hasNestedChildren: Boolean(nestedChildren?.length),
-        })), style: rowStyles, ...selfProps, ref: rootRowRef, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: rowContentCva({ isHovered, isActive }), "$gridColumns": gridColumns, [constants_1.DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), (0, jsx_runtime_1.jsx)(NestedChildren_1.NestedChildren, { ...nestedChildrenProps, data: nestedChildren, keyId: keyId, level: level, variant: variant, gridColumns: gridColumns, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, renderRow: renderRow }), (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { ...drawerProps, children: (0, jsx_runtime_1.jsx)(styles_1.BottomDrawerContent, { children: disabledReasonText }) })] }, `row-${rowId}`));
+        })), style: rowStyles, ...selfProps, ref: rootRowRef, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: rowContentCva({ isHovered, isActive }), "$gridColumns": gridColumns, [constants_1.DISABLE_ROW_ATTR]: isDisabled, ...rowProps, children: renderCells() }) }), (0, jsx_runtime_1.jsx)(NestedChildren_1.NestedChildren, { ...nestedChildrenProps, data: nestedChildren, keyId: keyId, level: level, variant: variant, gridColumns: gridColumns, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, renderRow: renderRow }), (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { ...drawerProps, children: (0, jsx_runtime_1.jsx)(styles_1.BottomDrawerContent, { children: disabledReason }) })] }, `row-${rowId}`));
 };
 exports.Row = (0, react_1.memo)(RowInner);

package/node/components/DataGrid/Row/RowContext/RowContext.d.ts

@@ -1,10 +1,17 @@
 import { type ChangeEvent } from 'react';
+import { type DataGridRowDisabled } from '../../types';
 export type RowContextProps = {
-    isDisabled: boolean;
+    /**
+     * Если true, в строке выполняется блокирующее действие DataGridActionCell
+     */
+    hasBlockingAction: boolean;
+    /**
+     * Причина блокировки от блокирующего действия
+     */
+    blockingActionReason?: string;
+    addBlockingAction: (reason?: string) => void;
+    removeBlockingAction: () => void;
     isSelectable?: boolean;
-    disabledReason?: string;
-    addDisabledRow: (disabledReason?: string) => void;
-    removeDisabledRow: () => void;
     row: Record<string, unknown>;
     onSelectRow: (row: Record<string, unknown>) => (event: ChangeEvent<HTMLInputElement>) => void;
     onRowEnter?: (rowId: string) => void;
@@ -13,5 +20,9 @@ export type RowContextProps = {
     unregisterRowElement?: (rowId: string, el: HTMLElement) => void;
     itemProps?: object;
     isSelected?: boolean;
+    /**
+     * Итоговая блокировка строки, рассчитанная resolveRowDisabled
+     */
+    rowDisabled?: DataGridRowDisabled;
 };
 export declare const RowContext: import("react").Context<RowContextProps>;

package/node/components/DataGrid/Row/RowContext/RowContext.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowContext = void 0;
 const react_1 = require("react");
 exports.RowContext = (0, react_1.createContext)({
-    isDisabled: false,
+    hasBlockingAction: false,
     isSelectable: false,
-    addDisabledRow: () => undefined,
-    removeDisabledRow: () => undefined,
+    addBlockingAction: () => undefined,
+    removeBlockingAction: () => undefined,
     row: {},
     onSelectRow: () => () => undefined,
     onRowEnter: () => undefined,

package/node/components/DataGrid/Row/RowContext/RowProvider/RowProvider.d.ts

@@ -1,7 +1,16 @@
 import { type ReactNode } from 'react';
+import { type DataGridRowDisabled } from '../../../types';
 import { type RowContextProps } from '../RowContext';
 type RowContextProviderProps = Pick<RowContextProps, 'row' | 'itemProps' | 'onSelectRow' | 'onRowEnter' | 'onRowLeave' | 'registerRowElement' | 'unregisterRowElement' | 'isSelectable' | 'isSelected'> & {
+    /**
+     * Режим блокировки строки
+     */
+    disabledMode?: DataGridRowDisabled['mode'];
+    /**
+     * Причина блокировки строки
+     */
+    disabledReason?: string;
     children: ReactNode;
 };
-export declare const RowContextProvider: ({ row, itemProps, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, children, isSelectable, isSelected, }: RowContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RowContextProvider: ({ row, itemProps, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, children, isSelectable, isSelected, disabledMode, disabledReason, }: RowContextProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/DataGrid/Row/RowContext/RowProvider/RowProvider.js

@@ -4,23 +4,27 @@ exports.RowContextProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const RowContext_1 = require("../RowContext");
-const RowContextProvider = ({ row, itemProps, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, children, isSelectable, isSelected, }) => {
-    const [isDisabled, setDisabled] = (0, react_1.useState)(false);
-    const [disabledReason, setDisabledReason] = (0, react_1.useState)();
-    const addDisabledRow = (0, react_1.useCallback)((reason) => {
-        setDisabled(true);
-        setDisabledReason(reason);
+const RowContextProvider = ({ row, itemProps, onSelectRow, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, children, isSelectable, isSelected, disabledMode, disabledReason, }) => {
+    const [hasBlockingAction, setHasBlockingAction] = (0, react_1.useState)(false);
+    const [blockingActionReason, setBlockingActionReason] = (0, react_1.useState)();
+    const addBlockingAction = (0, react_1.useCallback)((reason) => {
+        setHasBlockingAction(true);
+        setBlockingActionReason(reason);
     }, []);
-    const removeDisabledRow = (0, react_1.useCallback)(() => {
-        setDisabled(false);
-        setDisabledReason(undefined);
+    const removeBlockingAction = (0, react_1.useCallback)(() => {
+        setHasBlockingAction(false);
+        setBlockingActionReason(undefined);
     }, []);
+    // Блокировка приходит примитивами, чтобы новый объект с тем же содержимым не обновлял контекст
+    const rowDisabled = (0, react_1.useMemo)(() => disabledMode
+        ? { mode: disabledMode, reason: disabledReason ?? '' }
+        : undefined, [disabledMode, disabledReason]);
     const contextValue = (0, react_1.useMemo)(() => ({
-        isDisabled,
+        hasBlockingAction,
+        blockingActionReason,
+        addBlockingAction,
+        removeBlockingAction,
         isSelectable,
-        disabledReason,
-        addDisabledRow,
-        removeDisabledRow,
         row,
         itemProps,
         onSelectRow,
@@ -29,12 +33,13 @@ const RowContextProvider = ({ row, itemProps, onSelectRow, onRowEnter, onRowLeav
         registerRowElement,
         unregisterRowElement,
         isSelected,
+        rowDisabled,
     }), [
-        isDisabled,
+        hasBlockingAction,
+        blockingActionReason,
+        addBlockingAction,
+        removeBlockingAction,
         isSelectable,
-        disabledReason,
-        addDisabledRow,
-        removeDisabledRow,
         row,
         itemProps,
         onSelectRow,
@@ -43,6 +48,7 @@ const RowContextProvider = ({ row, itemProps, onSelectRow, onRowEnter, onRowLeav
         registerRowElement,
         unregisterRowElement,
         isSelected,
+        rowDisabled,
     ]);
     return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContext.Provider, { value: contextValue, children: children }));
 };

package/node/components/DataGrid/Row/types.d.ts

@@ -1,6 +1,6 @@
 import { type ChangeEvent, type CSSProperties, type ReactNode } from 'react';
 import { type Variant } from '../enums';
-import { type CellValue, type DataGridColumns, type DataGridRowOptions } from '../types';
+import { type CellValue, type DataGridColumns, type DataGridProps, type DataGridRowOptions } from '../types';
 export type RowProps<TData extends Record<string, CellValue>> = {
     /**
      * Название класса, применяется к корневому компоненту
@@ -71,9 +71,13 @@ export type RowProps<TData extends Record<string, CellValue>> = {
      */
     isSelected?: boolean;
     /**
-     * Массив выбранных строк
+     * Если true, строка вложенная и сама вычисляет блокировку
      */
-    selectedRows?: TData[];
+    isNested?: boolean;
+    /**
+     * Функция блокировки для вложенных строк. Передаётся только строкам с дочерними элементами
+     */
+    getRowDisabled?: DataGridProps<TData>['getRowDisabled'];
     /**
      * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
      * @default '-'

package/node/components/DataGrid/Row/useLogic/useLogic.d.ts

@@ -2,8 +2,8 @@ import { type MouseEvent, type SyntheticEvent } from 'react';
 import type { CellValue } from '../../types';
 import type { RowProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue>> = RowProps<TData>;
-export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded, expandedLevel, isSelectable, isSelected, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }: UseLogicParams<TData>) => {
-    disabledReasonText: string | undefined;
+export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded, expandedLevel, isSelectable, isSelected, getRowDisabled, isNested, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }: UseLogicParams<TData>) => {
+    disabledReason: string | undefined;
     rowStyles: {
         accentColor?: import("csstype").Property.AccentColor | undefined;
         alignContent?: import("csstype").Property.AlignContent | undefined;
@@ -869,7 +869,8 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ keyId,
     childrenColumns: any[];
     rowId: string;
     rowRef: (element: HTMLElement | null) => void;
-    disabled: boolean | undefined;
+    isDisabled: boolean;
+    isDisabledLastCell: boolean;
     isSelectable: boolean | undefined;
     isRenderCollapseButton: boolean;
     handleToggle: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -895,7 +896,8 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ keyId,
     };
     checkboxProps: {
         checked: boolean | undefined;
-        disabled: boolean | undefined;
+        disabled: boolean;
+        disabledReason: string | undefined;
         onChange: (event: import("react").ChangeEvent<HTMLInputElement, Element>) => void;
     };
     nestedChildrenProps: {

package/node/components/DataGrid/Row/useLogic/useLogic.js

@@ -4,11 +4,12 @@ exports.useLogic = void 0;
 const react_1 = require("react");
 const DataGridContext_1 = require("../../DataGridContext");
 const enums_1 = require("../../enums");
+const utils_1 = require("../../utils");
 const constants_1 = require("../constants");
 const RowContext_1 = require("../RowContext");
 const hooks_1 = require("./hooks");
-const utils_1 = require("./utils");
-const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, isSelected, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }) => {
+const utils_2 = require("./utils");
+const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, isSelected, getRowDisabled, isNested = false, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }) => {
     const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = (0, hooks_1.useMobileLogic)();
     const [rootRowElement, setRootRowElement] = (0, react_1.useState)(null);
     const rootRowRef = (0, react_1.useCallback)((element) => {
@@ -18,7 +19,7 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options
     }, []);
     const isDefaultExpanded = Boolean(isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length);
     const { mobileDisplayVariant } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
-    const { isDisabled, disabledReason } = (0, react_1.useContext)(RowContext_1.RowContext);
+    const { hasBlockingAction, blockingActionReason, rowDisabled: contextRowDisabled, } = (0, react_1.useContext)(RowContext_1.RowContext);
     const [isOpen, setIsOpen] = (0, react_1.useState)(isDefaultExpanded);
     const savedElementRef = (0, react_1.useRef)(null);
     const rowRef = (element) => {
@@ -33,17 +34,24 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options
     };
     const [isVisibleTooltip, setVisibleTooltip] = (0, react_1.useState)(false);
     const rowId = row[keyId];
-    const { isDisabled: isExternalDisabled, disabledReason: externalDisabledReason, href, } = options || {};
-    const disabled = isDisabled || isExternalDisabled;
+    const { href } = options || {};
+    // Блокировку строки из rows таблица передаёт через контекст, вложенная строка считает её сама и не наследует блокировку родителя
+    const rowDisabled = (0, react_1.useMemo)(() => isNested ? (0, utils_1.resolveRowDisabled)(row, getRowDisabled) : contextRowDisabled, [isNested, row, getRowDisabled, contextRowDisabled]);
+    const { isDisabled, isDisabledLastCell, disabledReason, isCheckboxDisabled, checkboxDisabledReason, } = (0, utils_1.getRowDisabledState)({
+        rowDisabled,
+        hasBlockingAction,
+        blockingActionReason,
+        isDisabledLastCellOption: options?.isDisabledLastCell,
+    });
     const handleRowClick = () => {
-        if (disabled) {
+        if (isDisabled) {
             handleOpenDrawer();
             return undefined;
         }
         onRowClick?.(row);
     };
     const isShowConnector = Object.is(variant, enums_1.Variant.Tree);
-    const childrenColumns = (0, react_1.useMemo)(() => (0, utils_1.mergeColumnsOptions)(columns, options?.childrenColumns), [columns, options]);
+    const childrenColumns = (0, react_1.useMemo)(() => (0, utils_2.mergeColumnsOptions)(columns, options?.childrenColumns), [columns, options]);
     const handleToggle = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
         setIsOpen((prev) => !prev);
@@ -57,7 +65,7 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options
     };
     const handleCloseTooltip = () => setVisibleTooltip(false);
     const handleMouseMove = (event) => {
-        if (!disabled) {
+        if (!isDisabled) {
             return;
         }
         const element = event.target;
@@ -71,19 +79,19 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options
         '--level': level,
         ...style,
     }), [level, style]);
-    const isHovered = Boolean(!disabled && (onRowClick || href));
+    const isHovered = Boolean(!isDisabled && (onRowClick || href));
     const isActive = activeRowId === rowId;
-    const disabledReasonText = externalDisabledReason || disabledReason;
     const handleCheckboxChange = (0, react_1.useMemo)(() => onSelectRow(row), [onSelectRow, row]);
     return {
-        disabledReasonText,
+        disabledReason,
         rowStyles,
         isOpen,
         isShowConnector,
         childrenColumns,
         rowId,
         rowRef,
-        disabled,
+        isDisabled,
+        isDisabledLastCell,
         isSelectable,
         isRenderCollapseButton,
         handleToggle,
@@ -103,13 +111,14 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options
         },
         tooltipProps: {
             open: isVisibleTooltip,
-            title: disabled ? disabledReasonText : undefined,
+            title: isDisabled ? disabledReason : undefined,
             onOpen: handleOpenTooltip,
             onClose: handleCloseTooltip,
         },
         checkboxProps: {
             checked: isSelected,
-            disabled,
+            disabled: isCheckboxDisabled,
+            disabledReason: checkboxDisabledReason,
             onChange: handleCheckboxChange,
         },
         nestedChildrenProps: {

package/node/components/DataGrid/RowBase/RowBase.js

@@ -4,7 +4,6 @@ exports.RowBase = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const BottomDrawer_1 = require("../../BottomDrawer");
-const Checkbox_1 = require("../../Checkbox");
 const Tooltip_1 = require("../../Tooltip");
 const cn_1 = require("../../utils/cn");
 const cva_1 = require("../../utils/cva");
@@ -12,6 +11,7 @@ const getInertProps_1 = require("../../utils/getInertProps");
 const Cell_1 = require("../Cell");
 const constants_1 = require("../Row/constants");
 const utils_1 = require("../Row/utils");
+const RowCheckbox_1 = require("../RowCheckbox");
 const utils_2 = require("../utils");
 const constants_2 = require("./constants");
 const GroupCell_1 = require("./GroupCell");
@@ -43,7 +43,7 @@ exports.RowBase = (0, react_1.memo)((props) => {
         if (!adornment && !shouldRenderCheckbox) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [adornment, shouldRenderCheckbox && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { ...(0, getInertProps_1.getInertProps)(isDisabled), onClick: (event) => event.stopPropagation(), className: constants_1.dataGridRowClassnames.checkbox, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ...checkboxProps }) }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [adornment, shouldRenderCheckbox && ((0, jsx_runtime_1.jsx)(styles_1.CheckboxCell, { ...(0, getInertProps_1.getInertProps)(isDisabled), onClick: (event) => event.stopPropagation(), className: constants_1.dataGridRowClassnames.checkbox, children: (0, jsx_runtime_1.jsx)(RowCheckbox_1.RowCheckbox, { ...checkboxProps }) }))] }));
     };
     const renderCells = (0, react_1.useCallback)(() => {
         const lastCellGlobalIndex = columns.length - 1;
@@ -64,9 +64,12 @@ exports.RowBase = (0, react_1.memo)((props) => {
         row,
         columns,
         isDisabled,
+        isDisabledLastCell,
         sectionOffset,
         renderStartAdornment,
         checkboxProps.checked,
+        checkboxProps.disabled,
+        checkboxProps.disabledReason,
     ]);
     return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, cn_1.cn)(className, rootCva({ mobileDisplayVariant })), style: rowBaseVars, ...dataGridInfiniteItemProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: contentWrapperCva({ isHovered, isActive }), [constants_1.DISABLE_ROW_ATTR]: isDisabled, onClick: handleRowClick, children: renderCells() }) }), customContent, (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { ...drawerProps, children: (0, jsx_runtime_1.jsx)(styles_1.BottomDrawerContent, { children: drawerContent }) })] }, `row-base-${rowId}`));
 });

package/node/components/DataGrid/RowBase/types.d.ts

@@ -1,5 +1,5 @@
 import { type ChangeEvent, type ReactNode } from 'react';
-import type { DataGridColumns, DataGridRowWithOptions } from '../types';
+import type { DataGridColumns, DataGridRowDisabled, DataGridRowWithOptions } from '../types';
 export type RowBaseProps = {
     /**
      * Массив колонок
@@ -42,13 +42,17 @@ export type RowBaseProps = {
      */
     isSelected?: boolean;
     /**
-     * Заблокирована ли строка
+     * Если true, в строке выполняется блокирующее действие DataGridActionCell
      */
-    isDisabled?: boolean;
+    hasBlockingAction?: boolean;
     /**
-     * Причина блокировки строки
+     * Причина блокировки от блокирующего действия
      */
-    disabledReason?: string;
+    blockingActionReason?: string;
+    /**
+     * Итоговая блокировка строки, рассчитанная resolveRowDisabled
+     */
+    rowDisabled?: DataGridRowDisabled;
     /**
      * Обработчик выбора строки
      */