@gravity-ui/dashkit 8.1.0 → 8.2.0-beta.0

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

@@ -56,9 +56,9 @@ class GridItem extends React.PureComponent {
         };
     }
     renderOverlay() {
-        const { overlayControls } = this.props;
+        const { overlayControls, isPlaceholder } = this.props;
         const { editMode } = this.context;
-        if (!editMode || this.props.item.data._editActive) {
+        if (!editMode || this.props.item.data._editActive || isPlaceholder) {
             return null;
         }
         const { item } = this.props;
@@ -70,7 +70,7 @@ class GridItem extends React.PureComponent {
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -95,7 +95,7 @@ class GridItem extends React.PureComponent {
             }
             : {})),
             React.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
-                React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
+                React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }
@@ -109,6 +109,7 @@ GridItem.propTypes = {
     overlayControls: PropTypes.object,
     forwardedRef: PropTypes.any,
     forwardedPluginRef: PropTypes.any,
+    isPlaceholder: PropTypes.bool,
     // from react-grid-layout:
     children: PropTypes.node,
     className: PropTypes.string,
@@ -122,6 +123,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,9 @@ 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;
+    renderTemporaryPlaceholder(): JSX.Element | null;
     render(): JSX.Element;
 }
 import React from 'react';

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import ReactGridLayout, { WidthProvider } from 'react-grid-layout';
-import { OVERLAY_CONTROLS_CLASS_NAME } from '../../constants';
+import { 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
+import { Layout } from './ReactGridLayout';
 class GridLayout extends React.PureComponent {
     constructor(props, context) {
         super(props, context);
@@ -29,13 +28,37 @@ 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, dragOverPlugin, onDropDragOver } = this.context;
+            if (!editMode || !dragOverPlugin) {
+                return false;
+            }
+            return onDropDragOver(e);
+        };
+        this._onDrop = (layout, item, e) => {
+            if (!item) {
+                return false;
+            }
+            const { editMode, onDrop } = this.context;
+            if (!editMode) {
+                return false;
+            }
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(layout, item, e);
+        };
         this.pluginsRefs = [];
         this.state = {
             isDragging: false,
@@ -68,16 +91,33 @@ class GridLayout extends React.PureComponent {
             this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
         }
     }
+    renderTemporaryPlaceholder() {
+        const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
+        if (!temporaryLayout || !temporaryLayout.dragProps) {
+            return null;
+        }
+        const id = TEMPORARY_ITEM_ID;
+        const { type } = temporaryLayout.dragProps;
+        return (React.createElement(GridItem, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+    }
     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 === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
-            : 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 }));
-        })));
+            : 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: (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+            }),
+            this.renderTemporaryPlaceholder()));
     }
 }
 GridLayout.contextType = DashKitContext;

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

@@ -0,0 +1,3 @@
+export const Layout: React.ComponentClass<ReactGridLayout.ReactGridLayoutProps & ReactGridLayout.WidthProviderProps, any>;
+import ReactGridLayout from 'react-grid-layout';
+import React from 'react';

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import ReactGridLayout, { WidthProvider } from 'react-grid-layout';
+import { OVERLAY_CLASS_NAME } from '../../constants';
+class DragOverLayout extends ReactGridLayout {
+    constructor() {
+        super(...arguments);
+        this.dragReset = () => {
+            if (this.dragEnterCounter) {
+                this.dragEnterCounter = 0;
+                this.removeDroppingPlaceholder();
+            }
+        };
+    }
+    componentDidMount() {
+        var _a;
+        (_a = super.componentDidMount) === null || _a === void 0 ? void 0 : _a.call(this);
+        window.addEventListener('dragend', this.dragReset);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('dragend', this.dragReset);
+    }
+    processGridItem(child, isDroppingItem) {
+        var _a;
+        const gridItem = (_a = super.processGridItem) === null || _a === void 0 ? void 0 : _a.call(this, 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
+            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 gridItem;
+    }
+}
+// eslint-disable-next-line new-cap
+export const Layout = WidthProvider(DragOverLayout);

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

@@ -56,6 +56,7 @@ declare const _default: {
         width: PropTypes.Requireable<number>;
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
+        isPlaceholder: PropTypes.Requireable<boolean>;
         forwardedPluginRef: PropTypes.Requireable<any>;
     };
     contextType: React.Context<any>;

package/build/esm/components/Item/Item.js

@@ -5,11 +5,16 @@ import { cn } from '../../utils/cn';
 import './Item.css';
 const b = cn('dashkit-item');
 // TODO: getDerivedStateFromError и заглушка с ошибкой
-const Item = ({ registerManager, rendererProps, type, forwardedPluginRef }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef }) => {
+    var _a, _b;
     if (!registerManager.check(type)) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
     }
+    if (isPlaceholder) {
+        return (React.createElement("div", { className: b('placeholder') }, ((_b = (_a = registerManager
+            .getItem(type)).placeholderRenderer) === null || _b === void 0 ? void 0 : _b.call(_a, rendererProps, forwardedPluginRef)) || null));
+    }
     return (React.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)));
 };
 Item.propTypes = {
@@ -17,5 +22,6 @@ Item.propTypes = {
     rendererProps: PropTypes.object,
     registerManager: PropTypes.object,
     type: PropTypes.string,
+    isPlaceholder: PropTypes.bool,
 };
 export default prepareItem(Item);

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

@@ -180,8 +180,8 @@ class OverlayControls extends React.Component {
                 };
             });
         items = items.filter(Boolean);
-        return (React.createElement(DropdownMenu, { items: items, switcher: React.createElement(Button, { view: view, size: size, pin: "brick-round", qa: "dashkit-overlay-control-menu" },
-                React.createElement(Icon, { data: DotsIcon, size: "16" })) }));
+        return (React.createElement(DropdownMenu, { items: items, renderSwitcher: (props) => (React.createElement(Button, Object.assign({}, props, { view: view, size: size, pin: "brick-round", qa: "dashkit-overlay-control-menu" }),
+                React.createElement(Icon, { data: DotsIcon, size: "16" }))) }));
     }
     getControlItemPinStyle(index, itemsLength) {
         const isOnlyOneItem = itemsLength === 1;

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,8 +1,12 @@
 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";
     readonly Settings: "settings";
 };
+export declare const DEFAULT_WIDGET_HEIGHT = 3;
+export declare const DEFAULT_WIDGET_WIDTH = 3;

package/build/esm/constants/common.js

@@ -1,8 +1,12 @@
 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',
     Settings: 'settings',
 };
+export const DEFAULT_WIDGET_HEIGHT = 3;
+export const DEFAULT_WIDGET_WIDTH = 3;

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

@@ -56,6 +56,7 @@ export function prepareItem(Component: any): {
         width: PropTypes.Requireable<number>;
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
+        isPlaceholder: PropTypes.Requireable<boolean>;
         forwardedPluginRef: PropTypes.Requireable<any>;
     };
     contextType: React.Context<any>;

package/build/esm/hocs/prepareItem.js

