@gravity-ui/dashkit 8.17.3 → 8.18.0

package/README.md

@@ -384,10 +384,19 @@ DashKit.setSettings({menu: [] as Array<MenuItem>});
 #### DashKitDnDWrapper
 
 ```ts
+type DraggedOverItem = {
+  h: number;
+  w: number;
+  type: string;
+  parent: string;
+  i?: number;
+};
+
 interface DashKitDnDWrapperProps {
   dragImageSrc?: string;
   onDragStart?: (dragProps: ItemDragProps) => void;
   onDragEnd?: () => void;
+  onDropDragOver?: (draggedItem: DraggedOverItem, sharedItem: DraggedOverItem | null) => void | boolean;
 }
 ```
 

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { ItemDragProps } from '../../shared';
+import type { DraggedOverItem, ItemDragProps } from '../../shared';
 type DashKitDnDWrapperProps = {
     dragImageSrc?: string;
+    onDropDragOver?: (draggedItem: DraggedOverItem, sharedItem: DraggedOverItem | null) => void | boolean;
     onDragStart?: (dragProps: ItemDragProps) => void;
     onDragEnd?: () => void;
     children: React.ReactElement;

package/build/cjs/components/DashKitDnDWrapper/DashKitDnDWrapper.js

@@ -12,24 +12,25 @@ const DashKitDnDWrapper = (props) => {
         img.src = props.dragImageSrc || defaultImageSrc;
         return img;
     }, [props.dragImageSrc]);
+    const onDragStartProp = props.onDragStart;
     const onDragStart = react_1.default.useCallback((_, itemDragProps) => {
-        var _a;
         setDragProps(itemDragProps);
-        (_a = props.onDragStart) === null || _a === void 0 ? void 0 : _a.call(props, itemDragProps);
-    }, [setDragProps, props.onDragStart]);
+        onDragStartProp === null || onDragStartProp === void 0 ? void 0 : onDragStartProp(itemDragProps);
+    }, [setDragProps, onDragStartProp]);
+    const onDragEndProp = props.onDragEnd;
     const onDragEnd = react_1.default.useCallback((_) => {
-        var _a;
         setDragProps(null);
-        (_a = props.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(props);
-    }, [setDragProps, props.onDragEnd]);
+        onDragEndProp === null || onDragEndProp === void 0 ? void 0 : onDragEndProp();
+    }, [setDragProps, onDragEndProp]);
     const contextValue = react_1.default.useMemo(() => {
         return {
             dragProps,
             dragImagePreview,
             onDragStart,
             onDragEnd,
+            onDropDragOver: props.onDropDragOver,
         };
-    }, [dragProps, dragImagePreview, onDragStart, onDragEnd]);
+    }, [dragProps, dragImagePreview, onDragStart, onDragEnd, props.onDropDragOver]);
     return (react_1.default.createElement(DashKitContext_1.DashKitDnDContext.Provider, { value: contextValue }, props.children));
 };
 exports.DashKitDnDWrapper = DashKitDnDWrapper;

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

@@ -34,6 +34,14 @@
   border-color: transparent;
   pointer-events: none;
 }
+.dashkit-grid-item_is-dragged-out {
+  pointer-events: none;
+}
+
+.react-grid-item.dropping {
+  user-select: none;
+  pointer-events: none;
+}
 
 .react-grid-layout {
   position: relative;
@@ -57,7 +65,6 @@
   transition: none;
   z-index: 3;
   will-change: transform;
-  pointer-events: none;
 }
 
 .react-grid-item.dashkit-grid-item_is-focused {
@@ -74,6 +81,14 @@
   user-select: none;
 }
 
