@astral/ui 4.109.0 → 4.111.0

package/components/DataGrid/Cell/Cell.js

@@ -7,6 +7,7 @@ import { cva } from '../../utils/cva';
 import { getInertProps } from '../../utils/getInertProps';
 import { CellInner } from './CellInner';
 import { dataGridCellClassnames } from './constants';
+import { LinkWrapper } from './LinkWrapper';
 import { Wrapper } from './styles';
 import { useLogic } from './useLogic';
 const cellCva = cva(dataGridCellClassnames.root, {
@@ -28,11 +29,14 @@ const cellCva = cva(dataGridCellClassnames.root, {
         isActionColumn: {
             true: dataGridCellClassnames.actionColumn,
         },
+        withLink: {
+            true: dataGridCellClassnames.withLink,
+        },
     },
 });
 export const Cell = (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 { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, isTabularNums, linkProps, hasLink, onCellClick, } = useLogic(props);
+    const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, isHideOnMobile, hasNestedChildren, rootRowElement, } = props;
     const { renderCell, align = 'left' } = cell;
     const { isMobile } = useViewportType();
     const hidePersonalDataClassname = useHidePersonalData({
@@ -44,7 +48,8 @@ export const Cell = (props) => {
             withStartAdornment: hasStartAdornment,
             align,
             isActionColumn,
-        })), ...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 }) }));
+            withLink: hasLink,
+        })), ...getInertProps(isDisabled), onClick: onCellClick, children: _jsx(LinkWrapper, { row: row, ...linkProps, children: _jsx(CellInner, { row: row, label: label, hideTitleOnMobile: hideTitleOnMobile, isActionColumn: isActionColumn, isTabularNums: isTabularNums, startAdornment: startAdornment, renderCell: renderCell, formattedValue: formattedValue, hidePersonalDataClassname: hidePersonalDataClassname }) }) }));
     if (isActionColumn && isMobile && hasNestedChildren) {
         if (!rootRowElement) {
             return null;

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

@@ -1,2 +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;
+export declare const CellInner: ({ row, label, hideTitleOnMobile, isActionColumn, isTabularNums, startAdornment, renderCell, formattedValue, hidePersonalDataClassname, }: CellInnerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { OverflowTypography } from '../../../OverflowTypography';
 import { cva } from '../../../utils/cva';
 import { dataGridCellClassnames } from '../constants';
-import { Anchor, CellContent, ColumnLabel } from './styles';
+import { CellContent, ColumnLabel } from './styles';
 const cellContentCva = cva(dataGridCellClassnames.cellContent, {
     variants: {
         isActionColumn: {
@@ -20,12 +20,8 @@ const columnLabelCva = cva(dataGridCellClassnames.columnLabel, {
         },
     },
 });
-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({
+export const CellInner = ({ row, label, hideTitleOnMobile, isActionColumn, isTabularNums, startAdornment, renderCell, formattedValue, hidePersonalDataClassname, }) => {
+    return (_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/styles.d.ts

@@ -14,7 +14,3 @@ 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

@@ -32,18 +32,3 @@ export const CellContent = styled.div `
     }
   }
 `;
-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

@@ -1,4 +1,4 @@
-import { type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type RenderCell } from '../../types';
 export type CellInnerProps = {
     /**
@@ -37,12 +37,4 @@ export type CellInnerProps = {
      * Класс для скрытия персональных данных
      */
     hidePersonalDataClassname?: string;
-    /**
-     * URL ссылки. Если задан, содержимое оборачивается в ссылку
-     */
-    href?: string;
-    /**
-     * Целевая область для ссылки
-     */
-    target?: HTMLAttributeAnchorTarget;
 };

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type LinkWrapperProps } from './types';
+/**
+ * Оборачивает содержимое ячейки в ссылку
+ */
+export declare const LinkWrapper: <TData extends Record<string, unknown>>({ children, row, renderLink, href, target, }: LinkWrapperProps<TData>) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;

package/components/DataGrid/Cell/LinkWrapper/LinkWrapper.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Оборачивает содержимое ячейки в ссылку
+ */
+export const LinkWrapper = ({ children, row, renderLink, href, target, }) => {
+    if (renderLink) {
+        return renderLink({ children, row }) ?? children;
+    }
+    if (href) {
+        return (_jsx("a", { href: href, target: target, rel: "noopener noreferrer", children: children }));
+    }
+    return children;
+};

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
+import { type CellValue, type DataGridRenderLink, type DataGridRowWithOptions } from '../../types';
+export type LinkWrapperProps<TData extends Record<string, CellValue>> = {
+    /**
+     * Содержимое ячейки
+     */
+    children: ReactNode;
+    /**
+     * Данные строки вместе с её options
+     */
+    row: DataGridRowWithOptions<TData>;
+    /**
+     * Кастомная отрисовка ссылки строки
+     */
+    renderLink?: DataGridRenderLink<TData>;
+    /**
+     * URL ссылки
+     */
+    href?: string;
+    /**
+     * Целевая область для ссылки
+     */
+    target?: HTMLAttributeAnchorTarget;
+};

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

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

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

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

package/components/DataGrid/Cell/constants.js

@@ -14,4 +14,5 @@ export const dataGridCellClassnames = {
     grouped: createUIKitClassname('data-grid__cell_grouped'),
     tabularNums: createUIKitClassname('data-grid__cell_tabular-nums'),
     anchorCell: createUIKitClassname('data-grid__cell_anchor-cell'),
+    withLink: createUIKitClassname('data-grid__cell_with-link'),
 };

package/components/DataGrid/Cell/styles.js

@@ -30,6 +30,26 @@ export const Wrapper = styled.div `
     justify-content: flex-end;
   }
 
+  &.${dataGridCellClassnames.withLink} {
+    & > * {
+      display: flex;
+      align-items: inherit;
+      justify-content: inherit;
+
+      width: 100%;
+      height: 100%;
+    }
+
+    & a {
+      color: inherit;
+      text-decoration: none;
+
+      &:focus-visible {
+        outline: none;
+      }
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     justify-content: space-between;
 

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CellValue } from '../../types';
 import type { CellProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue>> = CellProps<TData>;
@@ -8,6 +9,12 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ row, hr
     label: string | undefined;
     hideTitleOnMobile: boolean | undefined;
     isTabularNums: boolean | undefined;
+    linkProps: {
+        href: string | undefined;
+        target: import("react").HTMLAttributeAnchorTarget | undefined;
+        renderLink: import("../../types").DataGridRenderLink<Record<string, unknown>> | undefined;
+    } | undefined;
+    hasLink: boolean;
     onCellClick: () => void;
 };
 export {};

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

@@ -2,7 +2,7 @@ import { useContext, useMemo } from 'react';
 import { redirectToLink } from '../../../utils/redirectToLink';
 import { DataGridContext } from '../../DataGridContext';
 export const useLogic = ({ row, href, target, cell, emptyCellValue, startAdornment, }) => {
-    const { isTabularNums: contextIsTabularNums } = useContext(DataGridContext);
+    const { isTabularNums: contextIsTabularNums, renderLink } = useContext(DataGridContext);
     const { format, field, label, hideTitleOnMobile, isTabularNums: cellIsTabularNums, } = cell;
     const isTabularNums = cellIsTabularNums ?? contextIsTabularNums;
     const isValidValue = (value) => {
@@ -24,6 +24,9 @@ export const useLogic = ({ row, href, target, cell, emptyCellValue, startAdornme
             return redirectToLink(href, target);
         }
     };
+    // Колонка действий не оборачивается в ссылку: её элементы кликабельны сами
+    const linkProps = isActionColumn ? undefined : { href, target, renderLink };
+    const hasLink = Boolean(linkProps?.renderLink || linkProps?.href);
     return {
         formattedValue,
         hasStartAdornment,
@@ -31,6 +34,8 @@ export const useLogic = ({ row, href, target, cell, emptyCellValue, startAdornme
         label,
         hideTitleOnMobile,
         isTabularNums,
+        linkProps,
+        hasLink,
         onCellClick,
     };
 };

package/components/DataGrid/DataGrid.js

@@ -58,7 +58,7 @@ const bodyCva = cva(dataGridClassnames.body, {
 export const DataGrid = (props) => {
     const { dataGridClassName, isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, contentStateProps, rowHoverProps, containerRef, sections, isNoData, isMobile, mobileSkeletonProps, isLoading, containerCssVars, hasGroupedColumns, gridViewMode, mobileDisplayVariant, isSelfContained, } = useLogic(props);
     const { emptySymbol } = useContext(ConfigContext);
-    const { columns, selectedRows = [], minDisplayRows = MIN_DISPLAY_ROWS_BY_DEFAULT, variant = Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, isTabularNums, renderRow, } = props;
+    const { columns, selectedRows = [], minDisplayRows = MIN_DISPLAY_ROWS_BY_DEFAULT, variant = Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, isTabularNums, renderRow, renderLink, } = 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 Wrapper = isDataGridDisabled
@@ -98,7 +98,7 @@ export const DataGrid = (props) => {
                     isDisabled: isDataGridDisabled,
                 }), isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
     };
-    return (_jsx(DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, keyId: keyId, columns: columns, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: _jsxs(Container, { ref: containerRef, style: containerCssVars, className: cn(dataGridClassName, dataGridCva({
+    return (_jsx(DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, keyId: keyId, columns: columns, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, renderLink: renderLink, children: _jsxs(Container, { ref: containerRef, style: containerCssVars, className: cn(dataGridClassName, dataGridCva({
                 isAllowHorizontalScroll,
                 hasPinnedColumns,
                 gridViewMode,

package/components/DataGrid/DataGridContext/DataGridContext.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type DataGridColumns } from '../types';
+import { type DataGridColumns, type DataGridRenderLink } from '../types';
 export type DataGridContextProps = {
     isLoading?: boolean;
     isTabularNums?: boolean;
@@ -10,5 +10,6 @@ export type DataGridContextProps = {
     columns: DataGridColumns<Record<string, unknown>>[];
     onRowClick?: (row: Record<string, unknown>) => void;
     mobileDisplayVariant?: 'list' | 'cards';
+    renderLink?: DataGridRenderLink<Record<string, unknown>>;
 };
 export declare const DataGridContext: import("react").Context<DataGridContextProps>;

package/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import { type DataGridContextProps } from '../DataGridContext';
-type DataGridContextProviderProps = Pick<DataGridContextProps, 'isLoading' | 'isTabularNums' | 'gridColumns' | 'emptyCellValue' | 'activeRowId' | 'keyId' | 'columns' | 'onRowClick' | 'mobileDisplayVariant'> & {
+type DataGridContextProviderProps = Pick<DataGridContextProps, 'isLoading' | 'isTabularNums' | 'gridColumns' | 'emptyCellValue' | 'activeRowId' | 'keyId' | 'columns' | 'onRowClick' | 'mobileDisplayVariant' | 'renderLink'> & {
     children: ReactNode;
 };
-export declare const DataGridContextProvider: ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, }: DataGridContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridContextProvider: ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, renderLink, }: DataGridContextProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { DataGridStorageProvider } from '../../DataGridStorageContext';
 import { DataGridContext } from '../DataGridContext';
-export const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, }) => {
+export const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, renderLink, }) => {
     const contextValue = useMemo(() => ({
         isLoading,
         isTabularNums,
@@ -13,6 +13,7 @@ export const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns,
         columns,
         onRowClick,
         mobileDisplayVariant,
+        renderLink,
     }), [
         isLoading,
         isTabularNums,
@@ -23,6 +24,7 @@ export const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns,
         columns,
         onRowClick,
         mobileDisplayVariant,
+        renderLink,
     ]);
     return (_jsx(DataGridContext.Provider, { value: contextValue, children: _jsx(DataGridStorageProvider, { children: children }) }));
 };

package/components/DataGrid/Row/NestedChildren/NestedChildren.js

@@ -19,7 +19,8 @@ export const NestedChildren = (props) => {
     if (!data || !data.length) {
         return null;
     }
-    return (_jsx(Collapse, { in: isOpen, unmountOnExit: true, children: _jsxs(NestedRows, { "$level": level, "$isShowConnector": isShowConnector, className: rootCva({ variant }), children: [initialVisibleChildren.map(({ children, options, ...nestedRow }) => {
+    return (_jsx(Collapse, { in: isOpen, unmountOnExit: true, children: _jsxs(NestedRows, { "$level": level, "$isShowConnector": isShowConnector, className: rootCva({ variant }), children: [initialVisibleChildren.map((nestedRow) => {
+                    const { children, options } = nestedRow;
                     const nestedRowId = nestedRow[keyId];
                     return renderRow({
                         key: nestedRowId,
@@ -29,7 +30,8 @@ export const NestedChildren = (props) => {
                         level: nextLevel,
                         className: dataGridRowClassnames.nestedChildren,
                     });
-                }), isOpen && (_jsxs(_Fragment, { children: [_jsx(Collapse, { in: isShowAllChildren, component: "li", unmountOnExit: true, children: _jsx(NestedRows, { "$level": level, "$isShowConnector": isShowConnector, className: nestedChildrenClassnames.additionalRows, children: otherChildren.map(({ children, options, ...nestedRow }) => {
+                }), isOpen && (_jsxs(_Fragment, { children: [_jsx(Collapse, { in: isShowAllChildren, component: "li", unmountOnExit: true, children: _jsx(NestedRows, { "$level": level, "$isShowConnector": isShowConnector, className: nestedChildrenClassnames.additionalRows, children: otherChildren.map((nestedRow) => {
+                                    const { children, options } = nestedRow;
                                     const nestedRowId = nestedRow[keyId];
                                     return renderRow({
                                         key: nestedRowId,

package/components/DataGrid/index.d.ts

@@ -1,5 +1,5 @@
 export { DataGrid } from './DataGrid';
-export type { DataGridProps, DataGridColumns, DataGridSingleColumn, DataGridRow, DataGridRowOptions, DataGridSort, DataGridRowWithOptions, DataGridRowOptionColumns, } from './types';
+export type { DataGridProps, DataGridRenderLink, DataGridRenderLinkParams, DataGridColumns, DataGridSingleColumn, DataGridRow, DataGridRowOptions, DataGridSort, DataGridRowWithOptions, DataGridRowOptionColumns, } from './types';
 export { dataGridClassnames } from './constants';
 export { MobileSkeleton } from './MobileSkeleton';
 export { RowBase, type RowBaseProps } from './RowBase';

package/components/DataGrid/public.d.ts

@@ -1,3 +1,3 @@
 export { dataGridClassnames } from './constants';
 export { DataGrid } from './DataGrid';
-export type { DataGridColumns, DataGridProps, DataGridRow, DataGridRowOptionColumns, DataGridRowOptions, DataGridRowWithOptions, DataGridSort, } from './types';
+export type { DataGridColumns, DataGridProps, DataGridRenderLink, DataGridRenderLinkParams, DataGridRow, DataGridRowOptionColumns, DataGridRowOptions, DataGridRowWithOptions, DataGridSort, } from './types';

package/components/DataGrid/types.d.ts

@@ -185,6 +185,11 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
      * @example <DataGrid renderRow={(row) => <DataGridCollapsibleRow><CustomContent row={row} /></DataGridCollapsibleRow>} />
      */
     renderRow?: (row: TData, index: number) => ReactNode;
+    /**
+     * Оборачивает строку в свой компонент ссылки
+     * @example <DataGrid renderLink={({ children, row }) => <Link to={`/docs/${row.id}`}>{children}</Link>} />
+     */
+    renderLink?: DataGridRenderLink<TData>;
     /**
      * Вариант отображения таблицы на мобильных устройствах
      */
@@ -332,13 +337,30 @@ export type DataGridRowOptions<TData extends Record<string, CellValue>> = {
     childrenColumns?: DataGridRowOptionColumns<TData>[];
     /**
      * Ссылка для перехода на другую страницу при клике на строку
+     * @deprecated Используйте `renderLink`.
      */
     href?: string;
     /**
      * Способ открытия ссылки
+     * @deprecated Используйте `renderLink`.
      */
     target?: HTMLAttributeAnchorTarget;
 };
+export type DataGridRenderLinkParams<TData extends Record<string, CellValue>> = {
+    /**
+     * Содержимое ячейки, которое нужно обернуть в ссылку
+     */
+    children: ReactNode;
+    /**
+     * Данные строки вместе с её options
+     */
+    row: DataGridRowWithOptions<TData>;
+};
+/**
+ * Вызывается для каждой ячейки строки, кроме колонки действий.
+ * Должен вернуть элемент, который рендерит нативный `<a>`
+ */
+export type DataGridRenderLink<TData extends Record<string, CellValue>> = (params: DataGridRenderLinkParams<TData>) => ReactNode;
 export type DataGridRow = Record<string, CellValue>;
 export type DataGridRowWithOptions<TData extends DataGridRow> = TData & {
     options?: DataGridRowOptions<TData>;

package/components/DataGridInfinite/DataGridInfinite.js

@@ -43,12 +43,12 @@ 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, hasGroupedColumns, gridViewMode, gridColumns, handleSelectRow, mobileDisplayVariant, isSelfContained, isNotRenderHeader, initialTopMostItemIndex, } = 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, activeRowId, isTabularNums, renderRow, } = 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, isTabularNums, renderRow, renderLink, } = 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 { isSelectable } = rowProps;
     const TableContainer = isDisabled ? DisabledDataGridWrapper : DataGridWrapper;
-    return (_jsx(DataGridInfiniteContextProvider, { renderRow: renderRow, onSelectRow: handleSelectRow, variant: variant, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, isSelectable: isSelectable, selectedRows: selectedRows, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, children: _jsx(DataGridContextProvider, { gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, columns: columns, keyId: keyId, isTabularNums: isTabularNums, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: _jsxs(StyledContainer, { style: containerCssVars, className: cn(dataGridInfiniteCva({
+    return (_jsx(DataGridInfiniteContextProvider, { renderRow: renderRow, onSelectRow: handleSelectRow, variant: variant, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, isSelectable: isSelectable, selectedRows: selectedRows, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, children: _jsx(DataGridContextProvider, { gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, columns: columns, keyId: keyId, isTabularNums: isTabularNums, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, renderLink: renderLink, children: _jsxs(StyledContainer, { style: containerCssVars, className: cn(dataGridInfiniteCva({
                     hasGroupedColumns,
                     gridViewMode,
                     mobileDisplayVariant,

package/components/Link/Link.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import type { LinkProps as MuiLinkProps } from '@mui/material/Link';
+import { type ComponentPropsWithRef, type ElementType } from 'react';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
-export type LinkProps = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href' | 'className' | 'classes' | 'style' | 'children' | 'key' | 'target'> & {
+export type LinkProps<TComponent extends ElementType = ElementType> = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href' | 'className' | 'classes' | 'style' | 'children' | 'key' | 'target'> & {
     /**
      * Добавление иконки
      */
@@ -20,8 +20,18 @@ export type LinkProps = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href
      * Позволяет переключить цвета ссылки на более контрастные
      */
     isContrast?: boolean;
-};
-export declare const Link: import("react").ForwardRefExoticComponent<Pick<WithoutEmotionSpecific<MuiLinkProps>, "classes" | "className" | "style" | "rel" | "children" | "target" | "href" | "key"> & {
+    /**
+     * Тип элемента
+     *
+     * @example
+     * <Link component={RouterLink} to="/documents">
+     *   Документы
+     * </Link>
+     * @default 'a'
+     */
+    component?: TComponent;
+} & (ElementType extends TComponent ? {} : ComponentPropsWithRef<TComponent>);
+export declare const Link: <TComponent extends ElementType>(props: Pick<WithoutEmotionSpecific<MuiLinkProps>, "classes" | "className" | "style" | "rel" | "children" | "target" | "href" | "key"> & {
     /**
      * Добавление иконки
      */
@@ -40,4 +50,14 @@ export declare const Link: import("react").ForwardRefExoticComponent<Pick<Withou
      * Позволяет переключить цвета ссылки на более контрастные
      */
     isContrast?: boolean | undefined;
-} & import("react").RefAttributes<HTMLAnchorElement>>;
+    /**
+     * Тип элемента
+     *
+     * @example
+     * <Link component={RouterLink} to="/documents">
+     *   Документы
+     * </Link>
+     * @default 'a'
+     */
+    component?: TComponent | undefined;
+} & (ElementType extends TComponent ? {} : ComponentPropsWithRef<TComponent>) & import("react").RefAttributes<HTMLAnchorElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/components/Link/Link.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { DownloadVOutlineSm } from '../../icons/DownloadVOutlineSm';
 import { OpenLinkOutlineSm } from '../../icons/OpenLinkOutlineSm';
+import { forwardRefWithGeneric } from '../forwardRefWithGeneric';
 import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { linkClassnames } from './constants';
@@ -13,7 +13,8 @@ const linkCva = cva(linkClassnames.root, {
         },
     },
 });
-export const Link = forwardRef(({ withAdornment, isDownload, downloadFilename, isContrast, children, className, ...props }, ref) => {
+const UnwrappedLink = ({ withAdornment, isDownload, downloadFilename, isContrast, children, className, ...props }, ref) => {
     const icon = isDownload ? _jsx(DownloadVOutlineSm, {}) : _jsx(OpenLinkOutlineSm, {});
     return (_jsxs(StyledLink, { download: downloadFilename ?? isDownload, className: cn(linkCva({ isContrast }), className), ref: ref, ...props, children: [withAdornment === 'start' && icon, children, withAdornment === 'end' && icon, !withAdornment && isDownload && _jsx(DownloadVOutlineSm, {})] }));
-});
+};
+export const Link = forwardRefWithGeneric(UnwrappedLink);

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 DataGridRow, type DataGridRowOptions, type DataGridSort, DataGrid, type DataGridProps, } from './DataGrid';
+export { type DataGridColumns, type DataGridRenderLink, type DataGridRenderLinkParams, type DataGridRow, 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/components/theme/components/MuiOutlinedInput.js

@@ -15,6 +15,9 @@ export const MuiOutlinedInput = {
                     '&:hover': {
                         background: theme.palette.background.elementHover,
                     },
+                    '&:hover .MuiOutlinedInput-input:autofill': {
+                        boxShadow: `0 0 0 1000px ${theme.palette.background.elementHover} inset`,
+                    },
                     '&:hover .MuiOutlinedInput-notchedOutline': {
                         borderColor: theme.palette.grey[800],
                         transition: theme.transitions.create(['border-color'], {
@@ -50,7 +53,7 @@ export const MuiOutlinedInput = {
                     ? theme.spacing(1)
                     : theme.spacing(3),
                 '&:autofill': {
-                    boxShadow: '0 0 0 1000px white inset',
+                    boxShadow: `0 0 0 1000px ${theme.palette.common.white} inset`,
                 },
                 '&::placeholder': {
                     opacity: 1,

package/node/components/DataGrid/Cell/Cell.js

@@ -10,6 +10,7 @@ const cva_1 = require("../../utils/cva");
 const getInertProps_1 = require("../../utils/getInertProps");
 const CellInner_1 = require("./CellInner");
 const constants_1 = require("./constants");
+const LinkWrapper_1 = require("./LinkWrapper");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const cellCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.root, {
@@ -31,11 +32,14 @@ const cellCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.root, {
         isActionColumn: {
             true: constants_1.dataGridCellClassnames.actionColumn,
         },
+        withLink: {
+            true: constants_1.dataGridCellClassnames.withLink,
+        },
     },
 });
 const Cell = (props) => {
-    const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, isTabularNums, onCellClick, } = (0, useLogic_1.useLogic)(props);
-    const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, isHideOnMobile, hasNestedChildren, rootRowElement, href, target, } = props;
+    const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, isTabularNums, linkProps, hasLink, onCellClick, } = (0, useLogic_1.useLogic)(props);
+    const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, isHideOnMobile, hasNestedChildren, rootRowElement, } = props;
     const { renderCell, align = 'left' } = cell;
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const hidePersonalDataClassname = (0, personalDataSecurity_1.useHidePersonalData)({
@@ -47,7 +51,8 @@ const Cell = (props) => {
             withStartAdornment: hasStartAdornment,
             align,
             isActionColumn,
-        })), ...(0, getInertProps_1.getInertProps)(isDisabled), onClick: onCellClick, children: (0, jsx_runtime_1.jsx)(CellInner_1.CellInner, { row: row, label: label, hideTitleOnMobile: hideTitleOnMobile, isActionColumn: isActionColumn, isTabularNums: isTabularNums, startAdornment: startAdornment, renderCell: renderCell, formattedValue: formattedValue, hidePersonalDataClassname: hidePersonalDataClassname, href: href, target: target }) }));
+            withLink: hasLink,
+        })), ...(0, getInertProps_1.getInertProps)(isDisabled), onClick: onCellClick, children: (0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { row: row, ...linkProps, children: (0, jsx_runtime_1.jsx)(CellInner_1.CellInner, { row: row, label: label, hideTitleOnMobile: hideTitleOnMobile, isActionColumn: isActionColumn, isTabularNums: isTabularNums, startAdornment: startAdornment, renderCell: renderCell, formattedValue: formattedValue, hidePersonalDataClassname: hidePersonalDataClassname }) }) }));
     if (isActionColumn && isMobile && hasNestedChildren) {
         if (!rootRowElement) {
             return null;

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

@@ -1,2 +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;
+export declare const CellInner: ({ row, label, hideTitleOnMobile, isActionColumn, isTabularNums, startAdornment, renderCell, formattedValue, hidePersonalDataClassname, }: CellInnerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -23,13 +23,9 @@ const columnLabelCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.columnL
         },
     },
 });
-const CellInner = ({ row, label, hideTitleOnMobile, isActionColumn, isTabularNums, startAdornment, renderCell, formattedValue, hidePersonalDataClassname, href, target, }) => {
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [startAdornment, (0, jsx_runtime_1.jsxs)(styles_1.CellContent, { className: cellContentCva({ isActionColumn, isTabularNums }), children: [(0, jsx_runtime_1.jsx)(styles_1.ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
+const CellInner = ({ row, label, hideTitleOnMobile, isActionColumn, isTabularNums, startAdornment, renderCell, formattedValue, hidePersonalDataClassname, }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [startAdornment, (0, jsx_runtime_1.jsxs)(styles_1.CellContent, { className: cellContentCva({ isActionColumn, isTabularNums }), children: [(0, jsx_runtime_1.jsx)(styles_1.ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
                             hidden: hideTitleOnMobile || isActionColumn,
                         }), children: label }), renderCell?.(row), !renderCell && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedValue }) }))] })] }));
-    if (href && !isActionColumn) {
-        return ((0, jsx_runtime_1.jsx)(styles_1.Anchor, { href: href, target: target, rel: "noopener noreferrer", children: content }));
-    }
-    return content;
 };
 exports.CellInner = CellInner;

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

@@ -14,7 +14,3 @@ export declare const CellContent: import("@emotion/styled/dist/declarations/src/
     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("@emotion/styled/dist/declarations/src/types").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/node/components/DataGrid/Cell/CellInner/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Anchor = exports.CellContent = exports.ColumnLabel = void 0;
+exports.CellContent = exports.ColumnLabel = void 0;
 const styled_1 = require("../../../styled");
 const Typography_1 = require("../../../Typography");
 const constants_1 = require("../constants");
@@ -35,18 +35,3 @@ exports.CellContent = styled_1.styled.div `
     }
   }
 `;
-exports.Anchor = styled_1.styled.a `
-  display: flex;
-  align-items: inherit;
-  justify-content: inherit;
-
-  width: 100%;
-  height: 100%;
-
-  color: inherit;
-  text-decoration: none;
-
-  &:focus-visible {
-    outline: none;
-  }
-`;

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

@@ -1,4 +1,4 @@
-import { type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type RenderCell } from '../../types';
 export type CellInnerProps = {
     /**
@@ -37,12 +37,4 @@ export type CellInnerProps = {
      * Класс для скрытия персональных данных
      */
     hidePersonalDataClassname?: string;
-    /**
-     * URL ссылки. Если задан, содержимое оборачивается в ссылку
-     */
-    href?: string;
-    /**
-     * Целевая область для ссылки
-     */
-    target?: HTMLAttributeAnchorTarget;
 };

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type LinkWrapperProps } from './types';
+/**
+ * Оборачивает содержимое ячейки в ссылку
+ */
+export declare const LinkWrapper: <TData extends Record<string, unknown>>({ children, row, renderLink, href, target, }: LinkWrapperProps<TData>) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;

package/node/components/DataGrid/Cell/LinkWrapper/LinkWrapper.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Оборачивает содержимое ячейки в ссылку
+ */
+const LinkWrapper = ({ children, row, renderLink, href, target, }) => {
+    if (renderLink) {
+        return renderLink({ children, row }) ?? children;
+    }
+    if (href) {
+        return ((0, jsx_runtime_1.jsx)("a", { href: href, target: target, rel: "noopener noreferrer", children: children }));
+    }
+    return children;
+};
+exports.LinkWrapper = LinkWrapper;

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

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

package/node/components/DataGrid/Cell/LinkWrapper/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkWrapper = void 0;
+var LinkWrapper_1 = require("./LinkWrapper");
+Object.defineProperty(exports, "LinkWrapper", { enumerable: true, get: function () { return LinkWrapper_1.LinkWrapper; } });

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

@@ -0,0 +1,24 @@
+import { type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
+import { type CellValue, type DataGridRenderLink, type DataGridRowWithOptions } from '../../types';
+export type LinkWrapperProps<TData extends Record<string, CellValue>> = {
+    /**
+     * Содержимое ячейки
+     */
+    children: ReactNode;
+    /**
+     * Данные строки вместе с её options
+     */
+    row: DataGridRowWithOptions<TData>;
+    /**
+     * Кастомная отрисовка ссылки строки
+     */
+    renderLink?: DataGridRenderLink<TData>;
+    /**
+     * URL ссылки
+     */
+    href?: string;
+    /**
+     * Целевая область для ссылки
+     */
+    target?: HTMLAttributeAnchorTarget;
+};

package/node/components/DataGrid/Cell/LinkWrapper/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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

@@ -17,4 +17,5 @@ exports.dataGridCellClassnames = {
     grouped: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_grouped'),
     tabularNums: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_tabular-nums'),
     anchorCell: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_anchor-cell'),
+    withLink: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_with-link'),
 };

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

@@ -33,6 +33,26 @@ exports.Wrapper = styled_1.styled.div `
     justify-content: flex-end;
   }
 
+  &.${constants_3.dataGridCellClassnames.withLink} {
+    & > * {
+      display: flex;
+      align-items: inherit;
+      justify-content: inherit;
+
+      width: 100%;
+      height: 100%;
+    }
+
+    & a {
+      color: inherit;
+      text-decoration: none;
+
+      &:focus-visible {
+        outline: none;
+      }
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     justify-content: space-between;
 

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CellValue } from '../../types';
 import type { CellProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue>> = CellProps<TData>;
@@ -8,6 +9,12 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ row, hr
     label: string | undefined;
     hideTitleOnMobile: boolean | undefined;
     isTabularNums: boolean | undefined;
+    linkProps: {
+        href: string | undefined;
+        target: import("react").HTMLAttributeAnchorTarget | undefined;
+        renderLink: import("../../types").DataGridRenderLink<Record<string, unknown>> | undefined;
+    } | undefined;
+    hasLink: boolean;
     onCellClick: () => void;
 };
 export {};

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

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const redirectToLink_1 = require("../../../utils/redirectToLink");
 const DataGridContext_1 = require("../../DataGridContext");
 const useLogic = ({ row, href, target, cell, emptyCellValue, startAdornment, }) => {
-    const { isTabularNums: contextIsTabularNums } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
+    const { isTabularNums: contextIsTabularNums, renderLink } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
     const { format, field, label, hideTitleOnMobile, isTabularNums: cellIsTabularNums, } = cell;
     const isTabularNums = cellIsTabularNums ?? contextIsTabularNums;
     const isValidValue = (value) => {
@@ -27,6 +27,9 @@ const useLogic = ({ row, href, target, cell, emptyCellValue, startAdornment, })
             return (0, redirectToLink_1.redirectToLink)(href, target);
         }
     };
+    // Колонка действий не оборачивается в ссылку: её элементы кликабельны сами
+    const linkProps = isActionColumn ? undefined : { href, target, renderLink };
+    const hasLink = Boolean(linkProps?.renderLink || linkProps?.href);
     return {
         formattedValue,
         hasStartAdornment,
@@ -34,6 +37,8 @@ const useLogic = ({ row, href, target, cell, emptyCellValue, startAdornment, })
         label,
         hideTitleOnMobile,
         isTabularNums,
+        linkProps,
+        hasLink,
         onCellClick,
     };
 };

package/node/components/DataGrid/DataGrid.js

@@ -61,7 +61,7 @@ const bodyCva = (0, cva_1.cva)(constants_2.dataGridClassnames.body, {
 const DataGrid = (props) => {
     const { dataGridClassName, isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, contentStateProps, rowHoverProps, containerRef, sections, isNoData, isMobile, mobileSkeletonProps, isLoading, containerCssVars, hasGroupedColumns, gridViewMode, mobileDisplayVariant, isSelfContained, } = (0, useLogic_1.useLogic)(props);
     const { emptySymbol } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
-    const { columns, selectedRows = [], minDisplayRows = constants_2.MIN_DISPLAY_ROWS_BY_DEFAULT, variant = enums_1.Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, isTabularNums, renderRow, } = props;
+    const { columns, selectedRows = [], minDisplayRows = constants_2.MIN_DISPLAY_ROWS_BY_DEFAULT, variant = enums_1.Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, isTabularNums, renderRow, renderLink, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = constants_2.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_2.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const Wrapper = isDataGridDisabled
@@ -101,7 +101,7 @@ const DataGrid = (props) => {
                     isDisabled: isDataGridDisabled,
                 }), isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
     };
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, keyId: keyId, columns: columns, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, style: containerCssVars, className: (0, cn_1.cn)(dataGridClassName, dataGridCva({
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, keyId: keyId, columns: columns, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, renderLink: renderLink, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, style: containerCssVars, className: (0, cn_1.cn)(dataGridClassName, dataGridCva({
                 isAllowHorizontalScroll,
                 hasPinnedColumns,
                 gridViewMode,

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type DataGridColumns } from '../types';
+import { type DataGridColumns, type DataGridRenderLink } from '../types';
 export type DataGridContextProps = {
     isLoading?: boolean;
     isTabularNums?: boolean;
@@ -10,5 +10,6 @@ export type DataGridContextProps = {
     columns: DataGridColumns<Record<string, unknown>>[];
     onRowClick?: (row: Record<string, unknown>) => void;
     mobileDisplayVariant?: 'list' | 'cards';
+    renderLink?: DataGridRenderLink<Record<string, unknown>>;
 };
 export declare const DataGridContext: import("react").Context<DataGridContextProps>;

package/node/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import { type DataGridContextProps } from '../DataGridContext';
-type DataGridContextProviderProps = Pick<DataGridContextProps, 'isLoading' | 'isTabularNums' | 'gridColumns' | 'emptyCellValue' | 'activeRowId' | 'keyId' | 'columns' | 'onRowClick' | 'mobileDisplayVariant'> & {
+type DataGridContextProviderProps = Pick<DataGridContextProps, 'isLoading' | 'isTabularNums' | 'gridColumns' | 'emptyCellValue' | 'activeRowId' | 'keyId' | 'columns' | 'onRowClick' | 'mobileDisplayVariant' | 'renderLink'> & {
     children: ReactNode;
 };
-export declare const DataGridContextProvider: ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, }: DataGridContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridContextProvider: ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, renderLink, }: DataGridContextProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DataGridStorageContext_1 = require("../../DataGridStorageContext");
 const DataGridContext_1 = require("../DataGridContext");
-const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, }) => {
+const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns, emptyCellValue, activeRowId, children, keyId, columns, onRowClick, mobileDisplayVariant, renderLink, }) => {
     const contextValue = (0, react_1.useMemo)(() => ({
         isLoading,
         isTabularNums,
@@ -16,6 +16,7 @@ const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns, emptyC
         columns,
         onRowClick,
         mobileDisplayVariant,
+        renderLink,
     }), [
         isLoading,
         isTabularNums,
@@ -26,6 +27,7 @@ const DataGridContextProvider = ({ isLoading, isTabularNums, gridColumns, emptyC
         columns,
         onRowClick,
         mobileDisplayVariant,
+        renderLink,
     ]);
     return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(DataGridStorageContext_1.DataGridStorageProvider, { children: children }) }));
 };

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

@@ -22,7 +22,8 @@ const NestedChildren = (props) => {
     if (!data || !data.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isOpen, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(styles_1.NestedRows, { "$level": level, "$isShowConnector": isShowConnector, className: rootCva({ variant }), children: [initialVisibleChildren.map(({ children, options, ...nestedRow }) => {
+    return ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isOpen, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(styles_1.NestedRows, { "$level": level, "$isShowConnector": isShowConnector, className: rootCva({ variant }), children: [initialVisibleChildren.map((nestedRow) => {
+                    const { children, options } = nestedRow;
                     const nestedRowId = nestedRow[keyId];
                     return renderRow({
                         key: nestedRowId,
@@ -32,7 +33,8 @@ const NestedChildren = (props) => {
                         level: nextLevel,
                         className: constants_1.dataGridRowClassnames.nestedChildren,
                     });
-                }), isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isShowAllChildren, component: "li", unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(styles_1.NestedRows, { "$level": level, "$isShowConnector": isShowConnector, className: constants_2.nestedChildrenClassnames.additionalRows, children: otherChildren.map(({ children, options, ...nestedRow }) => {
+                }), isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isShowAllChildren, component: "li", unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(styles_1.NestedRows, { "$level": level, "$isShowConnector": isShowConnector, className: constants_2.nestedChildrenClassnames.additionalRows, children: otherChildren.map((nestedRow) => {
+                                    const { children, options } = nestedRow;
                                     const nestedRowId = nestedRow[keyId];
                                     return renderRow({
                                         key: nestedRowId,

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

@@ -1,5 +1,5 @@
 export { DataGrid } from './DataGrid';
-export type { DataGridProps, DataGridColumns, DataGridSingleColumn, DataGridRow, DataGridRowOptions, DataGridSort, DataGridRowWithOptions, DataGridRowOptionColumns, } from './types';
+export type { DataGridProps, DataGridRenderLink, DataGridRenderLinkParams, DataGridColumns, DataGridSingleColumn, DataGridRow, DataGridRowOptions, DataGridSort, DataGridRowWithOptions, DataGridRowOptionColumns, } from './types';
 export { dataGridClassnames } from './constants';
 export { MobileSkeleton } from './MobileSkeleton';
 export { RowBase, type RowBaseProps } from './RowBase';

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

@@ -1,3 +1,3 @@
 export { dataGridClassnames } from './constants';
 export { DataGrid } from './DataGrid';
-export type { DataGridColumns, DataGridProps, DataGridRow, DataGridRowOptionColumns, DataGridRowOptions, DataGridRowWithOptions, DataGridSort, } from './types';
+export type { DataGridColumns, DataGridProps, DataGridRenderLink, DataGridRenderLinkParams, DataGridRow, DataGridRowOptionColumns, DataGridRowOptions, DataGridRowWithOptions, DataGridSort, } from './types';

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

@@ -185,6 +185,11 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
      * @example <DataGrid renderRow={(row) => <DataGridCollapsibleRow><CustomContent row={row} /></DataGridCollapsibleRow>} />
      */
     renderRow?: (row: TData, index: number) => ReactNode;
+    /**
+     * Оборачивает строку в свой компонент ссылки
+     * @example <DataGrid renderLink={({ children, row }) => <Link to={`/docs/${row.id}`}>{children}</Link>} />
+     */
+    renderLink?: DataGridRenderLink<TData>;
     /**
      * Вариант отображения таблицы на мобильных устройствах
      */
@@ -332,13 +337,30 @@ export type DataGridRowOptions<TData extends Record<string, CellValue>> = {
     childrenColumns?: DataGridRowOptionColumns<TData>[];
     /**
      * Ссылка для перехода на другую страницу при клике на строку
+     * @deprecated Используйте `renderLink`.
      */
     href?: string;
     /**
      * Способ открытия ссылки
+     * @deprecated Используйте `renderLink`.
      */
     target?: HTMLAttributeAnchorTarget;
 };
+export type DataGridRenderLinkParams<TData extends Record<string, CellValue>> = {
+    /**
+     * Содержимое ячейки, которое нужно обернуть в ссылку
+     */
+    children: ReactNode;
+    /**
+     * Данные строки вместе с её options
+     */
+    row: DataGridRowWithOptions<TData>;
+};
+/**
+ * Вызывается для каждой ячейки строки, кроме колонки действий.
+ * Должен вернуть элемент, который рендерит нативный `<a>`
+ */
+export type DataGridRenderLink<TData extends Record<string, CellValue>> = (params: DataGridRenderLinkParams<TData>) => ReactNode;
 export type DataGridRow = Record<string, CellValue>;
 export type DataGridRowWithOptions<TData extends DataGridRow> = TData & {
     options?: DataGridRowOptions<TData>;

package/node/components/DataGridInfinite/DataGridInfinite.js

@@ -46,12 +46,12 @@ const dataGridInfiniteCva = (0, cva_1.cva)(constants_2.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, hasGroupedColumns, gridViewMode, gridColumns, handleSelectRow, mobileDisplayVariant, isSelfContained, isNotRenderHeader, initialTopMostItemIndex, } = (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, activeRowId, isTabularNums, renderRow, } = 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, isTabularNums, renderRow, renderLink, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = constants_2.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_2.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const { isSelectable } = rowProps;
     const TableContainer = isDisabled ? styles_1.DisabledDataGridWrapper : styles_1.DataGridWrapper;
-    return ((0, jsx_runtime_1.jsx)(DataGridInfiniteContext_1.DataGridInfiniteContextProvider, { renderRow: renderRow, onSelectRow: handleSelectRow, variant: variant, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, isSelectable: isSelectable, selectedRows: selectedRows, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, children: (0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, columns: columns, keyId: keyId, isTabularNums: isTabularNums, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledContainer, { style: containerCssVars, className: (0, cn_1.cn)(dataGridInfiniteCva({
+    return ((0, jsx_runtime_1.jsx)(DataGridInfiniteContext_1.DataGridInfiniteContextProvider, { renderRow: renderRow, onSelectRow: handleSelectRow, variant: variant, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, isSelectable: isSelectable, selectedRows: selectedRows, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, children: (0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, columns: columns, keyId: keyId, isTabularNums: isTabularNums, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, renderLink: renderLink, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledContainer, { style: containerCssVars, className: (0, cn_1.cn)(dataGridInfiniteCva({
                     hasGroupedColumns,
                     gridViewMode,
                     mobileDisplayVariant,

package/node/components/Link/Link.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import type { LinkProps as MuiLinkProps } from '@mui/material/Link';
+import { type ComponentPropsWithRef, type ElementType } from 'react';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
-export type LinkProps = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href' | 'className' | 'classes' | 'style' | 'children' | 'key' | 'target'> & {
+export type LinkProps<TComponent extends ElementType = ElementType> = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href' | 'className' | 'classes' | 'style' | 'children' | 'key' | 'target'> & {
     /**
      * Добавление иконки
      */
@@ -20,8 +20,18 @@ export type LinkProps = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href
      * Позволяет переключить цвета ссылки на более контрастные
      */
     isContrast?: boolean;
-};
-export declare const Link: import("react").ForwardRefExoticComponent<Pick<WithoutEmotionSpecific<MuiLinkProps>, "classes" | "className" | "style" | "rel" | "children" | "target" | "href" | "key"> & {
+    /**
+     * Тип элемента
+     *
+     * @example
+     * <Link component={RouterLink} to="/documents">
+     *   Документы
+     * </Link>
+     * @default 'a'
+     */
+    component?: TComponent;
+} & (ElementType extends TComponent ? {} : ComponentPropsWithRef<TComponent>);
+export declare const Link: <TComponent extends ElementType>(props: Pick<WithoutEmotionSpecific<MuiLinkProps>, "classes" | "className" | "style" | "rel" | "children" | "target" | "href" | "key"> & {
     /**
      * Добавление иконки
      */
@@ -40,4 +50,14 @@ export declare const Link: import("react").ForwardRefExoticComponent<Pick<Withou
      * Позволяет переключить цвета ссылки на более контрастные
      */
     isContrast?: boolean | undefined;
-} & import("react").RefAttributes<HTMLAnchorElement>>;
+    /**
+     * Тип элемента
+     *
+     * @example
+     * <Link component={RouterLink} to="/documents">
+     *   Документы
+     * </Link>
+     * @default 'a'
+     */
+    component?: TComponent | undefined;
+} & (ElementType extends TComponent ? {} : ComponentPropsWithRef<TComponent>) & import("react").RefAttributes<HTMLAnchorElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/node/components/Link/Link.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const DownloadVOutlineSm_1 = require("../../icons/DownloadVOutlineSm");
 const OpenLinkOutlineSm_1 = require("../../icons/OpenLinkOutlineSm");
+const forwardRefWithGeneric_1 = require("../forwardRefWithGeneric");
 const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
@@ -16,7 +16,8 @@ const linkCva = (0, cva_1.cva)(constants_1.linkClassnames.root, {
         },
     },
 });
-exports.Link = (0, react_1.forwardRef)(({ withAdornment, isDownload, downloadFilename, isContrast, children, className, ...props }, ref) => {
+const UnwrappedLink = ({ withAdornment, isDownload, downloadFilename, isContrast, children, className, ...props }, ref) => {
     const icon = isDownload ? (0, jsx_runtime_1.jsx)(DownloadVOutlineSm_1.DownloadVOutlineSm, {}) : (0, jsx_runtime_1.jsx)(OpenLinkOutlineSm_1.OpenLinkOutlineSm, {});
     return ((0, jsx_runtime_1.jsxs)(styles_1.StyledLink, { download: downloadFilename ?? isDownload, className: (0, cn_1.cn)(linkCva({ isContrast }), className), ref: ref, ...props, children: [withAdornment === 'start' && icon, children, withAdornment === 'end' && icon, !withAdornment && isDownload && (0, jsx_runtime_1.jsx)(DownloadVOutlineSm_1.DownloadVOutlineSm, {})] }));
-});
+};
+exports.Link = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(UnwrappedLink);

package/node/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 DataGridRow, type DataGridRowOptions, type DataGridSort, DataGrid, type DataGridProps, } from './DataGrid';
+export { type DataGridColumns, type DataGridRenderLink, type DataGridRenderLinkParams, type DataGridRow, 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/theme/components/MuiOutlinedInput.js

@@ -18,6 +18,9 @@ exports.MuiOutlinedInput = {
                     '&:hover': {
                         background: theme.palette.background.elementHover,
                     },
+                    '&:hover .MuiOutlinedInput-input:autofill': {
+                        boxShadow: `0 0 0 1000px ${theme.palette.background.elementHover} inset`,
+                    },
                     '&:hover .MuiOutlinedInput-notchedOutline': {
                         borderColor: theme.palette.grey[800],
                         transition: theme.transitions.create(['border-color'], {
@@ -53,7 +56,7 @@ exports.MuiOutlinedInput = {
                     ? theme.spacing(1)
                     : theme.spacing(3),
                 '&:autofill': {
-                    boxShadow: '0 0 0 1000px white inset',
+                    boxShadow: `0 0 0 1000px ${theme.palette.common.white} inset`,
                 },
                 '&::placeholder': {
                     opacity: 1,

package/package.json

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