@gravity-ui/dashkit 8.1.0-beta.4 → 8.1.0-beta.5

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

@@ -4,27 +4,12 @@ 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 useDnDItemProps_1 = require("../../hooks/useDnDItemProps");
 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 === null || dragContext === void 0 ? void 0 : dragContext.onDragStart(e, item.dragProps);
-    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart, item.dragProps]);
-    const onDragEnd = react_1.default.useCallback((e) => {
-        dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd(e);
-    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd]);
-    let dndProps = {};
-    if (item.dragProps) {
-        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),
+    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), 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)));
 };

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Config, ConfigItem, ConfigLayout, DragProps, GlobalParams, ItemsStateAndParams } from '../../shared';
+import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDragProps, ItemsStateAndParams } from '../../shared';
 import { ContextProps, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
@@ -17,7 +17,7 @@ interface DashKitDefaultProps {
     }) => void;
     onDrop: (dropProps: {
         commit: () => void;
-        dragProps: DragProps;
+        dragProps: ItemDragProps;
         itemLayout: ConfigLayout;
         newLayout: ConfigLayout[];
     }) => void;

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

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

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

@@ -4,8 +4,14 @@ 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(1, 1);
+        img.src = props.dragImageSrc || defaultImageSrc;
+        return img;
+    }, [props]);
     const onDragStart = react_1.default.useCallback((_, currentProps) => {
         setDragProps(currentProps);
     }, [setDragProps]);