@@ -22,7 +22,7 @@ export function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { id, width, height, item, adjustWidgetLayout, layout } = this.props;
+                const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
                 const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                 const { type, data, defaults, namespace } = item;
                 const rendererProps = {
@@ -41,8 +41,9 @@ export function prepareItem(Component) {
                     layout,
                     gridLayout: registerManager.gridLayout,
                     adjustWidgetLayout,
+                    isPlaceholder,
                 };
-                return (React.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type }));
+                return (React.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
             }
         },
         _a.propTypes = {
@@ -54,6 +55,7 @@ export function prepareItem(Component) {
             width: PropTypes.number,
             height: PropTypes.number,
             transform: PropTypes.string,
+            isPlaceholder: PropTypes.bool,
             forwardedPluginRef: PropTypes.any,
         },
         _a.contextType = DashKitContext,

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 { DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, 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(Object.assign(Object.assign({}, temporaryLayout), { data: temporaryLayout.data.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,57 @@ 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 dragOverPlugin = React.useMemo(() => {
+        if (!dragProps) {
+            return null;
+        }
+        const pluginType = dragProps.type;
+        if (props.registerManager.check(pluginType)) {
+            return props.registerManager.getItem(pluginType);
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error(`Uknown pluginType: ${pluginType}`);
+            return null;
+        }
+    }, [dragProps, props.registerManager]);
+    const onDropDragOver = React.useCallback(() => {
+        if (temporaryLayout) {
+            resetTemporaryLayout();
+            return false;
+        }
+        if (dragOverPlugin) {
+            const { defaultLayout } = dragOverPlugin;
+            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.layout || {};
+            return { h, w };
+        }
+        return false;
+    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
+    const onDrop = React.useCallback((newLayout, item) => {
+        if (!dragProps) {
+            return;
+        }
+        setTemporaryLayout({
+            data: newLayout,
+            dragProps,
+        });
+        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 },
+            commit: resetTemporaryLayout,
+            dragProps,
+        });
+    }, [dragProps, props.onDrop, setTemporaryLayout, resetTemporaryLayout]);
     return React.useMemo(() => ({
         layout: resultLayout,
+        temporaryLayout,
         config: props.config,
         context: props.context,
         noOverlay: props.noOverlay,
@@ -135,6 +204,8 @@ function useMemoStateContext(props) {
         registerManager: props.registerManager,
         onItemStateAndParamsChange,
         removeItem: onItemRemove,
+        onDrop,
+        onDropDragOver,
         editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
@@ -143,8 +214,11 @@ function useMemoStateContext(props) {
         revertToOriginalLayout,
         forwardedMetaRef: props.forwardedMetaRef,
         draggableHandleClassName: props.draggableHandleClassName,
+        outerDnDEnable,
+        dragOverPlugin,
     }), [
         resultLayout,
+        temporaryLayout,
         props.config,
         props.context,
         props.noOverlay,
@@ -157,6 +231,8 @@ function useMemoStateContext(props) {
         props.registerManager,
         onItemStateAndParamsChange,
         onItemRemove,
+        onDrop,
+        onDropDragOver,
         props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
@@ -165,6 +241,8 @@ function useMemoStateContext(props) {
         revertToOriginalLayout,
         props.forwardedMetaRef,
         props.draggableHandleClassName,
+        outerDnDEnable,
+        dragOverPlugin,
     ]);
 }
 export function withContext(Component) {

package/build/esm/hooks/useDnDItemProps.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ActionPanelItem } from '../components';
+type DndProps = null | {
+    draggable: true;
+    unselectable: 'on';
+    onDragStart: React.DragEventHandler<HTMLDivElement>;
+    onDragEnd: React.DragEventHandler<HTMLDivElement>;
+};
+export declare const useDnDItemProps: (item: ActionPanelItem) => DndProps;
+export {};

package/build/esm/hooks/useDnDItemProps.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DashKitDnDContext } from '../context/DashKitContext';
+export const useDnDItemProps = (item) => {
+    const dragContext = React.useContext(DashKitDnDContext);
+    const onDragStart = React.useCallback((e) => {
+        if (dragContext && item.dragProps) {
+            dragContext.onDragStart(e, item.dragProps);
+            e.dataTransfer.setDragImage(dragContext.dragImagePreview, 0, 0);
+        }
+    }, [dragContext, item.dragProps]);
+    const onDragEnd = React.useCallback((e) => {
+        if (dragContext) {
+            dragContext.onDragEnd(e);
+        }
+    }, [dragContext]);
+    if (dragContext && item.dragProps) {
+        return {
+            draggable: true,
+            unselectable: 'on',
+            onDragStart,
+            onDragEnd,
+        };
+    }
+    return null;
+};

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/shared/modules/state-and-params.d.ts

@@ -5,9 +5,10 @@ export interface GetItemsParamsArg {
     config: Config;
     itemsStateAndParams: ItemsStateAndParams;
     plugins: PluginBase[];
+    useStateAsInitial?: boolean;
 }
 type GetItemsParamsReturn = Record<string, StringParams | Record<string, StringParams>>;
-export declare function getItemsParams({ defaultGlobalParams, globalParams, config, itemsStateAndParams, plugins, }: GetItemsParamsArg): GetItemsParamsReturn;
+export declare function getItemsParams({ defaultGlobalParams, globalParams, config, itemsStateAndParams, plugins, useStateAsInitial, }: GetItemsParamsArg): GetItemsParamsReturn;
 export declare function getItemsState({ config, itemsStateAndParams, }: {
     config: Config;
     itemsStateAndParams: ItemsStateAndParams;

package/build/esm/shared/modules/state-and-params.js

@@ -1,7 +1,18 @@
 import groupBy from 'lodash/groupBy';
 import { META_KEY } from '../constants';
 import { formQueueData, getCurrentVersion, getMapItemsIgnores, hasActionParam, isItemWithGroup, isItemWithTabs, mergeParamsWithAliases, pickActionParamsFromParams, pickExceptActionParamsFromParams, prerenderItems, resolveItemInnerId, } from './helpers';
-function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDefaultsByNamespace, getMergedParams, defaultGlobalParams, globalParams, isFirstVersion, queueData, }) {
+const getParamsFromStateAndParams = ({ itemsStateAndParams, parentItemId, item, }) => {
+    const widgetId = parentItemId || item.id;
+    if (!(widgetId in itemsStateAndParams)) {
+        return {};
+    }
+    const stateAndParams = itemsStateAndParams;
+    const itemParams = parentItemId
+        ? Object.assign({}, stateAndParams[widgetId].params[item.id])
+        : Object.assign({}, stateAndParams[widgetId].params);
+    return itemParams;
+};
+function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDefaultsByNamespace, getMergedParams, defaultGlobalParams, globalParams, isFirstVersion, queueData, parentItemId, useStateAsInitial, }) {
     var _a, _b;
     const { id, namespace } = item;
     let defaultWidgetParams = {};
@@ -20,7 +31,9 @@ function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDe
     // default parameters to begin with
     affectingItemsWithDefaults.reduceRight((defaultParams, itemWithDefaults) => {
         return Object.assign(Object.assign({}, defaultParams), getMergedParams(itemWithDefaults.defaults || {}));
-    }, {}), getMergedParams(globalParams));
+    }, {}), getMergedParams(globalParams), useStateAsInitial
+        ? getParamsFromStateAndParams({ parentItemId, item, itemsStateAndParams })
+        : {});
     if (isFirstVersion) {
         itemParams = Object.assign(itemParams, ((_b = itemsStateAndParams === null || itemsStateAndParams === void 0 ? void 0 : itemsStateAndParams[id]) === null || _b === void 0 ? void 0 : _b.params) || {});
     }
@@ -45,7 +58,7 @@ function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDe
     }
     return Object.assign(Object.assign({}, defaultWidgetParams), itemParams);
 }
-export function getItemsParams({ defaultGlobalParams = {}, globalParams = {}, config, itemsStateAndParams, plugins, }) {
+export function getItemsParams({ defaultGlobalParams = {}, globalParams = {}, config, itemsStateAndParams, plugins, useStateAsInitial, }) {
     const { aliases, connections } = config;
     const items = prerenderItems({ items: config.items, plugins });
     const isFirstVersion = getCurrentVersion(itemsStateAndParams) === 1;
@@ -88,10 +101,11 @@ export function getItemsParams({ defaultGlobalParams = {}, globalParams = {}, co
             globalParams,
             isFirstVersion,
             queueData,
+            useStateAsInitial,
         };
         if (isItemWithGroup(item)) {
             const groupParams = item.data.group.reduce((groupItemParams, groupItem) => {
-                groupItemParams[groupItem.id] = getItemParams(Object.assign({ item: groupItem }, paramsOptions));
+                groupItemParams[groupItem.id] = getItemParams(Object.assign({ item: groupItem, parentItemId: item.id }, paramsOptions));
                 return groupItemParams;
             }, {});
             return Object.assign(Object.assign({}, itemsParams), { [id]: groupParams });

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

@@ -1,5 +1,20 @@
+import { ConfigLayout } from './config';
 export type Dictionary<T = unknown> = Record<string, T>;
 export interface StringParams extends Dictionary<string | string[]> {
 }
 export interface GlobalParams extends StringParams {
 }
+export type ItemDragProps = {
+    type: string;
+    layout?: {
+        w?: number;
+        h?: number;
+    };
+    extra?: any;
+};
+export type ItemDropProps = {
+    commit: () => void;
+    dragProps: ItemDragProps;
+    itemLayout: ConfigLayout;
+    newLayout: ConfigLayout[];
+};

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;
 }