@astral/ui 4.74.0 → 4.76.0

package/node/components/DataGridInfinite/List/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataGridInfiniteListClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.dataGridInfiniteListClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid-infinite-body'),
+};

package/node/components/DataGridInfinite/List/index.d.ts

@@ -1 +1,2 @@
 export * from './List';
+export { dataGridInfiniteListClassnames } from './constants';

package/node/components/DataGridInfinite/List/index.js

@@ -14,4 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataGridInfiniteListClassnames = void 0;
 __exportStar(require("./List"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "dataGridInfiniteListClassnames", { enumerable: true, get: function () { return constants_1.dataGridInfiniteListClassnames; } });

package/node/components/DataGridInfinite/Row/Row.d.ts

@@ -0,0 +1,2 @@
+import { type RowProps } from './types';
+export declare const Row: ({ children, ...props }: RowProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/DataGridInfinite/Row/Row.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CustomRowWrapper_1 = require("../../DataGrid/CustomRowWrapper");
+const Row_1 = require("../../DataGrid/Row");
+const RowContext_1 = require("../../DataGrid/Row/RowContext");
+const useLogic_1 = require("./useLogic");
+const INITIAL_LEVEL = 0;
+const Row = ({ children, ...props }) => {
+    const { item, memoizedItemProps, onSelectRow, renderRow, flattenColumns, gridColumns, options, keyId, variant, isSelectable, isSelected, nestedChildren, isInitialExpanded, expandedLevel, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, emptyCellValue, activeRowId, onRowClick, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { row: item, itemProps: memoizedItemProps, onSelectRow: onSelectRow, isSelectable: isSelectable, isSelected: isSelected, children: renderRow ? ((0, jsx_runtime_1.jsx)(CustomRowWrapper_1.CustomRowWrapper, { index: memoizedItemProps['data-item-index'], renderRow: renderRow, row: item })) : ((0, jsx_runtime_1.jsx)(Row_1.Row, { ...memoizedItemProps, row: item, columns: flattenColumns, gridColumns: gridColumns, options: options, keyId: keyId, variant: variant, isSelectable: isSelectable, isSelected: isSelected, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded || false, expandedLevel: expandedLevel || 1, initialVisibleChildrenCount: initialVisibleChildrenCount || 2, activeRowId: activeRowId, moreButtonColumnPosition: moreButtonColumnPosition || 1, isVisibleCollapseButton: isVisibleCollapseButton || true, emptyCellValue: emptyCellValue, onRowClick: onRowClick, onSelectRow: onSelectRow })) }));
+};
+exports.Row = Row;

package/node/components/DataGridInfinite/Row/index.d.ts

@@ -0,0 +1 @@
+export * from './Row';

package/node/components/DataGridInfinite/Row/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Row"), exports);

package/node/components/DataGridInfinite/Row/types.d.ts

@@ -0,0 +1,2 @@
+import type { ItemProps as VirtuosoItemProps } from 'react-virtuoso';
+export type RowProps = VirtuosoItemProps<Record<string, unknown>>;

package/node/components/DataGridInfinite/Row/types.js

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

package/node/components/DataGridInfinite/Row/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/node/components/DataGridInfinite/Row/useLogic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);

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

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { type RowProps } from '../types';
+type UseLogicParams = Omit<RowProps, 'children'>;
+export declare const useLogic: ({ item, ...itemProps }: UseLogicParams) => {
+    item: Record<string, unknown>;
+    renderRow: (row: Record<string, unknown>, index: number) => import("react").ReactNode;
+    isSelected: boolean;
+    nestedChildren: unknown;
+    options: unknown;
+    flattenColumns: import("../../../DataGrid").DataGridSingleColumn<Record<string, unknown>>[];
+    gridColumns: string;
+    activeRowId: string | undefined;
+    emptyCellValue: import("react").ReactNode;
+    keyId: unknown;
+    onRowClick: ((row: Record<string, unknown>) => void) | undefined;
+    onSelectRow: (row: Record<string, unknown>) => (event: import("react").ChangeEvent<HTMLInputElement, Element>) => void;
+    variant: "tree" | "subrows";
+    isInitialExpanded: boolean | undefined;
+    expandedLevel: number | undefined;
+    initialVisibleChildrenCount: number | undefined;
+    moreButtonColumnPosition: number | undefined;
+    isVisibleCollapseButton: boolean | undefined;
+    isSelectable: boolean | undefined;
+    selectedRows: Record<string, unknown>[] | undefined;
+    memoizedItemProps: {
+        style?: import("react").CSSProperties | undefined;
+        'data-index': number;
+        'data-item-group-index'?: number | undefined;
+        'data-item-index': number;
+        'data-known-size': number;
+    };
+};
+export {};

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const DataGridContext_1 = require("../../../DataGrid/DataGridContext");
+const utils_1 = require("../../../DataGrid/utils");
+const DataGridInfiniteContext_1 = require("../../DataGridInfiniteContext");
+const useLogic = ({ item, ...itemProps }) => {
+    const { renderRow, onSelectRow, variant, isInitialExpanded, expandedLevel, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, isSelectable, selectedRows, } = (0, react_1.useContext)(DataGridInfiniteContext_1.DataGridInfiniteContext);
+    const { activeRowId, columns, emptyCellValue, onRowClick, keyId, gridColumns, } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
+    const memoizedItemProps = (0, react_1.useMemo)(() => itemProps, [itemProps.style]);
+    const flattenColumns = (0, react_1.useMemo)(() => (0, utils_1.getFlattenColumns)(columns), [columns]);
+    const { children: nestedChildren, options } = item;
+    const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === item[keyId]));
+    return {
+        item,
+        renderRow,
+        isSelected,
+        nestedChildren,
+        options,
+        flattenColumns,
+        gridColumns,
+        activeRowId,
+        emptyCellValue,
+        keyId,
+        onRowClick,
+        onSelectRow,
+        variant,
+        isInitialExpanded,
+        expandedLevel,
+        initialVisibleChildrenCount,
+        moreButtonColumnPosition,
+        isVisibleCollapseButton,
+        isSelectable,
+        selectedRows,
+        memoizedItemProps,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/DataGridInfinite/faker.js

@@ -17,7 +17,7 @@ const makeRandomDate = () => {
 exports.makeRandomDate = makeRandomDate;
 const makeDataList = (length = 10, options) => {
     return Array.from({ length }).map((_, i) => ({
-        id: faker_1.faker.string.uuid(),
+        id: i.toString(),
         documentName: `Договор №${i + 1}`,
         recipient: RECIPIENTS[faker_1.faker.number.int({ min: 0, max: RECIPIENTS.length })],
         createDate: (0, exports.makeRandomDate)(),

package/node/components/DataGridInfinite/styles.d.ts

@@ -20,3 +20,9 @@ export declare const Backdrop: import("@emotion/styled/dist/declarations/src/typ
 export declare const StyledScrollToTopButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../ScrollToTopButton").ScrollToTopButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const StyledContainer: 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").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/DataGridInfinite/styles.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledScrollToTopButton = exports.Backdrop = exports.FooterRow = exports.DisabledDataGridWrapper = exports.DataGridWrapper = void 0;
+exports.StyledContainer = exports.StyledScrollToTopButton = exports.Backdrop = exports.FooterRow = exports.DisabledDataGridWrapper = exports.DataGridWrapper = void 0;
+const styles_1 = require("../DataGrid/styles");
 const ScrollToTopButton_1 = require("../ScrollToTopButton");
 const styled_1 = require("../styled");
 const constants_1 = require("./constants");
+const List_1 = require("./List");
 exports.DataGridWrapper = styled_1.styled.div `
   position: relative;
 
@@ -44,3 +46,12 @@ exports.StyledScrollToTopButton = (0, styled_1.styled)(ScrollToTopButton_1.Scrol
     display: inline-flex;
   }
 `;
+exports.StyledContainer = (0, styled_1.styled)(styles_1.Container) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${List_1.dataGridInfiniteListClassnames.root} {
+      display: flex;
+      flex-direction: column;
+      gap: ${({ theme }) => theme.spacing(2)};
+    }
+  }
+`;

package/node/components/DataGridInfinite/useLogic/useLogic.d.ts

@@ -4,13 +4,13 @@ import { type DataGridRow } from '../../DataGrid';
 import { type CellValue } from '../../DataGrid/types';
 import { type DataGridInfiniteProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridInfiniteProps<TData, TSortField>;
-export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, gridViewMode: gridViewModeProp, }: UseLogicParams<TData, TSortField>) => {
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, gridViewMode: gridViewModeProp, mobileDisplayVariant, }: UseLogicParams<TData, TSortField>) => {
     containerCssVars: import("react").CSSProperties;
     mobileSkeletonProps: {
         cellsCount: number;
         rowsCount: number;
+        mobileDisplayVariant: "list" | "cards";
     };
-    flattenColumns: import("../../DataGrid").DataGridSingleColumn<TData>[];
     isNoData: boolean;
     isMobile: boolean;
     isDataGridDisabled: boolean | undefined;
@@ -23,6 +23,7 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
     isHideHead: boolean;
     hasGroupedColumns: boolean;
     gridViewMode: "standard" | "full";
+    gridColumns: string;
     virtuosoProps: {
         id: string;
         ref: import("react").RefObject<VirtuosoHandle | null>;
@@ -41,11 +42,13 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
     rowProps: {
         isSelectable: boolean;
         gridColumns: string;
-        onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
     };
     scrollToTopButtonProps: {
         onClick: () => void;
         ref: import("react").RefObject<HTMLButtonElement | null>;
     };
+    handleSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
+    mobileDisplayVariant: "list" | "cards";
+    isSelfContained: boolean;
 };
 export {};

package/node/components/DataGridInfinite/useLogic/useLogic.js

@@ -2,24 +2,40 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const constants_1 = require("../../DataGrid/constants");
 const enums_1 = require("../../DataGrid/enums");
 const hooks_1 = require("../../DataGrid/useLogic/hooks");
 const utils_1 = require("../../DataGrid/utils");
 const useViewportType_1 = require("../../useViewportType");
 const prop_1 = require("../../utils/prop");
 const uniqueBy_1 = require("../../utils/uniqueBy");
-const constants_1 = require("../constants");
-const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', }) => {
+const constants_2 = require("../constants");
+const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', }) => {
     const virtuoso = (0, react_1.useRef)(null);
     const scrollToTopButtonRef = (0, react_1.useRef)(null);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
+    // Реф добавлен для избежания замыкания selectedRows в handleSelectRow (иначе в handleSelectRow приходят некорректные значения selectedRows).
+    const selectedRowsRef = (0, react_1.useRef)(selectedRows);
+    (0, react_1.useEffect)(() => {
+        selectedRowsRef.current = selectedRows;
+    }, [selectedRows]);
     const [hasVerticalScroll, setHasVerticalScroll] = (0, react_1.useState)(false);
     const isNoData = Boolean(rows?.length);
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isDisabled || (!isNoData && isLoading);
-    const treeRenderConfig = Object.is(variant, enums_1.Variant.Subrows)
-        ? { ...subrows, isInitialExpanded: true }
-        : tree;
+    const treeRenderConfig = (0, react_1.useMemo)(() => {
+        const config = Object.is(variant, enums_1.Variant.Subrows)
+            ? { ...subrows, isInitialExpanded: true }
+            : tree;
+        if (isMobile) {
+            return {
+                ...config,
+                expandedLevel: constants_1.EXPANDED_LEVEL_BY_DEFAULT,
+                initialVisibleChildrenCount: constants_1.INITIAL_OPENED_NESTED_CHILDREN_COUNT_ON_MOBILE_BY_DEFAULT,
+            };
+        }
+        return config;
+    }, [variant, subrows, tree, isMobile]);
     const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
     const flattenColumns = (0, react_1.useMemo)(() => (0, utils_1.getFlattenColumns)(columns), [columns]);
     const hasGroupedColumns = columns.some(utils_1.isGroupColumns);
@@ -35,7 +51,7 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
     }, [availableRows, selectedRows, keyId]);
     const handleRangeChanged = (0, react_1.useCallback)((range) => {
         if (scrollToTopButtonRef.current) {
-            scrollToTopButtonRef.current.classList.toggle(constants_1.dataGridInfiniteClassnames.visibleScrollToTopButton, range.startIndex > 2);
+            scrollToTopButtonRef.current.classList.toggle(constants_2.dataGridInfiniteClassnames.visibleScrollToTopButton, range.startIndex > 2);
         }
     }, []);
     const handleSelectAllRows = (event) => {
@@ -54,16 +70,16 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
             return;
         }
         if (event.target.checked) {
-            return onSelectRow([...selectedRows, row]);
+            return onSelectRow([...selectedRowsRef.current, row]);
         }
-        onSelectRow(selectedRows.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
-    }, [selectedRows, onSelectRow, keyId]);
+        onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
+    }, []);
     const handleScrollToTop = () => {
         virtuoso.current?.scrollIntoView({ index: 0, behavior: 'smooth' });
     };
     const recalculateVerticalScroll = () => {
-        const container = document.getElementById(constants_1.VIRTUOSO_CONTAINER_ID);
-        const list = document.getElementById(constants_1.VIRTUOSO_LIST_ID);
+        const container = document.getElementById(constants_2.VIRTUOSO_CONTAINER_ID);
+        const list = document.getElementById(constants_2.VIRTUOSO_LIST_ID);
         if (container && list) {
             setHasVerticalScroll(list?.clientHeight > container?.clientHeight);
         }
@@ -71,12 +87,12 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
     const isHideHead = isHideHeaderIfNoData && rows.length === 0;
     const { mobileSkeletonProps } = (0, hooks_1.useDataGridMobileLogic)({
         columns: flattenColumns,
+        mobileDisplayVariant,
     });
     const containerCssVars = (0, utils_1.getDataGridCssVars)(maxHeight);
     return {
         containerCssVars,
         mobileSkeletonProps,
-        flattenColumns,
         isNoData,
         isMobile,
         isDataGridDisabled,
@@ -85,8 +101,9 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
         isHideHead,
         hasGroupedColumns,
         gridViewMode,
+        gridColumns,
         virtuosoProps: {
-            id: constants_1.VIRTUOSO_CONTAINER_ID,
+            id: constants_2.VIRTUOSO_CONTAINER_ID,
             ref: virtuoso,
             endReached: handleEndReach,
             rangeChanged: handleRangeChanged,
@@ -103,12 +120,14 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
         rowProps: {
             isSelectable,
             gridColumns,
-            onSelectRow: handleSelectRow,
         },
         scrollToTopButtonProps: {
             onClick: handleScrollToTop,
             ref: scrollToTopButtonRef,
         },
+        handleSelectRow,
+        mobileDisplayVariant,
+        isSelfContained: mobileDisplayVariant === 'cards',
     };
 };
 exports.useLogic = useLogic;

package/node/components/DialogActions/styles.js

@@ -8,6 +8,8 @@ const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
 const Grid_1 = require("../Grid");
 const styled_1 = require("../styled");
 exports.StyledDialogActions = (0, styled_1.styled)(DialogActions_1.default) `
+  z-index: ${({ theme }) => theme.zIndex.modal};
+
   padding-top: ${({ theme }) => theme.spacing(6)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/node/components/DonutChart/DonutChart.d.ts

@@ -0,0 +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;

package/node/components/DonutChart/DonutChart.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DonutChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../utils/classNames");
+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 });
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { ref: rootRef, className: (0, classNames_1.classNames)(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/constants.d.ts

@@ -0,0 +1,15 @@
+/** Нормализованная система координат SVG. Масштаб — через CSS 100%. */
+export declare const DONUT_CHART_VIEWBOX = 100;
+/** Центр дуги в координатах viewBox (cx, cy). */
+export declare const DONUT_CHART_VIEWBOX_CENTER: number;
+/** Толщина обводки на экране (px), пересчитывается в единицы viewBox через getGeometry. */
+export declare const DONUT_CHART_STROKE_WIDTH = 8;
+/** Атрибут viewBox SVG (квадрат DONUT_CHART_VIEWBOX × DONUT_CHART_VIEWBOX). */
+export declare const DONUT_CHART_SVG_VIEWBOX: "0 0 100 100";
+export declare const donutChartClassnames: {
+    root: string;
+    svg: string;
+    track: string;
+    progress: string;
+    content: string;
+};

package/node/components/DonutChart/constants.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.donutChartClassnames = exports.DONUT_CHART_SVG_VIEWBOX = exports.DONUT_CHART_STROKE_WIDTH = exports.DONUT_CHART_VIEWBOX_CENTER = exports.DONUT_CHART_VIEWBOX = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+/** Нормализованная система координат SVG. Масштаб — через CSS 100%. */
+exports.DONUT_CHART_VIEWBOX = 100;
+/** Центр дуги в координатах viewBox (cx, cy). */
+exports.DONUT_CHART_VIEWBOX_CENTER = exports.DONUT_CHART_VIEWBOX / 2;
+/** Толщина обводки на экране (px), пересчитывается в единицы viewBox через getGeometry. */
+exports.DONUT_CHART_STROKE_WIDTH = 8;
+/** Атрибут viewBox SVG (квадрат DONUT_CHART_VIEWBOX × DONUT_CHART_VIEWBOX). */
+exports.DONUT_CHART_SVG_VIEWBOX = `0 0 ${exports.DONUT_CHART_VIEWBOX} ${exports.DONUT_CHART_VIEWBOX}`;
+exports.donutChartClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('donut-chart'),
+    svg: (0, createUIKitClassname_1.createUIKitClassname)('donut-chart__svg'),
+    track: (0, createUIKitClassname_1.createUIKitClassname)('donut-chart__track'),
+    progress: (0, createUIKitClassname_1.createUIKitClassname)('donut-chart__progress'),
+    content: (0, createUIKitClassname_1.createUIKitClassname)('donut-chart__content'),
+};

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

@@ -0,0 +1,3 @@
+export { DonutChart } from './DonutChart';
+export type { DonutChartProps } from './types';
+export { donutChartClassnames } from './constants';

package/node/components/DonutChart/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.donutChartClassnames = exports.DonutChart = void 0;
+var DonutChart_1 = require("./DonutChart");
+Object.defineProperty(exports, "DonutChart", { enumerable: true, get: function () { return DonutChart_1.DonutChart; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "donutChartClassnames", { enumerable: true, get: function () { return constants_1.donutChartClassnames; } });

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

@@ -0,0 +1,3 @@
+export { donutChartClassnames } from './constants';
+export { DonutChart } from './DonutChart';
+export type { DonutChartProps } from './types';

package/node/components/DonutChart/public.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DonutChart = exports.donutChartClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "donutChartClassnames", { enumerable: true, get: function () { return constants_1.donutChartClassnames; } });
+var DonutChart_1 = require("./DonutChart");
+Object.defineProperty(exports, "DonutChart", { enumerable: true, get: function () { return DonutChart_1.DonutChart; } });

package/node/components/DonutChart/styles.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const Wrapper: 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").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Svg: 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").SVGProps<SVGSVGElement>, {}>;
+export declare const TrackArc: 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").SVGProps<SVGCircleElement>, {}>;
+export declare const ProgressArc: 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").SVGProps<SVGPathElement>, {}>;
+export declare const Content: 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").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/DonutChart/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = exports.ProgressArc = exports.TrackArc = exports.Svg = exports.Wrapper = void 0;
+const styled_1 = require("../styled");
+exports.Wrapper = styled_1.styled.div `
+  position: relative;
+
+  aspect-ratio: 1 / 1;
+  width: 100%;
+`;
+exports.Svg = styled_1.styled.svg `
+  /* Старт дуги (точка 3 часа) переносим наверх. */
+  transform: rotate(-90deg);
+
+  display: block;
+
+  width: 100%;
+  height: 100%;
+`;
+exports.TrackArc = styled_1.styled.circle `
+  fill: none;
+  stroke: ${({ theme }) => theme.palette.grey[100]};
+  stroke-linecap: round;
+  stroke-width: var(--donut-chart-stroke-width);
+`;
+exports.ProgressArc = styled_1.styled.path `
+  fill: none;
+  stroke: var(--donut-chart-progress-color);
+  stroke-linecap: round;
+  stroke-width: var(--donut-chart-stroke-width);
+
+  transition: stroke-dashoffset
+    ${({ theme }) => theme.transitions.duration.standard}ms ease-in-out;
+`;
+exports.Content = styled_1.styled.div `
+  position: absolute;
+  inset: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: ${({ theme }) => theme.spacing(4)};
+`;

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

@@ -0,0 +1,27 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type DonutChartColor = 'primary' | 'success' | 'warning' | 'error' | 'grey' | 'red' | 'green' | 'yellow';
+export type DonutChartColorIntensity = '900' | '800' | '700' | '600' | '500' | '400' | '300' | '200' | '100';
+export type DonutChartProps = {
+    value: number;
+    maxValue: number;
+    /**
+     * Контент в центре. Можно передать другой `DonutChart`.
+     */
+    children?: ReactNode;
+    /**
+     * Цвет.
+     */
+    color?: DonutChartColor;
+    /**
+     * Интенсивность цвета.
+     */
+    colorIntensity?: DonutChartColorIntensity;
+    /**
+     * CSS-класс для корневого элемента.
+     */
+    className?: string;
+    /**
+     * Стили для корневого элемента.
+     */
+    style?: CSSProperties;
+};

package/node/components/DonutChart/types.js

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

package/node/components/DonutChart/useLogic/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useRenderWidth';

package/node/components/DonutChart/useLogic/hooks/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useRenderWidth"), exports);

package/node/components/DonutChart/useLogic/hooks/useRenderWidth/index.d.ts

@@ -0,0 +1 @@
+export * from './useRenderWidth';

package/node/components/DonutChart/useLogic/hooks/useRenderWidth/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useRenderWidth"), exports);

package/node/components/DonutChart/useLogic/hooks/useRenderWidth/useRenderWidth.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * Отслеживает ширину элемента и обновляет значение при resize.
+ * @returns Объект с ref для присоединения к элементу и текущей шириной в пикселях
+ */
+export declare const useRenderWidth: () => {
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    renderWidth: number | null;
+};