@astral/ui 4.56.0 → 4.57.0

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,15 +15,36 @@ 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.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 `
   position: relative;
@@ -30,16 +52,14 @@ 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%;
@@ -47,25 +67,48 @@ export const ContentWrapper = styled.div `
     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 };
+};