@astral/ui 4.74.0 → 4.75.0

package/components/DataGridCollapsibleRow/styles.js

@@ -0,0 +1,99 @@
+import { ChevronROutlineMd } from '../../icons/ChevronROutlineMd';
+import { buttonClassnames } from '../Button';
+import { ROOT_ACTION_CELL_WIDTH } from '../DataGrid/constants';
+import { dataGridRowBaseClassnames, RowBase } from '../DataGrid/RowBase';
+import { IconButton } from '../IconButton';
+import { styled } from '../styled';
+import { collapsibleRowClassnames } from './constants';
+export const CollapseContainer = styled.div `
+  width: 100%;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+export const CollapseContent = styled.div `
+  padding: ${({ theme }) => theme.spacing(2)};
+
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+  border-radius: ${({ theme }) => theme.shape.large};
+`;
+export const ChildrenWrapper = styled.div `
+  padding: ${({ theme }) => theme.spacing(0, 3)};
+
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  border-radius: ${({ theme }) => theme.shape.medium};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+export const MobileExpandButtonWrapper = styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+
+    & .${buttonClassnames.root} {
+      justify-content: flex-start;
+
+      width: 100%;
+    }
+  }
+`;
+export const CollapseButton = styled(IconButton) `
+  width: 24px;
+  height: 24px;
+
+  color: inherit;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.grey[300]};
+  }
+`;
+export const CollapseCell = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${ROOT_ACTION_CELL_WIDTH}px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+export const ChevronIcon = styled(ChevronROutlineMd) `
+  transform: rotateZ(0deg);
+
+  transition: ${({ theme }) => theme.transitions.create('transform', {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.short,
+})};
+
+  &.${collapsibleRowClassnames.chevronIconActive} {
+    transform: rotateZ(90deg);
+  }
+`;
+export const StyledRowBase = styled(RowBase) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    &.${dataGridRowBaseClassnames.mobileVariantCards} {
+      padding: 0;
+
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+      & .${dataGridRowBaseClassnames.contentWrapper} {
+        padding: ${({ theme }) => theme.spacing(5, 4, 4)};
+
+        background-color: ${({ theme }) => theme.palette.background.default};
+        border-radius: ${({ theme }) => theme.shape.medium};
+        outline: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      }
+
+      & .${collapsibleRowClassnames.collapseButton} {
+        padding-left: ${({ theme }) => theme.spacing(4)};
+      }
+
+      & .${collapsibleRowClassnames.collapsibleContent} {
+        background-color: transparent;
+      }
+    }
+  }
+`;

package/components/DataGridCollapsibleRow/types.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export type DataGridCollapsibleRowProps = {
+    /**
+     * Контент, который будет отображаться при развернутом состоянии
+     */
+    children: ReactNode;
+    /**
+     * Функция, которая будет вызываться при развернутом состоянии
+     */
+    onOpen?: () => void;
+    /**
+     * Функция, которая будет вызываться при свернутом состоянии
+     */
+    onClose?: () => void;
+    /**
+     * Флаг начального раскрытия строки при монтировании
+     */
+    initialOpen?: boolean;
+};

package/components/DataGridCollapsibleRow/types.js

@@ -0,0 +1 @@
+export {};

package/components/DataGridCollapsibleRow/useLogic/index.js

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

package/components/DataGridCollapsibleRow/useLogic/useLogic.d.ts

@@ -0,0 +1,29 @@
+import { type SyntheticEvent } from 'react';
+import type { DataGridCollapsibleRowProps } from '../types';
+type UseLogicParams = Pick<DataGridCollapsibleRowProps, 'initialOpen' | 'onOpen' | 'onClose'>;
+export declare const useLogic: ({ initialOpen, onOpen, onClose }: UseLogicParams) => {
+    handleToggle: (event?: SyntheticEvent) => void;
+    handleRowClick: (clickedRow: Record<string, unknown>) => void;
+    isOpen: boolean | undefined;
+    itemProps: object | undefined;
+    rowBaseProps: {
+        isSelected: boolean | undefined;
+        row: Record<string, unknown>;
+        keyId: unknown;
+        columns: import("../..").DataGridColumns<Record<string, unknown>>[];
+        rowId: string;
+        isDisabled: boolean;
+        disabledReason: string | undefined;
+        onSelectRow: (row: Record<string, unknown>) => (event: import("react").ChangeEvent<HTMLInputElement, Element>) => void;
+        onRowEnter: ((rowId: string) => void) | undefined;
+        onRowLeave: ((rowId: string, event: PointerEvent) => void) | undefined;
+        registerRowElement: ((rowId: string, el: HTMLElement) => void) | undefined;
+        unregisterRowElement: ((rowId: string, el: HTMLElement) => void) | undefined;
+        isSelectable: boolean | undefined;
+        emptyCellValue: import("react").ReactNode;
+        gridColumns: string;
+        activeRowId: string | undefined;
+        mobileDisplayVariant: "list" | "cards" | undefined;
+    };
+};
+export {};