@@ -15,10 +21,11 @@ const DashKitDnDWrapper = (props) => {
     const contextValue = react_1.default.useMemo(() => {
         return {
             dragProps,
+            dragImagePreview,
             onDragStart,
             onDragEnd,
         };
-    }, [dragProps, 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/GridLayout/GridLayout.js

@@ -2,49 +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"));
-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) {
-        const gridItem = super.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
-            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;
-    }
-}
-const Layout = (0, react_grid_layout_1.WidthProvider)(DragOverLayout); // eslint-disable-line new-cap
+const ReactGridLayout_1 = require("./ReactGridLayout");
 class GridLayout extends react_1.default.PureComponent {
     constructor(props, context) {
         super(props, context);
@@ -145,7 +106,7 @@ class GridLayout extends react_1.default.PureComponent {
     render() {
         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: temporaryLayout || 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 || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {

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

@@ -8,3 +8,5 @@ export declare const MenuItems: {
     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,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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';
@@ -11,3 +11,5 @@ exports.MenuItems = {
     Delete: 'delete',
     Settings: 'settings',
 };
+exports.DEFAULT_WIDGET_HEIGHT = 3;
+exports.DEFAULT_WIDGET_WIDTH = 3;

package/build/cjs/hocs/withContext.js

@@ -8,8 +8,6 @@ const common_1 = require("../constants/common");
 const DashKitContext_1 = require("../context/DashKitContext");
 const shared_1 = require("../shared");
 const utils_1 = require("../utils");
-const DEFAULT_HEIGHT = 3;
-const DEFAULT_WIDTH = 3;
 function useMemoStateContext(props) {
     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
     // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
@@ -148,7 +146,7 @@ function useMemoStateContext(props) {
     }, []);
     const dragProps = dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragProps;
     const dragOverPlugin = react_1.default.useMemo(() => {
-        if (dragProps === null) {
+        if (!dragProps) {
             return null;
         }
         const pluginType = dragProps.type;
@@ -168,7 +166,7 @@ function useMemoStateContext(props) {
         }
         if (dragOverPlugin) {
             const { defaultLayout } = dragOverPlugin;
-            const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDTH } = dragProps;
+            const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || common_1.DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || common_1.DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
             return { h, w };
         }
         return false;

package/build/cjs/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/cjs/hooks/useDnDItemProps.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDnDItemProps = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const DashKitContext_1 = require("../context/DashKitContext");
+const useDnDItemProps = (item) => {
+    const dragContext = react_1.default.useContext(DashKitContext_1.DashKitDnDContext);
+    const onDragStart = react_1.default.useCallback((e) => {
+        if (dragContext && item.dragProps) {
+            dragContext.onDragStart(e, item.dragProps);
+            e.dataTransfer.setDragImage(dragContext.dragImagePreview, 0, 0);
+        }
+    }, [dragContext, item.dragProps]);
+    const onDragEnd = react_1.default.useCallback((e) => {
+        if (dragContext) {
+            dragContext.onDragEnd(e);
+        }
+    }, [dragContext]);
+    if (dragContext && item.dragProps) {
+        return {
+            draggable: true,
+            unselectable: 'on',
+            onDragStart,
+            onDragEnd,
+        };
+    }
+    return null;
+};
+exports.useDnDItemProps = useDnDItemProps;

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

@@ -3,3 +3,10 @@ export interface StringParams extends Dictionary<string | string[]> {
 }
 export interface GlobalParams extends StringParams {
 }
+export type ItemDragProps = {
+    type: string;
+    layout?: {
+        w?: number;
+        h?: number;
+    };
+};

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

@@ -1,9 +1,4 @@
 import { StringParams } from './common';
-export type DragProps = {
-    type: string;
-    w?: number;
-    h?: number;
-};
 export interface ConfigLayout {
     i: string;
     h: number;

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

@@ -1,27 +1,12 @@
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { DashKitDnDContext } from '../../context/DashKitContext';
+import { useDnDItemProps } from '../../hooks/useDnDItemProps';
 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 === null || dragContext === void 0 ? void 0 : dragContext.onDragStart(e, item.dragProps);
-    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart, item.dragProps]);
-    const onDragEnd = React.useCallback((e) => {
-        dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd(e);
-    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd]);
-    let dndProps = {};
-    if (item.dragProps) {
-        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),
+    const dndProps = useDnDItemProps(item);
+    return (React.createElement("div", Object.assign({ role: "button", className: b('item', { draggable: Boolean(dndProps) }, 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)));
 };

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Config, ConfigItem, ConfigLayout, DragProps, GlobalParams, ItemsStateAndParams } from '../../shared';
+import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDragProps, ItemsStateAndParams } from '../../shared';
 import { ContextProps, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
@@ -17,7 +17,7 @@ interface DashKitDefaultProps {
     }) => void;
     onDrop: (dropProps: {
         commit: () => void;
-        dragProps: DragProps;
+        dragProps: ItemDragProps;
         itemLayout: ConfigLayout;
         newLayout: ConfigLayout[];
     }) => void;

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

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

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

@@ -1,7 +1,13 @@
 import React from 'react';
 import { DashKitDnDContext } from '../../context/DashKitContext';
+const defaultImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 export const DashKitDnDWrapper = (props) => {
     const [dragProps, setDragProps] = React.useState(null);
+    const dragImagePreview = React.useMemo(() => {
+        const img = new Image(1, 1);
+        img.src = props.dragImageSrc || defaultImageSrc;
+        return img;
+    }, [props]);
     const onDragStart = React.useCallback((_, currentProps) => {
         setDragProps(currentProps);
     }, [setDragProps]);
@@ -11,9 +17,10 @@ export const DashKitDnDWrapper = (props) => {
     const contextValue = React.useMemo(() => {
         return {
             dragProps,
+            dragImagePreview,
             onDragStart,
             onDragEnd,
         };
-    }, [dragProps, onDragStart, onDragEnd]);
+    }, [dragProps, dragImagePreview, onDragStart, onDragEnd]);
     return (React.createElement(DashKitDnDContext.Provider, { value: contextValue }, props.children));
 };

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

@@ -1,47 +1,8 @@
 import React from 'react';
-import ReactGridLayout, { WidthProvider } from 'react-grid-layout';
-import { OVERLAY_CLASS_NAME, OVERLAY_CONTROLS_CLASS_NAME, TEMPORARY_ITEM_ID } from '../../constants';
+import { OVERLAY_CONTROLS_CLASS_NAME, TEMPORARY_ITEM_ID } from '../../constants';
 import { DashKitContext } from '../../context/DashKitContext';
 import GridItem from '../GridItem/GridItem';
-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) {
-        const gridItem = super.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
-            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;
-    }
-}
-const Layout = WidthProvider(DragOverLayout); // eslint-disable-line new-cap
+import { Layout } from './ReactGridLayout';
 class GridLayout extends React.PureComponent {
     constructor(props, context) {
         super(props, context);

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

@@ -8,3 +8,5 @@ export declare const MenuItems: {
     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

@@ -8,3 +8,5 @@ export const MenuItems = {
     Delete: 'delete',
     Settings: 'settings',
 };
+export const DEFAULT_WIDGET_HEIGHT = 3;
+export const DEFAULT_WIDGET_WIDTH = 3;

package/build/esm/hocs/withContext.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
-import { TEMPORARY_ITEM_ID } from '../constants/common';
+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';
-const DEFAULT_HEIGHT = 3;
-const DEFAULT_WIDTH = 3;
 function useMemoStateContext(props) {
     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
     // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
@@ -144,7 +142,7 @@ function useMemoStateContext(props) {
     }, []);
     const dragProps = dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragProps;
     const dragOverPlugin = React.useMemo(() => {
-        if (dragProps === null) {
+        if (!dragProps) {
             return null;
         }
         const pluginType = dragProps.type;
@@ -164,7 +162,7 @@ function useMemoStateContext(props) {
         }
         if (dragOverPlugin) {
             const { defaultLayout } = dragOverPlugin;
-            const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDTH } = dragProps;
+            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;

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

@@ -3,3 +3,10 @@ export interface StringParams extends Dictionary<string | string[]> {
 }
 export interface GlobalParams extends StringParams {
 }
+export type ItemDragProps = {
+    type: string;
+    layout?: {
+        w?: number;
+        h?: number;
+    };
+};

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

@@ -1,9 +1,4 @@
 import { StringParams } from './common';
-export type DragProps = {
-    type: string;
-    w?: number;
-    h?: number;
-};
 export interface ConfigLayout {
     i: string;
     h: number;

package/package.json

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