@janiscommerce/ui-web 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [2.1.0] - 2026-07-03
+
+### Added
+
+- `DiagramCanvas` imperative ref method `deleteElements({ nodes, edges })` so consumers can delete elements from their own controls through React Flow — deletion goes through `onBeforeDelete` and emits removes via `onNodesChange`/`onEdgesChange`, same as keyboard delete
+
 ## [2.0.0] - 2026-07-02
 
 ### Changed

package/dist/index.esm.js

@@ -15630,6 +15630,7 @@ var _excluded$d = ["handleConfig"],
  * @property {(ids?: string[]) => void} selectNodes - reemplaza la selección actual con esos nodos
  * @property {(ids?: string[]) => void} selectEdges - reemplaza la selección actual con esos edges
  * @property {() => void} clearSelection - limpia toda la selección
+ * @property {(ids?: { nodes?: string[], edges?: string[] }) => Promise<void>} deleteElements - borra los elementos vía React Flow (pasa por onBeforeDelete y onNodesChange/onEdgesChange)
  */
 
 var defaultViewportOpts = {
@@ -15756,14 +15757,34 @@ var Canvas = /*#__PURE__*/forwardRef(function (_ref, ref) {
       },
       clearSelection: function clearSelection() {
         return store.getState().unselectNodesAndEdges();
+      },
+      deleteElements: function deleteElements() {
+        var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref2$nodes = _ref2.nodes,
+            nodeIds = _ref2$nodes === void 0 ? [] : _ref2$nodes,
+            _ref2$edges = _ref2.edges,
+            edgeIds = _ref2$edges === void 0 ? [] : _ref2$edges;
+
+        return rf.deleteElements({
+          nodes: nodeIds.map(function (id) {
+            return {
+              id: id
+            };
+          }),
+          edges: edgeIds.map(function (id) {
+            return {
+              id: id
+            };
+          })
+        });
       }
     };
   }, [rf, store]);
   var nodeTypes = useMemo$1(function () {
-    return Object.fromEntries(Object.entries(nodeComponents).map(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-          type = _ref3[0],
-          Component = _ref3[1];
+    return Object.fromEntries(Object.entries(nodeComponents).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          type = _ref4[0],
+          Component = _ref4[1];
 
       return [type, withHandles(Component, {
         resizable: resizableNodes
@@ -15812,13 +15833,13 @@ var Canvas = /*#__PURE__*/forwardRef(function (_ref, ref) {
     });
   }, [onReconnect]);
   var handleBeforeDelete = useCallback( /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref4) {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref5) {
       var nodesToDelete, edgesToDelete, result, idsToDelete, nodeIds, edgeIds;
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              nodesToDelete = _ref4.nodes, edgesToDelete = _ref4.edges;
+              nodesToDelete = _ref5.nodes, edgesToDelete = _ref5.edges;
 
               if (onBeforeDelete) {
                 _context.next = 3;
@@ -15832,9 +15853,9 @@ var Canvas = /*#__PURE__*/forwardRef(function (_ref, ref) {
               return onBeforeDelete({
                 nodes: nodesToDelete.map(function (node) {
                   // eslint-disable-next-line no-unused-vars
-                  var _ref6 = node.data || {};
-                      _ref6.handleConfig;
-                      var data = _objectWithoutProperties(_ref6, _excluded$d);
+                  var _ref7 = node.data || {};
+                      _ref7.handleConfig;
+                      var data = _objectWithoutProperties(_ref7, _excluded$d);
 
                   return {
                     id: node.id,
@@ -15844,9 +15865,9 @@ var Canvas = /*#__PURE__*/forwardRef(function (_ref, ref) {
                 }),
                 edges: edgesToDelete.map(function (edge) {
                   // eslint-disable-next-line no-unused-vars
-                  var _ref7 = edge.data || {};
-                      _ref7.selectedStyle;
-                      var data = _objectWithoutProperties(_ref7, _excluded2$1);
+                  var _ref8 = edge.data || {};
+                      _ref8.selectedStyle;
+                      var data = _objectWithoutProperties(_ref8, _excluded2$1);
 
                   return {
                     id: edge.id,
@@ -15869,8 +15890,8 @@ var Canvas = /*#__PURE__*/forwardRef(function (_ref, ref) {
               // { nodes, edges } → borrado selectivo: filtrar los objetos RF originales
               // por los ids que el consumidor devolvió (RF hace el match por id).
               idsToDelete = function idsToDelete(elements) {
-                return new Set((elements || []).map(function (_ref8) {
-                  var id = _ref8.id;
+                return new Set((elements || []).map(function (_ref9) {
+                  var id = _ref9.id;
                   return id;
                 }));
               };
@@ -15895,21 +15916,21 @@ var Canvas = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }));
 
     return function (_x) {
-      return _ref5.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }(), [onBeforeDelete]);
-  var handleSelectionChange = useCallback(function (_ref9) {
-    var selectedNodes = _ref9.nodes,
-        selectedEdges = _ref9.edges;
+  var handleSelectionChange = useCallback(function (_ref10) {
+    var selectedNodes = _ref10.nodes,
+        selectedEdges = _ref10.edges;
     return onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
-      nodes: selectedNodes.map(function (_ref10) {
-        var id = _ref10.id;
+      nodes: selectedNodes.map(function (_ref11) {
+        var id = _ref11.id;
         return {
           id: id
         };
       }),
-      edges: selectedEdges.map(function (_ref11) {
-        var id = _ref11.id;
+      edges: selectedEdges.map(function (_ref12) {
+        var id = _ref12.id;
         return {
           id: id
         };
@@ -15918,9 +15939,9 @@ var Canvas = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [onSelectionChange]);
   var handleNodeClick = useCallback(function (_event, node) {
     // eslint-disable-next-line no-unused-vars
-    var _ref12 = node.data || {};
-        _ref12.handleConfig;
-        var data = _objectWithoutProperties(_ref12, _excluded3);
+    var _ref13 = node.data || {};
+        _ref13.handleConfig;
+        var data = _objectWithoutProperties(_ref13, _excluded3);
 
     onNodeClick === null || onNodeClick === void 0 || onNodeClick({
       id: node.id,
@@ -15930,9 +15951,9 @@ var Canvas = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [onNodeClick]);
   var handleEdgeClick = useCallback(function (_event, edge) {
     // eslint-disable-next-line no-unused-vars
-    var _ref13 = edge.data || {};
-        _ref13.selectedStyle;
-        var data = _objectWithoutProperties(_ref13, _excluded4);
+    var _ref14 = edge.data || {};
+        _ref14.selectedStyle;
+        var data = _objectWithoutProperties(_ref14, _excluded4);
 
     onEdgeClick === null || onEdgeClick === void 0 || onEdgeClick({
       id: edge.id,