@hitachivantara/uikit-react-lab 5.8.2 → 5.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -60,6 +60,7 @@ const HvDroppableFlow = ({
60
60
  onConnect: onConnectProp,
61
61
  onNodesChange: onNodesChangeProp,
62
62
  onEdgesChange: onEdgesChangeProp,
63
+ defaultEdgeOptions: defaultEdgeOptionsProp,
63
64
  ...others
64
65
  }) => {
65
66
  const {
@@ -149,13 +150,15 @@ const HvDroppableFlow = ({
149
150
  return isValid;
150
151
  };
151
152
  const validEdges = validateEdges(edges, nodes, nodeTypes);
152
- return /* @__PURE__ */ jsxRuntime.jsx("div", { id: elementId, ref: setNodeRef, className: cx(classes.root, className), children: /* @__PURE__ */ jsxRuntime.jsx(ReactFlow__default.default, { nodes, edges: validEdges, nodeTypes, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, isValidConnection, defaultEdgeOptions: {
153
+ const defaultEdgeOptions = {
153
154
  markerEnd: {
154
155
  type: ReactFlow.MarkerType.ArrowClosed,
155
156
  height: 20,
156
157
  width: 20
157
- }
158
- }, ...others, children }) });
158
+ },
159
+ ...defaultEdgeOptionsProp
160
+ };
161
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { id: elementId, ref: setNodeRef, className: cx(classes.root, className), children: /* @__PURE__ */ jsxRuntime.jsx(ReactFlow__default.default, { nodes, edges: validEdges, nodeTypes, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, isValidConnection, defaultEdgeOptions, ...others, children }) });
159
162
  };
160
163
  exports.flowClasses = Flow_styles.staticClasses;
161
164
  exports.HvDroppableFlow = HvDroppableFlow;
@@ -1 +1 @@
1
- {"version":3,"file":"DroppableFlow.cjs","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n Connection,\n EdgeChange,\n NodeChange,\n ReactFlowProps,\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n useReactFlow,\n MarkerType,\n Edge,\n Node,\n} from \"reactflow\";\nimport \"reactflow/dist/style.css\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeTypes } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./FlowContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeData = any,\n NodeType extends string | undefined = string | undefined\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n /** Flow content: background, controls, and minimap. */\n children?: React.ReactNode;\n /** Flow nodes. */\n nodes?: Node<NodeData, NodeType>[];\n /** Flow edges. */\n edges?: Edge[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowClasses;\n /** Function called when the flow changes. Returns the updated nodes and edges. */\n onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdges = (\n edges: Edge[],\n nodes: Node[],\n nodeTypes: HvFlowNodeTypes<string> | undefined\n) => {\n if (edges) {\n const validEdges: Edge[] = [];\n\n edges.forEach((edge) => {\n if (!edge.sourceHandle || !edge.targetHandle) return [];\n\n const sourceNode = getNode(nodes, edge.source);\n const targetNode = getNode(nodes, edge.target);\n\n if (!sourceNode || !targetNode) return [];\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) return [];\n\n const output =\n nodeTypes?.[sourceType]?.meta?.outputs?.[edge.sourceHandle];\n const input = nodeTypes?.[targetType]?.meta?.inputs?.[edge.targetHandle];\n\n const sourceProvides = output?.provides || [];\n const targetAccepts = input?.accepts || [];\n\n let isValid = false;\n sourceProvides.forEach((s) => {\n targetAccepts.forEach((t) => {\n if (s === t) {\n isValid = true;\n }\n });\n });\n\n if (isValid) {\n validEdges.push(edge);\n }\n });\n\n return validEdges;\n }\n return [];\n};\n\nexport const HvDroppableFlow = ({\n id,\n className,\n children,\n onFlowChange,\n classes: classesProp,\n nodes: initialNodes = [],\n edges: initialEdges = [],\n onConnect: onConnectProp,\n onNodesChange: onNodesChangeProp,\n onEdgesChange: onEdgesChangeProp,\n ...others\n}: HvDroppableFlowProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvFlow\");\n\n const reactFlowInstance = useReactFlow();\n\n const { nodeTypes } = useFlowContext();\n\n const [nodes, setNodes] = useState(initialNodes);\n const [edges, setEdges] = useState(initialEdges);\n\n const { setNodeRef } = useDroppable({\n id: elementId,\n });\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n if (event.over && event.over.id === elementId) {\n const type = event.active.id.toString();\n\n // Converts the coordinates to the react flow coordinate system\n const position = reactFlowInstance.project({\n x: (event.active.data.current?.hvFlow?.x || 0) - event.over.rect.left,\n y: (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n });\n\n const newNode: Node = {\n id: uid(),\n position,\n data: {},\n type,\n };\n\n setNodes((nds) => nds.concat(newNode));\n }\n },\n [elementId, reactFlowInstance, setNodes]\n );\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n });\n\n const handleFlowChange = useCallback(\n (\n nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n ) => {\n // The new flow is returned if the user is not dragging nodes\n // This avoids triggering this handler too many times\n const isDragging = nds.find((node) => node.dragging);\n if (!isDragging) {\n onFlowChange?.(nds, eds);\n }\n },\n [onFlowChange]\n );\n\n const handleConnect = useCallback(\n (connection: Connection) => {\n const eds = addEdge(connection, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onConnectProp?.(connection);\n },\n [edges, handleFlowChange, nodes, onConnectProp]\n );\n\n const handleNodesChange = useCallback(\n (changes: NodeChange[]) => {\n const nds = applyNodeChanges(changes, nodes);\n setNodes(nds);\n\n handleFlowChange(nds, edges);\n onNodesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onNodesChangeProp]\n );\n\n const handleEdgesChange = useCallback(\n (changes: EdgeChange[]) => {\n const eds = applyEdgeChanges(changes, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onEdgesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onEdgesChangeProp]\n );\n\n const isValidConnection = (connection) => {\n const sourceNode = getNode(nodes, connection.source);\n const targetNode = getNode(nodes, connection.target);\n\n if (!sourceNode || !targetNode) {\n return false;\n }\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) {\n return false;\n }\n\n const inputs = nodeTypes?.[targetType]?.meta?.inputs || [];\n const outputs = nodeTypes?.[sourceType]?.meta?.outputs || [];\n\n const sourceProvides = outputs[connection.sourceHandle]?.provides || [];\n const targetAccepts = inputs[connection.targetHandle]?.accepts || [];\n\n let isValid = false;\n sourceProvides.forEach((s) => {\n targetAccepts.forEach((t) => {\n if (s === t) {\n isValid = true;\n }\n });\n });\n\n return isValid;\n };\n\n const validEdges = validateEdges(edges, nodes, nodeTypes);\n\n return (\n <div\n id={elementId}\n ref={setNodeRef}\n className={cx(classes.root, className)}\n >\n <ReactFlow\n nodes={nodes}\n edges={validEdges}\n nodeTypes={nodeTypes}\n onNodesChange={handleNodesChange}\n onEdgesChange={handleEdgesChange}\n onConnect={handleConnect}\n isValidConnection={isValidConnection}\n defaultEdgeOptions={{\n markerEnd: {\n type: MarkerType.ArrowClosed,\n height: 20,\n width: 20,\n },\n }}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdges","edges","nodeTypes","validEdges","forEach","edge","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","output","meta","outputs","input","inputs","sourceProvides","provides","targetAccepts","accepts","isValid","s","t","push","HvDroppableFlow","className","children","onFlowChange","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","toString","position","project","x","data","current","hvFlow","rect","left","y","top","newNode","uid","nds","concat","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","isValidConnection","jsx","root","ReactFlow","markerEnd","MarkerType","ArrowClosed","height","width"],"mappings":"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"}
1
+ {"version":3,"file":"DroppableFlow.cjs","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n Connection,\n EdgeChange,\n NodeChange,\n ReactFlowProps,\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n useReactFlow,\n MarkerType,\n Edge,\n Node,\n} from \"reactflow\";\nimport \"reactflow/dist/style.css\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeTypes } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./FlowContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeData = any,\n NodeType extends string | undefined = string | undefined\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n /** Flow content: background, controls, and minimap. */\n children?: React.ReactNode;\n /** Flow nodes. */\n nodes?: Node<NodeData, NodeType>[];\n /** Flow edges. */\n edges?: Edge[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowClasses;\n /** Function called when the flow changes. Returns the updated nodes and edges. */\n onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdges = (\n edges: Edge[],\n nodes: Node[],\n nodeTypes: HvFlowNodeTypes<string> | undefined\n) => {\n if (edges) {\n const validEdges: Edge[] = [];\n\n edges.forEach((edge) => {\n if (!edge.sourceHandle || !edge.targetHandle) return [];\n\n const sourceNode = getNode(nodes, edge.source);\n const targetNode = getNode(nodes, edge.target);\n\n if (!sourceNode || !targetNode) return [];\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) return [];\n\n const output =\n nodeTypes?.[sourceType]?.meta?.outputs?.[edge.sourceHandle];\n const input = nodeTypes?.[targetType]?.meta?.inputs?.[edge.targetHandle];\n\n const sourceProvides = output?.provides || [];\n const targetAccepts = input?.accepts || [];\n\n let isValid = false;\n sourceProvides.forEach((s) => {\n targetAccepts.forEach((t) => {\n if (s === t) {\n isValid = true;\n }\n });\n });\n\n if (isValid) {\n validEdges.push(edge);\n }\n });\n\n return validEdges;\n }\n return [];\n};\n\nexport const HvDroppableFlow = ({\n id,\n className,\n children,\n onFlowChange,\n classes: classesProp,\n nodes: initialNodes = [],\n edges: initialEdges = [],\n onConnect: onConnectProp,\n onNodesChange: onNodesChangeProp,\n onEdgesChange: onEdgesChangeProp,\n defaultEdgeOptions: defaultEdgeOptionsProp,\n ...others\n}: HvDroppableFlowProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvFlow\");\n\n const reactFlowInstance = useReactFlow();\n\n const { nodeTypes } = useFlowContext();\n\n const [nodes, setNodes] = useState(initialNodes);\n const [edges, setEdges] = useState(initialEdges);\n\n const { setNodeRef } = useDroppable({\n id: elementId,\n });\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n if (event.over && event.over.id === elementId) {\n const type = event.active.id.toString();\n\n // Converts the coordinates to the react flow coordinate system\n const position = reactFlowInstance.project({\n x: (event.active.data.current?.hvFlow?.x || 0) - event.over.rect.left,\n y: (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n });\n\n const newNode: Node = {\n id: uid(),\n position,\n data: {},\n type,\n };\n\n setNodes((nds) => nds.concat(newNode));\n }\n },\n [elementId, reactFlowInstance, setNodes]\n );\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n });\n\n const handleFlowChange = useCallback(\n (\n nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n ) => {\n // The new flow is returned if the user is not dragging nodes\n // This avoids triggering this handler too many times\n const isDragging = nds.find((node) => node.dragging);\n if (!isDragging) {\n onFlowChange?.(nds, eds);\n }\n },\n [onFlowChange]\n );\n\n const handleConnect = useCallback(\n (connection: Connection) => {\n const eds = addEdge(connection, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onConnectProp?.(connection);\n },\n [edges, handleFlowChange, nodes, onConnectProp]\n );\n\n const handleNodesChange = useCallback(\n (changes: NodeChange[]) => {\n const nds = applyNodeChanges(changes, nodes);\n setNodes(nds);\n\n handleFlowChange(nds, edges);\n onNodesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onNodesChangeProp]\n );\n\n const handleEdgesChange = useCallback(\n (changes: EdgeChange[]) => {\n const eds = applyEdgeChanges(changes, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onEdgesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onEdgesChangeProp]\n );\n\n const isValidConnection = (connection) => {\n const sourceNode = getNode(nodes, connection.source);\n const targetNode = getNode(nodes, connection.target);\n\n if (!sourceNode || !targetNode) {\n return false;\n }\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) {\n return false;\n }\n\n const inputs = nodeTypes?.[targetType]?.meta?.inputs || [];\n const outputs = nodeTypes?.[sourceType]?.meta?.outputs || [];\n\n const sourceProvides = outputs[connection.sourceHandle]?.provides || [];\n const targetAccepts = inputs[connection.targetHandle]?.accepts || [];\n\n let isValid = false;\n sourceProvides.forEach((s) => {\n targetAccepts.forEach((t) => {\n if (s === t) {\n isValid = true;\n }\n });\n });\n\n return isValid;\n };\n\n const validEdges = validateEdges(edges, nodes, nodeTypes);\n\n const defaultEdgeOptions = {\n markerEnd: {\n type: MarkerType.ArrowClosed,\n height: 20,\n width: 20,\n },\n ...defaultEdgeOptionsProp,\n };\n\n return (\n <div\n id={elementId}\n ref={setNodeRef}\n className={cx(classes.root, className)}\n >\n <ReactFlow\n nodes={nodes}\n edges={validEdges}\n nodeTypes={nodeTypes}\n onNodesChange={handleNodesChange}\n onEdgesChange={handleEdgesChange}\n onConnect={handleConnect}\n isValidConnection={isValidConnection}\n defaultEdgeOptions={defaultEdgeOptions}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdges","edges","nodeTypes","validEdges","forEach","edge","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","output","meta","outputs","input","inputs","sourceProvides","provides","targetAccepts","accepts","isValid","s","t","push","HvDroppableFlow","className","children","onFlowChange","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","toString","position","project","x","data","current","hvFlow","rect","left","y","top","newNode","uid","nds","concat","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","jsx","root","ReactFlow"],"mappings":"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"}
@@ -3,14 +3,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("@emotion/react/jsx-runtime");
4
4
  const uikitReactCore = require("@hitachivantara/uikit-react-core");
5
5
  const WizardContainer_styles = require("./WizardContainer.styles.cjs");
6
- const HvWizardContainer = ({
7
- classes: classesProp,
8
- className,
9
- children,
10
- handleClose,
11
- open,
12
- ...others
13
- }) => {
6
+ const HvWizardContainer = (props) => {
7
+ const {
8
+ classes: classesProp,
9
+ className,
10
+ children,
11
+ handleClose,
12
+ open,
13
+ ...others
14
+ } = uikitReactCore.useDefaultProps("HvWizardContainer", props);
14
15
  const {
15
16
  classes
16
17
  } = WizardContainer_styles.useClasses(classesProp);
@@ -1 +1 @@
1
- {"version":3,"file":"WizardContainer.cjs","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialog,\n HvDialogProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./WizardContainer.styles\";\n\nexport { staticClasses as wizardContainerClasses };\n\nexport type HvWizardContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContainerProps\n extends Omit<HvBaseProps, \"onClose\">,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = ({\n classes: classesProp,\n className,\n children,\n handleClose,\n open,\n ...others\n}: HvWizardContainerProps) => {\n const { classes } = useClasses(classesProp);\n\n return (\n <HvDialog\n classes={{\n closeButton: classes.closeButton,\n paper: classes.paper,\n }}\n className={classes.root}\n open={open}\n onClose={handleClose}\n maxWidth=\"lg\"\n {...others}\n >\n {children}\n </HvDialog>\n );\n};\n"],"names":["HvWizardContainer","classes","classesProp","className","children","handleClose","open","others","useClasses","jsx","HvDialog","closeButton","paper","root"],"mappings":";;;;;AA6BO,MAAMA,oBAAoBA,CAAC;AAAA,EAChCC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACmB,MAAM;AACtB,QAAA;AAAA,IAAEN;AAAAA,EAAAA,IAAYO,uBAAAA,WAAWN,WAAW;AAGxC,SAAAO,2BAAA,IAACC,2BACC,SAAS;AAAA,IACPC,aAAaV,QAAQU;AAAAA,IACrBC,OAAOX,QAAQW;AAAAA,EACjB,GACA,WAAWX,QAAQY,MACnB,MACA,SAASR,aACT,UAAS,MACLE,GAAAA,QAEHH,SACH,CAAA;AAEJ;;;"}
1
+ {"version":3,"file":"WizardContainer.cjs","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialog,\n HvDialogProps,\n useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./WizardContainer.styles\";\n\nexport { staticClasses as wizardContainerClasses };\n\nexport type HvWizardContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContainerProps\n extends Omit<HvBaseProps, \"onClose\">,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = (props: HvWizardContainerProps) => {\n const {\n classes: classesProp,\n className,\n children,\n handleClose,\n open,\n ...others\n } = useDefaultProps(\"HvWizardContainer\", props);\n const { classes } = useClasses(classesProp);\n\n return (\n <HvDialog\n classes={{\n closeButton: classes.closeButton,\n paper: classes.paper,\n }}\n className={classes.root}\n open={open}\n onClose={handleClose}\n maxWidth=\"lg\"\n {...others}\n >\n {children}\n </HvDialog>\n );\n};\n"],"names":["HvWizardContainer","props","classes","classesProp","className","children","handleClose","open","others","useDefaultProps","useClasses","jsx","HvDialog","closeButton","paper","root"],"mappings":";;;;;AA8BaA,MAAAA,oBAAoBA,CAACC,UAAkC;AAC5D,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,eAAgB,gBAAA,qBAAqBR,KAAK;AACxC,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAYQ,uBAAAA,WAAWP,WAAW;AAGxC,SAAAQ,2BAAA,IAACC,2BACC,SAAS;AAAA,IACPC,aAAaX,QAAQW;AAAAA,IACrBC,OAAOZ,QAAQY;AAAAA,EACjB,GACA,WAAWZ,QAAQa,MACnB,MACA,SAAST,aACT,UAAS,MACLE,GAAAA,QAEHH,SACH,CAAA;AAEJ;;;"}
@@ -1,6 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const uikitStyles = require("@hitachivantara/uikit-styles");
4
3
  const uikitReactCore = require("@hitachivantara/uikit-react-core");
