@astral/ui 4.2.2 → 4.2.3

package/components/DataGrid/Body/Body.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from 'react';
+import { useContext } from 'react';
 import { ConfigContext } from '../../ConfigProvider';
 import { ContentState } from '../../ContentState';
 import { classNames } from '../../utils';
@@ -13,12 +13,11 @@ export const Body = (props) => {
     const { imagesMap } = useContext(ConfigContext);
     const { isNoData, contentStateProps } = useLogic(props);
     const { rows, selectedRows = [], isLoading, isError, errorMsg, minDisplayRows, keyId, noDataPlaceholder, onRetry, ...rowProps } = props;
-    const renderedRows = useMemo(() => {
-        return rows.map(({ children, options, ...row }) => {
-            const rowId = row[keyId];
-            return (_jsx(RowContextProvider, { children: _jsx(Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, ...rowProps }) }, rowId));
-        });
-    }, [rows, keyId, selectedRows, rowProps]);
+    const renderedRows = rows.map(({ children, options, ...row }) => {
+        const rowId = row[keyId];
+        const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
+        return (_jsx(RowContextProvider, { children: _jsx(Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, ...rowProps }, rowId) }, rowId));
+    });
     return (_jsx(Wrapper, { className: classNames(dataGridClassnames.body, {
             [dataGridClassnames.bodyEmpty]: isNoData,
         }), "$minDisplayRows": minDisplayRows, children: _jsx(ContentState, { ...contentStateProps, errorState: {

package/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { DataGridContext } from '../DataGridContext';
 const ROW_FLAGS_BY_DEFAULT = {
     isOpenedItems: true,
@@ -7,27 +7,27 @@ const ROW_FLAGS_BY_DEFAULT = {
 };
 export const DataGridContextProvider = ({ isLoading, children, }) => {
     const [openedItems, setOpenedItems] = useState({});
-    const checkIsOpened = (key) => {
+    const checkIsOpened = useCallback((key) => {
         if (openedItems[key]) {
             return true;
         }
         return false;
-    };
-    const checkIsMoreOpened = (key) => {
+    }, [openedItems]);
+    const checkIsMoreOpened = useCallback((key) => {
         if (openedItems[key]) {
             return openedItems[key].iOpenedMoreItems;
         }
         return false;
-    };
-    const toggleOpenItems = (key) => setOpenedItems((currentOpenedItems) => {
+    }, [openedItems]);
+    const toggleOpenItems = useCallback((key) => setOpenedItems((currentOpenedItems) => {
         if (checkIsOpened(key)) {
             const newOpenedItems = { ...currentOpenedItems };
             delete newOpenedItems[key];
             return newOpenedItems;
         }
         return { ...currentOpenedItems, [key]: ROW_FLAGS_BY_DEFAULT };
-    });
-    const toggleOpenMoreItems = (key) => setOpenedItems((currentOpenedItems) => {
+    }), [openedItems]);
+    const toggleOpenMoreItems = useCallback((key) => setOpenedItems((currentOpenedItems) => {
         if (checkIsMoreOpened(key)) {
             const newOpenedItems = { ...currentOpenedItems };
             newOpenedItems[key] = ROW_FLAGS_BY_DEFAULT;
@@ -37,12 +37,20 @@ export const DataGridContextProvider = ({ isLoading, children, }) => {
             ...currentOpenedItems,
             [key]: { ...ROW_FLAGS_BY_DEFAULT, iOpenedMoreItems: true },
         };
-    });
-    return (_jsx(DataGridContext.Provider, { value: {
-            checkIsOpened,
-            checkIsMoreOpened,
-            toggleOpenItems,
-            toggleOpenMoreItems,
-            isLoading,
-        }, children: children }));
+    }), [openedItems]);
+    const contextValue = useMemo(() => ({
+        checkIsOpened,
+        checkIsMoreOpened,
+        toggleOpenItems,
+        toggleOpenMoreItems,
+        isLoading,
+    }), [
+        checkIsOpened,
+        checkIsMoreOpened,
+        toggleOpenItems,
+        toggleOpenMoreItems,
+        isLoading,
+        openedItems,
+    ]);
+    return (_jsx(DataGridContext.Provider, { value: contextValue, children: children }));
 };

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

@@ -66,6 +66,10 @@ export type RowProps<TData extends Record<string, CellValue>> = {
      * Если true, то будет отображаться чекбокс для выбора элемента
      */
     isSelectable?: boolean;
+    /**
+     * Флаг выбора текущей строки
+     */
+    isSelected?: boolean;
     /**
      * Массив выбранных строк
      */

package/components/DataGrid/Row/Row.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { Checkbox } from '../../Checkbox';
 import { useHidePersonalData } from '../../personalDataSecurity';
 import { Tooltip } from '../../Tooltip';
+import { checkIsDeepEqual } from '../../utils/external';
 import { DISABLE_ROW_ATTR } from './constants';
 import { NestedChildren } from './NestedChildren';
 import { CellStyled, CheckboxCell, ChevronIcon, CollapseButton, CollapseCell, ContentWrapper, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 import { checkIsDisabled } from './utils';
-export const Row = (props) => {
+const RowComponent = (props) => {
     const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, } = useLogic(props);
     const { className, row, options, variant, isSelectable, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, selectedRows, activeRowId, keyId, onSelectRow, onRowClick, 
     // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
@@ -53,3 +54,27 @@ export const Row = (props) => {
                 // @ts-ignore
                 renderRow: renderRow })] }));
 };
+const arePropsEqual = (prevProps, nextProps) => {
+    const deepEqualityProps = new Set(['row']);
+    // Список пропсов, которые нужно игнорировать при сравнении
+    const skipProps = new Set([
+        'selectedRows',
+        'onSelectRow',
+        'columns',
+    ]);
+    const keys = Object.keys(prevProps);
+    return keys.every((key) => {
+        const typedKey = key;
+        // Не сравниваем свойства, которые нужно пропустить
+        if (skipProps.has(typedKey)) {
+            return true;
+        }
+        const prevValue = prevProps[typedKey];
+        const nextValue = nextProps[typedKey];
+        if (deepEqualityProps.has(typedKey)) {
+            return checkIsDeepEqual(prevValue, nextValue);
+        }
+        return prevValue === nextValue;
+    });
+};
+export const Row = memo(RowComponent, arePropsEqual);

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

@@ -1,21 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { RowContext } from '../RowContext';
 export const RowContextProvider = ({ children }) => {
     const [isDisabled, setDisabled] = useState(false);
     const [disabledReason, setDisabledReason] = useState();
-    const addDisabledRow = (reason) => {
+    const addDisabledRow = useCallback((reason) => {
         setDisabled(true);
         setDisabledReason(reason);
-    };
-    const removeDisabledRow = () => {
+    }, []);
+    const removeDisabledRow = useCallback(() => {
         setDisabled(false);
         setDisabledReason(undefined);
-    };
-    return (_jsx(RowContext.Provider, { value: {
-            isDisabled,
-            disabledReason,
-            addDisabledRow,
-            removeDisabledRow,
-        }, children: children }));
+    }, []);
+    const contextValue = useMemo(() => ({
+        isDisabled,
+        disabledReason,
+        addDisabledRow,
+        removeDisabledRow,
+    }), [isDisabled, disabledReason, addDisabledRow, removeDisabledRow]);
+    return (_jsx(RowContext.Provider, { value: contextValue, children: children }));
 };

package/components/DataGrid/useLogic/useLogic.js

@@ -7,6 +7,11 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
     const isFirstRender = useFirstMountState();
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isLoading || isDisabled;
+    // Реф добавлен для избежания замыкания selectedRows в handleSelectRow (иначе в handleSelectRow приходят некорректные значения selectedRows).
+    const selectedRowsRef = useRef(selectedRows);
+    useEffect(() => {
+        selectedRowsRef.current = selectedRows;
+    }, [selectedRows]);
     const treeRenderConfig = Object.is(variant, Variant.Subrows)
         ? { ...subrows, isInitialExpanded: true }
         : tree;
@@ -40,15 +45,15 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
         const filteredRows = selectedRows.filter((selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]));
         onSelectRow(filteredRows);
     };
-    const handleSelectRow = useCallback((row) => (event) => {
+    const handleSelectRow = (row) => (event) => {
         if (!onSelectRow) {
             return;
         }
         if (event.target.checked) {
-            return onSelectRow([...selectedRows, row]);
+            return onSelectRow([...selectedRowsRef.current, row]);
         }
-        onSelectRow(selectedRows.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
-    }, [selectedRows, onSelectRow, keyId]);
+        onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
+    };
     return {
         isDataGridDisabled,
         treeRenderConfig,

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

@@ -16,12 +16,11 @@ const Body = (props) => {
     const { imagesMap } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
     const { isNoData, contentStateProps } = (0, useLogic_1.useLogic)(props);
     const { rows, selectedRows = [], isLoading, isError, errorMsg, minDisplayRows, keyId, noDataPlaceholder, onRetry, ...rowProps } = props;
-    const renderedRows = (0, react_1.useMemo)(() => {
-        return rows.map(({ children, options, ...row }) => {
-            const rowId = row[keyId];
-            return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, ...rowProps }) }, rowId));
-        });
-    }, [rows, keyId, selectedRows, rowProps]);
+    const renderedRows = rows.map(({ children, options, ...row }) => {
+        const rowId = row[keyId];
+        const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
+        return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, ...rowProps }, rowId) }, rowId));
+    });
     return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, utils_1.classNames)(constants_1.dataGridClassnames.body, {
             [constants_1.dataGridClassnames.bodyEmpty]: isNoData,
         }), "$minDisplayRows": minDisplayRows, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, errorState: {

package/node/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.js

@@ -10,27 +10,27 @@ const ROW_FLAGS_BY_DEFAULT = {
 };
 const DataGridContextProvider = ({ isLoading, children, }) => {
     const [openedItems, setOpenedItems] = (0, react_1.useState)({});
-    const checkIsOpened = (key) => {
+    const checkIsOpened = (0, react_1.useCallback)((key) => {
         if (openedItems[key]) {
             return true;
         }
         return false;
-    };
-    const checkIsMoreOpened = (key) => {
+    }, [openedItems]);
+    const checkIsMoreOpened = (0, react_1.useCallback)((key) => {
         if (openedItems[key]) {
             return openedItems[key].iOpenedMoreItems;
         }
         return false;
-    };
-    const toggleOpenItems = (key) => setOpenedItems((currentOpenedItems) => {
+    }, [openedItems]);
+    const toggleOpenItems = (0, react_1.useCallback)((key) => setOpenedItems((currentOpenedItems) => {
         if (checkIsOpened(key)) {
             const newOpenedItems = { ...currentOpenedItems };
             delete newOpenedItems[key];
             return newOpenedItems;
         }
         return { ...currentOpenedItems, [key]: ROW_FLAGS_BY_DEFAULT };
-    });
-    const toggleOpenMoreItems = (key) => setOpenedItems((currentOpenedItems) => {
+    }), [openedItems]);
+    const toggleOpenMoreItems = (0, react_1.useCallback)((key) => setOpenedItems((currentOpenedItems) => {
         if (checkIsMoreOpened(key)) {
             const newOpenedItems = { ...currentOpenedItems };
             newOpenedItems[key] = ROW_FLAGS_BY_DEFAULT;
@@ -40,13 +40,21 @@ const DataGridContextProvider = ({ isLoading, children, }) => {
             ...currentOpenedItems,
             [key]: { ...ROW_FLAGS_BY_DEFAULT, iOpenedMoreItems: true },
         };
-    });
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContext.Provider, { value: {
-            checkIsOpened,
-            checkIsMoreOpened,
-            toggleOpenItems,
-            toggleOpenMoreItems,
-            isLoading,
-        }, children: children }));
+    }), [openedItems]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        checkIsOpened,
+        checkIsMoreOpened,
+        toggleOpenItems,
+        toggleOpenMoreItems,
+        isLoading,
+    }), [
+        checkIsOpened,
+        checkIsMoreOpened,
+        toggleOpenItems,
+        toggleOpenMoreItems,
+        isLoading,
+        openedItems,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContext.Provider, { value: contextValue, children: children }));
 };
 exports.DataGridContextProvider = DataGridContextProvider;

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

