@gravity-ui/dashkit 8.4.0 → 8.5.0

package/build/cjs/components/GridLayout/GridLayout.d.ts

@@ -26,7 +26,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     _onDropDragOver: (e: any) => any;
     _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
     renderTemporaryPlaceholder(): JSX.Element | null;
-    renderGroup(group: any, renderLayout: any, renderItems: any, offset?: number): JSX.Element;
+    renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
     render(): any;
 }
 import React from 'react';

package/build/cjs/components/GridLayout/GridLayout.js

@@ -131,9 +131,12 @@ class GridLayout extends react_1.default.PureComponent {
         const { type } = temporaryLayout.dragProps;
         return (react_1.default.createElement(GridItem_1.default, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
     }
-    renderGroup(group, renderLayout, renderItems, offset = 0) {
+    renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
-        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, registerManager.gridLayout, { key: `group_${group}`, layout: renderLayout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: (...args) => this._onStop(group, ...args), onResizeStart: this._onStart, onResizeStop: (...args) => this._onStop(group, ...args) }, (draggableHandleClassName
+        const properties = groupGridProperties
+            ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
+            : registerManager.gridLayout;
+        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { layout: renderLayout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: (...args) => this._onStop(group, ...args), onResizeStart: this._onStart, onResizeStop: (...args) => this._onStop(group, ...args) }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
@@ -194,7 +197,7 @@ class GridLayout extends react_1.default.PureComponent {
                     layout = groupedLayout[id] || [];
                     items = itemsByGroup[id] || [];
                 }
-                const element = this.renderGroup(id, layout, items, offset);
+                const element = this.renderGroup(id, layout, items, offset, group.gridProperties);
                 offset += items.length;
                 if (group.render) {
                     return group.render(id, element, {

package/build/cjs/typings/config.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react-grid-layout" />
 /// <reference types="react" />
 import type { Config, ConfigItem, ConfigLayout } from '../shared';
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
@@ -18,7 +19,9 @@ export interface DashkitGroupRenderProps {
     items: ConfigItem[];
     layout: ConfigLayout[];
 }
+export type ReactGridLayoutProps = Omit<ReactGridLayout.ReactGridLayoutProps, 'children' | 'innerRef' | 'key' | 'layout' | 'isDraggable' | 'isResizable' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'>;
 export interface DashKitGroup {
     id?: string;
     render?: (id: string, children: React.ReactNode, props: DashkitGroupRenderProps) => React.ReactNode;
+    gridProperties?: (props: ReactGridLayoutProps) => ReactGridLayoutProps;
 }

package/build/esm/components/GridLayout/GridLayout.d.ts

@@ -26,7 +26,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     _onDropDragOver: (e: any) => any;
     _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
     renderTemporaryPlaceholder(): JSX.Element | null;
-    renderGroup(group: any, renderLayout: any, renderItems: any, offset?: number): JSX.Element;
+    renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
     render(): any;
 }
 import React from 'react';

package/build/esm/components/GridLayout/GridLayout.js

@@ -128,9 +128,12 @@ class GridLayout extends React.PureComponent {
         const { type } = temporaryLayout.dragProps;
         return (React.createElement(GridItem, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
     }
-    renderGroup(group, renderLayout, renderItems, offset = 0) {
+    renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
-        return (React.createElement(Layout, Object.assign({}, registerManager.gridLayout, { key: `group_${group}`, layout: renderLayout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: (...args) => this._onStop(group, ...args), onResizeStart: this._onStart, onResizeStop: (...args) => this._onStop(group, ...args) }, (draggableHandleClassName
+        const properties = groupGridProperties
+            ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
+            : registerManager.gridLayout;
+        return (React.createElement(Layout, Object.assign({}, properties, { layout: renderLayout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: (...args) => this._onStop(group, ...args), onResizeStart: this._onStart, onResizeStop: (...args) => this._onStop(group, ...args) }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
@@ -191,7 +194,7 @@ class GridLayout extends React.PureComponent {
                     layout = groupedLayout[id] || [];
                     items = itemsByGroup[id] || [];
                 }
-                const element = this.renderGroup(id, layout, items, offset);
+                const element = this.renderGroup(id, layout, items, offset, group.gridProperties);
                 offset += items.length;
                 if (group.render) {
                     return group.render(id, element, {

package/build/esm/typings/config.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react-grid-layout" />
 /// <reference types="react" />
 import type { Config, ConfigItem, ConfigLayout } from '../shared';
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
@@ -18,7 +19,9 @@ export interface DashkitGroupRenderProps {
     items: ConfigItem[];
     layout: ConfigLayout[];
 }
+export type ReactGridLayoutProps = Omit<ReactGridLayout.ReactGridLayoutProps, 'children' | 'innerRef' | 'key' | 'layout' | 'isDraggable' | 'isResizable' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'>;
 export interface DashKitGroup {
     id?: string;
     render?: (id: string, children: React.ReactNode, props: DashkitGroupRenderProps) => React.ReactNode;
+    gridProperties?: (props: ReactGridLayoutProps) => ReactGridLayoutProps;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.4.0",
+  "version": "8.5.0",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {