@gravity-ui/dashkit 8.13.0 → 8.14.1

package/README.md

@@ -24,6 +24,15 @@ Plugins are required to create custom widgets.
 ### Props
 
 ```ts
+type ItemManipulationCallback = (eventData: {
+    layout: Layouts;
+    oldItem: Layout;
+    newItem: Layout;
+    placeholder: Layout;
+    e: MouseEvent;
+    element: HTMLElement;
+}) => void;
+
 interface DashKitProps {
   config: Config;
   editMode: boolean;
@@ -32,6 +41,14 @@ interface DashKitProps {
   onDrop: (dropProps: ItemDropProps) => void;
   onItemMountChange: (item: ConfigItem, state: {isAsync: boolead; isMounted: boolean}) => void;
   onItemRender: (item: ConfigItem) => void;
+
+  onDragStart?: ItemManipulationCallback;
+  onDrag?: ItemManipulationCallback;
+  onDragStop?: ItemManipulationCallback;
+  onResizeStart?: ItemManipulationCallback;
+  onResize?: ItemManipulationCallback;
+  onResizeStop?: ItemManipulationCallback;
+
   defaultGlobalParams: GlobalParams;
   globalParams: GlobalParams;
   itemsStateAndParams: ItemsStateAndParams;
@@ -61,6 +78,12 @@ interface DashKitProps {
 - **noOverlay**: If `true`, overlay and controls are not displayed while editing.
 - **focusable**: If `true`, grid items will be focusable.
 - **draggableHandleClassName** : СSS class name of the element that makes the widget draggable.
+- **onDragStart**: ReactGridLayout called when item drag started
+- **onDrag**: ReactGridLayout called while item drag
+- **onDragStop**: ReactGridLayout called when item drag stopped
+- **onResizeStart**: ReactGridLayout called when item resize started
+- **onResize**: ReactGridLayout called while item resizing
+- **onResizeStop**: ReactGridLayout called when item resize stoped
 
 ## Usage
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
-import { AddNewItemOptions, ContextProps, DashKitGroup, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
+import { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
 interface DashKitGeneralProps {
@@ -17,12 +17,18 @@ interface DashKitDefaultProps {
         itemsStateAndParams: ItemsStateAndParams;
         groups?: DashKitGroup[];
     }) => void;
-    onDrop: (dropProps: ItemDropProps) => void;
+    onDrop?: (dropProps: ItemDropProps) => void;
     onItemMountChange?: (item: ConfigItem, state: {
         isAsync: boolean;
         isMounted: boolean;
     }) => void;
     onItemRender?: (item: ConfigItem) => void;
+    onDragStart?: ItemManipulationCallback;
+    onDrag?: ItemManipulationCallback;
+    onDragStop?: ItemManipulationCallback;
+    onResizeStart?: ItemManipulationCallback;
+    onResize?: ItemManipulationCallback;
+    onResizeStop?: ItemManipulationCallback;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
     itemsStateAndParams: ItemsStateAndParams;

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

@@ -25,8 +25,8 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     }) => void;
     getItemsMeta: () => any;
     getActiveLayout(): any;
-    getMemoGroupLayout: (group: any, layout: any) => any;
-    getMemoGroupCallbacks: (group: any) => any;
+    getMemoGroupLayout(group: any, layout: any): any;
+    getMemoGroupCallbacks(group: any): any;
     getMemoGroupProps: (group: any, renderLayout: any, properties: any) => {
         layout: any;
         callbacks: any;
@@ -38,9 +38,23 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     getMemoForwardRefCallback: (refIndex: any) => any;
     mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
     reloadItems(): void;
-    _onDragStart: (group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any) => void;
-    _onResizeStart: () => void;
-    _onTargetRestore: () => void;
+    prepareDefaultArguments(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): {
+        group: any;
+        layout: any;
+        oldItem: any;
+        newItem: any;
+        placeholder: any;
+        e: any;
+        element: any;
+    };
+    updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
+    _onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
+    _onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
+    _onDragStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
+    _onResizeStart(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
+    _onResize(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
+    _onResizeStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
+    _onTargetRestore(): void;
     _onStop: (group: any, newLayout: any) => void;
     _onSharedDrop: (targetGroup: any, newLayout: any, tempItem: any) => void;
     _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;

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

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const constants_1 = require("../../constants");
 const DashKitContext_1 = require("../../context/DashKitContext");
+const utils_1 = require("../../utils");
 const GridItem_1 = tslib_1.__importDefault(require("../GridItem/GridItem"));
 const ReactGridLayout_1 = require("./ReactGridLayout");
 class GridLayout extends react_1.default.PureComponent {
@@ -34,44 +35,6 @@ class GridLayout extends react_1.default.PureComponent {
             const { getItemsMeta } = this.context;
             return getItemsMeta(this.pluginsRefs);
         };
-        this.getMemoGroupLayout = (group, layout) => {
-            // fastest possible way to match json
-            const key = JSON.stringify(layout);
-            if (this._memoGroupsLayouts[group]) {
-                if (this._memoGroupsLayouts[group].key === key) {
-                    return this._memoGroupsLayouts[group];
-                }
-                else {
-                    this._memoGroupsLayouts[group].key = key;
-                    this._memoGroupsLayouts[group].layout = layout;
-                }
-            }
-            else {
-                this._memoGroupsLayouts[group] = {
-                    key,
-                    layout,
-                };
-            }
-            return this._memoGroupsLayouts[group];
-        };
-        this.getMemoGroupCallbacks = (group) => {
-            if (!this._memoCallbacksForGroups[group]) {
-                const onDragStart = this._onDragStart.bind(this, group);
-                const onStop = this._onStop.bind(this, group);
-                const onDrop = this._onDrop.bind(this, group);
-                const onDropDragOver = this._onDropDragOver.bind(this, group);
-                const onDragTargetRestore = this._onTargetRestore.bind(this, group);
-                this._memoCallbacksForGroups[group] = {
-                    onDragStart,
-                    onDragStop: onStop,
-                    onResizeStop: onStop,
-                    onDrop,
-                    onDropDragOver,
-                    onDragTargetRestore,
-                };
-            }
-            return this._memoCallbacksForGroups[group];
-        };
         this.getMemoGroupProps = (group, renderLayout, properties) => {
             // Needed for _onDropDragOver
             this._memoGroupsProps[group] = properties;
@@ -94,45 +57,6 @@ class GridLayout extends react_1.default.PureComponent {
             }
             return this._memoForwardedPluginRef[refIndex];
         };
-        this._onDragStart = (group, _newLayout, layoutItem, _newItem, _placeholder, e) => {
-            if (this.temporaryLayout)
-                return;
-            if (this.context.dragOverPlugin) {
-                this.setState({ isDragging: true });
-            }
-            else {
-                let currentDraggingElement = this.state.currentDraggingElement;
-                if (!currentDraggingElement) {
-                    const layoutId = layoutItem.i;
-                    const item = this.context.config.items.find(({ id }) => id === layoutId);
-                    const { offsetX, offsetY } = e.nativeEvent;
-                    currentDraggingElement = {
-                        group,
-                        layoutItem,
-                        item,
-                        cursorPosition: { offsetX, offsetY },
-                    };
-                }
-                this.setState({
-                    isDragging: true,
-                    currentDraggingElement,
-                    draggedOverGroup: group,
-                });
-            }
-        };
-        this._onResizeStart = () => {
-            this.setState({
-                isDragging: true,
-            });
-        };
-        this._onTargetRestore = () => {
-            const { currentDraggingElement } = this.state;
-            if (currentDraggingElement) {
-                this.setState({
-                    draggedOverGroup: currentDraggingElement.group,
-                });
-            }
-        };
         this._onStop = (group, newLayout) => {
             const { layoutChange, onDrop, temporaryLayout } = this.context;
             const { draggedOverGroup, currentDraggingElement } = this.state;
@@ -180,6 +104,7 @@ class GridLayout extends react_1.default.PureComponent {
                 currentDraggingElement: null,
                 draggedOverGroup: null,
             });
+            // TODO temporaryLayout
             layoutChange(groupedLayout);
         };
         this._onExternalDrop = (group, newLayout, item, e) => {
@@ -204,8 +129,12 @@ class GridLayout extends react_1.default.PureComponent {
             }
         };
         this._onDropDragOver = (group, e) => {
-            const { editMode, dragOverPlugin, onDropDragOver } = this.context;
+            const { editMode, dragOverPlugin, onDropDragOver, temporaryLayout } = this.context;
             const { currentDraggingElement } = this.state;
+            // TODO If temporary item is trying to change group
+            if (temporaryLayout && currentDraggingElement) {
+                return false;
+            }
             if (!editMode || (!dragOverPlugin && !currentDraggingElement)) {
                 return false;
             }
@@ -248,6 +177,51 @@ class GridLayout extends react_1.default.PureComponent {
         const { layout, temporaryLayout } = this.context;
         return (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout;
     }
+    getMemoGroupLayout(group, layout) {
+        // fastest possible way to match json
+        const key = JSON.stringify(layout);
+        if (this._memoGroupsLayouts[group]) {
+            if (this._memoGroupsLayouts[group].key === key) {
+                return this._memoGroupsLayouts[group];
+            }
+            else {
+                this._memoGroupsLayouts[group].key = key;
+                this._memoGroupsLayouts[group].layout = layout;
+            }
+        }
+        else {
+            this._memoGroupsLayouts[group] = {
+                key,
+                layout,
+            };
+        }
+        return this._memoGroupsLayouts[group];
+    }
+    getMemoGroupCallbacks(group) {
+        if (!this._memoCallbacksForGroups[group]) {
+            const onDragStart = this._onDragStart.bind(this, group);
+            const onDrag = this._onDrag.bind(this, group);
+            const onDragStop = this._onDragStop.bind(this, group);
+            const onResizeStart = this._onResizeStart.bind(this, group);
+            const onResize = this._onResize.bind(this, group);
+            const onResizeStop = this._onResizeStop.bind(this, group);
+            const onDrop = this._onDrop.bind(this, group);
+            const onDropDragOver = this._onDropDragOver.bind(this, group);
+            const onDragTargetRestore = this._onTargetRestore.bind(this, group);
+            this._memoCallbacksForGroups[group] = {
+                onDragStart,
+                onDrag,
+                onDragStop,
+                onResizeStart,
+                onResize,
+                onResizeStop,
+                onDrop,
+                onDropDragOver,
+                onDragTargetRestore,
+            };
+        }
+        return this._memoCallbacksForGroups[group];
+    }
     mergeGroupsLayout(group, newLayout, temporaryItem) {
         const renderLayout = this.getActiveLayout();
         const itemsByGroup = renderLayout.reduce((memo, item) => {
@@ -263,7 +237,7 @@ class GridLayout extends react_1.default.PureComponent {
             return memo;
         }, {});
         return renderLayout.map((currentItem) => {
-            const itemParent = itemsByGroup[currentItem.i].parent || constants_1.DEFAULT_GROUP;
+            const itemParent = (0, utils_1.resolveLayoutGroup)(itemsByGroup[currentItem.i]);
             if (itemParent === group) {
                 return newItemsLayoutById[currentItem.i];
             }
@@ -284,6 +258,81 @@ class GridLayout extends react_1.default.PureComponent {
             this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
         }
     }
+    prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element) {
+        return {
+            group,
+            layout,
+            oldItem,
+            newItem,
+            placeholder,
+            e,
+            element,
+        };
+    }
+    updateeDraggingElementState(group, layoutItem, e) {
+        let currentDraggingElement = this.state.currentDraggingElement;
+        if (!currentDraggingElement) {
+            const { temporaryLayout } = this.context;
+            const layoutId = layoutItem.i;
+            const item = temporaryLayout
+                ? temporaryLayout.dragProps
+                : this.context.config.items.find(({ id }) => id === layoutId);
+            const { offsetX, offsetY } = e.nativeEvent;
+            currentDraggingElement = {
+                group,
+                layoutItem,
+                item,
+                cursorPosition: { offsetX, offsetY },
+            };
+        }
+        this.setState({ currentDraggingElement, draggedOverGroup: group });
+    }
+    _onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
+        var _a;
+        (_a = this.context.onDragStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, _newLayout, layoutItem, _newItem, _placeholder, e, element));
+        if (this.context.dragOverPlugin) {
+            this.setState({ isDragging: true });
+        }
+        else {
+            this.updateeDraggingElementState(group, layoutItem, e);
+            this.setState({ isDragging: true });
+        }
+    }
+    _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
+        var _a;
+        (_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
+    }
+    _onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
+        var _a;
+        this._onStop(group, layout);
+        (_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
+    }
+    _onResizeStart(group, layout, oldItem, newItem, placeholder, e, element) {
+        var _a;
+        this.setState({
+            isDragging: true,
+        });
+        (_a = this.context.onResizeStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
+    }
+    _onResize(group, layout, oldItem, newItem, placeholder, e, element) {
+        var _a;
+        (_a = this.context.onResize) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
+    }
+    _onResizeStop(group, layout, oldItem, newItem, placeholder, e, element) {
+        var _a;
+        (_a = this.context.onResizeStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
+    }
+    _onTargetRestore() {
+        if (this.context.temporaryLayout) {
+            return;
+        }
+        const { currentDraggingElement } = this.state;
+        if (currentDraggingElement) {
+            this.setState({
+                draggedOverGroup: currentDraggingElement.group,
+            });
+        }
+    }
     renderTemporaryPlaceholder() {
         const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
         if (!temporaryLayout || !temporaryLayout.dragProps) {
@@ -309,13 +358,21 @@ class GridLayout extends react_1.default.PureComponent {
             group === currentDraggingElement.group &&
             draggedOverGroup !== null &&
             draggedOverGroup !== group;
-        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured }, (draggableHandleClassName
+        return (react_1.default.createElement(ReactGridLayout_1.Layout
+        // Group properties
+        , Object.assign({}, properties, { 
+            // Layout props
+            compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, draggableCancel: `.${constants_1.DRAGGABLE_CANCEL_CLASS_NAME}` }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
-            : null), (outerDnDEnable
+            : null), { 
+            // Default callbacks
+            onDragStart: callbacks.onDragStart, onDrag: callbacks.onDrag, onDragStop: callbacks.onDragStop, onResizeStart: callbacks.onResizeStart, onResize: callbacks.onResize, onResizeStop: callbacks.onResizeStop, 
+            // External Drag N Drop options
+            onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured }, (outerDnDEnable
             ? {
                 isDroppable: true,
             }
-            : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }),
+            : null)),
             renderItems.map((item, i) => {
                 return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
             }),

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

@@ -105,7 +105,7 @@ class OverlayControls extends react_1.default.Component {
         const controls = hasCustomControlsWithWidgets
             ? this.getCustomControlsWithWidgets()
             : this.renderControls();
-        return react_1.default.createElement("div", { className: b({ position }) }, controls);
+        return react_1.default.createElement("div", { className: b({ position }, [constants_1.DRAGGABLE_CANCEL_CLASS_NAME]) }, controls);
     }
     getDropDownMenuItemConfig(menuName, isDefaultMenu) {
         switch (menuName) {
@@ -203,7 +203,9 @@ class OverlayControls extends react_1.default.Component {
             return null;
         }
         return (react_1.default.createElement(uikit_1.DropdownMenu, { items: items, renderSwitcher: (props) => (react_1.default.createElement(uikit_1.Button, Object.assign({}, props, { view: view, size: size, pin: isOnlyOneItem ? 'round-round' : 'brick-round', qa: "dashkit-overlay-control-menu" }),
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis, size: constants_1.OVERLAY_ICON_SIZE }))) }));
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis, size: constants_1.OVERLAY_ICON_SIZE }))), popupProps: {
+                contentClassName: constants_1.DRAGGABLE_CANCEL_CLASS_NAME,
+            } }));
     }
     getControlItemPinStyle(index, itemsLength) {
         const isOnlyOneItem = itemsLength === 1;

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

@@ -13,3 +13,4 @@ export declare const DEFAULT_WIDGET_HEIGHT = 3;
 export declare const DEFAULT_WIDGET_WIDTH = 3;
 export declare const DEFAULT_GROUP = "__default";
 export declare const COMPACT_TYPE_HORIZONTAL_NOWRAP = "horizontal-nowrap";
+export declare const DRAGGABLE_CANCEL_CLASS_NAME = "dashkit_draggable_cancel";

package/build/cjs/constants/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = exports.DEFAULT_GROUP = exports.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_ICON_SIZE = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
+exports.DRAGGABLE_CANCEL_CLASS_NAME = exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = exports.DEFAULT_GROUP = exports.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_ICON_SIZE = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
 exports.COPIED_WIDGET_STORE_KEY = 'dashCopiedItem';
 exports.DEFAULT_NAMESPACE = 'default';
 exports.OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
@@ -16,3 +16,4 @@ exports.DEFAULT_WIDGET_HEIGHT = 3;
 exports.DEFAULT_WIDGET_WIDTH = 3;
 exports.DEFAULT_GROUP = '__default';
 exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap';
+exports.DRAGGABLE_CANCEL_CLASS_NAME = 'dashkit_draggable_cancel';

package/build/cjs/hocs/withContext.js

@@ -154,7 +154,7 @@ function useMemoStateContext(props) {
         if (hasNowrapGroups) {
             layout.forEach((item) => {
                 const widgetId = item.i;
-                const parentId = item.parent || common_1.DEFAULT_GROUP;
+                const parentId = (0, utils_1.resolveLayoutGroup)(item);
                 if (nowrapGroups[parentId]) {
                     // Collecting nowrap elements
                     nowrapGroups[parentId].items.push(item);
@@ -287,7 +287,7 @@ function useMemoStateContext(props) {
             return;
         }
         setTemporaryLayout({
-            data: newLayout,
+            data: [...newLayout, item],
             dragProps,
         });
         onDropProp({
@@ -331,6 +331,13 @@ function useMemoStateContext(props) {
         draggableHandleClassName: props.draggableHandleClassName,
         outerDnDEnable,
         dragOverPlugin,
+        /* default bypassing handlers */
+        onDragStart: props.onDragStart,
+        onDrag: props.onDrag,
+        onDragStop: props.onDragStop,
+        onResizeStart: props.onResizeStart,
+        onResize: props.onResize,
+        onResizeStop: props.onResizeStop,
     }), [
         resultLayout,
         temporaryLayout,
@@ -359,6 +366,12 @@ function useMemoStateContext(props) {
         props.draggableHandleClassName,
         outerDnDEnable,
         dragOverPlugin,
+        props.onDragStart,
+        props.onDrag,
+        props.onDragStop,
+        props.onResizeStart,
+        props.onResize,
+        props.onResizeStop,
     ]);
     const overlayMenuItems = props.overlayMenuItems || props.registerManager.settings.menu;
     const controlsContextValue = react_1.default.useMemo(() => ({

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

@@ -1,5 +1,5 @@
-/// <reference types="react-grid-layout" />
 /// <reference types="react" />
+import type { Layout, Layouts } from 'react-grid-layout';
 import type { Config, ConfigItem, ConfigLayout } from '../shared';
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
     id?: null;
@@ -38,3 +38,11 @@ export interface DashKitGroup {
     render?: (id: string, children: React.ReactNode, props: DashkitGroupRenderProps) => React.ReactNode;
     gridProperties?: (props: ReactGridLayoutProps) => ReactGridLayoutProps;
 }
+export type ItemManipulationCallback = (eventData: {
+    layout: Layouts;
+    oldItem: Layout;
+    newItem: Layout;
+    placeholder: Layout;
+    e: MouseEvent;
+    element: HTMLElement;
+}) => void;

package/build/cjs/utils/group-helpers.d.ts

@@ -0,0 +1,3 @@
+import type { ConfigLayout } from '../shared/types';
+export declare const resolveLayoutGroup: (item: ConfigLayout) => string;
+export declare const isDefaultLayoutGroup: (item: ConfigLayout) => boolean;

package/build/cjs/utils/group-helpers.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDefaultLayoutGroup = exports.resolveLayoutGroup = void 0;
+const constants_1 = require("../constants");
+const resolveLayoutGroup = (item) => {
+    if (!item.parent) {
+        return constants_1.DEFAULT_GROUP;
+    }
+    return item.parent;
+};
+exports.resolveLayoutGroup = resolveLayoutGroup;
+const isDefaultLayoutGroup = (item) => {
+    return item.parent === constants_1.DEFAULT_GROUP || item.parent === undefined;
+};
+exports.isDefaultLayoutGroup = isDefaultLayoutGroup;

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

@@ -1,2 +1,3 @@
 export * from './register-manager';
 export * from './update-manager';
+export * from './group-helpers';

package/build/cjs/utils/index.js

@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./register-manager"), exports);
 tslib_1.__exportStar(require("./update-manager"), exports);
+tslib_1.__exportStar(require("./group-helpers"), exports);

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

@@ -9,6 +9,7 @@ const constants_1 = require("../constants");
 const shared_1 = require("../shared");
 const get_new_id_1 = require("./get-new-id");
 const grid_layout_1 = require("./grid-layout");
+const group_helpers_1 = require("./group-helpers");
 (0, immutability_helper_1.extend)('$auto', (value, object) => (object ? (0, immutability_helper_1.default)(object, value) : (0, immutability_helper_1.default)({}, value)));
 function removeItemVersion1({ id, config, itemsStateAndParams }) {
     const itemIndex = config.items.findIndex((item) => item.id === id);
@@ -231,7 +232,7 @@ function reflowLayout({ newLayoutItem, layout, reflowLayoutOptions, }) {
     const byGroup = {};
     const reducer = (memo, item, i, _items, isNewItem) => {
         memo[item.i] = i;
-        const parent = item.parent || constants_1.DEFAULT_GROUP;
+        const parent = (0, group_helpers_1.resolveLayoutGroup)(item);
         if (byGroup[parent]) {
             if (isNewItem) {
                 byGroup[parent].unshift(item);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
-import { AddNewItemOptions, ContextProps, DashKitGroup, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
+import { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
 interface DashKitGeneralProps {
@@ -17,12 +17,18 @@ interface DashKitDefaultProps {
         itemsStateAndParams: ItemsStateAndParams;
         groups?: DashKitGroup[];
     }) => void;
-    onDrop: (dropProps: ItemDropProps) => void;
+    onDrop?: (dropProps: ItemDropProps) => void;
     onItemMountChange?: (item: ConfigItem, state: {
         isAsync: boolean;
         isMounted: boolean;
     }) => void;
     onItemRender?: (item: ConfigItem) => void;
+    onDragStart?: ItemManipulationCallback;
+    onDrag?: ItemManipulationCallback;
+    onDragStop?: ItemManipulationCallback;
+    onResizeStart?: ItemManipulationCallback;
+    onResize?: ItemManipulationCallback;
+    onResizeStop?: ItemManipulationCallback;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
     itemsStateAndParams: ItemsStateAndParams;

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

@@ -25,8 +25,8 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     }) => void;
     getItemsMeta: () => any;
     getActiveLayout(): any;
-    getMemoGroupLayout: (group: any, layout: any) => any;
-    getMemoGroupCallbacks: (group: any) => any;
+    getMemoGroupLayout(group: any, layout: any): any;
+    getMemoGroupCallbacks(group: any): any;
     getMemoGroupProps: (group: any, renderLayout: any, properties: any) => {
         layout: any;
         callbacks: any;
@@ -38,9 +38,23 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     getMemoForwardRefCallback: (refIndex: any) => any;
     mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
     reloadItems(): void;
-    _onDragStart: (group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any) => void;
-    _onResizeStart: () => void;
-    _onTargetRestore: () => void;
+    prepareDefaultArguments(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): {
+        group: any;
+        layout: any;
+        oldItem: any;
+        newItem: any;
+        placeholder: any;
+        e: any;
+        element: any;
+    };
+    updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
+    _onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
+    _onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
+    _onDragStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
+    _onResizeStart(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
+    _onResize(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
+    _onResizeStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
+    _onTargetRestore(): void;
     _onStop: (group: any, newLayout: any) => void;
     _onSharedDrop: (targetGroup: any, newLayout: any, tempItem: any) => void;
     _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { COMPACT_TYPE_HORIZONTAL_NOWRAP, DEFAULT_GROUP, OVERLAY_CONTROLS_CLASS_NAME, TEMPORARY_ITEM_ID, } from '../../constants';
+import { COMPACT_TYPE_HORIZONTAL_NOWRAP, DEFAULT_GROUP, DRAGGABLE_CANCEL_CLASS_NAME, TEMPORARY_ITEM_ID, } from '../../constants';
 import { DashKitContext } from '../../context/DashKitContext';
+import { resolveLayoutGroup } from '../../utils';
 import GridItem from '../GridItem/GridItem';
 import { Layout } from './ReactGridLayout';
 class GridLayout extends React.PureComponent {
@@ -31,44 +32,6 @@ class GridLayout extends React.PureComponent {
             const { getItemsMeta } = this.context;
             return getItemsMeta(this.pluginsRefs);
         };
-        this.getMemoGroupLayout = (group, layout) => {
-            // fastest possible way to match json
-            const key = JSON.stringify(layout);
-            if (this._memoGroupsLayouts[group]) {
-                if (this._memoGroupsLayouts[group].key === key) {
-                    return this._memoGroupsLayouts[group];
-                }
-                else {
-                    this._memoGroupsLayouts[group].key = key;
-                    this._memoGroupsLayouts[group].layout = layout;
-                }
-            }
-            else {
-                this._memoGroupsLayouts[group] = {
-                    key,
-                    layout,
-                };
-            }
-            return this._memoGroupsLayouts[group];
-        };
-        this.getMemoGroupCallbacks = (group) => {
-            if (!this._memoCallbacksForGroups[group]) {
-                const onDragStart = this._onDragStart.bind(this, group);
-                const onStop = this._onStop.bind(this, group);
-                const onDrop = this._onDrop.bind(this, group);
-                const onDropDragOver = this._onDropDragOver.bind(this, group);
-                const onDragTargetRestore = this._onTargetRestore.bind(this, group);
-                this._memoCallbacksForGroups[group] = {
-                    onDragStart,
-                    onDragStop: onStop,
-                    onResizeStop: onStop,
-                    onDrop,
-                    onDropDragOver,
-                    onDragTargetRestore,
-                };
-            }
-            return this._memoCallbacksForGroups[group];
-        };
         this.getMemoGroupProps = (group, renderLayout, properties) => {
             // Needed for _onDropDragOver
             this._memoGroupsProps[group] = properties;
@@ -91,45 +54,6 @@ class GridLayout extends React.PureComponent {
             }
             return this._memoForwardedPluginRef[refIndex];
         };
-        this._onDragStart = (group, _newLayout, layoutItem, _newItem, _placeholder, e) => {
-            if (this.temporaryLayout)
-                return;
-            if (this.context.dragOverPlugin) {
-                this.setState({ isDragging: true });
-            }
-            else {
-                let currentDraggingElement = this.state.currentDraggingElement;
-                if (!currentDraggingElement) {
-                    const layoutId = layoutItem.i;
-                    const item = this.context.config.items.find(({ id }) => id === layoutId);
-                    const { offsetX, offsetY } = e.nativeEvent;
-                    currentDraggingElement = {
-                        group,
-                        layoutItem,
-                        item,
-                        cursorPosition: { offsetX, offsetY },
-                    };
-                }
-                this.setState({
-                    isDragging: true,
-                    currentDraggingElement,
-                    draggedOverGroup: group,
-                });
-            }
-        };
-        this._onResizeStart = () => {
-            this.setState({
-                isDragging: true,
-            });
-        };
-        this._onTargetRestore = () => {
-            const { currentDraggingElement } = this.state;
-            if (currentDraggingElement) {
-                this.setState({
-                    draggedOverGroup: currentDraggingElement.group,
-                });
-            }
-        };
         this._onStop = (group, newLayout) => {
             const { layoutChange, onDrop, temporaryLayout } = this.context;
             const { draggedOverGroup, currentDraggingElement } = this.state;
@@ -177,6 +101,7 @@ class GridLayout extends React.PureComponent {
                 currentDraggingElement: null,
                 draggedOverGroup: null,
             });
+            // TODO temporaryLayout
             layoutChange(groupedLayout);
         };
         this._onExternalDrop = (group, newLayout, item, e) => {
@@ -201,8 +126,12 @@ class GridLayout extends React.PureComponent {
             }
         };
         this._onDropDragOver = (group, e) => {
-            const { editMode, dragOverPlugin, onDropDragOver } = this.context;
+            const { editMode, dragOverPlugin, onDropDragOver, temporaryLayout } = this.context;
             const { currentDraggingElement } = this.state;
+            // TODO If temporary item is trying to change group
+            if (temporaryLayout && currentDraggingElement) {
+                return false;
+            }
             if (!editMode || (!dragOverPlugin && !currentDraggingElement)) {
                 return false;
             }
@@ -245,6 +174,51 @@ class GridLayout extends React.PureComponent {
         const { layout, temporaryLayout } = this.context;
         return (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout;
     }
+    getMemoGroupLayout(group, layout) {
+        // fastest possible way to match json
+        const key = JSON.stringify(layout);
+        if (this._memoGroupsLayouts[group]) {
+            if (this._memoGroupsLayouts[group].key === key) {
+                return this._memoGroupsLayouts[group];
+            }
+            else {
+                this._memoGroupsLayouts[group].key = key;
+                this._memoGroupsLayouts[group].layout = layout;
+            }
+        }
+        else {
+            this._memoGroupsLayouts[group] = {
+                key,
+                layout,
+            };
+        }
+        return this._memoGroupsLayouts[group];
+    }
+    getMemoGroupCallbacks(group) {
+        if (!this._memoCallbacksForGroups[group]) {
+            const onDragStart = this._onDragStart.bind(this, group);
+            const onDrag = this._onDrag.bind(this, group);
+            const onDragStop = this._onDragStop.bind(this, group);
+            const onResizeStart = this._onResizeStart.bind(this, group);
+            const onResize = this._onResize.bind(this, group);
+            const onResizeStop = this._onResizeStop.bind(this, group);
+            const onDrop = this._onDrop.bind(this, group);
+            const onDropDragOver = this._onDropDragOver.bind(this, group);
+            const onDragTargetRestore = this._onTargetRestore.bind(this, group);
+            this._memoCallbacksForGroups[group] = {
+                onDragStart,
+                onDrag,
+                onDragStop,
+                onResizeStart,
+                onResize,
+                onResizeStop,
+                onDrop,
+                onDropDragOver,
+                onDragTargetRestore,
+            };
+        }
+        return this._memoCallbacksForGroups[group];
+    }
     mergeGroupsLayout(group, newLayout, temporaryItem) {
         const renderLayout = this.getActiveLayout();
         const itemsByGroup = renderLayout.reduce((memo, item) => {
@@ -260,7 +234,7 @@ class GridLayout extends React.PureComponent {
             return memo;
         }, {});
         return renderLayout.map((currentItem) => {
-            const itemParent = itemsByGroup[currentItem.i].parent || DEFAULT_GROUP;
+            const itemParent = resolveLayoutGroup(itemsByGroup[currentItem.i]);
             if (itemParent === group) {
                 return newItemsLayoutById[currentItem.i];
             }
@@ -281,6 +255,81 @@ class GridLayout extends React.PureComponent {
             this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
         }
     }
+    prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element) {
+        return {
+            group,
+            layout,
+            oldItem,
+            newItem,
+            placeholder,
+            e,
+            element,
+        };
+    }
+    updateeDraggingElementState(group, layoutItem, e) {
+        let currentDraggingElement = this.state.currentDraggingElement;
+        if (!currentDraggingElement) {
+            const { temporaryLayout } = this.context;
+            const layoutId = layoutItem.i;
+            const item = temporaryLayout
+                ? temporaryLayout.dragProps
+                : this.context.config.items.find(({ id }) => id === layoutId);
+            const { offsetX, offsetY } = e.nativeEvent;
+            currentDraggingElement = {
+                group,
+                layoutItem,
+                item,
+                cursorPosition: { offsetX, offsetY },
+            };
+        }
+        this.setState({ currentDraggingElement, draggedOverGroup: group });
+    }
+    _onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
+        var _a;
+        (_a = this.context.onDragStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, _newLayout, layoutItem, _newItem, _placeholder, e, element));
+        if (this.context.dragOverPlugin) {
+            this.setState({ isDragging: true });
+        }
+        else {
+            this.updateeDraggingElementState(group, layoutItem, e);
+            this.setState({ isDragging: true });
+        }
+    }
+    _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
+        var _a;
+        (_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
+    }
+    _onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
+        var _a;
+        this._onStop(group, layout);
+        (_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
+    }
+    _onResizeStart(group, layout, oldItem, newItem, placeholder, e, element) {
+        var _a;
+        this.setState({
+            isDragging: true,
+        });
+        (_a = this.context.onResizeStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
+    }
+    _onResize(group, layout, oldItem, newItem, placeholder, e, element) {
+        var _a;
+        (_a = this.context.onResize) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
+    }
+    _onResizeStop(group, layout, oldItem, newItem, placeholder, e, element) {
+        var _a;
+        (_a = this.context.onResizeStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
+    }
+    _onTargetRestore() {
+        if (this.context.temporaryLayout) {
+            return;
+        }
+        const { currentDraggingElement } = this.state;
+        if (currentDraggingElement) {
+            this.setState({
+                draggedOverGroup: currentDraggingElement.group,
+            });
+        }
+    }
     renderTemporaryPlaceholder() {
         const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
         if (!temporaryLayout || !temporaryLayout.dragProps) {
@@ -306,13 +355,21 @@ class GridLayout extends React.PureComponent {
             group === currentDraggingElement.group &&
             draggedOverGroup !== null &&
             draggedOverGroup !== group;
-        return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured }, (draggableHandleClassName
+        return (React.createElement(Layout
+        // Group properties
+        , Object.assign({}, properties, { 
+            // Layout props
+            compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, draggableCancel: `.${DRAGGABLE_CANCEL_CLASS_NAME}` }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
-            : null), (outerDnDEnable
+            : null), { 
+            // Default callbacks
+            onDragStart: callbacks.onDragStart, onDrag: callbacks.onDrag, onDragStop: callbacks.onDragStop, onResizeStart: callbacks.onResizeStart, onResize: callbacks.onResize, onResizeStop: callbacks.onResizeStop, 
+            // External Drag N Drop options
+            onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured }, (outerDnDEnable
             ? {
                 isDroppable: true,
             }
-            : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }),
+            : null)),
             renderItems.map((item, i) => {
                 return (React.createElement(GridItem, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
             }),

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Ellipsis, Gear, Xmark } from '@gravity-ui/icons';
 import { Button, DropdownMenu, Icon, } from '@gravity-ui/uikit';
 import noop from 'lodash/noop';
-import { COPIED_WIDGET_STORE_KEY, MenuItems, OVERLAY_CONTROLS_CLASS_NAME, OVERLAY_ICON_SIZE, } from '../../constants';
+import { COPIED_WIDGET_STORE_KEY, DRAGGABLE_CANCEL_CLASS_NAME, MenuItems, OVERLAY_CONTROLS_CLASS_NAME, OVERLAY_ICON_SIZE, } from '../../constants';
 import { DashkitOvelayControlsContext } from '../../context/DashKitContext';
 import { i18n } from '../../i18n';
 import { cn } from '../../utils/cn';
@@ -102,7 +102,7 @@ class OverlayControls extends React.Component {
         const controls = hasCustomControlsWithWidgets
             ? this.getCustomControlsWithWidgets()
             : this.renderControls();
-        return React.createElement("div", { className: b({ position }) }, controls);
+        return React.createElement("div", { className: b({ position }, [DRAGGABLE_CANCEL_CLASS_NAME]) }, controls);
     }
     getDropDownMenuItemConfig(menuName, isDefaultMenu) {
         switch (menuName) {
@@ -200,7 +200,9 @@ class OverlayControls extends React.Component {
             return null;
         }
         return (React.createElement(DropdownMenu, { items: items, renderSwitcher: (props) => (React.createElement(Button, Object.assign({}, props, { view: view, size: size, pin: isOnlyOneItem ? 'round-round' : 'brick-round', qa: "dashkit-overlay-control-menu" }),
-                React.createElement(Icon, { data: Ellipsis, size: OVERLAY_ICON_SIZE }))) }));
+                React.createElement(Icon, { data: Ellipsis, size: OVERLAY_ICON_SIZE }))), popupProps: {
+                contentClassName: DRAGGABLE_CANCEL_CLASS_NAME,
+            } }));
     }
     getControlItemPinStyle(index, itemsLength) {
         const isOnlyOneItem = itemsLength === 1;

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

@@ -13,3 +13,4 @@ export declare const DEFAULT_WIDGET_HEIGHT = 3;
 export declare const DEFAULT_WIDGET_WIDTH = 3;
 export declare const DEFAULT_GROUP = "__default";
 export declare const COMPACT_TYPE_HORIZONTAL_NOWRAP = "horizontal-nowrap";
+export declare const DRAGGABLE_CANCEL_CLASS_NAME = "dashkit_draggable_cancel";

package/build/esm/constants/common.js

@@ -13,3 +13,4 @@ export const DEFAULT_WIDGET_HEIGHT = 3;
 export const DEFAULT_WIDGET_WIDTH = 3;
 export const DEFAULT_GROUP = '__default';
 export const COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap';
+export const DRAGGABLE_CANCEL_CLASS_NAME = 'dashkit_draggable_cancel';

package/build/esm/hocs/withContext.js

@@ -6,7 +6,7 @@ import { COMPACT_TYPE_HORIZONTAL_NOWRAP, DEFAULT_GROUP, DEFAULT_WIDGET_HEIGHT, D
 import { DashKitContext, DashKitDnDContext, DashkitOvelayControlsContext, } from '../context/DashKitContext';
 import { useDeepEqualMemo } from '../hooks/useDeepEqualMemo';
 import { getItemsParams, getItemsState } from '../shared';
-import { UpdateManager } from '../utils';
+import { UpdateManager, resolveLayoutGroup } from '../utils';
 const ITEM_PROPS = ['i', 'h', 'w', 'x', 'y', 'parent'];
 function useMemoStateContext(props) {
     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
@@ -151,7 +151,7 @@ function useMemoStateContext(props) {
         if (hasNowrapGroups) {
             layout.forEach((item) => {
                 const widgetId = item.i;
-                const parentId = item.parent || DEFAULT_GROUP;
+                const parentId = resolveLayoutGroup(item);
                 if (nowrapGroups[parentId]) {
                     // Collecting nowrap elements
                     nowrapGroups[parentId].items.push(item);
@@ -284,7 +284,7 @@ function useMemoStateContext(props) {
             return;
         }
         setTemporaryLayout({
-            data: newLayout,
+            data: [...newLayout, item],
             dragProps,
         });
         onDropProp({
@@ -328,6 +328,13 @@ function useMemoStateContext(props) {
         draggableHandleClassName: props.draggableHandleClassName,
         outerDnDEnable,
         dragOverPlugin,
+        /* default bypassing handlers */
+        onDragStart: props.onDragStart,
+        onDrag: props.onDrag,
+        onDragStop: props.onDragStop,
+        onResizeStart: props.onResizeStart,
+        onResize: props.onResize,
+        onResizeStop: props.onResizeStop,
     }), [
         resultLayout,
         temporaryLayout,
@@ -356,6 +363,12 @@ function useMemoStateContext(props) {
         props.draggableHandleClassName,
         outerDnDEnable,
         dragOverPlugin,
+        props.onDragStart,
+        props.onDrag,
+        props.onDragStop,
+        props.onResizeStart,
+        props.onResize,
+        props.onResizeStop,
     ]);
     const overlayMenuItems = props.overlayMenuItems || props.registerManager.settings.menu;
     const controlsContextValue = React.useMemo(() => ({

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

@@ -1,5 +1,5 @@
-/// <reference types="react-grid-layout" />
 /// <reference types="react" />
+import type { Layout, Layouts } from 'react-grid-layout';
 import type { Config, ConfigItem, ConfigLayout } from '../shared';
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
     id?: null;
@@ -38,3 +38,11 @@ export interface DashKitGroup {
     render?: (id: string, children: React.ReactNode, props: DashkitGroupRenderProps) => React.ReactNode;
     gridProperties?: (props: ReactGridLayoutProps) => ReactGridLayoutProps;
 }
+export type ItemManipulationCallback = (eventData: {
+    layout: Layouts;
+    oldItem: Layout;
+    newItem: Layout;
+    placeholder: Layout;
+    e: MouseEvent;
+    element: HTMLElement;
+}) => void;

package/build/esm/utils/group-helpers.d.ts

@@ -0,0 +1,3 @@
+import type { ConfigLayout } from '../shared/types';
+export declare const resolveLayoutGroup: (item: ConfigLayout) => string;
+export declare const isDefaultLayoutGroup: (item: ConfigLayout) => boolean;

package/build/esm/utils/group-helpers.js

@@ -0,0 +1,10 @@
+import { DEFAULT_GROUP } from '../constants';
+export const resolveLayoutGroup = (item) => {
+    if (!item.parent) {
+        return DEFAULT_GROUP;
+    }
+    return item.parent;
+};
+export const isDefaultLayoutGroup = (item) => {
+    return item.parent === DEFAULT_GROUP || item.parent === undefined;
+};

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

@@ -1,2 +1,3 @@
 export * from './register-manager';
 export * from './update-manager';
+export * from './group-helpers';

package/build/esm/utils/index.js

@@ -1,2 +1,3 @@
 export * from './register-manager';
 export * from './update-manager';
+export * from './group-helpers';

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

@@ -5,6 +5,7 @@ import { DEFAULT_GROUP, DEFAULT_NAMESPACE } from '../constants';
 import { META_KEY, addGroupToQueue, addToQueue, deleteFromQueue, getCurrentVersion, getInitialItemsStateAndParamsMeta, getItemsStateAndParamsMeta, isItemWithGroup, isItemWithTabs, mergeParamsWithAliases, pickActionParamsFromParams, resolveItemInnerId, transformParamsToActionParams, } from '../shared';
 import { getNewId } from './get-new-id';
 import { bottom, compact } from './grid-layout';
+import { resolveLayoutGroup } from './group-helpers';
 extend('$auto', (value, object) => (object ? update(object, value) : update({}, value)));
 function removeItemVersion1({ id, config, itemsStateAndParams }) {
     const itemIndex = config.items.findIndex((item) => item.id === id);
@@ -226,7 +227,7 @@ export function reflowLayout({ newLayoutItem, layout, reflowLayoutOptions, }) {
     const byGroup = {};
     const reducer = (memo, item, i, _items, isNewItem) => {
         memo[item.i] = i;
-        const parent = item.parent || DEFAULT_GROUP;
+        const parent = resolveLayoutGroup(item);
         if (byGroup[parent]) {
             if (isNewItem) {
                 byGroup[parent].unshift(item);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.13.0",
+  "version": "8.14.1",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {