@gravity-ui/dashkit 8.17.3 → 8.17.4

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 {
@@ -74,6 +76,14 @@
   user-select: none;
 }
 
+.react-grid-focus-capture {
+  position: absolute;
+  display: block;
+  z-index: 6;
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .react-grid-item .react-resizable-handle {
   position: absolute;
   width: 20px;

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

@@ -96,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, isDraggedOut, 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);
@@ -115,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': isDraggedOut,
                 'is-focused': this.state.isFocused,
                 'with-custom-handle': withCustomHandle,
             }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, (focusable
@@ -135,6 +136,7 @@ GridItem.propTypes = {
     id: prop_types_1.default.string,
     item: prop_types_1.default.object,
     isDragging: prop_types_1.default.bool,
+    isDraggedOut: prop_types_1.default.bool,
     layout: prop_types_1.default.array,
     forwardedRef: prop_types_1.default.any,
     forwardedPluginRef: prop_types_1.default.any,

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;
@@ -47,7 +48,12 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         e: any;
         element: any;
     };
-    updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
+    updateDraggingElementState(group: any, layoutItem: any, e: any): void;
+    _initDragCoordinatesWatcher(element: any): void;
+    _parendDragNode: any;
+    _forceCursorCapture(parentElement: any, position: any, parentRect: 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() {
@@ -269,7 +270,7 @@ class GridLayout extends react_1.default.PureComponent {
             element,
         };
     }
-    updateeDraggingElementState(group, layoutItem, e) {
+    updateDraggingElementState(group, layoutItem, e) {
         let currentDraggingElement = this.state.currentDraggingElement;
         if (!currentDraggingElement) {
             const { temporaryLayout } = this.context;
@@ -287,23 +288,79 @@ 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 });
+        }
+    }
+    // When element is going back and prointer-event: none is removed mouse enter event is not fired
+    // So to trigger it we are forcing this event by adding transparent block under the mouse
+    _forceCursorCapture(parentElement, position, parentRect) {
+        const block = document.createElement('div');
+        block.classList.add('react-grid-focus-capture');
+        const blockSize = 44;
+        const offset = blockSize / 2;
+        // Keeping elemnt inside current grid
+        const top = Math.min(Math.max(position.top - offset, 0), parentRect.height - blockSize);
+        const left = Math.min(Math.max(position.left - offset, 0), parentRect.width - blockSize);
+        block.style.width = `${blockSize}px`;
+        block.style.height = `${blockSize}px`;
+        block.style.top = `${top}px`;
+        block.style.left = `${left}px`;
+        parentElement.appendChild(block);
+        setTimeout(() => {
+            block.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.setState({ draggedOut });
+            if (!draggedOut) {
+                this._forceCursorCapture(parent, {
+                    top: clientY - parentRect.top,
+                    left: clientX - parentRect.left,
+                }, parentRect);
+            }
+        }
+    }
+    _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 });
         }
         else {
-            this.updateeDraggingElementState(group, layoutItem, e);
+            this.updateDraggingElementState(group, layoutItem, e);
             this.setState({ isDragging: true });
         }
     }
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
+        this._updateDragCoordinates(e);
         (_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));
     }
@@ -375,7 +432,9 @@ 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 }));
+                const isCurrentItem = (currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.item.id) === item.id;
+                const isDraggedOut = isCurrentItem && this.state.draggedOut;
+                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, isDraggedOut: isDraggedOut, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
             }),
             this.renderTemporaryPlaceholder()));
     }

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 {
@@ -74,6 +76,14 @@
   user-select: none;
 }
 
+.react-grid-focus-capture {
+  position: absolute;
+  display: block;
+  z-index: 6;
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .react-grid-item .react-resizable-handle {
   position: absolute;
   width: 20px;

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

@@ -94,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, isDraggedOut, 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);
@@ -113,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': isDraggedOut,
                 'is-focused': this.state.isFocused,
                 'with-custom-handle': withCustomHandle,
             }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, (focusable
@@ -133,6 +134,7 @@ GridItem.propTypes = {
     id: PropTypes.string,
     item: PropTypes.object,
     isDragging: PropTypes.bool,
+    isDraggedOut: PropTypes.bool,
     layout: PropTypes.array,
     forwardedRef: PropTypes.any,
     forwardedPluginRef: PropTypes.any,

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;
@@ -47,7 +48,12 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         e: any;
         element: any;
     };
-    updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
+    updateDraggingElementState(group: any, layoutItem: any, e: any): void;
+    _initDragCoordinatesWatcher(element: any): void;
+    _parendDragNode: any;
+    _forceCursorCapture(parentElement: any, position: any, parentRect: 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() {
@@ -266,7 +267,7 @@ class GridLayout extends React.PureComponent {
             element,
         };
     }
-    updateeDraggingElementState(group, layoutItem, e) {
+    updateDraggingElementState(group, layoutItem, e) {
         let currentDraggingElement = this.state.currentDraggingElement;
         if (!currentDraggingElement) {
             const { temporaryLayout } = this.context;
@@ -284,23 +285,79 @@ class GridLayout extends React.PureComponent {
         }
         this.setState({ currentDraggingElement, draggedOverGroup: group });
     }
+    _initDragCoordinatesWatcher(element) {
+        if (!this._parendDragNode) {
+            this._parendDragNode = element.parentElement;
+            this.setState({ draggedOut: false });
+        }
+    }
+    // When element is going back and prointer-event: none is removed mouse enter event is not fired
+    // So to trigger it we are forcing this event by adding transparent block under the mouse
+    _forceCursorCapture(parentElement, position, parentRect) {
+        const block = document.createElement('div');
+        block.classList.add('react-grid-focus-capture');
+        const blockSize = 44;
+        const offset = blockSize / 2;
+        // Keeping elemnt inside current grid
+        const top = Math.min(Math.max(position.top - offset, 0), parentRect.height - blockSize);
+        const left = Math.min(Math.max(position.left - offset, 0), parentRect.width - blockSize);
+        block.style.width = `${blockSize}px`;
+        block.style.height = `${blockSize}px`;
+        block.style.top = `${top}px`;
+        block.style.left = `${left}px`;
+        parentElement.appendChild(block);
+        setTimeout(() => {
+            block.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.setState({ draggedOut });
+            if (!draggedOut) {
+                this._forceCursorCapture(parent, {
+                    top: clientY - parentRect.top,
+                    left: clientX - parentRect.left,
+                }, parentRect);
+            }
+        }
+    }
+    _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 });
         }
         else {
-            this.updateeDraggingElementState(group, layoutItem, e);
+            this.updateDraggingElementState(group, layoutItem, e);
             this.setState({ isDragging: true });
         }
     }
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
+        this._updateDragCoordinates(e);
         (_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));
     }
@@ -372,7 +429,9 @@ 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 }));
+                const isCurrentItem = (currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.item.id) === item.id;
+                const isDraggedOut = isCurrentItem && this.state.draggedOut;
+                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, isDraggedOut: isDraggedOut, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
             }),
             this.renderTemporaryPlaceholder()));
     }

package/package.json

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