@gravity-ui/dashkit 8.17.2 → 8.17.3-beta.0

package/build/cjs/components/GridItem/GridItem.css

@@ -34,6 +34,9 @@
   border-color: transparent;
   pointer-events: none;
 }
+.dashkit-grid-item_is-dragged-out {
+  pointer-events: none;
+}
 
 .react-grid-layout {
   position: relative;
@@ -57,7 +60,6 @@
   transition: none;
   z-index: 3;
   will-change: transform;
-  pointer-events: none;
 }
 
 .react-grid-item.dashkit-grid-item_is-focused {

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

@@ -81,33 +81,6 @@ class GridItem extends react_1.default.PureComponent {
                 this.controller = null;
             });
         };
-        this.onMountChange = (isMounted) => {
-            var _a, _b, _c, _d, _e, _f;
-            if (isMounted) {
-                this._inited = true;
-                (_b = (_a = this.props).onItemMountChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item, {
-                    isAsync: this._isAsyncItem,
-                    isMounted: isMounted,
-                });
-                if (!this._isAsyncItem) {
-                    (_d = (_c = this.props).onItemRender) === null || _d === void 0 ? void 0 : _d.call(_c, this.props.item);
-                }
-            }
-            else {
-                (_f = (_e = this.props).onItemMountChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.props.item, {
-                    isAsync: this._isAsyncItem,
-                    isMounted: isMounted,
-                });
-            }
-        };
-        this.onBeforeLoad = () => {
-            this._isAsyncItem = true;
-            return this.onLoad;
-        };
-        this.onLoad = () => {
-            var _a, _b;
-            (_b = (_a = this.props).onItemRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
-        };
     }
     renderOverlay() {
         const { isPlaceholder } = this.props;
@@ -123,7 +96,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, isPlaceholder = false, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, draggedOut, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -142,6 +115,7 @@ class GridItem extends react_1.default.PureComponent {
         const { _editActive } = this.props.item.data;
         return (react_1.default.createElement("div", Object.assign({ className: b({
                 'is-dragging': isDragging,
+                'is-dragged-out': draggedOut,
                 'is-focused': this.state.isFocused,
                 'with-custom-handle': withCustomHandle,
             }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, (focusable
@@ -152,7 +126,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, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })),
+                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, onItemMountChange: this.props.onItemMountChange, onItemRender: this.props.onItemRender })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }
@@ -162,10 +136,13 @@ GridItem.propTypes = {
     id: prop_types_1.default.string,
     item: prop_types_1.default.object,
     isDragging: prop_types_1.default.bool,
+    draggedOut: prop_types_1.default.bool,
     layout: prop_types_1.default.array,
     forwardedRef: prop_types_1.default.any,
     forwardedPluginRef: prop_types_1.default.any,
     isPlaceholder: prop_types_1.default.bool,
+    onItemMountChange: prop_types_1.default.func,
+    onItemRender: prop_types_1.default.func,
     // from react-grid-layout:
     children: prop_types_1.default.node,
     className: prop_types_1.default.string,

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

@@ -7,6 +7,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         isPageHidden: boolean;
         currentDraggingElement: null;
         draggedOverGroup: null;
+        draggedOut: boolean;
     };
     componentDidMount(): void;
     componentDidUpdate(): void;
@@ -48,6 +49,11 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         element: any;
     };
     updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
+    _initDragCoordinatesWatcher(element: any): void;
+    _parendDragNode: any;
+    _forceCursorCapture(parentElement: any, position: any): void;
+    _updateDragCoordinates(e: any): void;
+    _resetDragWatcher(): 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;

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

@@ -155,6 +155,7 @@ class GridLayout extends react_1.default.PureComponent {
             isPageHidden: false,
             currentDraggingElement: null,
             draggedOverGroup: null,
+            draggedOut: false,
         };
     }
     componentDidMount() {
@@ -287,9 +288,58 @@ class GridLayout extends react_1.default.PureComponent {
         }
         this.setState({ currentDraggingElement, draggedOverGroup: group });
     }
