@gravity-ui/dashkit 8.19.1 → 8.20.0

package/build/cjs/components/GridItem/GridItem.js

@@ -126,13 +126,14 @@ class GridItem extends react_1.default.PureComponent {
             }
             : {})),
             react_1.default.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
-                react_1.default.createElement(Item_1.default, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef, onItemMountChange: this.props.onItemMountChange, onItemRender: this.props.onItemRender })),
+                react_1.default.createElement(Item_1.default, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef, onItemMountChange: this.props.onItemMountChange, onItemRender: this.props.onItemRender, gridLayout: this.props.gridLayout })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }
 }
 GridItem.propTypes = {
     adjustWidgetLayout: prop_types_1.default.func.isRequired,
+    gridLayout: prop_types_1.default.object,
     id: prop_types_1.default.string,
     item: prop_types_1.default.object,
     isDragging: prop_types_1.default.bool,

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

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

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

@@ -400,14 +400,14 @@ class GridLayout extends react_1.default.PureComponent {
             });
         }
     }
-    renderTemporaryPlaceholder() {
+    renderTemporaryPlaceholder(gridLayout) {
         const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
         if (!temporaryLayout || !temporaryLayout.dragProps) {
             return null;
         }
         const id = constants_1.TEMPORARY_ITEM_ID;
         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) }));
+        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), gridLayout: gridLayout }));
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, onItemMountChange, onItemRender, } = this.context;
@@ -441,9 +441,9 @@ class GridLayout extends react_1.default.PureComponent {
                 const itemNoOverlay = hasOwnGroupProperties && 'noOverlay' in properties
                     ? properties.noOverlay
                     : noOverlay;
-                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: keyId, id: keyId, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: isDragging, isDraggedOut: isDraggedOut, noOverlay: itemNoOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
+                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: keyId, id: keyId, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: isDragging, isDraggedOut: isDraggedOut, noOverlay: itemNoOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender, gridLayout: properties }));
             }),
-            this.renderTemporaryPlaceholder()));
+            this.renderTemporaryPlaceholder(properties)));
     }
     render() {
         const { config, groups, editMode, context } = this.context;

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

@@ -52,6 +52,7 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
     };
     propTypes: {
+        gridLayout: PropTypes.Requireable<object>;
         adjustWidgetLayout: PropTypes.Validator<(...args: any[]) => any>;
         layout: PropTypes.Requireable<any[]>;
         id: PropTypes.Requireable<string>;

package/build/cjs/hocs/prepareItem.d.ts

@@ -52,6 +52,7 @@ export function prepareItem(Component: any): {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
     };
     propTypes: {
+        gridLayout: PropTypes.Requireable<object>;
         adjustWidgetLayout: PropTypes.Validator<(...args: any[]) => any>;
         layout: PropTypes.Requireable<any[]>;
         id: PropTypes.Requireable<string>;

package/build/cjs/hocs/prepareItem.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.prepareItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const DashKitContext_1 = require("../context/DashKitContext");
 function prepareItem(Component) {
@@ -15,7 +16,7 @@ function prepareItem(Component) {
                 };
                 this._currentRenderProps = {};
                 this.getRenderProps = () => {
-                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
+                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder, gridLayout } = this.props;
                     const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                     const { data, defaults, namespace } = item;
                     const rendererProps = {
@@ -32,11 +33,17 @@ function prepareItem(Component) {
                         settings,
                         context,
                         layout,
-                        gridLayout: registerManager.gridLayout,
+                        gridLayout: gridLayout || registerManager.gridLayout,
                         adjustWidgetLayout,
                         isPlaceholder,
                     };
-                    const changedProp = Object.entries(rendererProps).find(([key, value]) => this._currentRenderProps[key] !== value);
+                    const changedProp = Object.entries(rendererProps).find(([key, value]) => {
+                        // Checking gridLayoout deep as groups gridProperties method has tendancy to creat new objects
+                        if (key === 'gridLayout') {
+                            return !(0, isEqual_1.default)(this._currentRenderProps[key], value);
+                        }
+                        return this._currentRenderProps[key] !== value;
+                    });
                     if (changedProp) {
                         this._currentRenderProps = rendererProps;
                     }
@@ -62,6 +69,7 @@ function prepareItem(Component) {
             }
         },
         _a.propTypes = {
+            gridLayout: prop_types_1.default.object,
             adjustWidgetLayout: prop_types_1.default.func.isRequired,
             layout: prop_types_1.default.array,
             id: prop_types_1.default.string,

package/build/esm/components/GridItem/GridItem.js

@@ -124,13 +124,14 @@ class GridItem extends React.PureComponent {
             }
             : {})),
             React.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
-                React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef, onItemMountChange: this.props.onItemMountChange, onItemRender: this.props.onItemRender })),
+                React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef, onItemMountChange: this.props.onItemMountChange, onItemRender: this.props.onItemRender, gridLayout: this.props.gridLayout })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }
 }
 GridItem.propTypes = {
     adjustWidgetLayout: PropTypes.func.isRequired,
+    gridLayout: PropTypes.object,
     id: PropTypes.string,
     item: PropTypes.object,
     isDragging: PropTypes.bool,

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

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

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

@@ -397,14 +397,14 @@ class GridLayout extends React.PureComponent {
             });
         }
     }