package/components/DataGridCollapsibleRow/useLogic/useLogic.js

@@ -0,0 +1,62 @@
+import { useCallback, useContext, useState } from 'react';
+import { DataGridContext } from '../../DataGrid/DataGridContext';
+import { DataGridStorageContext } from '../../DataGrid/DataGridStorageContext';
+import { RowContext } from '../../DataGrid/Row/RowContext';
+import { STORAGE_KEY_PREFIX } from '../constants';
+export const useLogic = ({ initialOpen, onOpen, onClose }) => {
+    const { keyId, columns, gridColumns, activeRowId, emptyCellValue, onRowClick, mobileDisplayVariant, } = useContext(DataGridContext);
+    const { row, onSelectRow, isDisabled, disabledReason, onRowEnter, onRowLeave, registerRowElement, unregisterRowElement, isSelectable, itemProps, isSelected, } = useContext(RowContext);
+    const rowId = row[keyId];
+    /**
+     * Используется локальное хранилище DataGridStorageContext. Для сохранения состояния раскрытия строки на время жизни DataGrid.
+     */
+    const { getItem, setItem } = useContext(DataGridStorageContext);
+    const storageKey = `${STORAGE_KEY_PREFIX}:${rowId}`;
+    const storedValue = getItem(storageKey);
+    const [isOpen, setIsOpen] = useState(storedValue !== undefined ? storedValue : initialOpen);
+    const handleToggle = useCallback((event) => {
+        event?.stopPropagation();
+        if (isOpen) {
+            setIsOpen(false);
+            setItem(storageKey, false);
+            onClose?.();
+        }
+        else {
+            setIsOpen(true);
+            setItem(storageKey, true);
+            onOpen?.();
+        }
+    }, [isOpen, onOpen, onClose, storageKey, setItem]);
+    const handleRowClick = useCallback((clickedRow) => {
+        if (onRowClick) {
+            onRowClick(clickedRow);
+            return;
+        }
+        handleToggle();
+    }, [onRowClick, handleToggle]);
+    return {
+        handleToggle,
+        handleRowClick,
+        isOpen,
+        itemProps,
+        rowBaseProps: {
+            isSelected,
+            row,
+            keyId,
+            columns,
+            rowId,
+            isDisabled,
+            disabledReason,
+            onSelectRow,
+            onRowEnter,
+            onRowLeave,
+            registerRowElement,
+            unregisterRowElement,
+            isSelectable,
+            emptyCellValue,
+            gridColumns,
+            activeRowId,
+            mobileDisplayVariant,
+        },
+    };
+};

package/components/DataGridInfinite/DataGridInfinite.js

@@ -3,25 +3,25 @@ import { useContext } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import { ConfigContext } from '../ConfigProvider';
 import { ContentState } from '../ContentState';
+import { selfContainedClassname } from '../constants';
 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';
 import { Head } from '../DataGrid/Head';
-import { Row, RowContextProvider } from '../DataGrid/Row';
-import { Container } from '../DataGrid/styles';
 import { Loader } from '../Loader';
 import { classNames } from '../utils/classNames';
 import { cva } from '../utils/cva';
 import { getInertProps } from '../utils/getInertProps';
 import { dataGridInfiniteClassnames, OVERSCAN_COUNT } from './constants';
+import { DataGridInfiniteContextProvider } from './DataGridInfiniteContext';
 import { EndData } from './EndData';
 import { ErrorMessage } from './ErrorMessage';
 import { List } from './List';
 import { NoData } from './NoData';
-import { Backdrop, DataGridWrapper, DisabledDataGridWrapper, FooterRow, StyledScrollToTopButton, } from './styles';
+import { Row } from './Row';
+import { Backdrop, DataGridWrapper, DisabledDataGridWrapper, FooterRow, StyledContainer, StyledScrollToTopButton, } from './styles';
 import { useLogic } from './useLogic';
