@gravity-ui/dashkit 8.8.1 → 8.9.1-beta.0

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

@@ -18,6 +18,11 @@ interface DashKitDefaultProps {
         groups?: DashKitGroup[];
     }) => void;
     onDrop: (dropProps: ItemDropProps) => void;
+    onItemMountChange?: (item: ConfigItem, state: {
+        isAsync: boolean;
+        isMounted: boolean;
+    }) => void;
+    onItemRender?: (item: ConfigItem) => void;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
     itemsStateAndParams: ItemsStateAndParams;

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

@@ -57,6 +57,7 @@
   transition: none;
   z-index: 3;
   will-change: transform;
+  pointer-events: none;
 }
 
 .react-grid-item.dashkit-grid-item_is-focused {

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

@@ -38,6 +38,7 @@ const windowFocusObserver = new WindowFocusObserver();
 class GridItem extends react_1.default.PureComponent {
     constructor() {
         super(...arguments);
+        this._isAsyncItem = false;
         this.state = {
             isFocused: false,
         };
@@ -56,6 +57,33 @@ class GridItem extends react_1.default.PureComponent {
                 this.controller = null;
             });
         };
+        this.onMountChange = (isMounted) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (isMounted) {
+                this._inited = true;
+                (_b = (_a = this.props).onItemMountChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item, {
+                    isAsync: this._isAsyncItem,
+                    isMounted: isMounted,
+                });
+                if (!this._isAsyncItem) {
+                    (_d = (_c = this.props).onItemRender) === null || _d === void 0 ? void 0 : _d.call(_c, this.props.item);
+                }
+            }
+            else {
+                (_f = (_e = this.props).onItemMountChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.props.item, {
+                    isAsync: this._isAsyncItem,
+                    isMounted: isMounted,
+                });
+            }
+        };
+        this.onBeforeLoad = () => {
+            this._isAsyncItem = true;
+            return this.onLoad;
+        };
+        this.onLoad = () => {
+            var _a, _b;
+            (_b = (_a = this.props).onItemRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
+        };
     }
     renderOverlay() {
         const { isPlaceholder } = this.props;
@@ -71,7 +99,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, isPlaceholder, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -96,7 +124,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, isPlaceholder: isPlaceholder, 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, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }

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

@@ -5,6 +5,8 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     state: {
         isDragging: boolean;
         isPageHidden: boolean;
+        currentDraggingElement: null;
+        draggedOverGroup: null;
     };
     componentDidMount(): void;
     componentDidUpdate(): void;
@@ -36,10 +38,14 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     getMemoForwardRefCallback: (refIndex: any) => any;
     mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
     reloadItems(): void;
-    _onStart: () => void;
+    _onDragStart: (group: any, _newLayout: any, layoutItem: any) => void;
+    _onResizeStart: () => void;
+    _onTargetRestore: () => void;
     _onStop: (group: any, newLayout: any) => void;
-    _onDropDragOver: (group: any, e: any) => any;
+    _onSharedDrop: (targetGroup: any, newLayout: any, tempItem: any) => void;
+    _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;
     _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
+    _onDropDragOver: (group: any, e: any) => any;
     renderTemporaryPlaceholder(): JSX.Element | null;
     renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
     render(): any;

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

@@ -56,17 +56,18 @@ class GridLayout extends react_1.default.PureComponent {
         };
         this.getMemoGroupCallbacks = (group) => {
             if (!this._memoCallbacksForGroups[group]) {
-                const onStart = this._onStart;
+                const onDragStart = this._onDragStart.bind(this, group);
                 const onStop = this._onStop.bind(this, group);
                 const onDrop = this._onDrop.bind(this, group);
                 const onDropDragOver = this._onDropDragOver.bind(this, group);
+                const onDragTargetRestore = this._onTargetRestore.bind(this, group);
                 this._memoCallbacksForGroups[group] = {
-                    onDragStart: onStart,
-                    onResizeStart: onStart,
+                    onDragStart,
                     onDragStop: onStop,
                     onResizeStop: onStop,
-                    onDrop: onDrop,
+                    onDrop,
                     onDropDragOver,
+                    onDragTargetRestore,
                 };
             }
             return this._memoCallbacksForGroups[group];
@@ -93,48 +94,131 @@ class GridLayout extends react_1.default.PureComponent {
             }
             return this._memoForwardedPluginRef[refIndex];
         };
-        this._onStart = () => {
+        this._onDragStart = (group, _newLayout, layoutItem) => {
             if (this.temporaryLayout)
                 return;
-            this.setState({ isDragging: true });
+            if (this.context.dragOverPlugin) {
+                this.setState({ isDragging: true });
+            }
+            else {
+                let currentDraggingElement = this.state.currentDraggingElement;
+                if (!currentDraggingElement) {
+                    const _id = layoutItem.i;
+                    const item = this.context.config.items.find(({ id }) => id === _id);
+                    currentDraggingElement = [group, layoutItem, item];
+                }
+                this.setState({
+                    isDragging: true,
+                    currentDraggingElement,
+                    draggedOverGroup: group,
+                });
+            }
+        };
+        this._onResizeStart = () => {
+            this.setState({
+                isDragging: true,
+            });
+        };
+        this._onTargetRestore = () => {
+            const { currentDraggingElement } = this.state;
+            if (currentDraggingElement) {
+                this.setState({
+                    draggedOverGroup: currentDraggingElement[0],
+                });
+            }
         };
         this._onStop = (group, newLayout) => {
             const { layoutChange, onDrop, temporaryLayout } = this.context;
+            const { draggedOverGroup, currentDraggingElement } = this.state;
+            if (currentDraggingElement &&
+                draggedOverGroup !== null &&
+                draggedOverGroup !== currentDraggingElement[0]) {
+                // Skipping layout update when change event called for source grid
+                // and waiting _onDrop
+                return;
+            }
             const groupedLayout = this.mergeGroupsLayout(group, newLayout);
+            this.setState({
+                isDragging: false,
+                currentDraggingElement: null,
+                draggedOverGroup: null,
+            });
             if (temporaryLayout) {
                 onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, groupedLayout.find(({ i }) => i === constants_1.TEMPORARY_ITEM_ID));
             }
             else {
                 layoutChange(groupedLayout);
             }
-            this.setState({ isDragging: false });
         };
-        this._onDropDragOver = (group, e) => {
-            const { editMode, dragOverPlugin } = this.context;
-            if (!editMode || !dragOverPlugin) {
-                return false;
+        this._onSharedDrop = (targetGroup, newLayout, tempItem) => {
+            const { currentDraggingElement } = this.state;
+            const { layoutChange } = this.context;
+            if (!currentDraggingElement) {
+                return;
             }
-            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
-            return this.context.onDropDragOver(e, properties, layout);
+            const [, sourceItem] = currentDraggingElement;
+            const groupedLayout = this.mergeGroupsLayout(targetGroup, newLayout, tempItem).map((item) => {
+                if (item.i === sourceItem.i) {
+                    const copy = Object.assign({}, tempItem);
+                    delete copy.parent;
+                    if (targetGroup !== constants_1.DEFAULT_GROUP) {
+                        copy.parent = targetGroup;
+                    }
+                    copy.i = sourceItem.i;
+                    return copy;
+                }
+                return item;
+            });
+            this.setState({
+                isDragging: false,
+                currentDraggingElement: null,
+                draggedOverGroup: null,
+            });
+            layoutChange(groupedLayout);
+        };
+        this._onExternalDrop = (group, newLayout, item, e) => {
+            const { onDrop } = this.context;
+            if (group !== constants_1.DEFAULT_GROUP) {
+                item.parent = group;
+            }
+            const groupedLayout = this.mergeGroupsLayout(group, newLayout, item);
+            this.setState({ isDragging: false });
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, item, e);
         };
         this._onDrop = (group, newLayout, item, e) => {
-            if (!item) {
+            if (!item || !this.context.editMode) {
                 return false;
             }
-            const { editMode, onDrop } = this.context;
-            if (!editMode) {
+            const { draggedOverGroup, currentDraggingElement } = this.state;
+            if (currentDraggingElement && draggedOverGroup === group) {
+                this._onSharedDrop(group, newLayout, item);
+            }
+            else {
+                this._onExternalDrop(group, newLayout, item, e);
+            }
+        };
+        this._onDropDragOver = (group, e) => {
+            const { editMode, dragOverPlugin, onDropDragOver } = this.context;
+            const { currentDraggingElement } = this.state;
+            if (!editMode || (!dragOverPlugin && !currentDraggingElement)) {
                 return false;
             }
-            if (group !== constants_1.DEFAULT_GROUP) {
-                item.parent = group;
+            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
+            if (currentDraggingElement) {
+                const [, { h, w, i }, { type }] = currentDraggingElement;
+                return onDropDragOver(e, properties, layout, { h, w, i, type });
             }
-            const groupedLayout = this.mergeGroupsLayout(group, newLayout, item);
-            onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, item, e);
+            if (dragOverPlugin) {
+                return onDropDragOver(e, properties, layout);
+            }
+            return false;
         };
         this.pluginsRefs = [];
         this.state = {
             isDragging: false,
             isPageHidden: false,
+            currentDraggingElement: null,
+            draggedOverGroup: null,
         };
     }
     componentDidMount() {
@@ -203,7 +287,8 @@ class GridLayout extends react_1.default.PureComponent {
         return (react_1.default.createElement(GridItem_1.default, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName) }));
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
-        const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
+        const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, onItemMountChange, onItemRender, } = this.context;
+        const { currentDraggingElement, draggedOverGroup } = this.state;
         const properties = groupGridProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
             : registerManager.gridLayout;
@@ -212,17 +297,20 @@ class GridLayout extends react_1.default.PureComponent {
             compactType = 'horizontal';
         }
         const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
-        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStart: callbacks.onResizeStart, onResizeStop: callbacks.onResizeStop }, (draggableHandleClassName
+        const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement[0] !== group);
+        const isDragCaptured = currentDraggingElement &&
+            group === currentDraggingElement[0] &&
+            draggedOverGroup !== null &&
+            draggedOverGroup !== group;
+        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, isDragCaptured: isDragCaptured }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
                 isDroppable: true,
-                onDropDragOver: callbacks.onDropDragOver,
-                onDrop: callbacks.onDrop,
             }
             : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }),
             renderItems.map((item, i) => {
-                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName) }));
+                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
             }),
             this.renderTemporaryPlaceholder()));
     }

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

@@ -8,59 +8,177 @@ const constants_1 = require("../../constants");
 class DragOverLayout extends react_grid_layout_1.default {
     constructor(...args) {
         super(...args);
-        this.dragReset = () => {
+        this._savedDraggedOutLayout = null;
+        // Reset placeholder when item dragged from outside
+        this.resetExternalPlaceholder = () => {
             if (this.dragEnterCounter) {
                 this.dragEnterCounter = 0;
                 this.removeDroppingPlaceholder();
             }
         };
+        // Hide placeholder when element is dragged out
+        this.hideLocalPlaceholder = (i) => {
+            const { layout } = this.state;
+            const { cols } = this.props;
+            const savedLayout = layout.map((item) => (Object.assign({}, item)));
+            let hiddenElement;
+            const newLayout = react_grid_layout_1.utils.compact(layout.filter((item) => {
+                if (item.i === i) {
+                    hiddenElement = item;
+                    return false;
+                }
+                return true;
+            }), react_grid_layout_1.utils.compactType(this.props), cols);
+            if (hiddenElement) {
+                newLayout.push(hiddenElement);
+            }
+            this.setState({
+                activeDrag: null,
+                layout: newLayout,
+            });
+            return savedLayout;
+        };
+        this.extendedOnDrag = (i, x, y, sintEv) => {
+            if (this.props.isDragCaptured) {
+                if (!this._savedDraggedOutLayout) {
+                    this._savedDraggedOutLayout = this.hideLocalPlaceholder(i);
+                }
+                return;
+            }
+            this._savedDraggedOutLayout = null;
+            // parent onDrag will show new placeholder again
+            this.parentOnDrag(i, x, y, sintEv);
+        };
+        this.extendedOnDragStop = (i, x, y, sintEv) => {
+            // Restoring layout if item was dropped outside of the grid
+            if (this._savedDraggedOutLayout) {
+                const savedLayout = this._savedDraggedOutLayout;
+                const l = react_grid_layout_1.utils.getLayoutItem(savedLayout, i);
+                // Create placeholder (display only)
+                const placeholder = {
+                    w: l.w,
+                    h: l.h,
+                    x: l.x,
+                    y: l.y,
+                    placeholder: true,
+                    i: i,
+                };
+                this.setState({
+                    layout: savedLayout,
+                    activeDrag: placeholder,
+                }, () => {
+                    this.parentOnDragStop(i, x, y, sintEv);
+                });
+                this._savedDraggedOutLayout = null;
+            }
+            else {
+                this.parentOnDragStop(i, x, y, sintEv);
+            }
+        };
+        // Proxy mouse events -> drag methods for dnd between groups
+        this.mouseEnterHandler = (e) => {
+            var _a, _b;
+            if (this.props.hasSharedDragItem) {
+                this.onDragEnter(e);
+            }
+            else if (this.props.isDragCaptured) {
+                (_b = (_a = this.props).onDragTargetRestore) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+        };
         this.mouseLeaveHandler = (e) => {
-            var _a;
-            const rect = ((_a = this.props.innerRef) === null || _a === void 0 ? void 0 : _a.current.getBoundingClientRect()) || {};
-            if (rect.bottom <= e.clientY ||
-                rect.top >= e.clientY ||
-                rect.left >= e.clientX ||
-                rect.right <= e.clientX) {
-                this.dragReset();
+            var _a, _b;
+            if (this.props.hasSharedDragItem) {
+                this.onDragLeave(e);
+                (_b = (_a = this.props).onDragTargetRestore) === null || _b === void 0 ? void 0 : _b.call(_a);
             }
         };
-        this.parentOnDrag = this.onDrag;
-        this.onDrag = (i, x, y, sintE) => {
-            this.parentOnDrag(i, x, y, sintE);
-            this.mouseLeaveHandler(sintE.e);
+        this.mouseMoveHandler = (e) => {
+            if (this.props.hasSharedDragItem) {
+                this.onDragOver(e);
+            }
         };
+        this.mouseUpHandler = (e) => {
+            var _a, _b;
+            if (this.props.hasSharedDragItem) {
+                e.preventDefault();
+                const { droppingItem } = this.props;
+                const { layout } = this.state;
+                const item = layout.find((l) => l.i === droppingItem.i);
+                // reset dragEnter counter on drop
+                this.resetExternalPlaceholder();
+                (_b = (_a = this.props).onDrop) === null || _b === void 0 ? void 0 : _b.call(_a, layout, item, e);
+            }
+        };
+        this.parentOnDrag = this.onDrag;
+        this.onDrag = this.extendedOnDrag;
+        this.parentOnDragStop = this.onDragStop;
+        this.onDragStop = this.extendedOnDragStop;
     }
     componentDidMount() {
         var _a;
         (_a = super.componentDidMount) === null || _a === void 0 ? void 0 : _a.call(this);
-        window.addEventListener('dragend', this.dragReset);
+        // If cursor is moved out of the window there is a bug
+        // which leaves placeholder element in grid, this action needed to reset this state
+        window.addEventListener('dragend', this.resetExternalPlaceholder);
+        const innerElement = this.getInnerElement();
+        if (innerElement) {
+            innerElement.addEventListener('mouseup', this.mouseUpHandler);
+            innerElement.addEventListener('mouseenter', this.mouseEnterHandler);
+            innerElement.addEventListener('mouseleave', this.mouseLeaveHandler);
+            innerElement.addEventListener('mousemove', this.mouseMoveHandler);
+        }
     }
     componentWillUnmount() {
-        window.removeEventListener('dragend', this.dragReset);
+        window.removeEventListener('dragend', this.resetExternalPlaceholder);
+        const innerElement = this.getInnerElement();
+        if (innerElement) {
+            innerElement.removeEventListener('mouseup', this.mouseUpHandler);
+            innerElement.removeEventListener('mouseenter', this.mouseEnterHandler);
+            innerElement.removeEventListener('mouseleave', this.mouseLeaveHandler);
+            innerElement.removeEventListener('mousemove', this.mouseMoveHandler);
+        }
     }
+    // react-grid-layout doens't calculate it's height when last element is removed
+    // and just keeps the previous value
+    // so for autosize to work in that case we are resetting it's height value
     containerHeight() {
         if (this.props.autoSize && this.state.layout.length === 0) {
-            return 'unset';
+            return;
         }
+        // eslint-disable-next-line consistent-return
         return super.containerHeight();
     }
+    // innerRef is passed by WithProvider without this wrapper there are only
+    // * findDOMNode - deprecated
+    // * rewrite whole ReactGridLayout.render method
+    // so in that case don't try to use this class on it's own
+    // or pass innerRef: React.MutableRef as it's not optional prop
+    getInnerElement() {
+        var _a;
+        return ((_a = this.props.innerRef) === null || _a === void 0 ? void 0 : _a.current) || null;
+    }
+    // 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
     processGridItem(child, isDroppingItem) {
         var _a;
         const gridItem = (_a = super.processGridItem) === null || _a === void 0 ? void 0 : _a.call(this, child, isDroppingItem);
+        if (!gridItem) {
+            return gridItem;
+        }
+        const { props: itemProps } = gridItem;
         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
-            if (!gridItem)
-                return null;
-            const { props } = gridItem;
-            const { containerWidth, cols, w, h, rowHeight, margin, transformScale } = props;
+            const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
             const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
             const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+            const style = gridItem.props.style || null;
+            // React.cloneElement is just cleaner then copy-paste whole processGridItem method
             return react_1.default.cloneElement(gridItem, {
+                // hiding previre if dragging shared item
+                style: this.props.hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
                 className: constants_1.OVERLAY_CLASS_NAME,
-                droppingPosition: Object.assign(Object.assign({}, props.droppingPosition), { left: props.droppingPosition.left - leftOffset, top: props.droppingPosition.top - topOffset }),
+                droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
             });
         }
         return gridItem;

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

@@ -61,7 +61,9 @@ declare const _default: {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
+        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
+        onMountChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     contextType: React.Context<any>;
 };

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

@@ -7,9 +7,18 @@ 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, isPlaceholder, forwardedPluginRef }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef, onMountChange, }) => {
     var _a, _b;
-    if (!registerManager.check(type)) {
+    const isRegisteredType = registerManager.check(type);
+    react_1.default.useLayoutEffect(() => {
+        if (isRegisteredType && !isPlaceholder) {
+            onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(true);
+            return () => {
+                onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(false);
+            };
+        }
+    }, []);
+    if (!isRegisteredType) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
     }
@@ -25,5 +34,7 @@ Item.propTypes = {
     registerManager: prop_types_1.default.object,
     type: prop_types_1.default.string,
     isPlaceholder: prop_types_1.default.bool,
+    onMountChange: prop_types_1.default.func,
+    onBeforeLoad: prop_types_1.default.func,
 };
 exports.default = (0, prepareItem_1.prepareItem)(Item);

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

@@ -61,7 +61,9 @@ export function prepareItem(Component: any): {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
+        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
+        onMountChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     contextType: React.Context<any>;
 };

package/build/cjs/hocs/prepareItem.js

@@ -15,7 +15,7 @@ function prepareItem(Component) {
                 };
                 this._currentRenderProps = {};
                 this.getRenderProps = () => {
-                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
+                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder, onBeforeLoad, } = this.props;
                     const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                     const { data, defaults, namespace } = item;
                     const rendererProps = {
@@ -24,6 +24,7 @@ function prepareItem(Component) {
                         params: itemsParams[id],
                         state: itemsState[id],
                         onStateAndParamsChange: this._onStateAndParamsChange,
+                        onBeforeLoad,
                         width,
                         height,
                         id,
@@ -55,10 +56,10 @@ function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { item, isPlaceholder } = this.props;
+                const { item, isPlaceholder, forwardedPluginRef, onMountChange } = this.props;
                 const { registerManager } = this.context;
                 const { type } = item;
-                return (react_1.default.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
+                return (react_1.default.createElement(Component, { forwardedPluginRef: forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder, onMountChange: onMountChange }));
             }
         },
         _a.propTypes = {
@@ -71,7 +72,9 @@ function prepareItem(Component) {
             height: prop_types_1.default.number,
             transform: prop_types_1.default.string,
             isPlaceholder: prop_types_1.default.bool,
+            onBeforeLoad: prop_types_1.default.func,
             forwardedPluginRef: prop_types_1.default.any,
+            onMountChange: prop_types_1.default.func,
         },
         _a.contextType = DashKitContext_1.DashKitContext,
         _a;