+    _initDragCoordinatesWatcher(element) {
+        if (!this._parendDragNode) {
+            this._parendDragNode = element.parentElement;
+            this.setState({ draggedOut: false });
+        }
+    }
+    _forceCursorCapture(parentElement, position) {
+        const div = document.createElement('div');
+        const blockSize = 50;
+        const offset = blockSize / 2;
+        div.style.position = 'absolute';
+        div.style.display = 'block';
+        div.style.zIndex = 10;
+        div.style.width = `${blockSize}px`;
+        div.style.height = `${blockSize}px`;
+        div.style.top = `${position.top - offset}px`;
+        div.style.left = `${position.left - offset}px`;
+        parentElement.appendChild(div);
+        setTimeout(() => {
+            div.remove();
+        }, 100);
+    }
+    _updateDragCoordinates(e) {
+        const parent = this._parendDragNode;
+        const parentRect = parent.getBoundingClientRect();
+        const { clientX, clientY } = e;
+        let draggedOut = this.state.draggedOut;
+        if (clientX < parentRect.left ||
+            clientX > parentRect.right ||
+            clientY < parentRect.top ||
+            clientY > parentRect.bottom) {
+            draggedOut = true;
+        }
+        else {
+            draggedOut = false;
+        }
+        if (draggedOut !== this.state.draggedOut) {
+            this._forceCursorCapture(parent, {
+                top: clientY - parentRect.top,
+                left: clientX - parentRect.left,
+            });
+        }
+        this.setState({ draggedOut });
+    }
+    _resetDragWatcher() {
+        this._parendDragNode = null;
+        this.setState({ draggedOut: false });
+    }
     _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));
+        this._initDragCoordinatesWatcher(element);
         if (this.context.dragOverPlugin) {
             this.setState({ isDragging: true });
         }
@@ -300,10 +350,12 @@ class GridLayout extends react_1.default.PureComponent {
     }
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
+        this._updateDragCoordinates(e, element);
         (_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._resetDragWatcher();
         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));
     }
@@ -327,6 +379,7 @@ class GridLayout extends react_1.default.PureComponent {
         if (this.context.temporaryLayout) {
             return;
         }
+        console.log('_onTargetRestore');
         const { currentDraggingElement } = this.state;
         if (currentDraggingElement) {
             this.setState({
@@ -375,7 +428,7 @@ class GridLayout extends react_1.default.PureComponent {
             }
             : 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 }));
+                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, draggedOut: this.state.draggedOut, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
             }),
             this.renderTemporaryPlaceholder()));
     }

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

@@ -61,9 +61,9 @@ declare const _default: {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
-        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemMountChange: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
-        onMountChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     contextType: React.Context<any>;
 };

package/build/cjs/components/Item/Item.js

@@ -7,26 +7,56 @@ 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, isPlaceholder, forwardedPluginRef, onMountChange, }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef, onItemRender, onItemMountChange, item, }) => {
     var _a, _b;
+    // to avoid too frequent re-creation of functions that do not affect the rendering
+    const isAsyncItemRef = react_1.default.useRef(false);
+    const itemRef = react_1.default.useRef(item);
+    const onItemRenderRef = react_1.default.useRef(onItemRender);
+    const onItemMountChangeRef = react_1.default.useRef(onItemMountChange);
+    itemRef.current = item;
+    onItemRenderRef.current = onItemRender;
+    onItemMountChangeRef.current = onItemMountChange;
     const isRegisteredType = registerManager.check(type);
     react_1.default.useLayoutEffect(() => {
+        var _a, _b;
         if (isRegisteredType && !isPlaceholder) {
-            onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(true);
+            (_a = onItemMountChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onItemMountChangeRef, itemRef.current, {
+                isAsync: isAsyncItemRef.current,
+                isMounted: true,
+            });
+            if (!isAsyncItemRef.current) {
+                (_b = onItemRenderRef.current) === null || _b === void 0 ? void 0 : _b.call(onItemRenderRef, itemRef.current);
+            }
             return () => {
-                onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(false);
+                var _a;
+                (_a = onItemMountChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onItemMountChangeRef, itemRef.current, {
+                    isAsync: isAsyncItemRef.current,
+                    isMounted: false,
+                });
             };
         }
     }, []);
+    const onLoad = react_1.default.useCallback(() => {
+        var _a;
+        (_a = onItemRenderRef.current) === null || _a === void 0 ? void 0 : _a.call(onItemRenderRef, itemRef.current);
+    }, []);
+    const onBeforeLoad = react_1.default.useCallback(() => {
+        isAsyncItemRef.current = true;
+        return onLoad;
+    }, [onLoad]);
+    const itemRendererProps = react_1.default.useMemo(() => {
+        return Object.assign(Object.assign({}, rendererProps), { onBeforeLoad });
+    }, [rendererProps, onBeforeLoad]);
     if (!isRegisteredType) {
         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));
+            .getItem(type)).placeholderRenderer) === null || _b === void 0 ? void 0 : _b.call(_a, itemRendererProps, forwardedPluginRef)) || null));
     }
-    return (react_1.default.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)));
+    return (react_1.default.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(itemRendererProps, forwardedPluginRef)));
 };
 Item.propTypes = {
     forwardedPluginRef: prop_types_1.default.any,
@@ -34,7 +64,8 @@ Item.propTypes = {
     registerManager: prop_types_1.default.object,
     type: prop_types_1.default.string,
     isPlaceholder: prop_types_1.default.bool,
-    onMountChange: prop_types_1.default.func,
-    onBeforeLoad: prop_types_1.default.func,
+    onItemRender: prop_types_1.default.func,
+    onItemMountChange: prop_types_1.default.func,
+    item: prop_types_1.default.object,
 };
 exports.default = (0, prepareItem_1.prepareItem)(Item);

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

@@ -18,11 +18,6 @@ export default class MobileLayout extends React.PureComponent<any, any, any> {
         needSetDefault: any;
     }) => void;
     getMemoAdjustWidgetLayout: (index: any) => any;
-    onMountChange: (isMounted: any) => void;
-    _inited: boolean | undefined;
-    onBeforeLoad: () => () => void;
-    _isAsyncItem: boolean | undefined;
-    onLoad: () => void;
     render(): JSX.Element;
 }
 import React from 'react';

package/build/cjs/components/MobileLayout/MobileLayout.js

@@ -44,33 +44,6 @@ class MobileLayout extends react_1.default.PureComponent {
             }
             return this._memoAdjustWidgetLayout[index];
         };
-        this.onMountChange = (isMounted) => {
-            var _a, _b, _c, _d, _e, _f;
-            if (isMounted) {
-                this._inited = true;
-                (_b = (_a = this.context).onItemMountChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item, {
-                    isAsync: this._isAsyncItem,
-                    isMounted: isMounted,
-                });
-                if (!this._isAsyncItem) {
-                    (_d = (_c = this.context).onItemRender) === null || _d === void 0 ? void 0 : _d.call(_c, this.props.item);
-                }
-            }
-            else {
-                (_f = (_e = this.context).onItemMountChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.props.item, {
-                    isAsync: this._isAsyncItem,
-                    isMounted: isMounted,
-                });
-            }
-        };
-        this.onBeforeLoad = () => {
-            this._isAsyncItem = true;
-            return this.onLoad;
-        };
-        this.onLoad = () => {
-            var _a, _b;
-            (_b = (_a = this.context).onItemRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
-        };
     }
     componentDidUpdate(prevProps, prevState) {
         if (prevState.activeTabId !== this.context.config.id) {
@@ -96,7 +69,7 @@ class MobileLayout extends react_1.default.PureComponent {
         return (react_1.default.createElement("div", { className: b() }, sortedItems.map((item, index) => {
             const isItemWithActiveAutoheight = index in this.state.indexesOfItemsWithActiveAutoheight;
             return (react_1.default.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
-                react_1.default.createElement(Item_1.default, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(index), forwardedPluginRef: this.getMemoForwardRefCallback(index), onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })));
+                react_1.default.createElement(Item_1.default, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(index), forwardedPluginRef: this.getMemoForwardRefCallback(index), onMountChange: this.onMountChange, onItemMountChange: this.context.onItemMountChange, onItemRender: this.context.onItemRender })));
         })));
     }
 }

