@gravity-ui/dashkit 8.17.4 → 8.19.0

package/README.md

@@ -59,18 +59,20 @@ interface DashKitProps {
   noOverlay?: boolean;
   focusable?: boolean;
   draggableHandleClassName?: string;
+  getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
+  onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
 }
 ```
 
 - **config**: [сonfig](#Config).
 - **editMode**: Whether edit mode is enabled.
 - **onItemEdit**: Called when you click to edit a widget.
-- **onChange**: Called when config or [itemsStateAndParams](#temsStateAndParams) are changed.
+- **onChange**: Called when config or [itemsStateAndParams](#itemsStateAndParams) are changed.
 - **onDrop**: Called when item dropped from ActionPanel using (#DashKitDnDWrapper)
 - **onItemMountChange**: Called when item mount state changed
 - **onItemRender**: Called when item render complete
 - **defaultGlobalParams**, **globalParams**: [Parameters](#Params) that affect all widgets. In DataLens, `defaultGlobalParams` are global parameters set in the dashboard settings. `globalParams` are globals parameters that can be set in the url.
-- **itemsStateAndParams**: [itemsStateAndParams](#temsStateAndParams).
+- **itemsStateAndParams**: [itemsStateAndParams](#itemsStateAndParams).
 - **settings**: DashKit settings.
 - **context**: Object that will be propped up on all widgets.
 - **overlayControls**: Object that overrides widget controls at the time of editing. If not transmitted, basic controls will be displayed. If `null` passed only close button or custom menu will be displayed.
@@ -84,6 +86,8 @@ interface DashKitProps {
 - **onResizeStart**: ReactGridLayout called when item resize started
 - **onResize**: ReactGridLayout called while item resizing
 - **onResizeStop**: ReactGridLayout called when item resize stoped
+- **getPreparedCopyItemOptions**: Called for converting copied item to serializable object before saving it to localstorage. It should be used instead of deprecated `context.getPreparedCopyItemOptions` prop
+- **onCopyFulfill**: Called when item copy finished with `error=null` and defined `data` on successful operation done and with `error: Error` without `data` otherwise
 
 ## Usage
 
@@ -384,10 +388,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/DashKit/DashKit.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
 import { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
-import { OverlayControlItem } from '../OverlayControls/OverlayControls';
-interface DashKitGeneralProps {
+import { OverlayControlItem, OverlayControlsCtxShape } from '../OverlayControls/OverlayControls';
+interface DashKitGeneralProps extends Pick<OverlayControlsCtxShape, 'getPreparedCopyItemOptions' | 'onCopyFulfill'> {
     config: Config;
     editMode: boolean;
     draggableHandleClassName?: string;

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

@@ -38,6 +38,11 @@
   pointer-events: none;
 }
 
+.react-grid-item.dropping {
+  user-select: none;
+  pointer-events: none;
+}
+
 .react-grid-layout {
   position: relative;
   transition: height 200ms ease;

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

@@ -4,10 +4,10 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     pluginsRefs: any[];
     state: {
         isDragging: boolean;
+        isDraggedOut: boolean;
         isPageHidden: boolean;
         currentDraggingElement: null;
         draggedOverGroup: null;
-        draggedOut: boolean;
     };
     componentDidMount(): void;
     componentDidUpdate(): void;

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

@@ -142,20 +142,27 @@ 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,
-            draggedOut: false,
         };
     }
     componentDidMount() {
@@ -291,7 +298,7 @@ class GridLayout extends react_1.default.PureComponent {
     _initDragCoordinatesWatcher(element) {
         if (!this._parendDragNode) {
             this._parendDragNode = element.parentElement;
-            this.setState({ draggedOut: false });
+            this.setState({ isDraggedOut: false });
         }
     }
     // When element is going back and prointer-event: none is removed mouse enter event is not fired
@@ -317,19 +324,19 @@ class GridLayout extends react_1.default.PureComponent {
         const parent = this._parendDragNode;
         const parentRect = parent.getBoundingClientRect();
         const { clientX, clientY } = e;
-        let draggedOut = this.state.draggedOut;
+        let isDraggedOut = this.state.isDraggedOut;
         if (clientX < parentRect.left ||
             clientX > parentRect.right ||
             clientY < parentRect.top ||
             clientY > parentRect.bottom) {
-            draggedOut = true;
+            isDraggedOut = true;
         }
         else {
-            draggedOut = false;
+            isDraggedOut = false;
         }
-        if (draggedOut !== this.state.draggedOut) {
-            this.setState({ draggedOut });
-            if (!draggedOut) {
+        if (isDraggedOut !== this.state.isDraggedOut) {
+            this.setState({ isDraggedOut });
+            if (!isDraggedOut) {
                 this._forceCursorCapture(parent, {
                     top: clientY - parentRect.top,
                     left: clientX - parentRect.left,
@@ -339,23 +346,25 @@ class GridLayout extends react_1.default.PureComponent {
     }
     _resetDragWatcher() {
         this._parendDragNode = null;
-        this.setState({ draggedOut: false });
+        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));
-        this._initDragCoordinatesWatcher(element);
         if (this.context.dragOverPlugin) {
             this.setState({ isDragging: true });
         }
         else {
+            this._initDragCoordinatesWatcher(element);
             this.updateDraggingElementState(group, layoutItem, e);
             this.setState({ isDragging: true });
         }
     }
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
-        this._updateDragCoordinates(e);
+        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) {
@@ -403,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;
@@ -416,25 +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) => {
-                const isCurrentItem = (currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.item.id) === item.id;
-                const isDraggedOut = isCurrentItem && this.state.draggedOut;
-                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, isDraggedOut: isDraggedOut, 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()));
     }
@@ -486,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.d.ts

@@ -50,7 +50,7 @@ type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults'
 export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOptionsArg & {
     copyContext?: C;
 };
-type DashKitCtx = React.Context<{
+export interface OverlayControlsCtxShape {
     overlayControls?: Record<string, OverlayControlItem[]>;
     context: Record<string, any>;
     menu: MenuItem[];
@@ -59,11 +59,14 @@ type DashKitCtx = React.Context<{
     editItem: (item: ConfigItem) => void;
     removeItem: (id: string) => void;
     getLayoutItem: (id: string) => ConfigLayout | void;
-}>;
+    getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
+    onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
+}
+type OverlayControlsCtx = React.Context<OverlayControlsCtxShape>;
 declare class OverlayControls extends React.Component<OverlayControlsProps> {
     static contextType: React.Context<any>;
     static defaultProps: OverlayControlsDefaultProps;
-    context: React.ContextType<DashKitCtx>;
+    context: React.ContextType<OverlayControlsCtx>;
     render(): JSX.Element;
     private getItems;
     private renderControlsItem;

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 = () => {
@@ -79,7 +79,7 @@ class OverlayControls extends react_1.default.Component {
             return controls;
         };
         this.onCopyItem = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             const { configItem } = this.props;
             const correspondedItemLayout = this.context.getLayoutItem(configItem.id);
             let targetInnerId;
@@ -102,13 +102,24 @@ class OverlayControls extends react_1.default.Component {
                 targetId: this.props.configItem.id,
                 targetInnerId,
             };
-            if (typeof ((_a = this.context.context) === null || _a === void 0 ? void 0 : _a.getPreparedCopyItemOptions) === 'function') {
+            if ((_a = this.context.context) === null || _a === void 0 ? void 0 : _a.getPreparedCopyItemOptions) {
+                (_b = console.warn) === null || _b === void 0 ? void 0 : _b.call(console, '`context.getPreparedCopyItemOptions` is deprecated. Please use `getPreparedCopyItemOptions` prop instead');
+            }
+            const getPreparedCopyItemOptions = (_d = (_c = this.context) === null || _c === void 0 ? void 0 : _c.getPreparedCopyItemOptions) !== null && _d !== void 0 ? _d : (_e = this.context.context) === null || _e === void 0 ? void 0 : _e.getPreparedCopyItemOptions;
+            if (typeof getPreparedCopyItemOptions === 'function') {
                 options = this.context.context.getPreparedCopyItemOptions(options);
             }
-            localStorage.setItem(constants_1.COPIED_WIDGET_STORE_KEY, JSON.stringify(options));
+            try {
+                localStorage.setItem(constants_1.COPIED_WIDGET_STORE_KEY, JSON.stringify(options));
+                (_g = (_f = this.context).onCopyFulfill) === null || _g === void 0 ? void 0 : _g.call(_f, null, options);
+            }
+            catch (e) {
+                const error = e instanceof Error ? e : new Error('Unknown error while copying item');
+                (_j = (_h = this.context).onCopyFulfill) === null || _j === void 0 ? void 0 : _j.call(_h, error);
+            }
             // https://stackoverflow.com/questions/35865481/storage-event-not-firing
             window.dispatchEvent(new Event('storage'));
-            (_c = (_b = this.props).onItemClick) === null || _c === void 0 ? void 0 : _c.call(_b);
+            (_l = (_k = this.props).onItemClick) === null || _l === void 0 ? void 0 : _l.call(_k);
         };
         this.onEditItem = () => {
             var _a, _b;
@@ -161,10 +172,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 +241,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,
@@ -383,11 +394,15 @@ function useMemoStateContext(props) {
         editItem: props.onItemEdit,
         removeItem: onItemRemove,
         getLayoutItem: getLayoutItem,
+        getPreparedCopyItemOptions: props.getPreparedCopyItemOptions,
+        onCopyFulfill: props.onCopyFulfill,
     }), [
         props.overlayControls,
         props.context,
         props.itemsStateAndParams,
         props.onItemEdit,
+        props.getPreparedCopyItemOptions,
+        props.onCopyFulfill,
         overlayMenuItems,
         itemsParams,
         onItemRemove,

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/DashKit/DashKit.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
 import { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
-import { OverlayControlItem } from '../OverlayControls/OverlayControls';
-interface DashKitGeneralProps {
+import { OverlayControlItem, OverlayControlsCtxShape } from '../OverlayControls/OverlayControls';
+interface DashKitGeneralProps extends Pick<OverlayControlsCtxShape, 'getPreparedCopyItemOptions' | 'onCopyFulfill'> {
     config: Config;
     editMode: boolean;
     draggableHandleClassName?: string;

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

@@ -38,6 +38,11 @@
   pointer-events: none;
 }
 
+.react-grid-item.dropping {
+  user-select: none;
+  pointer-events: none;
+}
+
 .react-grid-layout {
   position: relative;
   transition: height 200ms ease;

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

@@ -4,10 +4,10 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     pluginsRefs: any[];
     state: {
         isDragging: boolean;
+        isDraggedOut: boolean;
         isPageHidden: boolean;
         currentDraggingElement: null;
         draggedOverGroup: null;
-        draggedOut: boolean;
     };
     componentDidMount(): void;
     componentDidUpdate(): void;

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

@@ -139,20 +139,27 @@ 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,
-            draggedOut: false,
         };
     }
     componentDidMount() {
@@ -288,7 +295,7 @@ class GridLayout extends React.PureComponent {
     _initDragCoordinatesWatcher(element) {
         if (!this._parendDragNode) {
             this._parendDragNode = element.parentElement;
-            this.setState({ draggedOut: false });
+            this.setState({ isDraggedOut: false });
         }
     }
     // When element is going back and prointer-event: none is removed mouse enter event is not fired
@@ -314,19 +321,19 @@ class GridLayout extends React.PureComponent {
         const parent = this._parendDragNode;
         const parentRect = parent.getBoundingClientRect();
         const { clientX, clientY } = e;
-        let draggedOut = this.state.draggedOut;
+        let isDraggedOut = this.state.isDraggedOut;
         if (clientX < parentRect.left ||
             clientX > parentRect.right ||
             clientY < parentRect.top ||
             clientY > parentRect.bottom) {
-            draggedOut = true;
+            isDraggedOut = true;
         }
         else {
-            draggedOut = false;
+            isDraggedOut = false;
         }
-        if (draggedOut !== this.state.draggedOut) {
-            this.setState({ draggedOut });
-            if (!draggedOut) {
+        if (isDraggedOut !== this.state.isDraggedOut) {
+            this.setState({ isDraggedOut });
+            if (!isDraggedOut) {
                 this._forceCursorCapture(parent, {
                     top: clientY - parentRect.top,
                     left: clientX - parentRect.left,
@@ -336,23 +343,25 @@ class GridLayout extends React.PureComponent {
     }
     _resetDragWatcher() {
         this._parendDragNode = null;
-        this.setState({ draggedOut: false });
+        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));
-        this._initDragCoordinatesWatcher(element);
         if (this.context.dragOverPlugin) {
             this.setState({ isDragging: true });
         }
         else {
+            this._initDragCoordinatesWatcher(element);
             this.updateDraggingElementState(group, layoutItem, e);
             this.setState({ isDragging: true });
         }
     }
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
-        this._updateDragCoordinates(e);
+        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) {
@@ -400,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;
@@ -413,25 +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) => {
-                const isCurrentItem = (currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.item.id) === item.id;
-                const isDraggedOut = isCurrentItem && this.state.draggedOut;
-                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, isDraggedOut: isDraggedOut, 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()));
     }
@@ -483,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.d.ts

@@ -51,7 +51,7 @@ type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults'
 export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOptionsArg & {
     copyContext?: C;
 };
-type DashKitCtx = React.Context<{
+export interface OverlayControlsCtxShape {
     overlayControls?: Record<string, OverlayControlItem[]>;
     context: Record<string, any>;
     menu: MenuItem[];
@@ -60,11 +60,14 @@ type DashKitCtx = React.Context<{
     editItem: (item: ConfigItem) => void;
     removeItem: (id: string) => void;
     getLayoutItem: (id: string) => ConfigLayout | void;
-}>;
+    getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
+    onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
+}
+type OverlayControlsCtx = React.Context<OverlayControlsCtxShape>;
 declare class OverlayControls extends React.Component<OverlayControlsProps> {
     static contextType: React.Context<any>;
     static defaultProps: OverlayControlsDefaultProps;
-    context: React.ContextType<DashKitCtx>;
+    context: React.ContextType<OverlayControlsCtx>;
     render(): JSX.Element;
     private getItems;
     private renderControlsItem;

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 = () => {
@@ -76,7 +76,7 @@ class OverlayControls extends React.Component {
             return controls;
         };
         this.onCopyItem = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             const { configItem } = this.props;
             const correspondedItemLayout = this.context.getLayoutItem(configItem.id);
             let targetInnerId;
@@ -99,13 +99,24 @@ class OverlayControls extends React.Component {
                 targetId: this.props.configItem.id,
                 targetInnerId,
             };
-            if (typeof ((_a = this.context.context) === null || _a === void 0 ? void 0 : _a.getPreparedCopyItemOptions) === 'function') {
+            if ((_a = this.context.context) === null || _a === void 0 ? void 0 : _a.getPreparedCopyItemOptions) {
+                (_b = console.warn) === null || _b === void 0 ? void 0 : _b.call(console, '`context.getPreparedCopyItemOptions` is deprecated. Please use `getPreparedCopyItemOptions` prop instead');
+            }
+            const getPreparedCopyItemOptions = (_d = (_c = this.context) === null || _c === void 0 ? void 0 : _c.getPreparedCopyItemOptions) !== null && _d !== void 0 ? _d : (_e = this.context.context) === null || _e === void 0 ? void 0 : _e.getPreparedCopyItemOptions;
+            if (typeof getPreparedCopyItemOptions === 'function') {
                 options = this.context.context.getPreparedCopyItemOptions(options);
             }
-            localStorage.setItem(COPIED_WIDGET_STORE_KEY, JSON.stringify(options));
+            try {
+                localStorage.setItem(COPIED_WIDGET_STORE_KEY, JSON.stringify(options));
+                (_g = (_f = this.context).onCopyFulfill) === null || _g === void 0 ? void 0 : _g.call(_f, null, options);
+            }
+            catch (e) {
+                const error = e instanceof Error ? e : new Error('Unknown error while copying item');
+                (_j = (_h = this.context).onCopyFulfill) === null || _j === void 0 ? void 0 : _j.call(_h, error);
+            }
             // https://stackoverflow.com/questions/35865481/storage-event-not-firing
             window.dispatchEvent(new Event('storage'));
-            (_c = (_b = this.props).onItemClick) === null || _c === void 0 ? void 0 : _c.call(_b);
+            (_l = (_k = this.props).onItemClick) === null || _l === void 0 ? void 0 : _l.call(_k);
         };
         this.onEditItem = () => {
             var _a, _b;
@@ -158,10 +169,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 +238,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,
@@ -380,11 +391,15 @@ function useMemoStateContext(props) {
         editItem: props.onItemEdit,
         removeItem: onItemRemove,
         getLayoutItem: getLayoutItem,
+        getPreparedCopyItemOptions: props.getPreparedCopyItemOptions,
+        onCopyFulfill: props.onCopyFulfill,
     }), [
         props.overlayControls,
         props.context,
         props.itemsStateAndParams,
         props.onItemEdit,
+        props.getPreparedCopyItemOptions,
+        props.onCopyFulfill,
         overlayMenuItems,
         itemsParams,
         onItemRemove,

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.4",
+  "version": "8.19.0",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {