@gravity-ui/dashkit 8.1.0-beta.6 → 8.1.0-beta.8

package/build/cjs/components/ActionPanel/ActionPanel.js

@@ -9,7 +9,7 @@ const cn_1 = require("../../utils/cn");
 const b = (0, cn_1.cn)('dashkit-action-panel');
 const ActionPanelItemContainer = ({ item }) => {
     const dndProps = (0, useDnDItemProps_1.useDnDItemProps)(item);
-    return (react_1.default.createElement("div", Object.assign({ role: "button", className: b('item', { draggable: Boolean(dndProps) }, item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick, "data-qa": item.qa }, dndProps),
+    return (react_1.default.createElement("div", Object.assign({ role: "button", className: b('item', { draggable: Boolean(dndProps) }, item.className), onClick: item.onClick, "data-qa": item.qa }, dndProps),
         react_1.default.createElement("div", { className: b('icon') }, item.icon),
         react_1.default.createElement("div", { className: b('title'), title: item.title }, item.title)));
 };
@@ -19,7 +19,7 @@ const ActionPanel = (props) => {
     const isDisabled = (_a = props.disable) !== null && _a !== void 0 ? _a : false;
     const isAnimated = (_b = props.toggleAnimation) !== null && _b !== void 0 ? _b : false;
     const nodeRef = react_1.default.useRef(null);
-    const content = (react_1.default.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item, i) => (react_1.default.createElement(exports.ActionPanelItemContainer, { key: `item_${i}`, item: item })))));
+    const content = (react_1.default.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item) => (react_1.default.createElement(exports.ActionPanelItemContainer, { key: `dk-action-panel-${item.id}`, item: item })))));
     if (isAnimated) {
         return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: !isDisabled, nodeRef: nodeRef, classNames: b(null), timeout: 300, unmountOnExit: true }, content));
     }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDragProps, ItemsStateAndParams } from '../../shared';
