@gravity-ui/dashkit 8.1.0 → 8.2.0-beta.0

package/build/cjs/hocs/withContext.js

@@ -4,6 +4,7 @@ exports.withContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+const common_1 = require("../constants/common");
 const DashKitContext_1 = require("../context/DashKitContext");
 const shared_1 = require("../shared");
 const utils_1 = require("../utils");
@@ -15,6 +16,10 @@ function useMemoStateContext(props) {
     // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
     const originalLayouts = react_1.default.useRef({});
     const adjustedLayouts = react_1.default.useRef({});
+    const [temporaryLayout, setTemporaryLayout] = react_1.default.useState(null);
+    const resetTemporaryLayout = react_1.default.useCallback(() => setTemporaryLayout(null), [setTemporaryLayout]);
+    const dndContext = react_1.default.useContext(DashKitContext_1.DashKitDnDContext);
+    const outerDnDEnable = Boolean(dndContext);
     // TODO: need move originalLayouts, adjustedLayouts to state
     const [layoutUpdateCounter, forceUpdateLayout] = react_1.default.useState(0);
     const onChange = react_1.default.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams }) => {
@@ -45,12 +50,27 @@ function useMemoStateContext(props) {
         }
     }, [props.config, onChange]);
     const onItemRemove = react_1.default.useCallback((id) => {
-        onChange(utils_1.UpdateManager.removeItem({
-            id,
-            config: props.config,
-            itemsStateAndParams: props.itemsStateAndParams,
-        }));
-    }, [props.config, props.itemsStateAndParams, onChange]);
+        if (id === common_1.TEMPORARY_ITEM_ID) {
+            resetTemporaryLayout();
+        }
+        else {
+            if (temporaryLayout) {
+                setTemporaryLayout(Object.assign(Object.assign({}, temporaryLayout), { data: temporaryLayout.data.filter(({ i }) => i !== id) }));
+            }
+            onChange(utils_1.UpdateManager.removeItem({
+                id,
+                config: props.config,
+                itemsStateAndParams: props.itemsStateAndParams,
+            }));
+        }
+    }, [
+        props.config,
+        props.itemsStateAndParams,
+        temporaryLayout,
+        onChange,
+        setTemporaryLayout,
+        resetTemporaryLayout,
+    ]);
     const onItemStateAndParamsChange = react_1.default.useCallback((id, stateAndParams, options) => {
         onChange({
             itemsStateAndParams: utils_1.UpdateManager.changeStateAndParams({
@@ -124,8 +144,57 @@ function useMemoStateContext(props) {
     const reloadItems = react_1.default.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);
+    const dragProps = dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragProps;
+    const dragOverPlugin = react_1.default.useMemo(() => {
+        if (!dragProps) {
+            return null;
+        }
+        const pluginType = dragProps.type;
+        if (props.registerManager.check(pluginType)) {
+            return props.registerManager.getItem(pluginType);
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error(`Uknown pluginType: ${pluginType}`);
+            return null;
+        }
+    }, [dragProps, props.registerManager]);
+    const onDropDragOver = react_1.default.useCallback(() => {
+        if (temporaryLayout) {
+            resetTemporaryLayout();
+            return false;
+        }
+        if (dragOverPlugin) {
+            const { defaultLayout } = dragOverPlugin;
+            const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || common_1.DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || common_1.DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
+            return { h, w };
+        }
+        return false;
+    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
+    const onDrop = react_1.default.useCallback((newLayout, item) => {
+        if (!dragProps) {
+            return;
+        }
+        setTemporaryLayout({
+            data: newLayout,
+            dragProps,
+        });
+        const { i, w, h, x, y } = item;
+        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 });
+                }
+                return memo;
+            }, []),
+            itemLayout: { w, h, x, y },
+            commit: resetTemporaryLayout,
+            dragProps,
+        });
+    }, [dragProps, props.onDrop, setTemporaryLayout, resetTemporaryLayout]);
     return react_1.default.useMemo(() => ({
         layout: resultLayout,
+        temporaryLayout,
         config: props.config,
         context: props.context,
         noOverlay: props.noOverlay,
@@ -139,6 +208,8 @@ function useMemoStateContext(props) {
         registerManager: props.registerManager,
         onItemStateAndParamsChange,
         removeItem: onItemRemove,
+        onDrop,
+        onDropDragOver,
         editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
@@ -147,8 +218,11 @@ function useMemoStateContext(props) {
         revertToOriginalLayout,
         forwardedMetaRef: props.forwardedMetaRef,
         draggableHandleClassName: props.draggableHandleClassName,
+        outerDnDEnable,
+        dragOverPlugin,
     }), [
         resultLayout,
+        temporaryLayout,
         props.config,
         props.context,
         props.noOverlay,
@@ -161,6 +235,8 @@ function useMemoStateContext(props) {
         props.registerManager,
         onItemStateAndParamsChange,
         onItemRemove,
+        onDrop,
+        onDropDragOver,
         props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
@@ -169,6 +245,8 @@ function useMemoStateContext(props) {
         revertToOriginalLayout,
         props.forwardedMetaRef,
         props.draggableHandleClassName,
+        outerDnDEnable,
+        dragOverPlugin,
     ]);
 }
 function withContext(Component) {

package/build/cjs/hooks/useDnDItemProps.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ActionPanelItem } from '../components';
+type DndProps = null | {
+    draggable: true;
+    unselectable: 'on';
+    onDragStart: React.DragEventHandler<HTMLDivElement>;
+    onDragEnd: React.DragEventHandler<HTMLDivElement>;
+};
+export declare const useDnDItemProps: (item: ActionPanelItem) => DndProps;
+export {};

package/build/cjs/hooks/useDnDItemProps.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDnDItemProps = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const DashKitContext_1 = require("../context/DashKitContext");
+const useDnDItemProps = (item) => {
+    const dragContext = react_1.default.useContext(DashKitContext_1.DashKitDnDContext);
+    const onDragStart = react_1.default.useCallback((e) => {
+        if (dragContext && item.dragProps) {
+            dragContext.onDragStart(e, item.dragProps);
+            e.dataTransfer.setDragImage(dragContext.dragImagePreview, 0, 0);
+        }
+    }, [dragContext, item.dragProps]);
+    const onDragEnd = react_1.default.useCallback((e) => {
+        if (dragContext) {
+            dragContext.onDragEnd(e);
+        }
+    }, [dragContext]);
+    if (dragContext && item.dragProps) {
+        return {
+            draggable: true,
+            unselectable: 'on',
+            onDragStart,
+            onDragEnd,
+        };
+    }
+    return null;
+};
+exports.useDnDItemProps = useDnDItemProps;

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

@@ -1,3 +1,4 @@
 export declare const CURRENT_VERSION = 2;
 export declare const META_KEY = "__meta__";
 export declare const ACTION_PARAM_PREFIX = "_ap_";
+export declare const TERMORARY_ITEM_ID = "__dropping-elem__";

package/build/cjs/shared/constants/common.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ACTION_PARAM_PREFIX = exports.META_KEY = exports.CURRENT_VERSION = void 0;
+exports.TERMORARY_ITEM_ID = exports.ACTION_PARAM_PREFIX = exports.META_KEY = exports.CURRENT_VERSION = void 0;
 exports.CURRENT_VERSION = 2;
 exports.META_KEY = '__meta__';
 exports.ACTION_PARAM_PREFIX = '_ap_';
+exports.TERMORARY_ITEM_ID = '__dropping-elem__';

package/build/cjs/shared/modules/state-and-params.d.ts

@@ -5,9 +5,10 @@ export interface GetItemsParamsArg {
     config: Config;
     itemsStateAndParams: ItemsStateAndParams;
     plugins: PluginBase[];
+    useStateAsInitial?: boolean;
 }
 type GetItemsParamsReturn = Record<string, StringParams | Record<string, StringParams>>;
-export declare function getItemsParams({ defaultGlobalParams, globalParams, config, itemsStateAndParams, plugins, }: GetItemsParamsArg): GetItemsParamsReturn;
+export declare function getItemsParams({ defaultGlobalParams, globalParams, config, itemsStateAndParams, plugins, useStateAsInitial, }: GetItemsParamsArg): GetItemsParamsReturn;
 export declare function getItemsState({ config, itemsStateAndParams, }: {
     config: Config;
     itemsStateAndParams: ItemsStateAndParams;

package/build/cjs/shared/modules/state-and-params.js

@@ -5,7 +5,18 @@ const tslib_1 = require("tslib");
 const groupBy_1 = tslib_1.__importDefault(require("lodash/groupBy"));
 const constants_1 = require("../constants");
 const helpers_1 = require("./helpers");
-function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDefaultsByNamespace, getMergedParams, defaultGlobalParams, globalParams, isFirstVersion, queueData, }) {
+const getParamsFromStateAndParams = ({ itemsStateAndParams, parentItemId, item, }) => {
+    const widgetId = parentItemId || item.id;
+    if (!(widgetId in itemsStateAndParams)) {
+        return {};
+    }
+    const stateAndParams = itemsStateAndParams;
+    const itemParams = parentItemId
+        ? Object.assign({}, stateAndParams[widgetId].params[item.id])
+        : Object.assign({}, stateAndParams[widgetId].params);
+    return itemParams;
+};
+function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDefaultsByNamespace, getMergedParams, defaultGlobalParams, globalParams, isFirstVersion, queueData, parentItemId, useStateAsInitial, }) {
     var _a, _b;
     const { id, namespace } = item;
     let defaultWidgetParams = {};
@@ -24,7 +35,9 @@ function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDe
     // default parameters to begin with
     affectingItemsWithDefaults.reduceRight((defaultParams, itemWithDefaults) => {
         return Object.assign(Object.assign({}, defaultParams), getMergedParams(itemWithDefaults.defaults || {}));
-    }, {}), getMergedParams(globalParams));
+    }, {}), getMergedParams(globalParams), useStateAsInitial
+        ? getParamsFromStateAndParams({ parentItemId, item, itemsStateAndParams })
+        : {});
     if (isFirstVersion) {
         itemParams = Object.assign(itemParams, ((_b = itemsStateAndParams === null || itemsStateAndParams === void 0 ? void 0 : itemsStateAndParams[id]) === null || _b === void 0 ? void 0 : _b.params) || {});
     }
@@ -49,7 +62,7 @@ function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDe
     }
     return Object.assign(Object.assign({}, defaultWidgetParams), itemParams);
 }
-function getItemsParams({ defaultGlobalParams = {}, globalParams = {}, config, itemsStateAndParams, plugins, }) {
+function getItemsParams({ defaultGlobalParams = {}, globalParams = {}, config, itemsStateAndParams, plugins, useStateAsInitial, }) {
     const { aliases, connections } = config;
     const items = (0, helpers_1.prerenderItems)({ items: config.items, plugins });
     const isFirstVersion = (0, helpers_1.getCurrentVersion)(itemsStateAndParams) === 1;
@@ -92,10 +105,11 @@ function getItemsParams({ defaultGlobalParams = {}, globalParams = {}, config, i
             globalParams,
             isFirstVersion,
             queueData,
+            useStateAsInitial,
         };
         if ((0, helpers_1.isItemWithGroup)(item)) {
             const groupParams = item.data.group.reduce((groupItemParams, groupItem) => {
-                groupItemParams[groupItem.id] = getItemParams(Object.assign({ item: groupItem }, paramsOptions));
+                groupItemParams[groupItem.id] = getItemParams(Object.assign({ item: groupItem, parentItemId: item.id }, paramsOptions));
                 return groupItemParams;
             }, {});
             return Object.assign(Object.assign({}, itemsParams), { [id]: groupParams });

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

@@ -1,5 +1,20 @@
+import { ConfigLayout } from './config';
 export type Dictionary<T = unknown> = Record<string, T>;
 export interface StringParams extends Dictionary<string | string[]> {
 }
 export interface GlobalParams extends StringParams {
 }
+export type ItemDragProps = {
+    type: string;
+    layout?: {
+        w?: number;
+        h?: number;
+    };
+    extra?: any;
+};
+export type ItemDropProps = {
+    commit: () => void;
+    dragProps: ItemDragProps;
+    itemLayout: ConfigLayout;
+    newLayout: ConfigLayout[];
+};

package/build/cjs/typings/config.d.ts

@@ -8,3 +8,6 @@ export type SetConfigItem = ConfigItem | AddConfigItem;
 export type SetItemOptions = {
     excludeIds?: string[];
 };
+export type SetNewItemOptions = SetItemOptions & {
+    updateLayout?: ConfigLayout[];
+};

package/build/cjs/typings/plugin.d.ts

@@ -36,4 +36,5 @@ export interface PluginDefaultLayout {
 export interface Plugin<P extends PluginWidgetProps<T> = any, T = StringParams> extends PluginBase {
     defaultLayout?: PluginDefaultLayout;
     renderer: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;
+    placeholderRenderer?: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;
 }

package/build/cjs/utils/update-manager.d.ts

@@ -1,5 +1,5 @@
-import type { Config, ConfigItem, ItemStateAndParams, ItemStateAndParamsChangeOptions, ItemsStateAndParams } from '../shared';
-import type { AddConfigItem, SetItemOptions, WidgetLayout } from '../typings';
+import type { Config, ConfigItem, ConfigItemGroup, ItemStateAndParams, ItemStateAndParamsChangeOptions, ItemsStateAndParams } from '../shared';
+import type { AddConfigItem, SetItemOptions, SetNewItemOptions, WidgetLayout } from '../typings';
 import { RegisterManagerPluginLayout } from './register-manager';
 interface RemoveItemArg {
     id: string;
@@ -13,13 +13,20 @@ interface ChangeStateAndParamsArg {
     stateAndParams: ItemStateAndParams;
     options?: ItemStateAndParamsChangeOptions;
 }
+export declare const getChangedParams: ({ initiatorItem, stateAndParams, itemsStateAndParams, }: {
+    initiatorItem: ConfigItem | ConfigItemGroup;
+    stateAndParams: ItemStateAndParams;
+    itemsStateAndParams: ItemsStateAndParams;
+}) => {
+    [x: string]: string | string[];
+};
 export declare class UpdateManager {
     static addItem({ item, namespace, layout, config, options, }: {
         item: AddConfigItem;
         namespace: string;
         layout: RegisterManagerPluginLayout;
         config: Config;
-        options: SetItemOptions;
+        options: SetNewItemOptions;
     }): Config;
     static editItem({ item, namespace, config, options, }: {
         item: ConfigItem;

package/build/cjs/utils/update-manager.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UpdateManager = void 0;
+exports.UpdateManager = exports.getChangedParams = void 0;
 const tslib_1 = require("tslib");
 const immutability_helper_1 = tslib_1.__importStar(require("immutability-helper"));
 const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
@@ -78,6 +78,11 @@ function getAllowableChangedParams(item, stateAndParams, itemsStateAndParams, pa
             : allowedParams;
     }
     const stateParamsConf = stateAndParams.params;
+    // check if structure is StringParams or Record<string, StringParams>
+    // if it's Record<string, StringParams>, then this is a group application of params
+    // and checking for comparison of allowedParams and stateParamsConf is not necessary
+    const isGroupParamsApply = typeof (stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]) === 'object' &&
+        !Array.isArray(stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]);
     if ((0, shared_1.isItemWithTabs)(item)) {
         let tab;
         if ('state' in stateAndParams && ((_a = stateAndParams.state) === null || _a === void 0 ? void 0 : _a.tabId)) {
@@ -90,14 +95,11 @@ function getAllowableChangedParams(item, stateAndParams, itemsStateAndParams, pa
         allowedParams = (0, pick_1.default)(stateParamsConf, Object.keys((tab === null || tab === void 0 ? void 0 : tab.params) || {}));
     }
     else {
-        // check if structure is StringParams or Record<string, StringParams>
-        const paramsConf = typeof (stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]) === 'object' &&
-            !Array.isArray(stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id])
-            ? stateParamsConf[item.id]
-            : stateParamsConf;
+        const paramsConf = isGroupParamsApply ? stateParamsConf[item.id] : stateParamsConf;
         allowedParams = (0, pick_1.default)(paramsConf, Object.keys(item.defaults || {}));
     }
-    if (Object.keys(allowedParams || {}).length !== Object.keys(stateParamsConf || {}).length) {
+    if (!isGroupParamsApply &&
+        Object.keys(allowedParams || {}).length !== Object.keys(stateParamsConf || {}).length) {
         console.warn('Параметры, которых нет в defaults, будут проигнорированы!');
     }
     return allowedParams;
@@ -180,6 +182,12 @@ function getNewItemData({ item, config, counter: argsCounter, salt, options }) {
     }
     return { data, counter, excludeIds };
 }
+const getChangedParams = ({ initiatorItem, stateAndParams, itemsStateAndParams, }) => {
+    const allowableParams = getAllowableChangedParams(initiatorItem, stateAndParams, itemsStateAndParams);
+    const allowableActionParams = getAllowableChangedParams(initiatorItem, stateAndParams, itemsStateAndParams, { type: 'actionParams', returnPrefix: true });
+    return Object.assign(Object.assign({}, allowableParams), allowableActionParams);
+};
+exports.getChangedParams = getChangedParams;
 function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStateAndParams, stateAndParams, config, unusedIds, }) {
     var _a;
     const meta = (0, shared_1.addGroupToQueue)({
@@ -192,9 +200,12 @@ function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStat
     const currentItemParams = (_a = itemsStateAndParams[initiatorId]) === null || _a === void 0 ? void 0 : _a.params;
     for (const groupItem of initiatorItem.data.group) {
         if (groupItemIds.includes(groupItem.id)) {
-            const allowableParams = getAllowableChangedParams(groupItem, stateAndParams, itemsStateAndParams);
-            const allowableActionParams = getAllowableChangedParams(groupItem, stateAndParams, itemsStateAndParams, { type: 'actionParams', returnPrefix: true });
-            updatedItems[groupItem.id] = Object.assign(Object.assign({}, allowableParams), allowableActionParams);
+            const changedParams = (0, exports.getChangedParams)({
+                initiatorItem: groupItem,
+                stateAndParams,
+                itemsStateAndParams,
+            });
+            updatedItems[groupItem.id] = changedParams;
             continue;
         }
         if (currentItemParams && currentItemParams[groupItem.id]) {
@@ -216,19 +227,37 @@ function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStat
 }
 class UpdateManager {
     static addItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, layout, config, options, }) {
-        const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
-        const saveDefaultLayout = (0, pick_1.default)(layout, ['h', 'w', 'x', 'y']);
         const salt = config.salt;
         const newItemData = getNewItemData({ item, config, salt, counter: config.counter, options });
         let counter = newItemData.counter;
         const newIdData = (0, get_new_id_1.getNewId)({ config, salt, counter, excludeIds: newItemData.excludeIds });
         counter = newIdData.counter;
         const newItem = Object.assign(Object.assign({}, item), { id: newIdData.id, data: newItemData.data, namespace });
-        return (0, immutability_helper_1.default)(config, {
-            items: { $push: [newItem] },
-            layout: { $push: [Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id })] },
-            counter: { $set: counter },
-        });
+        const saveDefaultLayout = (0, pick_1.default)(layout, ['h', 'w', 'x', 'y']);
+        if (options.updateLayout) {
+            const byId = options.updateLayout.reduce((memo, t) => {
+                memo[t.i] = t;
+                return memo;
+            }, {});
+            const newLayout = [
+                ...config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))),
+                Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id }),
+            ];
+            return (0, immutability_helper_1.default)(config, {
+                items: { $push: [newItem] },
+                layout: { $set: newLayout },
+                counter: { $set: counter },
+            });
+        }
+        else {
+            const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
+            const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id });
+            return (0, immutability_helper_1.default)(config, {
+                items: { $push: [newItem] },
+                layout: { $push: [newLayoutItem] },
+                counter: { $set: counter },
+            });
+        }
     }
     static editItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, config, options, }) {
         const itemIndex = config.items.findIndex(({ id }) => item.id === id);
@@ -336,8 +365,11 @@ class UpdateManager {
             });
         }
         if ('params' in stateAndParams) {
-            const allowableParams = getAllowableChangedParams(initiatorItem, stateAndParams, itemsStateAndParams);
-            const allowableActionParams = getAllowableChangedParams(initiatorItem, stateAndParams, itemsStateAndParams, { type: 'actionParams', returnPrefix: true });
+            const changedParams = (0, exports.getChangedParams)({
+                initiatorItem,
+                stateAndParams,
+                itemsStateAndParams,
+            });
             const tabId = (0, shared_1.isItemWithTabs)(initiatorItem)
                 ? newTabId || (0, shared_1.resolveItemInnerId)({ item: initiatorItem, itemsStateAndParams })
                 : undefined;
@@ -352,7 +384,7 @@ class UpdateManager {
                 $unset: unusedIds,
                 [initiatorId]: {
                     $auto: Object.assign({ params: {
-                            [commandUpdateParams]: Object.assign(Object.assign({}, allowableParams), allowableActionParams),
+                            [commandUpdateParams]: changedParams,
                         } }, (hasState ? { state: { $set: stateAndParams.state } } : {})),
                 },
                 [shared_1.META_KEY]: { $set: meta },

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

@@ -1,4 +1,7 @@
 /// <reference types="react" />
-import { ActionPanelProps } from './types';
+import { ActionPanelItem, ActionPanelProps } from './types';
 import './ActionPanel.css';
+export declare const ActionPanelItemContainer: ({ item }: {
+    item: ActionPanelItem;
+}) => JSX.Element;
 export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element | null;

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

@@ -1,18 +1,21 @@
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
+import { useDnDItemProps } from '../../hooks/useDnDItemProps';
 import { cn } from '../../utils/cn';
 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), 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)));
+};
 export const ActionPanel = (props) => {
     var _a, _b;
     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) => {
-        return (React.createElement("div", { role: "button", className: b('item', item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick, "data-qa": item.qa },
-            React.createElement("div", { className: b('icon') }, item.icon),
-            React.createElement("div", { className: b('title'), title: item.title }, item.title)));
-    })));
+    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/ActionPanel/types.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
+import type { ItemDragProps } from '../../shared';
 export type ActionPanelItem = {
     id: string;
     icon: React.ReactNode;
     title: string;
-    onClick?: () => void;
     className?: string;
     qa?: string;
+    onClick?: () => void;
+    dragProps?: ItemDragProps;
 };
 export type ActionPanelProps = {
     items: ActionPanelItem[];

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Config, ConfigItem, GlobalParams, ItemsStateAndParams } from '../../shared';
-import { ContextProps, Plugin, SetConfigItem, SetItemOptions, Settings, SettingsProps } from '../../typings';
+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';
 interface DashKitGeneralProps {
@@ -15,6 +15,7 @@ interface DashKitDefaultProps {
         config: Config;
         itemsStateAndParams: ItemsStateAndParams;
     }) => void;
+    onDrop: (dropProps: ItemDropProps) => void;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
     itemsStateAndParams: ItemsStateAndParams;
@@ -34,7 +35,7 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
         item: SetConfigItem;
         namespace?: string;
         config: Config;
-        options?: SetItemOptions;
+        options?: SetNewItemOptions;
     }): Config;
     static removeItem({ id, config, itemsStateAndParams, }: {
         id: string;

package/build/esm/components/DashKit/DashKit.js

@@ -54,6 +54,7 @@ export class DashKit extends React.PureComponent {
 DashKit.defaultProps = {
     onItemEdit: noop,
     onChange: noop,
+    onDrop: noop,
     defaultGlobalParams: {},
     globalParams: {},
     itemsStateAndParams: {},

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

@@ -0,0 +1,10 @@
+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>;
+export {};

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { DashKitDnDContext } from '../../context/DashKitContext';
+const defaultImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+export const DashKitDnDWrapper = (props) => {
+    const [dragProps, setDragProps] = React.useState(null);
+    const dragImagePreview = React.useMemo(() => {
+        const img = new Image();
+        img.src = props.dragImageSrc || defaultImageSrc;
+        return img;
+    }, [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);
+        (_a = props.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(props);
+    }, [setDragProps, props.onDragEnd]);
+    const contextValue = React.useMemo(() => {
+        return {
+            dragProps,
+            dragImagePreview,
+            onDragStart,
+            onDragEnd,
+        };
+    }, [dragProps, dragImagePreview, onDragStart, onDragEnd]);
+    return (React.createElement(DashKitDnDContext.Provider, { value: contextValue }, props.children));
+};

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

@@ -1,3 +1,3 @@
-declare const _default: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export default _default;
+export default GridItemForwarderRef;
+declare const GridItemForwarderRef: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';