@trops/dash-core 0.1.272 → 0.1.273

package/dist/index.js

@@ -23963,6 +23963,7 @@ var DraggableDroppableCellBody = function DraggableDroppableCellBody(_ref) {
   var cellNumber = _ref.cellNumber,
     gridContainerId = _ref.gridContainerId,
     onMoveWidgetToCell = _ref.onMoveWidgetToCell,
+    onDropWidgetFromSidebar = _ref.onDropWidgetFromSidebar,
     hasSpan = _ref.hasSpan,
     children = _ref.children,
     padding = _ref.padding;
@@ -23986,42 +23987,52 @@ var DraggableDroppableCellBody = function DraggableDroppableCellBody(_ref) {
     drag = _useDrag2[1];
   var _useDrop = reactDnd.useDrop(function () {
       return {
-        accept: GRID_CELL_WIDGET_TYPE,
-        canDrop: function canDrop(dragItem) {
+        accept: [GRID_CELL_WIDGET_TYPE, SIDEBAR_WIDGET_TYPE],
+        canDrop: function canDrop(dragItem, monitor) {
+          var itemType = monitor.getItemType();
+          if (itemType === SIDEBAR_WIDGET_TYPE) return true;
           if (dragItem.gridContainerId !== gridContainerId) return false;
           if (dragItem.cellNumber === cellNumber) return false;
           if (dragItem.hasSpan || hasSpan) return false;
           return true;
         },
-        drop: function drop(dragItem) {
-          if (onMoveWidgetToCell) onMoveWidgetToCell(gridContainerId, dragItem.cellNumber, cellNumber);
+        drop: function drop(dragItem, monitor) {
+          var itemType = monitor.getItemType();
+          if (itemType === SIDEBAR_WIDGET_TYPE) {
+            if (onDropWidgetFromSidebar) onDropWidgetFromSidebar(gridContainerId, cellNumber, dragItem.widgetKey);
+          } else {
+            if (onMoveWidgetToCell) onMoveWidgetToCell(gridContainerId, dragItem.cellNumber, cellNumber);
+          }
         },
         collect: function collect(monitor) {
           return {
             isOver: monitor.isOver(),
-            canDrop: monitor.canDrop()
+            canDrop: monitor.canDrop(),
+            itemType: monitor.getItemType()
           };
         }
       };
-    }, [cellNumber, gridContainerId, onMoveWidgetToCell, hasSpan]),
+    }, [cellNumber, gridContainerId, onMoveWidgetToCell, onDropWidgetFromSidebar, hasSpan]),
     _useDrop2 = _slicedToArray(_useDrop, 2),
     _useDrop2$ = _useDrop2[0],
     isOver = _useDrop2$.isOver,
     canDrop = _useDrop2$.canDrop,
+    itemType = _useDrop2$.itemType,
     drop = _useDrop2[1];
+  var isSidebarDrop = itemType === SIDEBAR_WIDGET_TYPE;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     ref: function ref(node) {
       return drag(drop(node));
     },
-    className: "flex-1 min-h-0 overflow-auto ".concat(padding, " ").concat(isDragging ? "opacity-30" : "", " ").concat(isOver && canDrop ? "ring-2 ring-blue-500 ring-inset" : ""),
+    className: "flex-1 min-h-0 overflow-auto relative ".concat(padding, " ").concat(isDragging ? "opacity-30" : "", " ").concat(isOver && canDrop ? isSidebarDrop ? "ring-2 ring-green-500 ring-inset" : "ring-2 ring-blue-500 ring-inset" : ""),
     style: {
       cursor: "grab"
     },
     children: [children, isOver && canDrop && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "absolute inset-0 flex items-center justify-center bg-blue-600/30 rounded pointer-events-none",
+      className: "absolute inset-0 flex items-center justify-center ".concat(isSidebarDrop ? "bg-green-600/30" : "bg-blue-600/30", " rounded pointer-events-none"),
       children: /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "text-sm font-bold text-blue-200",
-        children: "Swap"
+        className: "text-sm font-bold ".concat(isSidebarDrop ? "text-green-200" : "text-blue-200"),
+        children: isSidebarDrop ? "Drop here" : "Swap"
       })
     })]
   });
@@ -25094,6 +25105,7 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
         cellNumber: cellNumber,
         gridContainerId: id,
         onMoveWidgetToCell: onMoveWidgetToCell,
+        onDropWidgetFromSidebar: onDropWidgetFromSidebar,
         hasSpan: !!(cellDef.span && (cellDef.span.row && cellDef.span.row > 1 || cellDef.span.col && cellDef.span.col > 1)),
         padding: "p-3",
         children: renderedWidget