5
4
  const {
6
5
  staticClasses,
@@ -10,7 +9,7 @@ const {
10
9
  paper: {
11
10
  width: "80%",
12
11
  maxWidth: "80%",
13
- maxHeight: `calc(100% - (2 * ${uikitStyles.theme.dialog.margin}))`
12
+ maxHeight: "calc(100% - (2 * 80px))"
14
13
  },
15
14
  closeButton: {
16
15
  display: "none"
@@ -1 +1 @@
1
- {"version":3,"file":"WizardContainer.styles.cjs","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvWizardContainer\",\n {\n root: {},\n paper: {\n width: \"80%\",\n maxWidth: \"80%\",\n maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`,\n },\n closeButton: {\n display: \"none\",\n },\n }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","paper","width","maxWidth","maxHeight","theme","dialog","margin","closeButton","display"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAC3C,qBACA;AAAA,EACEC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACLC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAY,oBAAmBC,YAAAA,MAAMC,OAAOC,MAAO;AAAA,EACrD;AAAA,EACAC,aAAa;AAAA,IACXC,SAAS;AAAA,EACX;AACF,CACF;;;"}
1
+ {"version":3,"file":"WizardContainer.styles.cjs","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvWizardContainer\",\n {\n root: {},\n paper: {\n width: \"80%\",\n maxWidth: \"80%\",\n maxHeight: \"calc(100% - (2 * 80px))\",\n },\n closeButton: {\n display: \"none\",\n },\n }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","paper","width","maxWidth","maxHeight","closeButton","display"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAC3C,qBACA;AAAA,EACEC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACLC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAW;AAAA,EACb;AAAA,EACAC,aAAa;AAAA,IACXC,SAAS;AAAA,EACX;AACF,CACF;;;"}
@@ -57,6 +57,7 @@ const HvDroppableFlow = ({
57
57
  onConnect: onConnectProp,
58
58
  onNodesChange: onNodesChangeProp,
59
59
  onEdgesChange: onEdgesChangeProp,
60
+ defaultEdgeOptions: defaultEdgeOptionsProp,
60
61
  ...others
61
62
  }) => {
62
63
  const {
@@ -146,13 +147,15 @@ const HvDroppableFlow = ({
146
147
  return isValid;
147
148
  };
148
149
  const validEdges = validateEdges(edges, nodes, nodeTypes);
149
- return /* @__PURE__ */ jsx("div", { id: elementId, ref: setNodeRef, className: cx(classes.root, className), children: /* @__PURE__ */ jsx(ReactFlow, { nodes, edges: validEdges, nodeTypes, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, isValidConnection, defaultEdgeOptions: {
150
+ const defaultEdgeOptions = {
150
151
  markerEnd: {
151
152
  type: MarkerType.ArrowClosed,
152
153
  height: 20,
153
154
  width: 20
154
- }
155
- }, ...others, children }) });
155
+ },
156
+ ...defaultEdgeOptionsProp
157
+ };
158
+ return /* @__PURE__ */ jsx("div", { id: elementId, ref: setNodeRef, className: cx(classes.root, className), children: /* @__PURE__ */ jsx(ReactFlow, { nodes, edges: validEdges, nodeTypes, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, isValidConnection, defaultEdgeOptions, ...others, children }) });
156
159
  };
157
160
  export {
158
161
  HvDroppableFlow,
@@ -1 +1 @@
1
- {"version":3,"file":"DroppableFlow.js","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n Connection,\n EdgeChange,\n NodeChange,\n ReactFlowProps,\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n useReactFlow,\n MarkerType,\n Edge,\n Node,\n} from \"reactflow\";\nimport \"reactflow/dist/style.css\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeTypes } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./FlowContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeData = any,\n NodeType extends string | undefined = string | undefined\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n /** Flow content: background, controls, and minimap. */\n children?: React.ReactNode;\n /** Flow nodes. */\n nodes?: Node<NodeData, NodeType>[];\n /** Flow edges. */\n edges?: Edge[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowClasses;\n /** Function called when the flow changes. Returns the updated nodes and edges. */\n onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdges = (\n edges: Edge[],\n nodes: Node[],\n nodeTypes: HvFlowNodeTypes<string> | undefined\n) => {\n if (edges) {\n const validEdges: Edge[] = [];\n\n edges.forEach((edge) => {\n if (!edge.sourceHandle || !edge.targetHandle) return [];\n\n const sourceNode = getNode(nodes, edge.source);\n const targetNode = getNode(nodes, edge.target);\n\n if (!sourceNode || !targetNode) return [];\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) return [];\n\n const output =\n nodeTypes?.[sourceType]?.meta?.outputs?.[edge.sourceHandle];\n const input = nodeTypes?.[targetType]?.meta?.inputs?.[edge.targetHandle];\n\n const sourceProvides = output?.provides || [];\n const targetAccepts = input?.accepts || [];\n\n let isValid = false;\n sourceProvides.forEach((s) => {\n targetAccepts.forEach((t) => {\n if (s === t) {\n isValid = true;\n }\n });\n });\n\n if (isValid) {\n validEdges.push(edge);\n }\n });\n\n return validEdges;\n }\n return [];\n};\n\nexport const HvDroppableFlow = ({\n id,\n className,\n children,\n onFlowChange,\n classes: classesProp,\n nodes: initialNodes = [],\n edges: initialEdges = [],\n onConnect: onConnectProp,\n onNodesChange: onNodesChangeProp,\n onEdgesChange: onEdgesChangeProp,\n ...others\n}: HvDroppableFlowProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvFlow\");\n\n const reactFlowInstance = useReactFlow();\n\n const { nodeTypes } = useFlowContext();\n\n const [nodes, setNodes] = useState(initialNodes);\n const [edges, setEdges] = useState(initialEdges);\n\n const { setNodeRef } = useDroppable({\n id: elementId,\n });\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n if (event.over && event.over.id === elementId) {\n const type = event.active.id.toString();\n\n // Converts the coordinates to the react flow coordinate system\n const position = reactFlowInstance.project({\n x: (event.active.data.current?.hvFlow?.x || 0) - event.over.rect.left,\n y: (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n });\n\n const newNode: Node = {\n id: uid(),\n position,\n data: {},\n type,\n };\n\n setNodes((nds) => nds.concat(newNode));\n }\n },\n [elementId, reactFlowInstance, setNodes]\n );\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n });\n\n const handleFlowChange = useCallback(\n (\n nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n ) => {\n // The new flow is returned if the user is not dragging nodes\n // This avoids triggering this handler too many times\n const isDragging = nds.find((node) => node.dragging);\n if (!isDragging) {\n onFlowChange?.(nds, eds);\n }\n },\n [onFlowChange]\n );\n\n const handleConnect = useCallback(\n (connection: Connection) => {\n const eds = addEdge(connection, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onConnectProp?.(connection);\n },\n [edges, handleFlowChange, nodes, onConnectProp]\n );\n\n const handleNodesChange = useCallback(\n (changes: NodeChange[]) => {\n const nds = applyNodeChanges(changes, nodes);\n setNodes(nds);\n\n handleFlowChange(nds, edges);\n onNodesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onNodesChangeProp]\n );\n\n const handleEdgesChange = useCallback(\n (changes: EdgeChange[]) => {\n const eds = applyEdgeChanges(changes, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onEdgesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onEdgesChangeProp]\n );\n\n const isValidConnection = (connection) => {\n const sourceNode = getNode(nodes, connection.source);\n const targetNode = getNode(nodes, connection.target);\n\n if (!sourceNode || !targetNode) {\n return false;\n }\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) {\n return false;\n }\n\n const inputs = nodeTypes?.[targetType]?.meta?.inputs || [];\n const outputs = nodeTypes?.[sourceType]?.meta?.outputs || [];\n\n const sourceProvides = outputs[connection.sourceHandle]?.provides || [];\n const targetAccepts = inputs[connection.targetHandle]?.accepts || [];\n\n let isValid = false;\n sourceProvides.forEach((s) => {\n targetAccepts.forEach((t) => {\n if (s === t) {\n isValid = true;\n }\n });\n });\n\n return isValid;\n };\n\n const validEdges = validateEdges(edges, nodes, nodeTypes);\n\n return (\n <div\n id={elementId}\n ref={setNodeRef}\n className={cx(classes.root, className)}\n >\n <ReactFlow\n nodes={nodes}\n edges={validEdges}\n nodeTypes={nodeTypes}\n onNodesChange={handleNodesChange}\n onEdgesChange={handleEdgesChange}\n onConnect={handleConnect}\n isValidConnection={isValidConnection}\n defaultEdgeOptions={{\n markerEnd: {\n type: MarkerType.ArrowClosed,\n height: 20,\n width: 20,\n },\n }}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdges","edges","nodeTypes","validEdges","forEach","edge","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","output","meta","outputs","input","inputs","sourceProvides","provides","targetAccepts","accepts","isValid","s","t","push","HvDroppableFlow","className","children","onFlowChange","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","toString","position","project","x","data","current","hvFlow","rect","left","y","top","newNode","uid","nds","concat","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","isValidConnection","root","markerEnd","MarkerType","ArrowClosed","height","width"],"mappings":"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"}
1
+ {"version":3,"file":"DroppableFlow.js","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n Connection,\n EdgeChange,\n NodeChange,\n ReactFlowProps,\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n useReactFlow,\n MarkerType,\n Edge,\n Node,\n} from \"reactflow\";\nimport \"reactflow/dist/style.css\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeTypes } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./FlowContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeData = any,\n NodeType extends string | undefined = string | undefined\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n /** Flow content: background, controls, and minimap. */\n children?: React.ReactNode;\n /** Flow nodes. */\n nodes?: Node<NodeData, NodeType>[];\n /** Flow edges. */\n edges?: Edge[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowClasses;\n /** Function called when the flow changes. Returns the updated nodes and edges. */\n onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdges = (\n edges: Edge[],\n nodes: Node[],\n nodeTypes: HvFlowNodeTypes<string> | undefined\n) => {\n if (edges) {\n const validEdges: Edge[] = [];\n\n edges.forEach((edge) => {\n if (!edge.sourceHandle || !edge.targetHandle) return [];\n\n const sourceNode = getNode(nodes, edge.source);\n const targetNode = getNode(nodes, edge.target);\n\n if (!sourceNode || !targetNode) return [];\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) return [];\n\n const output =\n nodeTypes?.[sourceType]?.meta?.outputs?.[edge.sourceHandle];\n const input = nodeTypes?.[targetType]?.meta?.inputs?.[edge.targetHandle];\n\n const sourceProvides = output?.provides || [];\n const targetAccepts = input?.accepts || [];\n\n let isValid = false;\n sourceProvides.forEach((s) => {\n targetAccepts.forEach((t) => {\n if (s === t) {\n isValid = true;\n }\n });\n });\n\n if (isValid) {\n validEdges.push(edge);\n }\n });\n\n return validEdges;\n }\n return [];\n};\n\nexport const HvDroppableFlow = ({\n id,\n className,\n children,\n onFlowChange,\n classes: classesProp,\n nodes: initialNodes = [],\n edges: initialEdges = [],\n onConnect: onConnectProp,\n onNodesChange: onNodesChangeProp,\n onEdgesChange: onEdgesChangeProp,\n defaultEdgeOptions: defaultEdgeOptionsProp,\n ...others\n}: HvDroppableFlowProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id, \"hvFlow\");\n\n const reactFlowInstance = useReactFlow();\n\n const { nodeTypes } = useFlowContext();\n\n const [nodes, setNodes] = useState(initialNodes);\n const [edges, setEdges] = useState(initialEdges);\n\n const { setNodeRef } = useDroppable({\n id: elementId,\n });\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n if (event.over && event.over.id === elementId) {\n const type = event.active.id.toString();\n\n // Converts the coordinates to the react flow coordinate system\n const position = reactFlowInstance.project({\n x: (event.active.data.current?.hvFlow?.x || 0) - event.over.rect.left,\n y: (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n });\n\n const newNode: Node = {\n id: uid(),\n position,\n data: {},\n type,\n };\n\n setNodes((nds) => nds.concat(newNode));\n }\n },\n [elementId, reactFlowInstance, setNodes]\n );\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n });\n\n const handleFlowChange = useCallback(\n (\n nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n ) => {\n // The new flow is returned if the user is not dragging nodes\n // This avoids triggering this handler too many times\n const isDragging = nds.find((node) => node.dragging);\n if (!isDragging) {\n onFlowChange?.(nds, eds);\n }\n },\n [onFlowChange]\n );\n\n const handleConnect = useCallback(\n (connection: Connection) => {\n const eds = addEdge(connection, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onConnectProp?.(connection);\n },\n [edges, handleFlowChange, nodes, onConnectProp]\n );\n\n const handleNodesChange = useCallback(\n (changes: NodeChange[]) => {\n const nds = applyNodeChanges(changes, nodes);\n setNodes(nds);\n\n handleFlowChange(nds, edges);\n onNodesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onNodesChangeProp]\n );\n\n const handleEdgesChange = useCallback(\n (changes: EdgeChange[]) => {\n const eds = applyEdgeChanges(changes, edges);\n setEdges(eds);\n\n handleFlowChange(nodes, eds);\n onEdgesChangeProp?.(changes);\n },\n [edges, handleFlowChange, nodes, onEdgesChangeProp]\n );\n\n const isValidConnection = (connection) => {\n const sourceNode = getNode(nodes, connection.source);\n const targetNode = getNode(nodes, connection.target);\n\n if (!sourceNode || !targetNode) {\n return false;\n }\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) {\n return false;\n }\n\n const inputs = nodeTypes?.[targetType]?.meta?.inputs || [];\n const outputs = nodeTypes?.[sourceType]?.meta?.outputs || [];\n\n const sourceProvides = outputs[connection.sourceHandle]?.provides || [];\n const targetAccepts = inputs[connection.targetHandle]?.accepts || [];\n\n let isValid = false;\n sourceProvides.forEach((s) => {\n targetAccepts.forEach((t) => {\n if (s === t) {\n isValid = true;\n }\n });\n });\n\n return isValid;\n };\n\n const validEdges = validateEdges(edges, nodes, nodeTypes);\n\n const defaultEdgeOptions = {\n markerEnd: {\n type: MarkerType.ArrowClosed,\n height: 20,\n width: 20,\n },\n ...defaultEdgeOptionsProp,\n };\n\n return (\n <div\n id={elementId}\n ref={setNodeRef}\n className={cx(classes.root, className)}\n >\n <ReactFlow\n nodes={nodes}\n edges={validEdges}\n nodeTypes={nodeTypes}\n onNodesChange={handleNodesChange}\n onEdgesChange={handleEdgesChange}\n onConnect={handleConnect}\n isValidConnection={isValidConnection}\n defaultEdgeOptions={defaultEdgeOptions}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdges","edges","nodeTypes","validEdges","forEach","edge","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","output","meta","outputs","input","inputs","sourceProvides","provides","targetAccepts","accepts","isValid","s","t","push","HvDroppableFlow","className","children","onFlowChange","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","toString","position","project","x","data","current","hvFlow","rect","left","y","top","newNode","uid","nds","concat","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","root"],"mappings":"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"}
@@ -1,15 +1,16 @@
1
1
  import { jsx } from "@emotion/react/jsx-runtime";
2
- import { HvDialog } from "@hitachivantara/uikit-react-core";
2
+ import { useDefaultProps, HvDialog } from "@hitachivantara/uikit-react-core";
3
3
  import { useClasses } from "./WizardContainer.styles.js";
4
4
  import { staticClasses } from "./WizardContainer.styles.js";
5
- const HvWizardContainer = ({
6
- classes: classesProp,
7
- className,
8
- children,
9
- handleClose,
10
- open,
11
- ...others
12
- }) => {
5
+ const HvWizardContainer = (props) => {
6
+ const {
7
+ classes: classesProp,
8
+ className,
9
+ children,
10
+ handleClose,
11
+ open,
12
+ ...others
13
+ } = useDefaultProps("HvWizardContainer", props);
13
14
  const {
14
15
  classes
15
16
  } = useClasses(classesProp);
@@ -1 +1 @@
1
- {"version":3,"file":"WizardContainer.js","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialog,\n HvDialogProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./WizardContainer.styles\";\n\nexport { staticClasses as wizardContainerClasses };\n\nexport type HvWizardContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContainerProps\n extends Omit<HvBaseProps, \"onClose\">,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = ({\n classes: classesProp,\n className,\n children,\n handleClose,\n open,\n ...others\n}: HvWizardContainerProps) => {\n const { classes } = useClasses(classesProp);\n\n return (\n <HvDialog\n classes={{\n closeButton: classes.closeButton,\n paper: classes.paper,\n }}\n className={classes.root}\n open={open}\n onClose={handleClose}\n maxWidth=\"lg\"\n {...others}\n >\n {children}\n </HvDialog>\n );\n};\n"],"names":["HvWizardContainer","classes","classesProp","className","children","handleClose","open","others","useClasses","closeButton","paper","root"],"mappings":";;;;AA6BO,MAAMA,oBAAoBA,CAAC;AAAA,EAChCC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACmB,MAAM;AACtB,QAAA;AAAA,IAAEN;AAAAA,EAAAA,IAAYO,WAAWN,WAAW;AAGxC,SAAA,oBAAC,YACC,SAAS;AAAA,IACPO,aAAaR,QAAQQ;AAAAA,IACrBC,OAAOT,QAAQS;AAAAA,EACjB,GACA,WAAWT,QAAQU,MACnB,MACA,SAASN,aACT,UAAS,MACLE,GAAAA,QAEHH,SACH,CAAA;AAEJ;"}
1
+ {"version":3,"file":"WizardContainer.js","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialog,\n HvDialogProps,\n useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./WizardContainer.styles\";\n\nexport { staticClasses as wizardContainerClasses };\n\nexport type HvWizardContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContainerProps\n extends Omit<HvBaseProps, \"onClose\">,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = (props: HvWizardContainerProps) => {\n const {\n classes: classesProp,\n className,\n children,\n handleClose,\n open,\n ...others\n } = useDefaultProps(\"HvWizardContainer\", props);\n const { classes } = useClasses(classesProp);\n\n return (\n <HvDialog\n classes={{\n closeButton: classes.closeButton,\n paper: classes.paper,\n }}\n className={classes.root}\n open={open}\n onClose={handleClose}\n maxWidth=\"lg\"\n {...others}\n >\n {children}\n </HvDialog>\n );\n};\n"],"names":["HvWizardContainer","props","classes","classesProp","className","children","handleClose","open","others","useDefaultProps","useClasses","closeButton","paper","root"],"mappings":";;;;AA8BaA,MAAAA,oBAAoBA,CAACC,UAAkC;AAC5D,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,qBAAqBR,KAAK;AACxC,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAYQ,WAAWP,WAAW;AAGxC,SAAA,oBAAC,YACC,SAAS;AAAA,IACPQ,aAAaT,QAAQS;AAAAA,IACrBC,OAAOV,QAAQU;AAAAA,EACjB,GACA,WAAWV,QAAQW,MACnB,MACA,SAASP,aACT,UAAS,MACLE,GAAAA,QAEHH,SACH,CAAA;AAEJ;"}
@@ -1,4 +1,3 @@
1
- import { theme } from "@hitachivantara/uikit-styles";
2
1
  import { createClasses } from "@hitachivantara/uikit-react-core";
3
2
  const {
4
3
  staticClasses,
@@ -8,7 +7,7 @@ const {
8
7
  paper: {
9
8
  width: "80%",
10
9
  maxWidth: "80%",
11
- maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`
10
+ maxHeight: "calc(100% - (2 * 80px))"
12
11
  },
13
12
  closeButton: {
14
13
  display: "none"
@@ -1 +1 @@
1
- {"version":3,"file":"WizardContainer.styles.js","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvWizardContainer\",\n {\n root: {},\n paper: {\n width: \"80%\",\n maxWidth: \"80%\",\n maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`,\n },\n closeButton: {\n display: \"none\",\n },\n }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","paper","width","maxWidth","maxHeight","theme","dialog","margin","closeButton","display"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,qBACA;AAAA,EACEC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACLC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAY,oBAAmBC,MAAMC,OAAOC,MAAO;AAAA,EACrD;AAAA,EACAC,aAAa;AAAA,IACXC,SAAS;AAAA,EACX;AACF,CACF;"}
1
+ {"version":3,"file":"WizardContainer.styles.js","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvWizardContainer\",\n {\n root: {},\n paper: {\n width: \"80%\",\n maxWidth: \"80%\",\n maxHeight: \"calc(100% - (2 * 80px))\",\n },\n closeButton: {\n display: \"none\",\n },\n }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","paper","width","maxWidth","maxHeight","closeButton","display"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,qBACA;AAAA,EACEC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACLC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAW;AAAA,EACb;AAAA,EACAC,aAAa;AAAA,IACXC,SAAS;AAAA,EACX;AACF,CACF;"}
@@ -358,7 +358,7 @@ export declare interface HvWizardActionsProps extends HvBaseProps {
358
358
 
359
359
  export declare type HvWizardClasses = ExtractNames<typeof useClasses_3>;
360
360
 
361
- export declare const HvWizardContainer: ({ classes: classesProp, className, children, handleClose, open, ...others }: HvWizardContainerProps) => JSX_2.Element;
361
+ export declare const HvWizardContainer: (props: HvWizardContainerProps) => JSX_2.Element;
362
362
 
363
363
  export declare type HvWizardContainerClasses = ExtractNames<typeof useClasses_6>;
364
364
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-lab",
3
- "version": "5.8.2",
3
+ "version": "5.10.0",
4
4
  "private": false,
5
5
  "author": "Hitachi Vantara UI Kit Team",
6
6
  "description": "Contributed React components for the NEXT UI Kit.",
@@ -32,9 +32,9 @@
32
32
  "@dnd-kit/core": "^6.0.8",
33
33
  "@dnd-kit/modifiers": "^6.0.1",
34
34
  "@emotion/css": "^11.11.0",
35
- "@hitachivantara/uikit-react-core": "^5.28.1",
36
- "@hitachivantara/uikit-react-icons": "^5.6.7",
37
- "@hitachivantara/uikit-styles": "^5.12.1",
35
+ "@hitachivantara/uikit-react-core": "^5.30.0",
36
+ "@hitachivantara/uikit-react-icons": "^5.6.8",
37
+ "@hitachivantara/uikit-styles": "^5.13.0",
38
38
  "lodash": "^4.17.21",
39
39
  "reactflow": "^11.8.3",
40
40
  "uid": "^2.0.2",
@@ -48,7 +48,7 @@
48
48
  "access": "public",
49
49
  "directory": "package"
50
50
  },
51
- "gitHead": "a7fe96ea482571129c5e93a203f78933fcb79306",
51
+ "gitHead": "5aea431bfac59583ef2aa50bb946ba9d7be6a6ba",
52
52
  "main": "dist/cjs/index.cjs",
53
53
  "exports": {
54
54
  ".": {