@astral/ui 4.55.4 → 4.57.0

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

@@ -4,8 +4,10 @@ import { DataGridContext } from '../../DataGridContext';
 import { Variant } from '../../enums';
 import { DISABLE_ROW_ATTR } from '../constants';
 import { RowContext } from '../RowContext';
+import { useMobileLogic } from './hooks';
 import { mergeColumnsOptions } from './utils';
-export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, activeRowId, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, }) => {
+export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant, options, isInitialExpanded = false, expandedLevel, isSelectable, selectedRows, onSelectRow, onRowClick, isVisibleCollapseButton, registerRowElement, unregisterRowElement, style, }) => {
+    const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = useMobileLogic();
     const isDefaultExpanded = isInitialExpanded && level <= expandedLevel - 1 && nestedChildren?.length;
     const { checkIsOpened, toggleOpenItems } = useContext(DataGridContext);
     const { isDisabled, disabledReason } = useContext(RowContext);
@@ -25,6 +27,16 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
     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 redirectToLink(href, target);
+        }
+        onRowClick?.(row);
+    };
     useEffect(() => {
         // Проверка на isOpen необходима для infinite версии с виртуализацией, когда происходит размонтировании компонента
         if (isDefaultExpanded && !isOpen) {
@@ -57,17 +69,16 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
             setVisibleTooltip(false);
         }
     };
-    const handleRowClick = () => {
-        if (disabled) {
-            return undefined;
-        }
-        if (href) {
-            return redirectToLink(href, target);
-        }
-        onRowClick?.(row);
-    };
     const isRenderCollapseButton = Boolean(nestedChildren?.length) && isVisibleCollapseButton;
+    const rowStyles = useMemo(() => ({
+        '--level': level,
+        ...style,
+    }), [level, style]);
+    const isHovered = Boolean(!disabled && (onRowClick || href));
+    const disabledReasonText = externalDisabledReason || disabledReason;
     return {
+        disabledReasonText,
+        rowStyles,
         isOpen,
         isShowConnector,
         childrenColumns,
@@ -76,15 +87,19 @@ export const useLogic = ({ keyId, columns, row, nestedChildren, level, variant,
         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/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/components/DataGrid/constants.js

@@ -3,9 +3,11 @@ export const MIN_ROW_HEIGHT = 44;
 export const ROOT_ACTION_CELL_WIDTH = 32;
 export const TREE_LINE_WIDTH = ROOT_ACTION_CELL_WIDTH / 2;
 export const MIN_DISPLAY_ROWS_BY_DEFAULT = 10;
+export const DEFAULT_MOBILE_SKELETON_ROWS_COUNT = 5;
 export const EXPANDED_LEVEL_BY_DEFAULT = 1;
 export const INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = 2;
 export const dataGridClassnames = {
+    loadingPlaceholder: createUIKitClassname('data-grid__loading-placeholder'),
     header: createUIKitClassname('data-grid__header'),
     root: createUIKitClassname('data-grid'),
     body: createUIKitClassname('data-grid__body'),
@@ -17,4 +19,6 @@ export const dataGridClassnames = {
     leftPinnedSection: createUIKitClassname('data-grid__left-pinned-section'),
     rightPinnedSection: createUIKitClassname('data-grid__right-pinned-section'),
     overflowed: createUIKitClassname('data-grid_overflowed'),
+    wrapper: createUIKitClassname('data-grid__wrapper'),
+    isAllowHorizontalScroll: createUIKitClassname('data-grid_is-allow-horizontal-scroll'),
 };

package/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/components/DataGrid/index.js

@@ -1,2 +1,3 @@
 export { DataGrid } from './DataGrid';
 export { dataGridClassnames } from './constants';
+export { MobileSkeleton } from './MobileSkeleton';

package/components/DataGrid/styles.d.ts

@@ -2,23 +2,14 @@
 export declare const Container: import("../styled").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("../styled").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("../styled").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/components/DataGrid/styles.js

@@ -1,17 +1,25 @@
 import { styled } from '../styled';
 import { dataGridClassnames } from './constants';
-export const Container = styled('div', {
-    shouldForwardProp: (prop) => !['$maxHeight', '$isAllowHorizontalScroll'].includes(prop),
-}) `
+export const Container = 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);
+
+  &.${dataGridClassnames.isAllowHorizontalScroll} {
+    overflow: auto hidden;
+
+    & .${dataGridClassnames.wrapper} {
+      overflow: auto hidden;
+    }
+  }
 
   &.${dataGridClassnames.dataGridHasPinnedSections} {
     overflow: hidden;
@@ -28,21 +36,44 @@ export const Container = styled('div', {
       }
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* Нужен для того что бы scroll доходил до вверха страницы на мобильных устройствах после пагинации */
+    scroll-margin-top: ${({ theme }) => theme.spacing(8)};
+
+    overflow: initial;
+
+    & .${dataGridClassnames.loadingPlaceholder} {
+      justify-content: flex-start;
+    }
+
+    &.${dataGridClassnames.dataGridHasPinnedSections} {
+      overflow: initial;
+    }
+
+    &.${dataGridClassnames.isAllowHorizontalScroll} {
+      overflow: initial;
+
+      & .${dataGridClassnames.wrapper} {
+        overflow: initial;
+      }
+    }
+  }
 `;
-export const DataGridWrapper = styled('div', {
-    shouldForwardProp: (prop) => !['$isAllowHorizontalScroll'].includes(prop),
-}) `
+export const DataGridWrapper = 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;
+  }
 `;
-export const DisabledDataGridWrapper = styled(DataGridWrapper, {
-    shouldForwardProp: (prop) => !['$isAllowHorizontalScroll'].includes(prop),
-}) `
+export const DisabledDataGridWrapper = styled(DataGridWrapper) `
   pointer-events: none;
 
   background: ${({ theme }) => theme.palette.background.element};

package/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/components/DataGrid/useLogic/hooks/index.d.ts

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

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

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

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

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

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

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

package/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/components/DataGrid/useLogic/hooks/useDataGridMobileLogic/useDataGridMobileLogic.js

@@ -0,0 +1,32 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, } from 'react';
+import { useViewportType } from '../../../../useViewportType';
+import { DEFAULT_MOBILE_SKELETON_ROWS_COUNT } from '../../../constants';
+export const useDataGridMobileLogic = ({ containerRef, isLoading, columns, rows, }) => {
+    const { isMobile } = useViewportType();
+    const firstLoadedRowsCountRef = useRef(null);
+    const mobileSkeletonCellsCount = useMemo(() => columns?.filter((column) => !column.isHideOnMobile).length ?? 0, [columns]);
+    useEffect(() => {
+        if (!isLoading &&
+            rows &&
+            rows.length > 0 &&
+            firstLoadedRowsCountRef.current === null) {
+            firstLoadedRowsCountRef.current = rows.length;
+        }
+    }, [rows, isLoading]);
+    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 ?? DEFAULT_MOBILE_SKELETON_ROWS_COUNT,
+    };
+    return { isMobile, mobileSkeletonProps };
+};

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

@@ -1,12 +1,17 @@
 import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import { useViewportType } from '../../../../useViewportType';
 import { dataGridClassnames } from '../../../constants';
 import { useRowHover } from '../../../hooks/useRowHover';
 import { getColumnSections } from '../../utils/getColumnSections';
 import { syncRowsHeight } from '../../utils/syncRowsHeight';
 export const usePinnedColumns = ({ isLoading, columns, }) => {
     const containerRef = useRef(null);
+    const { isMobile } = useViewportType();
     const hasPinnedColumns = useMemo(() => columns.some((column) => column.pinned), [columns]);
-    const { rowsMapRef, ...rowHoverProps } = useRowHover({ hasPinnedColumns });
+    const isRowHoverSyncEnabled = hasPinnedColumns && !isMobile;
+    const { rowsMapRef, ...rowHoverProps } = useRowHover({
+        hasPinnedColumns: isRowHoverSyncEnabled,
+    });
     const isScrollStateSupported = CSS.supports('container-type', 'scroll-state');
     const checkOverflow = useCallback((element) => {
         if (element) {
@@ -16,7 +21,10 @@ export const usePinnedColumns = ({ isLoading, columns, }) => {
     }, []);
     const { sections } = useMemo(() => getColumnSections(columns), [columns]);
     useLayoutEffect(() => {
-        if (isLoading || !hasPinnedColumns || typeof window === 'undefined') {
+        if (isLoading ||
+            !hasPinnedColumns ||
+            isMobile ||
+            typeof window === 'undefined') {
             return;
         }
         const resizeObserver = new ResizeObserver(() => {
@@ -38,6 +46,6 @@ export const usePinnedColumns = ({ isLoading, columns, }) => {
         return () => {
             resizeObserver.disconnect();
         };
-    }, [hasPinnedColumns, isLoading]);
+    }, [hasPinnedColumns, isLoading, isMobile]);
     return { containerRef, rowHoverProps, sections, hasPinnedColumns };
 };

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

@@ -3,11 +3,12 @@ import { ConfigContext } from '../../ConfigProvider';
 import { useFirstMountState } from '../../useFirstMountState';
 import { prop } from '../../utils/prop';
 import { uniqueBy } from '../../utils/uniqueBy';
+import { dataGridClassnames } from '../constants';
 import { Variant } from '../enums';
-import { getGridTemplateColumns } from '../utils/getGridTemplateColumns';
-import { useClassnames, usePinnedColumns } from './hooks';
+import { getDataGridCssVars, getGridTemplateColumns } from '../utils';
+import { useDataGridMobileLogic, usePinnedColumns } from './hooks';
 import { getIsAllowHorizontalScroll } from './utils';
-export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, }) => {
+export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, maxHeight, }) => {
     const isFirstRender = useFirstMountState();
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isLoading || isDisabled;
@@ -35,11 +36,11 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
         isLoading,
         columns: processedColumns(),
     });
-    const { pinnedSectionsClassname, dataGridClassname, bodyClassName } = useClassnames({
-        isDataGridDisabled,
-        dataGridClassName: className,
-        hasPinnedColumns,
-        isNoData,
+    const { isMobile, mobileSkeletonProps } = useDataGridMobileLogic({
+        containerRef,
+        isLoading,
+        columns: processedColumns(),
+        rows,
     });
     const treeRenderConfig = Object.is(variant, Variant.Subrows)
         ? { ...subrows, isInitialExpanded: true }
@@ -73,7 +74,7 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
     const isHideHead = isHideHeaderIfNoData && isNoData;
     const contentStateProps = useMemo(() => {
         return {
-            isLoading: isLoading && isNoData,
+            isLoading: (isLoading && isNoData) || (isMobile && isLoading),
             isError: isError && isNoData,
             loadingTitle: 'Загрузка данных',
             errorState: {
@@ -83,11 +84,13 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
                 onRetry,
             },
             isSmoothLoading: false,
+            loadingPlaceholderClassname: dataGridClassnames.loadingPlaceholder,
         };
     }, [isLoading, isError, isNoData, errorMsg, onRetry, imagesMap]);
+    const containerCssVars = getDataGridCssVars(maxHeight);
     return {
-        pinnedSectionsClassname,
-        dataGridClassname,
+        dataGridClassName: className,
+        containerCssVars,
         isDataGridDisabled,
         treeRenderConfig,
         renderRows,
@@ -96,10 +99,13 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
         hasPinnedColumns,
         contentStateProps,
         rowHoverProps,
+        isMobile,
         containerRef,
         gridColumns,
         isNoData,
         headColumns: processedColumns(),
+        isLoading,
+        mobileSkeletonProps,
         headProps: {
             rowsCount: availableRows.length,
             uncheckedRowsCount,
@@ -113,7 +119,6 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
             isSelectable,
             onSelectRow: handleSelectRow,
         },
-        bodyClassName,
         sections,
         loaderProps: {
             isLoading: !isFirstRender && isLoading,

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

@@ -3,7 +3,7 @@ export 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/components/DataGrid/utils/getDataGridCssVars/getDataGridCssVars.d.ts

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

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

@@ -0,0 +1,5 @@
+export const getDataGridCssVars = (maxHeight) => {
+    return maxHeight
+        ? { '--max-height': `${maxHeight}px` }
+        : {};
+};

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

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

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

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

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

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

package/components/DataGrid/utils/index.js

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

package/components/DataGridActionCell/DataGridSecondaryActions/DataGridSecondaryActions.js

@@ -50,5 +50,5 @@ export const DataGridSecondaryActions = ({ actions, isLoading, }) => {
             return (_createElement(MenuItem, { ...restProps, key: name, tooltipPlacement: TOOLTIP_PLACEMENT.secondaryActions, onClick: onActionClick(onClick) }, name));
         });
     };
-    return (_jsx(Menu, { open: open, anchorEl: anchorEl, children: isLoading ? _jsx(DataGridSecondaryActionsSkeleton, {}) : renderActions() }));
+    return (_jsx(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 ? _jsx(DataGridSecondaryActionsSkeleton, {}) : renderActions() }));
 };

package/components/DataGridInfinite/DataGridInfinite.js

@@ -3,6 +3,7 @@ import { useContext } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import { ConfigContext } from '../ConfigProvider';
 import { ContentState } from '../ContentState';
+import { MobileSkeleton } from '../DataGrid';
 import { dataGridClassnames, EXPANDED_LEVEL_BY_DEFAULT, INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } from '../DataGrid/constants';
 import { DataGridContextProvider } from '../DataGrid/DataGridContext';
 import { Variant } from '../DataGrid/enums';
@@ -23,12 +24,12 @@ import { useLogic } from './useLogic';
 const INITIAL_LEVEL = 0;
 export const DataGridInfinite = (props) => {
     const { imagesMap, emptySymbol } = useContext(ConfigContext);
-    const { isNoData, isDataGridDisabled, isStickyButtonActive, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, } = useLogic(props);
-    const { columns, rows = [], selectedRows = [], sorting, maxHeight, isLoading, isDisabled, keyId, activeRowId, emptyCellValue = emptySymbol, variant = 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, } = useLogic(props);
+    const { columns, rows = [], selectedRows = [], sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const TableContainer = isDisabled ? DisabledDataGridWrapper : DataGridWrapper;
-    return (_jsx(DataGridContextProvider, { children: _jsxs(Container, { "$maxHeight": maxHeight, className: classNames(dataGridClassnames.root, className), children: [headPreAddon, _jsxs(TableContainer, { ...getInertProps(isDataGridDisabled), children: [!isHideHead && (_jsx(Head, { ...headProps, onSort: onSort, sorting: sorting, columns: columns })), _jsx(ContentState, { isLoading: isLoading && !isNoData, loadingTitle: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445", isError: isError && !isNoData, errorState: {
+    return (_jsx(DataGridContextProvider, { children: _jsxs(Container, { style: containerCssVars, className: classNames(dataGridClassnames.root, className), children: [headPreAddon, _jsxs(TableContainer, { ...getInertProps(isDataGridDisabled), children: [!isHideHead && (_jsx(Head, { ...headProps, onSort: onSort, sorting: sorting, columns: columns })), _jsx(ContentState, { isLoading: isLoading && !isNoData, loadingTitle: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445", isError: isError && !isNoData, loadingContent: isMobile && _jsx(MobileSkeleton, { ...mobileSkeletonProps }), errorState: {
                                 imgAlt: 'Что-то пошло не так',
                                 errorList: [errorMsg || ''],
                                 imgSrc: imagesMap.defaultErrorImgSrc,
@@ -39,7 +40,7 @@ export const DataGridInfinite = (props) => {
                                     List,
                                     Item: ({ children, item, ...itemProps }) => {
                                         const { children: nestedChildren, options, ...row } = item;
-                                        return (_jsx(RowContextProvider, { children: _jsx(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 (_jsx(RowContextProvider, { children: _jsx(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: () => _jsx(_Fragment, { children: noDataPlaceholder || _jsx(NoData, {}) }),
                                     Footer: () => {

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

@@ -4,8 +4,14 @@ 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, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, }: 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, }: UseLogicParams<TData, TSortField>) => {
+    containerCssVars: import("react").CSSProperties;
+    mobileSkeletonProps: {
+        cellsCount: number;
+        rowsCount: number;
+    };
     isNoData: boolean;
+    isMobile: boolean;
     isDataGridDisabled: boolean | undefined;
     isStickyButtonActive: boolean;
     treeRenderConfig: {

package/components/DataGridInfinite/useLogic/useLogic.js

@@ -1,12 +1,15 @@
 import { useCallback, useMemo, useRef, useState, } from 'react';
 import { Variant } from '../../DataGrid/enums';
-import { getGridTemplateColumns } from '../../DataGrid/utils';
+import { useDataGridMobileLogic } from '../../DataGrid/useLogic/hooks';
+import { getDataGridCssVars, getGridTemplateColumns, } from '../../DataGrid/utils';
 import { useToggle } from '../../useToggle';
+import { useViewportType } from '../../useViewportType';
 import { prop } from '../../utils/prop';
 import { uniqueBy } from '../../utils/uniqueBy';
 import { VIRTUOSO_CONTAINER_ID, VIRTUOSO_LIST_ID } from '../constants';
-export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, }) => {
+export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, }) => {
     const virtuoso = useRef(null);
+    const { isMobile } = useViewportType();
     const [hasVerticalScroll, setHasVerticalScroll] = useState(false);
     const [isStickyButtonActive, showStickyButton, hideStickyButton] = useToggle();
     const isNoData = Boolean(rows?.length);
@@ -59,8 +62,15 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
         }
     };
     const isHideHead = isHideHeaderIfNoData && rows.length === 0;
+    const { mobileSkeletonProps } = useDataGridMobileLogic({
+        columns,
+    });
+    const containerCssVars = getDataGridCssVars(maxHeight);
     return {
+        containerCssVars,
+        mobileSkeletonProps,
         isNoData,
+        isMobile,
         isDataGridDisabled,
         isStickyButtonActive,
         treeRenderConfig,

package/components/DateRangePicker/styles.js

@@ -29,5 +29,5 @@ export const PickerSplitter = styled.div `
   margin: ${({ theme }) => theme.spacing(-3, 4)};
 
   border-left: 1px solid
-    ${({ theme }) => theme.palette.grey[300]};
+    ${({ theme }) => theme.palette.components.border.default};
 `;