package/build/cjs/hocs/prepareItem.d.ts

@@ -61,9 +61,9 @@ export function prepareItem(Component: any): {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
-        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemMountChange: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
-        onMountChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     contextType: React.Context<any>;
 };

package/build/cjs/hocs/prepareItem.js

@@ -15,7 +15,7 @@ function prepareItem(Component) {
                 };
                 this._currentRenderProps = {};
                 this.getRenderProps = () => {
-                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder, onBeforeLoad, } = this.props;
+                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
                     const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                     const { data, defaults, namespace } = item;
                     const rendererProps = {
@@ -24,7 +24,6 @@ function prepareItem(Component) {
                         params: itemsParams[id],
                         state: itemsState[id],
                         onStateAndParamsChange: this._onStateAndParamsChange,
-                        onBeforeLoad,
                         width,
                         height,
                         id,
@@ -56,10 +55,10 @@ function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { item, isPlaceholder, forwardedPluginRef, onMountChange } = this.props;
+                const { item, isPlaceholder, forwardedPluginRef, onItemMountChange, onItemRender } = this.props;
                 const { registerManager } = this.context;
                 const { type } = item;
-                return (react_1.default.createElement(Component, { forwardedPluginRef: forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder, onMountChange: onMountChange }));
+                return (react_1.default.createElement(Component, { forwardedPluginRef: forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder, onItemMountChange: onItemMountChange, onItemRender: onItemRender, item: item }));
             }
         },
         _a.propTypes = {
@@ -72,9 +71,9 @@ function prepareItem(Component) {
             height: prop_types_1.default.number,
             transform: prop_types_1.default.string,
             isPlaceholder: prop_types_1.default.bool,
-            onBeforeLoad: prop_types_1.default.func,
+            onItemRender: prop_types_1.default.func,
+            onItemMountChange: prop_types_1.default.func,
             forwardedPluginRef: prop_types_1.default.any,
-            onMountChange: prop_types_1.default.func,
         },
         _a.contextType = DashKitContext_1.DashKitContext,
         _a;

package/build/esm/components/GridItem/GridItem.css

@@ -34,6 +34,9 @@
   border-color: transparent;
   pointer-events: none;
 }
+.dashkit-grid-item_is-dragged-out {
+  pointer-events: none;
+}
 
 .react-grid-layout {
   position: relative;
@@ -57,7 +60,6 @@
   transition: none;
   z-index: 3;
   will-change: transform;
-  pointer-events: none;
 }
 
 .react-grid-item.dashkit-grid-item_is-focused {

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

@@ -79,33 +79,6 @@ class GridItem extends React.PureComponent {
                 this.controller = null;
             });
         };
-        this.onMountChange = (isMounted) => {
-            var _a, _b, _c, _d, _e, _f;
-            if (isMounted) {
-                this._inited = true;
-                (_b = (_a = this.props).onItemMountChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item, {
-                    isAsync: this._isAsyncItem,
-                    isMounted: isMounted,
-                });
-                if (!this._isAsyncItem) {
-                    (_d = (_c = this.props).onItemRender) === null || _d === void 0 ? void 0 : _d.call(_c, this.props.item);
-                }
-            }
-            else {
-                (_f = (_e = this.props).onItemMountChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.props.item, {
-                    isAsync: this._isAsyncItem,
-                    isMounted: isMounted,
-                });
-            }
-        };
-        this.onBeforeLoad = () => {
-            this._isAsyncItem = true;
-            return this.onLoad;
-        };
-        this.onLoad = () => {
-            var _a, _b;
-            (_b = (_a = this.props).onItemRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
-        };
     }
     renderOverlay() {
         const { isPlaceholder } = this.props;
@@ -121,7 +94,7 @@ class GridItem extends React.PureComponent {
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, draggedOut, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -140,6 +113,7 @@ class GridItem extends React.PureComponent {
         const { _editActive } = this.props.item.data;
         return (React.createElement("div", Object.assign({ className: b({
                 'is-dragging': isDragging,
+                'is-dragged-out': draggedOut,
                 'is-focused': this.state.isFocused,
                 'with-custom-handle': withCustomHandle,
             }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, (focusable
@@ -150,7 +124,7 @@ class GridItem extends React.PureComponent {
             }
             : {})),
             React.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
-                React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })),
+                React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef, onItemMountChange: this.props.onItemMountChange, onItemRender: this.props.onItemRender })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }
@@ -160,10 +134,13 @@ GridItem.propTypes = {
     id: PropTypes.string,
     item: PropTypes.object,
     isDragging: PropTypes.bool,
+    draggedOut: PropTypes.bool,
     layout: PropTypes.array,
     forwardedRef: PropTypes.any,
     forwardedPluginRef: PropTypes.any,
     isPlaceholder: PropTypes.bool,
+    onItemMountChange: PropTypes.func,
+    onItemRender: PropTypes.func,
     // from react-grid-layout:
     children: PropTypes.node,
     className: PropTypes.string,

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

@@ -7,6 +7,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         isPageHidden: boolean;
         currentDraggingElement: null;
         draggedOverGroup: null;
+        draggedOut: boolean;
     };
     componentDidMount(): void;
     componentDidUpdate(): void;
@@ -48,6 +49,11 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         element: any;
     };
     updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
+    _initDragCoordinatesWatcher(element: any): void;
+    _parendDragNode: any;
+    _forceCursorCapture(parentElement: any, position: any): void;
+    _updateDragCoordinates(e: any): void;
+    _resetDragWatcher(): 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;

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

@@ -152,6 +152,7 @@ class GridLayout extends React.PureComponent {
             isPageHidden: false,
             currentDraggingElement: null,
             draggedOverGroup: null,
+            draggedOut: false,
         };
     }
     componentDidMount() {
@@ -284,9 +285,58 @@ class GridLayout extends React.PureComponent {
         }
         this.setState({ currentDraggingElement, draggedOverGroup: group });
     }
+    _initDragCoordinatesWatcher(element) {
+        if (!this._parendDragNode) {
+            this._parendDragNode = element.parentElement;
+            this.setState({ draggedOut: false });
+        }
+    }
+    _forceCursorCapture(parentElement, position) {
+        const div = document.createElement('div');
+        const blockSize = 50;
+        const offset = blockSize / 2;
+        div.style.position = 'absolute';
+        div.style.display = 'block';
+        div.style.zIndex = 10;
+        div.style.width = `${blockSize}px`;
+        div.style.height = `${blockSize}px`;
+        div.style.top = `${position.top - offset}px`;
+        div.style.left = `${position.left - offset}px`;
+        parentElement.appendChild(div);
+        setTimeout(() => {
+            div.remove();
+        }, 100);
+    }
+    _updateDragCoordinates(e) {
+        const parent = this._parendDragNode;
+        const parentRect = parent.getBoundingClientRect();
+        const { clientX, clientY } = e;
+        let draggedOut = this.state.draggedOut;
+        if (clientX < parentRect.left ||
+            clientX > parentRect.right ||
+            clientY < parentRect.top ||
+            clientY > parentRect.bottom) {
+            draggedOut = true;
+        }
+        else {
+            draggedOut = false;
+        }
+        if (draggedOut !== this.state.draggedOut) {
+            this._forceCursorCapture(parent, {
+                top: clientY - parentRect.top,
+                left: clientX - parentRect.left,
+            });
+        }
+        this.setState({ draggedOut });
+    }
+    _resetDragWatcher() {
+        this._parendDragNode = null;
+        this.setState({ draggedOut: false });
+    }
     _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));
+        this._initDragCoordinatesWatcher(element);
         if (this.context.dragOverPlugin) {
             this.setState({ isDragging: true });
         }
@@ -297,10 +347,12 @@ class GridLayout extends React.PureComponent {
     }
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
+        this._updateDragCoordinates(e, element);
         (_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._resetDragWatcher();
         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));
     }
@@ -324,6 +376,7 @@ class GridLayout extends React.PureComponent {
         if (this.context.temporaryLayout) {
             return;
         }
+        console.log('_onTargetRestore');
         const { currentDraggingElement } = this.state;
         if (currentDraggingElement) {
             this.setState({
@@ -372,7 +425,7 @@ class GridLayout extends React.PureComponent {
             }
             : 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 }));
+                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, draggedOut: this.state.draggedOut, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
             }),
             this.renderTemporaryPlaceholder()));
     }

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

@@ -61,9 +61,9 @@ declare const _default: {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
-        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemMountChange: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
-        onMountChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     contextType: React.Context<any>;
 };

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

@@ -5,26 +5,56 @@ import { cn } from '../../utils/cn';
 import './Item.css';
 const b = cn('dashkit-item');
 // TODO: getDerivedStateFromError и заглушка с ошибкой
-const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef, onMountChange, }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef, onItemRender, onItemMountChange, item, }) => {
     var _a, _b;
+    // to avoid too frequent re-creation of functions that do not affect the rendering
+    const isAsyncItemRef = React.useRef(false);
+    const itemRef = React.useRef(item);
+    const onItemRenderRef = React.useRef(onItemRender);
+    const onItemMountChangeRef = React.useRef(onItemMountChange);
+    itemRef.current = item;
+    onItemRenderRef.current = onItemRender;
+    onItemMountChangeRef.current = onItemMountChange;
     const isRegisteredType = registerManager.check(type);
     React.useLayoutEffect(() => {
+        var _a, _b;
         if (isRegisteredType && !isPlaceholder) {
-            onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(true);
+            (_a = onItemMountChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onItemMountChangeRef, itemRef.current, {
+                isAsync: isAsyncItemRef.current,
+                isMounted: true,
+            });
+            if (!isAsyncItemRef.current) {
+                (_b = onItemRenderRef.current) === null || _b === void 0 ? void 0 : _b.call(onItemRenderRef, itemRef.current);
+            }
             return () => {
-                onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(false);
+                var _a;
+                (_a = onItemMountChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onItemMountChangeRef, itemRef.current, {
+                    isAsync: isAsyncItemRef.current,
+                    isMounted: false,
+                });
             };
         }
     }, []);
+    const onLoad = React.useCallback(() => {
+        var _a;
+        (_a = onItemRenderRef.current) === null || _a === void 0 ? void 0 : _a.call(onItemRenderRef, itemRef.current);
+    }, []);
+    const onBeforeLoad = React.useCallback(() => {
+        isAsyncItemRef.current = true;
+        return onLoad;
+    }, [onLoad]);
+    const itemRendererProps = React.useMemo(() => {
+        return Object.assign(Object.assign({}, rendererProps), { onBeforeLoad });
+    }, [rendererProps, onBeforeLoad]);
     if (!isRegisteredType) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
     }
     if (isPlaceholder) {
         return (React.createElement("div", { className: b('placeholder') }, ((_b = (_a = registerManager
-            .getItem(type)).placeholderRenderer) === null || _b === void 0 ? void 0 : _b.call(_a, rendererProps, forwardedPluginRef)) || null));
+            .getItem(type)).placeholderRenderer) === null || _b === void 0 ? void 0 : _b.call(_a, itemRendererProps, forwardedPluginRef)) || null));
     }
-    return (React.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)));
+    return (React.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(itemRendererProps, forwardedPluginRef)));
 };
 Item.propTypes = {
     forwardedPluginRef: PropTypes.any,
@@ -32,7 +62,8 @@ Item.propTypes = {
     registerManager: PropTypes.object,
     type: PropTypes.string,
     isPlaceholder: PropTypes.bool,
-    onMountChange: PropTypes.func,
-    onBeforeLoad: PropTypes.func,
+    onItemRender: PropTypes.func,
+    onItemMountChange: PropTypes.func,
+    item: PropTypes.object,
 };
 export default prepareItem(Item);

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

@@ -18,11 +18,6 @@ export default class MobileLayout extends React.PureComponent<any, any, any> {
         needSetDefault: any;
     }) => void;
     getMemoAdjustWidgetLayout: (index: any) => any;
