@astral/ui 4.76.3 → 4.77.0

package/components/DataGrid/Cell/Cell.d.ts

@@ -1,42 +1,2 @@
-import { type ReactNode } from 'react';
-import type { CellValue, DataGridSingleColumn } from '../types';
-export type CellProps<TData extends Record<string, CellValue>> = {
-    /**
-     * Название класса, применяется к корневому компоненту
-     */
-    className?: string;
-    /**
-     * Данные строки для отображения
-     */
-    row: TData;
-    cell: DataGridSingleColumn<TData>;
-    /**
-     * Дополнительное содержимое ячейки, которое будет распложено справа
-     */
-    startAdornment?: ReactNode;
-    /**
-     * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
-     */
-    emptyCellValue?: ReactNode;
-    /**
-     * Если true, ячейка будет недоступна для взаимодействия
-     */
-    isDisabled?: boolean;
-    /**
-     * Скрытие персональных данных от инструментов мониторинга
-     */
-    isHidePersonalData?: boolean;
-    /**
-     * Скрытие ячейки на мобильных устройствах
-     */
-    isHideOnMobile?: boolean;
-    /**
-     * Флаг наличия вложенных элементов в строке
-     */
-    hasNestedChildren?: boolean;
-    /**
-     * Ссылка на корневой элемент строки
-     */
-    rootRowElement?: HTMLLIElement | null;
-};
+import type { CellProps } from './types';
 export declare const Cell: <TData extends Record<string, unknown>>(props: CellProps<TData>) => import("react/jsx-runtime").JSX.Element | null;

package/components/DataGrid/Cell/Cell.js

@@ -1,13 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
-import { OverflowTypography } from '../../OverflowTypography';
 import { useHidePersonalData } from '../../personalDataSecurity';
 import { useViewportType } from '../../useViewportType';
 import { classNames } from '../../utils/classNames';
 import { cva } from '../../utils/cva';
 import { getInertProps } from '../../utils/getInertProps';
+import { CellInner } from './CellInner';
 import { dataGridCellClassnames } from './constants';
-import { CellContent, ColumnLabel, Wrapper } from './styles';
+import { Wrapper } from './styles';
 import { useLogic } from './useLogic';
 const cellCva = cva(dataGridCellClassnames.root, {
     variants: {
@@ -30,40 +30,21 @@ const cellCva = cva(dataGridCellClassnames.root, {
         },
     },
 });
-const cellContentCva = cva(dataGridCellClassnames.cellContent, {
-    variants: {
-        isActionColumn: {
-            true: dataGridCellClassnames.actionColumn,
-        },
-        isTabularNums: {
-            true: dataGridCellClassnames.tabularNums,
-        },
-    },
-});
-const columnLabelCva = cva(dataGridCellClassnames.columnLabel, {
-    variants: {
-        hidden: {
-            true: dataGridCellClassnames.columnLabelHidden,
-        },
-    },
-});
 export const Cell = (props) => {
-    const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, isTabularNums, } = useLogic(props);
-    const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, isHideOnMobile, hasNestedChildren, rootRowElement, } = props;
+    const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, isTabularNums, onCellClick, } = useLogic(props);
+    const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, isHideOnMobile, hasNestedChildren, rootRowElement, href, target, } = props;
     const { renderCell, align = 'left' } = cell;
     const { isMobile } = useViewportType();
     const hidePersonalDataClassname = useHidePersonalData({
         isEnabled: isHidePersonalData === true,
     });