-    renderTemporaryPlaceholder() {
+    renderTemporaryPlaceholder(gridLayout) {
         const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
         if (!temporaryLayout || !temporaryLayout.dragProps) {
             return null;
         }
         const id = TEMPORARY_ITEM_ID;
         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) }));
+        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), gridLayout: gridLayout }));
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, onItemMountChange, onItemRender, } = this.context;
@@ -438,9 +438,9 @@ class GridLayout extends React.PureComponent {
                 const itemNoOverlay = hasOwnGroupProperties && 'noOverlay' in properties
                     ? properties.noOverlay
                     : noOverlay;
-                return (React.createElement(GridItem, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: keyId, id: keyId, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: isDragging, isDraggedOut: isDraggedOut, noOverlay: itemNoOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
+                return (React.createElement(GridItem, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: keyId, id: keyId, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: isDragging, isDraggedOut: isDraggedOut, noOverlay: itemNoOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender, gridLayout: properties }));
             }),
-            this.renderTemporaryPlaceholder()));
+            this.renderTemporaryPlaceholder(properties)));
     }
     render() {
         const { config, groups, editMode, context } = this.context;

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

@@ -52,6 +52,7 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
     };
     propTypes: {
+        gridLayout: PropTypes.Requireable<object>;
         adjustWidgetLayout: PropTypes.Validator<(...args: any[]) => any>;
         layout: PropTypes.Requireable<any[]>;
         id: PropTypes.Requireable<string>;

package/build/esm/hocs/prepareItem.d.ts

@@ -52,6 +52,7 @@ export function prepareItem(Component: any): {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
     };
     propTypes: {
+        gridLayout: PropTypes.Requireable<object>;
         adjustWidgetLayout: PropTypes.Validator<(...args: any[]) => any>;
         layout: PropTypes.Requireable<any[]>;
         id: PropTypes.Requireable<string>;

package/build/esm/hocs/prepareItem.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import { DashKitContext } from '../context/DashKitContext';
 export function prepareItem(Component) {
@@ -11,7 +12,7 @@ export function prepareItem(Component) {
                 };
                 this._currentRenderProps = {};
                 this.getRenderProps = () => {
-                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
+                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder, gridLayout } = this.props;
                     const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                     const { data, defaults, namespace } = item;
                     const rendererProps = {
@@ -28,11 +29,17 @@ export function prepareItem(Component) {
                         settings,
                         context,
                         layout,
-                        gridLayout: registerManager.gridLayout,
+                        gridLayout: gridLayout || registerManager.gridLayout,
                         adjustWidgetLayout,
                         isPlaceholder,
                     };
-                    const changedProp = Object.entries(rendererProps).find(([key, value]) => this._currentRenderProps[key] !== value);
+                    const changedProp = Object.entries(rendererProps).find(([key, value]) => {
+                        // Checking gridLayoout deep as groups gridProperties method has tendancy to creat new objects
+                        if (key === 'gridLayout') {
+                            return !isEqual(this._currentRenderProps[key], value);
+                        }
+                        return this._currentRenderProps[key] !== value;
+                    });
                     if (changedProp) {
                         this._currentRenderProps = rendererProps;
                     }
@@ -58,6 +65,7 @@ export function prepareItem(Component) {
             }
         },
         _a.propTypes = {
+            gridLayout: PropTypes.object,
             adjustWidgetLayout: PropTypes.func.isRequired,
             layout: PropTypes.array,
             id: PropTypes.string,

package/package.json

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