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

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

@@ -76,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, draggedOut, 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,7 +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-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
@@ -136,7 +136,7 @@ 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,
+    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

@@ -48,10 +48,10 @@ 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): void;
+    _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;

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

@@ -270,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;
@@ -294,20 +294,23 @@ class GridLayout extends react_1.default.PureComponent {
             this.setState({ draggedOut: false });
         }
     }
-    _forceCursorCapture(parentElement, position) {
-        const div = document.createElement('div');
-        const blockSize = 50;
+    // 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;
-        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);
+        // 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(() => {
-            div.remove();
+            block.remove();
         }, 100);
     }
     _updateDragCoordinates(e) {
@@ -325,12 +328,14 @@ class GridLayout extends react_1.default.PureComponent {
             draggedOut = false;
         }
         if (draggedOut !== this.state.draggedOut) {
-            this._forceCursorCapture(parent, {
-                top: clientY - parentRect.top,
-                left: clientX - parentRect.left,
-            });
+            this.setState({ draggedOut });
+            if (!draggedOut) {
+                this._forceCursorCapture(parent, {
+                    top: clientY - parentRect.top,
+                    left: clientX - parentRect.left,
+                }, parentRect);
+            }
         }
-        this.setState({ draggedOut });
     }
     _resetDragWatcher() {
         this._parendDragNode = null;
@@ -344,13 +349,13 @@ class GridLayout extends react_1.default.PureComponent {
             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, element);
+        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) {
@@ -379,7 +384,6 @@ class GridLayout extends react_1.default.PureComponent {
         if (this.context.temporaryLayout) {
             return;
         }
-        console.log('_onTargetRestore');
         const { currentDraggingElement } = this.state;
         if (currentDraggingElement) {
             this.setState({
@@ -428,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, draggedOut: this.state.draggedOut, 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

@@ -76,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, draggedOut, 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,7 +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-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
@@ -134,7 +134,7 @@ GridItem.propTypes = {
     id: PropTypes.string,
     item: PropTypes.object,
     isDragging: PropTypes.bool,
-    draggedOut: PropTypes.bool,
+    isDraggedOut: PropTypes.bool,
     layout: PropTypes.array,
     forwardedRef: PropTypes.any,
     forwardedPluginRef: PropTypes.any,

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

@@ -48,10 +48,10 @@ 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): void;
+    _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;

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

@@ -267,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;
@@ -291,20 +291,23 @@ class GridLayout extends React.PureComponent {
             this.setState({ draggedOut: false });
         }
     }
-    _forceCursorCapture(parentElement, position) {
-        const div = document.createElement('div');
-        const blockSize = 50;
+    // 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;
-        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);
+        // 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(() => {
-            div.remove();
+            block.remove();
         }, 100);
     }
     _updateDragCoordinates(e) {
@@ -322,12 +325,14 @@ class GridLayout extends React.PureComponent {
             draggedOut = false;
         }
         if (draggedOut !== this.state.draggedOut) {
-            this._forceCursorCapture(parent, {
-                top: clientY - parentRect.top,
-                left: clientX - parentRect.left,
-            });
+            this.setState({ draggedOut });
+            if (!draggedOut) {
+                this._forceCursorCapture(parent, {
+                    top: clientY - parentRect.top,
+                    left: clientX - parentRect.left,
+                }, parentRect);
+            }
         }
-        this.setState({ draggedOut });
     }
     _resetDragWatcher() {
         this._parendDragNode = null;
@@ -341,13 +346,13 @@ class GridLayout extends React.PureComponent {
             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, element);
+        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) {
@@ -376,7 +381,6 @@ class GridLayout extends React.PureComponent {
         if (this.context.temporaryLayout) {
             return;
         }
-        console.log('_onTargetRestore');
         const { currentDraggingElement } = this.state;
         if (currentDraggingElement) {
             this.setState({
@@ -425,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, draggedOut: this.state.draggedOut, 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-beta.0",
+  "version": "8.17.4",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {