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

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

@@ -1,14 +1,5 @@
-import React from 'react';
-import { ActionPanelProps } from './types';
-export type ActionPanelItem = {
-    id: string;
-    icon: React.ReactNode;
-    title: string;
-    onClick?: () => void;
-    className?: string;
-    qa?: string;
-    pluginType?: string;
-};
+/// <reference types="react" />
+import { ActionPanelItem, ActionPanelProps } from './types';
 export declare const ActionPanelItemContainer: ({ item }: {
     item: ActionPanelItem;
 }) => JSX.Element;

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

@@ -10,13 +10,13 @@ const b = (0, cn_1.cn)('dashkit-action-panel');
 const ActionPanelItemContainer = ({ item }) => {
     const dragContext = react_1.default.useContext(DashKitContext_1.DashKitDnDContext);
     const onDragStart = react_1.default.useCallback((e) => {
-        dragContext.onDragStart(e, item.pluginType);
-    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart, item.pluginType]);
+        dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart(e, item.dragProps);
+    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart, item.dragProps]);
     const onDragEnd = react_1.default.useCallback((e) => {
-        dragContext.onDragEnd(e);
+        dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd(e);
     }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd]);
     let dndProps = {};
-    if (item.pluginType) {
+    if (item.dragProps) {
         dndProps = {
             draggable: true,
             unselectable: 'on',

package/build/cjs/components/ActionPanel/types.d.ts

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

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

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

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

@@ -5,20 +5,20 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const DashKitContext_1 = require("../../context/DashKitContext");
 const DashKitDnDWrapper = (props) => {
-    const [dragPluginType, setDragPluginType] = react_1.default.useState(null);
-    const onDragStart = react_1.default.useCallback((_, type) => {
-        setDragPluginType(type);
-    }, [setDragPluginType]);
+    const [dragProps, setDragProps] = react_1.default.useState(null);
+    const onDragStart = react_1.default.useCallback((_, currentProps) => {
+        setDragProps(currentProps);
+    }, [setDragProps]);
     const onDragEnd = react_1.default.useCallback((_) => {
-        setDragPluginType(null);
-    }, [setDragPluginType]);
+        setDragProps(null);
+    }, [setDragProps]);
     const contextValue = react_1.default.useMemo(() => {
         return {
-            dragPluginType,
+            dragProps,
             onDragStart,
             onDragEnd,
         };
-    }, [dragPluginType, onDragStart, onDragEnd]);
+    }, [dragProps, onDragStart, onDragEnd]);
     return (react_1.default.createElement(DashKitContext_1.DashKitDnDContext.Provider, { value: contextValue }, props.children));
 };
 exports.DashKitDnDWrapper = DashKitDnDWrapper;

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

@@ -58,9 +58,9 @@ class GridItem extends react_1.default.PureComponent {
         };
     }
     renderOverlay() {
-        const { overlayControls } = this.props;
+        const { overlayControls, isPlaceholder } = this.props;
         const { editMode } = this.context;
-        if (!editMode || this.props.item.data._editActive) {
+        if (!editMode || this.props.item.data._editActive || isPlaceholder) {
             return null;
         }
         const { item } = this.props;
@@ -72,7 +72,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, noOverlay, focusable, withCustomHandle, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -97,7 +97,7 @@ class GridItem extends react_1.default.PureComponent {
             }
             : {})),
             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, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
+                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 })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }
@@ -111,6 +111,7 @@ GridItem.propTypes = {
     overlayControls: prop_types_1.default.object,
     forwardedRef: prop_types_1.default.any,
     forwardedPluginRef: prop_types_1.default.any,
+    isPlaceholder: prop_types_1.default.bool,
     // from react-grid-layout:
     children: prop_types_1.default.node,
     className: prop_types_1.default.string,

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

@@ -23,6 +23,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     _onStop: (newLayout: any) => void;
     _onDropDragOver: (e: any) => any;
     _onDrop: (layout: any, item: any, e: any) => false | undefined;
+    renderTemporaryPlaceholder(): JSX.Element | null;
     render(): JSX.Element;
 }
 import React from 'react';

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

@@ -24,12 +24,12 @@ class DragOverLayout extends react_grid_layout_1.default {
         window.removeEventListener('dragend', this.dragReset);
     }
     processGridItem(child, isDroppingItem) {
+        const gridItem = super.processGridItem(child, isDroppingItem);
         if (isDroppingItem) {
             // Drop item from outside gets 0,0 droppingPosition
             // centering cursor on newly creted grid item
             // And cause grid-layout using it's own GridItem to make it look
             // like overlay adding className
-            const gridItem = super.processGridItem(child, isDroppingItem);
             if (!gridItem)
                 return null;
             const { props } = gridItem;
@@ -41,7 +41,7 @@ class DragOverLayout extends react_grid_layout_1.default {
                 droppingPosition: Object.assign(Object.assign({}, props.droppingPosition), { left: props.droppingPosition.left - leftOffset, top: props.droppingPosition.top - topOffset }),
             });
         }
-        return super.processGridItem(child, isDroppingItem);
+        return gridItem;
     }
 }
 const Layout = (0, react_grid_layout_1.WidthProvider)(DragOverLayout); // eslint-disable-line new-cap
@@ -85,17 +85,16 @@ class GridLayout extends react_1.default.PureComponent {
             this.setState({ isDragging: false });
         };
         this._onDropDragOver = (e) => {
-            const { editMode, onDropDragOver, temporaryLayout } = this.context;
-            if (!editMode) {
+            const { editMode, dragOverPlugin, onDropDragOver, temporaryLayout } = this.context;
+            if (!editMode || !dragOverPlugin || temporaryLayout) {
                 return false;
             }
-            const result = onDropDragOver(e);
-            if (temporaryLayout) {
-                return false;
-            }
-            return result;
+            return onDropDragOver(e);
         };
         this._onDrop = (layout, item, e) => {
+            if (!item) {
+                return false;
+            }
             const { editMode, temporaryLayout, onDrop } = this.context;
             if (!editMode && temporaryLayout) {
                 return false;
@@ -134,6 +133,15 @@ class GridLayout extends react_1.default.PureComponent {
             this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
         }
     }
+    renderTemporaryPlaceholder() {
+        const { temporaryLayout, dragOverPlugin, noOverlay, draggableHandleClassName } = this.context;
+        if (!temporaryLayout) {
+            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 }));
+    }
     render() {
         const { layout, temporaryLayout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         this.pluginsRefs.length = config.items.length;
@@ -145,11 +153,13 @@ class GridLayout extends react_1.default.PureComponent {
                 onDropDragOver: this._onDropDragOver,
                 onDrop: this._onDrop,
             }
-            : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }), 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 }));
-        })));
+            : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }),
+            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 }));
+            }),
+            this.renderTemporaryPlaceholder()));
     }
 }
 GridLayout.contextType = DashKitContext_1.DashKitContext;

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

@@ -56,6 +56,7 @@ declare const _default: {
         width: PropTypes.Requireable<number>;
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
+        isPlaceholder: PropTypes.Requireable<boolean>;
         forwardedPluginRef: PropTypes.Requireable<any>;
     };
     contextType: React.Context<any>;

package/build/cjs/components/Item/Item.js

@@ -7,11 +7,16 @@ const prepareItem_1 = require("../../hocs/prepareItem");
 const cn_1 = require("../../utils/cn");
 const b = (0, cn_1.cn)('dashkit-item');
 // TODO: getDerivedStateFromError и заглушка с ошибкой
-const Item = ({ registerManager, rendererProps, type, forwardedPluginRef }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef }) => {
+    var _a, _b;
     if (!registerManager.check(type)) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
     }