-    const cellNode = (_jsxs(Wrapper, { className: classNames(className, hidePersonalDataClassname, cellCva({
+    const cellNode = (_jsx(Wrapper, { className: classNames(className, hidePersonalDataClassname, cellCva({
             isHideOnMobile: cell.isHideOnMobile || isHideOnMobile,
             isDisabled,
             withStartAdornment: hasStartAdornment,
             align,
             isActionColumn,
-        })), ...getInertProps(isDisabled), children: [startAdornment && startAdornment, _jsxs(CellContent, { className: cellContentCva({ isActionColumn, isTabularNums }), children: [_jsx(ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
-                            hidden: hideTitleOnMobile || isActionColumn,
-                        }), children: label }), renderCell?.(row), !renderCell && (_jsx(OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: _jsx(_Fragment, { children: formattedValue }) }))] })] }));
+        })), ...getInertProps(isDisabled), onClick: onCellClick, children: _jsx(CellInner, { row: row, label: label, hideTitleOnMobile: hideTitleOnMobile, isActionColumn: isActionColumn, isTabularNums: isTabularNums, startAdornment: startAdornment, renderCell: renderCell, formattedValue: formattedValue, hidePersonalDataClassname: hidePersonalDataClassname, href: href, target: target }) }));
     if (isActionColumn && isMobile && hasNestedChildren) {
         if (!rootRowElement) {
             return null;

package/components/DataGrid/Cell/CellInner/CellInner.d.ts

@@ -0,0 +1,2 @@
+import { type CellInnerProps } from './types';
+export declare const CellInner: ({ row, label, hideTitleOnMobile, isActionColumn, isTabularNums, startAdornment, renderCell, formattedValue, hidePersonalDataClassname, href, target, }: CellInnerProps) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/Cell/CellInner/CellInner.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { OverflowTypography } from '../../../OverflowTypography';
+import { cva } from '../../../utils/cva';
+import { dataGridCellClassnames } from '../constants';
+import { Anchor, CellContent, ColumnLabel } from './styles';
+const cellContentCva = cva(dataGridCellClassnames.cellContent, {
+    variants: {
+        isActionColumn: {
+            true: dataGridCellClassnames.actionColumn,
+        },
+        isTabularNums: {
+            true: dataGridCellClassnames.tabularNums,
+        },
+    },
+});
+const columnLabelCva = cva(dataGridCellClassnames.columnLabel, {
+    variants: {
+        hidden: {
+            true: dataGridCellClassnames.columnLabelHidden,
+        },
+    },
+});
+export const CellInner = ({ row, label, hideTitleOnMobile, isActionColumn, isTabularNums, startAdornment, renderCell, formattedValue, hidePersonalDataClassname, href, target, }) => {
+    const content = (_jsxs(_Fragment, { children: [startAdornment, _jsxs(CellContent, { className: cellContentCva({ isActionColumn, isTabularNums }), children: [_jsx(ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
+                            hidden: hideTitleOnMobile || isActionColumn,
+                        }), children: label }), renderCell?.(row), !renderCell && (_jsx(OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: _jsx(_Fragment, { children: formattedValue }) }))] })] }));
+    if (href && !isActionColumn) {
+        return (_jsx(Anchor, { href: href, target: target, rel: "noopener noreferrer", children: content }));
+    }
+    return content;
+};

package/components/DataGrid/Cell/CellInner/index.d.ts

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

package/components/DataGrid/Cell/CellInner/index.js

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

package/components/DataGrid/Cell/CellInner/styles.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const ColumnLabel: import("../../../styled").StyledComponent<import("../../../Typography/types").TypographyPropsBase & {
+    color?: import("../../../Typography").TypographyColor | undefined;
+    variant?: import("../../../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../../../Typography").Intensity | undefined;
+    component?: import("../../../Typography/types").ComponentProp | undefined;
+    isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const CellContent: 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 Anchor: 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").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;

package/components/DataGrid/Cell/CellInner/styles.js

@@ -0,0 +1,49 @@
+import { styled } from '../../../styled';
+import { Typography } from '../../../Typography';
+import { dataGridCellClassnames } from '../constants';
+export const ColumnLabel = styled(Typography) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
+
+    &.${dataGridCellClassnames.columnLabelHidden} {
+      display: none;
+    }
+  }
+`;
+export const CellContent = styled.div `
+  min-width: 0;
+
+  &.${dataGridCellClassnames.tabularNums} {
+    font-feature-settings: "tnum" 1;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    flex-direction: column;
+    gap: ${({ theme }) => theme.spacing(1)};
+    align-items: flex-start;
+
+    width: 100%;
+    
+    &.${dataGridCellClassnames.actionColumn} {
+      align-items: flex-end;
+    }
+  }
+`;
+export const Anchor = styled.a `
+  display: flex;
+  align-items: inherit;
+  justify-content: inherit;
+
+  width: 100%;
+  height: 100%;
+
+  color: inherit;
+  text-decoration: none;
+
+  &:focus-visible {
+    outline: none;
+  }
+`;

package/components/DataGrid/Cell/CellInner/types.d.ts

@@ -0,0 +1,48 @@
+import { type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
+import { type RenderCell } from '../../types';
+export type CellInnerProps = {
+    /**
+     * Данные строки для отображения
+     */
+    row: Record<string, unknown>;
+    /**
+     * Название колонки
+     */
+    label?: string;
+    /**
+     * Скрытие заголовка колонки на мобильных устройствах
+     */
+    hideTitleOnMobile?: boolean;
+    /**
+     * Флаг колонки с действиями
+     */
+    isActionColumn?: boolean;
+    /**
+     * Моноширинный шрифт для чисел
+     */
+    isTabularNums?: boolean;
+    /**
+     * Дополнительное содержимое ячейки слева
+     */
+    startAdornment?: ReactNode;
+    /**
+     * Кастомное отображение ячейки
+     */
+    renderCell?: RenderCell<Record<string, unknown>>;
+    /**
+     * Отформатированное значение ячейки
+     */
+    formattedValue?: unknown;
+    /**
+     * Класс для скрытия персональных данных
+     */
+    hidePersonalDataClassname?: string;
+    /**
+     * URL ссылки. Если задан, содержимое оборачивается в ссылку
+     */
+    href?: string;
+    /**
+     * Целевая область для ссылки
+     */
+    target?: HTMLAttributeAnchorTarget;
+};

package/components/DataGrid/Cell/CellInner/types.js

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

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

@@ -12,4 +12,5 @@ export declare const dataGridCellClassnames: {
     alignRight: string;
     grouped: string;
     tabularNums: string;
+    anchorCell: string;
 };

package/components/DataGrid/Cell/constants.js

@@ -13,4 +13,5 @@ export const dataGridCellClassnames = {
     alignRight: createUIKitClassname('data-grid__cell_align-right'),
     grouped: createUIKitClassname('data-grid__cell_grouped'),
     tabularNums: createUIKitClassname('data-grid__cell_tabular-nums'),
+    anchorCell: createUIKitClassname('data-grid__cell_anchor-cell'),
 };

package/components/DataGrid/Cell/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Cell';
 export { dataGridCellClassnames } from './constants';
+export type { CellProps } from './types';

package/components/DataGrid/Cell/styles.d.ts

@@ -3,18 +3,3 @@ 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 ColumnLabel: import("../../styled").StyledComponent<import("../../Typography/types").TypographyPropsBase & {
-    color?: import("../../Typography").TypographyColor | undefined;
-    variant?: import("../../Typography").TypographyVariant | undefined;
-    colorIntensity?: import("../../Typography").Intensity | undefined;
-    component?: import("../../Typography/types").ComponentProp | undefined;
-    isUpperCase?: boolean | undefined;
-    withoutCalt?: boolean | undefined;
-    isTabularNums?: boolean | undefined;
-} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const CellContent: 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/DataGrid/Cell/styles.js

@@ -1,5 +1,4 @@
 import { styled } from '../../styled';
-import { Typography } from '../../Typography';
 import { MIN_ROW_HEIGHT } from '../constants';
 import { dataGridRowClassnames } from '../Row/constants';
 import { dataGridCellClassnames } from './constants';
@@ -69,34 +68,3 @@ export const Wrapper = styled.div `
     }
   }
 `;
-export const ColumnLabel = styled(Typography) `
-  display: none;
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: block;
-
-    &.${dataGridCellClassnames.columnLabelHidden} {
-      display: none;
-    }
-  }
-`;
-export const CellContent = styled.div `
-  min-width: 0;
-
-  &.${dataGridCellClassnames.tabularNums} {
-    font-feature-settings: "tnum" 1;
-  }
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: flex;
-    flex-direction: column;
-    gap: ${({ theme }) => theme.spacing(1)};
-    align-items: flex-start;
-
-    width: 100%;
-    
-    &.${dataGridCellClassnames.actionColumn} {
-      align-items: flex-end;
-    }
-  }
-`;

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

@@ -0,0 +1,49 @@
+import { type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
+import { type CellValue, type DataGridSingleColumn } from '../types';
+export type CellProps<TData extends Record<string, CellValue>> = {
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Данные строки для отображения
+     */
+    row: TData;
+    cell: DataGridSingleColumn<TData>;
+    /**
+     * Дополнительное содержимое ячейки, которое будет распложено справа
+     */
+    startAdornment?: ReactNode;
+    /**
+     * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
+     */
+    emptyCellValue?: ReactNode;
+    /**
+     * Если true, ячейка будет недоступна для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Скрытие персональных данных от инструментов мониторинга
+     */
+    isHidePersonalData?: boolean;
+    /**
+     * Скрытие ячейки на мобильных устройствах
+     */
+    isHideOnMobile?: boolean;
+    /**
+     * Флаг наличия вложенных элементов в строке
+     */
+    hasNestedChildren?: boolean;
+    /**
+     * Ссылка на корневой элемент строки
+     */
+    rootRowElement?: HTMLLIElement | null;
+    /**
+     * URL ссылки
+     */
+    href?: string;
+    /**
+     * Целевая область для ссылки
+     */
+    target?: HTMLAttributeAnchorTarget;
+};

package/components/DataGrid/Cell/types.js

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

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

@@ -1,12 +1,13 @@
 import type { CellValue } from '../../types';
-import type { CellProps } from '../Cell';
+import type { CellProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue>> = CellProps<TData>;
-export declare const useLogic: <TData extends Record<string, unknown>>({ row, cell, emptyCellValue, startAdornment, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends Record<string, unknown>>({ row, href, target, cell, emptyCellValue, startAdornment, }: UseLogicParams<TData>) => {
     formattedValue: unknown;
     hasStartAdornment: boolean;
     isActionColumn: boolean;
     label: string | undefined;
     hideTitleOnMobile: boolean | undefined;
     isTabularNums: boolean | undefined;
+    onCellClick: () => void;
 };
 export {};

package/components/DataGrid/Cell/useLogic/useLogic.js

@@ -1,6 +1,7 @@
 import { useContext, useMemo } from 'react';
+import { redirectToLink } from '../../../utils/redirectToLink';
 import { DataGridContext } from '../../DataGridContext';
-export const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
+export const useLogic = ({ row, href, target, cell, emptyCellValue, startAdornment, }) => {
     const { isTabularNums: contextIsTabularNums } = useContext(DataGridContext);
     const { format, field, label, hideTitleOnMobile, isTabularNums: cellIsTabularNums, } = cell;
     const isTabularNums = cellIsTabularNums ?? contextIsTabularNums;
@@ -18,6 +19,11 @@ export const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
     }, [field, format, row, emptyCellValue]);
     const hasStartAdornment = Boolean(startAdornment);
     const isActionColumn = cell.field === 'actions';
+    const onCellClick = () => {
+        if (isActionColumn && href) {
+            return redirectToLink(href, target);
+        }
+    };
     return {
         formattedValue,
         hasStartAdornment,
@@ -25,5 +31,6 @@ export const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
         label,
         hideTitleOnMobile,
         isTabularNums,
+        onCellClick,
     };
 };

package/components/DataGrid/Row/Row.js

@@ -62,7 +62,7 @@ const RowInner = (props) => {
     // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
     // Необходимы для DataGridInfinite
     ...selfProps } = props;
-    const { isDisabledLastCell = true, isNotSelectable } = options || {};
+    const { isDisabledLastCell = true, isNotSelectable, href, target, } = options || {};
     const renderStartAdornment = () => {
         if (!isRenderCollapseButton && (!isSelectable || isNotSelectable)) {
             return null;
@@ -86,10 +86,10 @@ const RowInner = (props) => {
                             }), children: label }), children.map((child, childIndex) => {
                             const childCellId = `${cellId}-${childIndex}`;
                             const shouldRenderStartAdornment = isFirstCell && childIndex === 0;
-                            return (_jsx(CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), className: classNames(dataGridCellClassnames.grouped), rootRowElement: rootRowElement }, childCellId));
+                            return (_jsx(CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), className: classNames(dataGridCellClassnames.grouped), rootRowElement: rootRowElement, href: href, target: target }, childCellId));
                         })] }, cellId));
             }
-            return (_jsx(CellStyled, { className: singleCellCva({ isFirstCell }), row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), rootRowElement: rootRowElement }, cellId));
+            return (_jsx(CellStyled, { className: singleCellCva({ isFirstCell }), row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), rootRowElement: rootRowElement, href: href, target: target }, cellId));
         });
     }, [
         row,

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

@@ -879,7 +879,7 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ keyId,
     isActive: boolean;
     mobileDisplayVariant: "list" | "cards" | undefined;
     rowProps: {
-        onClick: () => void;
+        onClick: () => undefined;
         onMouseMove: (event: MouseEvent<HTMLElement>) => void;
     };
     drawerProps: {

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

@@ -1,5 +1,4 @@
 import { useCallback, useContext, useMemo, useRef, useState, } from 'react';
-import { redirectToLink } from '../../../utils/redirectToLink';
 import { DataGridContext } from '../../DataGridContext';
 import { Variant } from '../../enums';
 import { DISABLE_ROW_ATTR } from '../constants';
@@ -31,16 +30,13 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
     };
     const [isVisibleTooltip, setVisibleTooltip] = useState(false);
     const rowId = row[keyId];
-    const { isDisabled: isExternalDisabled, disabledReason: externalDisabledReason, href, target, } = options || {};
+    const { isDisabled: isExternalDisabled, disabledReason: externalDisabledReason, href, } = options || {};
     const disabled = isDisabled || isExternalDisabled;
     const handleRowClick = () => {
         if (disabled) {
             handleOpenDrawer();
             return undefined;
         }
-        if (href) {
-            return redirectToLink(href, target);
-        }
         onRowClick?.(row);
     };
     const isShowConnector = Object.is(variant, Variant.Tree);

package/components/DataGrid/RowBase/GroupCell/GroupCell.d.ts

@@ -1,2 +1,2 @@
 import { type GroupCellProps } from './types';
-export declare const GroupCell: ({ cell, cellId, isFirstCell, row, emptyCellValue, isDisabled, startAdornment, }: GroupCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GroupCell: ({ cell, cellId, isFirstCell, row, emptyCellValue, isDisabled, startAdornment, href, target, }: GroupCellProps) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/RowBase/GroupCell/GroupCell.js

@@ -10,13 +10,13 @@ const groupedColumnLabelCva = cva(dataGridGroupedColumnLabelClassnames.root, {
         },
     },
 });
-export const GroupCell = ({ cell, cellId, isFirstCell, row, emptyCellValue, isDisabled, startAdornment, }) => {
+export const GroupCell = ({ cell, cellId, isFirstCell, row, emptyCellValue, isDisabled, startAdornment, href, target, }) => {
     const { label, children, hideTitleOnMobile, isHideOnMobile } = cell;
     return (_jsxs(_Fragment, { children: [_jsx(GroupedColumnLabel, { variant: "caption", color: "grey", colorIntensity: "700", className: groupedColumnLabelCva({
                     hidden: hideTitleOnMobile || isHideOnMobile,
                 }), children: label }), children.map((child, childIndex) => {
                 const childCellId = `${cellId}-${childIndex}`;
                 const shouldRenderStartAdornment = isFirstCell && childIndex === 0;
-                return (_jsx(Cell, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabled, startAdornment: shouldRenderStartAdornment && startAdornment, isHidePersonalData: child.isHidePersonalData, className: dataGridCellClassnames.grouped }, childCellId));
+                return (_jsx(Cell, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabled, startAdornment: shouldRenderStartAdornment && startAdornment, isHidePersonalData: child.isHidePersonalData, className: dataGridCellClassnames.grouped, href: href, target: target }, childCellId));
             })] }));
 };

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
 import { type DataGridGroupColumn, type DataGridRowWithOptions } from '../../types';
 export type GroupCellProps = {
     cell: DataGridGroupColumn<Record<string, unknown>>;
@@ -8,4 +8,6 @@ export type GroupCellProps = {
     emptyCellValue?: ReactNode;
     isDisabled?: boolean;
     startAdornment?: ReactNode;
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
 };

package/components/DataGrid/RowBase/RowBase.js

@@ -33,7 +33,7 @@ const rootCva = cva(dataGridRowBaseClassnames.root, {
     },
 });
 export const RowBase = memo((props) => {
-    const { className, tooltipProps, rowBaseVars, isHovered, isActive, drawerProps, emptyCellValue, rowRef, onRowEnter, onRowLeave, rowId, row, isDisabled, sectionOffset, customContent, isDisabledLastCell, renderStartAdornment, checkboxProps, isNotSelectable, isSelectable, columns, dataGridInfiniteItemProps, handleRowClick, drawerContent, mobileDisplayVariant, } = useLogic(props);
+    const { className, tooltipProps, rowBaseVars, isHovered, isActive, drawerProps, emptyCellValue, rowRef, onRowEnter, onRowLeave, rowId, row, isDisabled, sectionOffset, customContent, isDisabledLastCell, renderStartAdornment, checkboxProps, href, target, isNotSelectable, isSelectable, columns, dataGridInfiniteItemProps, handleRowClick, drawerContent, mobileDisplayVariant, } = useLogic(props);
     const renderStartAdornmentBase = () => {
         const adornment = renderStartAdornment?.(true);
         const shouldRenderCheckbox = isSelectable && !isNotSelectable;
@@ -53,9 +53,9 @@ export const RowBase = memo((props) => {
             const isFirstCell = globalIndex === 0;
             const isDisabledCell = checkIsDisabled(isDisabled, availableCellsByIndex, globalIndex);
             if (isGroupColumns(cell)) {
-                return (_jsx(GroupCell, { cell: cell, cellId: cellId, isFirstCell: isFirstCell, row: row, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: isFirstCell && renderStartAdornmentBase() }, cellId));
+                return (_jsx(GroupCell, { cell: cell, cellId: cellId, isFirstCell: isFirstCell, row: row, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: isFirstCell && renderStartAdornmentBase(), href: href, target: target }, cellId));
             }
-            return (_jsx(Cell, { row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornmentBase(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
+            return (_jsx(Cell, { row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornmentBase(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData, href: href, target: target }, cellId));
         });
     }, [
         row,

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

@@ -28,6 +28,8 @@ export declare const useLogic: ({ className, row, keyId, onRowClick, columns, se
     columns: import("../..").DataGridColumns<Record<string, unknown>>[];
     emptyCellValue: import("react").ReactNode;
     rowRef: (element: HTMLElement | null) => void;
+    href: string | undefined;
+    target: import("react").HTMLAttributeAnchorTarget | undefined;
     onRowEnter: ((rowId: string) => void) | undefined;
     onRowLeave: ((rowId: string, event: PointerEvent) => void) | undefined;
     rowId: string;

package/components/DataGrid/RowBase/useLogic/useLogic.js

@@ -72,6 +72,8 @@ export const useLogic = ({ className, row, keyId, onRowClick, columns, sectionOf
         columns,
         emptyCellValue,
         rowRef,
+        href,
+        target,
         onRowEnter,
         onRowLeave,
         rowId,

package/components/DataGrid/types.d.ts

@@ -1,5 +1,4 @@
-import { type CSSProperties, type ReactNode } from 'react';
-import { type Target } from '../utils/redirectToLink';
+import { type CSSProperties, type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
 import { type Variant } from './enums';
 import type { NoDataProps } from './NoData';
 export type AlignVariant = 'left' | 'center' | 'right';
@@ -338,7 +337,7 @@ export type DataGridRowOptions<TData extends Record<string, CellValue>> = {
     /**
      * Способ открытия ссылки
      */
-    target?: Target;
+    target?: HTMLAttributeAnchorTarget;
 };
 export type DataGridRow = Record<string, CellValue>;
 export type DataGridRowWithOptions<TData extends DataGridRow> = TData & {

package/components/DataGridCollapsibleRow/useLogic/useLogic.js

@@ -16,6 +16,7 @@ export const useLogic = ({ initialOpen, onOpen, onClose }) => {
     const [isOpen, setIsOpen] = useState(storedValue !== undefined ? storedValue : initialOpen);
     const handleToggle = useCallback((event) => {
         event?.stopPropagation();
+        event?.preventDefault();
         if (isOpen) {
             setIsOpen(false);
             setItem(storageKey, false);

package/components/utils/redirectToLink/redirectToLink.d.ts

@@ -1,4 +1,4 @@
-export type Target = '_blank' | '_self' | '_parent' | '_top';
+import { type HTMLAttributeAnchorTarget } from 'react';
 /**
  * Программно выполняет переход по ссылке, эмулируя клик по элементу <a>.
  * Можно указать цель перехода (target), например, открыть в новой вкладке.
@@ -10,4 +10,4 @@ export type Target = '_blank' | '_self' | '_parent' | '_top';
  *   - `_parent` — в родительском фрейме,
  *   - `_top` — в верхнем уровне окна.
  */
-export declare const redirectToLink: (href: string, target?: Target) => void;
+export declare const redirectToLink: (href: string, target?: HTMLAttributeAnchorTarget) => void;