import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import DraggableItem from './DraggableItem';
export default function OrderGroup({ orderMembers, onOrderChange, onReorder }) {
    return (_jsx(DragDropContext, { onDragEnd: ({ source, destination }) => {
            onReorder(source && source.index, destination && destination.index);
        }, children: _jsx(Droppable, { droppableId: "droppable", children: (provided) => (_jsxs("div", { "data-testid": "order-popover", ref: provided.innerRef, ...provided.droppableProps, children: [orderMembers.map(({ id, title, order }, index) => (_jsx(DraggableItem, { id: id, index: index, order: order, onOrderChange: onOrderChange, children: title }, id))), provided.placeholder] })) }) }));
}
//# sourceMappingURL=OrderGroup.js.map