+    if (isPlaceholder) {
+        return (react_1.default.createElement("div", { className: b('placeholder') }, ((_b = (_a = registerManager
+            .getItem(type)).placeholderRenderer) === null || _b === void 0 ? void 0 : _b.call(_a, rendererProps, forwardedPluginRef)) || null));
+    }
     return (react_1.default.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)));
 };
 Item.propTypes = {
@@ -19,5 +24,6 @@ Item.propTypes = {
     rendererProps: prop_types_1.default.object,
     registerManager: prop_types_1.default.object,
     type: prop_types_1.default.string,
+    isPlaceholder: prop_types_1.default.bool,
 };
 exports.default = (0, prepareItem_1.prepareItem)(Item);

package/build/cjs/hocs/prepareItem.d.ts

@@ -56,6 +56,7 @@ export function prepareItem(Component: any): {
         width: PropTypes.Requireable<number>;
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
+        isPlaceholder: PropTypes.Requireable<boolean>;
         forwardedPluginRef: PropTypes.Requireable<any>;
     };
     contextType: React.Context<any>;

package/build/cjs/hocs/prepareItem.js

@@ -26,7 +26,7 @@ function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { id, width, height, item, adjustWidgetLayout, layout } = this.props;
+                const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
                 const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                 const { type, data, defaults, namespace } = item;
                 const rendererProps = {
@@ -45,8 +45,9 @@ function prepareItem(Component) {
                     layout,
                     gridLayout: registerManager.gridLayout,
                     adjustWidgetLayout,
+                    isPlaceholder,
                 };
-                return (react_1.default.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type }));
+                return (react_1.default.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
             }
         },
         _a.propTypes = {
@@ -58,6 +59,7 @@ function prepareItem(Component) {
             width: prop_types_1.default.number,
             height: prop_types_1.default.number,
             transform: prop_types_1.default.string,
+            isPlaceholder: prop_types_1.default.bool,
             forwardedPluginRef: prop_types_1.default.any,
         },
         _a.contextType = DashKitContext_1.DashKitContext,

package/build/cjs/hocs/withContext.js

@@ -8,6 +8,8 @@ const common_1 = require("../constants/common");
 const DashKitContext_1 = require("../context/DashKitContext");
 const shared_1 = require("../shared");
 const utils_1 = require("../utils");
+const DEFAULT_HEIGHT = 3;
+const DEFAULT_WIDTH = 3;
 function useMemoStateContext(props) {
     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
     // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
@@ -144,20 +146,11 @@ function useMemoStateContext(props) {
     const reloadItems = react_1.default.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);
-    const draggedPluginRef = react_1.default.useRef(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
-    react_1.default.useEffect(() => {
-        if (!(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) && !temporaryLayout) {
-            draggedPluginRef.current = null;
-        }
-        else if (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) {
-            draggedPluginRef.current = dndContext.dragPluginType;
-        }
-    }, [draggedPluginRef, dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType, temporaryLayout]);
-    const dndPluginType = draggedPluginRef.current || (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
+    const dragProps = dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragProps;
     const dragOverPlugin = react_1.default.useMemo(() => {
-        const pluginType = dndPluginType;
-        if (pluginType === null && temporaryLayout === null)
+        if (!dragProps && temporaryLayout === null)
             return null;
+        const pluginType = dragProps.type;
         if (props.registerManager.check(pluginType)) {
             return props.registerManager.getItem(pluginType);
         }
@@ -166,22 +159,27 @@ function useMemoStateContext(props) {
             console.error(`Uknown pluginType: ${pluginType}`);
             return null;
         }
-    }, [dndPluginType, props.registerManager, temporaryLayout]);
+    }, [dragProps, temporaryLayout, props.registerManager]);
     const onDropDragOver = react_1.default.useCallback(() => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
         }
-        if (dragOverPlugin === null || dragOverPlugin === void 0 ? void 0 : dragOverPlugin.defaultLayout) {
-            const { h = 3, w = 3 } = dragOverPlugin.defaultLayout;
+        if (dragOverPlugin) {
+            const { defaultLayout } = dragOverPlugin;
+            const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDTH } = dragProps;
             return { h, w };
         }
         return false;
-    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin]);
+    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
+    const onDropProp = props.onDrop;
     const onDrop = react_1.default.useCallback((newLayout, item) => {
+        if (!dragProps) {
+            return;
+        }
         setTemporaryLayout(newLayout);
         const { i, w, h, x, y } = item;
-        props.onDrop({
+        onDropProp({
             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,10 +187,10 @@ function useMemoStateContext(props) {
                 return memo;
             }, []),
             itemLayout: { w, h, x, y },
-            pluginType: dndPluginType,
             commit: resetTemporaryLayout,
+            dragProps,
         });
-    }, [dndPluginType, props.onDrop]);
+    }, [dragProps, onDropProp, resetTemporaryLayout]);
     return react_1.default.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,

package/build/cjs/plugins/Text/Text.js

@@ -117,8 +117,5 @@ const plugin = {
     renderer(props, forwardedRef) {
         return react_1.default.createElement(PluginText, Object.assign({}, props, { apiHandler: plugin._apiHandler, ref: forwardedRef }));
     },
-    placeholderRenderer(_, forwardedRef) {
-        return react_1.default.createElement("div", { ref: forwardedRef }, "Text placeholder");
-    },
 };
 exports.default = plugin;

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

@@ -1,4 +1,9 @@
 import { StringParams } from './common';
+export type DragProps = {
+    type: string;
+    w?: number;
+    h?: number;
+};
 export interface ConfigLayout {
     i: string;
     h: number;

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

@@ -1,15 +1,6 @@
-import React from 'react';
-import { ActionPanelProps } from './types';
+/// <reference types="react" />
+import { ActionPanelItem, ActionPanelProps } from './types';
 import './ActionPanel.css';
-export type ActionPanelItem = {
-    id: string;
-    icon: React.ReactNode;
-    title: string;
-    onClick?: () => void;
-    className?: string;
-    qa?: string;
-    pluginType?: string;
-};
 export declare const ActionPanelItemContainer: ({ item }: {
     item: ActionPanelItem;
 }) => JSX.Element;

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

@@ -7,13 +7,13 @@ const b = cn('dashkit-action-panel');
 export const ActionPanelItemContainer = ({ item }) => {
     const dragContext = React.useContext(DashKitDnDContext);
     const onDragStart = React.useCallback((e) => {
-        dragContext.onDragStart(e, item.pluginType);
-    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart, item.pluginType]);
+        dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart(e, item.dragProps);
+    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart, item.dragProps]);
     const onDragEnd = React.useCallback((e) => {
-        dragContext.onDragEnd(e);
+        dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd(e);
     }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd]);
     let dndProps = {};
-    if (item.pluginType) {
+    if (item.dragProps) {
         dndProps = {
             draggable: true,
             unselectable: 'on',

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

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

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

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

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

@@ -1,19 +1,19 @@
 import React from 'react';
 import { DashKitDnDContext } from '../../context/DashKitContext';
 export const DashKitDnDWrapper = (props) => {
-    const [dragPluginType, setDragPluginType] = React.useState(null);
-    const onDragStart = React.useCallback((_, type) => {
-        setDragPluginType(type);
-    }, [setDragPluginType]);
+    const [dragProps, setDragProps] = React.useState(null);
+    const onDragStart = React.useCallback((_, currentProps) => {
+        setDragProps(currentProps);
+    }, [setDragProps]);
     const onDragEnd = React.useCallback((_) => {
-        setDragPluginType(null);
-    }, [setDragPluginType]);
+        setDragProps(null);
+    }, [setDragProps]);
     const contextValue = React.useMemo(() => {
         return {
-            dragPluginType,
+            dragProps,
             onDragStart,
             onDragEnd,
         };
-    }, [dragPluginType, onDragStart, onDragEnd]);
+    }, [dragProps, onDragStart, onDragEnd]);
     return (React.createElement(DashKitDnDContext.Provider, { value: contextValue }, props.children));
 };

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

@@ -56,9 +56,9 @@ class GridItem extends React.PureComponent {
         };
     }
     renderOverlay() {
-        const { overlayControls } = this.props;
+        const { overlayControls, isPlaceholder } = this.props;
         const { editMode } = this.context;
-        if (!editMode || this.props.item.data._editActive) {
+        if (!editMode || this.props.item.data._editActive || isPlaceholder) {
             return null;
         }
         const { item } = this.props;
@@ -70,7 +70,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, noOverlay, focusable, withCustomHandle, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -95,7 +95,7 @@ class GridItem extends React.PureComponent {
             }
             : {})),
             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, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
+                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 })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }
@@ -109,6 +109,7 @@ GridItem.propTypes = {
     overlayControls: PropTypes.object,
     forwardedRef: PropTypes.any,
     forwardedPluginRef: PropTypes.any,
+    isPlaceholder: PropTypes.bool,
     // from react-grid-layout:
     children: PropTypes.node,
     className: PropTypes.string,

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

@@ -23,6 +23,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     _onStop: (newLayout: any) => void;
     _onDropDragOver: (e: any) => any;
     _onDrop: (layout: any, item: any, e: any) => false | undefined;
+    renderTemporaryPlaceholder(): JSX.Element | null;
     render(): JSX.Element;
 }
 import React from 'react';

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

@@ -21,12 +21,12 @@ class DragOverLayout extends ReactGridLayout {
         window.removeEventListener('dragend', this.dragReset);
     }
     processGridItem(child, isDroppingItem) {
+        const gridItem = super.processGridItem(child, isDroppingItem);
         if (isDroppingItem) {
             // Drop item from outside gets 0,0 droppingPosition
             // centering cursor on newly creted grid item
             // And cause grid-layout using it's own GridItem to make it look
             // like overlay adding className
-            const gridItem = super.processGridItem(child, isDroppingItem);
             if (!gridItem)
                 return null;
             const { props } = gridItem;
@@ -38,7 +38,7 @@ class DragOverLayout extends ReactGridLayout {
                 droppingPosition: Object.assign(Object.assign({}, props.droppingPosition), { left: props.droppingPosition.left - leftOffset, top: props.droppingPosition.top - topOffset }),
             });
         }
-        return super.processGridItem(child, isDroppingItem);
+        return gridItem;
     }
 }
 const Layout = WidthProvider(DragOverLayout); // eslint-disable-line new-cap
@@ -82,17 +82,16 @@ class GridLayout extends React.PureComponent {
             this.setState({ isDragging: false });
         };
         this._onDropDragOver = (e) => {
-            const { editMode, onDropDragOver, temporaryLayout } = this.context;
-            if (!editMode) {
+            const { editMode, dragOverPlugin, onDropDragOver, temporaryLayout } = this.context;
+            if (!editMode || !dragOverPlugin || temporaryLayout) {
                 return false;
             }
-            const result = onDropDragOver(e);
-            if (temporaryLayout) {
-                return false;
-            }
-            return result;
+            return onDropDragOver(e);
         };
         this._onDrop = (layout, item, e) => {
+            if (!item) {
+                return false;
+            }
             const { editMode, temporaryLayout, onDrop } = this.context;
             if (!editMode && temporaryLayout) {
                 return false;
@@ -131,6 +130,15 @@ class GridLayout extends React.PureComponent {
             this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
         }
     }
+    renderTemporaryPlaceholder() {
+        const { temporaryLayout, dragOverPlugin, noOverlay, draggableHandleClassName } = this.context;
+        if (!temporaryLayout) {
+            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 }));
+    }
     render() {
         const { layout, temporaryLayout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         this.pluginsRefs.length = config.items.length;
@@ -142,11 +150,13 @@ class GridLayout extends React.PureComponent {
                 onDropDragOver: this._onDropDragOver,
                 onDrop: this._onDrop,
             }
-            : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }), 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 }));
-        })));
+            : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }),
+            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 }));
+            }),
+            this.renderTemporaryPlaceholder()));
     }
 }
 GridLayout.contextType = DashKitContext;

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

@@ -56,6 +56,7 @@ declare const _default: {
         width: PropTypes.Requireable<number>;
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
+        isPlaceholder: PropTypes.Requireable<boolean>;
         forwardedPluginRef: PropTypes.Requireable<any>;
     };
     contextType: React.Context<any>;

package/build/esm/components/Item/Item.js

@@ -5,11 +5,16 @@ import { cn } from '../../utils/cn';
 import './Item.css';
 const b = cn('dashkit-item');
 // TODO: getDerivedStateFromError и заглушка с ошибкой
-const Item = ({ registerManager, rendererProps, type, forwardedPluginRef }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef }) => {
+    var _a, _b;
     if (!registerManager.check(type)) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
     }
+    if (isPlaceholder) {
+        return (React.createElement("div", { className: b('placeholder') }, ((_b = (_a = registerManager
+            .getItem(type)).placeholderRenderer) === null || _b === void 0 ? void 0 : _b.call(_a, rendererProps, forwardedPluginRef)) || null));
+    }
     return (React.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)));
 };
 Item.propTypes = {
@@ -17,5 +22,6 @@ Item.propTypes = {
     rendererProps: PropTypes.object,
     registerManager: PropTypes.object,
     type: PropTypes.string,
+    isPlaceholder: PropTypes.bool,
 };
 export default prepareItem(Item);

package/build/esm/hocs/prepareItem.d.ts

@@ -56,6 +56,7 @@ export function prepareItem(Component: any): {
         width: PropTypes.Requireable<number>;
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
+        isPlaceholder: PropTypes.Requireable<boolean>;
         forwardedPluginRef: PropTypes.Requireable<any>;
     };
     contextType: React.Context<any>;

package/build/esm/hocs/prepareItem.js

@@ -22,7 +22,7 @@ export function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { id, width, height, item, adjustWidgetLayout, layout } = this.props;
+                const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
                 const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                 const { type, data, defaults, namespace } = item;
                 const rendererProps = {
@@ -41,8 +41,9 @@ export function prepareItem(Component) {
                     layout,
                     gridLayout: registerManager.gridLayout,
                     adjustWidgetLayout,
+                    isPlaceholder,
                 };
-                return (React.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type }));
+                return (React.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
             }
         },
         _a.propTypes = {
@@ -54,6 +55,7 @@ export function prepareItem(Component) {
             width: PropTypes.number,
             height: PropTypes.number,
             transform: PropTypes.string,
+            isPlaceholder: PropTypes.bool,
             forwardedPluginRef: PropTypes.any,
         },
         _a.contextType = DashKitContext,

package/build/esm/hocs/withContext.js

@@ -4,6 +4,8 @@ import { TEMPORARY_ITEM_ID } from '../constants/common';
 import { DashKitContext, DashKitDnDContext } from '../context/DashKitContext';
 import { getItemsParams, getItemsState } from '../shared';
 import { UpdateManager } from '../utils';
+const DEFAULT_HEIGHT = 3;
+const DEFAULT_WIDTH = 3;
 function useMemoStateContext(props) {
     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
     // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
@@ -140,20 +142,11 @@ function useMemoStateContext(props) {
     const reloadItems = React.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);
-    const draggedPluginRef = React.useRef(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
-    React.useEffect(() => {
-        if (!(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) && !temporaryLayout) {
-            draggedPluginRef.current = null;
-        }
-        else if (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) {
-            draggedPluginRef.current = dndContext.dragPluginType;
-        }
-    }, [draggedPluginRef, dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType, temporaryLayout]);
-    const dndPluginType = draggedPluginRef.current || (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
+    const dragProps = dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragProps;
     const dragOverPlugin = React.useMemo(() => {
-        const pluginType = dndPluginType;
-        if (pluginType === null && temporaryLayout === null)
+        if (!dragProps && temporaryLayout === null)
             return null;
+        const pluginType = dragProps.type;
         if (props.registerManager.check(pluginType)) {
             return props.registerManager.getItem(pluginType);
         }
@@ -162,22 +155,27 @@ function useMemoStateContext(props) {
             console.error(`Uknown pluginType: ${pluginType}`);
             return null;
         }
-    }, [dndPluginType, props.registerManager, temporaryLayout]);
+    }, [dragProps, temporaryLayout, props.registerManager]);
     const onDropDragOver = React.useCallback(() => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
         }
-        if (dragOverPlugin === null || dragOverPlugin === void 0 ? void 0 : dragOverPlugin.defaultLayout) {
-            const { h = 3, w = 3 } = dragOverPlugin.defaultLayout;
+        if (dragOverPlugin) {
+            const { defaultLayout } = dragOverPlugin;
+            const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDTH } = dragProps;
             return { h, w };
         }
         return false;
-    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin]);
+    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
+    const onDropProp = props.onDrop;
     const onDrop = React.useCallback((newLayout, item) => {
+        if (!dragProps) {
+            return;
+        }
         setTemporaryLayout(newLayout);
         const { i, w, h, x, y } = item;
-        props.onDrop({
+        onDropProp({
             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,10 +183,10 @@ function useMemoStateContext(props) {
                 return memo;
             }, []),
             itemLayout: { w, h, x, y },
-            pluginType: dndPluginType,
             commit: resetTemporaryLayout,
+            dragProps,
         });
-    }, [dndPluginType, props.onDrop]);
+    }, [dragProps, onDropProp, resetTemporaryLayout]);
     return React.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,

package/build/esm/plugins/Text/Text.js

@@ -113,8 +113,5 @@ const plugin = {
     renderer(props, forwardedRef) {
         return React.createElement(PluginText, Object.assign({}, props, { apiHandler: plugin._apiHandler, ref: forwardedRef }));
     },
-    placeholderRenderer(_, forwardedRef) {
-        return React.createElement("div", { ref: forwardedRef }, "Text placeholder");
-    },
 };
 export default plugin;

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

@@ -1,4 +1,9 @@
 import { StringParams } from './common';
+export type DragProps = {
+    type: string;
+    w?: number;
+    h?: number;
+};
 export interface ConfigLayout {
     i: string;
     h: number;

package/package.json

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