@janiscommerce/ui-web 1.11.0 → 1.12.0

package/CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [1.12.0] - 2026-06-26
+
+### Changed
+
+- `DiagramCanvas` edge arrows now inherit their color from the edge `style.stroke` (removed `color` from `arrowStart`/`arrowEnd`); added optional `size` (default 20)
+- Render node handles above the node content without `z-index` to prevent the connection arrow from being clipped
+- Moved shared PropTypes shapes to their own modules (`DiagramNodeShape` in `Node.js`, edge shapes in `Edge.js`)
+- Split `DiagramCanvas` stories into themed files (Overview, Interactions, Nodes, Edges, Ref API) with shared meta, shapes and styles
+
 ## [1.11.0] - 2026-06-25
 
 ### Added

package/dist/index.esm.js

@@ -13855,6 +13855,10 @@ var withHandles = function withHandles(NodeComponent) {
       minWidth: 40,
       minHeight: 40,
       isVisible: selected
+    }), /*#__PURE__*/React__default.createElement(NodeComponent, {
+      data: nodeData,
+      selected: selected,
+      style: sizeStyle
     }), handles.map(function (id) {
       return /*#__PURE__*/React__default.createElement(Handle, {
         key: id,
@@ -13865,14 +13869,9 @@ var withHandles = function withHandles(NodeComponent) {
           background: handleColor,
           width: 10,
           height: 10,
-          border: '2px solid #fff',
-          zIndex: 1
+          border: '2px solid #fff'
         }
       });
-    }), /*#__PURE__*/React__default.createElement(NodeComponent, {
-      data: nodeData,
-      selected: selected,
-      style: sizeStyle
     }));
   };
 
@@ -13880,6 +13879,22 @@ var withHandles = function withHandles(NodeComponent) {
   return WrappedNode;
 };
 
+var DiagramNodeShape = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  position: PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired
+  }).isRequired,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  handleConfig: PropTypes.shape({
+    color: PropTypes.string,
+    positions: PropTypes.arrayOf(PropTypes.oneOf(['top', 'right', 'bottom', 'left']))
+  }),
+  data: PropTypes.object
+});
+
 var fails$d = fails$p;
 
 var arrayMethodIsStrict$2 = function (METHOD_NAME, argument) {
@@ -13937,6 +13952,25 @@ var EDGE_TYPES = {
   bezier: withSelected(BezierEdge),
   straight: withSelected(StraightEdge)
 };
+var ArrowShape = PropTypes.shape({
+  type: PropTypes.oneOf(['outlined', 'contained']),
+  size: PropTypes.number
+});
+var DiagramEdgeShape = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  source: PropTypes.string.isRequired,
+  target: PropTypes.string.isRequired,
+  sourceHandle: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  targetHandle: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  lineType: PropTypes.oneOf(['step', 'curved', 'straight']),
+  animated: PropTypes.bool,
+  label: PropTypes.string,
+  style: PropTypes.object,
+  selectedStyle: PropTypes.object,
+  arrowStart: ArrowShape,
+  arrowEnd: ArrowShape,
+  data: PropTypes.object
+});
 
 var _excluded$e = ["width", "height", "handleConfig", "data"];
 var MARKER_MAP = {
@@ -13949,11 +13983,15 @@ var LINE_TYPE_MAP = {
   straight: 'straight'
 };
 
-var formatMarker = function formatMarker(marker) {
+var formatMarker = function formatMarker(marker, style) {
   if (!marker) return undefined;
+  var type = marker.type,
+      size = marker.size;
   return {
-    type: MARKER_MAP[marker.type] || marker.type,
-    color: marker.color
+    type: MARKER_MAP[type] || type,
+    color: style === null || style === void 0 ? void 0 : style.stroke,
+    width: size !== null && size !== void 0 ? size : 20,
+    height: size !== null && size !== void 0 ? size : 20
   };
 };
 
@@ -14006,8 +14044,8 @@ var mapEdgesToRf = function mapEdgesToRf(edges) {
         selectedStyle: selectedStyle
       }),
       type: LINE_TYPE_MAP[lineType] || 'bezier',
-      markerStart: formatMarker(arrowStart),
-      markerEnd: formatMarker(arrowEnd)
+      markerStart: formatMarker(arrowStart, style),
+      markerEnd: formatMarker(arrowEnd, style)
     };
   });
 };
