@gravity-ui/dashkit 8.0.2-beta.3 → 8.1.0-beta.0

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

@@ -1,3 +1,15 @@
-/// <reference types="react" />
+import React from 'react';
 import { ActionPanelProps } from './types';
+export type ActionPanelItem = {
+    id: string;
+    icon: React.ReactNode;
+    title: string;
+    onClick?: () => void;
+    className?: string;
+    qa?: string;
+    pluginType?: string;
+};
+export declare const ActionPanelItemContainer: ({ item }: {
+    item: ActionPanelItem;
+}) => JSX.Element;
 export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element | null;

package/build/cjs/components/ActionPanel/ActionPanel.js

@@ -1,21 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionPanel = void 0;
+exports.ActionPanel = exports.ActionPanelItemContainer = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const react_transition_group_1 = require("react-transition-group");
+const DashKitContext_1 = require("../../context/DashKitContext");
 const cn_1 = require("../../utils/cn");
 const b = (0, cn_1.cn)('dashkit-action-panel');
+const ActionPanelItemContainer = ({ item }) => {
+    const dragContext = react_1.default.useContext(DashKitContext_1.DashKitDnDContext);
+    const onDragStart = react_1.default.useCallback((e) => {
+        dragContext.onDragStart(e, item.pluginType);
+    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart, item.pluginType]);
+    const onDragEnd = react_1.default.useCallback((e) => {
+        dragContext.onDragEnd(e);
+    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd]);
+    let dndProps = {};
+    if (item.pluginType) {
+        dndProps = {
+            draggable: true,
+            unselectable: 'on',
+            onDragStart,
+            onDragEnd,
+        };
+    }
+    return (react_1.default.createElement("div", Object.assign({ role: "button", className: b('item', item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick, "data-qa": item.qa }, dndProps),
+        react_1.default.createElement("div", { className: b('icon') }, item.icon),
+        react_1.default.createElement("div", { className: b('title'), title: item.title }, item.title)));
+};
+exports.ActionPanelItemContainer = ActionPanelItemContainer;
 const ActionPanel = (props) => {
     var _a, _b;
     const isDisabled = (_a = props.disable) !== null && _a !== void 0 ? _a : false;
     const isAnimated = (_b = props.toggleAnimation) !== null && _b !== void 0 ? _b : false;
     const nodeRef = react_1.default.useRef(null);
-    const content = (react_1.default.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item) => {
-        return (react_1.default.createElement("div", { role: "button", className: b('item', item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick, "data-qa": item.qa },
-            react_1.default.createElement("div", { className: b('icon') }, item.icon),
-            react_1.default.createElement("div", { className: b('title'), title: item.title }, item.title)));
-    })));
+    const content = (react_1.default.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item, i) => (react_1.default.createElement(exports.ActionPanelItemContainer, { key: `item_${i}`, item: item })))));
     if (isAnimated) {
         return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: !isDisabled, nodeRef: nodeRef, classNames: b(null), timeout: 300, unmountOnExit: true }, content));
     }

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Config, ConfigItem, GlobalParams, ItemsStateAndParams } from '../../shared';
-import { ContextProps, Plugin, SetConfigItem, SetItemOptions, Settings, SettingsProps } from '../../typings';
+import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemsStateAndParams } from '../../shared';
+import { ContextProps, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
 interface DashKitGeneralProps {
@@ -15,6 +15,12 @@ interface DashKitDefaultProps {
         config: Config;
         itemsStateAndParams: ItemsStateAndParams;
     }) => void;
+    onDrop: (dropProps: {
+        commit: () => void;
+        pluginType: string;
+        itemLayout: ConfigLayout;
+        newLayout: ConfigLayout[];
+    }) => void;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
     itemsStateAndParams: ItemsStateAndParams;
@@ -34,7 +40,7 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
         item: SetConfigItem;
         namespace?: string;
         config: Config;
-        options?: SetItemOptions;
+        options?: SetNewItemOptions;
     }): Config;
     static removeItem({ id, config, itemsStateAndParams, }: {
         id: string;

package/build/cjs/components/DashKit/DashKit.js

@@ -59,6 +59,7 @@ exports.DashKit = DashKit;
 DashKit.defaultProps = {
     onItemEdit: noop_1.default,
     onChange: noop_1.default,
+    onDrop: noop_1.default,
     defaultGlobalParams: {},
     globalParams: {},
     itemsStateAndParams: {},

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

@@ -0,0 +1,6 @@
+import React from 'react';
+type DashKitDnDWrapperProps = {
+    children: React.ReactElement;
+};
+export declare const DashKitDnDWrapper: React.FC<DashKitDnDWrapperProps>;
+export {};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashKitDnDWrapper = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const DashKitContext_1 = require("../../context/DashKitContext");
+const DashKitDnDWrapper = (props) => {
+    const [dragPluginType, setDragPluginType] = react_1.default.useState(null);
+    const onDragStart = react_1.default.useCallback((_, type) => {
+        setDragPluginType(type);
+    }, [setDragPluginType]);
+    const onDragEnd = react_1.default.useCallback((_) => {
+        setDragPluginType(null);
+    }, [setDragPluginType]);
+    const contextValue = react_1.default.useMemo(() => {
+        return {
+            dragPluginType,
+            onDragStart,
+            onDragEnd,
+        };
+    }, [dragPluginType, onDragStart, onDragEnd]);
+    return (react_1.default.createElement(DashKitContext_1.DashKitDnDContext.Provider, { value: contextValue }, props.children));
+};
+exports.DashKitDnDWrapper = DashKitDnDWrapper;

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

@@ -1,3 +1,3 @@
-declare const _default: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export default _default;
+export default GridItemForwarderRef;
+declare const GridItemForwarderRef: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

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

@@ -124,6 +124,8 @@ GridItem.propTypes = {
     onTouchStart: prop_types_1.default.func,
 };
 GridItem.contextType = DashKitContext_1.DashKitContext;
-exports.default = react_1.default.forwardRef((props, ref) => {
+const GridItemForwarderRef = react_1.default.forwardRef((props, ref) => {
     return react_1.default.createElement(GridItem, Object.assign({}, props, { forwardedRef: ref }));
 });
+GridItemForwarderRef.displayName = 'forwardRef(GridItem)';
+exports.default = GridItemForwarderRef;

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

@@ -21,6 +21,8 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     reloadItems(): void;
     _onStart: () => void;
     _onStop: (newLayout: any) => void;
+    _onDropDragOver: (e: any) => any;
+    _onDrop: (layout: any, item: any, e: any) => false | undefined;
     render(): JSX.Element;
 }
 import React from 'react';

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

@@ -6,7 +6,45 @@ const react_grid_layout_1 = tslib_1.__importStar(require("react-grid-layout"));
 const constants_1 = require("../../constants");
 const DashKitContext_1 = require("../../context/DashKitContext");
 const GridItem_1 = tslib_1.__importDefault(require("../GridItem/GridItem"));
-const Layout = (0, react_grid_layout_1.WidthProvider)(react_grid_layout_1.default); // eslint-disable-line new-cap
+class DragOverLayout extends react_grid_layout_1.default {
+    constructor() {
+        super(...arguments);
+        this.dragReset = () => {
+            if (this.dragEnterCounter) {
+                this.dragEnterCounter = 0;
+                this.removeDroppingPlaceholder();
+            }
+        };
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        window.addEventListener('dragend', this.dragReset);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('dragend', this.dragReset);
+    }
+    processGridItem(child, isDroppingItem) {
+        if (isDroppingItem) {
+            // 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
+            // like overlay adding className
+            const gridItem = super.processGridItem(child, isDroppingItem);
+            if (!gridItem)
+                return null;
+            const { props } = gridItem;
+            const { containerWidth, cols, w, h, rowHeight, margin, transformScale } = props;
+            const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
+            const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+            return react_1.default.cloneElement(gridItem, {
+                className: constants_1.OVERLAY_CLASS_NAME,
+                droppingPosition: Object.assign(Object.assign({}, props.droppingPosition), { left: props.droppingPosition.left - leftOffset, top: props.droppingPosition.top - topOffset }),
+            });
+        }
+        return super.processGridItem(child, isDroppingItem);
+    }
+}
+const Layout = (0, react_grid_layout_1.WidthProvider)(DragOverLayout); // eslint-disable-line new-cap
 class GridLayout extends react_1.default.PureComponent {
     constructor(props, context) {
         super(props, context);
@@ -32,13 +70,38 @@ class GridLayout extends react_1.default.PureComponent {
             return getItemsMeta(this.pluginsRefs);
         };
         this._onStart = () => {
+            if (this.temporaryLayout)
+                return;
             this.setState({ isDragging: true });
         };
         this._onStop = (newLayout) => {
-            const { layoutChange } = this.context;
-            layoutChange(newLayout);
+            const { layoutChange, onDrop, temporaryLayout } = this.context;
+            if (temporaryLayout) {
+                onDrop === null || onDrop === void 0 ? void 0 : onDrop(newLayout, newLayout.find(({ i }) => i === constants_1.TEMPORARY_ITEM_ID));
+            }
+            else {
+                layoutChange(newLayout);
+            }
             this.setState({ isDragging: false });
         };
+        this._onDropDragOver = (e) => {
+            const { editMode, onDropDragOver, temporaryLayout } = this.context;
+            if (!editMode) {
+                return false;
+            }
+            const result = onDropDragOver(e);
+            if (temporaryLayout) {
+                return false;
+            }
+            return result;
+        };
+        this._onDrop = (layout, item, e) => {
+            const { editMode, temporaryLayout, onDrop } = this.context;
+            if (!editMode && temporaryLayout) {
+                return false;
+            }
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(layout, item, e);
+        };
         this.pluginsRefs = [];
         this.state = {
             isDragging: false,
@@ -72,14 +135,20 @@ class GridLayout extends react_1.default.PureComponent {
         }
     }
     render() {
-        const { layout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, } = this.context;
+        const { layout, temporaryLayout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         this.pluginsRefs.length = config.items.length;
-        return (react_1.default.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
+        return (react_1.default.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: temporaryLayout || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
+            : null), (outerDnDEnable
+            ? {
+                isDroppable: true,
+                onDropDragOver: this._onDropDragOver,
+                onDrop: this._onDrop,
+            }
             : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }), config.items.map((item, i) => {
             return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: (pluginRef) => {
                     this.pluginsRefs[i] = pluginRef;
-                }, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+                }, key: item.id, id: item.id, item: item, layout: temporaryLayout || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
         })));
     }
 }

package/build/cjs/components/Item/Item.css

@@ -1,4 +1,4 @@
-.dashkit-item__renderer {
+.dashkit-item__placeholder, .dashkit-item__renderer {
   position: absolute;
   inset: 0;
 }

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

@@ -2,3 +2,4 @@ export * from './DashKit';
 export type { OverlayControlItem, PreparedCopyItemOptions } from './OverlayControls/OverlayControls';
 export * from './ActionPanel/ActionPanel';
 export type { ActionPanelItem, ActionPanelProps } from './ActionPanel/types';
+export * from './DashKitDnDWrapper/DashKitDnDWrapper';

package/build/cjs/components/index.js

@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./DashKit"), exports);
 tslib_1.__exportStar(require("./ActionPanel/ActionPanel"), exports);
+tslib_1.__exportStar(require("./DashKitDnDWrapper/DashKitDnDWrapper"), exports);

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

@@ -1,6 +1,8 @@
 export declare const COPIED_WIDGET_STORE_KEY = "dashCopiedItem";
 export declare const DEFAULT_NAMESPACE = "default";
 export declare const OVERLAY_CONTROLS_CLASS_NAME = "dashkit-overlay-controls";
+export declare const OVERLAY_CLASS_NAME = "dashkit-grid-item__overlay";
+export declare const TEMPORARY_ITEM_ID = "__dropping-elem__";
 export declare const MenuItems: {
     readonly Copy: "copy";
     readonly Delete: "delete";

package/build/cjs/constants/common.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItems = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
+exports.MenuItems = exports.TEMPORARY_ITEM_ID = 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';
+exports.OVERLAY_CLASS_NAME = 'dashkit-grid-item__overlay';
+exports.TEMPORARY_ITEM_ID = '__dropping-elem__';
 exports.MenuItems = {
     Copy: 'copy',
     Delete: 'delete',

package/build/cjs/context/DashKitContext.d.ts

@@ -1,2 +1,3 @@
 export const DashKitContext: React.Context<any>;
+export const DashKitDnDContext: React.Context<any>;
 import React from 'react';

package/build/cjs/context/DashKitContext.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashKitContext = void 0;
+exports.DashKitDnDContext = exports.DashKitContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const DashKitContext = react_1.default.createContext();
 exports.DashKitContext = DashKitContext;
+const DashKitDnDContext = react_1.default.createContext();
+exports.DashKitDnDContext = DashKitDnDContext;

package/build/cjs/hocs/withContext.js

@@ -4,6 +4,7 @@ exports.withContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+const common_1 = require("../constants/common");
 const DashKitContext_1 = require("../context/DashKitContext");
 const shared_1 = require("../shared");
 const utils_1 = require("../utils");
@@ -15,6 +16,10 @@ function useMemoStateContext(props) {
     // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
     const originalLayouts = react_1.default.useRef({});
     const adjustedLayouts = react_1.default.useRef({});
+    const [temporaryLayout, setTemporaryLayout] = react_1.default.useState(null);
+    const resetTemporaryLayout = react_1.default.useCallback(() => setTemporaryLayout(null), [setTemporaryLayout]);
+    const dndContext = react_1.default.useContext(DashKitContext_1.DashKitDnDContext);
+    const outerDnDEnable = Boolean(dndContext);
     // TODO: need move originalLayouts, adjustedLayouts to state
     const [layoutUpdateCounter, forceUpdateLayout] = react_1.default.useState(0);
     const onChange = react_1.default.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams }) => {
@@ -45,12 +50,27 @@ function useMemoStateContext(props) {
         }
     }, [props.config, onChange]);
     const onItemRemove = react_1.default.useCallback((id) => {
-        onChange(utils_1.UpdateManager.removeItem({
-            id,
-            config: props.config,
-            itemsStateAndParams: props.itemsStateAndParams,
-        }));
-    }, [props.config, props.itemsStateAndParams, onChange]);
+        if (id === common_1.TEMPORARY_ITEM_ID) {
+            resetTemporaryLayout();
+        }
+        else {
+            if (temporaryLayout) {
+                setTemporaryLayout(temporaryLayout.filter(({ i }) => i !== id));
+            }
+            onChange(utils_1.UpdateManager.removeItem({
+                id,
+                config: props.config,
+                itemsStateAndParams: props.itemsStateAndParams,
+            }));
+        }
+    }, [
+        props.config,
+        props.itemsStateAndParams,
+        temporaryLayout,
+        onChange,
+        setTemporaryLayout,
+        resetTemporaryLayout,
+    ]);
     const onItemStateAndParamsChange = react_1.default.useCallback((id, stateAndParams, options) => {
         onChange({
             itemsStateAndParams: utils_1.UpdateManager.changeStateAndParams({
@@ -124,8 +144,58 @@ function useMemoStateContext(props) {
     const reloadItems = react_1.default.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);
+    const draggedPluginRef = react_1.default.useRef(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
+    react_1.default.useEffect(() => {
+        if (!(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) && !temporaryLayout) {
+            draggedPluginRef.current = null;
+        }
+        else if (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) {
+            draggedPluginRef.current = dndContext.dragPluginType;
+        }
+    }, [draggedPluginRef, dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType, temporaryLayout]);
+    const dndPluginType = draggedPluginRef.current || (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
+    const dragOverPlugin = react_1.default.useMemo(() => {
+        const pluginType = dndPluginType;
+        if (pluginType === null && temporaryLayout === null)
+            return null;
+        if (props.registerManager.check(pluginType)) {
+            return props.registerManager.getItem(pluginType);
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error(`Uknown pluginType: ${pluginType}`);
+            return null;
+        }
+    }, [dndPluginType, props.registerManager, temporaryLayout]);
+    const onDropDragOver = react_1.default.useCallback(() => {
+        if (temporaryLayout) {
+            resetTemporaryLayout();
+            return false;
+        }
+        if (dragOverPlugin === null || dragOverPlugin === void 0 ? void 0 : dragOverPlugin.defaultLayout) {
+            const { h = 3, w = 3 } = dragOverPlugin.defaultLayout;
+            return { h, w };
+        }
+        return false;
+    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin]);
+    const onDrop = react_1.default.useCallback((newLayout, item) => {
+        setTemporaryLayout(newLayout);
+        const { i, w, h, x, y } = item;
+        props.onDrop({
+            newLayout: newLayout.reduce((memo, l) => {
+                if (l.i !== i) {
+                    memo.push({ i: l.i, w: l.w, h: l.h, x: l.x, y: l.y });
+                }
+                return memo;
+            }, []),
+            itemLayout: { w, h, x, y },
+            pluginType: dndPluginType,
+            commit: resetTemporaryLayout,
+        });
+    }, [dndPluginType, props.onDrop]);
     return react_1.default.useMemo(() => ({
         layout: resultLayout,
+        temporaryLayout,
         config: props.config,
         context: props.context,
         noOverlay: props.noOverlay,
@@ -139,6 +209,8 @@ function useMemoStateContext(props) {
         registerManager: props.registerManager,
         onItemStateAndParamsChange,
         removeItem: onItemRemove,
+        onDrop,
+        onDropDragOver,
         editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
@@ -147,8 +219,11 @@ function useMemoStateContext(props) {
         revertToOriginalLayout,
         forwardedMetaRef: props.forwardedMetaRef,
         draggableHandleClassName: props.draggableHandleClassName,
+        outerDnDEnable,
+        dragOverPlugin,
     }), [
         resultLayout,
+        temporaryLayout,
         props.config,
         props.context,
         props.noOverlay,
@@ -161,6 +236,8 @@ function useMemoStateContext(props) {
         props.registerManager,
         onItemStateAndParamsChange,
         onItemRemove,
+        onDrop,
+        onDropDragOver,
         props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
@@ -169,6 +246,8 @@ function useMemoStateContext(props) {
         revertToOriginalLayout,
         props.forwardedMetaRef,
         props.draggableHandleClassName,
+        outerDnDEnable,
+        dragOverPlugin,
     ]);
 }
 function withContext(Component) {

package/build/cjs/plugins/Text/Text.js

@@ -117,5 +117,8 @@ const plugin = {
     renderer(props, forwardedRef) {
         return react_1.default.createElement(PluginText, Object.assign({}, props, { apiHandler: plugin._apiHandler, ref: forwardedRef }));
     },
+    placeholderRenderer(_, forwardedRef) {
+        return react_1.default.createElement("div", { ref: forwardedRef }, "Text placeholder");
+    },
 };
 exports.default = plugin;

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

@@ -1,3 +1,4 @@
 export declare const CURRENT_VERSION = 2;
 export declare const META_KEY = "__meta__";
 export declare const ACTION_PARAM_PREFIX = "_ap_";
+export declare const TERMORARY_ITEM_ID = "__dropping-elem__";

package/build/cjs/shared/constants/common.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ACTION_PARAM_PREFIX = exports.META_KEY = exports.CURRENT_VERSION = void 0;
+exports.TERMORARY_ITEM_ID = exports.ACTION_PARAM_PREFIX = exports.META_KEY = exports.CURRENT_VERSION = void 0;
 exports.CURRENT_VERSION = 2;
 exports.META_KEY = '__meta__';
 exports.ACTION_PARAM_PREFIX = '_ap_';
+exports.TERMORARY_ITEM_ID = '__dropping-elem__';

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

@@ -8,3 +8,6 @@ export type SetConfigItem = ConfigItem | AddConfigItem;
 export type SetItemOptions = {
     excludeIds?: string[];
 };
+export type SetNewItemOptions = SetItemOptions & {
+    updateLayout?: ConfigLayout[];
+};

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

@@ -36,4 +36,5 @@ export interface PluginDefaultLayout {
 export interface Plugin<P extends PluginWidgetProps<T> = any, T = StringParams> extends PluginBase {
     defaultLayout?: PluginDefaultLayout;
     renderer: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;
+    placeholderRenderer?: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;
 }

package/build/cjs/utils/update-manager.d.ts

@@ -1,5 +1,5 @@
 import type { Config, ConfigItem, ItemStateAndParams, ItemStateAndParamsChangeOptions, ItemsStateAndParams } from '../shared';
-import type { AddConfigItem, SetItemOptions, WidgetLayout } from '../typings';
+import type { AddConfigItem, SetItemOptions, SetNewItemOptions, WidgetLayout } from '../typings';
 import { RegisterManagerPluginLayout } from './register-manager';
 interface RemoveItemArg {
     id: string;
@@ -19,7 +19,7 @@ export declare class UpdateManager {
         namespace: string;
         layout: RegisterManagerPluginLayout;
         config: Config;
-        options: SetItemOptions;
+        options: SetNewItemOptions;
     }): Config;
     static editItem({ item, namespace, config, options, }: {
         item: ConfigItem;

package/build/cjs/utils/update-manager.js

@@ -216,19 +216,37 @@ function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStat
 }
 class UpdateManager {
     static addItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, layout, config, options, }) {
-        const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
-        const saveDefaultLayout = (0, pick_1.default)(layout, ['h', 'w', 'x', 'y']);
         const salt = config.salt;
         const newItemData = getNewItemData({ item, config, salt, counter: config.counter, options });
         let counter = newItemData.counter;
         const newIdData = (0, get_new_id_1.getNewId)({ config, salt, counter, excludeIds: newItemData.excludeIds });
         counter = newIdData.counter;
         const newItem = Object.assign(Object.assign({}, item), { id: newIdData.id, data: newItemData.data, namespace });
-        return (0, immutability_helper_1.default)(config, {
-            items: { $push: [newItem] },
-            layout: { $push: [Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id })] },
-            counter: { $set: counter },
-        });
+        const saveDefaultLayout = (0, pick_1.default)(layout, ['h', 'w', 'x', 'y']);
+        if (options.updateLayout) {
+            const byId = options.updateLayout.reduce((memo, t) => {
+                memo[t.i] = t;
+                return memo;
+            }, {});
+            const newLayout = [
+                ...config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))),
+                Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id }),
+            ];
+            return (0, immutability_helper_1.default)(config, {
+                items: { $push: [newItem] },
+                layout: { $set: newLayout },
+                counter: { $set: counter },
+            });
+        }
+        else {
+            const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
+            const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id });
+            return (0, immutability_helper_1.default)(config, {
+                items: { $push: [newItem] },
+                layout: { $push: [newLayoutItem] },
+                counter: { $set: counter },
+            });
+        }
     }
     static editItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, config, options, }) {
         const itemIndex = config.items.findIndex(({ id }) => item.id === id);

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

@@ -1,4 +1,16 @@
-/// <reference types="react" />
+import React from 'react';
 import { ActionPanelProps } from './types';
 import './ActionPanel.css';
+export type ActionPanelItem = {
+    id: string;
+    icon: React.ReactNode;
+    title: string;
+    onClick?: () => void;
+    className?: string;
+    qa?: string;
+    pluginType?: string;
+};
+export declare const ActionPanelItemContainer: ({ item }: {
+    item: ActionPanelItem;
+}) => JSX.Element;
 export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element | null;

package/build/esm/components/ActionPanel/ActionPanel.js

@@ -1,18 +1,36 @@
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
+import { DashKitDnDContext } from '../../context/DashKitContext';
 import { cn } from '../../utils/cn';
 import './ActionPanel.css';
 const b = cn('dashkit-action-panel');
+export const ActionPanelItemContainer = ({ item }) => {
+    const dragContext = React.useContext(DashKitDnDContext);
+    const onDragStart = React.useCallback((e) => {
+        dragContext.onDragStart(e, item.pluginType);
+    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart, item.pluginType]);
+    const onDragEnd = React.useCallback((e) => {
+        dragContext.onDragEnd(e);
+    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd]);
+    let dndProps = {};
+    if (item.pluginType) {
+        dndProps = {
+            draggable: true,
+            unselectable: 'on',
+            onDragStart,
+            onDragEnd,
+        };
+    }
+    return (React.createElement("div", Object.assign({ role: "button", className: b('item', item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick, "data-qa": item.qa }, dndProps),
+        React.createElement("div", { className: b('icon') }, item.icon),
+        React.createElement("div", { className: b('title'), title: item.title }, item.title)));
+};
 export const ActionPanel = (props) => {
     var _a, _b;
     const isDisabled = (_a = props.disable) !== null && _a !== void 0 ? _a : false;
     const isAnimated = (_b = props.toggleAnimation) !== null && _b !== void 0 ? _b : false;
     const nodeRef = React.useRef(null);
-    const content = (React.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item) => {
-        return (React.createElement("div", { role: "button", className: b('item', item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick, "data-qa": item.qa },
-            React.createElement("div", { className: b('icon') }, item.icon),
-            React.createElement("div", { className: b('title'), title: item.title }, item.title)));
-    })));
+    const content = (React.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item, i) => (React.createElement(ActionPanelItemContainer, { key: `item_${i}`, item: item })))));
     if (isAnimated) {
         return (React.createElement(CSSTransition, { in: !isDisabled, nodeRef: nodeRef, classNames: b(null), timeout: 300, unmountOnExit: true }, content));
     }

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Config, ConfigItem, GlobalParams, ItemsStateAndParams } from '../../shared';
-import { ContextProps, Plugin, SetConfigItem, SetItemOptions, Settings, SettingsProps } from '../../typings';
+import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemsStateAndParams } from '../../shared';
+import { ContextProps, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
 interface DashKitGeneralProps {
@@ -15,6 +15,12 @@ interface DashKitDefaultProps {
         config: Config;
         itemsStateAndParams: ItemsStateAndParams;
     }) => void;
+    onDrop: (dropProps: {
+        commit: () => void;
+        pluginType: string;
+        itemLayout: ConfigLayout;
+        newLayout: ConfigLayout[];
+    }) => void;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
     itemsStateAndParams: ItemsStateAndParams;
@@ -34,7 +40,7 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
         item: SetConfigItem;
         namespace?: string;
         config: Config;
-        options?: SetItemOptions;
+        options?: SetNewItemOptions;
     }): Config;
     static removeItem({ id, config, itemsStateAndParams, }: {
         id: string;

package/build/esm/components/DashKit/DashKit.js

@@ -54,6 +54,7 @@ export class DashKit extends React.PureComponent {
 DashKit.defaultProps = {
     onItemEdit: noop,
     onChange: noop,
+    onDrop: noop,
     defaultGlobalParams: {},
     globalParams: {},
     itemsStateAndParams: {},

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

@@ -0,0 +1,6 @@
+import React from 'react';
+type DashKitDnDWrapperProps = {
+    children: React.ReactElement;
+};
+export declare const DashKitDnDWrapper: React.FC<DashKitDnDWrapperProps>;
+export {};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { DashKitDnDContext } from '../../context/DashKitContext';
+export const DashKitDnDWrapper = (props) => {
+    const [dragPluginType, setDragPluginType] = React.useState(null);
+    const onDragStart = React.useCallback((_, type) => {
+        setDragPluginType(type);
+    }, [setDragPluginType]);
+    const onDragEnd = React.useCallback((_) => {
+        setDragPluginType(null);
+    }, [setDragPluginType]);
+    const contextValue = React.useMemo(() => {
+        return {
+            dragPluginType,
+            onDragStart,
+            onDragEnd,
+        };
+    }, [dragPluginType, onDragStart, onDragEnd]);
+    return (React.createElement(DashKitDnDContext.Provider, { value: contextValue }, props.children));
+};

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

@@ -1,3 +1,3 @@
-declare const _default: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export default _default;
+export default GridItemForwarderRef;
+declare const GridItemForwarderRef: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

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

@@ -122,6 +122,8 @@ GridItem.propTypes = {
     onTouchStart: PropTypes.func,
 };
 GridItem.contextType = DashKitContext;
-export default React.forwardRef((props, ref) => {
+const GridItemForwarderRef = React.forwardRef((props, ref) => {
     return React.createElement(GridItem, Object.assign({}, props, { forwardedRef: ref }));
 });
+GridItemForwarderRef.displayName = 'forwardRef(GridItem)';
+export default GridItemForwarderRef;

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

@@ -21,6 +21,8 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     reloadItems(): void;
     _onStart: () => void;
     _onStop: (newLayout: any) => void;
+    _onDropDragOver: (e: any) => any;
+    _onDrop: (layout: any, item: any, e: any) => false | undefined;
     render(): JSX.Element;
 }
 import React from 'react';

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

@@ -1,9 +1,47 @@
 import React from 'react';
 import ReactGridLayout, { WidthProvider } from 'react-grid-layout';
-import { OVERLAY_CONTROLS_CLASS_NAME } from '../../constants';
+import { OVERLAY_CLASS_NAME, OVERLAY_CONTROLS_CLASS_NAME, TEMPORARY_ITEM_ID } from '../../constants';
 import { DashKitContext } from '../../context/DashKitContext';
 import GridItem from '../GridItem/GridItem';
-const Layout = WidthProvider(ReactGridLayout); // eslint-disable-line new-cap
+class DragOverLayout extends ReactGridLayout {
+    constructor() {
+        super(...arguments);
+        this.dragReset = () => {
+            if (this.dragEnterCounter) {
+                this.dragEnterCounter = 0;
+                this.removeDroppingPlaceholder();
+            }
+        };
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        window.addEventListener('dragend', this.dragReset);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('dragend', this.dragReset);
+    }
+    processGridItem(child, isDroppingItem) {
+        if (isDroppingItem) {
+            // 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
+            // like overlay adding className
+            const gridItem = super.processGridItem(child, isDroppingItem);
+            if (!gridItem)
+                return null;
+            const { props } = gridItem;
+            const { containerWidth, cols, w, h, rowHeight, margin, transformScale } = props;
+            const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
+            const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+            return React.cloneElement(gridItem, {
+                className: OVERLAY_CLASS_NAME,
+                droppingPosition: Object.assign(Object.assign({}, props.droppingPosition), { left: props.droppingPosition.left - leftOffset, top: props.droppingPosition.top - topOffset }),
+            });
+        }
+        return super.processGridItem(child, isDroppingItem);
+    }
+}
+const Layout = WidthProvider(DragOverLayout); // eslint-disable-line new-cap
 class GridLayout extends React.PureComponent {
     constructor(props, context) {
         super(props, context);
@@ -29,13 +67,38 @@ class GridLayout extends React.PureComponent {
             return getItemsMeta(this.pluginsRefs);
         };
         this._onStart = () => {
+            if (this.temporaryLayout)
+                return;
             this.setState({ isDragging: true });
         };
         this._onStop = (newLayout) => {
-            const { layoutChange } = this.context;
-            layoutChange(newLayout);
+            const { layoutChange, onDrop, temporaryLayout } = this.context;
+            if (temporaryLayout) {
+                onDrop === null || onDrop === void 0 ? void 0 : onDrop(newLayout, newLayout.find(({ i }) => i === TEMPORARY_ITEM_ID));
+            }
+            else {
+                layoutChange(newLayout);
+            }
             this.setState({ isDragging: false });
         };
+        this._onDropDragOver = (e) => {
+            const { editMode, onDropDragOver, temporaryLayout } = this.context;
+            if (!editMode) {
+                return false;
+            }
+            const result = onDropDragOver(e);
+            if (temporaryLayout) {
+                return false;
+            }
+            return result;
+        };
+        this._onDrop = (layout, item, e) => {
+            const { editMode, temporaryLayout, onDrop } = this.context;
+            if (!editMode && temporaryLayout) {
+                return false;
+            }
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(layout, item, e);
+        };
         this.pluginsRefs = [];
         this.state = {
             isDragging: false,
@@ -69,14 +132,20 @@ class GridLayout extends React.PureComponent {
         }
     }
     render() {
-        const { layout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, } = this.context;
+        const { layout, temporaryLayout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         this.pluginsRefs.length = config.items.length;
-        return (React.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
+        return (React.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: temporaryLayout || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
+            : null), (outerDnDEnable
+            ? {
+                isDroppable: true,
+                onDropDragOver: this._onDropDragOver,
+                onDrop: this._onDrop,
+            }
             : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }), config.items.map((item, i) => {
             return (React.createElement(GridItem, { forwardedPluginRef: (pluginRef) => {
                     this.pluginsRefs[i] = pluginRef;
-                }, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+                }, key: item.id, id: item.id, item: item, layout: temporaryLayout || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
         })));
     }
 }

package/build/esm/components/Item/Item.css

@@ -1,4 +1,4 @@
-.dashkit-item__renderer {
+.dashkit-item__placeholder, .dashkit-item__renderer {
   position: absolute;
   inset: 0;
 }

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

@@ -2,3 +2,4 @@ export * from './DashKit';
 export type { OverlayControlItem, PreparedCopyItemOptions } from './OverlayControls/OverlayControls';
 export * from './ActionPanel/ActionPanel';
 export type { ActionPanelItem, ActionPanelProps } from './ActionPanel/types';
+export * from './DashKitDnDWrapper/DashKitDnDWrapper';

package/build/esm/components/index.js

@@ -1,2 +1,3 @@
 export * from './DashKit';
 export * from './ActionPanel/ActionPanel';
+export * from './DashKitDnDWrapper/DashKitDnDWrapper';

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

@@ -1,6 +1,8 @@
 export declare const COPIED_WIDGET_STORE_KEY = "dashCopiedItem";
 export declare const DEFAULT_NAMESPACE = "default";
 export declare const OVERLAY_CONTROLS_CLASS_NAME = "dashkit-overlay-controls";
+export declare const OVERLAY_CLASS_NAME = "dashkit-grid-item__overlay";
+export declare const TEMPORARY_ITEM_ID = "__dropping-elem__";
 export declare const MenuItems: {
     readonly Copy: "copy";
     readonly Delete: "delete";

package/build/esm/constants/common.js

@@ -1,6 +1,8 @@
 export const COPIED_WIDGET_STORE_KEY = 'dashCopiedItem';
 export const DEFAULT_NAMESPACE = 'default';
 export const OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
+export const OVERLAY_CLASS_NAME = 'dashkit-grid-item__overlay';
+export const TEMPORARY_ITEM_ID = '__dropping-elem__';
 export const MenuItems = {
     Copy: 'copy',
     Delete: 'delete',

package/build/esm/context/DashKitContext.d.ts

@@ -1,2 +1,3 @@
 export const DashKitContext: React.Context<any>;
+export const DashKitDnDContext: React.Context<any>;
 import React from 'react';

package/build/esm/context/DashKitContext.js

@@ -1,3 +1,4 @@
 import React from 'react';
 const DashKitContext = React.createContext();
-export { DashKitContext };
+const DashKitDnDContext = React.createContext();
+export { DashKitContext, DashKitDnDContext };

package/build/esm/hocs/withContext.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
-import { DashKitContext } from '../context/DashKitContext';
+import { TEMPORARY_ITEM_ID } from '../constants/common';
+import { DashKitContext, DashKitDnDContext } from '../context/DashKitContext';
 import { getItemsParams, getItemsState } from '../shared';
 import { UpdateManager } from '../utils';
 function useMemoStateContext(props) {
@@ -11,6 +12,10 @@ function useMemoStateContext(props) {
     // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
     const originalLayouts = React.useRef({});
     const adjustedLayouts = React.useRef({});
+    const [temporaryLayout, setTemporaryLayout] = React.useState(null);
+    const resetTemporaryLayout = React.useCallback(() => setTemporaryLayout(null), [setTemporaryLayout]);
+    const dndContext = React.useContext(DashKitDnDContext);
+    const outerDnDEnable = Boolean(dndContext);
     // TODO: need move originalLayouts, adjustedLayouts to state
     const [layoutUpdateCounter, forceUpdateLayout] = React.useState(0);
     const onChange = React.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams }) => {
@@ -41,12 +46,27 @@ function useMemoStateContext(props) {
         }
     }, [props.config, onChange]);
     const onItemRemove = React.useCallback((id) => {
-        onChange(UpdateManager.removeItem({
-            id,
-            config: props.config,
-            itemsStateAndParams: props.itemsStateAndParams,
-        }));
-    }, [props.config, props.itemsStateAndParams, onChange]);
+        if (id === TEMPORARY_ITEM_ID) {
+            resetTemporaryLayout();
+        }
+        else {
+            if (temporaryLayout) {
+                setTemporaryLayout(temporaryLayout.filter(({ i }) => i !== id));
+            }
+            onChange(UpdateManager.removeItem({
+                id,
+                config: props.config,
+                itemsStateAndParams: props.itemsStateAndParams,
+            }));
+        }
+    }, [
+        props.config,
+        props.itemsStateAndParams,
+        temporaryLayout,
+        onChange,
+        setTemporaryLayout,
+        resetTemporaryLayout,
+    ]);
     const onItemStateAndParamsChange = React.useCallback((id, stateAndParams, options) => {
         onChange({
             itemsStateAndParams: UpdateManager.changeStateAndParams({
@@ -120,8 +140,58 @@ function useMemoStateContext(props) {
     const reloadItems = React.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);
+    const draggedPluginRef = React.useRef(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
+    React.useEffect(() => {
+        if (!(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) && !temporaryLayout) {
+            draggedPluginRef.current = null;
+        }
+        else if (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) {
+            draggedPluginRef.current = dndContext.dragPluginType;
+        }
+    }, [draggedPluginRef, dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType, temporaryLayout]);
+    const dndPluginType = draggedPluginRef.current || (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
+    const dragOverPlugin = React.useMemo(() => {
+        const pluginType = dndPluginType;
+        if (pluginType === null && temporaryLayout === null)
+            return null;
+        if (props.registerManager.check(pluginType)) {
+            return props.registerManager.getItem(pluginType);
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error(`Uknown pluginType: ${pluginType}`);
+            return null;
+        }
+    }, [dndPluginType, props.registerManager, temporaryLayout]);
+    const onDropDragOver = React.useCallback(() => {
+        if (temporaryLayout) {
+            resetTemporaryLayout();
+            return false;
+        }
+        if (dragOverPlugin === null || dragOverPlugin === void 0 ? void 0 : dragOverPlugin.defaultLayout) {
+            const { h = 3, w = 3 } = dragOverPlugin.defaultLayout;
+            return { h, w };
+        }
+        return false;
+    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin]);
+    const onDrop = React.useCallback((newLayout, item) => {
+        setTemporaryLayout(newLayout);
+        const { i, w, h, x, y } = item;
+        props.onDrop({
+            newLayout: newLayout.reduce((memo, l) => {
+                if (l.i !== i) {
+                    memo.push({ i: l.i, w: l.w, h: l.h, x: l.x, y: l.y });
+                }
+                return memo;
+            }, []),
+            itemLayout: { w, h, x, y },
+            pluginType: dndPluginType,
+            commit: resetTemporaryLayout,
+        });
+    }, [dndPluginType, props.onDrop]);
     return React.useMemo(() => ({
         layout: resultLayout,
+        temporaryLayout,
         config: props.config,
         context: props.context,
         noOverlay: props.noOverlay,
@@ -135,6 +205,8 @@ function useMemoStateContext(props) {
         registerManager: props.registerManager,
         onItemStateAndParamsChange,
         removeItem: onItemRemove,
+        onDrop,
+        onDropDragOver,
         editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
@@ -143,8 +215,11 @@ function useMemoStateContext(props) {
         revertToOriginalLayout,
         forwardedMetaRef: props.forwardedMetaRef,
         draggableHandleClassName: props.draggableHandleClassName,
+        outerDnDEnable,
+        dragOverPlugin,
     }), [
         resultLayout,
+        temporaryLayout,
         props.config,
         props.context,
         props.noOverlay,
@@ -157,6 +232,8 @@ function useMemoStateContext(props) {
         props.registerManager,
         onItemStateAndParamsChange,
         onItemRemove,
+        onDrop,
+        onDropDragOver,
         props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
@@ -165,6 +242,8 @@ function useMemoStateContext(props) {
         revertToOriginalLayout,
         props.forwardedMetaRef,
         props.draggableHandleClassName,
+        outerDnDEnable,
+        dragOverPlugin,
     ]);
 }
 export function withContext(Component) {

package/build/esm/plugins/Text/Text.js

@@ -113,5 +113,8 @@ const plugin = {
     renderer(props, forwardedRef) {
         return React.createElement(PluginText, Object.assign({}, props, { apiHandler: plugin._apiHandler, ref: forwardedRef }));
     },
+    placeholderRenderer(_, forwardedRef) {
+        return React.createElement("div", { ref: forwardedRef }, "Text placeholder");
+    },
 };
 export default plugin;

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

@@ -1,3 +1,4 @@
 export declare const CURRENT_VERSION = 2;
 export declare const META_KEY = "__meta__";
 export declare const ACTION_PARAM_PREFIX = "_ap_";
+export declare const TERMORARY_ITEM_ID = "__dropping-elem__";

package/build/esm/shared/constants/common.js

@@ -1,3 +1,4 @@
 export const CURRENT_VERSION = 2;
 export const META_KEY = '__meta__';
 export const ACTION_PARAM_PREFIX = '_ap_';
+export const TERMORARY_ITEM_ID = '__dropping-elem__';

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

@@ -8,3 +8,6 @@ export type SetConfigItem = ConfigItem | AddConfigItem;
 export type SetItemOptions = {
     excludeIds?: string[];
 };
+export type SetNewItemOptions = SetItemOptions & {
+    updateLayout?: ConfigLayout[];
+};

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

@@ -36,4 +36,5 @@ export interface PluginDefaultLayout {
 export interface Plugin<P extends PluginWidgetProps<T> = any, T = StringParams> extends PluginBase {
     defaultLayout?: PluginDefaultLayout;
     renderer: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;
+    placeholderRenderer?: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;
 }

package/build/esm/utils/update-manager.d.ts

@@ -1,5 +1,5 @@
 import type { Config, ConfigItem, ItemStateAndParams, ItemStateAndParamsChangeOptions, ItemsStateAndParams } from '../shared';
-import type { AddConfigItem, SetItemOptions, WidgetLayout } from '../typings';
+import type { AddConfigItem, SetItemOptions, SetNewItemOptions, WidgetLayout } from '../typings';
 import { RegisterManagerPluginLayout } from './register-manager';
 interface RemoveItemArg {
     id: string;
@@ -19,7 +19,7 @@ export declare class UpdateManager {
         namespace: string;
         layout: RegisterManagerPluginLayout;
         config: Config;
-        options: SetItemOptions;
+        options: SetNewItemOptions;
     }): Config;
     static editItem({ item, namespace, config, options, }: {
         item: ConfigItem;

package/build/esm/utils/update-manager.js

@@ -212,19 +212,37 @@ function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStat
 }
 export class UpdateManager {
     static addItem({ item, namespace = DEFAULT_NAMESPACE, layout, config, options, }) {
-        const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
-        const saveDefaultLayout = pick(layout, ['h', 'w', 'x', 'y']);
         const salt = config.salt;
         const newItemData = getNewItemData({ item, config, salt, counter: config.counter, options });
         let counter = newItemData.counter;
         const newIdData = getNewId({ config, salt, counter, excludeIds: newItemData.excludeIds });
         counter = newIdData.counter;
         const newItem = Object.assign(Object.assign({}, item), { id: newIdData.id, data: newItemData.data, namespace });
-        return update(config, {
-            items: { $push: [newItem] },
-            layout: { $push: [Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id })] },
-            counter: { $set: counter },
-        });
+        const saveDefaultLayout = pick(layout, ['h', 'w', 'x', 'y']);
+        if (options.updateLayout) {
+            const byId = options.updateLayout.reduce((memo, t) => {
+                memo[t.i] = t;
+                return memo;
+            }, {});
+            const newLayout = [
+                ...config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))),
+                Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id }),
+            ];
+            return update(config, {
+                items: { $push: [newItem] },
+                layout: { $set: newLayout },
+                counter: { $set: counter },
+            });
+        }
+        else {
+            const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
+            const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id });
+            return update(config, {
+                items: { $push: [newItem] },
+                layout: { $push: [newLayoutItem] },
+                counter: { $set: counter },
+            });
+        }
     }
     static editItem({ item, namespace = DEFAULT_NAMESPACE, config, options, }) {
         const itemIndex = config.items.findIndex(({ id }) => item.id === id);

package/package.json

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