@astral/ui 4.68.1 → 4.69.0

package/components/DataGrid/DataGrid.js

@@ -64,7 +64,6 @@ export const DataGrid = (props) => {
     }, [noDataPlaceholder, noDataOptions, isLoading]);
     const commonBodyProps = {
         ...bodyProps,
-        activeRowId,
         keyId,
         selectedRows,
         minDisplayRows,
@@ -82,7 +81,7 @@ export const DataGrid = (props) => {
     };
     const renderTableContent = () => {
         if (!hasPinnedColumns || isMobile) {
-            return (_jsxs(Wrapper, { ...getInertProps(isDataGridDisabled), className: dataGridClassnames.wrapper, children: [headPreAddon, !isHideHead && (_jsx(Head, { ...headProps, columns: headColumns, gridColumns: gridColumns })), _jsx(ContentState, { ...contentStateProps, loadingContent: isMobile && _jsx(MobileSkeleton, { ...mobileSkeletonProps }), children: _jsx(Body, { ...commonBodyProps, columns: columns, gridColumns: gridColumns, className: bodyCva({
+            return (_jsxs(Wrapper, { ...getInertProps(isDataGridDisabled), className: dataGridClassnames.wrapper, children: [headPreAddon, !isHideHead && (_jsx(Head, { ...headProps, columns: headColumns, gridColumns: gridColumns })), _jsx(ContentState, { ...contentStateProps, loadingContent: isMobile && _jsx(MobileSkeleton, { ...mobileSkeletonProps }), children: _jsx(Body, { ...commonBodyProps, activeRowId: activeRowId, columns: columns, gridColumns: gridColumns, className: bodyCva({
                                 isNoData,
                             }) }) })] }));
         }

package/components/DataGrid/Row/Row.js

@@ -26,6 +26,9 @@ const rowContentCva = cva(dataGridRowContentClassnames.root, {
         isHovered: {
             true: dataGridRowContentClassnames.hovered,
         },
+        isActive: {
+            true: dataGridRowContentClassnames.active,
+        },
     },
 });
 const groupedColumnLabelCva = cva(dataGridGroupedColumnLabelClassnames.root, {
@@ -36,7 +39,7 @@ const groupedColumnLabelCva = cva(dataGridGroupedColumnLabelClassnames.root, {
     },
 });
 const RowComponent = (props) => {
-    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, isHovered, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, rowStyles, drawerProps, disabledReasonText, } = useLogic(props);
+    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, isHovered, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, rowStyles, drawerProps, disabledReasonText, isActive, } = useLogic(props);
     const { className, row, options, variant, isSelectable, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, selectedRows, activeRowId, keyId, onSelectRow, onRowClick, sectionOffset, totalColumnsCount, registerRowElement, unregisterRowElement, onRowEnter, onRowLeave, style, 
     // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
     // Необходимы для DataGridInfinite
@@ -99,7 +102,7 @@ const RowComponent = (props) => {
         onRowEnter,
         onRowLeave,
     ]);
-    return (_jsxs(Wrapper, { className: classNames(className, rootCva({ isShowConnector })), style: rowStyles, ...selfProps, children: [_jsx(Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: _jsx(ContentWrapper, { "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: rowContentCva({ isHovered }), "$gridColumns": gridColumns, [DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), _jsx(NestedChildren, { ...nestedChildrenProps, data: nestedChildren, keyId: keyId, level: level, variant: variant, gridColumns: gridColumns, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, 
+    return (_jsxs(Wrapper, { className: classNames(className, rootCva({ isShowConnector })), style: rowStyles, ...selfProps, children: [_jsx(Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: _jsx(ContentWrapper, { "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: rowContentCva({ isHovered, isActive }), "$gridColumns": gridColumns, [DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), _jsx(NestedChildren, { ...nestedChildrenProps, data: nestedChildren, keyId: keyId, level: level, variant: variant, gridColumns: gridColumns, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, 
                 // biome-ignore lint/suspicious/noTsIgnore: <>
                 // @ts-ignore
                 renderRow: renderRow }), _jsx(BottomDrawer, { ...drawerProps, children: _jsx(BottomDrawerContent, { children: disabledReasonText }) })] }));

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

@@ -11,6 +11,7 @@ export declare const dataGridRowClassnames: {
 export declare const dataGridRowContentClassnames: {
     root: string;
     hovered: string;
+    active: string;
 };
 export declare const dataGridRowCellClassnames: {
     single: string;

package/components/DataGrid/Row/constants.js

@@ -12,6 +12,7 @@ export const dataGridRowClassnames = {
 export const dataGridRowContentClassnames = {
     root: createUIKitClassname('data-grid__row-content'),
     hovered: createUIKitClassname('data-grid__row-content_hovered'),
+    active: createUIKitClassname('data-grid__row-content_active'),
 };
 export const dataGridRowCellClassnames = {
     single: createUIKitClassname('data-grid__row-cell_single'),

package/components/DataGrid/Row/styles.js

@@ -74,35 +74,47 @@ export const ContentWrapper = styled.div `
     }
   }
 
+  &.${dataGridRowContentClassnames.active} {
+    background-color: ${({ theme }) => theme.palette.primary[100]};
+  }
+
   &:hover {
     background-color: ${({ theme }) => theme.palette.background.elementHover};
-    &.${dataGridRowContentClassnames.hovered} {
-      cursor: pointer;
-    }
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      cursor: initial;
+    &.${dataGridRowContentClassnames.active} {
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
 
-      background-color: transparent;
+    &.${dataGridRowContentClassnames.hovered} {
+      cursor: pointer;
     }
   }
 
 
   &.${dataGridRowClassnames.hover} {
     background-color: ${({ theme }) => theme.palette.background.elementHover};
+
     &.${dataGridRowContentClassnames.hovered} {
       cursor: pointer;
     }
+  }
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      cursor: initial;
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-columns: 1fr;
 
+    &.${dataGridRowContentClassnames.active} {
       background-color: transparent;
     }
-  }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    grid-template-columns: 1fr;
+    &:hover, &.${dataGridRowClassnames.hover} {
+      cursor: initial;
+
+      background-color: transparent;
+
+      &.${dataGridRowContentClassnames.active} {
+        background-color: transparent;
+      }
+    }
   }
 `;
 export const CellStyled = styled(Cell) `

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

@@ -2,7 +2,7 @@ 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, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }: UseLogicParams<TData>) => {
     disabledReasonText: string | undefined;
     rowStyles: {
         accentColor?: import("csstype").Property.AccentColor | undefined;
@@ -873,6 +873,7 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ keyId,
     isRenderCollapseButton: boolean;
     handleToggle: (event: MouseEvent<HTMLButtonElement>) => void;
     isHovered: boolean;
+    isActive: boolean;
     rowProps: {
         onClick: () => void;
         onMouseMove: (event: MouseEvent<HTMLElement>) => void;

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

@@ -6,7 +6,7 @@ import { DISABLE_ROW_ATTR } from '../constants';
 import { RowContext } from '../RowContext';
 import { useMobileLogic } from './hooks';
 import { mergeColumnsOptions } from './utils';
-export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, }) => {
+export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }) => {
     const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = useMobileLogic();
     const isDefaultExpanded = isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length;
     const { checkIsOpened, toggleOpenItems } = useContext(DataGridContext);
@@ -75,6 +75,7 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
         ...style,
     }), [level, style]);
     const isHovered = Boolean(!disabled && (onRowClick || href));
+    const isActive = activeRowId === rowId;
     const disabledReasonText = externalDisabledReason || disabledReason;
     return {
         disabledReasonText,
@@ -88,6 +89,7 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
         isRenderCollapseButton,
         handleToggle,
         isHovered,
+        isActive,
         rowProps: {
             onClick: handleRowClick,
             onMouseMove: handleMouseMove,

package/components/DataGrid/types.d.ts

@@ -27,9 +27,6 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
     columns: DataGridColumns<TData>[];
     /**
      * Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
-     *
-     * @deprecated Не поддерживается, параметр будет удален в следующей major версии пакета.
-     * Мотивация: Использование активного элемента не является типичным сценарием использования таблицы.
      */
     activeRowId?: string;
     /**

package/components/DataGridInfinite/DataGridInfinite.js

@@ -36,7 +36,7 @@ const dataGridInfiniteCva = cva(dataGridClassnames.root, {
 export const DataGridInfinite = (props) => {
     const { imagesMap, emptySymbol } = useContext(ConfigContext);
     const { isNoData, isDataGridDisabled, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, flattenColumns, hasGroupedColumns, gridViewMode, } = useLogic(props);
-    const { columns, rows = [], selectedRows = [], sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, } = props;
+    const { columns, rows = [], selectedRows = [], sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, activeRowId, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const TableContainer = isDisabled ? DisabledDataGridWrapper : DataGridWrapper;
@@ -51,7 +51,7 @@ export const DataGridInfinite = (props) => {
                                     List,
                                     Item: ({ children, item, ...itemProps }) => {
                                         const { children: nestedChildren, options, ...row } = item;
-                                        return (_jsx(RowContextProvider, { children: _jsx(Row, { ...rowProps, ...itemProps, row: row, columns: flattenColumns, selectedRows: selectedRows, options: options, keyId: keyId, variant: variant, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, emptyCellValue: emptyCellValue, onRowClick: onRowClick }) }));
+                                        return (_jsx(RowContextProvider, { children: _jsx(Row, { ...rowProps, ...itemProps, row: row, columns: flattenColumns, selectedRows: selectedRows, options: options, keyId: keyId, variant: variant, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, activeRowId: activeRowId, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, emptyCellValue: emptyCellValue, onRowClick: onRowClick }) }));
                                     },
                                     EmptyPlaceholder: () => _jsx(_Fragment, { children: noDataPlaceholder || _jsx(NoData, {}) }),
                                     Footer: () => {

package/node/components/DataGrid/DataGrid.js

@@ -67,7 +67,6 @@ const DataGrid = (props) => {
     }, [noDataPlaceholder, noDataOptions, isLoading]);
     const commonBodyProps = {
         ...bodyProps,
-        activeRowId,
         keyId,
         selectedRows,
         minDisplayRows,
@@ -85,7 +84,7 @@ const DataGrid = (props) => {
     };
     const renderTableContent = () => {
         if (!hasPinnedColumns || isMobile) {
-            return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), className: constants_1.dataGridClassnames.wrapper, children: [headPreAddon, !isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, columns: headColumns, gridColumns: gridColumns })), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, loadingContent: isMobile && (0, jsx_runtime_1.jsx)(MobileSkeleton_1.MobileSkeleton, { ...mobileSkeletonProps }), children: (0, jsx_runtime_1.jsx)(Body_1.Body, { ...commonBodyProps, columns: columns, gridColumns: gridColumns, className: bodyCva({
+            return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), className: constants_1.dataGridClassnames.wrapper, children: [headPreAddon, !isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, columns: headColumns, gridColumns: gridColumns })), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, loadingContent: isMobile && (0, jsx_runtime_1.jsx)(MobileSkeleton_1.MobileSkeleton, { ...mobileSkeletonProps }), children: (0, jsx_runtime_1.jsx)(Body_1.Body, { ...commonBodyProps, activeRowId: activeRowId, columns: columns, gridColumns: gridColumns, className: bodyCva({
                                 isNoData,
                             }) }) })] }));
         }

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

@@ -29,6 +29,9 @@ const rowContentCva = (0, cva_1.cva)(constants_1.dataGridRowContentClassnames.ro
         isHovered: {
             true: constants_1.dataGridRowContentClassnames.hovered,
         },
+        isActive: {
+            true: constants_1.dataGridRowContentClassnames.active,
+        },
     },
 });
 const groupedColumnLabelCva = (0, cva_1.cva)(constants_1.dataGridGroupedColumnLabelClassnames.root, {
@@ -39,7 +42,7 @@ const groupedColumnLabelCva = (0, cva_1.cva)(constants_1.dataGridGroupedColumnLa
     },
 });
 const RowComponent = (props) => {
-    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, isHovered, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, rowStyles, drawerProps, disabledReasonText, } = (0, useLogic_1.useLogic)(props);
+    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, isHovered, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, rowStyles, drawerProps, disabledReasonText, isActive, } = (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, sectionOffset, totalColumnsCount, registerRowElement, unregisterRowElement, onRowEnter, onRowLeave, style, 
     // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
     // Необходимы для DataGridInfinite
@@ -102,7 +105,7 @@ const RowComponent = (props) => {
         onRowEnter,
         onRowLeave,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, rootCva({ isShowConnector })), style: rowStyles, ...selfProps, 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 }), "$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, 
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, rootCva({ isShowConnector })), style: rowStyles, ...selfProps, 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, 
                 // biome-ignore lint/suspicious/noTsIgnore: <>
                 // @ts-ignore
                 renderRow: renderRow }), (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { ...drawerProps, children: (0, jsx_runtime_1.jsx)(styles_1.BottomDrawerContent, { children: disabledReasonText }) })] }));

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

@@ -11,6 +11,7 @@ export declare const dataGridRowClassnames: {
 export declare const dataGridRowContentClassnames: {
     root: string;
     hovered: string;
+    active: string;
 };
 export declare const dataGridRowCellClassnames: {
     single: string;

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

@@ -15,6 +15,7 @@ exports.dataGridRowClassnames = {
 exports.dataGridRowContentClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-content'),
     hovered: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-content_hovered'),
+    active: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-content_active'),
 };
 exports.dataGridRowCellClassnames = {
     single: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__row-cell_single'),

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

@@ -77,35 +77,47 @@ exports.ContentWrapper = styled_1.styled.div `
     }
   }
 
+  &.${constants_2.dataGridRowContentClassnames.active} {
+    background-color: ${({ theme }) => theme.palette.primary[100]};
+  }
+
   &:hover {
     background-color: ${({ theme }) => theme.palette.background.elementHover};
-    &.${constants_2.dataGridRowContentClassnames.hovered} {
-      cursor: pointer;
-    }
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      cursor: initial;
+    &.${constants_2.dataGridRowContentClassnames.active} {
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
 
-      background-color: transparent;
+    &.${constants_2.dataGridRowContentClassnames.hovered} {
+      cursor: pointer;
     }
   }
 
 
   &.${constants_2.dataGridRowClassnames.hover} {
     background-color: ${({ theme }) => theme.palette.background.elementHover};
+
     &.${constants_2.dataGridRowContentClassnames.hovered} {
       cursor: pointer;
     }
+  }
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      cursor: initial;
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-columns: 1fr;
 
+    &.${constants_2.dataGridRowContentClassnames.active} {
       background-color: transparent;
     }
-  }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    grid-template-columns: 1fr;
+    &:hover, &.${constants_2.dataGridRowClassnames.hover} {
+      cursor: initial;
+
+      background-color: transparent;
+
+      &.${constants_2.dataGridRowContentClassnames.active} {
+        background-color: transparent;
+      }
+    }
   }
 `;
 exports.CellStyled = (0, styled_1.styled)(Cell_1.Cell) `

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

@@ -2,7 +2,7 @@ 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, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends Record<string, unknown>>({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }: UseLogicParams<TData>) => {
     disabledReasonText: string | undefined;
     rowStyles: {
         accentColor?: import("csstype").Property.AccentColor | undefined;
@@ -873,6 +873,7 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ keyId,
     isRenderCollapseButton: boolean;
     handleToggle: (event: MouseEvent<HTMLButtonElement>) => void;
     isHovered: boolean;
+    isActive: boolean;
     rowProps: {
         onClick: () => void;
         onMouseMove: (event: MouseEvent<HTMLElement>) => void;

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

@@ -9,7 +9,7 @@ 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, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, }) => {
+const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, activeRowId, }) => {
     const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = (0, hooks_1.useMobileLogic)();
     const isDefaultExpanded = isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length;
     const { checkIsOpened, toggleOpenItems } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
@@ -78,6 +78,7 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options
         ...style,
     }), [level, style]);
     const isHovered = Boolean(!disabled && (onRowClick || href));
+    const isActive = activeRowId === rowId;
     const disabledReasonText = externalDisabledReason || disabledReason;
     return {
         disabledReasonText,
@@ -91,6 +92,7 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options
         isRenderCollapseButton,
         handleToggle,
         isHovered,
+        isActive,
         rowProps: {
             onClick: handleRowClick,
             onMouseMove: handleMouseMove,

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

@@ -27,9 +27,6 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
     columns: DataGridColumns<TData>[];
     /**
      * Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
-     *
-     * @deprecated Не поддерживается, параметр будет удален в следующей major версии пакета.
-     * Мотивация: Использование активного элемента не является типичным сценарием использования таблицы.
      */
     activeRowId?: string;
     /**

package/node/components/DataGridInfinite/DataGridInfinite.js

@@ -39,7 +39,7 @@ const dataGridInfiniteCva = (0, cva_1.cva)(constants_1.dataGridClassnames.root,
 const DataGridInfinite = (props) => {
     const { imagesMap, emptySymbol } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
     const { isNoData, isDataGridDisabled, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, flattenColumns, hasGroupedColumns, gridViewMode, } = (0, useLogic_1.useLogic)(props);
-    const { columns, rows = [], selectedRows = [], sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = enums_1.Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, } = props;
+    const { columns, rows = [], selectedRows = [], sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = enums_1.Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, activeRowId, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = constants_1.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_1.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const TableContainer = isDisabled ? styles_2.DisabledDataGridWrapper : styles_2.DataGridWrapper;
@@ -54,7 +54,7 @@ const DataGridInfinite = (props) => {
                                     List: List_1.List,
                                     Item: ({ children, item, ...itemProps }) => {
                                         const { children: nestedChildren, options, ...row } = item;
-                                        return ((0, jsx_runtime_1.jsx)(Row_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { ...rowProps, ...itemProps, row: row, columns: flattenColumns, selectedRows: selectedRows, options: options, keyId: keyId, variant: variant, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, emptyCellValue: emptyCellValue, onRowClick: onRowClick }) }));
+                                        return ((0, jsx_runtime_1.jsx)(Row_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { ...rowProps, ...itemProps, row: row, columns: flattenColumns, selectedRows: selectedRows, options: options, keyId: keyId, variant: variant, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, activeRowId: activeRowId, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, emptyCellValue: emptyCellValue, onRowClick: onRowClick }) }));
                                     },
                                     EmptyPlaceholder: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: noDataPlaceholder || (0, jsx_runtime_1.jsx)(NoData_1.NoData, {}) }),
                                     Footer: () => {

package/package.json

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