@@ -14097,82 +14135,6 @@ var defaultViewportOpts = {
 var defaultZoomOpts = {
   duration: 400
 };
-var ArrowShape = PropTypes.shape({
-  type: PropTypes.oneOf(['outlined', 'contained']),
-  color: PropTypes.string
-});
-var DiagramNodeShape = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  position: PropTypes.shape({
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired
-  }).isRequired,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  handleConfig: PropTypes.shape({
-    color: PropTypes.string,
-    positions: PropTypes.arrayOf(PropTypes.oneOf(['top', 'right', 'bottom', 'left']))
-  }),
-  data: PropTypes.object
-});
-var DiagramEdgeShape = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  source: PropTypes.string.isRequired,
-  target: PropTypes.string.isRequired,
-  sourceHandle: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  targetHandle: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  lineType: PropTypes.oneOf(['step', 'curved', 'straight']),
-  animated: PropTypes.bool,
-  label: PropTypes.string,
-  style: PropTypes.object,
-  selectedStyle: PropTypes.object,
-  arrowStart: ArrowShape,
-  arrowEnd: ArrowShape,
-  data: PropTypes.object
-});
-({
-  /** Nodos a renderizar en el diagrama. */
-  nodes: PropTypes.arrayOf(DiagramNodeShape),
-
-  /** Edges a renderizar en el diagrama. */
-  edges: PropTypes.arrayOf(DiagramEdgeShape),
-
-  /** Map de tipo de nodo → componente React custom. */
-  nodeComponents: PropTypes.objectOf(PropTypes.elementType),
-
-  /** Configuración del canvas. `readOnly` deshabilita drag y conexiones. `showControls` muestra los controles de zoom. `showMiniMap` muestra el minimapa. `resizableNodes` habilita el redimensionado de nodos. */
-  config: PropTypes.shape({
-    readOnly: PropTypes.bool,
-    showControls: PropTypes.bool,
-    showMiniMap: PropTypes.bool,
-    resizableNodes: PropTypes.bool
-  }),
-
-  /** Cambios de posición (`{ type: 'position', id, position }`), dimensiones (`{ type: 'dimensions', id, width, height }`) o eliminación (`{ type: 'remove', id }`) de nodos. */
-  onNodesChange: PropTypes.func,
-
-  /** Eliminación de edges (`{ type: 'remove', id }`). */
-  onEdgesChange: PropTypes.func,
-
-  /** El usuario conectó dos nodos. Recibe `{ source, target, sourceHandle, targetHandle }`. */
-  onConnect: PropTypes.func,
-
-  /** El usuario reconectó un edge a otro nodo. Recibe `(id, { source, target })`. */
-  onReconnect: PropTypes.func,
-
-  /** El usuario hizo click en un nodo. Recibe `(id, data)`. */
-  onNodeClick: PropTypes.func,
-
-  /** El usuario hizo click en un edge. Recibe `(id, data)`. */
-  onEdgeClick: PropTypes.func,
-
-  /** Intercepta el borrado antes de que ocurra. Async: retornar `false` cancela el borrado. Recibe `{ nodes, edges }` con los elementos a borrar. */
-  onBeforeDelete: PropTypes.func,
-
-  /** Se llama cuando cambia la selección. Recibe `{ nodes: [{id}], edges: [{id}] }` con los elementos seleccionados en ese momento. */
-  onSelectionChange: PropTypes.func
-});
 var Canvas = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var nodes = _ref.nodes,
       edges = _ref.edges,
@@ -14398,6 +14360,48 @@ var Canvas = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement(Background, null), showControls && /*#__PURE__*/React__default.createElement(DiagramControls, null), showMiniMap && /*#__PURE__*/React__default.createElement(MiniMap, null)));
 });
 Canvas.displayName = 'Canvas';
+({
+  /** Nodos a renderizar en el diagrama. */
+  nodes: PropTypes.arrayOf(DiagramNodeShape),
+
+  /** Edges a renderizar en el diagrama. */
+  edges: PropTypes.arrayOf(DiagramEdgeShape),
+
+  /** Map de tipo de nodo → componente React custom. */
+  nodeComponents: PropTypes.objectOf(PropTypes.elementType),
+
+  /** Configuración del canvas. `readOnly` deshabilita drag y conexiones. `showControls` muestra los controles de zoom. `showMiniMap` muestra el minimapa. `resizableNodes` habilita el redimensionado de nodos. */
+  config: PropTypes.shape({
+    readOnly: PropTypes.bool,
+    showControls: PropTypes.bool,
+    showMiniMap: PropTypes.bool,
+    resizableNodes: PropTypes.bool
+  }),
+
+  /** Cambios de posición (`{ type: 'position', id, position }`), dimensiones (`{ type: 'dimensions', id, width, height }`) o eliminación (`{ type: 'remove', id }`) de nodos. */
+  onNodesChange: PropTypes.func,
+
+  /** Eliminación de edges (`{ type: 'remove', id }`). */
+  onEdgesChange: PropTypes.func,
+
+  /** El usuario conectó dos nodos. Recibe `{ source, target, sourceHandle, targetHandle }`. */
+  onConnect: PropTypes.func,
+
+  /** El usuario reconectó un edge a otro nodo. Recibe `(id, { source, target })`. */
+  onReconnect: PropTypes.func,
+
+  /** El usuario hizo click en un nodo. Recibe `(id, data)`. */
+  onNodeClick: PropTypes.func,
+
+  /** El usuario hizo click en un edge. Recibe `(id, data)`. */
+  onEdgeClick: PropTypes.func,
+
+  /** Intercepta el borrado antes de que ocurra. Async: retornar `false` cancela el borrado. Recibe `{ nodes, edges }` con los elementos a borrar. */
+  onBeforeDelete: PropTypes.func,
+
+  /** Se llama cuando cambia la selección. Recibe `{ nodes: [{id}], edges: [{id}] }` con los elementos seleccionados en ese momento. */
+  onSelectionChange: PropTypes.func
+});
 
 var _excluded$c = ["nodes", "edges", "nodeComponents", "config"];
 var defaultConfig = {