+.react-grid-focus-capture {
+  position: absolute;
+  display: block;
+  z-index: 6;
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .react-grid-item .react-resizable-handle {
   position: absolute;
   width: 20px;

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

@@ -96,7 +96,7 @@ class GridItem extends react_1.default.PureComponent {
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, isDraggedOut, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -115,6 +115,7 @@ class GridItem extends react_1.default.PureComponent {
         const { _editActive } = this.props.item.data;
         return (react_1.default.createElement("div", Object.assign({ className: b({
                 'is-dragging': isDragging,
+                'is-dragged-out': isDraggedOut,
                 'is-focused': this.state.isFocused,
                 'with-custom-handle': withCustomHandle,
             }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, (focusable
@@ -135,6 +136,7 @@ GridItem.propTypes = {
     id: prop_types_1.default.string,
     item: prop_types_1.default.object,
     isDragging: prop_types_1.default.bool,
+    isDraggedOut: prop_types_1.default.bool,
     layout: prop_types_1.default.array,
     forwardedRef: prop_types_1.default.any,
     forwardedPluginRef: prop_types_1.default.any,

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

@@ -4,6 +4,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     pluginsRefs: any[];
     state: {
         isDragging: boolean;
+        isDraggedOut: boolean;
         isPageHidden: boolean;
         currentDraggingElement: null;
         draggedOverGroup: null;
@@ -47,7 +48,12 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         e: any;
         element: any;
     };
-    updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
+    updateDraggingElementState(group: any, layoutItem: any, e: any): void;
+    _initDragCoordinatesWatcher(element: any): void;
+    _parendDragNode: any;
+    _forceCursorCapture(parentElement: any, position: any, parentRect: any): void;
+    _updateDragCoordinates(e: any): void;
+    _resetDragWatcher(): void;
     _onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
     _onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
     _onDragStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;

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

@@ -142,16 +142,24 @@ class GridLayout extends react_1.default.PureComponent {
             if (currentDraggingElement) {
                 const { h, w, i } = currentDraggingElement.layoutItem;
                 const { type } = currentDraggingElement.item;
-                return onDropDragOver(e, properties, layout, { h, w, i, type });
+                const sharedItem = {
+                    h,
+                    w,
+                    i,
+                    type,
+                    parent: currentDraggingElement.group,
+                };
+                return onDropDragOver(e, group, properties, layout, sharedItem);
             }
             if (dragOverPlugin) {
-                return onDropDragOver(e, properties, layout);
+                return onDropDragOver(e, group, properties, layout);
             }
             return false;
         };
         this.pluginsRefs = [];
         this.state = {
             isDragging: false,
+            isDraggedOut: false,
             isPageHidden: false,
             currentDraggingElement: null,
             draggedOverGroup: null,
@@ -269,7 +277,7 @@ class GridLayout extends react_1.default.PureComponent {
             element,
         };
     }
-    updateeDraggingElementState(group, layoutItem, e) {
+    updateDraggingElementState(group, layoutItem, e) {
         let currentDraggingElement = this.state.currentDraggingElement;
         if (!currentDraggingElement) {
             const { temporaryLayout } = this.context;
@@ -287,6 +295,59 @@ class GridLayout extends react_1.default.PureComponent {
         }
         this.setState({ currentDraggingElement, draggedOverGroup: group });
     }
+    _initDragCoordinatesWatcher(element) {
+        if (!this._parendDragNode) {
+            this._parendDragNode = element.parentElement;
+            this.setState({ isDraggedOut: false });
+        }
+    }
+    // When element is going back and prointer-event: none is removed mouse enter event is not fired
+    // So to trigger it we are forcing this event by adding transparent block under the mouse
+    _forceCursorCapture(parentElement, position, parentRect) {
+        const block = document.createElement('div');
+        block.classList.add('react-grid-focus-capture');
+        const blockSize = 44;
+        const offset = blockSize / 2;
+        // Keeping elemnt inside current grid
+        const top = Math.min(Math.max(position.top - offset, 0), parentRect.height - blockSize);
+        const left = Math.min(Math.max(position.left - offset, 0), parentRect.width - blockSize);
+        block.style.width = `${blockSize}px`;
+        block.style.height = `${blockSize}px`;
+        block.style.top = `${top}px`;
+        block.style.left = `${left}px`;
+        parentElement.appendChild(block);
+        setTimeout(() => {
+            block.remove();
+        }, 100);
+    }
+    _updateDragCoordinates(e) {
+        const parent = this._parendDragNode;
+        const parentRect = parent.getBoundingClientRect();
+        const { clientX, clientY } = e;
+        let isDraggedOut = this.state.isDraggedOut;
+        if (clientX < parentRect.left ||
+            clientX > parentRect.right ||
+            clientY < parentRect.top ||
+            clientY > parentRect.bottom) {
+            isDraggedOut = true;
+        }
+        else {
+            isDraggedOut = false;
+        }
+        if (isDraggedOut !== this.state.isDraggedOut) {
+            this.setState({ isDraggedOut });
+            if (!isDraggedOut) {
+                this._forceCursorCapture(parent, {
+                    top: clientY - parentRect.top,
+                    left: clientX - parentRect.left,
+                }, parentRect);
+            }
+        }
+    }
+    _resetDragWatcher() {
+        this._parendDragNode = null;
+        this.setState({ isDraggedOut: false });
+    }
     _onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
         var _a;
         (_a = this.context.onDragStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, _newLayout, layoutItem, _newItem, _placeholder, e, element));
@@ -294,16 +355,21 @@ class GridLayout extends react_1.default.PureComponent {
             this.setState({ isDragging: true });
         }
         else {
-            this.updateeDraggingElementState(group, layoutItem, e);
+            this._initDragCoordinatesWatcher(element);
+            this.updateDraggingElementState(group, layoutItem, e);
             this.setState({ isDragging: true });
         }
     }
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
+        if (!this.context.dragOverPlugin) {
+            this._updateDragCoordinates(e);
+        }
         (_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
     }
     _onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
+        this._resetDragWatcher();
         this._onStop(group, layout);
         (_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
     }
@@ -346,7 +412,8 @@ class GridLayout extends react_1.default.PureComponent {
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, onItemMountChange, onItemRender, } = this.context;
         const { currentDraggingElement, draggedOverGroup } = this.state;
-        const properties = groupGridProperties
+        const hasOwnGroupProperties = typeof groupGridProperties === 'function';
+        const properties = hasOwnGroupProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
             : registerManager.gridLayout;
         let { compactType } = properties;
@@ -359,23 +426,22 @@ class GridLayout extends react_1.default.PureComponent {
             group === currentDraggingElement.group &&
             draggedOverGroup !== null &&
             draggedOverGroup !== group;
-        return (react_1.default.createElement(ReactGridLayout_1.Layout
-        // Group properties
-        , Object.assign({}, properties, { 
+        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({ isDraggable: editMode, isResizable: editMode }, properties, { key: `group_${group}`, 
             // Layout props
-            compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, draggableCancel: `.${constants_1.DRAGGABLE_CANCEL_CLASS_NAME}` }, (draggableHandleClassName
-            ? { draggableHandle: `.${draggableHandleClassName}` }
-            : null), { 
+            compactType: compactType, layout: layout, draggableCancel: `.${constants_1.DRAGGABLE_CANCEL_CLASS_NAME}`, draggableHandle: draggableHandleClassName ? `.${draggableHandleClassName}` : null, 
             // Default callbacks
             onDragStart: callbacks.onDragStart, onDrag: callbacks.onDrag, onDragStop: callbacks.onDragStop, onResizeStart: callbacks.onResizeStart, onResize: callbacks.onResize, onResizeStop: callbacks.onResizeStop, 
             // External Drag N Drop options
-            onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured }, (outerDnDEnable
-            ? {
-                isDroppable: true,
-            }
-            : null)),
+            onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured, isDroppable: Boolean(outerDnDEnable) && editMode }),
             renderItems.map((item, i) => {
-                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
+                const keyId = item.id;
+                const isDragging = this.state.isDragging;
+                const isCurrentDraggedItem = (currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.item.id) === keyId;
+                const isDraggedOut = isCurrentDraggedItem && this.state.isDraggedOut;
+                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 }));
             }),
             this.renderTemporaryPlaceholder()));
     }
@@ -427,13 +493,14 @@ class GridLayout extends react_1.default.PureComponent {
                 const element = this.renderGroup(id, layout, items, offset, group.gridProperties);
                 offset += items.length;
                 if (group.render) {
-                    return group.render(id, element, {
+                    const groupContext = {
                         config,
                         editMode,
                         items,
                         layout,
                         context,
-                    });
+                    };
+                    return group.render(id, element, groupContext);
                 }
                 return element;
             });

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

@@ -157,6 +157,20 @@ class DragOverLayout extends react_grid_layout_1.default {
         var _a;
         return ((_a = this.props.innerRef) === null || _a === void 0 ? void 0 : _a.current) || null;
     }
+    calculateDroppingPosition(itemProps) {
+        const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition } = itemProps;
+        const { sharedDragPosition } = this.props;
+        let offsetX, offsetY;
+        if (sharedDragPosition) {
+            offsetX = sharedDragPosition.offsetX;
+            offsetY = sharedDragPosition.offsetY;
+        }
+        else {
+            offsetX = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
+            offsetY = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+        }
+        return Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - offsetX, top: droppingPosition.top - offsetY });
+    }
     // Drop item from outside gets 0,0 droppingPosition
     // centering cursor on newly creted grid item
     // And cause grid-layout using it's own GridItem to make it look
@@ -167,26 +181,14 @@ class DragOverLayout extends react_grid_layout_1.default {
         if (!gridItem) {
             return gridItem;
         }
-        const { props: itemProps } = gridItem;
         if (isDroppingItem) {
-            const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
-            const { sharedDragPosition, hasSharedDragItem } = this.props;
-            let offsetX, offsetY;
-            if (sharedDragPosition) {
-                offsetX = sharedDragPosition.offsetX;
-                offsetY = sharedDragPosition.offsetY;
-            }
-            else {
-                offsetX = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
-                offsetY = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
-            }
-            const style = gridItem.props.style || null;
             // React.cloneElement is just cleaner then copy-paste whole processGridItem method
             return react_1.default.cloneElement(gridItem, {
-                // hiding previre if dragging shared item
-                style: hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
-                className: constants_1.OVERLAY_CLASS_NAME,
-                droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - offsetX, top: droppingPosition.top - offsetY }),
+                // hiding preview if dragging shared item
+                style: this.props.hasSharedDragItem
+                    ? Object.assign(Object.assign({}, gridItem.props.style), { opacity: 0 }) : gridItem.props.style,
+                className: `${constants_1.OVERLAY_CLASS_NAME} ${constants_1.DROPPING_ELEMENT_CLASS_NAME}`,
+                droppingPosition: this.calculateDroppingPosition(gridItem.props),
             });
         }
         return gridItem;

package/build/cjs/components/OverlayControls/OverlayControls.js

@@ -32,7 +32,7 @@ class OverlayControls extends react_1.default.Component {
             const { view, size, onItemClick } = this.props;
             const { title, handler, icon, iconSize, qa } = item;
             const onItemClickHandler = typeof handler === 'function' ? handler : noop_1.default;
-            return (react_1.default.createElement(uikit_1.Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => {
+            return (react_1.default.createElement(uikit_1.Button, { key: `control_${index}`, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => {
                     onItemClickHandler(this.props.configItem);
                     onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick();
                 }, qa: qa },
@@ -43,7 +43,7 @@ class OverlayControls extends react_1.default.Component {
             if (this.context.overlayControls === null) {
                 return null;
             }
-            return (react_1.default.createElement(uikit_1.Button, { view: view, size: size, title: (0, i18n_1.i18n)('label_settings'), pin: "round-brick", onClick: this.onEditItem, qa: "dashkit-overlay-control-settings" },
+            return (react_1.default.createElement(uikit_1.Button, { key: 'control_default', view: view, size: size, title: (0, i18n_1.i18n)('label_settings'), pin: "round-brick", onClick: this.onEditItem, qa: "dashkit-overlay-control-settings" },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.Gear, size: constants_1.OVERLAY_ICON_SIZE })));
         };
         this.getCustomLeftOverlayControls = () => {
@@ -161,10 +161,9 @@ class OverlayControls extends react_1.default.Component {
     renderControls() {
         const customLeftControls = this.getCustomLeftOverlayControls();
         const hasCustomOverlayLeftControls = Boolean(customLeftControls.length);
-        const defaultControl = this.getDefaultControls();
         const controls = hasCustomOverlayLeftControls
             ? customLeftControls.map((item, index, items) => this.renderControlsItem(item, index, items.length + 1))
-            : defaultControl;
+            : this.getDefaultControls();
         const menu = this.renderMenu(controls === null);
         return (react_1.default.createElement("div", { className: b('default-controls', {
                 'with-custom-left': hasCustomOverlayLeftControls,
@@ -231,7 +230,7 @@ class OverlayControls extends react_1.default.Component {
         if (items.length === 0) {
             return null;
         }
-        return (react_1.default.createElement(uikit_1.DropdownMenu, { items: items, renderSwitcher: (props) => (react_1.default.createElement(uikit_1.Button, Object.assign({}, props, { view: view, size: size, pin: isOnlyOneItem ? 'round-round' : 'brick-round', qa: "dashkit-overlay-control-menu" }),
+        return (react_1.default.createElement(uikit_1.DropdownMenu, { key: 'controls_dropdown', items: items, renderSwitcher: (props) => (react_1.default.createElement(uikit_1.Button, Object.assign({}, props, { view: view, size: size, pin: isOnlyOneItem ? 'round-round' : 'brick-round', qa: "dashkit-overlay-control-menu" }),
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis, size: constants_1.OVERLAY_ICON_SIZE }))), popupProps: {
                 contentClassName: constants_1.DRAGGABLE_CANCEL_CLASS_NAME,
             } }));

package/build/cjs/constants/common.d.ts

@@ -15,3 +15,4 @@ export declare const DEFAULT_GROUP = "__default";
 export declare const COMPACT_TYPE_HORIZONTAL_NOWRAP = "horizontal-nowrap";
 export declare const DRAGGABLE_CANCEL_CLASS_NAME = "dashkit_draggable_cancel";
 export declare const FOCUSED_CLASS_NAME = "dashkit_focused";
+export declare const DROPPING_ELEMENT_CLASS_NAME = "dropping";

package/build/cjs/constants/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FOCUSED_CLASS_NAME = exports.DRAGGABLE_CANCEL_CLASS_NAME = exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = exports.DEFAULT_GROUP = exports.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_ICON_SIZE = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
+exports.DROPPING_ELEMENT_CLASS_NAME = exports.FOCUSED_CLASS_NAME = exports.DRAGGABLE_CANCEL_CLASS_NAME = exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = exports.DEFAULT_GROUP = exports.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_ICON_SIZE = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
 exports.COPIED_WIDGET_STORE_KEY = 'dashCopiedItem';
 exports.DEFAULT_NAMESPACE = 'default';
 exports.OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
@@ -18,3 +18,4 @@ exports.DEFAULT_GROUP = '__default';
 exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap';
 exports.DRAGGABLE_CANCEL_CLASS_NAME = 'dashkit_draggable_cancel';
 exports.FOCUSED_CLASS_NAME = 'dashkit_focused';
+exports.DROPPING_ELEMENT_CLASS_NAME = 'dropping';

package/build/cjs/hocs/withContext.js

@@ -232,12 +232,13 @@ function useMemoStateContext(props) {
     const reloadItems = react_1.default.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);
-    const dragProps = dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragProps;
+    const dragPropsContext = dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragProps;
+    const onDropDragOverContext = dndContext === null || dndContext === void 0 ? void 0 : dndContext.onDropDragOver;
     const dragOverPlugin = react_1.default.useMemo(() => {
-        if (!dragProps) {
+        if (!dragPropsContext) {
             return null;
         }
-        const pluginType = dragProps.type;
+        const pluginType = dragPropsContext.type;
         if (props.registerManager.check(pluginType)) {
             return props.registerManager.getItem(pluginType);
         }
@@ -246,8 +247,8 @@ function useMemoStateContext(props) {
             console.error(`Uknown pluginType: ${pluginType}`);
             return null;
         }
-    }, [dragProps, props.registerManager]);
-    const onDropDragOver = react_1.default.useCallback((_e, gridProps, groupLayout, sharedItem) => {
+    }, [dragPropsContext, props.registerManager]);
+    const onDropDragOver = react_1.default.useCallback((_e, group, gridProps, groupLayout, sharedItem) => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
@@ -275,20 +276,30 @@ function useMemoStateContext(props) {
             maxH < defaultLayout.minH) {
             return false;
         }
-        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || common_1.DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || common_1.DEFAULT_WIDGET_WIDTH, } = (dragProps === null || dragProps === void 0 ? void 0 : dragProps.layout) || {};
-        return {
+        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || common_1.DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || common_1.DEFAULT_WIDGET_WIDTH, } = (dragPropsContext === null || dragPropsContext === void 0 ? void 0 : dragPropsContext.layout) || {};
+        const itemLayout = {
             h: maxH ? Math.min(h, maxH) : h,
             w: maxW ? Math.min(w, maxW) : w,
         };
-    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
+        if ((onDropDragOverContext === null || onDropDragOverContext === void 0 ? void 0 : onDropDragOverContext(Object.assign(Object.assign(Object.assign({}, sharedItem), itemLayout), { parent: group }), sharedItem !== null && sharedItem !== void 0 ? sharedItem : null)) === false) {
+            return false;
+        }
+        return itemLayout;
+    }, [
+        resetTemporaryLayout,
+        temporaryLayout,
+        dragOverPlugin,
+        dragPropsContext,
+        onDropDragOverContext,
+    ]);
     const onDropProp = props.onDrop;
     const onDrop = react_1.default.useCallback((newLayout, item) => {
-        if (!dragProps) {
+        if (!dragPropsContext) {
             return;
         }
         setTemporaryLayout({
             data: [...newLayout, item],
-            dragProps,
+            dragProps: dragPropsContext,
         });
         onDropProp({
             newLayout: newLayout.reduce((memo, l) => {
@@ -299,9 +310,9 @@ function useMemoStateContext(props) {
             }, []),
             itemLayout: (0, pick_1.default)(item, ITEM_PROPS),
             commit: resetTemporaryLayout,
-            dragProps,
+            dragProps: dragPropsContext,
         });
-    }, [dragProps, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
+    }, [dragPropsContext, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
     const dashkitContextValue = react_1.default.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,

package/build/cjs/shared/types/common.d.ts

@@ -12,6 +12,10 @@ export type ItemDragProps = {
     };
     extra?: any;
 };
+export type DraggedOverItem = Omit<ConfigLayout, 'x' | 'y' | 'i'> & {
+    type: string;
+    i?: ConfigLayout['i'];
+};
 export type ItemDropProps = {
     commit: () => void;
     dragProps: ItemDragProps;

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

@@ -2,8 +2,11 @@ import type ReactGridLayout from 'react-grid-layout';
 import type { OverlayCustomControlItem } from '../components/OverlayControls/OverlayControls';
 import { MenuItems } from '../constants';
 import { AdditionalWidgetLayout } from '../shared';
+export type GridLayoutSettings = ReactGridLayout.ReactGridLayoutProps & {
+    noOverlay?: boolean;
+};
 export interface Settings {
-    gridLayout?: ReactGridLayout.ReactGridLayoutProps;
+    gridLayout?: GridLayoutSettings;
     theme?: string;
     isMobile?: boolean;
     menu?: Array<MenuItem>;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { Layout, Layouts } from 'react-grid-layout';
 import type { Config, ConfigItem, ConfigLayout } from '../shared';
+import { GridLayoutSettings } from './common';
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
     id?: null;
     namespace?: string;
@@ -31,7 +32,7 @@ export interface DashkitGroupRenderProps {
     layout: ConfigLayout[];
     context: any;
 }
-export type ReactGridLayoutProps = Omit<ReactGridLayout.ReactGridLayoutProps, 'children' | 'compactType' | 'innerRef' | 'key' | 'layout' | 'isDraggable' | 'isResizable' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'> & {
+export type ReactGridLayoutProps = Omit<GridLayoutSettings, 'children' | 'compactType' | 'innerRef' | 'key' | 'layout' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'> & {
     compactType?: CompactType;
 };
 export interface DashKitGroup {

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { ItemDragProps } from '../../shared';
+import type { DraggedOverItem, ItemDragProps } from '../../shared';
 type DashKitDnDWrapperProps = {
     dragImageSrc?: string;
+    onDropDragOver?: (draggedItem: DraggedOverItem, sharedItem: DraggedOverItem | null) => void | boolean;
     onDragStart?: (dragProps: ItemDragProps) => void;
     onDragEnd?: () => void;
     children: React.ReactElement;

package/build/esm/components/DashKitDnDWrapper/DashKitDnDWrapper.js

@@ -8,23 +8,24 @@ export const DashKitDnDWrapper = (props) => {
         img.src = props.dragImageSrc || defaultImageSrc;
         return img;
     }, [props.dragImageSrc]);
+    const onDragStartProp = props.onDragStart;
     const onDragStart = React.useCallback((_, itemDragProps) => {
-        var _a;
         setDragProps(itemDragProps);
-        (_a = props.onDragStart) === null || _a === void 0 ? void 0 : _a.call(props, itemDragProps);
-    }, [setDragProps, props.onDragStart]);
+        onDragStartProp === null || onDragStartProp === void 0 ? void 0 : onDragStartProp(itemDragProps);
+    }, [setDragProps, onDragStartProp]);
+    const onDragEndProp = props.onDragEnd;
     const onDragEnd = React.useCallback((_) => {
-        var _a;
         setDragProps(null);
-        (_a = props.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(props);
-    }, [setDragProps, props.onDragEnd]);
+        onDragEndProp === null || onDragEndProp === void 0 ? void 0 : onDragEndProp();
+    }, [setDragProps, onDragEndProp]);
     const contextValue = React.useMemo(() => {
         return {
             dragProps,
             dragImagePreview,
             onDragStart,
             onDragEnd,
+            onDropDragOver: props.onDropDragOver,
         };
-    }, [dragProps, dragImagePreview, onDragStart, onDragEnd]);
+    }, [dragProps, dragImagePreview, onDragStart, onDragEnd, props.onDropDragOver]);
     return (React.createElement(DashKitDnDContext.Provider, { value: contextValue }, props.children));
 };

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

@@ -34,6 +34,14 @@
   border-color: transparent;
   pointer-events: none;
 }
+.dashkit-grid-item_is-dragged-out {
+  pointer-events: none;
+}
+
+.react-grid-item.dropping {
+  user-select: none;
+  pointer-events: none;
+}
 
 .react-grid-layout {
   position: relative;
@@ -57,7 +65,6 @@
   transition: none;
   z-index: 3;
   will-change: transform;
-  pointer-events: none;
 }
 
 .react-grid-item.dashkit-grid-item_is-focused {
@@ -74,6 +81,14 @@
   user-select: none;
 }
 
+.react-grid-focus-capture {
+  position: absolute;
+  display: block;
+  z-index: 6;
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .react-grid-item .react-resizable-handle {
   position: absolute;
   width: 20px;

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

@@ -94,7 +94,7 @@ class GridItem extends React.PureComponent {
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, isDraggedOut, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -113,6 +113,7 @@ class GridItem extends React.PureComponent {
         const { _editActive } = this.props.item.data;
         return (React.createElement("div", Object.assign({ className: b({
                 'is-dragging': isDragging,
+                'is-dragged-out': isDraggedOut,
                 'is-focused': this.state.isFocused,
                 'with-custom-handle': withCustomHandle,
             }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, (focusable
@@ -133,6 +134,7 @@ GridItem.propTypes = {
     id: PropTypes.string,
     item: PropTypes.object,
     isDragging: PropTypes.bool,
+    isDraggedOut: PropTypes.bool,
     layout: PropTypes.array,
     forwardedRef: PropTypes.any,
     forwardedPluginRef: PropTypes.any,

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

@@ -4,6 +4,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     pluginsRefs: any[];
     state: {
         isDragging: boolean;
+        isDraggedOut: boolean;
         isPageHidden: boolean;
         currentDraggingElement: null;
         draggedOverGroup: null;
@@ -47,7 +48,12 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         e: any;
         element: any;
     };
-    updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
+    updateDraggingElementState(group: any, layoutItem: any, e: any): void;
+    _initDragCoordinatesWatcher(element: any): void;
+    _parendDragNode: any;
+    _forceCursorCapture(parentElement: any, position: any, parentRect: any): void;
+    _updateDragCoordinates(e: any): void;
+    _resetDragWatcher(): void;
     _onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
     _onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
     _onDragStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;

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

@@ -139,16 +139,24 @@ class GridLayout extends React.PureComponent {
             if (currentDraggingElement) {
                 const { h, w, i } = currentDraggingElement.layoutItem;
                 const { type } = currentDraggingElement.item;
-                return onDropDragOver(e, properties, layout, { h, w, i, type });
+                const sharedItem = {
+                    h,
+                    w,
+                    i,
+                    type,
+                    parent: currentDraggingElement.group,
+                };
+                return onDropDragOver(e, group, properties, layout, sharedItem);
             }
             if (dragOverPlugin) {
-                return onDropDragOver(e, properties, layout);
+                return onDropDragOver(e, group, properties, layout);
             }
             return false;
         };
         this.pluginsRefs = [];
         this.state = {
             isDragging: false,
+            isDraggedOut: false,
             isPageHidden: false,
             currentDraggingElement: null,
             draggedOverGroup: null,
@@ -266,7 +274,7 @@ class GridLayout extends React.PureComponent {
             element,
         };
     }
-    updateeDraggingElementState(group, layoutItem, e) {
+    updateDraggingElementState(group, layoutItem, e) {
         let currentDraggingElement = this.state.currentDraggingElement;
         if (!currentDraggingElement) {
             const { temporaryLayout } = this.context;
@@ -284,6 +292,59 @@ class GridLayout extends React.PureComponent {
         }
         this.setState({ currentDraggingElement, draggedOverGroup: group });
     }
+    _initDragCoordinatesWatcher(element) {
+        if (!this._parendDragNode) {
+            this._parendDragNode = element.parentElement;
+            this.setState({ isDraggedOut: false });
+        }
+    }
+    // When element is going back and prointer-event: none is removed mouse enter event is not fired
+    // So to trigger it we are forcing this event by adding transparent block under the mouse
+    _forceCursorCapture(parentElement, position, parentRect) {
+        const block = document.createElement('div');
+        block.classList.add('react-grid-focus-capture');
+        const blockSize = 44;
+        const offset = blockSize / 2;
+        // Keeping elemnt inside current grid
+        const top = Math.min(Math.max(position.top - offset, 0), parentRect.height - blockSize);
+        const left = Math.min(Math.max(position.left - offset, 0), parentRect.width - blockSize);
+        block.style.width = `${blockSize}px`;
+        block.style.height = `${blockSize}px`;
+        block.style.top = `${top}px`;
+        block.style.left = `${left}px`;
+        parentElement.appendChild(block);
+        setTimeout(() => {
+            block.remove();
+        }, 100);
+    }
+    _updateDragCoordinates(e) {
+        const parent = this._parendDragNode;
+        const parentRect = parent.getBoundingClientRect();
+        const { clientX, clientY } = e;
+        let isDraggedOut = this.state.isDraggedOut;
+        if (clientX < parentRect.left ||
+            clientX > parentRect.right ||
+            clientY < parentRect.top ||
+            clientY > parentRect.bottom) {
+            isDraggedOut = true;
+        }
+        else {
+            isDraggedOut = false;
+        }
+        if (isDraggedOut !== this.state.isDraggedOut) {
+            this.setState({ isDraggedOut });
+            if (!isDraggedOut) {
+                this._forceCursorCapture(parent, {
+                    top: clientY - parentRect.top,
+                    left: clientX - parentRect.left,
+                }, parentRect);
+            }
+        }
+    }
+    _resetDragWatcher() {
+        this._parendDragNode = null;
+        this.setState({ isDraggedOut: false });
+    }
     _onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
         var _a;
         (_a = this.context.onDragStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, _newLayout, layoutItem, _newItem, _placeholder, e, element));
@@ -291,16 +352,21 @@ class GridLayout extends React.PureComponent {
             this.setState({ isDragging: true });
         }
         else {
-            this.updateeDraggingElementState(group, layoutItem, e);
+            this._initDragCoordinatesWatcher(element);
+            this.updateDraggingElementState(group, layoutItem, e);
             this.setState({ isDragging: true });
         }
     }
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
+        if (!this.context.dragOverPlugin) {
+            this._updateDragCoordinates(e);
+        }
         (_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
     }
     _onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
+        this._resetDragWatcher();
         this._onStop(group, layout);
         (_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
     }
@@ -343,7 +409,8 @@ class GridLayout extends React.PureComponent {
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, onItemMountChange, onItemRender, } = this.context;
         const { currentDraggingElement, draggedOverGroup } = this.state;
-        const properties = groupGridProperties
+        const hasOwnGroupProperties = typeof groupGridProperties === 'function';
+        const properties = hasOwnGroupProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
             : registerManager.gridLayout;
         let { compactType } = properties;
@@ -356,23 +423,22 @@ class GridLayout extends React.PureComponent {
             group === currentDraggingElement.group &&
             draggedOverGroup !== null &&
             draggedOverGroup !== group;
-        return (React.createElement(Layout
-        // Group properties
-        , Object.assign({}, properties, { 
+        return (React.createElement(Layout, Object.assign({ isDraggable: editMode, isResizable: editMode }, properties, { key: `group_${group}`, 
             // Layout props
-            compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, draggableCancel: `.${DRAGGABLE_CANCEL_CLASS_NAME}` }, (draggableHandleClassName
-            ? { draggableHandle: `.${draggableHandleClassName}` }
-            : null), { 
+            compactType: compactType, layout: layout, draggableCancel: `.${DRAGGABLE_CANCEL_CLASS_NAME}`, draggableHandle: draggableHandleClassName ? `.${draggableHandleClassName}` : null, 
             // Default callbacks
             onDragStart: callbacks.onDragStart, onDrag: callbacks.onDrag, onDragStop: callbacks.onDragStop, onResizeStart: callbacks.onResizeStart, onResize: callbacks.onResize, onResizeStop: callbacks.onResizeStop, 
             // External Drag N Drop options
-            onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured }, (outerDnDEnable
-            ? {
-                isDroppable: true,
-            }
-            : null)),
+            onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured, isDroppable: Boolean(outerDnDEnable) && editMode }),
             renderItems.map((item, i) => {
-                return (React.createElement(GridItem, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
+                const keyId = item.id;
+                const isDragging = this.state.isDragging;
+                const isCurrentDraggedItem = (currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.item.id) === keyId;
+                const isDraggedOut = isCurrentDraggedItem && this.state.isDraggedOut;
+                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 }));
             }),
             this.renderTemporaryPlaceholder()));
     }
@@ -424,13 +490,14 @@ class GridLayout extends React.PureComponent {
                 const element = this.renderGroup(id, layout, items, offset, group.gridProperties);
                 offset += items.length;
                 if (group.render) {
-                    return group.render(id, element, {
+                    const groupContext = {
                         config,
                         editMode,
                         items,
                         layout,
                         context,
-                    });
+                    };
+                    return group.render(id, element, groupContext);
                 }
                 return element;
             });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactGridLayout, { WidthProvider, utils } from 'react-grid-layout';
-import { OVERLAY_CLASS_NAME } from '../../constants';
+import { DROPPING_ELEMENT_CLASS_NAME, OVERLAY_CLASS_NAME } from '../../constants';
 class DragOverLayout extends ReactGridLayout {
     constructor(...args) {
         super(...args);
@@ -153,6 +153,20 @@ class DragOverLayout extends ReactGridLayout {
         var _a;
         return ((_a = this.props.innerRef) === null || _a === void 0 ? void 0 : _a.current) || null;
     }
+    calculateDroppingPosition(itemProps) {
+        const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition } = itemProps;
+        const { sharedDragPosition } = this.props;
+        let offsetX, offsetY;
+        if (sharedDragPosition) {
+            offsetX = sharedDragPosition.offsetX;
+            offsetY = sharedDragPosition.offsetY;
+        }
+        else {
+            offsetX = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
+            offsetY = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+        }
+        return Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - offsetX, top: droppingPosition.top - offsetY });
+    }
     // Drop item from outside gets 0,0 droppingPosition
     // centering cursor on newly creted grid item
     // And cause grid-layout using it's own GridItem to make it look
@@ -163,26 +177,14 @@ class DragOverLayout extends ReactGridLayout {
         if (!gridItem) {
             return gridItem;
         }
-        const { props: itemProps } = gridItem;
         if (isDroppingItem) {
-            const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
-            const { sharedDragPosition, hasSharedDragItem } = this.props;
-            let offsetX, offsetY;
-            if (sharedDragPosition) {
-                offsetX = sharedDragPosition.offsetX;
-                offsetY = sharedDragPosition.offsetY;
-            }
-            else {
-                offsetX = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
-                offsetY = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
-            }
-            const style = gridItem.props.style || null;
             // React.cloneElement is just cleaner then copy-paste whole processGridItem method
             return React.cloneElement(gridItem, {
-                // hiding previre if dragging shared item
-                style: hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
-                className: OVERLAY_CLASS_NAME,
-                droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - offsetX, top: droppingPosition.top - offsetY }),
+                // hiding preview if dragging shared item
+                style: this.props.hasSharedDragItem
+                    ? Object.assign(Object.assign({}, gridItem.props.style), { opacity: 0 }) : gridItem.props.style,
+                className: `${OVERLAY_CLASS_NAME} ${DROPPING_ELEMENT_CLASS_NAME}`,
+                droppingPosition: this.calculateDroppingPosition(gridItem.props),
             });
         }
         return gridItem;

package/build/esm/components/OverlayControls/OverlayControls.js

@@ -29,7 +29,7 @@ class OverlayControls extends React.Component {
             const { view, size, onItemClick } = this.props;
             const { title, handler, icon, iconSize, qa } = item;
             const onItemClickHandler = typeof handler === 'function' ? handler : noop;
-            return (React.createElement(Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => {
+            return (React.createElement(Button, { key: `control_${index}`, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => {
                     onItemClickHandler(this.props.configItem);
                     onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick();
                 }, qa: qa },
@@ -40,7 +40,7 @@ class OverlayControls extends React.Component {
             if (this.context.overlayControls === null) {
                 return null;
             }
-            return (React.createElement(Button, { view: view, size: size, title: i18n('label_settings'), pin: "round-brick", onClick: this.onEditItem, qa: "dashkit-overlay-control-settings" },
+            return (React.createElement(Button, { key: 'control_default', view: view, size: size, title: i18n('label_settings'), pin: "round-brick", onClick: this.onEditItem, qa: "dashkit-overlay-control-settings" },
                 React.createElement(Icon, { data: Gear, size: OVERLAY_ICON_SIZE })));
         };
         this.getCustomLeftOverlayControls = () => {
@@ -158,10 +158,9 @@ class OverlayControls extends React.Component {
     renderControls() {
         const customLeftControls = this.getCustomLeftOverlayControls();
         const hasCustomOverlayLeftControls = Boolean(customLeftControls.length);
-        const defaultControl = this.getDefaultControls();
         const controls = hasCustomOverlayLeftControls
             ? customLeftControls.map((item, index, items) => this.renderControlsItem(item, index, items.length + 1))
-            : defaultControl;
+            : this.getDefaultControls();
         const menu = this.renderMenu(controls === null);
         return (React.createElement("div", { className: b('default-controls', {
                 'with-custom-left': hasCustomOverlayLeftControls,
@@ -228,7 +227,7 @@ class OverlayControls extends React.Component {
         if (items.length === 0) {
             return null;
         }
-        return (React.createElement(DropdownMenu, { items: items, renderSwitcher: (props) => (React.createElement(Button, Object.assign({}, props, { view: view, size: size, pin: isOnlyOneItem ? 'round-round' : 'brick-round', qa: "dashkit-overlay-control-menu" }),
+        return (React.createElement(DropdownMenu, { key: 'controls_dropdown', items: items, renderSwitcher: (props) => (React.createElement(Button, Object.assign({}, props, { view: view, size: size, pin: isOnlyOneItem ? 'round-round' : 'brick-round', qa: "dashkit-overlay-control-menu" }),
                 React.createElement(Icon, { data: Ellipsis, size: OVERLAY_ICON_SIZE }))), popupProps: {
                 contentClassName: DRAGGABLE_CANCEL_CLASS_NAME,
             } }));

package/build/esm/constants/common.d.ts

@@ -15,3 +15,4 @@ export declare const DEFAULT_GROUP = "__default";
 export declare const COMPACT_TYPE_HORIZONTAL_NOWRAP = "horizontal-nowrap";
 export declare const DRAGGABLE_CANCEL_CLASS_NAME = "dashkit_draggable_cancel";
 export declare const FOCUSED_CLASS_NAME = "dashkit_focused";
+export declare const DROPPING_ELEMENT_CLASS_NAME = "dropping";

package/build/esm/constants/common.js

@@ -15,3 +15,4 @@ export const DEFAULT_GROUP = '__default';
 export const COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap';
 export const DRAGGABLE_CANCEL_CLASS_NAME = 'dashkit_draggable_cancel';
 export const FOCUSED_CLASS_NAME = 'dashkit_focused';
+export const DROPPING_ELEMENT_CLASS_NAME = 'dropping';

package/build/esm/hocs/withContext.js

@@ -229,12 +229,13 @@ function useMemoStateContext(props) {
     const reloadItems = React.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);
-    const dragProps = dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragProps;
+    const dragPropsContext = dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragProps;
+    const onDropDragOverContext = dndContext === null || dndContext === void 0 ? void 0 : dndContext.onDropDragOver;
     const dragOverPlugin = React.useMemo(() => {
-        if (!dragProps) {
+        if (!dragPropsContext) {
             return null;
         }
-        const pluginType = dragProps.type;
+        const pluginType = dragPropsContext.type;
         if (props.registerManager.check(pluginType)) {
             return props.registerManager.getItem(pluginType);
         }
@@ -243,8 +244,8 @@ function useMemoStateContext(props) {
             console.error(`Uknown pluginType: ${pluginType}`);
             return null;
         }
-    }, [dragProps, props.registerManager]);
-    const onDropDragOver = React.useCallback((_e, gridProps, groupLayout, sharedItem) => {
+    }, [dragPropsContext, props.registerManager]);
+    const onDropDragOver = React.useCallback((_e, group, gridProps, groupLayout, sharedItem) => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
@@ -272,20 +273,30 @@ function useMemoStateContext(props) {
             maxH < defaultLayout.minH) {
             return false;
         }
-        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDGET_WIDTH, } = (dragProps === null || dragProps === void 0 ? void 0 : dragProps.layout) || {};
-        return {
+        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDGET_WIDTH, } = (dragPropsContext === null || dragPropsContext === void 0 ? void 0 : dragPropsContext.layout) || {};
+        const itemLayout = {
             h: maxH ? Math.min(h, maxH) : h,
             w: maxW ? Math.min(w, maxW) : w,
         };
-    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
+        if ((onDropDragOverContext === null || onDropDragOverContext === void 0 ? void 0 : onDropDragOverContext(Object.assign(Object.assign(Object.assign({}, sharedItem), itemLayout), { parent: group }), sharedItem !== null && sharedItem !== void 0 ? sharedItem : null)) === false) {
+            return false;
+        }
+        return itemLayout;
+    }, [
+        resetTemporaryLayout,
+        temporaryLayout,
+        dragOverPlugin,
+        dragPropsContext,
+        onDropDragOverContext,
+    ]);
     const onDropProp = props.onDrop;
     const onDrop = React.useCallback((newLayout, item) => {
-        if (!dragProps) {
+        if (!dragPropsContext) {
             return;
         }
         setTemporaryLayout({
             data: [...newLayout, item],
-            dragProps,
+            dragProps: dragPropsContext,
         });
         onDropProp({
             newLayout: newLayout.reduce((memo, l) => {
@@ -296,9 +307,9 @@ function useMemoStateContext(props) {
             }, []),
             itemLayout: pick(item, ITEM_PROPS),
             commit: resetTemporaryLayout,
-            dragProps,
+            dragProps: dragPropsContext,
         });
-    }, [dragProps, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
+    }, [dragPropsContext, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
     const dashkitContextValue = React.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,

package/build/esm/shared/types/common.d.ts

@@ -12,6 +12,10 @@ export type ItemDragProps = {
     };
     extra?: any;
 };
+export type DraggedOverItem = Omit<ConfigLayout, 'x' | 'y' | 'i'> & {
+    type: string;
+    i?: ConfigLayout['i'];
+};
 export type ItemDropProps = {
     commit: () => void;
     dragProps: ItemDragProps;

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

@@ -2,8 +2,11 @@ import type ReactGridLayout from 'react-grid-layout';
 import type { OverlayCustomControlItem } from '../components/OverlayControls/OverlayControls';
 import { MenuItems } from '../constants';
 import { AdditionalWidgetLayout } from '../shared';
+export type GridLayoutSettings = ReactGridLayout.ReactGridLayoutProps & {
+    noOverlay?: boolean;
+};
 export interface Settings {
-    gridLayout?: ReactGridLayout.ReactGridLayoutProps;
+    gridLayout?: GridLayoutSettings;
     theme?: string;
     isMobile?: boolean;
     menu?: Array<MenuItem>;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { Layout, Layouts } from 'react-grid-layout';
 import type { Config, ConfigItem, ConfigLayout } from '../shared';
+import { GridLayoutSettings } from './common';
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
     id?: null;
     namespace?: string;
@@ -31,7 +32,7 @@ export interface DashkitGroupRenderProps {
     layout: ConfigLayout[];
     context: any;
 }
-export type ReactGridLayoutProps = Omit<ReactGridLayout.ReactGridLayoutProps, 'children' | 'compactType' | 'innerRef' | 'key' | 'layout' | 'isDraggable' | 'isResizable' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'> & {
+export type ReactGridLayoutProps = Omit<GridLayoutSettings, 'children' | 'compactType' | 'innerRef' | 'key' | 'layout' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'> & {
     compactType?: CompactType;
 };
 export interface DashKitGroup {

package/package.json

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