@astral/ui 4.108.0 → 4.110.0

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/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/node/components/DonutChart/DonutChart.js

@@ -6,8 +6,8 @@ const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', className, style, }) => {
-    const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = (0, useLogic_1.useLogic)({ value, maxValue, color, colorIntensity });
+const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', trackColorIntensity = '100', className, style, }) => {
+    const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = (0, useLogic_1.useLogic)({ value, maxValue, color, colorIntensity, trackColorIntensity });
     return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { ref: rootRef, className: (0, cn_1.cn)(constants_1.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 && ((0, jsx_runtime_1.jsxs)(styles_1.Svg, { className: constants_1.donutChartClassnames.svg, viewBox: svgViewBox, "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)(styles_1.TrackArc, { className: constants_1.donutChartClassnames.track, cx: arcCx, cy: arcCy, r: donutParams.arcR }), (0, jsx_runtime_1.jsx)(styles_1.ProgressArc, { className: constants_1.donutChartClassnames.progress, d: donutParams.arcPath, pathLength: 1, strokeDasharray: 1, strokeDashoffset: donutParams.progressOffset })] })), children && ((0, jsx_runtime_1.jsx)(styles_1.Content, { className: constants_1.donutChartClassnames.content, children: children }))] }));
 };
 exports.DonutChart = DonutChart;

package/node/components/DonutChart/styles.js

@@ -19,7 +19,7 @@ exports.Svg = styled_1.styled.svg `
 `;
 exports.TrackArc = styled_1.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/node/components/DonutChart/types.d.ts

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

package/node/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/node/components/DonutChart/useLogic/useLogic.js

@@ -11,7 +11,7 @@ const getMeterAriaValue_1 = require("./utils/getMeterAriaValue");
 const getProgressCirclePath_1 = require("./utils/getProgressCirclePath");
 const getProgressOffset_1 = require("./utils/getProgressOffset");
 const getProgressPercent_1 = require("./utils/getProgressPercent");
-const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', }) => {
+const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', trackColorIntensity = '100', }) => {
     const theme = (0, useTheme_1.useTheme)();
     const { rootRef, renderWidth } = (0, hooks_1.useRenderWidth)();
     const progressPercent = (0, getProgressPercent_1.getProgressPercent)(value, maxValue);
@@ -28,10 +28,18 @@ const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700',
             cssVars: (0, getDonutChartCssVars_1.getDonutChartCssVars)(theme, {
                 color,
                 colorIntensity,
+                trackColorIntensity,
                 strokeWidth: stroke,
             }),
         };
-    }, [renderWidth, progressPercent, color, colorIntensity, theme]);
+    }, [
+        renderWidth,
+        progressPercent,
+        color,
+        colorIntensity,
+        trackColorIntensity,
+        theme,
+    ]);
     return {
         rootRef,
         svgViewBox: constants_1.DONUT_CHART_SVG_VIEWBOX,

package/node/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/node/components/DonutChart/useLogic/utils/getDonutChartCssVars/getDonutChartCssVars.js

@@ -4,11 +4,12 @@ exports.getDonutChartCssVars = void 0;
 /**
  * Генерирует CSS переменные для стилизации DonutChart по теме и цвету.
  * @param theme - Объект темы с палитрой цветов
- * @param params - Параметры цвета, интенсивности и ширины stroke
+ * @param params - Параметры цвета, интенсивности дуги и трека, ширины stroke
  * @returns CSS свойства для диаграммы
  */
-const getDonutChartCssVars = (theme, { color, colorIntensity, strokeWidth }) => ({
+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],
 });
 exports.getDonutChartCssVars = getDonutChartCssVars;

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/package.json

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