import React, { cloneElement, isValidElement, } from 'react';
import { NestedTableDragAndDropOverlayPopover } from './NestedTableDragAndDropOverlayPopover';
import { MultipleDragOverlayEffect } from './MultipleDragOverlayEffect';
import { observer } from 'mobx-react-lite';
function _NestedTableDragAndDropOverlay(props) {
    const { state, children, innerRef, style, ...rest } = props;
    const { activeNode } = state;
    return (React.createElement("div", { "data-hook": "nested-table-dnd-overlay-wrapper", ref: innerRef, ...rest, style: {
            ...style,
            opacity: undefined,
        } },
        activeNode && !activeNode.collection.result.isEmpty && (React.createElement(MultipleDragOverlayEffect, { style: style, ...rest })),
        React.createElement(NestedTableDragAndDropOverlayPopover, { state: state }, isValidElement(children)
            ? cloneElement(children, {
                style: {
                    ...children.props.style,
                    opacity: style?.opacity,
                },
            })
            : children)));
}
export const NestedTableDragAndDropOverlay = observer(_NestedTableDragAndDropOverlay);
//# sourceMappingURL=NestedTableDragAndDropOverlay.js.map