+import type { Config, ConfigItem, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
 import { ContextProps, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
@@ -15,12 +15,7 @@ interface DashKitDefaultProps {
         config: Config;
         itemsStateAndParams: ItemsStateAndParams;
     }) => void;
-    onDrop: (dropProps: {
-        commit: () => void;
-        dragProps: ItemDragProps;
-        itemLayout: ConfigLayout;
-        newLayout: ConfigLayout[];
-    }) => void;
+    onDrop: (dropProps: ItemDropProps) => void;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
     itemsStateAndParams: ItemsStateAndParams;

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

@@ -1,6 +1,9 @@
 import React from 'react';
+import type { ItemDragProps } from '../../shared';
 type DashKitDnDWrapperProps = {
     dragImageSrc?: string;
+    onDragStart?: (dragProps: ItemDragProps) => void;
+    onDragEnd?: () => void;
     children: React.ReactElement;
 };
 export declare const DashKitDnDWrapper: React.FC<DashKitDnDWrapperProps>;

package/build/cjs/components/DashKitDnDWrapper/DashKitDnDWrapper.js

@@ -8,16 +8,20 @@ const defaultImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABC
 const DashKitDnDWrapper = (props) => {
     const [dragProps, setDragProps] = react_1.default.useState(null);
     const dragImagePreview = react_1.default.useMemo(() => {
-        const img = new Image(1, 1);
+        const img = new Image();
         img.src = props.dragImageSrc || defaultImageSrc;
         return img;
-    }, [props]);
-    const onDragStart = react_1.default.useCallback((_, currentProps) => {
-        setDragProps(currentProps);
-    }, [setDragProps]);
+    }, [props.dragImageSrc]);
+    const onDragStart = react_1.default.useCallback((_, itemDragProps) => {
+        var _a;
+        setDragProps(itemDragProps);
+        (_a = props.onDragStart) === null || _a === void 0 ? void 0 : _a.call(props, itemDragProps);
+    }, [setDragProps, props.onDragStart]);
     const onDragEnd = react_1.default.useCallback((_) => {
+        var _a;
         setDragProps(null);
-    }, [setDragProps]);
+        (_a = props.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(props);
+    }, [setDragProps, props.onDragEnd]);
     const contextValue = react_1.default.useMemo(() => {
         return {
             dragProps,

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

@@ -46,8 +46,8 @@ class GridLayout extends react_1.default.PureComponent {
             this.setState({ isDragging: false });
         };
         this._onDropDragOver = (e) => {
-            const { editMode, dragOverPlugin, onDropDragOver, temporaryLayout } = this.context;
-            if (!editMode || !dragOverPlugin || temporaryLayout) {
+            const { editMode, dragOverPlugin, onDropDragOver } = this.context;
+            if (!editMode || !dragOverPlugin) {
                 return false;
             }
             return onDropDragOver(e);
@@ -56,8 +56,8 @@ class GridLayout extends react_1.default.PureComponent {
             if (!item) {
                 return false;
             }
-            const { editMode, temporaryLayout, onDrop } = this.context;
-            if (!editMode && temporaryLayout) {
+            const { editMode, onDrop } = this.context;
+            if (!editMode) {
                 return false;
             }
             onDrop === null || onDrop === void 0 ? void 0 : onDrop(layout, item, e);
@@ -95,18 +95,18 @@ class GridLayout extends react_1.default.PureComponent {
         }
     }
     renderTemporaryPlaceholder() {
-        const { temporaryLayout, dragOverPlugin, noOverlay, draggableHandleClassName } = this.context;
-        if (!temporaryLayout || !dragOverPlugin) {
+        const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
+        if (!temporaryLayout || !temporaryLayout.dragProps) {
             return null;
         }
         const id = constants_1.TEMPORARY_ITEM_ID;
-        const type = dragOverPlugin.type;
-        return (react_1.default.createElement(GridItem_1.default, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+        const { type } = temporaryLayout.dragProps;
+        return (react_1.default.createElement(GridItem_1.default, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
     }
     render() {
         const { layout, temporaryLayout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         this.pluginsRefs.length = config.items.length;
-        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, registerManager.gridLayout, { layout: temporaryLayout || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
+        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, registerManager.gridLayout, { layout: (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
@@ -118,7 +118,7 @@ class GridLayout extends react_1.default.PureComponent {
             config.items.map((item, i) => {
                 return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: (pluginRef) => {
                         this.pluginsRefs[i] = pluginRef;
-                    }, key: item.id, id: item.id, item: item, layout: temporaryLayout || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+                    }, key: item.id, id: item.id, item: item, layout: (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
             }),
             this.renderTemporaryPlaceholder()));
     }

package/build/cjs/hocs/withContext.js

@@ -55,7 +55,7 @@ function useMemoStateContext(props) {
         }
         else {
             if (temporaryLayout) {
-                setTemporaryLayout(temporaryLayout.filter(({ i }) => i !== id));
+                setTemporaryLayout(Object.assign(Object.assign({}, temporaryLayout), { data: temporaryLayout.filter(({ i }) => i !== id) }));
             }
             onChange(utils_1.UpdateManager.removeItem({
                 id,
@@ -171,14 +171,16 @@ function useMemoStateContext(props) {
         }
         return false;
     }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
-    const onDropProp = props.onDrop;
     const onDrop = react_1.default.useCallback((newLayout, item) => {
         if (!dragProps) {
             return;
         }
-        setTemporaryLayout(newLayout);
+        setTemporaryLayout({
+            data: newLayout,
+            dragProps,
+        });
         const { i, w, h, x, y } = item;
-        onDropProp({
+        props.onDrop({
             newLayout: newLayout.reduce((memo, l) => {
                 if (l.i !== i) {
                     memo.push({ i: l.i, w: l.w, h: l.h, x: l.x, y: l.y });
@@ -189,7 +191,7 @@ function useMemoStateContext(props) {
             commit: resetTemporaryLayout,
             dragProps,
         });
-    }, [dragProps, onDropProp, resetTemporaryLayout]);
+    }, [dragProps, props.onDrop, setTemporaryLayout, resetTemporaryLayout]);
     return react_1.default.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,

package/build/cjs/shared/types/common.d.ts

@@ -1,3 +1,4 @@
+import { ConfigLayout } from './config';
 export type Dictionary<T = unknown> = Record<string, T>;
 export interface StringParams extends Dictionary<string | string[]> {
 }
@@ -11,3 +12,9 @@ export type ItemDragProps = {
     };
     extra?: any;
 };
+export type ItemDropProps = {
+    commit: () => void;
+    dragProps: ItemDragProps;
+    itemLayout: ConfigLayout;
+    newLayout: ConfigLayout[];
+};

package/build/esm/components/ActionPanel/ActionPanel.js

@@ -6,7 +6,7 @@ import './ActionPanel.css';
 const b = cn('dashkit-action-panel');
 export const ActionPanelItemContainer = ({ item }) => {
     const dndProps = useDnDItemProps(item);
-    return (React.createElement("div", Object.assign({ role: "button", className: b('item', { draggable: Boolean(dndProps) }, item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick, "data-qa": item.qa }, dndProps),
+    return (React.createElement("div", Object.assign({ role: "button", className: b('item', { draggable: Boolean(dndProps) }, item.className), onClick: item.onClick, "data-qa": item.qa }, dndProps),
         React.createElement("div", { className: b('icon') }, item.icon),
         React.createElement("div", { className: b('title'), title: item.title }, item.title)));
 };
@@ -15,7 +15,7 @@ export const ActionPanel = (props) => {
     const isDisabled = (_a = props.disable) !== null && _a !== void 0 ? _a : false;
     const isAnimated = (_b = props.toggleAnimation) !== null && _b !== void 0 ? _b : false;
     const nodeRef = React.useRef(null);
-    const content = (React.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item, i) => (React.createElement(ActionPanelItemContainer, { key: `item_${i}`, item: item })))));
+    const content = (React.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item) => (React.createElement(ActionPanelItemContainer, { key: `dk-action-panel-${item.id}`, item: item })))));
     if (isAnimated) {
         return (React.createElement(CSSTransition, { in: !isDisabled, nodeRef: nodeRef, classNames: b(null), timeout: 300, unmountOnExit: true }, content));
     }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDragProps, ItemsStateAndParams } from '../../shared';
+import type { Config, ConfigItem, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
 import { ContextProps, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
@@ -15,12 +15,7 @@ interface DashKitDefaultProps {
         config: Config;
         itemsStateAndParams: ItemsStateAndParams;
     }) => void;
-    onDrop: (dropProps: {
-        commit: () => void;
-        dragProps: ItemDragProps;
-        itemLayout: ConfigLayout;
-        newLayout: ConfigLayout[];
-    }) => void;
+    onDrop: (dropProps: ItemDropProps) => void;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
     itemsStateAndParams: ItemsStateAndParams;

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

@@ -1,6 +1,9 @@
 import React from 'react';
+import type { ItemDragProps } from '../../shared';
 type DashKitDnDWrapperProps = {
     dragImageSrc?: string;
+    onDragStart?: (dragProps: ItemDragProps) => void;
+    onDragEnd?: () => void;
     children: React.ReactElement;
 };
 export declare const DashKitDnDWrapper: React.FC<DashKitDnDWrapperProps>;

package/build/esm/components/DashKitDnDWrapper/DashKitDnDWrapper.js

@@ -4,16 +4,20 @@ const defaultImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABC
 export const DashKitDnDWrapper = (props) => {
     const [dragProps, setDragProps] = React.useState(null);
     const dragImagePreview = React.useMemo(() => {
-        const img = new Image(1, 1);
+        const img = new Image();
         img.src = props.dragImageSrc || defaultImageSrc;
         return img;
-    }, [props]);
-    const onDragStart = React.useCallback((_, currentProps) => {
-        setDragProps(currentProps);
-    }, [setDragProps]);
+    }, [props.dragImageSrc]);
+    const onDragStart = React.useCallback((_, itemDragProps) => {
+        var _a;
+        setDragProps(itemDragProps);
+        (_a = props.onDragStart) === null || _a === void 0 ? void 0 : _a.call(props, itemDragProps);
+    }, [setDragProps, props.onDragStart]);
     const onDragEnd = React.useCallback((_) => {
+        var _a;
         setDragProps(null);
-    }, [setDragProps]);
+        (_a = props.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(props);
+    }, [setDragProps, props.onDragEnd]);
     const contextValue = React.useMemo(() => {
         return {
             dragProps,

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

@@ -43,8 +43,8 @@ class GridLayout extends React.PureComponent {
             this.setState({ isDragging: false });
         };
         this._onDropDragOver = (e) => {
-            const { editMode, dragOverPlugin, onDropDragOver, temporaryLayout } = this.context;
-            if (!editMode || !dragOverPlugin || temporaryLayout) {
+            const { editMode, dragOverPlugin, onDropDragOver } = this.context;
+            if (!editMode || !dragOverPlugin) {
                 return false;
             }
             return onDropDragOver(e);
@@ -53,8 +53,8 @@ class GridLayout extends React.PureComponent {
             if (!item) {
                 return false;
             }
-            const { editMode, temporaryLayout, onDrop } = this.context;
-            if (!editMode && temporaryLayout) {
+            const { editMode, onDrop } = this.context;
+            if (!editMode) {
                 return false;
             }
             onDrop === null || onDrop === void 0 ? void 0 : onDrop(layout, item, e);
@@ -92,18 +92,18 @@ class GridLayout extends React.PureComponent {
         }
     }
     renderTemporaryPlaceholder() {
-        const { temporaryLayout, dragOverPlugin, noOverlay, draggableHandleClassName } = this.context;
-        if (!temporaryLayout || !dragOverPlugin) {
+        const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
+        if (!temporaryLayout || !temporaryLayout.dragProps) {
             return null;
         }
         const id = TEMPORARY_ITEM_ID;
-        const type = dragOverPlugin.type;
-        return (React.createElement(GridItem, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+        const { type } = temporaryLayout.dragProps;
+        return (React.createElement(GridItem, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
     }
     render() {
         const { layout, temporaryLayout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         this.pluginsRefs.length = config.items.length;
-        return (React.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: temporaryLayout || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
+        return (React.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
@@ -115,7 +115,7 @@ class GridLayout extends React.PureComponent {
             config.items.map((item, i) => {
                 return (React.createElement(GridItem, { forwardedPluginRef: (pluginRef) => {
                         this.pluginsRefs[i] = pluginRef;
-                    }, key: item.id, id: item.id, item: item, layout: temporaryLayout || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+                    }, key: item.id, id: item.id, item: item, layout: (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
             }),
             this.renderTemporaryPlaceholder()));
     }

package/build/esm/hocs/withContext.js

@@ -51,7 +51,7 @@ function useMemoStateContext(props) {
         }
         else {
             if (temporaryLayout) {
-                setTemporaryLayout(temporaryLayout.filter(({ i }) => i !== id));
+                setTemporaryLayout(Object.assign(Object.assign({}, temporaryLayout), { data: temporaryLayout.filter(({ i }) => i !== id) }));
             }
             onChange(UpdateManager.removeItem({
                 id,
@@ -167,14 +167,16 @@ function useMemoStateContext(props) {
         }
         return false;
     }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
-    const onDropProp = props.onDrop;
     const onDrop = React.useCallback((newLayout, item) => {
         if (!dragProps) {
             return;
         }
-        setTemporaryLayout(newLayout);
+        setTemporaryLayout({
+            data: newLayout,
+            dragProps,
+        });
         const { i, w, h, x, y } = item;
-        onDropProp({
+        props.onDrop({
             newLayout: newLayout.reduce((memo, l) => {
                 if (l.i !== i) {
                     memo.push({ i: l.i, w: l.w, h: l.h, x: l.x, y: l.y });
@@ -185,7 +187,7 @@ function useMemoStateContext(props) {
             commit: resetTemporaryLayout,
             dragProps,
         });
-    }, [dragProps, onDropProp, resetTemporaryLayout]);
+    }, [dragProps, props.onDrop, setTemporaryLayout, resetTemporaryLayout]);
     return React.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,

package/build/esm/shared/types/common.d.ts

@@ -1,3 +1,4 @@
+import { ConfigLayout } from './config';
 export type Dictionary<T = unknown> = Record<string, T>;
 export interface StringParams extends Dictionary<string | string[]> {
 }
@@ -11,3 +12,9 @@ export type ItemDragProps = {
     };
     extra?: any;
 };
+export type ItemDropProps = {
+    commit: () => void;
+    dragProps: ItemDragProps;
+    itemLayout: ConfigLayout;
+    newLayout: ConfigLayout[];
+};

package/package.json

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