@gravity-ui/dashkit 8.1.0 → 8.2.0

package/README.md

@@ -29,6 +29,7 @@ interface DashKitProps {
   editMode: boolean;
   onItemEdit: ({id}: {id: string}) => void;
   onChange: (data: {config: Config; itemsStateAndParams: ItemsStateAndParams}) => void;
+  onDrop: (dropProps: ItemDropProps) => void;
   defaultGlobalParams: GlobalParams;
   globalParams: GlobalParams;
   itemsStateAndParams: ItemsStateAndParams;
@@ -36,6 +37,8 @@ interface DashKitProps {
   context: ContextProps;
   overlayControls?: Record<string, OverlayControlItem[]>;
   noOverlay?: boolean;
+  focusable?: boolean;
+  draggableHandleClassName?: string;
 }
 ```
 
@@ -43,6 +46,7 @@ interface DashKitProps {
 - **editMode**: Whether edit mode is enabled.
 - **onItemEdit**: Called when you click to edit a widget.
 - **onChange**: Called when config or [itemsStateAndParams](#temsStateAndParams) are changed.
+- **onDrop**: Called when item dropped from ActionPanel using (#DashKitDnDWrapper)
 - **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).
 - **settings**: DashKit settings.
@@ -208,6 +212,23 @@ const config: DashKitProps['config'] = {
 Add a new item to the config:
 
 ```ts
+const newLayout = updateLayout: [
+  {
+    h: 6,
+    i: 'Ea',
+    w: 12,
+    x: 0,
+    y: 6,
+  },
+  {
+    h: 4,
+    i: 'Dk',
+    w: 8,
+    x: 0,
+    y: 12,
+  },
+];
+
 const newConfig = DashKit.setItem({
   item: {
     data: {
@@ -215,8 +236,19 @@ const newConfig = DashKit.setItem({
     },
     namespace: 'default',
     type: 'text',
+    // Optional. If new item needed to be inserted in current layout with predefined dimensions
+    layout: { // Current item inseterted before 'Ea'
+      h: 6,
+      w: 12,
+      x: 0,
+      y: 2,
+    },,
   },
   config: config,
+  options: {
+    // Optional. New layout values for existing items when new element is dropped from ActionPanel
+    updateLayout: newLayout,
+  },
 });
 ```
 
@@ -314,6 +346,69 @@ type MenuItem = {
 DashKit.setSettings({menu: [] as Array<MenuItem>});
 ```
 
+### Draggable items from ActionPanel
+
+#### DashKitDnDWrapper
+
+```ts
+interface DashKitDnDWrapperProps {
+  dragImageSrc?: string;
+  onDragStart?: (dragProps: ItemDragProps) => void;
+  onDragEnd?: () => void;
+}
+```
+
+- **dragImageSrc**: Drag image preview, by default used transparent 1px png base64
+- **onDragStart**: Callback called when element is dragged from ActionPanel
+- **onDragEnd**: Callback called when element dropped or drag canceled
+
+```ts
+type ItemDragProps = {
+    type: string; // Plugin type
+    layout?: { // Optional. Layout item size for preview and init
+        w?: number;
+        h?: number;
+    };
+    extra?: any; // Custom user context
+};
+```
+
+```ts
+type ItemDropProps = {
+    commit: () => void; // Callback should be called after all config operations are made
+    dragProps: ItemDragProps; // Item drag props
+    itemLayout: ConfigLayout; // Calculated item layout dimensions
+    newLayout: ConfigLayout[]; // New layout after element is dropped
+};
+```
+
+
+#### Example:
+
+```jsx
+const menuItems = [
+  {
+    id: 'chart',
+    icon: <Icon data={ChartColumn} />,
+    title: 'Chart',
+    qa: 'chart',
+    dragProps: { // ItemDragProps
+        type: 'custom', // Registered plugin type
+    },
+  }
+]
+
+const onDrop = (dropProps: ItemDropProps) => {
+  // ... add element to your config
+  dropProps.commit();
+}
+
+<DashKitDnDWrapper>
+  <DashKit editMode={true} config={config} onChange={onChange} onDrop={onDrop} />
+  <ActionPanel items={menuItems} />
+</DashKitDnDWrapper>
+```
+
 ### CSS API
 
 | Name                                           | Description           |

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

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-import { ActionPanelProps } from './types';
+import { ActionPanelItem, ActionPanelProps } from './types';
+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,25 @@
 "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 useDnDItemProps_1 = require("../../hooks/useDnDItemProps");
 const cn_1 = require("../../utils/cn");
 const b = (0, cn_1.cn)('dashkit-action-panel');
+const ActionPanelItemContainer = ({ item }) => {
+    const dndProps = (0, useDnDItemProps_1.useDnDItemProps)(item);
+    return (react_1.default.createElement("div", Object.assign({ role: "button", className: b('item', { draggable: Boolean(dndProps) }, item.className), 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) => (react_1.default.createElement(exports.ActionPanelItemContainer, { key: `dk-action-panel-${item.id}`, 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/ActionPanel/types.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
+import type { ItemDragProps } from '../../shared';
 export type ActionPanelItem = {
     id: string;
     icon: React.ReactNode;
     title: string;
-    onClick?: () => void;
     className?: string;
     qa?: string;
+    onClick?: () => void;
+    dragProps?: ItemDragProps;
 };
 export type ActionPanelProps = {
     items: ActionPanelItem[];

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, GlobalParams, ItemDropProps, 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,7 @@ interface DashKitDefaultProps {
         config: Config;
         itemsStateAndParams: ItemsStateAndParams;
     }) => void;
+    onDrop: (dropProps: ItemDropProps) => void;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
     itemsStateAndParams: ItemsStateAndParams;
@@ -34,7 +35,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,10 @@
+import React from 'react';
+import type { ItemDragProps } from '../../shared';
+type DashKitDnDWrapperProps = {
+    dragImageSrc?: string;
+    onDragStart?: (dragProps: ItemDragProps) => void;
+    onDragEnd?: () => void;
+    children: React.ReactElement;
+};
+export declare const DashKitDnDWrapper: React.FC<DashKitDnDWrapperProps>;
+export {};

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

@@ -0,0 +1,35 @@
+"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 defaultImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+const DashKitDnDWrapper = (props) => {
+    const [dragProps, setDragProps] = react_1.default.useState(null);
+    const dragImagePreview = react_1.default.useMemo(() => {
+        const img = new Image();
+        img.src = props.dragImageSrc || defaultImageSrc;
+        return img;
+    }, [props.dragImageSrc]);
+    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]);
+    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]);
+    const contextValue = react_1.default.useMemo(() => {
+        return {
+            dragProps,
+            dragImagePreview,
+            onDragStart,
+            onDragEnd,
+        };
+    }, [dragProps, dragImagePreview, 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

@@ -58,9 +58,9 @@ class GridItem extends react_1.default.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;
@@ -72,7 +72,7 @@ class GridItem extends react_1.default.PureComponent {
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, } = 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);
@@ -97,7 +97,7 @@ class GridItem extends react_1.default.PureComponent {
             }
             : {})),
             react_1.default.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
-                react_1.default.createElement(Item_1.default, { 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_1.default.createElement(Item_1.default, { 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));
     }
@@ -111,6 +111,7 @@ GridItem.propTypes = {
     overlayControls: prop_types_1.default.object,
     forwardedRef: prop_types_1.default.any,
     forwardedPluginRef: prop_types_1.default.any,
+    isPlaceholder: prop_types_1.default.bool,
     // from react-grid-layout:
     children: prop_types_1.default.node,
     className: prop_types_1.default.string,
@@ -124,6 +125,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,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/cjs/components/GridLayout/GridLayout.js

@@ -2,11 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const react_grid_layout_1 = tslib_1.__importStar(require("react-grid-layout"));
 const constants_1 = require("../../constants");
 const 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
+const ReactGridLayout_1 = require("./ReactGridLayout");
 class GridLayout extends react_1.default.PureComponent {
     constructor(props, context) {
         super(props, context);
@@ -32,13 +31,37 @@ 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, 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,
@@ -71,16 +94,33 @@ class GridLayout extends react_1.default.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 = constants_1.TEMPORARY_ITEM_ID;
+        const { type } = temporaryLayout.dragProps;
+        return (react_1.default.createElement(GridItem_1.default, { 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_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(ReactGridLayout_1.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: `.${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 }));
-        })));
+            : 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: (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_1.DashKitContext;

package/build/cjs/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/cjs/components/GridLayout/ReactGridLayout.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Layout = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_grid_layout_1 = tslib_1.__importStar(require("react-grid-layout"));
+const constants_1 = require("../../constants");
+class DragOverLayout extends react_grid_layout_1.default {
+    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_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 gridItem;
+    }
+}
+// eslint-disable-next-line new-cap
+exports.Layout = (0, react_grid_layout_1.WidthProvider)(DragOverLayout);

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/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/cjs/components/Item/Item.js

@@ -7,11 +7,16 @@ const prepareItem_1 = require("../../hocs/prepareItem");
 const cn_1 = require("../../utils/cn");
 const b = (0, cn_1.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_1.default.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_1.default.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)));
 };
 Item.propTypes = {
@@ -19,5 +24,6 @@ Item.propTypes = {
     rendererProps: prop_types_1.default.object,
     registerManager: prop_types_1.default.object,
     type: prop_types_1.default.string,
+    isPlaceholder: prop_types_1.default.bool,
 };
 exports.default = (0, prepareItem_1.prepareItem)(Item);

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

@@ -183,8 +183,8 @@ class OverlayControls extends react_1.default.Component {
                 };
             });
         items = items.filter(Boolean);
-        return (react_1.default.createElement(uikit_1.DropdownMenu, { items: items, switcher: react_1.default.createElement(uikit_1.Button, { view: view, size: size, pin: "brick-round", qa: "dashkit-overlay-control-menu" },
-                react_1.default.createElement(uikit_1.Icon, { data: DotsIcon_1.DotsIcon, size: "16" })) }));
+        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: "brick-round", qa: "dashkit-overlay-control-menu" }),
+                react_1.default.createElement(uikit_1.Icon, { data: DotsIcon_1.DotsIcon, size: "16" }))) }));
     }
     getControlItemPinStyle(index, itemsLength) {
         const isOnlyOneItem = itemsLength === 1;

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,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/cjs/constants/common.js

@@ -1,11 +1,15 @@
 "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.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = 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',
     Settings: 'settings',
 };
+exports.DEFAULT_WIDGET_HEIGHT = 3;
+exports.DEFAULT_WIDGET_WIDTH = 3;

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/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/cjs/hocs/prepareItem.js

@@ -26,7 +26,7 @@ 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 = {
@@ -45,8 +45,9 @@ function prepareItem(Component) {
                     layout,
                     gridLayout: registerManager.gridLayout,
                     adjustWidgetLayout,
+                    isPlaceholder,
                 };
-                return (react_1.default.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type }));
+                return (react_1.default.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
             }
         },
         _a.propTypes = {
@@ -58,6 +59,7 @@ function prepareItem(Component) {
             width: prop_types_1.default.number,
             height: prop_types_1.default.number,
             transform: prop_types_1.default.string,
+            isPlaceholder: prop_types_1.default.bool,
             forwardedPluginRef: prop_types_1.default.any,
         },
         _a.contextType = DashKitContext_1.DashKitContext,