@gravity-ui/dashkit 8.1.0-beta.5 → 8.1.0-beta.7

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/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[]> {
 }
@@ -9,4 +10,11 @@ export type ItemDragProps = {
         w?: number;
         h?: number;
     };
+    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/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[]> {
 }
@@ -9,4 +10,11 @@ export type ItemDragProps = {
         w?: number;
         h?: number;
     };
+    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.5",
+  "version": "8.1.0-beta.7",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {