@astral/ui 4.55.4 → 4.57.0

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const Root: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RowWrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Cell: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Actions: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DataGrid/MobileSkeleton/styles.js

@@ -0,0 +1,37 @@
+import { styled } from '../../styled';
+export const Root = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+`;
+export const RowWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+
+  padding-top: ${({ theme }) => theme.spacing(1)};
+  padding-bottom: ${({ theme }) => theme.spacing(5)};
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  }
+
+  &:not(:first-of-type) {
+    padding-top: ${({ theme }) => theme.spacing(5)};
+  }
+
+  &:last-of-type {
+    padding-bottom: 0;
+  }
+`;
+export const Cell = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+
+  width: 100%;
+`;
+export const Actions = styled.div `
+  padding-top: ${({ theme }) => theme.spacing(2)};
+`;

package/components/DataGrid/PinnedSections/Section/styles.js

@@ -40,7 +40,7 @@ export const DataGridSection = styled.div `
 
       height: 100%;
 
-      border-right: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-right: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
 
     & .${dataGridClassnames.header} {
@@ -79,7 +79,7 @@ export const DataGridSection = styled.div `
 
       height: 100%;
 
-      border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
 
     & .${dataGridClassnames.header} {

package/components/DataGrid/Row/NestedChildren/styles.js

@@ -24,7 +24,12 @@ export const NestedRows = styled('ul', {
     width: 0;
     height: 100%;
 
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
+  }
+
+  /* TODO: Убрать после реализации задачи по адаптации вложенных строк https://track.astral.ru/soft/browse/UIKIT-2188 */
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
   }
 `;
 export const MoreButtonRow = styled('li', {
@@ -50,8 +55,8 @@ export const MoreButtonRow = styled('li', {
     width: ${TREE_LINE_WIDTH}px;
     height: 50%;
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[400]};
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
   }
 `;

package/components/DataGrid/Row/Row.js

@@ -1,17 +1,34 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback } from 'react';
+import { BottomDrawer } from '../../BottomDrawer';
 import { Checkbox } from '../../Checkbox';
 import { Tooltip } from '../../Tooltip';
 import { checkIsDeepEqual } from '../../utils/checkIsDeepEqual';
+import { classNames } from '../../utils/classNames';
+import { cva } from '../../utils/cva';
 import { getInertProps } from '../../utils/getInertProps';
-import { DISABLE_ROW_ATTR } from './constants';
+import { DISABLE_ROW_ATTR, dataGridRowClassnames, dataGridRowContentClassnames, } from './constants';
 import { NestedChildren } from './NestedChildren';
-import { CellStyled, CheckboxCell, ChevronIcon, CollapseButton, CollapseCell, ContentWrapper, Wrapper, } from './styles';
+import { BottomDrawerContent, CellStyled, CheckboxCell, ChevronIcon, CollapseButton, CollapseCell, ContentWrapper, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 import { checkIsDisabled } from './utils';
+const rootCva = cva(dataGridRowClassnames.root, {
+    variants: {
+        isShowConnector: {
+            true: dataGridRowClassnames.showConnector,
+        },
+    },
+});
+const rowContentCva = cva(dataGridRowContentClassnames.root, {
+    variants: {
+        isHovered: {
+            true: dataGridRowContentClassnames.hovered,
+        },
+    },
+});
 const RowComponent = (props) => {
-    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, } = useLogic(props);
-    const { className, row, options, variant, isSelectable, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, selectedRows, activeRowId, keyId, onSelectRow, onRowClick, sectionOffset, totalColumnsCount, registerRowElement, unregisterRowElement, onRowEnter, onRowLeave, 
+    const { isOpen, isShowConnector, childrenColumns, rowId, handleToggle, checkboxProps, rowProps, isHovered, tooltipProps, nestedChildrenProps, disabled, isRenderCollapseButton, rowRef, rowStyles, drawerProps, disabledReasonText, } = useLogic(props);
+    const { className, row, options, variant, isSelectable, gridColumns, isInitialExpanded, expandedLevel, level, nestedChildren, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, columns, emptyCellValue, selectedRows, activeRowId, keyId, onSelectRow, onRowClick, sectionOffset, totalColumnsCount, registerRowElement, unregisterRowElement, onRowEnter, onRowLeave, style, 
     // В этот rest-оператор попадают специфичные пропсы (атрибуты) virtuoso
     // Необходимы для DataGridInfinite
     ...selfProps } = props;
@@ -20,7 +37,7 @@ const RowComponent = (props) => {
         if (!isRenderCollapseButton && (!isSelectable || isNotSelectable)) {
             return null;
         }
-        return (_jsxs(_Fragment, { children: [isRenderCollapseButton && (_jsx(CollapseCell, { children: _jsx(CollapseButton, { variant: "text", onClick: handleToggle, children: _jsx(ChevronIcon, { "$isActive": isOpen }) }) })), isSelectable && !isNotSelectable && (_jsx(CheckboxCell, { ...getInertProps(disabled), onClick: (event) => event.stopPropagation(), children: _jsx(Checkbox, { ...checkboxProps }) }))] }));
+        return (_jsxs(_Fragment, { children: [isRenderCollapseButton && (_jsx(CollapseCell, { children: _jsx(CollapseButton, { variant: "text", onClick: handleToggle, children: _jsx(ChevronIcon, { "$isActive": isOpen }) }) })), isSelectable && !isNotSelectable && (_jsx(CheckboxCell, { ...getInertProps(disabled), onClick: (event) => event.stopPropagation(), className: dataGridRowClassnames.checkbox, children: _jsx(Checkbox, { ...checkboxProps }) }))] }));
     };
     const renderCells = useCallback(() => {
         const lastCellGlobalIndex = (totalColumnsCount ?? columns.length) - 1;
@@ -32,7 +49,7 @@ const RowComponent = (props) => {
             const globalIndex = (sectionOffset ?? 0) + index;
             const isDisabledCell = checkIsDisabled(disabled, availableCellsByIndex, globalIndex);
             const isFirstCell = globalIndex === 0;
-            return (_jsx(CellStyled, { "$level": isFirstCell ? level : 0, row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
+            return (_jsx(CellStyled, { row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData }, cellId));
         });
     }, [
         isOpen,
@@ -63,10 +80,10 @@ const RowComponent = (props) => {
         onRowEnter,
         onRowLeave,
     ]);
-    return (_jsxs(Wrapper, { "$level": level, "$isShowConnector": isShowConnector, className: className, ...selfProps, children: [_jsx(Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: _jsx(ContentWrapper, { "$level": level, "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), "$isShowConnector": isShowConnector, "$gridColumns": gridColumns, [DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), _jsx(NestedChildren, { ...nestedChildrenProps, data: nestedChildren, keyId: keyId, level: level, variant: variant, gridColumns: gridColumns, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, 
+    return (_jsxs(Wrapper, { className: classNames(className, rootCva({ isShowConnector })), style: rowStyles, ...selfProps, children: [_jsx(Tooltip, { followCursor: true, arrow: false, ...tooltipProps, children: _jsx(ContentWrapper, { "data-row-id": rowId, ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: rowContentCva({ isHovered }), "$gridColumns": gridColumns, [DISABLE_ROW_ATTR]: disabled, ...rowProps, children: renderCells() }) }), _jsx(NestedChildren, { ...nestedChildrenProps, data: nestedChildren, keyId: keyId, level: level, variant: variant, gridColumns: gridColumns, initialVisibleChildrenCount: initialVisibleChildrenCount, moreButtonColumnPosition: moreButtonColumnPosition, 
                 // biome-ignore lint/suspicious/noTsIgnore: <>
                 // @ts-ignore
-                renderRow: renderRow })] }));
+                renderRow: renderRow }), _jsx(BottomDrawer, { ...drawerProps, children: _jsx(BottomDrawerContent, { children: disabledReasonText }) })] }));
 };
 const arePropsEqual = (prevProps, nextProps) => {
     const deepEqualityProps = new Set(['row']);

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

@@ -1,6 +1,14 @@
 export declare const DISABLE_ROW_ATTR = "data-row-disable";
+export declare const MOBILE_DRAWER_TITLE = "\u041F\u0440\u0438\u0447\u0438\u043D\u0430 ";
 export declare const dataGridRowClassnames: {
+    root: string;
+    showConnector: string;
     hidden: string;
     hover: string;
     hasPinnedColumns: string;
+    checkbox: string;
+};
+export declare const dataGridRowContentClassnames: {
+    root: string;
+    hovered: string;
 };

package/components/DataGrid/Row/constants.js

@@ -1,7 +1,15 @@
 import { createUIKitClassname } from '../../utils/createUIKitClassname';
 export const DISABLE_ROW_ATTR = 'data-row-disable';
+export const MOBILE_DRAWER_TITLE = 'Причина ';
 export const dataGridRowClassnames = {
+    root: createUIKitClassname('data-grid__row'),
+    showConnector: createUIKitClassname('data-grid__row_show-connector'),
     hidden: createUIKitClassname('data-grid__row_hidden'),
     hover: createUIKitClassname('data-grid__row_hover'),
     hasPinnedColumns: createUIKitClassname('data-grid__row_has-pinned-columns'),
+    checkbox: createUIKitClassname('data-grid__row-checkbox'),
+};
+export const dataGridRowContentClassnames = {
+    root: createUIKitClassname('data-grid__row-content'),
+    hovered: createUIKitClassname('data-grid__row-content_hovered'),
 };

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

@@ -2,24 +2,15 @@
 export declare const Wrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $isShowConnector: boolean;
-    $level: number;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const ContentWrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    $isShowConnector: boolean;
-    $isHovered?: boolean | undefined;
-    $isSelected?: boolean | undefined;
     $gridColumns: string;
-    $level: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CellStyled: import("../../styled").StyledComponent<import("../Cell").CellProps<Record<string, unknown>> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $level: number;
 }, {}, {}>;
 export declare const CheckboxCell: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -48,3 +39,7 @@ export declare const ChevronIcon: import("../../styled").StyledComponent<{
 } & {
     $isActive?: boolean | undefined;
 }, {}, {}>;
+export declare const BottomDrawerContent: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DataGrid/Row/styles.js

@@ -3,8 +3,9 @@ import { IconButton } from '../../IconButton';
 import { styled } from '../../styled';
 import { Cell } from '../Cell';
 import { ROOT_ACTION_CELL_WIDTH, TREE_LINE_WIDTH } from '../constants';
-import { dataGridRowClassnames } from './constants';
+import { dataGridRowClassnames, dataGridRowContentClassnames, } from './constants';
 export const Wrapper = styled.li `
+  --level: 0;
   position: relative;
 
   &:not(:last-of-type)::before,
@@ -14,14 +15,35 @@ export const Wrapper = styled.li `
     position: absolute;
     z-index: 1;
     top: 0;
-    transform: ${({ $level }) => `translateX(calc(${ROOT_ACTION_CELL_WIDTH}px * ${$level} - ${TREE_LINE_WIDTH}px))`};
+    transform: translateX(calc(${ROOT_ACTION_CELL_WIDTH}px * var(--level) - ${TREE_LINE_WIDTH}px));
 
-    display: ${({ $isShowConnector }) => ($isShowConnector ? 'block' : 'none')};
+    display: none;
 
     width: 0;
     height: 100%;
 
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
+  }
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    &.${dataGridRowClassnames.showConnector}::before,
+    & .${dataGridRowContentClassnames.root}::before {
+      display: block;
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding-bottom: ${({ theme }) => theme.spacing(3)};
+
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+    &:not(:first-of-type) {
+      padding-top: ${({ theme }) => theme.spacing(5)};
+    }
+
+    &:first-of-type {
+      padding-top: ${({ theme }) => theme.spacing(1)};
+    }
   }
 `;
 export const ContentWrapper = styled.div `
@@ -30,42 +52,63 @@ export const ContentWrapper = styled.div `
   display: grid;
   grid-template-columns: ${({ $gridColumns }) => $gridColumns};
 
-  background-color: ${({ theme, $isSelected }) => $isSelected ? theme.palette.primary[100] : 'transparent'};
+  background-color: transparent;
 
   &::before {
     content: '';
 
     position: absolute;
     top: 0;
-    transform: ${({ $level }) => `translateX(calc(${ROOT_ACTION_CELL_WIDTH}px * ${$level} - ${TREE_LINE_WIDTH}px))`};
-
-    display: ${({ $isShowConnector }) => ($isShowConnector ? 'block' : 'none')};
+    transform: translateX(calc(${ROOT_ACTION_CELL_WIDTH}px * var(--level) - ${TREE_LINE_WIDTH}px));
 
     width: ${TREE_LINE_WIDTH}px;
     height: 50%;
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[400]};
-    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      display: none;
+    }
   }
 
   &:hover {
-    cursor: ${({ $isHovered }) => ($isHovered ? 'pointer' : 'default')};
-
     background-color: ${({ theme }) => theme.palette.background.elementHover};
+    &.${dataGridRowContentClassnames.hovered} {
+      cursor: pointer;
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      cursor: initial;
+
+      background-color: transparent;
+    }
   }
 
 
   &.${dataGridRowClassnames.hover} {
-    cursor: ${({ $isHovered }) => ($isHovered ? 'pointer' : 'default')};
+    background-color: ${({ theme }) => theme.palette.background.elementHover};
+    &.${dataGridRowContentClassnames.hovered} {
+      cursor: pointer;
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      cursor: initial;
+
+      background-color: transparent;
+    }
+  }
 
-    background-color: ${({ theme, $isSelected }) => $isSelected
-    ? theme.palette.primary[100]
-    : theme.palette.background.elementHover};
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-columns: 1fr;
+    gap: ${({ theme }) => theme.spacing(3)};
   }
 `;
 export const CellStyled = styled(Cell) `
-  margin-left: ${({ $level }) => `${$level * ROOT_ACTION_CELL_WIDTH}px`};
+  &:first-of-type {
+    margin-left: calc(var(--level) * ${ROOT_ACTION_CELL_WIDTH}px);
+  }
 `;
 export const CheckboxCell = styled.div `
   display: flex;
@@ -81,6 +124,10 @@ export const CollapseCell = styled.div `
   justify-content: center;
 
   width: ${ROOT_ACTION_CELL_WIDTH}px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;
 export const CollapseButton = styled(IconButton) `
   width: 24px;
@@ -102,3 +149,8 @@ export const ChevronIcon = styled(ChevronROutlineMd, {
     duration: theme.transitions.duration.short,
 })};
 `;
+export const BottomDrawerContent = styled.div `
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      padding: ${({ theme }) => theme.spacing(5, 4)};
+    }
+`;

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

@@ -1,4 +1,4 @@
-import { type ChangeEvent, type ReactNode } from 'react';
+import { type ChangeEvent, type CSSProperties, type ReactNode } from 'react';
 import { type Variant } from '../enums';
 import { type CellValue, type DataGridColumns, type DataGridRowOptions } from '../types';
 export type RowProps<TData extends Record<string, CellValue>> = {
@@ -115,4 +115,8 @@ export type RowProps<TData extends Record<string, CellValue>> = {
      * Обработчик выхода из строки
      */
     onRowLeave?: (rowId: string, event: PointerEvent) => void;
+    /**
+     * Стили для строки
+     */
+    style?: CSSProperties;
 };

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

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

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

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

package/components/DataGrid/Row/useLogic/hooks/useMobileLogic.d.ts

@@ -0,0 +1,5 @@
+export declare const useMobileLogic: () => {
+    isDrawerOpen: boolean;
+    handleOpenDrawer: () => void;
+    handleCloseDrawer: () => void;
+};

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

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import { useViewportType } from '../../../../useViewportType';
+export const useMobileLogic = () => {
+    const { isMobile } = useViewportType();
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+    const handleOpenDrawer = () => {
+        if (isMobile) {
+            setIsDrawerOpen(true);
+        }
+    };
+    const handleCloseDrawer = () => {
+        setIsDrawerOpen(false);
+    };
+    return { isDrawerOpen, handleOpenDrawer, handleCloseDrawer };
+};