@@ -66,6 +66,10 @@ export type RowProps<TData extends Record<string, CellValue>> = {
      * Если true, то будет отображаться чекбокс для выбора элемента
      */
     isSelectable?: boolean;
+    /**
+     * Флаг выбора текущей строки
+     */
+    isSelected?: boolean;
     /**
      * Массив выбранных строк
      */

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

@@ -6,12 +6,13 @@ const react_1 = require("react");
 const Checkbox_1 = require("../../Checkbox");
 const personalDataSecurity_1 = require("../../personalDataSecurity");
 const Tooltip_1 = require("../../Tooltip");
+const external_1 = require("../../utils/external");
 const constants_1 = require("./constants");
 const NestedChildren_1 = require("./NestedChildren");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const utils_1 = require("./utils");
-const Row = (props) => {
+const RowComponent = (props) => {
     const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, } = (0, useLogic_1.useLogic)(props);
     const { className, row, options, variant, isSelectable, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, selectedRows, activeRowId, keyId, onSelectRow, onRowClick, 
     // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
@@ -56,4 +57,27 @@ const Row = (props) => {
                 // @ts-ignore
                 renderRow: renderRow })] }));
 };
-exports.Row = Row;
+const arePropsEqual = (prevProps, nextProps) => {
+    const deepEqualityProps = new Set(['row']);
+    // Список пропсов, которые нужно игнорировать при сравнении
+    const skipProps = new Set([
+        'selectedRows',
+        'onSelectRow',
+        'columns',
+    ]);
+    const keys = Object.keys(prevProps);
+    return keys.every((key) => {
+        const typedKey = key;
+        // Не сравниваем свойства, которые нужно пропустить
+        if (skipProps.has(typedKey)) {
+            return true;
+        }
+        const prevValue = prevProps[typedKey];
+        const nextValue = nextProps[typedKey];
+        if (deepEqualityProps.has(typedKey)) {
+            return (0, external_1.checkIsDeepEqual)(prevValue, nextValue);
+        }
+        return prevValue === nextValue;
+    });
+};
+exports.Row = (0, react_1.memo)(RowComponent, arePropsEqual);

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

@@ -7,19 +7,20 @@ const RowContext_1 = require("../RowContext");
 const RowContextProvider = ({ children }) => {
     const [isDisabled, setDisabled] = (0, react_1.useState)(false);
     const [disabledReason, setDisabledReason] = (0, react_1.useState)();
-    const addDisabledRow = (reason) => {
+    const addDisabledRow = (0, react_1.useCallback)((reason) => {
         setDisabled(true);
         setDisabledReason(reason);
-    };
-    const removeDisabledRow = () => {
+    }, []);
+    const removeDisabledRow = (0, react_1.useCallback)(() => {
         setDisabled(false);
         setDisabledReason(undefined);
-    };
-    return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContext.Provider, { value: {
-            isDisabled,
-            disabledReason,
-            addDisabledRow,
-            removeDisabledRow,
-        }, children: children }));
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        isDisabled,
+        disabledReason,
+        addDisabledRow,
+        removeDisabledRow,
+    }), [isDisabled, disabledReason, addDisabledRow, removeDisabledRow]);
+    return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContext.Provider, { value: contextValue, children: children }));
 };
 exports.RowContextProvider = RowContextProvider;

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

@@ -10,6 +10,11 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
     const isFirstRender = (0, hooks_1.useFirstMountState)();
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isLoading || isDisabled;
+    // Реф добавлен для избежания замыкания selectedRows в handleSelectRow (иначе в handleSelectRow приходят некорректные значения selectedRows).
+    const selectedRowsRef = (0, react_1.useRef)(selectedRows);
+    (0, react_1.useEffect)(() => {
+        selectedRowsRef.current = selectedRows;
+    }, [selectedRows]);
     const treeRenderConfig = Object.is(variant, enums_1.Variant.Subrows)
         ? { ...subrows, isInitialExpanded: true }
         : tree;
@@ -43,15 +48,15 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
         const filteredRows = selectedRows.filter((selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]));
         onSelectRow(filteredRows);
     };
-    const handleSelectRow = (0, react_1.useCallback)((row) => (event) => {
+    const handleSelectRow = (row) => (event) => {
         if (!onSelectRow) {
             return;
         }
         if (event.target.checked) {
-            return onSelectRow([...selectedRows, row]);
+            return onSelectRow([...selectedRowsRef.current, row]);
         }
-        onSelectRow(selectedRows.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
-    }, [selectedRows, onSelectRow, keyId]);
+        onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
+    };
     return {
         isDataGridDisabled,
         treeRenderConfig,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {