@astral/ui 4.56.0 → 4.57.0

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

@@ -7,8 +7,10 @@ const DataGridContext_1 = require("../../DataGridContext");
 const enums_1 = require("../../enums");
 const constants_1 = require("../constants");
 const RowContext_1 = require("../RowContext");
+const hooks_1 = require("./hooks");
 const utils_1 = require("./utils");
-const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, }) => {
+const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, }) => {
+    const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = (0, hooks_1.useMobileLogic)();
     const isDefaultExpanded = isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length;
     const { checkIsOpened, toggleOpenItems } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
     const { isDisabled, disabledReason } = (0, react_1.useContext)(RowContext_1.RowContext);
@@ -28,6 +30,16 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeR
     const { isDisabled: isExternalDisabled, disabledReason: externalDisabledReason, href, target, } = options || {};
     const disabled = isDisabled || isExternalDisabled;
     const isOpen = checkIsOpened(rowId);
+    const handleRowClick = () => {
+        if (disabled) {
+            handleOpenDrawer();
+            return undefined;
+        }
+        if (href) {
+            return (0, redirectToLink_1.redirectToLink)(href, target);
+        }
+        onRowClick?.(row);
+    };
     (0, react_1.useEffect)(() => {
         // Проверка на isOpen необходима для infinite версии с виртуализацией, когда происходит размонтировании компонента
         if (isDefaultExpanded && !isOpen) {
@@ -60,17 +72,16 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeR
             setVisibleTooltip(false);
         }
     };
-    const handleRowClick = () => {
-        if (disabled) {
-            return undefined;
-        }
-        if (href) {
-            return (0, redirectToLink_1.redirectToLink)(href, target);
-        }
-        onRowClick?.(row);
-    };
     const isRenderCollapseButton = Boolean(nestedChildren?.length) && isVisibleCollapseButton;
+    const rowStyles = (0, react_1.useMemo)(() => ({
+        '--level': level,
+        ...style,
+    }), [level, style]);
+    const isHovered = Boolean(!disabled && (onRowClick || href));
+    const disabledReasonText = externalDisabledReason || disabledReason;
     return {
+        disabledReasonText,
+        rowStyles,
         isOpen,
         isShowConnector,
         childrenColumns,
@@ -79,15 +90,19 @@ const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeR
         disabled,
         isRenderCollapseButton,
         handleToggle,
+        isHovered,
         rowProps: {
-            $isHovered: Boolean(!disabled && (onRowClick || href)),
-            $isSelected: activeRowId === rowId,
             onClick: handleRowClick,
             onMouseMove: handleMouseMove,
         },
+        drawerProps: {
+            open: isDrawerOpen,
+            onClose: handleCloseDrawer,
+            title: 'Заблокировано',
+        },
         tooltipProps: {
             open: isVisibleTooltip,
-            title: disabled ? externalDisabledReason || disabledReason : undefined,
+            title: disabled ? disabledReasonText : undefined,
             onOpen: handleOpenTooltip,
             onClose: handleCloseTooltip,
         },

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

@@ -2,9 +2,11 @@ export declare const MIN_ROW_HEIGHT = 44;
 export declare const ROOT_ACTION_CELL_WIDTH = 32;
 export declare const TREE_LINE_WIDTH: number;
 export declare const MIN_DISPLAY_ROWS_BY_DEFAULT = 10;
+export declare const DEFAULT_MOBILE_SKELETON_ROWS_COUNT = 5;
 export declare const EXPANDED_LEVEL_BY_DEFAULT = 1;
 export declare const INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = 2;
 export declare const dataGridClassnames: {
+    loadingPlaceholder: string;
     header: string;
     root: string;
     body: string;
@@ -16,4 +18,6 @@ export declare const dataGridClassnames: {
     leftPinnedSection: string;
     rightPinnedSection: string;
     overflowed: string;
+    wrapper: string;
+    isAllowHorizontalScroll: string;
 };

package/node/components/DataGrid/constants.js

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dataGridClassnames = exports.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = exports.EXPANDED_LEVEL_BY_DEFAULT = exports.MIN_DISPLAY_ROWS_BY_DEFAULT = exports.TREE_LINE_WIDTH = exports.ROOT_ACTION_CELL_WIDTH = exports.MIN_ROW_HEIGHT = void 0;
+exports.dataGridClassnames = exports.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = exports.EXPANDED_LEVEL_BY_DEFAULT = exports.DEFAULT_MOBILE_SKELETON_ROWS_COUNT = exports.MIN_DISPLAY_ROWS_BY_DEFAULT = exports.TREE_LINE_WIDTH = exports.ROOT_ACTION_CELL_WIDTH = exports.MIN_ROW_HEIGHT = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.MIN_ROW_HEIGHT = 44;
 exports.ROOT_ACTION_CELL_WIDTH = 32;
 exports.TREE_LINE_WIDTH = exports.ROOT_ACTION_CELL_WIDTH / 2;
 exports.MIN_DISPLAY_ROWS_BY_DEFAULT = 10;
+exports.DEFAULT_MOBILE_SKELETON_ROWS_COUNT = 5;
 exports.EXPANDED_LEVEL_BY_DEFAULT = 1;
 exports.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = 2;
 exports.dataGridClassnames = {
+    loadingPlaceholder: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__loading-placeholder'),
     header: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__header'),
     root: (0, createUIKitClassname_1.createUIKitClassname)('data-grid'),
     body: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__body'),
@@ -20,4 +22,6 @@ exports.dataGridClassnames = {
     leftPinnedSection: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__left-pinned-section'),
     rightPinnedSection: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__right-pinned-section'),
     overflowed: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_overflowed'),
+    wrapper: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__wrapper'),
+    isAllowHorizontalScroll: (0, createUIKitClassname_1.createUIKitClassname)('data-grid_is-allow-horizontal-scroll'),
 };

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

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

package/node/components/DataGrid/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dataGridClassnames = exports.DataGrid = void 0;
+exports.MobileSkeleton = exports.dataGridClassnames = exports.DataGrid = void 0;
 var DataGrid_1 = require("./DataGrid");
 Object.defineProperty(exports, "DataGrid", { enumerable: true, get: function () { return DataGrid_1.DataGrid; } });
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "dataGridClassnames", { enumerable: true, get: function () { return constants_1.dataGridClassnames; } });
+var MobileSkeleton_1 = require("./MobileSkeleton");
+Object.defineProperty(exports, "MobileSkeleton", { enumerable: true, get: function () { return MobileSkeleton_1.MobileSkeleton; } });

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

@@ -2,23 +2,14 @@
 export declare const Container: 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;
-} & {
-    $maxHeight?: number | undefined;
-    $isAllowHorizontalScroll?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DataGridWrapper: 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;
-} & {
-    $isAllowHorizontalScroll?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DisabledDataGridWrapper: 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;
-} & {
-    $isAllowHorizontalScroll?: boolean | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $isAllowHorizontalScroll: boolean;
 }, {}, {}>;

package/node/components/DataGrid/styles.js

@@ -3,18 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DisabledDataGridWrapper = exports.DataGridWrapper = exports.Container = void 0;
 const styled_1 = require("../styled");
 const constants_1 = require("./constants");
-exports.Container = (0, styled_1.styled)('div', {
-    shouldForwardProp: (prop) => !['$maxHeight', '$isAllowHorizontalScroll'].includes(prop),
-}) `
+exports.Container = styled_1.styled.div `
+  --max-height: initial;
+
   position: relative;
 
-  overflow: ${({ $isAllowHorizontalScroll }) => $isAllowHorizontalScroll ? 'auto hidden' : 'hidden'};
+  overflow: hidden;
   display: flex;
   flex-direction: column;
 
   width: 100%;
   height: 100%;
-  max-height: ${({ $maxHeight }) => $maxHeight ? `${$maxHeight}px` : 'initial'};
+  max-height: var(--max-height);
+
+  &.${constants_1.dataGridClassnames.isAllowHorizontalScroll} {
+    overflow: auto hidden;
+
+    & .${constants_1.dataGridClassnames.wrapper} {
+      overflow: auto hidden;
+    }
+  }
 
   &.${constants_1.dataGridClassnames.dataGridHasPinnedSections} {
     overflow: hidden;
@@ -31,21 +39,44 @@ exports.Container = (0, styled_1.styled)('div', {
       }
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* Нужен для того что бы scroll доходил до вверха страницы на мобильных устройствах после пагинации */
+    scroll-margin-top: ${({ theme }) => theme.spacing(8)};
+
+    overflow: initial;
+
+    & .${constants_1.dataGridClassnames.loadingPlaceholder} {
+      justify-content: flex-start;
+    }
+
+    &.${constants_1.dataGridClassnames.dataGridHasPinnedSections} {
+      overflow: initial;
+    }
+
+    &.${constants_1.dataGridClassnames.isAllowHorizontalScroll} {
+      overflow: initial;
+
+      & .${constants_1.dataGridClassnames.wrapper} {
+        overflow: initial;
+      }
+    }
+  }
 `;
-exports.DataGridWrapper = (0, styled_1.styled)('div', {
-    shouldForwardProp: (prop) => !['$isAllowHorizontalScroll'].includes(prop),
-}) `
+exports.DataGridWrapper = styled_1.styled.div `
   position: relative;
 
-  overflow: ${({ $isAllowHorizontalScroll }) => $isAllowHorizontalScroll ? 'auto hidden' : 'hidden'};
+  overflow: hidden;
   display: flex;
   flex-direction: column;
 
   height: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    overflow: initial;
+  }
 `;
-exports.DisabledDataGridWrapper = (0, styled_1.styled)(exports.DataGridWrapper, {
-    shouldForwardProp: (prop) => !['$isAllowHorizontalScroll'].includes(prop),
-}) `
+exports.DisabledDataGridWrapper = (0, styled_1.styled)(exports.DataGridWrapper) `
   pointer-events: none;
 
   background: ${({ theme }) => theme.palette.background.element};

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

@@ -27,6 +27,9 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
     columns: DataGridColumns<TData>[];
     /**
      * Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
+     *
+     * @deprecated Не поддерживается, параметр будет удален в следующей major версии пакета.
+     * Мотивация: Использование активного элемента не является типичным сценарием использования таблицы.
      */
     activeRowId?: string;
     /**
@@ -236,6 +239,10 @@ export type DataGridColumns<TData extends Record<string, CellValue>> = {
      * Закрепление колонки в таблице
      */
     pinned?: 'left' | 'right';
+    /**
+     * Скрывает колонку на мобильных устройствах
+     */
+    isHideOnMobile?: boolean;
 };
 export type DataGridRowOptionColumns<TData extends Record<string, CellValue>> = {
     /**

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

@@ -1,2 +1,2 @@
+export * from './useDataGridMobileLogic';
 export * from './usePinnedColumns';
-export * from './useClassnames';

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

@@ -14,5 +14,5 @@ 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("./useDataGridMobileLogic"), exports);
 __exportStar(require("./usePinnedColumns"), exports);
-__exportStar(require("./useClassnames"), exports);

package/node/components/DataGrid/useLogic/hooks/useDataGridMobileLogic/index.d.ts

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

package/node/components/DataGrid/useLogic/hooks/useDataGridMobileLogic/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("./useDataGridMobileLogic"), exports);

package/node/components/DataGrid/useLogic/hooks/useDataGridMobileLogic/useDataGridMobileLogic.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+import { type CellValue, type DataGridColumns, type DataGridRow } from '../../../types';
+type UseDataGridMobileLogicParams<TData extends Record<string, CellValue> = DataGridRow> = {
+    containerRef?: RefObject<HTMLDivElement | null>;
+    isLoading?: boolean;
+    columns?: DataGridColumns<TData>[];
+    rows?: TData[];
+};
+export declare const useDataGridMobileLogic: <TData extends Record<string, unknown> = DataGridRow>({ containerRef, isLoading, columns, rows, }: UseDataGridMobileLogicParams<TData>) => {
+    isMobile: boolean;
+    mobileSkeletonProps: {
+        cellsCount: number;
+        rowsCount: number;
+    };
+};
+export {};

package/node/components/DataGrid/useLogic/hooks/useDataGridMobileLogic/useDataGridMobileLogic.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataGridMobileLogic = void 0;
+const react_1 = require("react");
+const useViewportType_1 = require("../../../../useViewportType");
+const constants_1 = require("../../../constants");
+const useDataGridMobileLogic = ({ containerRef, isLoading, columns, rows, }) => {
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
+    const firstLoadedRowsCountRef = (0, react_1.useRef)(null);
+    const mobileSkeletonCellsCount = (0, react_1.useMemo)(() => columns?.filter((column) => !column.isHideOnMobile).length ?? 0, [columns]);
+    (0, react_1.useEffect)(() => {
+        if (!isLoading &&
+            rows &&
+            rows.length > 0 &&
+            firstLoadedRowsCountRef.current === null) {
+            firstLoadedRowsCountRef.current = rows.length;
+        }
+    }, [rows, isLoading]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!isMobile) {
+            return;
+        }
+        if (isLoading && containerRef?.current) {
+            containerRef.current.scrollIntoView({
+                block: 'start',
+                behavior: 'instant',
+            });
+        }
+    }, [containerRef, isLoading, isMobile]);
+    const mobileSkeletonProps = {
+        cellsCount: mobileSkeletonCellsCount,
+        rowsCount: firstLoadedRowsCountRef.current ?? constants_1.DEFAULT_MOBILE_SKELETON_ROWS_COUNT,
+    };
+    return { isMobile, mobileSkeletonProps };
+};
+exports.useDataGridMobileLogic = useDataGridMobileLogic;

package/node/components/DataGrid/useLogic/hooks/usePinnedColumns/usePinnedColumns.js

@@ -2,14 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePinnedColumns = void 0;
 const react_1 = require("react");
+const useViewportType_1 = require("../../../../useViewportType");
 const constants_1 = require("../../../constants");
 const useRowHover_1 = require("../../../hooks/useRowHover");
 const getColumnSections_1 = require("../../utils/getColumnSections");
 const syncRowsHeight_1 = require("../../utils/syncRowsHeight");
 const usePinnedColumns = ({ isLoading, columns, }) => {
     const containerRef = (0, react_1.useRef)(null);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const hasPinnedColumns = (0, react_1.useMemo)(() => columns.some((column) => column.pinned), [columns]);
-    const { rowsMapRef, ...rowHoverProps } = (0, useRowHover_1.useRowHover)({ hasPinnedColumns });
+    const isRowHoverSyncEnabled = hasPinnedColumns && !isMobile;
+    const { rowsMapRef, ...rowHoverProps } = (0, useRowHover_1.useRowHover)({
+        hasPinnedColumns: isRowHoverSyncEnabled,
+    });
     const isScrollStateSupported = CSS.supports('container-type', 'scroll-state');
     const checkOverflow = (0, react_1.useCallback)((element) => {
         if (element) {
@@ -19,7 +24,10 @@ const usePinnedColumns = ({ isLoading, columns, }) => {
     }, []);
     const { sections } = (0, react_1.useMemo)(() => (0, getColumnSections_1.getColumnSections)(columns), [columns]);
     (0, react_1.useLayoutEffect)(() => {
-        if (isLoading || !hasPinnedColumns || typeof window === 'undefined') {
+        if (isLoading ||
+            !hasPinnedColumns ||
+            isMobile ||
+            typeof window === 'undefined') {
             return;
         }
         const resizeObserver = new ResizeObserver(() => {
@@ -41,7 +49,7 @@ const usePinnedColumns = ({ isLoading, columns, }) => {
         return () => {
             resizeObserver.disconnect();
         };
-    }, [hasPinnedColumns, isLoading]);
+    }, [hasPinnedColumns, isLoading, isMobile]);
     return { containerRef, rowHoverProps, sections, hasPinnedColumns };
 };
 exports.usePinnedColumns = usePinnedColumns;

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

@@ -1,9 +1,9 @@
 import { type ChangeEvent } from 'react';
 import type { CellValue, DataGridProps, DataGridRow } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridProps<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, isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, }: UseLogicParams<TData, TSortField>) => {
-    pinnedSectionsClassname: string;
-    dataGridClassname: string;
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, maxHeight, }: UseLogicParams<TData, TSortField>) => {
+    dataGridClassName: string | undefined;
+    containerCssVars: import("react").CSSProperties;
     isDataGridDisabled: boolean | undefined;
     treeRenderConfig: {
         isInitialExpanded?: boolean | undefined;
@@ -25,6 +25,7 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
             onRetry: () => void;
         };
         isSmoothLoading: boolean;
+        loadingPlaceholderClassname: string;
     };
     rowHoverProps: {
         registerRowElement: (rowId: string, el: HTMLElement) => void;
@@ -32,10 +33,16 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
         onRowEnter: (rowId: string) => void;
         onRowLeave: (rowId: string, e: PointerEvent) => void;
     };
+    isMobile: boolean;
     containerRef: import("react").RefObject<HTMLDivElement | null>;
     gridColumns: string;
     isNoData: boolean;
     headColumns: import("../types").DataGridColumns<TData>[];
+    isLoading: boolean | undefined;
+    mobileSkeletonProps: {
+        cellsCount: number;
+        rowsCount: number;
+    };
     headProps: {
         rowsCount: number;
         uncheckedRowsCount: number;
@@ -49,7 +56,6 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
         isSelectable: boolean;
         onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
     };
-    bodyClassName: string;
     sections: import("../PinnedSections/types").PinnedSection<TData>[];
     loaderProps: {
         isLoading: boolean | undefined;

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

@@ -6,11 +6,12 @@ const ConfigProvider_1 = require("../../ConfigProvider");
 const useFirstMountState_1 = require("../../useFirstMountState");
 const prop_1 = require("../../utils/prop");
 const uniqueBy_1 = require("../../utils/uniqueBy");
+const constants_1 = require("../constants");
 const enums_1 = require("../enums");
-const getGridTemplateColumns_1 = require("../utils/getGridTemplateColumns");
+const utils_1 = require("../utils");
 const hooks_1 = require("./hooks");
-const utils_1 = require("./utils");
-const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, }) => {
+const utils_2 = require("./utils");
+const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, }) => {
     const isFirstRender = (0, useFirstMountState_1.useFirstMountState)();
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isLoading || isDisabled;
@@ -38,18 +39,18 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
         isLoading,
         columns: processedColumns(),
     });
-    const { pinnedSectionsClassname, dataGridClassname, bodyClassName } = (0, hooks_1.useClassnames)({
-        isDataGridDisabled,
-        dataGridClassName: className,
-        hasPinnedColumns,
-        isNoData,
+    const { isMobile, mobileSkeletonProps } = (0, hooks_1.useDataGridMobileLogic)({
+        containerRef,
+        isLoading,
+        columns: processedColumns(),
+        rows,
     });
     const treeRenderConfig = Object.is(variant, enums_1.Variant.Subrows)
         ? { ...subrows, isInitialExpanded: true }
         : tree;
     const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
-    const gridColumns = (0, getGridTemplateColumns_1.getGridTemplateColumns)(columns);
-    const isAllowHorizontalScroll = (0, utils_1.getIsAllowHorizontalScroll)(columns);
+    const gridColumns = (0, utils_1.getGridTemplateColumns)(columns);
+    const isAllowHorizontalScroll = (0, utils_2.getIsAllowHorizontalScroll)(columns);
     const uncheckedRowsCount = (0, react_1.useMemo)(() => {
         return availableRows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
     }, [availableRows, selectedRows, keyId]);
@@ -76,7 +77,7 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
     const isHideHead = isHideHeaderIfNoData && isNoData;
     const contentStateProps = (0, react_1.useMemo)(() => {
         return {
-            isLoading: isLoading && isNoData,
+            isLoading: (isLoading && isNoData) || (isMobile && isLoading),
             isError: isError && isNoData,
             loadingTitle: 'Загрузка данных',
             errorState: {
@@ -86,11 +87,13 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
                 onRetry,
             },
             isSmoothLoading: false,
+            loadingPlaceholderClassname: constants_1.dataGridClassnames.loadingPlaceholder,
         };
     }, [isLoading, isError, isNoData, errorMsg, onRetry, imagesMap]);
+    const containerCssVars = (0, utils_1.getDataGridCssVars)(maxHeight);
     return {
-        pinnedSectionsClassname,
-        dataGridClassname,
+        dataGridClassName: className,
+        containerCssVars,
         isDataGridDisabled,
         treeRenderConfig,
         renderRows,
@@ -99,10 +102,13 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
         hasPinnedColumns,
         contentStateProps,
         rowHoverProps,
+        isMobile,
         containerRef,
         gridColumns,
         isNoData,
         headColumns: processedColumns(),
+        isLoading,
+        mobileSkeletonProps,
         headProps: {
             rowsCount: availableRows.length,
             uncheckedRowsCount,
@@ -116,7 +122,6 @@ const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedR
             isSelectable,
             onSelectRow: handleSelectRow,
         },
-        bodyClassName,
         sections,
         loaderProps: {
             isLoading: !isFirstRender && isLoading,

package/node/components/DataGrid/useLogic/utils/getIsAllowHorizontalScroll/getIsAllowHorizontalScroll.js

@@ -6,7 +6,7 @@ const getIsAllowHorizontalScroll = (columns) => {
     const isAllItemsHasMinWidth = columns.every(({ minWidth }) => Boolean(minWidth));
     if (isSomeItemsHasMinWidth && !isAllItemsHasMinWidth) {
         // biome-ignore lint/suspicious/noConsole: Ошибка для интеграторов
-        console.error('UIKIT. NewDataGrid: Необходимо задать minWidth для всех колонок');
+        console.error('UIKIT. DataGrid: Необходимо задать minWidth для всех колонок');
     }
     return isAllItemsHasMinWidth;
 };

package/node/components/DataGrid/utils/getDataGridCssVars/getDataGridCssVars.d.ts

@@ -0,0 +1,2 @@
+import type { CSSProperties } from 'react';
+export declare const getDataGridCssVars: (maxHeight?: number) => CSSProperties;

package/node/components/DataGrid/utils/getDataGridCssVars/getDataGridCssVars.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDataGridCssVars = void 0;
+const getDataGridCssVars = (maxHeight) => {
+    return maxHeight
+        ? { '--max-height': `${maxHeight}px` }
+        : {};
+};
+exports.getDataGridCssVars = getDataGridCssVars;

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

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

package/node/components/DataGrid/utils/getDataGridCssVars/index.js

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

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

@@ -1,2 +1,3 @@
 export { alignToJustifyContent } from './alignToJustifyContent';
+export { getDataGridCssVars } from './getDataGridCssVars';
 export { getGridTemplateColumns } from './getGridTemplateColumns';

package/node/components/DataGrid/utils/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getGridTemplateColumns = exports.alignToJustifyContent = void 0;
+exports.getGridTemplateColumns = exports.getDataGridCssVars = exports.alignToJustifyContent = void 0;
 var alignToJustifyContent_1 = require("./alignToJustifyContent");
 Object.defineProperty(exports, "alignToJustifyContent", { enumerable: true, get: function () { return alignToJustifyContent_1.alignToJustifyContent; } });
+var getDataGridCssVars_1 = require("./getDataGridCssVars");
+Object.defineProperty(exports, "getDataGridCssVars", { enumerable: true, get: function () { return getDataGridCssVars_1.getDataGridCssVars; } });
 var getGridTemplateColumns_1 = require("./getGridTemplateColumns");
 Object.defineProperty(exports, "getGridTemplateColumns", { enumerable: true, get: function () { return getGridTemplateColumns_1.getGridTemplateColumns; } });

package/node/components/DataGridActionCell/DataGridSecondaryActions/DataGridSecondaryActions.js

@@ -53,6 +53,6 @@ const DataGridSecondaryActions = ({ actions, isLoading, }) => {
             return ((0, react_1.createElement)(MenuItem_1.MenuItem, { ...restProps, key: name, tooltipPlacement: constants_1.TOOLTIP_PLACEMENT.secondaryActions, onClick: onActionClick(onClick) }, name));
         });
     };
-    return ((0, jsx_runtime_1.jsx)(Menu_1.Menu, { open: open, anchorEl: anchorEl, children: isLoading ? (0, jsx_runtime_1.jsx)(DataGridSecondaryActionsSkeleton_1.DataGridSecondaryActionsSkeleton, {}) : renderActions() }));
+    return ((0, jsx_runtime_1.jsx)(Menu_1.Menu, { open: open, anchorEl: anchorEl, title: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F", children: isLoading ? (0, jsx_runtime_1.jsx)(DataGridSecondaryActionsSkeleton_1.DataGridSecondaryActionsSkeleton, {}) : renderActions() }));
 };
 exports.DataGridSecondaryActions = DataGridSecondaryActions;

package/node/components/DataGridInfinite/DataGridInfinite.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_virtuoso_1 = require("react-virtuoso");
 const ConfigProvider_1 = require("../ConfigProvider");
 const ContentState_1 = require("../ContentState");
+const DataGrid_1 = require("../DataGrid");
 const constants_1 = require("../DataGrid/constants");
 const DataGridContext_1 = require("../DataGrid/DataGridContext");
 const enums_1 = require("../DataGrid/enums");
@@ -26,12 +27,12 @@ const useLogic_1 = require("./useLogic");
 const INITIAL_LEVEL = 0;
 const DataGridInfinite = (props) => {
     const { imagesMap, emptySymbol } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
-    const { isNoData, isDataGridDisabled, isStickyButtonActive, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, } = (0, useLogic_1.useLogic)(props);
-    const { columns, rows = [], selectedRows = [], sorting, maxHeight, isLoading, isDisabled, keyId, activeRowId, emptyCellValue = emptySymbol, variant = enums_1.Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, } = props;
+    const { isNoData, isDataGridDisabled, isStickyButtonActive, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, } = (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, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = constants_1.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_1.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const TableContainer = isDisabled ? styles_2.DisabledDataGridWrapper : styles_2.DataGridWrapper;
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { "$maxHeight": maxHeight, className: (0, classNames_1.classNames)(constants_1.dataGridClassnames.root, className), children: [headPreAddon, (0, jsx_runtime_1.jsxs)(TableContainer, { ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), children: [!isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, onSort: onSort, sorting: sorting, columns: columns })), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading && !isNoData, loadingTitle: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445", isError: isError && !isNoData, errorState: {
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { style: containerCssVars, className: (0, classNames_1.classNames)(constants_1.dataGridClassnames.root, className), children: [headPreAddon, (0, jsx_runtime_1.jsxs)(TableContainer, { ...(0, getInertProps_1.getInertProps)(isDataGridDisabled), children: [!isHideHead && ((0, jsx_runtime_1.jsx)(Head_1.Head, { ...headProps, onSort: onSort, sorting: sorting, columns: columns })), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading && !isNoData, loadingTitle: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445", isError: isError && !isNoData, loadingContent: isMobile && (0, jsx_runtime_1.jsx)(DataGrid_1.MobileSkeleton, { ...mobileSkeletonProps }), errorState: {
                                 imgAlt: 'Что-то пошло не так',
                                 errorList: [errorMsg || ''],
                                 imgSrc: imagesMap.defaultErrorImgSrc,
@@ -42,7 +43,7 @@ const DataGridInfinite = (props) => {
                                     List: List_1.List,
                                     Item: ({ children, item, ...itemProps }) => {
                                         const { children: nestedChildren, options, ...row } = item;
-                                        return ((0, jsx_runtime_1.jsx)(Row_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { ...rowProps, ...itemProps, row: row, columns: columns, selectedRows: selectedRows, options: options, keyId: keyId, variant: variant, activeRowId: activeRowId, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, emptyCellValue: emptyCellValue, onRowClick: onRowClick }) }));
+                                        return ((0, jsx_runtime_1.jsx)(Row_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { ...rowProps, ...itemProps, row: row, columns: columns, selectedRows: selectedRows, options: options, keyId: keyId, variant: variant, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, emptyCellValue: emptyCellValue, onRowClick: onRowClick }) }));
                                     },
                                     EmptyPlaceholder: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: noDataPlaceholder || (0, jsx_runtime_1.jsx)(NoData_1.NoData, {}) }),
                                     Footer: () => {