@astral/ui 4.108.0 → 4.110.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/DonutChart/DonutChart.d.ts

@@ -1,2 +1,2 @@
 import type { DonutChartProps } from './types';
-export declare const DonutChart: ({ value, maxValue, children, color, colorIntensity, className, style, }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DonutChart: ({ value, maxValue, children, color, colorIntensity, trackColorIntensity, className, style, }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;

package/components/DonutChart/DonutChart.js

@@ -3,7 +3,7 @@ import { cn } from '../utils/cn';
 import { donutChartClassnames } from './constants';
 import { Content, ProgressArc, Svg, TrackArc, Wrapper } from './styles';
 import { useLogic } from './useLogic';
-export const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', className, style, }) => {
-    const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = useLogic({ value, maxValue, color, colorIntensity });
+export const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', trackColorIntensity = '100', className, style, }) => {
+    const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = useLogic({ value, maxValue, color, colorIntensity, trackColorIntensity });
     return (_jsxs(Wrapper, { ref: rootRef, className: cn(donutChartClassnames.root, className), role: "meter", "aria-label": meterAriaValue.label, "aria-valuemin": meterAriaValue.min, "aria-valuemax": meterAriaValue.max, "aria-valuenow": meterAriaValue.now, style: { ...donutParams?.cssVars, ...style }, children: [donutParams && (_jsxs(Svg, { className: donutChartClassnames.svg, viewBox: svgViewBox, "aria-hidden": true, children: [_jsx(TrackArc, { className: donutChartClassnames.track, cx: arcCx, cy: arcCy, r: donutParams.arcR }), _jsx(ProgressArc, { className: donutChartClassnames.progress, d: donutParams.arcPath, pathLength: 1, strokeDasharray: 1, strokeDashoffset: donutParams.progressOffset })] })), children && (_jsx(Content, { className: donutChartClassnames.content, children: children }))] }));
 };

package/components/DonutChart/styles.js

@@ -16,7 +16,7 @@ export const Svg = styled.svg `
 `;
 export const TrackArc = styled.circle `
   fill: none;
-  stroke: ${({ theme }) => theme.palette.grey[100]};
+  stroke: var(--donut-chart-track-color);
   stroke-linecap: round;
   stroke-width: var(--donut-chart-stroke-width);
 `;

package/components/DonutChart/types.d.ts

@@ -16,6 +16,11 @@ export type DonutChartProps = {
      * Интенсивность цвета.
      */
     colorIntensity?: DonutChartColorIntensity;
+    /**
+     * Интенсивность цвета для фонового кольца.
+     * @default '100'
+     */
+    trackColorIntensity?: DonutChartColorIntensity;
     /**
      * CSS-класс для корневого элемента.
      */

package/components/DonutChart/useLogic/useLogic.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DonutChartProps } from '../types';
-export declare const useLogic: ({ value, maxValue, color, colorIntensity, }: DonutChartProps) => {
+export declare const useLogic: ({ value, maxValue, color, colorIntensity, trackColorIntensity, }: DonutChartProps) => {
     rootRef: import("react").RefObject<HTMLDivElement | null>;
     svgViewBox: "0 0 100 100";
     arcCx: number;

package/components/DonutChart/useLogic/useLogic.js

@@ -8,7 +8,7 @@ import { getMeterAriaValue } from './utils/getMeterAriaValue';
 import { getProgressCirclePath } from './utils/getProgressCirclePath';
 import { getProgressOffset } from './utils/getProgressOffset';
 import { getProgressPercent } from './utils/getProgressPercent';
-export const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', }) => {
+export const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', trackColorIntensity = '100', }) => {
     const theme = useTheme();
     const { rootRef, renderWidth } = useRenderWidth();
     const progressPercent = getProgressPercent(value, maxValue);
@@ -25,10 +25,18 @@ export const useLogic = ({ value, maxValue, color = 'primary', colorIntensity =
             cssVars: getDonutChartCssVars(theme, {
                 color,
                 colorIntensity,
+                trackColorIntensity,
                 strokeWidth: stroke,
             }),
         };
-    }, [renderWidth, progressPercent, color, colorIntensity, theme]);
+    }, [
+        renderWidth,
+        progressPercent,
+        color,
+        colorIntensity,
+        trackColorIntensity,
+        theme,
+    ]);
     return {
         rootRef,
         svgViewBox: DONUT_CHART_SVG_VIEWBOX,

package/components/DonutChart/useLogic/utils/getDonutChartCssVars/getDonutChartCssVars.d.ts

@@ -4,13 +4,14 @@ import type { DonutChartColor, DonutChartColorIntensity } from '../../../types';
 type GetDonutChartCssVarsParams = {
     color: DonutChartColor;
     colorIntensity: DonutChartColorIntensity;
+    trackColorIntensity: DonutChartColorIntensity;
     strokeWidth: number;
 };
 /**
  * Генерирует CSS переменные для стилизации DonutChart по теме и цвету.
  * @param theme - Объект темы с палитрой цветов
- * @param params - Параметры цвета, интенсивности и ширины stroke
+ * @param params - Параметры цвета, интенсивности дуги и трека, ширины stroke
  * @returns CSS свойства для диаграммы
  */
-export declare const getDonutChartCssVars: (theme: Theme, { color, colorIntensity, strokeWidth }: GetDonutChartCssVarsParams) => CSSProperties;
+export declare const getDonutChartCssVars: (theme: Theme, { color, colorIntensity, trackColorIntensity, strokeWidth, }: GetDonutChartCssVarsParams) => CSSProperties;
 export {};

package/components/DonutChart/useLogic/utils/getDonutChartCssVars/getDonutChartCssVars.js

@@ -1,10 +1,11 @@
 /**
  * Генерирует CSS переменные для стилизации DonutChart по теме и цвету.
  * @param theme - Объект темы с палитрой цветов
- * @param params - Параметры цвета, интенсивности и ширины stroke
+ * @param params - Параметры цвета, интенсивности дуги и трека, ширины stroke
  * @returns CSS свойства для диаграммы
  */
-export const getDonutChartCssVars = (theme, { color, colorIntensity, strokeWidth }) => ({
+export const getDonutChartCssVars = (theme, { color, colorIntensity, trackColorIntensity, strokeWidth, }) => ({
     '--donut-chart-stroke-width': String(strokeWidth),
     '--donut-chart-progress-color': theme.palette[color][colorIntensity],
+    '--donut-chart-track-color': theme.palette.grey[trackColorIntensity],
 });

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/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;