-    onMountChange: (isMounted: any) => void;
-    _inited: boolean | undefined;
-    onBeforeLoad: () => () => void;
-    _isAsyncItem: boolean | undefined;
-    onLoad: () => void;
     render(): JSX.Element;
 }
 import React from 'react';

package/build/esm/components/MobileLayout/MobileLayout.js

@@ -42,33 +42,6 @@ class MobileLayout extends React.PureComponent {
             }
             return this._memoAdjustWidgetLayout[index];
         };
-        this.onMountChange = (isMounted) => {
-            var _a, _b, _c, _d, _e, _f;
-            if (isMounted) {
-                this._inited = true;
-                (_b = (_a = this.context).onItemMountChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item, {
-                    isAsync: this._isAsyncItem,
-                    isMounted: isMounted,
-                });
-                if (!this._isAsyncItem) {
-                    (_d = (_c = this.context).onItemRender) === null || _d === void 0 ? void 0 : _d.call(_c, this.props.item);
-                }
-            }
-            else {
-                (_f = (_e = this.context).onItemMountChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.props.item, {
-                    isAsync: this._isAsyncItem,
-                    isMounted: isMounted,
-                });
-            }
-        };
-        this.onBeforeLoad = () => {
-            this._isAsyncItem = true;
-            return this.onLoad;
-        };
-        this.onLoad = () => {
-            var _a, _b;
-            (_b = (_a = this.context).onItemRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
-        };
     }
     componentDidUpdate(prevProps, prevState) {
         if (prevState.activeTabId !== this.context.config.id) {
@@ -94,7 +67,7 @@ class MobileLayout extends React.PureComponent {
         return (React.createElement("div", { className: b() }, sortedItems.map((item, index) => {
             const isItemWithActiveAutoheight = index in this.state.indexesOfItemsWithActiveAutoheight;
             return (React.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
-                React.createElement(Item, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(index), forwardedPluginRef: this.getMemoForwardRefCallback(index), onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })));
+                React.createElement(Item, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(index), forwardedPluginRef: this.getMemoForwardRefCallback(index), onMountChange: this.onMountChange, onItemMountChange: this.context.onItemMountChange, onItemRender: this.context.onItemRender })));
         })));
     }
 }

package/build/esm/hocs/prepareItem.d.ts

@@ -61,9 +61,9 @@ export function prepareItem(Component: any): {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
-        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemMountChange: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
-        onMountChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     contextType: React.Context<any>;
 };

package/build/esm/hocs/prepareItem.js

@@ -11,7 +11,7 @@ export function prepareItem(Component) {
                 };
                 this._currentRenderProps = {};
                 this.getRenderProps = () => {
-                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder, onBeforeLoad, } = this.props;
+                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
                     const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                     const { data, defaults, namespace } = item;
                     const rendererProps = {
@@ -20,7 +20,6 @@ export function prepareItem(Component) {
                         params: itemsParams[id],
                         state: itemsState[id],
                         onStateAndParamsChange: this._onStateAndParamsChange,
-                        onBeforeLoad,
                         width,
                         height,
                         id,
@@ -52,10 +51,10 @@ export function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { item, isPlaceholder, forwardedPluginRef, onMountChange } = this.props;
+                const { item, isPlaceholder, forwardedPluginRef, onItemMountChange, onItemRender } = this.props;
                 const { registerManager } = this.context;
                 const { type } = item;
-                return (React.createElement(Component, { forwardedPluginRef: forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder, onMountChange: onMountChange }));
+                return (React.createElement(Component, { forwardedPluginRef: forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder, onItemMountChange: onItemMountChange, onItemRender: onItemRender, item: item }));
             }
         },
         _a.propTypes = {
@@ -68,9 +67,9 @@ export function prepareItem(Component) {
             height: PropTypes.number,
             transform: PropTypes.string,
             isPlaceholder: PropTypes.bool,
-            onBeforeLoad: PropTypes.func,
+            onItemRender: PropTypes.func,
+            onItemMountChange: PropTypes.func,
             forwardedPluginRef: PropTypes.any,
-            onMountChange: PropTypes.func,
         },
         _a.contextType = DashKitContext,
         _a;

package/package.json

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