@astral/ui 4.19.0 → 4.19.2

package/components/ConfigProvider/ConfigProvider.d.ts

@@ -117,6 +117,15 @@ export type ConfigContextProps = {
                 isSmoothLoading?: boolean;
             };
         };
+        dataGrid?: {
+            defaultProps?: {
+                /**
+                 * Флаг отключения минимальной высоты таблицы.
+                 * Необходимо включить флаг, чтобы избежать баг с скроллом таблицы: https://track.astral.ru/soft/browse/UIKIT-3008.
+                 */
+                disableMinHeight?: boolean;
+            };
+        };
     };
 };
 export type ConfigProviderProps = Partial<ConfigContextProps> & {

package/components/DataGrid/Body/Body.js

@@ -10,8 +10,9 @@ import { Wrapper } from './styles';
 import { useLogic } from './useLogic';
 const INITIAL_LEVEL = 0;
 export const Body = (props) => {
-    const { imagesMap } = useContext(ConfigContext);
+    const { imagesMap, components } = useContext(ConfigContext);
     const { isNoData, contentStateProps } = useLogic(props);
+    const disableMinHeight = components?.dataGrid?.defaultProps?.disableMinHeight;
     const { rows, selectedRows = [], isLoading, isError, errorMsg, minDisplayRows, keyId, noDataPlaceholder, onRetry, ...rowProps } = props;
     const renderedRows = rows.map(({ children, options, ...row }) => {
         const rowId = row[keyId];
@@ -20,7 +21,7 @@ export const Body = (props) => {
     });
     return (_jsx(Wrapper, { className: classNames(dataGridClassnames.body, {
             [dataGridClassnames.bodyEmpty]: isNoData,
-        }), "$minDisplayRows": minDisplayRows, children: _jsx(ContentState, { ...contentStateProps, errorState: {
+        }), "$minDisplayRows": minDisplayRows, "$disableMinHeight": disableMinHeight, children: _jsx(ContentState, { ...contentStateProps, errorState: {
                 imgAlt: 'Что-то пошло не так',
                 errorList: [errorMsg || ''],
                 imgSrc: imagesMap.defaultErrorImgSrc,

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

@@ -4,4 +4,5 @@ export declare const Wrapper: import("../../styled").StyledComponent<{
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     $minDisplayRows: number;
+    $disableMinHeight?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;

package/components/DataGrid/Body/styles.js

@@ -1,14 +1,12 @@
 import { styled } from '../../styled';
 import { dataGridClassnames, MIN_ROW_HEIGHT } from '../constants';
-export const Wrapper = styled('ul', {
-    shouldForwardProp: (prop) => !['$minDisplayRows'].includes(prop),
-}) `
+export const Wrapper = styled.ul `
   overflow-y: auto;
 
   width: fit-content;
   min-width: 100%;
   height: 100%;
-  min-height: ${({ $minDisplayRows }) => `${MIN_ROW_HEIGHT * $minDisplayRows}px`};
+  min-height: ${({ $minDisplayRows, $disableMinHeight }) => ($disableMinHeight ? 'unset' : `${MIN_ROW_HEIGHT * $minDisplayRows}px`)};
   margin: 0;
   padding: 0;
 

package/components/DataGrid/types.d.ts

@@ -131,6 +131,11 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
     /**
      * Используется для отображения переданного кол-ва строк при отсутствии данных
      * @default 10
+     * @deprecated Не поддерживается, параметр будет удален в следующей major версии пакета.
+     * Мотивация: задание минимальной высоты через параметр компонента мешает корректной работе таблицы
+     * в части верстки.
+     * Чтобы отключить минимальную высоту таблицы, задайте в ConfigProvider:
+     * `components.dataGrid.defaultProps.disableMinHeight: true`
      */
     minDisplayRows?: number;
     /**

package/components/DialogActions/styles.js

@@ -2,7 +2,7 @@ import DialogActions from '@mui/material/DialogActions';
 import { Grid } from '../Grid';
 import { styled } from '../styled';
 export const StyledDialogActions = styled(DialogActions) `
-  padding-top: 0;
+  padding-top: ${({ theme }) => theme.spacing(6)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(4)};

package/components/DialogContent/styles.js

@@ -1,8 +1,6 @@
 import MuiDialogContent from '@mui/material/DialogContent';
 import { styled } from '../styled';
 export const StyledDialogContent = styled(MuiDialogContent) `
-  padding-bottom: ${({ theme }) => theme.spacing(6)};
-
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(5, 4)};
   }

package/components/TreeAsyncAutocomplete/OptionsModal/styles.js

@@ -14,7 +14,6 @@ export const StyledDialogContent = styled(DialogContent, {
 
   width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
   height: ${({ $size }) => ($size === 'md' ? '500px' : `calc(${DIALOG_SIZES[$size].minWidth} - 50px)`)};
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;

package/components/TreeAutocomplete/OptionsModal/styles.js

@@ -8,7 +8,6 @@ export const StyledDialogContent = styled(DialogContent) `
 
   width: 500px;
   height: 500px;
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
 `;
 export const TreeListWrapper = styled.div `
   overflow: auto;

package/components/TreeLikeAsyncAutocomplete/OptionsModal/styles.js

@@ -14,7 +14,6 @@ export const StyledDialogContent = styled(DialogContent, {
 
   width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
   height: ${({ $size }) => ($size === 'md' ? '500px' : `calc(${DIALOG_SIZES[$size].minWidth} - 50px)`)};
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;

package/node/components/ConfigProvider/ConfigProvider.d.ts

@@ -117,6 +117,15 @@ export type ConfigContextProps = {
                 isSmoothLoading?: boolean;
             };
         };
+        dataGrid?: {
+            defaultProps?: {
+                /**
+                 * Флаг отключения минимальной высоты таблицы.
+                 * Необходимо включить флаг, чтобы избежать баг с скроллом таблицы: https://track.astral.ru/soft/browse/UIKIT-3008.
+                 */
+                disableMinHeight?: boolean;
+            };
+        };
     };
 };
 export type ConfigProviderProps = Partial<ConfigContextProps> & {

package/node/components/DataGrid/Body/Body.js

@@ -13,8 +13,9 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const INITIAL_LEVEL = 0;
 const Body = (props) => {
-    const { imagesMap } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
+    const { imagesMap, components } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
     const { isNoData, contentStateProps } = (0, useLogic_1.useLogic)(props);
+    const disableMinHeight = components?.dataGrid?.defaultProps?.disableMinHeight;
     const { rows, selectedRows = [], isLoading, isError, errorMsg, minDisplayRows, keyId, noDataPlaceholder, onRetry, ...rowProps } = props;
     const renderedRows = rows.map(({ children, options, ...row }) => {
         const rowId = row[keyId];
@@ -23,7 +24,7 @@ const Body = (props) => {
     });
     return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(constants_1.dataGridClassnames.body, {
             [constants_1.dataGridClassnames.bodyEmpty]: isNoData,
-        }), "$minDisplayRows": minDisplayRows, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, errorState: {
+        }), "$minDisplayRows": minDisplayRows, "$disableMinHeight": disableMinHeight, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, errorState: {
                 imgAlt: 'Что-то пошло не так',
                 errorList: [errorMsg || ''],
                 imgSrc: imagesMap.defaultErrorImgSrc,

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

@@ -4,4 +4,5 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     $minDisplayRows: number;
+    $disableMinHeight?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;

package/node/components/DataGrid/Body/styles.js

@@ -3,15 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
 const styled_1 = require("../../styled");
 const constants_1 = require("../constants");
-exports.Wrapper = (0, styled_1.styled)('ul', {
-    shouldForwardProp: (prop) => !['$minDisplayRows'].includes(prop),
-}) `
+exports.Wrapper = styled_1.styled.ul `
   overflow-y: auto;
 
   width: fit-content;
   min-width: 100%;
   height: 100%;
-  min-height: ${({ $minDisplayRows }) => `${constants_1.MIN_ROW_HEIGHT * $minDisplayRows}px`};
+  min-height: ${({ $minDisplayRows, $disableMinHeight }) => ($disableMinHeight ? 'unset' : `${constants_1.MIN_ROW_HEIGHT * $minDisplayRows}px`)};
   margin: 0;
   padding: 0;
 

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

@@ -131,6 +131,11 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
     /**
      * Используется для отображения переданного кол-ва строк при отсутствии данных
      * @default 10
+     * @deprecated Не поддерживается, параметр будет удален в следующей major версии пакета.
+     * Мотивация: задание минимальной высоты через параметр компонента мешает корректной работе таблицы
+     * в части верстки.
+     * Чтобы отключить минимальную высоту таблицы, задайте в ConfigProvider:
+     * `components.dataGrid.defaultProps.disableMinHeight: true`
      */
     minDisplayRows?: number;
     /**

package/node/components/DialogActions/styles.js

@@ -8,7 +8,7 @@ const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
 const Grid_1 = require("../Grid");
 const styled_1 = require("../styled");
 exports.StyledDialogActions = (0, styled_1.styled)(DialogActions_1.default) `
-  padding-top: 0;
+  padding-top: ${({ theme }) => theme.spacing(6)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(4)};

package/node/components/DialogContent/styles.js

@@ -7,8 +7,6 @@ exports.StyledDialogContent = void 0;
 const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
 const styled_1 = require("../styled");
 exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.default) `
-  padding-bottom: ${({ theme }) => theme.spacing(6)};
-
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(5, 4)};
   }

package/node/components/TreeAsyncAutocomplete/OptionsModal/styles.js

@@ -17,7 +17,6 @@ exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent
 
   width: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
   height: ${({ $size }) => ($size === 'md' ? '500px' : `calc(${Dialog_1.DIALOG_SIZES[$size].minWidth} - 50px)`)};
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;

package/node/components/TreeAutocomplete/OptionsModal/styles.js

@@ -11,7 +11,6 @@ exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent
 
   width: 500px;
   height: 500px;
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
 `;
 exports.TreeListWrapper = styled_1.styled.div `
   overflow: auto;

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/styles.js

@@ -17,7 +17,6 @@ exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent
 
   width: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
   height: ${({ $size }) => ($size === 'md' ? '500px' : `calc(${Dialog_1.DIALOG_SIZES[$size].minWidth} - 50px)`)};
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.19.0",
+  "version": "4.19.2",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {