@hitachivantara/uikit-react-lab 5.46.13 → 6.0.0-next.2

package/dist/cjs/Flow/DroppableFlow.cjs

@@ -1,204 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const core = require("@dnd-kit/core");
-const react$1 = require("@emotion/react");
-const reactflow = require("reactflow");
-const uid = require("uid");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const base = require("./base.cjs");
-const Flow_styles = require("./Flow.styles.cjs");
-const NodeMetaContext = require("./FlowContext/NodeMetaContext.cjs");
-const useFlowInstance = require("./hooks/useFlowInstance.cjs");
-const getNode = (nodes, nodeId) => {
-  return nodes.find((n) => n.id === nodeId);
-};
-const validateEdge = (nodes, edges, connection, nodeMetaRegistry) => {
-  const {
-    source: sourceId,
-    sourceHandle,
-    target: targetId,
-    targetHandle
-  } = connection;
-  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;
-  const sourceNode = getNode(nodes, sourceId);
-  const targetNode = getNode(nodes, targetId);
-  if (!sourceNode || !targetNode) return false;
-  const sourceType = sourceNode.type;
-  const targetType = targetNode.type;
-  if (!sourceType || !targetType) return false;
-  const inputs = nodeMetaRegistry[targetId]?.inputs || [];
-  const outputs = nodeMetaRegistry[sourceId]?.outputs || [];
-  const source = outputs.flatMap((out) => out.outputs || out).find((out) => out.id === sourceHandle);
-  const target = inputs.flatMap((inp) => inp.inputs || inp).find((inp) => inp.id === targetHandle);
-  const sourceProvides = source?.provides || "";
-  const targetAccepts = target?.accepts || [];
-  const sourceMaxConnections = source?.maxConnections;
-  const targetMaxConnections = target?.maxConnections;
-  let isValid = targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);
-  if (isValid && targetMaxConnections != null) {
-    const targetConnections = edges.filter(
-      (edg) => edg.target === targetId && edg.targetHandle === targetHandle
-    ).length;
-    isValid = targetConnections < targetMaxConnections;
-  }
-  if (isValid && sourceMaxConnections != null) {
-    const sourceConnections = edges.filter(
-      (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle
-    ).length;
-    isValid = sourceConnections < sourceMaxConnections;
-  }
-  return isValid;
-};
-const HvDroppableFlow = ({
-  id,
-  className,
-  children,
-  onFlowChange,
-  onDndDrop,
-  classes: classesProp,
-  nodes: initialNodes = [],
-  edges: initialEdges = [],
-  onConnect: onConnectProp,
-  onNodesChange: onNodesChangeProp,
-  onEdgesChange: onEdgesChangeProp,
-  defaultEdgeOptions: defaultEdgeOptionsProp,
-  nodeTypes,
-  ...others
-}) => {
-  const { classes, cx } = Flow_styles.useClasses(classesProp);
-  const elementId = uikitReactCore.useUniqueId(id);
-  const reactFlowInstance = useFlowInstance.useFlowInstance();
-  const [nodes, setNodes] = react.useState(initialNodes);
-  const [edges, setEdges] = react.useState(initialEdges);
-  const nodesRef = react.useRef(initialNodes);
-  const edgesRef = react.useRef(initialEdges);
-  const updateNodes = (nds) => {
-    setNodes(nds);
-    nodesRef.current = nds;
-  };
-  const updateEdges = (eds) => {
-    setEdges(eds);
-    edgesRef.current = eds;
-  };
-  const { setNodeRef } = core.useDroppable({
-    id: elementId
-  });
-  const handleDragEnd = react.useCallback(
-    (event) => {
-      if (event.over?.id !== elementId) return;
-      const hvFlow = event.active.data.current?.hvFlow;
-      const type = hvFlow?.type;
-      if (!type || !nodeTypes?.[type]) {
-        return;
-      }
-      const position = reactFlowInstance.screenToFlowPosition({
-        x: hvFlow?.x || 0,
-        y: hvFlow?.y || 0
-      });
-      const data = {
-        nodeLabel: hvFlow?.label,
-        ...hvFlow?.data
-      };
-      const newNode = {
-        id: uid.uid(),
-        position,
-        data,
-        type
-      };
-      if (onDndDrop) {
-        onDndDrop(event, newNode);
-        return;
-      }
-      updateNodes(nodes.concat(newNode));
-    },
-    [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance]
-  );
-  core.useDndMonitor({
-    onDragEnd: handleDragEnd
-  });
-  const handleFlowChange = react.useCallback(
-    (nds, eds) => {
-      const isDragging = nds.find((node) => node.dragging);
-      if (!isDragging) {
-        onFlowChange?.(nds, eds);
-      }
-    },
-    [onFlowChange]
-  );
-  const handleConnect = react.useCallback(
-    (connection) => {
-      const eds = reactflow.addEdge(connection, edgesRef.current);
-      updateEdges(eds);
-      handleFlowChange(nodesRef.current, eds);
-      onConnectProp?.(connection);
-    },
-    [handleFlowChange, onConnectProp]
-  );
-  const handleNodesChange = react.useCallback(
-    (changes) => {
-      const nds = reactflow.applyNodeChanges(changes, nodesRef.current);
-      updateNodes(nds);
-      handleFlowChange(nds, edgesRef.current);
-      onNodesChangeProp?.(changes);
-    },
-    [handleFlowChange, onNodesChangeProp]
-  );
-  const handleEdgesChange = react.useCallback(
-    (changes) => {
-      const eds = reactflow.applyEdgeChanges(changes, edgesRef.current);
-      updateEdges(eds);
-      handleFlowChange(nodesRef.current, eds);
-      onEdgesChangeProp?.(changes);
-    },
-    [handleFlowChange, onEdgesChangeProp]
-  );
-  const { registry } = NodeMetaContext.useNodeMetaRegistry();
-  const isValidConnection = (connection) => validateEdge(nodes, edges, connection, registry);
-  const defaultEdgeOptions = {
-    markerEnd: {
-      type: reactflow.MarkerType.ArrowClosed,
-      height: 20,
-      width: 20
-    },
-    type: "smoothstep",
-    pathOptions: {
-      borderRadius: 40
-    },
-    ...defaultEdgeOptionsProp
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Global, { styles: base.flowStyles }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        id: elementId,
-        ref: setNodeRef,
-        className: cx(classes.root, className),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactflow.ReactFlow,
-          {
-            nodes,
-            edges,
-            nodeTypes,
-            onNodesChange: handleNodesChange,
-            onEdgesChange: handleEdgesChange,
-            onConnect: handleConnect,
-            isValidConnection,
-            defaultEdgeOptions,
-            snapGrid: [1, 1],
-            snapToGrid: true,
-            onError: (code, message) => {
-            },
-            ...others,
-            children
-          }
-        )
-      }
-    )
-  ] });
-};
-exports.flowClasses = Flow_styles.staticClasses;
-exports.HvDroppableFlow = HvDroppableFlow;
-exports.getNode = getNode;

package/dist/cjs/Flow/Empty/Empty.cjs

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const reactflow = require("reactflow");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const Empty_styles = require("./Empty.styles.cjs");
-const HvFlowEmpty = ({ className, ...others }) => {
-  const { classes, cx } = Empty_styles.useClasses();
-  const nodes = reactflow.useNodes();
-  return !nodes || (nodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvEmptyState, { className: cx(classes.root, className), ...others }) : null);
-};
-exports.HvFlowEmpty = HvFlowEmpty;

package/dist/cjs/Flow/Empty/Empty.styles.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowEmpty", {
-  root: {
-    width: "100%",
-    height: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: uikitReactCore.theme.colors.backgroundColor,
-    position: "absolute",
-    zIndex: uikitReactCore.theme.zIndices.popover
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Flow/Flow.cjs

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const core = require("@dnd-kit/core");
-const modifiers = require("@dnd-kit/modifiers");
-const reactflow = require("reactflow");
-const DroppableFlow = require("./DroppableFlow.cjs");
-const FlowContext = require("./FlowContext/FlowContext.cjs");
-const HvFlow = ({
-  nodeGroups,
-  sidebar,
-  defaultActions,
-  dndContextProps,
-  ...others
-}) => {
-  const sensors = core.useSensors(
-    core.useSensor(core.PointerSensor),
-    core.useSensor(core.KeyboardSensor)
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(reactflow.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FlowContext.HvFlowProvider, { nodeGroups, defaultActions, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    core.DndContext,
-    {
-      sensors,
-      modifiers: [modifiers.restrictToWindowEdges],
-      ...dndContextProps,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DroppableFlow.HvDroppableFlow, { ...others }),
-        sidebar
-      ]
-    }
-  ) }) });
-};
-exports.HvFlow = HvFlow;

package/dist/cjs/Flow/Flow.styles.cjs

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const BaseNode_styles = require("./Node/BaseNode.styles.cjs");
-require("react/jsx-runtime");
-require("reactflow");
-require("@hitachivantara/uikit-react-utils");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlow", {
-  root: {
-    height: "100%",
-    [`& .selected > .${BaseNode_styles.staticClasses.root}`]: {
-      border: `1px solid ${uikitReactCore.theme.colors.textDisabled}`,
-      borderRadius: uikitReactCore.theme.radii.round,
-      boxSizing: "border-box"
-    }
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Flow/FlowContext/FlowContext.cjs

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const NodeMetaContext = require("./NodeMetaContext.cjs");
-const HvFlowContext = react.createContext({});
-const HvFlowProvider = ({
-  nodeGroups,
-  defaultActions,
-  children
-}) => {
-  const [expandedNodeGroups, setExpandedNodeGroups] = react.useState([]);
-  const value = react.useMemo(
-    () => ({
-      nodeGroups,
-      defaultActions,
-      expandedNodeGroups,
-      setExpandedNodeGroups
-    }),
-    [nodeGroups, defaultActions, expandedNodeGroups]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(NodeMetaContext.HvFlowNodeMetaProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(HvFlowContext.Provider, { value, children }) });
-};
-exports.HvFlowContext = HvFlowContext;
-exports.HvFlowProvider = HvFlowProvider;

package/dist/cjs/Flow/FlowContext/NodeMetaContext.cjs

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const HvFlowNodeMetaContext = react.createContext(void 0);
-const HvFlowNodeMetaProvider = ({
-  children
-}) => {
-  const registryRef = react.useRef({});
-  const registerNode = react.useCallback((id, nodeInfo) => {
-    registryRef.current[id] = nodeInfo;
-  }, []);
-  const unregisterNode = react.useCallback((id) => {
-    delete registryRef.current[id];
-  }, []);
-  const getRegistry = react.useCallback(() => {
-    return registryRef.current;
-  }, []);
-  const value = react.useMemo(
-    () => ({
-      registerNode,
-      unregisterNode,
-      getRegistry
-    }),
-    [registerNode, unregisterNode, getRegistry]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(HvFlowNodeMetaContext.Provider, { value, children });
-};
-function useNodeMetaRegistry() {
-  const context = react.useContext(HvFlowNodeMetaContext);
-  if (context === void 0) {
-    throw new Error(
-      "useNodeRegistry must be used within a HvFlowNodeMetaProvider"
-    );
-  }
-  return {
-    registerNode: context.registerNode,
-    unregisterNode: context.unregisterNode,
-    registry: context.getRegistry()
-  };
-}
-exports.HvFlowNodeMetaProvider = HvFlowNodeMetaProvider;
-exports.useNodeMetaRegistry = useNodeMetaRegistry;

package/dist/cjs/Flow/Minimap/Minimap.cjs

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const reactflow = require("reactflow");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const Minimap_styles = require("./Minimap.styles.cjs");
-const HvFlowMinimap = ({
-  nodeColor = "border",
-  maskColor = "borderSubtle",
-  maskStrokeColor = "borderSubtle",
-  nodeStrokeColor = "border",
-  classes: classesProp,
-  className,
-  ...others
-}) => {
-  const { classes, cx } = Minimap_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactflow.MiniMap,
-    {
-      className: cx(classes.root, className),
-      nodeColor: typeof nodeColor === "string" ? uikitStyles.getColor(nodeColor, "border") : nodeColor,
-      nodeStrokeColor: typeof nodeStrokeColor === "string" ? uikitStyles.getColor(nodeStrokeColor, "border") : nodeStrokeColor,
-      maskColor: uikitStyles.getColor(maskColor, "borderSubtle"),
-      maskStrokeColor: uikitStyles.getColor(maskStrokeColor, "borderSubtle"),
-      ...others
-    }
-  );
-};
-exports.flowMinimapClasses = Minimap_styles.staticClasses;
-exports.HvFlowMinimap = HvFlowMinimap;

package/dist/cjs/Flow/Minimap/Minimap.styles.cjs

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowMinimap", {
-  root: {
-    "&.react-flow__minimap": { backgroundColor: uikitReactCore.theme.colors.bgPage }
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Flow/Node/BaseNode.cjs

@@ -1,192 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const reactflow = require("reactflow");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const BaseNode_styles = require("./BaseNode.styles.cjs");
-const utils = require("./utils.cjs");
-const useNode = require("../hooks/useNode.cjs");
-const DEFAULT_LABELS = {
-  outputsTitle: "Outputs",
-  inputsTitle: "Inputs",
-  deleteActionLabel: "Delete",
-  duplicateActionLabel: "Duplicate"
-};
-const HvFlowBaseNode = ({
-  id,
-  title: titleProp,
-  headerItems,
-  icon: iconProp,
-  color: colorProp,
-  inputs: inputsProp,
-  outputs: outputsProp,
-  nodeActions: nodeActionsProp,
-  footer,
-  classes: classesProp,
-  labels: labelsProp,
-  className,
-  children
-}) => {
-  const {
-    toggleShowActions,
-    getNodeToolbarProps,
-    handleDefaultAction,
-    nodeActions,
-    title,
-    icon,
-    color,
-    iconColor,
-    inputEdges,
-    inputs,
-    outputEdges,
-    outputs,
-    node
-  } = useNode.useHvNode({
-    id,
-    title: titleProp,
-    inputs: inputsProp,
-    outputs: outputsProp,
-    icon: iconProp,
-    color: colorProp,
-    labels: labelsProp,
-    nodeActions: nodeActionsProp
-  });
-  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
-  const { classes, cx } = BaseNode_styles.useClasses(classesProp);
-  const renderOutput = (output) => {
-    const edgeConnected = utils.isConnected(id, "source", output.id, outputEdges);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactflow.Handle,
-        {
-          type: "source",
-          isConnectableEnd: false,
-          id: output.id,
-          position: reactflow.Position.Right,
-          className: cx(classes.handle, {
-            [classes.handleConnected]: edgeConnected
-          })
-        }
-      ),
-      output.isMandatory && !edgeConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory }),
-      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", children: output.label })
-    ] }, output.id);
-  };
-  const renderInput = (input) => {
-    const edgeConnected = utils.isConnected(id, "target", input.id, inputEdges);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactflow.Handle,
-        {
-          type: "target",
-          isConnectableStart: false,
-          id: input.id,
-          position: reactflow.Position.Left,
-          className: cx(classes.handle, {
-            [classes.handleConnected]: edgeConnected
-          })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", children: input.label }),
-      input.isMandatory && !edgeConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory })
-    ] }, input.id);
-  };
-  if (!node) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: uikitReactUtils.mergeStyles(void 0, {
-        "--node-color": color
-      }),
-      className: cx(
-        "nowheel",
-        // Disables the default canvas pan behaviour when scrolling inside the node
-        classes.root,
-        className
-      ),
-      onMouseEnter: toggleShowActions,
-      onMouseLeave: toggleShowActions,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactflow.NodeToolbar, { ...getNodeToolbarProps(), children: nodeActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
-          uikitReactCore.HvIconButton,
-          {
-            title: action.label,
-            onClick: () => handleDefaultAction(action),
-            children: utils.renderedIcon(action.icon)
-          },
-          action.id
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.headerContainer, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              style: uikitReactUtils.mergeStyles(void 0, {
-                "--icon-color": iconColor
-              }),
-              className: classes.titleContainer,
-              children: [
-                icon,
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  uikitReactCore.HvTypography,
-                  {
-                    component: "p",
-                    variant: "title4",
-                    className: classes.title,
-                    children: title
-                  }
-                )
-              ]
-            }
-          ),
-          headerItems && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex" }, children: headerItems })
-        ] }),
-        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.contentContainer, children }),
-        inputs && inputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: labels?.inputsTitle }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => {
-            if (!utils.isInputGroup(input)) return renderInput(input);
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: classes.inputGroupContainer,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", variant: "label", children: input.label }),
-                  input.inputs.map(
-                    (inp) => renderInput(inp)
-                  )
-                ]
-              },
-              `group${idx}`
-            );
-          }) })
-        ] }),
-        outputs && outputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: labels?.outputsTitle }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => {
-            if (!utils.isOutputGroup(output)) {
-              return renderOutput(output);
-            }
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: classes.outputGroupContainer,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", variant: "label", children: output.label }),
-                  output.outputs.map((out) => {
-                    return renderOutput(out);
-                  })
-                ]
-              },
-              `group${idx}`
-            );
-          }) })
-        ] }),
-        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.footerContainer, children: footer })
-      ]
-    }
-  );
-};
-exports.flowBaseNodeClasses = BaseNode_styles.staticClasses;
-exports.DEFAULT_LABELS = DEFAULT_LABELS;
-exports.HvFlowBaseNode = HvFlowBaseNode;