npm - @gravity-ui/dashkit - Versions diffs - 8.8.1-beta.2 → 8.8.1-beta.3 - Mend

@gravity-ui/dashkit 8.8.1-beta.2 → 8.8.1-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/build/cjs/components/GridItem/GridItem.css CHANGED Viewed

@@ -57,6 +57,7 @@
   transition: none;
   z-index: 3;
   will-change: transform;
+  pointer-events: none;
 }
 .react-grid-item.dashkit-grid-item_is-focused {

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

@@ -40,7 +40,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     reloadItems(): void;
     _onDragStart: (group: any, _newLayout: any, layoutItem: any) => void;
     _onResizeStart: () => void;
-    _onDragExit: () => void;
+    _onTargetRestore: () => void;
     _onStop: (group: any, newLayout: any) => void;
     _onSharedDrop: (targetGroup: any, newLayout: any, tempItem: any) => void;
     _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;

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

@@ -60,14 +60,14 @@ class GridLayout extends react_1.default.PureComponent {
                 const onStop = this._onStop.bind(this, group);
                 const onDrop = this._onDrop.bind(this, group);
                 const onDropDragOver = this._onDropDragOver.bind(this, group);
-                const onDragExit = this._onDragExit.bind(this, group);
+                const onDragTargetRestore = this._onTargetRestore.bind(this, group);
                 this._memoCallbacksForGroups[group] = {
                     onDragStart,
                     onDragStop: onStop,
                     onResizeStop: onStop,
                     onDrop,
                     onDropDragOver,
-                    onDragExit,
+                    onDragTargetRestore,
                 };
             }
             return this._memoCallbacksForGroups[group];
@@ -119,10 +119,13 @@ class GridLayout extends react_1.default.PureComponent {
                 isDragging: true,
             });
         };
-        this._onDragExit = () => {
-            this.setState({
-                draggedOverGroup: null,
-            });
+        this._onTargetRestore = () => {
+            const { currentDraggingElement } = this.state;
+            if (currentDraggingElement) {
+                this.setState({
+                    draggedOverGroup: currentDraggingElement[0],
+                });
+            }
         };
         this._onStop = (group, newLayout) => {
             const { layoutChange, onDrop, temporaryLayout } = this.context;
@@ -282,7 +285,7 @@ class GridLayout extends react_1.default.PureComponent {
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
-        const { currentDraggingElement } = this.state;
+        const { currentDraggingElement, draggedOverGroup } = this.state;
         const properties = groupGridProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
             : registerManager.gridLayout;
@@ -292,7 +295,11 @@ class GridLayout extends react_1.default.PureComponent {
         }
         const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
         const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement[0] !== group);
-        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragExit: callbacks.onDragExit, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem }, (draggableHandleClassName
+        const isDragCaptured = currentDraggingElement &&
+            group === currentDraggingElement[0] &&
+            draggedOverGroup !== null &&
+            draggedOverGroup !== group;
+        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, isDragCaptured: isDragCaptured }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {

package/build/cjs/components/GridLayout/ReactGridLayout.js CHANGED Viewed

@@ -5,21 +5,10 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const react_grid_layout_1 = tslib_1.__importStar(require("react-grid-layout"));
 const constants_1 = require("../../constants");
-const { compact, compactType } = react_grid_layout_1.utils;
-// pointer-events disabled to make mouse events be able to passthrought
-// while dragging element out of the grid the mouse positioned over grid item
-// so there is only two ways to get it, calculate rect or just give browser make his work
-const DRAGGING_PLACEHOLDER_STYLE = { pointerEvents: 'none' };
-// when shared element is dragged over another group we still creating placeholder for it
-// cause react-grid-layout is havely dependent on this element
-// while in future there will be some wey not to create dummy div and hide it with opacity
-// this hack is all what i've got now
-const DRAGGING_PLACEHOLDER_HIDDEN_STYLE = Object.assign(Object.assign({}, DRAGGING_PLACEHOLDER_STYLE), { opacity: 0 });
 class DragOverLayout extends react_grid_layout_1.default {
     constructor(...args) {
         super(...args);
-        this._isMouseOver = true;
-        this._savedDragoutState = null;
+        this._savedDraggedOutLayout = null;
         // Reset placeholder when item dragged from outside
         this.resetExternalPlaceholder = () => {
             if (this.dragEnterCounter) {
@@ -33,13 +22,13 @@ class DragOverLayout extends react_grid_layout_1.default {
             const { cols } = this.props;
             const savedLayout = layout.map((item) => (Object.assign({}, item)));
             let hiddenElement;
-            const newLayout = compact(layout.filter((item) => {
+            const newLayout = react_grid_layout_1.utils.compact(layout.filter((item) => {
                 if (item.i === i) {
                     hiddenElement = item;
                     return false;
                 }
                 return true;
-            }), compactType(this.props), cols);
+            }), react_grid_layout_1.utils.compactType(this.props), cols);
             if (hiddenElement) {
                 newLayout.push(hiddenElement);
             }
@@ -47,24 +36,23 @@ class DragOverLayout extends react_grid_layout_1.default {
                 activeDrag: null,
                 layout: newLayout,
             });
-            this.resetExternalPlaceholder();
-            return { layout: savedLayout, id: hiddenElement.i };
+            return savedLayout;
         };
         this.extendedOnDrag = (i, x, y, sintEv) => {
-            if (!this._isMouseOver) {
-                if (!this._savedDragoutState) {
-                    this._savedDragoutState = this.hideLocalPlaceholder(i);
+            if (this.props.isDragCaptured) {
+                if (!this._savedDraggedOutLayout) {
+                    this._savedDraggedOutLayout = this.hideLocalPlaceholder(i);
                 }
                 return;
             }
-            this._savedDragoutState = null;
+            this._savedDraggedOutLayout = null;
             // parent onDrag will show new placeholder again
             this.parentOnDrag(i, x, y, sintEv);
         };
         this.extendedOnDragStop = (i, x, y, sintEv) => {
             // Restoring layout if item was dropped outside of the grid
-            if (this._savedDragoutState) {
-                const savedLayout = this._savedDragoutState.layout;
+            if (this._savedDraggedOutLayout) {
+                const savedLayout = this._savedDraggedOutLayout;
                 const l = react_grid_layout_1.utils.getLayoutItem(savedLayout, i);
                 // Create placeholder (display only)
                 const placeholder = {
@@ -81,46 +69,34 @@ class DragOverLayout extends react_grid_layout_1.default {
                 }, () => {
                     this.parentOnDragStop(i, x, y, sintEv);
                 });
-                this._savedDragoutState = null;
+                this._savedDraggedOutLayout = null;
             }
             else {
                 this.parentOnDragStop(i, x, y, sintEv);
             }
         };
-        this.extendedOnDragEnter = (...args) => {
-            this._isMouseOver = true;
-            this.parentOnDragEnter(...args);
-        };
-        this.extendedOnDragLeave = (...args) => {
-            var _a, _b;
-            this._isMouseOver = false;
-            this.parentOnDragLeave(...args);
-            (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
-        };
         // Proxy mouse events -> drag methods for dnd between groups
         this.mouseEnterHandler = (e) => {
-            this._isMouseOver = true;
+            var _a, _b;
             if (this.props.hasSharedDragItem) {
-                this.parentOnDragEnter(e);
+                this.onDragEnter(e);
+            }
+            else if (this.props.isDragCaptured) {
+                (_b = (_a = this.props).onDragTargetRestore) === null || _b === void 0 ? void 0 : _b.call(_a);
             }
         };
         this.mouseLeaveHandler = (e) => {
-            var _a, _b;
-            this._isMouseOver = false;
             if (this.props.hasSharedDragItem) {
-                this.parentOnDragLeave(e);
-                (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.onDragLeave(e);
             }
         };
         this.mouseMoveHandler = (e) => {
-            this._isMouseOver = true;
             if (this.props.hasSharedDragItem) {
                 this.onDragOver(e);
             }
         };
         this.mouseUpHandler = (e) => {
             var _a, _b;
-            this._isMouseOver = true;
             if (this.props.hasSharedDragItem) {
                 e.preventDefault();
                 const { droppingItem } = this.props;
@@ -135,10 +111,6 @@ class DragOverLayout extends react_grid_layout_1.default {
         this.onDrag = this.extendedOnDrag;
         this.parentOnDragStop = this.onDragStop;
         this.onDragStop = this.extendedOnDragStop;
-        this.parentOnDragEnter = this.onDragEnter;
-        this.onDragEnter = this.extendedOnDragEnter;
-        this.parentOnDragLeave = this.onDragLeave;
-        this.onDragLeave = this.extendedOnDragLeave;
     }
     componentDidMount() {
         var _a;
@@ -163,8 +135,6 @@ class DragOverLayout extends react_grid_layout_1.default {
             innerElement.removeEventListener('mouseleave', this.mouseLeaveHandler);
             innerElement.removeEventListener('mousemove', this.mouseMoveHandler);
         }
-        // Resetting instance props
-        this._savedDragoutState = null;
     }
     // react-grid-layout doens't calculate it's height when last element is removed
     // and just keeps the previous value
@@ -190,7 +160,7 @@ class DragOverLayout extends react_grid_layout_1.default {
     // And cause grid-layout using it's own GridItem to make it look
     // like overlay adding className
     processGridItem(child, isDroppingItem) {
-        var _a, _b, _c;
+        var _a;
         const gridItem = (_a = super.processGridItem) === null || _a === void 0 ? void 0 : _a.call(this, child, isDroppingItem);
         if (!gridItem) {
             return gridItem;
@@ -200,23 +170,15 @@ class DragOverLayout extends react_grid_layout_1.default {
             const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
             const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
             const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
-            const dragStyles = this.props.hasSharedDragItem
-                ? DRAGGING_PLACEHOLDER_HIDDEN_STYLE
-                : DRAGGING_PLACEHOLDER_STYLE;
+            const style = gridItem.props.style || null;
             // React.cloneElement is just cleaner then copy-paste whole processGridItem method
             return react_1.default.cloneElement(gridItem, {
-                style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
+                // hiding previre if dragging shared item
+                style: this.props.hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
                 className: constants_1.OVERLAY_CLASS_NAME,
                 droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
             });
         }
-        else if (itemProps.i === ((_b = this.state.activeDrag) === null || _b === void 0 ? void 0 : _b.i) ||
-            itemProps.i === ((_c = this._savedDragoutState) === null || _c === void 0 ? void 0 : _c.id)) {
-            const dragStyles = DRAGGING_PLACEHOLDER_STYLE;
-            return react_1.default.cloneElement(gridItem, {
-                style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
-            });
-        }
         return gridItem;
     }
 }

package/build/esm/components/GridItem/GridItem.css CHANGED Viewed

@@ -57,6 +57,7 @@
   transition: none;
   z-index: 3;
   will-change: transform;
+  pointer-events: none;
 }
 .react-grid-item.dashkit-grid-item_is-focused {

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

@@ -40,7 +40,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     reloadItems(): void;
     _onDragStart: (group: any, _newLayout: any, layoutItem: any) => void;
     _onResizeStart: () => void;
-    _onDragExit: () => void;
+    _onTargetRestore: () => void;
     _onStop: (group: any, newLayout: any) => void;
     _onSharedDrop: (targetGroup: any, newLayout: any, tempItem: any) => void;
     _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;

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

@@ -57,14 +57,14 @@ class GridLayout extends React.PureComponent {
                 const onStop = this._onStop.bind(this, group);
                 const onDrop = this._onDrop.bind(this, group);
                 const onDropDragOver = this._onDropDragOver.bind(this, group);
-                const onDragExit = this._onDragExit.bind(this, group);
+                const onDragTargetRestore = this._onTargetRestore.bind(this, group);
                 this._memoCallbacksForGroups[group] = {
                     onDragStart,
                     onDragStop: onStop,
                     onResizeStop: onStop,
                     onDrop,
                     onDropDragOver,
-                    onDragExit,
+                    onDragTargetRestore,
                 };
             }
             return this._memoCallbacksForGroups[group];
@@ -116,10 +116,13 @@ class GridLayout extends React.PureComponent {
                 isDragging: true,
             });
         };
-        this._onDragExit = () => {
-            this.setState({
-                draggedOverGroup: null,
-            });
+        this._onTargetRestore = () => {
+            const { currentDraggingElement } = this.state;
+            if (currentDraggingElement) {
+                this.setState({
+                    draggedOverGroup: currentDraggingElement[0],
+                });
+            }
         };
         this._onStop = (group, newLayout) => {
             const { layoutChange, onDrop, temporaryLayout } = this.context;
@@ -279,7 +282,7 @@ class GridLayout extends React.PureComponent {
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
-        const { currentDraggingElement } = this.state;
+        const { currentDraggingElement, draggedOverGroup } = this.state;
         const properties = groupGridProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
             : registerManager.gridLayout;
@@ -289,7 +292,11 @@ class GridLayout extends React.PureComponent {
         }
         const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
         const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement[0] !== group);
-        return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragExit: callbacks.onDragExit, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem }, (draggableHandleClassName
+        const isDragCaptured = currentDraggingElement &&
+            group === currentDraggingElement[0] &&
+            draggedOverGroup !== null &&
+            draggedOverGroup !== group;
+        return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, isDragCaptured: isDragCaptured }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {

package/build/esm/components/GridLayout/ReactGridLayout.js CHANGED Viewed

@@ -1,21 +1,10 @@
 import React from 'react';
 import ReactGridLayout, { WidthProvider, utils } from 'react-grid-layout';
 import { OVERLAY_CLASS_NAME } from '../../constants';
-const { compact, compactType } = utils;
-// pointer-events disabled to make mouse events be able to passthrought
-// while dragging element out of the grid the mouse positioned over grid item
-// so there is only two ways to get it, calculate rect or just give browser make his work
-const DRAGGING_PLACEHOLDER_STYLE = { pointerEvents: 'none' };
-// when shared element is dragged over another group we still creating placeholder for it
-// cause react-grid-layout is havely dependent on this element
-// while in future there will be some wey not to create dummy div and hide it with opacity
-// this hack is all what i've got now
-const DRAGGING_PLACEHOLDER_HIDDEN_STYLE = Object.assign(Object.assign({}, DRAGGING_PLACEHOLDER_STYLE), { opacity: 0 });
 class DragOverLayout extends ReactGridLayout {
     constructor(...args) {
         super(...args);
-        this._isMouseOver = true;
-        this._savedDragoutState = null;
+        this._savedDraggedOutLayout = null;
         // Reset placeholder when item dragged from outside
         this.resetExternalPlaceholder = () => {
             if (this.dragEnterCounter) {
@@ -29,13 +18,13 @@ class DragOverLayout extends ReactGridLayout {
             const { cols } = this.props;
             const savedLayout = layout.map((item) => (Object.assign({}, item)));
             let hiddenElement;
-            const newLayout = compact(layout.filter((item) => {
+            const newLayout = utils.compact(layout.filter((item) => {
                 if (item.i === i) {
                     hiddenElement = item;
                     return false;
                 }
                 return true;
-            }), compactType(this.props), cols);
+            }), utils.compactType(this.props), cols);
             if (hiddenElement) {
                 newLayout.push(hiddenElement);
             }
@@ -43,24 +32,23 @@ class DragOverLayout extends ReactGridLayout {
                 activeDrag: null,
                 layout: newLayout,
             });
-            this.resetExternalPlaceholder();
-            return { layout: savedLayout, id: hiddenElement.i };
+            return savedLayout;
         };
         this.extendedOnDrag = (i, x, y, sintEv) => {
-            if (!this._isMouseOver) {
-                if (!this._savedDragoutState) {
-                    this._savedDragoutState = this.hideLocalPlaceholder(i);
+            if (this.props.isDragCaptured) {
+                if (!this._savedDraggedOutLayout) {
+                    this._savedDraggedOutLayout = this.hideLocalPlaceholder(i);
                 }
                 return;
             }
-            this._savedDragoutState = null;
+            this._savedDraggedOutLayout = null;
             // parent onDrag will show new placeholder again
             this.parentOnDrag(i, x, y, sintEv);
         };
         this.extendedOnDragStop = (i, x, y, sintEv) => {
             // Restoring layout if item was dropped outside of the grid
-            if (this._savedDragoutState) {
-                const savedLayout = this._savedDragoutState.layout;
+            if (this._savedDraggedOutLayout) {
+                const savedLayout = this._savedDraggedOutLayout;
                 const l = utils.getLayoutItem(savedLayout, i);
                 // Create placeholder (display only)
                 const placeholder = {
@@ -77,46 +65,34 @@ class DragOverLayout extends ReactGridLayout {
                 }, () => {
                     this.parentOnDragStop(i, x, y, sintEv);
                 });
-                this._savedDragoutState = null;
+                this._savedDraggedOutLayout = null;
             }
             else {
                 this.parentOnDragStop(i, x, y, sintEv);
             }
         };
-        this.extendedOnDragEnter = (...args) => {
-            this._isMouseOver = true;
-            this.parentOnDragEnter(...args);
-        };
-        this.extendedOnDragLeave = (...args) => {
-            var _a, _b;
-            this._isMouseOver = false;
-            this.parentOnDragLeave(...args);
-            (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
-        };
         // Proxy mouse events -> drag methods for dnd between groups
         this.mouseEnterHandler = (e) => {
-            this._isMouseOver = true;
+            var _a, _b;
             if (this.props.hasSharedDragItem) {
-                this.parentOnDragEnter(e);
+                this.onDragEnter(e);
+            }
+            else if (this.props.isDragCaptured) {
+                (_b = (_a = this.props).onDragTargetRestore) === null || _b === void 0 ? void 0 : _b.call(_a);
             }
         };
         this.mouseLeaveHandler = (e) => {
-            var _a, _b;
-            this._isMouseOver = false;
             if (this.props.hasSharedDragItem) {
-                this.parentOnDragLeave(e);
-                (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.onDragLeave(e);
             }
         };
         this.mouseMoveHandler = (e) => {
-            this._isMouseOver = true;
             if (this.props.hasSharedDragItem) {
                 this.onDragOver(e);
             }
         };
         this.mouseUpHandler = (e) => {
             var _a, _b;
-            this._isMouseOver = true;
             if (this.props.hasSharedDragItem) {
                 e.preventDefault();
                 const { droppingItem } = this.props;
@@ -131,10 +107,6 @@ class DragOverLayout extends ReactGridLayout {
         this.onDrag = this.extendedOnDrag;
         this.parentOnDragStop = this.onDragStop;
         this.onDragStop = this.extendedOnDragStop;
-        this.parentOnDragEnter = this.onDragEnter;
-        this.onDragEnter = this.extendedOnDragEnter;
-        this.parentOnDragLeave = this.onDragLeave;
-        this.onDragLeave = this.extendedOnDragLeave;
     }
     componentDidMount() {
         var _a;
@@ -159,8 +131,6 @@ class DragOverLayout extends ReactGridLayout {
             innerElement.removeEventListener('mouseleave', this.mouseLeaveHandler);
             innerElement.removeEventListener('mousemove', this.mouseMoveHandler);
         }
-        // Resetting instance props
-        this._savedDragoutState = null;
     }
     // react-grid-layout doens't calculate it's height when last element is removed
     // and just keeps the previous value
@@ -186,7 +156,7 @@ class DragOverLayout extends ReactGridLayout {
     // And cause grid-layout using it's own GridItem to make it look
     // like overlay adding className
     processGridItem(child, isDroppingItem) {
-        var _a, _b, _c;
+        var _a;
         const gridItem = (_a = super.processGridItem) === null || _a === void 0 ? void 0 : _a.call(this, child, isDroppingItem);
         if (!gridItem) {
             return gridItem;
@@ -196,23 +166,15 @@ class DragOverLayout extends ReactGridLayout {
             const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
             const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
             const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
-            const dragStyles = this.props.hasSharedDragItem
-                ? DRAGGING_PLACEHOLDER_HIDDEN_STYLE
-                : DRAGGING_PLACEHOLDER_STYLE;
+            const style = gridItem.props.style || null;
             // React.cloneElement is just cleaner then copy-paste whole processGridItem method
             return React.cloneElement(gridItem, {
-                style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
+                // hiding previre if dragging shared item
+                style: this.props.hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
                 className: OVERLAY_CLASS_NAME,
                 droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
             });
         }
-        else if (itemProps.i === ((_b = this.state.activeDrag) === null || _b === void 0 ? void 0 : _b.i) ||
-            itemProps.i === ((_c = this._savedDragoutState) === null || _c === void 0 ? void 0 : _c.id)) {
-            const dragStyles = DRAGGING_PLACEHOLDER_STYLE;
-            return React.cloneElement(gridItem, {
-                style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
-            });
-        }
         return gridItem;
     }
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.8.1-beta.2",
+  "version": "8.8.1-beta.3",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {