@gravity-ui/dashkit 8.0.2 → 8.1.0-beta.1

package/README.md

@@ -49,6 +49,7 @@ interface DashKitProps {
 - **context**: Object that will be propped up on all widgets.
 - **overlayControls**: Object that overrides widget controls at the time of editing. If not transmitted, basic controls will be displayed.
 - **noOverlay**: If `true`, overlay and controls are not displayed while editing.
+- **focusable**: If `true`, grid items will be focusable.
 - **draggableHandleClassName** : СSS class name of the element that makes the widget draggable.
 
 ## Usage

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

@@ -1,3 +1,15 @@
-/// <reference types="react" />
+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;
+};
+export declare const ActionPanelItemContainer: ({ item }: {
+    item: ActionPanelItem;
+}) => JSX.Element;
 export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element | null;

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

@@ -1,21 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionPanel = void 0;
+exports.ActionPanel = exports.ActionPanelItemContainer = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const react_transition_group_1 = require("react-transition-group");
+const DashKitContext_1 = require("../../context/DashKitContext");
 const cn_1 = require("../../utils/cn");
 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]);
+    const onDragEnd = react_1.default.useCallback((e) => {
+        dragContext.onDragEnd(e);
+    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd]);
+    let dndProps = {};
+    if (item.pluginType) {
+        dndProps = {
+            draggable: true,
+            unselectable: 'on',
+            onDragStart,
+            onDragEnd,
+        };
+    }
+    return (react_1.default.createElement("div", Object.assign({ role: "button", className: b('item', item.className), key: `dk-action-panel-${item.id}`, 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)));
+};
+exports.ActionPanelItemContainer = ActionPanelItemContainer;
 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_1.default.useRef(null);
-    const content = (react_1.default.createElement("div", { ref: nodeRef, className: b(null, props.className) }, props.items.map((item) => {
-        return (react_1.default.createElement("div", { role: "button", className: b('item', item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick, "data-qa": item.qa },
-            react_1.default.createElement("div", { className: b('icon') }, item.icon),
-            react_1.default.createElement("div", { className: b('title'), title: item.title }, item.title)));
-    })));
+    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 })))));
     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/ActionPanel/types.d.ts

@@ -6,6 +6,7 @@ export type ActionPanelItem = {
     onClick?: () => void;
     className?: string;
     qa?: string;
+    pluginType?: string;
 };
 export type ActionPanelProps = {
     items: ActionPanelItem[];

package/build/cjs/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, ConfigLayout, GlobalParams, 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,12 +15,19 @@ interface DashKitDefaultProps {
         config: Config;
         itemsStateAndParams: ItemsStateAndParams;
     }) => void;
+    onDrop: (dropProps: {
+        commit: () => void;
+        pluginType: string;
+        itemLayout: ConfigLayout;
+        newLayout: ConfigLayout[];
+    }) => void;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
     itemsStateAndParams: ItemsStateAndParams;
     settings: SettingsProps;
     context: ContextProps;
     noOverlay: boolean;
+    focusable?: boolean;
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }
@@ -33,7 +40,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/cjs/components/DashKit/DashKit.js

@@ -59,6 +59,7 @@ exports.DashKit = DashKit;
 DashKit.defaultProps = {
     onItemEdit: noop_1.default,
     onChange: noop_1.default,
+    onDrop: noop_1.default,
     defaultGlobalParams: {},
     globalParams: {},
     itemsStateAndParams: {},
@@ -68,4 +69,5 @@ DashKit.defaultProps = {
     },
     context: {},
     noOverlay: false,
+    focusable: false,
 };

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

@@ -0,0 +1,6 @@
+import React from 'react';
+type DashKitDnDWrapperProps = {
+    children: React.ReactElement;
+};
+export declare const DashKitDnDWrapper: React.FC<DashKitDnDWrapperProps>;
+export {};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashKitDnDWrapper = void 0;
+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 onDragEnd = react_1.default.useCallback((_) => {
+        setDragPluginType(null);
+    }, [setDragPluginType]);
+    const contextValue = react_1.default.useMemo(() => {
+        return {
+            dragPluginType,
+            onDragStart,
+            onDragEnd,
+        };
+    }, [dragPluginType, onDragStart, onDragEnd]);
+    return (react_1.default.createElement(DashKitContext_1.DashKitDnDContext.Provider, { value: contextValue }, props.children));
+};
+exports.DashKitDnDWrapper = DashKitDnDWrapper;

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

@@ -1,6 +1,9 @@
 .dashkit-grid-item {
   position: relative;
 }
+.dashkit-grid-item:focus {
+  outline: none;
+}
 .dashkit-grid-item__overlay {
   --_-dashkit-overlay-color: var(--dashkit-overlay-color, var(--g-color-base-generic));
   --_-dashkit-overlay-border-color: var(--dashkit-overlay-border-color, rgba(0, 0, 0, 0.1));
@@ -56,6 +59,10 @@
   will-change: transform;
 }
 
+.react-grid-item.dashkit-grid-item_is-focused {
+  z-index: 2;
+}
+
 .react-grid-item.react-grid-placeholder {
   --_-dashkit-placeholder-color: var(--dashkit-placeholder-color, #fc0);
   --_-dashkit-placeholder-opacity: var(--dashkit-placeholder-opacity, 0.2);

package/build/cjs/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';

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

@@ -8,7 +8,55 @@ const cn_1 = require("../../utils/cn");
 const Item_1 = tslib_1.__importDefault(require("../Item/Item"));
 const OverlayControls_1 = tslib_1.__importDefault(require("../OverlayControls/OverlayControls"));
 const b = (0, cn_1.cn)('dashkit-grid-item');
+class WindowFocusObserver {
+    constructor() {
+        this.blurHandler = (e) => {
+            if (e.target === window) {
+                this.isFocused = false;
+            }
+        };
+        this.focusHandler = (e) => {
+            if (e.target === window) {
+                this.isFocused = true;
+            }
+        };
+        this.subscribers = 0;
+        this.isFocused = !document.hidden;
+        window.addEventListener('blur', this.blurHandler, true);
+        window.addEventListener('focus', this.focusHandler, true);
+    }
+    // Method to get state after all blur\focus events in document are triggered
+    async getFocuseState() {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                resolve(this.isFocused);
+            });
+        });
+    }
+}
+const windowFocusObserver = new WindowFocusObserver();
 class GridItem extends react_1.default.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            isFocused: false,
+        };
+        this.onFocusHandler = () => {
+            this.setState({ isFocused: true });
+            if (this.controller) {
+                this.controller.abort();
+            }
+        };
+        this.onBlurHandler = () => {
+            this.controller = new AbortController();
+            windowFocusObserver.getFocuseState().then((isWindowFocused) => {
+                if (!this.controller.signal.aborted && isWindowFocused) {
+                    this.setState({ isFocused: false });
+                }
+                this.controller = null;
+            });
+        };
+    }
     renderOverlay() {
         const { overlayControls } = this.props;
         const { editMode } = this.context;
@@ -24,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, 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);
@@ -39,10 +87,17 @@ class GridItem extends react_1.default.PureComponent {
         const { _editActive } = this.props.item.data;
         return (react_1.default.createElement("div", Object.assign({ className: b({
                 'is-dragging': isDragging,
+                'is-focused': this.state.isFocused,
                 'with-custom-handle': withCustomHandle,
-            }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps),
+            }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, (focusable
+            ? {
+                onFocus: this.onFocusHandler,
+                onBlur: this.onBlurHandler,
+                tabIndex: -1,
+            }
+            : {})),
             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));
     }
@@ -56,11 +111,13 @@ 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,
     style: prop_types_1.default.object,
     noOverlay: prop_types_1.default.bool,
+    focusable: prop_types_1.default.bool,
     withCustomHandle: prop_types_1.default.bool,
     onMouseDown: prop_types_1.default.func,
     onMouseUp: prop_types_1.default.func,
@@ -68,6 +125,8 @@ GridItem.propTypes = {
     onTouchStart: prop_types_1.default.func,
 };
 GridItem.contextType = DashKitContext_1.DashKitContext;
-exports.default = react_1.default.forwardRef((props, ref) => {
+const GridItemForwarderRef = react_1.default.forwardRef((props, ref) => {
     return react_1.default.createElement(GridItem, Object.assign({}, props, { forwardedRef: ref }));
 });
+GridItemForwarderRef.displayName = 'forwardRef(GridItem)';
+exports.default = GridItemForwarderRef;

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

@@ -21,6 +21,9 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     reloadItems(): void;
     _onStart: () => void;
     _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

@@ -6,7 +6,45 @@ const react_grid_layout_1 = tslib_1.__importStar(require("react-grid-layout"));
 const constants_1 = require("../../constants");
 const DashKitContext_1 = require("../../context/DashKitContext");
 const GridItem_1 = tslib_1.__importDefault(require("../GridItem/GridItem"));
-const Layout = (0, react_grid_layout_1.WidthProvider)(react_grid_layout_1.default); // eslint-disable-line new-cap
+class DragOverLayout extends react_grid_layout_1.default {
+    constructor() {
+        super(...arguments);
+        this.dragReset = () => {
+            if (this.dragEnterCounter) {
+                this.dragEnterCounter = 0;
+                this.removeDroppingPlaceholder();
+            }
+        };
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        window.addEventListener('dragend', this.dragReset);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('dragend', this.dragReset);
+    }
+    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;
+            const { containerWidth, cols, w, h, rowHeight, margin, transformScale } = props;
+            const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
+            const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+            return react_1.default.cloneElement(gridItem, {
+                className: constants_1.OVERLAY_CLASS_NAME,
+                droppingPosition: Object.assign(Object.assign({}, props.droppingPosition), { left: props.droppingPosition.left - leftOffset, top: props.droppingPosition.top - topOffset }),
+            });
+        }
+        return super.processGridItem(child, isDroppingItem);
+    }
+}
+const Layout = (0, react_grid_layout_1.WidthProvider)(DragOverLayout); // eslint-disable-line new-cap
 class GridLayout extends react_1.default.PureComponent {
     constructor(props, context) {
         super(props, context);
@@ -32,13 +70,38 @@ class GridLayout extends react_1.default.PureComponent {
             return getItemsMeta(this.pluginsRefs);
         };
         this._onStart = () => {
+            if (this.temporaryLayout)
+                return;
             this.setState({ isDragging: true });
         };
         this._onStop = (newLayout) => {
-            const { layoutChange } = this.context;
-            layoutChange(newLayout);
+            const { layoutChange, onDrop, temporaryLayout } = this.context;
+            if (temporaryLayout) {
+                onDrop === null || onDrop === void 0 ? void 0 : onDrop(newLayout, newLayout.find(({ i }) => i === constants_1.TEMPORARY_ITEM_ID));
+            }
+            else {
+                layoutChange(newLayout);
+            }
             this.setState({ isDragging: false });
         };
+        this._onDropDragOver = (e) => {
+            const { editMode, onDropDragOver, temporaryLayout } = this.context;
+            if (!editMode) {
+                return false;
+            }
+            const result = onDropDragOver(e);
+            if (temporaryLayout) {
+                return false;
+            }
+            return result;
+        };
+        this._onDrop = (layout, item, e) => {
+            const { editMode, temporaryLayout, onDrop } = this.context;
+            if (!editMode && temporaryLayout) {
+                return false;
+            }
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(layout, item, e);
+        };
         this.pluginsRefs = [];
         this.state = {
             isDragging: false,
@@ -71,16 +134,33 @@ 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, config, registerManager, editMode, noOverlay, draggableHandleClassName } = this.context;
+        const { layout, temporaryLayout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         this.pluginsRefs.length = config.items.length;
-        return (react_1.default.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
+        return (react_1.default.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
             ? { draggableHandle: `.${draggableHandleClassName}` }
-            : 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: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
-        })));
+            : null), (outerDnDEnable
+            ? {
+                isDroppable: true,
+                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 }));
+            }),
+            this.renderTemporaryPlaceholder()));
     }
 }
 GridLayout.contextType = DashKitContext_1.DashKitContext;

package/build/cjs/components/Item/Item.css

@@ -1,4 +1,4 @@
-.dashkit-item__renderer {
+.dashkit-item__placeholder, .dashkit-item__renderer {
   position: absolute;
   inset: 0;
 }

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/components/index.d.ts

@@ -2,3 +2,4 @@ export * from './DashKit';
 export type { OverlayControlItem, PreparedCopyItemOptions } from './OverlayControls/OverlayControls';
 export * from './ActionPanel/ActionPanel';
 export type { ActionPanelItem, ActionPanelProps } from './ActionPanel/types';
+export * from './DashKitDnDWrapper/DashKitDnDWrapper';

package/build/cjs/components/index.js

@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./DashKit"), exports);
 tslib_1.__exportStar(require("./ActionPanel/ActionPanel"), exports);
+tslib_1.__exportStar(require("./DashKitDnDWrapper/DashKitDnDWrapper"), exports);

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

@@ -1,6 +1,8 @@
 export declare const COPIED_WIDGET_STORE_KEY = "dashCopiedItem";
 export declare const DEFAULT_NAMESPACE = "default";
 export declare const OVERLAY_CONTROLS_CLASS_NAME = "dashkit-overlay-controls";
+export declare const OVERLAY_CLASS_NAME = "dashkit-grid-item__overlay";
+export declare const TEMPORARY_ITEM_ID = "__dropping-elem__";
 export declare const MenuItems: {
     readonly Copy: "copy";
     readonly Delete: "delete";

package/build/cjs/constants/common.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItems = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
+exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
 exports.COPIED_WIDGET_STORE_KEY = 'dashCopiedItem';
 exports.DEFAULT_NAMESPACE = 'default';
 exports.OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
+exports.OVERLAY_CLASS_NAME = 'dashkit-grid-item__overlay';
+exports.TEMPORARY_ITEM_ID = '__dropping-elem__';
 exports.MenuItems = {
     Copy: 'copy',
     Delete: 'delete',

package/build/cjs/context/DashKitContext.d.ts

@@ -1,2 +1,3 @@
 export const DashKitContext: React.Context<any>;
+export const DashKitDnDContext: React.Context<any>;
 import React from 'react';

package/build/cjs/context/DashKitContext.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashKitContext = void 0;
+exports.DashKitDnDContext = exports.DashKitContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const DashKitContext = react_1.default.createContext();
 exports.DashKitContext = DashKitContext;
+const DashKitDnDContext = react_1.default.createContext();
+exports.DashKitDnDContext = DashKitDnDContext;

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,