-const INITIAL_LEVEL = 0;
 const dataGridInfiniteCva = cva(dataGridClassnames.root, {
     variants: {
         hasGroupedColumns: {
@@ -31,34 +31,44 @@ const dataGridInfiniteCva = cva(dataGridClassnames.root, {
             full: dataGridClassnames.gridViewFull,
             standard: dataGridClassnames.gridViewStandard,
         },
+        mobileDisplayVariant: {
+            cards: dataGridClassnames.mobileVariantCards,
+            list: dataGridClassnames.mobileVariantList,
+        },
+        isSelfContained: {
+            true: selfContainedClassname,
+        },
     },
 });
 export const DataGridInfinite = (props) => {
     const { imagesMap, emptySymbol } = useContext(ConfigContext);
-    const { isNoData, isDataGridDisabled, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, flattenColumns, hasGroupedColumns, gridViewMode, } = useLogic(props);
-    const { columns, rows = [], selectedRows = [], sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, activeRowId, } = props;
+    const { isNoData, isDataGridDisabled, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, hasGroupedColumns, gridViewMode, gridColumns, handleSelectRow, mobileDisplayVariant, isSelfContained, } = useLogic(props);
+    const { columns, rows = [], selectedRows = [], sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, activeRowId, isTabularNums, renderRow, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
+    const { isSelectable } = rowProps;
     const TableContainer = isDisabled ? DisabledDataGridWrapper : DataGridWrapper;
-    return (_jsx(DataGridContextProvider, { children: _jsxs(Container, { style: containerCssVars, className: classNames(dataGridInfiniteCva({ hasGroupedColumns, gridViewMode }), 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,
-                                onRetry,
-                            }, children: _jsx(Virtuoso, { ...virtuosoProps, style: { height: '100%' }, overscan: OVERSCAN_COUNT, data: rows, components: {
-                                    // biome-ignore lint/suspicious/noTsIgnore: Требует HTMLDivElement, а для элемента списка используем HTMLUListElement (https://github.com/petyosi/react-virtuoso/issues/864)
-                                    // @ts-ignore
-                                    List,
-                                    Item: ({ children, item, ...itemProps }) => {
-                                        const { children: nestedChildren, options, ...row } = item;
-                                        return (_jsx(RowContextProvider, { children: _jsx(Row, { ...rowProps, ...itemProps, row: row, columns: flattenColumns, selectedRows: selectedRows, options: options, keyId: keyId, variant: variant, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, activeRowId: activeRowId, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, emptyCellValue: emptyCellValue, onRowClick: onRowClick }) }));
-                                    },
-                                    EmptyPlaceholder: () => _jsx(_Fragment, { children: noDataPlaceholder || _jsx(NoData, {}) }),
-                                    Footer: () => {
-                                        if (!isLoading && !isError && !isEndReached) {
-                                            return null;
-                                        }
-                                        return (_jsxs(FooterRow, { children: [isLoading && _jsx(Loader, {}), isError && _jsx(ErrorMessage, { onRetry: onRetry }), isEndReached && (_jsx(EndData, { endOfScrollMsg: endOfScrollMsg }))] }));
-                                    },
-                                } }) }), _jsx(StyledScrollToTopButton, { ...scrollToTopButtonProps, className: dataGridInfiniteClassnames.scrollToTopButton }), isDisabled && _jsx(Backdrop, {})] })] }) }));
+    return (_jsx(DataGridInfiniteContextProvider, { renderRow: renderRow, onSelectRow: handleSelectRow, variant: variant, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, isSelectable: isSelectable, selectedRows: selectedRows, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, children: _jsx(DataGridContextProvider, { gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, columns: columns, keyId: keyId, isTabularNums: isTabularNums, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: _jsxs(StyledContainer, { style: containerCssVars, className: classNames(dataGridInfiniteCva({
+                    hasGroupedColumns,
+                    gridViewMode,
+                    mobileDisplayVariant,
+                    isSelfContained,
+                }), 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,
+                                    onRetry,
+                                }, children: _jsx(Virtuoso, { ...virtuosoProps, style: { height: '100%' }, overscan: OVERSCAN_COUNT, data: rows, components: {
+                                        // biome-ignore lint/suspicious/noTsIgnore: Требует HTMLDivElement, а для элемента списка используем HTMLUListElement (https://github.com/petyosi/react-virtuoso/issues/864)
+                                        // @ts-ignore
+                                        List,
+                                        Item: Row,
+                                        EmptyPlaceholder: () => (_jsx(_Fragment, { children: noDataPlaceholder || _jsx(NoData, {}) })),
+                                        Footer: () => {
+                                            if (!isLoading && !isError && !isEndReached) {
+                                                return null;
+                                            }
+                                            return (_jsxs(FooterRow, { children: [isLoading && _jsx(Loader, {}), isError && _jsx(ErrorMessage, { onRetry: onRetry }), isEndReached && (_jsx(EndData, { endOfScrollMsg: endOfScrollMsg }))] }));
+                                        },
+                                    } }) }), _jsx(StyledScrollToTopButton, { ...scrollToTopButtonProps, className: dataGridInfiniteClassnames.scrollToTopButton }), isDisabled && _jsx(Backdrop, {})] })] }) }) }));
 };

package/components/DataGridInfinite/DataGridInfiniteContext/DataGridInfiniteContext.d.ts

@@ -0,0 +1,23 @@
+import { type ChangeEvent, type ReactNode } from 'react';
+export type DataGridInfiniteContextProps = {
+    renderRow: (row: Record<string, unknown>, index: number) => ReactNode;
+    onSelectRow: (row: Record<string, unknown>) => (event: ChangeEvent<HTMLInputElement>) => void;
+    variant: 'tree' | 'subrows';
+    isInitialExpanded?: boolean;
+    expandedLevel?: number;
+    initialVisibleChildrenCount?: number;
+    moreButtonColumnPosition?: number;
+    isVisibleCollapseButton?: boolean;
+    isSelectable?: boolean;
+    selectedRows?: Record<string, unknown>[];
+};
+/**
+ * Контекст общих параметров для компонента `Item` внутри `DataGridInfinite`.
+ *
+ * `Item` передаётся в `Virtuoso` напрямую, без inline-обёртки: замыкание на
+ * каждом ре-рендере `DataGridInfinite` давало бы новую ссылку на компонент и
+ * лишние перерисовки виртуализированного списка.
+ *
+ * Поскольку `Virtuoso` сам управляет параметрами `Item`, общие настройки передаются через контекст.
+ */
+export declare const DataGridInfiniteContext: import("react").Context<DataGridInfiniteContextProps>;

package/components/DataGridInfinite/DataGridInfiniteContext/DataGridInfiniteContext.js

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+/**
+ * Контекст общих параметров для компонента `Item` внутри `DataGridInfinite`.
+ *
+ * `Item` передаётся в `Virtuoso` напрямую, без inline-обёртки: замыкание на
+ * каждом ре-рендере `DataGridInfinite` давало бы новую ссылку на компонент и
+ * лишние перерисовки виртуализированного списка.
+ *
+ * Поскольку `Virtuoso` сам управляет параметрами `Item`, общие настройки передаются через контекст.
+ */
+export const DataGridInfiniteContext = createContext({
+    renderRow: () => null,
+    onSelectRow: () => () => { },
+    variant: 'tree',
+    isInitialExpanded: false,
+    expandedLevel: 0,
+    initialVisibleChildrenCount: 0,
+    moreButtonColumnPosition: 0,
+    isVisibleCollapseButton: true,
+    selectedRows: [],
+});

package/components/DataGridInfinite/DataGridInfiniteContext/DataGridInfiniteContextProvider/DataGridInfiniteContextProvider.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import { type DataGridInfiniteContextProps } from '../DataGridInfiniteContext';
+type DataGridInfiniteContextProviderProps = DataGridInfiniteContextProps & {
+    children: ReactNode;
+};
+export declare const DataGridInfiniteContextProvider: ({ children, ...props }: DataGridInfiniteContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/DataGridInfinite/DataGridInfiniteContext/DataGridInfiniteContextProvider/DataGridInfiniteContextProvider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DataGridInfiniteContext, } from '../DataGridInfiniteContext';
+export const DataGridInfiniteContextProvider = ({ children, ...props }) => {
+    return (_jsx(DataGridInfiniteContext.Provider, { value: props, children: children }));
+};

package/components/DataGridInfinite/DataGridInfiniteContext/DataGridInfiniteContextProvider/index.d.ts

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

package/components/DataGridInfinite/DataGridInfiniteContext/DataGridInfiniteContextProvider/index.js

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

package/components/DataGridInfinite/DataGridInfiniteContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataGridInfiniteContext';
+export * from './DataGridInfiniteContextProvider';

package/components/DataGridInfinite/DataGridInfiniteContext/index.js

@@ -0,0 +1,2 @@
+export * from './DataGridInfiniteContext';
+export * from './DataGridInfiniteContextProvider';

package/components/DataGridInfinite/List/List.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { VIRTUOSO_LIST_ID } from '../constants';
+import { dataGridInfiniteListClassnames } from './constants';
 import { Wrapper } from './styles';
-export const List = forwardRef(({ children, ...listProps }, ref) => (_jsx(Wrapper, { id: VIRTUOSO_LIST_ID, ref: ref, ...listProps, children: children })));
+export const List = forwardRef(({ children, ...listProps }, ref) => (_jsx(Wrapper, { id: VIRTUOSO_LIST_ID, ref: ref, ...listProps, className: dataGridInfiniteListClassnames.root, children: children })));

package/components/DataGridInfinite/List/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const dataGridInfiniteListClassnames: {
+    root: string;
+};

package/components/DataGridInfinite/List/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const dataGridInfiniteListClassnames = {
+    root: createUIKitClassname('data-grid-infinite-body'),
+};

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

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

package/components/DataGridInfinite/List/index.js

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

package/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/components/DataGridInfinite/Row/Row.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CustomRowWrapper } from '../../DataGrid/CustomRowWrapper';
+import { Row as RowComponent } from '../../DataGrid/Row';
+import { RowContextProvider } from '../../DataGrid/Row/RowContext';
+import { useLogic } from './useLogic';
+const INITIAL_LEVEL = 0;
+export 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, } = useLogic(props);
+    return (_jsx(RowContextProvider, { row: item, itemProps: memoizedItemProps, onSelectRow: onSelectRow, isSelectable: isSelectable, isSelected: isSelected, children: renderRow ? (_jsx(CustomRowWrapper, { index: memoizedItemProps['data-item-index'], renderRow: renderRow, row: item })) : (_jsx(RowComponent, { ...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 })) }));
+};

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

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

package/components/DataGridInfinite/Row/index.js

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

package/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/components/DataGridInfinite/Row/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { useContext, useMemo } from 'react';
+import { DataGridContext } from '../../../DataGrid/DataGridContext';
+import { getFlattenColumns } from '../../../DataGrid/utils';
+import { DataGridInfiniteContext } from '../../DataGridInfiniteContext';
+export const useLogic = ({ item, ...itemProps }) => {
+    const { renderRow, onSelectRow, variant, isInitialExpanded, expandedLevel, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, isSelectable, selectedRows, } = useContext(DataGridInfiniteContext);
+    const { activeRowId, columns, emptyCellValue, onRowClick, keyId, gridColumns, } = useContext(DataGridContext);
+    const memoizedItemProps = useMemo(() => itemProps, [itemProps.style]);
+    const flattenColumns = useMemo(() => 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,
+    };
+};

package/components/DataGridInfinite/faker.js

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

package/components/DataGridInfinite/styles.d.ts

@@ -20,3 +20,9 @@ export declare const Backdrop: import("../styled").StyledComponent<{
 export declare const StyledScrollToTopButton: import("../styled").StyledComponent<import("../ScrollToTopButton").ScrollToTopButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const StyledContainer: import("../styled").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/components/DataGridInfinite/styles.js

@@ -1,6 +1,8 @@
+import { Container } from '../DataGrid/styles';
 import { ScrollToTopButton } from '../ScrollToTopButton';
 import { styled } from '../styled';
 import { dataGridInfiniteClassnames } from './constants';
+import { dataGridInfiniteListClassnames } from './List';
 export const DataGridWrapper = styled.div `
   position: relative;
 
@@ -41,3 +43,12 @@ export const StyledScrollToTopButton = styled(ScrollToTopButton) `
     display: inline-flex;
   }
 `;
+export const StyledContainer = styled(Container) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${dataGridInfiniteListClassnames.root} {
+      display: flex;
+      flex-direction: column;
+      gap: ${({ theme }) => theme.spacing(2)};
+    }
+  }
+`;

package/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 {};