@gravity-ui/dashkit 8.26.0 → 8.26.1

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

@@ -19,6 +19,10 @@
   border: solid 1px var(--_-dashkit-overlay-border-color);
   opacity: var(--_-dashkit-overlay-opacity);
 }
+.dashkit-grid-item__overlay-placeholder {
+  position: absolute;
+  inset: 0;
+}
 .dashkit-grid-item__item {
   --_-dashkit-grid-item-border-radius: var(
       --dashkit-grid-item-border-radius,
@@ -35,12 +39,15 @@
   pointer-events: none;
 }
 .dashkit-grid-item_is-dragged-out {
+  user-select: none;
   pointer-events: none;
+  touch-action: none;
 }
 
 .react-grid-item.dropping {
   user-select: none;
   pointer-events: none;
+  touch-action: none;
 }
 
 .react-grid-layout {

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

@@ -94,6 +94,10 @@ class GridItem extends react_1.default.PureComponent {
     renderOverlay() {
         const { isPlaceholder } = this.props;
         const { editMode } = this.context;
+        if (editMode && this.props.item.data._editActive) {
+            // needed for correst pointer-events: none work in firefox
+            return react_1.default.createElement("div", { className: b('overlay-placeholder') });
+        }
         if (!editMode || this.props.item.data._editActive || isPlaceholder) {
             return null;
         }
@@ -107,6 +111,7 @@ class GridItem extends react_1.default.PureComponent {
         // https://github.com/STRML/react-grid-layout/issues/721
         const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, isDraggedOut, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
         const { editMode } = this.context;
+        const { isFocused } = this.state;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
         const transform = style.transform;
@@ -116,24 +121,26 @@ class GridItem extends react_1.default.PureComponent {
                 .replace('react-resizable', '')
                 .replace('react-draggable', '')
                 .replace(constants_1.FOCUSED_CLASS_NAME, '')) +
-            (this.state.isFocused ? ` ${constants_1.FOCUSED_CLASS_NAME}` : '');
+            (isFocused ? ` ${constants_1.FOCUSED_CLASS_NAME}` : '');
+        const computedClassName = b({
+            'is-dragging': isDragging,
+            'is-dragged-out': isDraggedOut,
+            'is-focused': isFocused,
+            'with-custom-handle': withCustomHandle,
+        }, preparedClassName);
         const preparedChildren = editMode ? children : null;
         const reactGridLayoutProps = editMode
             ? { onMouseDown, onMouseUp, onTouchEnd, onTouchStart }
             : {};
-        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
+        const reactFocusProps = focusable
             ? {
                 onFocus: this.onFocusHandler,
                 onBlur: this.onBlurHandler,
                 tabIndex: -1,
             }
-            : {})),
+            : {};
+        const { _editActive } = this.props.item.data;
+        return (react_1.default.createElement("div", Object.assign({ className: computedClassName, "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, reactFocusProps),
             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, onItemMountChange: this.props.onItemMountChange, onItemRender: this.props.onItemRender, gridLayout: this.props.gridLayout })),
             !noOverlay && this.renderOverlay(),

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

@@ -292,7 +292,12 @@ class GridLayout extends react_1.default.PureComponent {
             const item = temporaryLayout
                 ? temporaryLayout.dragProps
                 : this.context.config.items.find(({ id }) => id === layoutId);
-            const { offsetX, offsetY } = e.nativeEvent;
+            let { offsetX, offsetY } = e.nativeEvent || {};
+            if (offsetX === undefined || offsetY === undefined) {
+                const gridRect = e.currentTarget.getBoundingClientRect();
+                offsetX = e.clientX - gridRect.left;
+                offsetY = e.clientY - gridRect.top;
+            }
             currentDraggingElement = {
                 group,
                 layoutItem,

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

@@ -94,6 +94,15 @@ class DragOverLayout extends react_grid_layout_1.default {
         };
         this.mouseMoveHandler = (e) => {
             if (this.props.hasSharedDragItem) {
+                if (!e.nativeEvent) {
+                    // Emulate nativeEvent for firefox
+                    const target = this.getInnerElement() || e.target;
+                    e.nativeEvent = {
+                        clientX: e.clientX,
+                        clientY: e.clientY,
+                        target,
+                    };
+                }
                 this.onDragOver(e);
             }
         };

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

@@ -19,6 +19,10 @@
   border: solid 1px var(--_-dashkit-overlay-border-color);
   opacity: var(--_-dashkit-overlay-opacity);
 }
+.dashkit-grid-item__overlay-placeholder {
+  position: absolute;
+  inset: 0;
+}
 .dashkit-grid-item__item {
   --_-dashkit-grid-item-border-radius: var(
       --dashkit-grid-item-border-radius,
@@ -35,12 +39,15 @@
   pointer-events: none;
 }
 .dashkit-grid-item_is-dragged-out {
+  user-select: none;
   pointer-events: none;
+  touch-action: none;
 }
 
 .react-grid-item.dropping {
   user-select: none;
   pointer-events: none;
+  touch-action: none;
 }
 
 .react-grid-layout {

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

@@ -92,6 +92,10 @@ class GridItem extends React.PureComponent {
     renderOverlay() {
         const { isPlaceholder } = this.props;
         const { editMode } = this.context;
+        if (editMode && this.props.item.data._editActive) {
+            // needed for correst pointer-events: none work in firefox
+            return React.createElement("div", { className: b('overlay-placeholder') });
+        }
         if (!editMode || this.props.item.data._editActive || isPlaceholder) {
             return null;
         }
@@ -105,6 +109,7 @@ class GridItem extends React.PureComponent {
         // https://github.com/STRML/react-grid-layout/issues/721
         const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, isDraggedOut, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
         const { editMode } = this.context;
+        const { isFocused } = this.state;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
         const transform = style.transform;
@@ -114,24 +119,26 @@ class GridItem extends React.PureComponent {
                 .replace('react-resizable', '')
                 .replace('react-draggable', '')
                 .replace(FOCUSED_CLASS_NAME, '')) +
-            (this.state.isFocused ? ` ${FOCUSED_CLASS_NAME}` : '');
+            (isFocused ? ` ${FOCUSED_CLASS_NAME}` : '');
+        const computedClassName = b({
+            'is-dragging': isDragging,
+            'is-dragged-out': isDraggedOut,
+            'is-focused': isFocused,
+            'with-custom-handle': withCustomHandle,
+        }, preparedClassName);
         const preparedChildren = editMode ? children : null;
         const reactGridLayoutProps = editMode
             ? { onMouseDown, onMouseUp, onTouchEnd, onTouchStart }
             : {};
-        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
+        const reactFocusProps = focusable
             ? {
                 onFocus: this.onFocusHandler,
                 onBlur: this.onBlurHandler,
                 tabIndex: -1,
             }
-            : {})),
+            : {};
+        const { _editActive } = this.props.item.data;
+        return (React.createElement("div", Object.assign({ className: computedClassName, "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, reactFocusProps),
             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, onItemMountChange: this.props.onItemMountChange, onItemRender: this.props.onItemRender, gridLayout: this.props.gridLayout })),
             !noOverlay && this.renderOverlay(),

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

@@ -289,7 +289,12 @@ class GridLayout extends React.PureComponent {
             const item = temporaryLayout
                 ? temporaryLayout.dragProps
                 : this.context.config.items.find(({ id }) => id === layoutId);
-            const { offsetX, offsetY } = e.nativeEvent;
+            let { offsetX, offsetY } = e.nativeEvent || {};
+            if (offsetX === undefined || offsetY === undefined) {
+                const gridRect = e.currentTarget.getBoundingClientRect();
+                offsetX = e.clientX - gridRect.left;
+                offsetY = e.clientY - gridRect.top;
+            }
             currentDraggingElement = {
                 group,
                 layoutItem,

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

@@ -90,6 +90,15 @@ class DragOverLayout extends ReactGridLayout {
         };
         this.mouseMoveHandler = (e) => {
             if (this.props.hasSharedDragItem) {
+                if (!e.nativeEvent) {
+                    // Emulate nativeEvent for firefox
+                    const target = this.getInnerElement() || e.target;
+                    e.nativeEvent = {
+                        clientX: e.clientX,
+                        clientY: e.clientY,
+                        target,
+                    };
+                }
                 this.onDragOver(e);
             }
         };

package/package.json

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