@hitachivantara/uikit-react-lab 5.31.2 → 5.32.1
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.
- package/dist/cjs/Blade/Blade.cjs.map +1 -1
- package/dist/cjs/Blades/Blades.cjs.map +1 -1
- package/dist/cjs/Dashboard/Dashboard.cjs +1 -1
- package/dist/cjs/Dashboard/Dashboard.cjs.map +1 -1
- package/dist/cjs/Flow/Background/Background.cjs.map +1 -1
- package/dist/cjs/Flow/Controls/Controls.cjs.map +1 -1
- package/dist/cjs/Flow/DroppableFlow.cjs +3 -3
- package/dist/cjs/Flow/DroppableFlow.cjs.map +1 -1
- package/dist/cjs/Flow/Flow.cjs.map +1 -1
- package/dist/cjs/Flow/FlowContext/FlowContext.cjs.map +1 -1
- package/dist/cjs/Flow/FlowContext/NodeMetaContext.cjs.map +1 -1
- package/dist/cjs/Flow/Minimap/Minimap.cjs.map +1 -1
- package/dist/cjs/Flow/Node/BaseNode.cjs +1 -1
- package/dist/cjs/Flow/Node/BaseNode.cjs.map +1 -1
- package/dist/cjs/Flow/Node/Node.cjs +1 -1
- package/dist/cjs/Flow/Node/Node.cjs.map +1 -1
- package/dist/cjs/Flow/Node/Node.styles.cjs.map +1 -1
- package/dist/cjs/Flow/Node/Parameters/ParamRenderer.cjs +1 -1
- package/dist/cjs/Flow/Node/Parameters/ParamRenderer.cjs.map +1 -1
- package/dist/cjs/Flow/Node/Parameters/Select.cjs.map +1 -1
- package/dist/cjs/Flow/Node/Parameters/Slider.cjs.map +1 -1
- package/dist/cjs/Flow/Node/Parameters/Text.cjs.map +1 -1
- package/dist/cjs/Flow/Node/utils.cjs.map +1 -1
- package/dist/cjs/Flow/Sidebar/Sidebar.cjs +1 -1
- package/dist/cjs/Flow/Sidebar/Sidebar.cjs.map +1 -1
- package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs +1 -1
- package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs.map +1 -1
- package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.cjs.map +1 -1
- package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs +1 -1
- package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs.map +1 -1
- package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs.map +1 -1
- package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.cjs.map +1 -1
- package/dist/cjs/Flow/Sidebar/utils.cjs +33 -30
- package/dist/cjs/Flow/Sidebar/utils.cjs.map +1 -1
- package/dist/cjs/Flow/hooks/useFlowInstance.cjs.map +1 -1
- package/dist/cjs/Flow/hooks/useFlowNode.cjs.map +1 -1
- package/dist/cjs/Flow/nodes/DashboardNode.styles.cjs.map +1 -1
- package/dist/cjs/StepNavigation/DefaultNavigation/DefaultNavigation.cjs.map +1 -1
- package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.cjs +1 -1
- package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.cjs.map +1 -1
- package/dist/cjs/StepNavigation/DefaultNavigation/utils.cjs.map +1 -1
- package/dist/cjs/StepNavigation/SimpleNavigation/Dot/Dot.cjs.map +1 -1
- package/dist/cjs/StepNavigation/SimpleNavigation/SimpleNavigation.cjs.map +1 -1
- package/dist/cjs/StepNavigation/StepNavigation.cjs +2 -2
- package/dist/cjs/StepNavigation/StepNavigation.cjs.map +1 -1
- package/dist/cjs/Wizard/Wizard.cjs.map +1 -1
- package/dist/cjs/Wizard/WizardActions/WizardActions.cjs.map +1 -1
- package/dist/cjs/Wizard/WizardActions/WizardActions.styles.cjs +1 -1
- package/dist/cjs/Wizard/WizardActions/WizardActions.styles.cjs.map +1 -1
- package/dist/cjs/Wizard/WizardContainer/WizardContainer.cjs.map +1 -1
- package/dist/cjs/Wizard/WizardContainer/WizardContainer.styles.cjs.map +1 -1
- package/dist/cjs/Wizard/WizardContent/WizardContent.cjs +13 -17
- package/dist/cjs/Wizard/WizardContent/WizardContent.cjs.map +1 -1
- package/dist/cjs/Wizard/WizardContent/WizardContent.styles.cjs +1 -1
- package/dist/cjs/Wizard/WizardContent/WizardContent.styles.cjs.map +1 -1
- package/dist/cjs/Wizard/WizardTitle/WizardTitle.cjs.map +1 -1
- package/dist/cjs/Wizard/WizardTitle/WizardTitle.styles.cjs +1 -1
- package/dist/cjs/Wizard/WizardTitle/WizardTitle.styles.cjs.map +1 -1
- package/dist/esm/Blade/Blade.js.map +1 -1
- package/dist/esm/Blades/Blades.js.map +1 -1
- package/dist/esm/Dashboard/Dashboard.js +1 -1
- package/dist/esm/Dashboard/Dashboard.js.map +1 -1
- package/dist/esm/Flow/Background/Background.js.map +1 -1
- package/dist/esm/Flow/Controls/Controls.js.map +1 -1
- package/dist/esm/Flow/DroppableFlow.js +3 -3
- package/dist/esm/Flow/DroppableFlow.js.map +1 -1
- package/dist/esm/Flow/Flow.js.map +1 -1
- package/dist/esm/Flow/FlowContext/FlowContext.js.map +1 -1
- package/dist/esm/Flow/FlowContext/NodeMetaContext.js.map +1 -1
- package/dist/esm/Flow/Minimap/Minimap.js.map +1 -1
- package/dist/esm/Flow/Node/BaseNode.js +1 -1
- package/dist/esm/Flow/Node/BaseNode.js.map +1 -1
- package/dist/esm/Flow/Node/Node.js +1 -1
- package/dist/esm/Flow/Node/Node.js.map +1 -1
- package/dist/esm/Flow/Node/Node.styles.js.map +1 -1
- package/dist/esm/Flow/Node/Parameters/ParamRenderer.js +1 -1
- package/dist/esm/Flow/Node/Parameters/ParamRenderer.js.map +1 -1
- package/dist/esm/Flow/Node/Parameters/Select.js.map +1 -1
- package/dist/esm/Flow/Node/Parameters/Slider.js.map +1 -1
- package/dist/esm/Flow/Node/Parameters/Text.js.map +1 -1
- package/dist/esm/Flow/Node/utils.js.map +1 -1
- package/dist/esm/Flow/Sidebar/Sidebar.js +1 -1
- package/dist/esm/Flow/Sidebar/Sidebar.js.map +1 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.js +1 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.js.map +1 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.js.map +1 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js +1 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js.map +1 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js.map +1 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js.map +1 -1
- package/dist/esm/Flow/Sidebar/utils.js +33 -30
- package/dist/esm/Flow/Sidebar/utils.js.map +1 -1
- package/dist/esm/Flow/hooks/useFlowInstance.js.map +1 -1
- package/dist/esm/Flow/hooks/useFlowNode.js.map +1 -1
- package/dist/esm/Flow/nodes/DashboardNode.styles.js.map +1 -1
- package/dist/esm/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -1
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.js +1 -1
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -1
- package/dist/esm/StepNavigation/DefaultNavigation/utils.js.map +1 -1
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/esm/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -1
- package/dist/esm/StepNavigation/StepNavigation.js +2 -2
- package/dist/esm/StepNavigation/StepNavigation.js.map +1 -1
- package/dist/esm/Wizard/Wizard.js.map +1 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.js.map +1 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.styles.js +1 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.styles.js.map +1 -1
- package/dist/esm/Wizard/WizardContainer/WizardContainer.js.map +1 -1
- package/dist/esm/Wizard/WizardContainer/WizardContainer.styles.js.map +1 -1
- package/dist/esm/Wizard/WizardContent/WizardContent.js +13 -17
- package/dist/esm/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/dist/esm/Wizard/WizardContent/WizardContent.styles.js +1 -1
- package/dist/esm/Wizard/WizardContent/WizardContent.styles.js.map +1 -1
- package/dist/esm/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/dist/esm/Wizard/WizardTitle/WizardTitle.styles.js +1 -1
- package/dist/esm/Wizard/WizardTitle/WizardTitle.styles.js.map +1 -1
- package/package.json +5 -5
- package/dist/cjs/Wizard/WizardContent/LoadingContainer.cjs +0 -39
- package/dist/cjs/Wizard/WizardContent/LoadingContainer.cjs.map +0 -1
- package/dist/cjs/Wizard/WizardContent/LoadingContainer.styles.cjs +0 -23
- package/dist/cjs/Wizard/WizardContent/LoadingContainer.styles.cjs.map +0 -1
- package/dist/esm/Wizard/WizardContent/LoadingContainer.js +0 -39
- package/dist/esm/Wizard/WizardContent/LoadingContainer.js.map +0 -1
- package/dist/esm/Wizard/WizardContent/LoadingContainer.styles.js +0 -23
- package/dist/esm/Wizard/WizardContent/LoadingContainer.styles.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flow.js","sources":["../../../src/Flow/Flow.tsx"],"sourcesContent":["import {\n DndContext,\n DndContextProps,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\
|
|
1
|
+
{"version":3,"file":"Flow.js","sources":["../../../src/Flow/Flow.tsx"],"sourcesContent":["import {\n DndContext,\n DndContextProps,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvFlowNodeAction, HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\n\nexport interface HvFlowProps<\n NodeGroups extends keyof any = string,\n NodeType extends string | undefined = string | undefined,\n NodeData = any,\n> extends HvDroppableFlowProps<NodeType, NodeData> {\n /** Flow nodes groups. */\n nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n /** Flow nodes types. */\n nodeTypes?: HvFlowNodeTypes<NodeGroups, NodeData>;\n /** Flow sidebar. */\n sidebar?: React.ReactNode;\n /** Flow default actions. */\n defaultActions?: HvFlowNodeAction[];\n /**\n * Dnd Kit context props. This should be used for accessibility purposes.\n *\n * More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n */\n dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/**\n * Flow component to build interactive node-based UIs.\n *\n * This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n *\n * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/lab-flow-usage--docs) to learn more about this component.\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n nodeTypes,\n nodeGroups,\n sidebar,\n defaultActions,\n dndContextProps,\n ...others\n}: HvFlowProps) => {\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor),\n );\n\n // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n // HvFlowContext is our custom internal context.\n return (\n <ReactFlowProvider>\n <HvFlowProvider\n nodeGroups={nodeGroups}\n nodeTypes={nodeTypes}\n defaultActions={defaultActions}\n >\n <DndContext\n sensors={sensors}\n modifiers={[restrictToWindowEdges]}\n {...dndContextProps}\n >\n <HvDroppableFlow {...others} />\n {sidebar}\n </DndContext>\n </HvFlowProvider>\n </ReactFlowProvider>\n );\n};\n"],"names":[],"mappings":";;;;;;AA8CO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,UAAU;AAAA,IACd,UAAU,aAAa;AAAA,IACvB,UAAU,cAAc;AAAA,EAAA;AAK1B,6BACG,mBACC,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,CAAC,qBAAqB;AAAA,UAChC,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAC,oBAAA,iBAAA,EAAiB,GAAG,QAAQ;AAAA,YAC5B;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowContext.js","sources":["../../../../src/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n
|
|
1
|
+
{"version":3,"file":"FlowContext.js","sources":["../../../../src/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n createContext,\n Dispatch,\n SetStateAction,\n useMemo,\n useState,\n} from \"react\";\n\nimport { HvFlowNodeAction, HvFlowNodeGroups, HvFlowNodeTypes } from \"../types\";\nimport { HvFlowNodeMetaProvider } from \"./NodeMetaContext\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n /** Flow nodes types. */\n nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n /** Flow nodes groups. */\n nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n /** Flow nodes groups expanded on sidebar. */\n expandedNodeGroups?: string[];\n /** Flow default actions. */\n defaultActions?: HvFlowNodeAction[];\n /** Function to set `expandedNodeGroups`. */\n setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n /** Flow nodes types. */\n nodeTypes?: HvFlowContextValue<NodeGroups>[\"nodeTypes\"];\n /** Flow nodes groups. */\n nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n /** Flow default actions. */\n defaultActions?: HvFlowNodeAction[];\n /** Children. */\n children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n nodeGroups,\n nodeTypes,\n defaultActions,\n children,\n}: HvFlowProviderProps) => {\n const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n const value = useMemo(\n () => ({\n nodeTypes,\n nodeGroups,\n defaultActions,\n expandedNodeGroups,\n setExpandedNodeGroups,\n }),\n [nodeTypes, nodeGroups, defaultActions, expandedNodeGroups],\n );\n\n return (\n <HvFlowNodeMetaProvider>\n <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n </HvFlowNodeMetaProvider>\n );\n};\n"],"names":[],"mappings":";;;AAwBa,MAAA,gBAAgB,cAAkC,EAAE;AAa1D,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAmB,CAAE,CAAA;AAEzE,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,WAAW,YAAY,gBAAgB,kBAAkB;AAAA,EAAA;AAI1D,SAAA,oBAAC,0BACC,UAAC,oBAAA,cAAc,UAAd,EAAuB,OAAe,SAAS,CAAA,EAClD,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodeMetaContext.js","sources":["../../../../src/Flow/FlowContext/NodeMetaContext.tsx"],"sourcesContent":["import { createContext,
|
|
1
|
+
{"version":3,"file":"NodeMetaContext.js","sources":["../../../../src/Flow/FlowContext/NodeMetaContext.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useMemo, useRef } from \"react\";\n\nimport { HvFlowNodeMeta } from \"../types\";\n\ninterface HvFlowNodeMetaContextType {\n registerNode: (id: string, nodeInfo: HvFlowNodeMeta) => void;\n unregisterNode: (id: string) => void;\n getRegistry: () => Record<string, HvFlowNodeMeta>;\n}\n\nconst HvFlowNodeMetaContext = createContext<\n HvFlowNodeMetaContextType | undefined\n>(undefined);\n\nexport const HvFlowNodeMetaProvider = ({\n children,\n}: {\n children: React.ReactNode;\n}) => {\n const registryRef = useRef<Record<string, HvFlowNodeMeta>>({});\n\n const registerNode = useCallback((id: string, nodeInfo: HvFlowNodeMeta) => {\n registryRef.current[id] = nodeInfo;\n }, []);\n\n const unregisterNode = useCallback((id: string) => {\n delete registryRef.current[id];\n }, []);\n\n const getRegistry = useCallback(() => {\n return registryRef.current;\n }, []);\n\n const value = useMemo<HvFlowNodeMetaContextType>(\n () => ({\n registerNode,\n unregisterNode,\n getRegistry,\n }),\n [registerNode, unregisterNode, getRegistry],\n );\n\n return (\n <HvFlowNodeMetaContext.Provider value={value}>\n {children}\n </HvFlowNodeMetaContext.Provider>\n );\n};\n\nexport function useNodeMetaRegistry() {\n const context = useContext(HvFlowNodeMetaContext);\n\n if (context === undefined) {\n throw new Error(\n \"useNodeRegistry must be used within a HvFlowNodeMetaProvider\",\n );\n }\n\n return {\n registerNode: context.registerNode,\n unregisterNode: context.unregisterNode,\n registry: context.getRegistry(),\n };\n}\n"],"names":[],"mappings":";;AAUA,MAAM,wBAAwB,cAE5B,MAAS;AAEJ,MAAM,yBAAyB,CAAC;AAAA,EACrC;AACF,MAEM;AACE,QAAA,cAAc,OAAuC,CAAA,CAAE;AAE7D,QAAM,eAAe,YAAY,CAAC,IAAY,aAA6B;AAC7D,gBAAA,QAAQ,EAAE,IAAI;AAAA,EAC5B,GAAG,CAAE,CAAA;AAEC,QAAA,iBAAiB,YAAY,CAAC,OAAe;AAC1C,WAAA,YAAY,QAAQ,EAAE;AAAA,EAC/B,GAAG,CAAE,CAAA;AAEC,QAAA,cAAc,YAAY,MAAM;AACpC,WAAO,YAAY;AAAA,EACrB,GAAG,CAAE,CAAA;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,cAAc,gBAAgB,WAAW;AAAA,EAAA;AAG5C,SACG,oBAAA,sBAAsB,UAAtB,EAA+B,OAC7B,SACH,CAAA;AAEJ;AAEO,SAAS,sBAAsB;AAC9B,QAAA,UAAU,WAAW,qBAAqB;AAEhD,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEO,SAAA;AAAA,IACL,cAAc,QAAQ;AAAA,IACtB,gBAAgB,QAAQ;AAAA,IACxB,UAAU,QAAQ,YAAY;AAAA,EAAA;AAElC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Minimap.js","sources":["../../../../src/Flow/Minimap/Minimap.tsx"],"sourcesContent":["import { GetMiniMapNodeAttribute, MiniMap, MiniMapProps } from \"reactflow\";\
|
|
1
|
+
{"version":3,"file":"Minimap.js","sources":["../../../../src/Flow/Minimap/Minimap.tsx"],"sourcesContent":["import { GetMiniMapNodeAttribute, MiniMap, MiniMapProps } from \"reactflow\";\nimport { ExtractNames } from \"@hitachivantara/uikit-react-core\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { staticClasses, useClasses } from \"./Minimap.styles\";\n\nexport { staticClasses as flowMinimapClasses };\n\nexport type HvFlowMinimapClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowMinimapProps<NodeData = any>\n extends Omit<\n MiniMapProps<NodeData>,\n \"nodeColor\" | \"nodeStrokeColor\" | \"maskColor\" | \"maskStrokeColor\"\n > {\n /** Node color. Defaults to `atmo4`. */\n nodeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;\n /** Node stroke color. Defaults to `atmo4`. */\n nodeStrokeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;\n /** Mask color. Defaults to `atmo3`. */\n maskColor?: HvColorAny;\n /** Mask stroke color. Defaults to `atmo3`. */\n maskStrokeColor?: HvColorAny;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowMinimapClasses;\n}\n\nexport const HvFlowMinimap = ({\n nodeColor = \"atmo4\",\n maskColor = \"atmo3\",\n maskStrokeColor = \"atmo3\",\n nodeStrokeColor = \"atmo4\",\n classes: classesProp,\n className,\n ...others\n}: HvFlowMinimapProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <MiniMap\n className={cx(classes.root, className)}\n nodeColor={\n typeof nodeColor === \"string\" ? getColor(nodeColor, \"atmo4\") : nodeColor\n }\n nodeStrokeColor={\n typeof nodeStrokeColor === \"string\"\n ? getColor(nodeStrokeColor, \"atmo4\")\n : nodeStrokeColor\n }\n maskColor={getColor(maskColor, \"atmo3\")}\n maskStrokeColor={getColor(maskStrokeColor, \"atmo3\")}\n {...others}\n />\n );\n};\n"],"names":[],"mappings":";;;;;AA2BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,WACE,OAAO,cAAc,WAAW,SAAS,WAAW,OAAO,IAAI;AAAA,MAEjE,iBACE,OAAO,oBAAoB,WACvB,SAAS,iBAAiB,OAAO,IACjC;AAAA,MAEN,WAAW,SAAS,WAAW,OAAO;AAAA,MACtC,iBAAiB,SAAS,iBAAiB,OAAO;AAAA,MACjD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -5,8 +5,8 @@ import { uid } from "uid";
|
|
|
5
5
|
import { useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
|
|
6
6
|
import { Delete, Duplicate } from "@hitachivantara/uikit-react-icons";
|
|
7
7
|
import { theme, getColor } from "@hitachivantara/uikit-styles";
|
|
8
|
-
import { useFlowNode, useFlowNodeInputEdges, useFlowNodeOutputEdges } from "../hooks/useFlowNode.js";
|
|
9
8
|
import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.js";
|
|
9
|
+
import { useFlowNode, useFlowNodeInputEdges, useFlowNodeOutputEdges } from "../hooks/useFlowNode.js";
|
|
10
10
|
import { useClasses } from "./BaseNode.styles.js";
|
|
11
11
|
import { staticClasses } from "./BaseNode.styles.js";
|
|
12
12
|
import { identifyHandles, renderedIcon, isInputGroup, isOutputGroup, isConnected } from "./utils.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import React, {\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport { uid } from \"uid\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvIconButton,\n HvTypography,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n HvFlowNodeAction,\n HvFlowNodeInput,\n HvFlowNodeOutput,\n HvFlowNodeOutputGroup,\n HvFlowNodeInputGroup,\n} from \"../types\";\nimport {\n useFlowNode,\n useFlowNodeInputEdges,\n useFlowNodeOutputEdges,\n} from \"../hooks/useFlowNode\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n identifyHandles,\n isConnected,\n isInputGroup,\n isOutputGroup,\n renderedIcon,\n} from \"./utils\";\nimport { useFlowInstance } from \"../hooks\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const DEFAULT_LABELS = {\n outputsTitle: \"Outputs\",\n inputsTitle: \"Inputs\",\n deleteActionLabel: \"Delete\",\n duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvFlowBaseNodeProps<T = any>\n extends Omit<HvBaseProps, \"id\">,\n NodeProps<T> {\n /** Header title */\n title?: string;\n /** Header icon */\n icon?: React.ReactNode;\n /** Header color */\n color?: HvColorAny;\n /** Header items */\n headerItems?: React.ReactNode;\n /** Node inputs */\n inputs?: (HvFlowNodeInput | HvFlowNodeInputGroup)[];\n /** Node outputs */\n outputs?: (HvFlowNodeOutput | HvFlowNodeOutputGroup)[];\n /** Node actions */\n nodeActions?: HvFlowNodeAction[];\n /** The content of the node footer */\n footer?: React.ReactNode;\n /** Labels used on the node. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n id,\n title,\n headerItems,\n icon,\n color: colorProp,\n inputs: inputsProp,\n outputs: outputsProp,\n nodeActions: nodeActionsProp,\n footer,\n classes: classesProp,\n labels: labelsProps,\n className,\n children,\n}: HvFlowBaseNodeProps<unknown>) => {\n const { registerNode, unregisterNode } = useNodeMetaRegistry();\n\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);\n\n const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);\n\n const nodeActions = useMemo(\n () =>\n nodeActionsProp || [\n { id: \"delete\", label: labels?.deleteActionLabel, icon: <Delete /> },\n {\n id: \"duplicate\",\n label: labels?.duplicateActionLabel,\n icon: <Duplicate />,\n },\n ],\n [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp]\n );\n\n useEffect(() => {\n registerNode(id, {\n label: title || \"\",\n inputs,\n outputs,\n });\n return () => unregisterNode(id);\n }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n const [showActions, setShowActions] = useState(false);\n const reactFlowInstance = useFlowInstance();\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const node = useFlowNode();\n const inputEdges = useFlowNodeInputEdges();\n const outputEdges = useFlowNodeOutputEdges();\n\n const handleDefaultAction = useCallback(\n (action: HvFlowNodeAction) => {\n if (!node) return;\n\n if (action.callback) {\n action.callback(node);\n return;\n }\n\n // built-in actions\n switch (action.id) {\n case \"delete\":\n reactFlowInstance.deleteElements({ nodes: [node] });\n break;\n case \"duplicate\":\n reactFlowInstance.addNodes([\n {\n ...node,\n id: uid(),\n position: {\n x: node.position.x,\n y: node.position.y + (node.height || 0) + 20,\n },\n selected: false,\n zIndex: Number(theme.zIndices.overlay),\n },\n ]);\n break;\n default:\n break;\n }\n },\n [node, reactFlowInstance]\n );\n\n const renderOutput = (output: HvFlowNodeOutput) => {\n const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n return (\n <div className={classes.outputContainer} key={output.id}>\n <Handle\n type=\"source\"\n isConnectableEnd={false}\n id={output.id}\n position={Position.Right}\n className={cx(classes.handle, {\n [classes.handleConnected]: edgeConnected,\n })}\n />\n {output.isMandatory && !edgeConnected && (\n <div className={classes.mandatory} />\n )}\n <HvTypography component=\"div\">{output.label}</HvTypography>\n </div>\n );\n };\n\n const renderInput = (input: HvFlowNodeInput) => {\n const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n return (\n <div className={classes.inputContainer} key={input.id}>\n <Handle\n type=\"target\"\n isConnectableStart={false}\n id={input.id}\n position={Position.Left}\n className={cx(classes.handle, {\n [classes.handleConnected]: edgeConnected,\n })}\n />\n <HvTypography component=\"div\">{input.label}</HvTypography>\n {input.isMandatory && !edgeConnected && (\n <div className={classes.mandatory} />\n )}\n </div>\n );\n };\n\n if (!node) return null;\n\n const color = getColor(colorProp);\n const iconColor = isValidElement(icon)\n ? getColor(icon.props.color || \"base_dark\")\n : getColor(\"base_dark\");\n\n return (\n <div\n className={cx(\n \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n css({ border: `1px solid ${color}` }),\n classes.root,\n className\n )}\n onMouseEnter={() => setShowActions(true)}\n onMouseLeave={() => setShowActions(false)}\n >\n <NodeToolbar isVisible={showActions} offset={0}>\n {nodeActions?.map((action) => (\n <HvIconButton\n key={action.id}\n title={action.label}\n onClick={() => handleDefaultAction(action)}\n >\n {renderedIcon(action.icon)}\n </HvIconButton>\n ))}\n </NodeToolbar>\n <div\n className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n >\n <div\n className={cx(\n classes.titleContainer,\n css({ \"& svg *.color0\": { fill: iconColor } })\n )}\n >\n {icon}\n <HvTypography\n component=\"p\"\n variant=\"title4\"\n className={classes.title}\n >\n {title}\n </HvTypography>\n </div>\n {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n </div>\n {children && <div className={classes.contentContainer}>{children}</div>}\n {inputs && inputs.length > 0 && (\n <>\n <div className={classes.inputsTitleContainer}>\n <HvTypography>{labels?.inputsTitle}</HvTypography>\n </div>\n <div className={classes.inputsContainer}>\n {inputs?.map((input, idx) => {\n if (!isInputGroup(input)) return renderInput(input);\n\n return (\n <div\n className={classes.inputGroupContainer}\n key={`group${idx}`}\n >\n <HvTypography component=\"div\" variant=\"label\">\n {input.label}\n </HvTypography>\n {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n renderInput(inp)\n )}\n </div>\n );\n })}\n </div>\n </>\n )}\n {outputs && outputs.length > 0 && (\n <>\n <div className={classes.outputsTitleContainer}>\n <HvTypography>{labels?.outputsTitle}</HvTypography>\n </div>\n <div className={classes.outputsContainer}>\n {outputs?.map((output, idx) => {\n if (!isOutputGroup(output)) {\n return renderOutput(output);\n }\n\n return (\n <div\n className={classes.outputGroupContainer}\n key={`group${idx}`}\n >\n <HvTypography component=\"div\" variant=\"label\">\n {output.label}\n </HvTypography>\n {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n return renderOutput(out);\n })}\n </div>\n );\n })}\n </div>\n </>\n )}\n {footer && <div className={classes.footerContainer}>{footer}</div>}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import React, {\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport { uid } from \"uid\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvIconButton,\n HvTypography,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { useFlowInstance } from \"../hooks\";\nimport {\n useFlowNode,\n useFlowNodeInputEdges,\n useFlowNodeOutputEdges,\n} from \"../hooks/useFlowNode\";\nimport {\n HvFlowNodeAction,\n HvFlowNodeInput,\n HvFlowNodeInputGroup,\n HvFlowNodeOutput,\n HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n identifyHandles,\n isConnected,\n isInputGroup,\n isOutputGroup,\n renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const DEFAULT_LABELS = {\n outputsTitle: \"Outputs\",\n inputsTitle: \"Inputs\",\n deleteActionLabel: \"Delete\",\n duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvFlowBaseNodeProps<T = any>\n extends Omit<HvBaseProps, \"id\">,\n NodeProps<T> {\n /** Header title */\n title?: string;\n /** Header icon */\n icon?: React.ReactNode;\n /** Header color */\n color?: HvColorAny;\n /** Header items */\n headerItems?: React.ReactNode;\n /** Node inputs */\n inputs?: (HvFlowNodeInput | HvFlowNodeInputGroup)[];\n /** Node outputs */\n outputs?: (HvFlowNodeOutput | HvFlowNodeOutputGroup)[];\n /** Node actions */\n nodeActions?: HvFlowNodeAction[];\n /** The content of the node footer */\n footer?: React.ReactNode;\n /** Labels used on the node. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n id,\n title,\n headerItems,\n icon,\n color: colorProp,\n inputs: inputsProp,\n outputs: outputsProp,\n nodeActions: nodeActionsProp,\n footer,\n classes: classesProp,\n labels: labelsProps,\n className,\n children,\n}: HvFlowBaseNodeProps<unknown>) => {\n const { registerNode, unregisterNode } = useNodeMetaRegistry();\n\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);\n\n const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);\n\n const nodeActions = useMemo(\n () =>\n nodeActionsProp || [\n { id: \"delete\", label: labels?.deleteActionLabel, icon: <Delete /> },\n {\n id: \"duplicate\",\n label: labels?.duplicateActionLabel,\n icon: <Duplicate />,\n },\n ],\n [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp],\n );\n\n useEffect(() => {\n registerNode(id, {\n label: title || \"\",\n inputs,\n outputs,\n });\n return () => unregisterNode(id);\n }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n const [showActions, setShowActions] = useState(false);\n const reactFlowInstance = useFlowInstance();\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const node = useFlowNode();\n const inputEdges = useFlowNodeInputEdges();\n const outputEdges = useFlowNodeOutputEdges();\n\n const handleDefaultAction = useCallback(\n (action: HvFlowNodeAction) => {\n if (!node) return;\n\n if (action.callback) {\n action.callback(node);\n return;\n }\n\n // built-in actions\n switch (action.id) {\n case \"delete\":\n reactFlowInstance.deleteElements({ nodes: [node] });\n break;\n case \"duplicate\":\n reactFlowInstance.addNodes([\n {\n ...node,\n id: uid(),\n position: {\n x: node.position.x,\n y: node.position.y + (node.height || 0) + 20,\n },\n selected: false,\n zIndex: Number(theme.zIndices.overlay),\n },\n ]);\n break;\n default:\n break;\n }\n },\n [node, reactFlowInstance],\n );\n\n const renderOutput = (output: HvFlowNodeOutput) => {\n const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n return (\n <div className={classes.outputContainer} key={output.id}>\n <Handle\n type=\"source\"\n isConnectableEnd={false}\n id={output.id}\n position={Position.Right}\n className={cx(classes.handle, {\n [classes.handleConnected]: edgeConnected,\n })}\n />\n {output.isMandatory && !edgeConnected && (\n <div className={classes.mandatory} />\n )}\n <HvTypography component=\"div\">{output.label}</HvTypography>\n </div>\n );\n };\n\n const renderInput = (input: HvFlowNodeInput) => {\n const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n return (\n <div className={classes.inputContainer} key={input.id}>\n <Handle\n type=\"target\"\n isConnectableStart={false}\n id={input.id}\n position={Position.Left}\n className={cx(classes.handle, {\n [classes.handleConnected]: edgeConnected,\n })}\n />\n <HvTypography component=\"div\">{input.label}</HvTypography>\n {input.isMandatory && !edgeConnected && (\n <div className={classes.mandatory} />\n )}\n </div>\n );\n };\n\n if (!node) return null;\n\n const color = getColor(colorProp);\n const iconColor = isValidElement(icon)\n ? getColor(icon.props.color || \"base_dark\")\n : getColor(\"base_dark\");\n\n return (\n <div\n className={cx(\n \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n css({ border: `1px solid ${color}` }),\n classes.root,\n className,\n )}\n onMouseEnter={() => setShowActions(true)}\n onMouseLeave={() => setShowActions(false)}\n >\n <NodeToolbar isVisible={showActions} offset={0}>\n {nodeActions?.map((action) => (\n <HvIconButton\n key={action.id}\n title={action.label}\n onClick={() => handleDefaultAction(action)}\n >\n {renderedIcon(action.icon)}\n </HvIconButton>\n ))}\n </NodeToolbar>\n <div\n className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n >\n <div\n className={cx(\n classes.titleContainer,\n css({ \"& svg *.color0\": { fill: iconColor } }),\n )}\n >\n {icon}\n <HvTypography\n component=\"p\"\n variant=\"title4\"\n className={classes.title}\n >\n {title}\n </HvTypography>\n </div>\n {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n </div>\n {children && <div className={classes.contentContainer}>{children}</div>}\n {inputs && inputs.length > 0 && (\n <>\n <div className={classes.inputsTitleContainer}>\n <HvTypography>{labels?.inputsTitle}</HvTypography>\n </div>\n <div className={classes.inputsContainer}>\n {inputs?.map((input, idx) => {\n if (!isInputGroup(input)) return renderInput(input);\n\n return (\n <div\n className={classes.inputGroupContainer}\n key={`group${idx}`}\n >\n <HvTypography component=\"div\" variant=\"label\">\n {input.label}\n </HvTypography>\n {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n renderInput(inp),\n )}\n </div>\n );\n })}\n </div>\n </>\n )}\n {outputs && outputs.length > 0 && (\n <>\n <div className={classes.outputsTitleContainer}>\n <HvTypography>{labels?.outputsTitle}</HvTypography>\n </div>\n <div className={classes.outputsContainer}>\n {outputs?.map((output, idx) => {\n if (!isOutputGroup(output)) {\n return renderOutput(output);\n }\n\n return (\n <div\n className={classes.outputGroupContainer}\n key={`group${idx}`}\n >\n <HvTypography component=\"div\" variant=\"label\">\n {output.label}\n </HvTypography>\n {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n return renderOutput(out);\n })}\n </div>\n );\n })}\n </div>\n </>\n )}\n {footer && <div className={classes.footerContainer}>{footer}</div>}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -2,9 +2,9 @@ import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
|
|
|
2
2
|
import { useState } from "react";
|
|
3
3
|
import { useLabels, HvTooltip, HvButton, HvTypography, HvActionsGeneric } from "@hitachivantara/uikit-react-core";
|
|
4
4
|
import { Info, Up, Down } from "@hitachivantara/uikit-react-icons";
|
|
5
|
+
import { HvFlowBaseNode } from "./BaseNode.js";
|
|
5
6
|
import { useClasses } from "./Node.styles.js";
|
|
6
7
|
import { staticClasses } from "./Node.styles.js";
|
|
7
|
-
import { HvFlowBaseNode } from "./BaseNode.js";
|
|
8
8
|
import { useFlowNode } from "../hooks/useFlowNode.js";
|
|
9
9
|
import { ParamRenderer } from "./Parameters/ParamRenderer.js";
|
|
10
10
|
import { useFlowContext } from "../hooks/useFlowContext.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n ExtractNames,\n HvActionsGeneric,\n HvActionsGenericProps,\n HvButton,\n HvButtonProps,\n HvTooltip,\n HvTypography,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeParam } from \"../types\";\nimport {
|
|
1
|
+
{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n ExtractNames,\n HvActionsGeneric,\n HvActionsGenericProps,\n HvButton,\n HvButtonProps,\n HvTooltip,\n HvTypography,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeParam } from \"../types\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport { ParamRenderer } from \"./Parameters\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowNodeDefaults = {\n title?: string;\n subTitle?: string;\n color?: string;\n icon?: React.ReactNode;\n};\n\nconst DEFAULT_LABELS = {\n collapseLabel: \"Collapse\",\n expandLabel: \"Expand\",\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n /** Node description. */\n description?: string;\n /** Node actions. */\n actions?: HvActionsGenericProps[\"actions\"];\n /**\n * Node action callback.\n *\n * @deprecated Use `onAction` instead.\n * */\n actionCallback?: HvActionsGenericProps[\"actionsCallback\"]; // TODO - remove in v6\n /** Node action callback. */\n onAction?: HvActionsGenericProps[\"onAction\"];\n /** Whether the actions should be all icon buttons when visible. @default true */\n actionsIconOnly?: HvActionsGenericProps[\"iconOnly\"];\n /** Node maximum number of actions visible. */\n maxVisibleActions?: HvActionsGenericProps[\"maxVisibleActions\"];\n /** Node expanded */\n expanded?: boolean;\n /** Node parameters */\n params?: HvFlowNodeParam[];\n /** A set of node default values for when there are no groups to fetch this data from. */\n nodeDefaults?: HvFlowNodeDefaults;\n /** Props to be passed to the expand parameters button. */\n expandParamsButtonProps?: HvButtonProps;\n /** Labels used on the node. */\n labels?: HvFlowBaseNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowNodeClasses;\n}\n\nexport const HvFlowNode = ({\n id,\n type,\n headerItems,\n description,\n actions,\n actionCallback, // TODO - remove in v6\n onAction,\n maxVisibleActions = 1,\n expanded = false,\n actionsIconOnly = true,\n params,\n nodeDefaults,\n classes: classesProp,\n labels: labelsProps,\n children,\n expandParamsButtonProps,\n ...props\n}: HvFlowNodeProps<unknown>) => {\n const { classes } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n const [showParams, setShowParams] = useState(expanded);\n\n const node = useFlowNode();\n\n const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n const groupId = nodeTypes?.[type].meta?.groupId;\n\n const group = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n const groupLabel = group?.label || nodeDefaults?.title;\n const icon = group?.icon || nodeDefaults?.icon;\n const color = group?.color || nodeDefaults?.color;\n\n const hasParams = !!(params && params.length > 0);\n\n return (\n <HvFlowBaseNode\n id={id}\n type={type}\n title={groupLabel}\n icon={icon}\n color={color}\n nodeActions={defaultActions}\n classes={classes}\n headerItems={\n <>\n {headerItems}\n {description && (\n <HvTooltip title={description}>\n <div>\n <Info role=\"none\" color=\"base_dark\" />\n </div>\n </HvTooltip>\n )}\n {hasParams && (\n <HvButton\n icon\n overrideIconColors={false}\n onClick={() => setShowParams((p) => !p)}\n aria-label={\n showParams ? labels?.collapseLabel : labels?.expandLabel\n }\n {...expandParamsButtonProps}\n >\n {showParams ? (\n <Up role=\"none\" color=\"base_dark\" />\n ) : (\n <Down role=\"none\" color=\"base_dark\" />\n )}\n </HvButton>\n )}\n </>\n }\n labels={labels as HvFlowNodeProps[\"labels\"]}\n {...props}\n >\n {(subtitle || actions) && (\n <div className={classes.subtitleContainer}>\n {subtitle && (\n <div>\n <HvTypography>{subtitle}</HvTypography>\n </div>\n )}\n {actions && (\n <HvActionsGeneric\n className={classes.actions}\n classes={{ button: classes.actionsButton }}\n actions={actions}\n actionsCallback={actionCallback}\n onAction={onAction}\n maxVisibleActions={maxVisibleActions}\n iconOnly={actionsIconOnly}\n />\n )}\n </div>\n )}\n {children}\n {showParams && params && (\n <div className={classes.paramsContainer}>\n <ParamRenderer params={params} data={node?.data} />\n </div>\n )}\n </HvFlowBaseNode>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA8BA,MAAM,iBAAiB;AAAA,EACrB,eAAe;AAAA,EACf,aAAa;AACf;AAiCO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,SAAS,UAAU,gBAAgB,WAAW;AAEpD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,QAAQ;AAErD,QAAM,OAAO;AAEb,QAAM,EAAE,YAAY,WAAW,mBAAmB,eAAe;AAEjE,QAAM,WAAW,YAAY,IAAI,EAAE,MAAM,SAAS,cAAc;AAChE,QAAM,UAAU,YAAY,IAAI,EAAE,MAAM;AAExC,QAAM,QAAS,WAAW,cAAc,WAAW,OAAO,KAAM;AAC1D,QAAA,aAAa,OAAO,SAAS,cAAc;AAC3C,QAAA,OAAO,OAAO,QAAQ,cAAc;AACpC,QAAA,QAAQ,OAAO,SAAS,cAAc;AAE5C,QAAM,YAAY,CAAC,EAAE,UAAU,OAAO,SAAS;AAG7C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,aAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAA;AAAA,QACA,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAC,oBAAA,OAAA,EACC,UAAC,oBAAA,MAAA,EAAK,MAAK,QAAO,OAAM,YAAA,CAAY,EACtC,CAAA,GACF;AAAA,QAED,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,oBAAoB;AAAA,YACpB,SAAS,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;AAAA,YACtC,cACE,aAAa,QAAQ,gBAAgB,QAAQ;AAAA,YAE9C,GAAG;AAAA,YAEH,UACC,aAAA,oBAAC,IAAG,EAAA,MAAK,QAAO,OAAM,YAAY,CAAA,IAEjC,oBAAA,MAAA,EAAK,MAAK,QAAO,OAAM,aAAY;AAAA,UAAA;AAAA,QAExC;AAAA,MAAA,GAEJ;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,YAAY,YACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,mBACrB,UAAA;AAAA,UAAA,YACE,oBAAA,OAAA,EACC,UAAC,oBAAA,cAAA,EAAc,mBAAS,CAAA,GAC1B;AAAA,UAED,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAS,EAAE,QAAQ,QAAQ,cAAc;AAAA,cACzC;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,cACA;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA,GAEJ;AAAA,QAED;AAAA,QACA,cAAc,UACZ,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA,oBAAC,eAAc,EAAA,QAAgB,MAAM,MAAM,KAAM,CAAA,GACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Node.styles.js","sources":["../../../../src/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses as baseNodeClasses } from \"./BaseNode.styles\";\n\nconst baseClasses = Object.fromEntries(\n Object.keys(baseNodeClasses).map((key) => [key, {}])
|
|
1
|
+
{"version":3,"file":"Node.styles.js","sources":["../../../../src/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses as baseNodeClasses } from \"./BaseNode.styles\";\n\nconst baseClasses = Object.fromEntries(\n Object.keys(baseNodeClasses).map((key) => [key, {}]),\n) as Record<keyof typeof baseNodeClasses, {}>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n subtitleContainer: {\n minHeight: 48,\n padding: theme.spacing(\n theme.space.xs,\n theme.space.xs,\n theme.space.xs,\n theme.space.sm,\n ),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n actions: {},\n actionsButton: {\n gap: 0,\n },\n paramsContainer: {\n borderTop: `1px solid ${theme.colors.atmo4}`,\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n padding: theme.space.sm,\n },\n // Spread here to know if we are overriding classes from parents\n ...baseClasses,\n});\n"],"names":["baseNodeClasses"],"mappings":";;AAIA,MAAM,cAAc,OAAO;AAAA,EACzB,OAAO,KAAKA,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA,CAAE,CAAC;AACrD;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,mBAAmB;AAAA,IACjB,WAAW;AAAA,IACX,SAAS,MAAM;AAAA,MACb,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,IACd;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,IACb,KAAK;AAAA,EACP;AAAA,EACA,iBAAiB;AAAA,IACf,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA;AAAA,EAEA,GAAG;AACL,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ParamRenderer.js","sources":["../../../../../src/Flow/Node/Parameters/ParamRenderer.tsx"],"sourcesContent":["import { HvFlowNodeParam } from \"../../types\";\nimport
|
|
1
|
+
{"version":3,"file":"ParamRenderer.js","sources":["../../../../../src/Flow/Node/Parameters/ParamRenderer.tsx"],"sourcesContent":["import { HvFlowNodeParam } from \"../../types\";\nimport Select from \"./Select\";\nimport Slider from \"./Slider\";\nimport Text from \"./Text\";\n\nexport type ParamRendererProps = {\n params: HvFlowNodeParam[];\n data: any;\n};\n\nconst renderers = {\n text: Text,\n select: Select,\n slider: Slider,\n};\n\nexport const ParamRenderer = ({ params, data }: ParamRendererProps) => {\n return (\n <>\n {params.map((param, idx) => {\n const Renderer = renderers[param.type];\n if (!Renderer) return null;\n\n return <Renderer key={idx} param={param} data={data} />;\n })}\n </>\n );\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,YAAY;AAAA,EAChB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AACV;AAEO,MAAM,gBAAgB,CAAC,EAAE,QAAQ,WAA+B;AACrE,SAEK,oBAAA,UAAA,EAAA,UAAA,OAAO,IAAI,CAAC,OAAO,QAAQ;AACpB,UAAA,WAAW,UAAU,MAAM,IAAI;AACrC,QAAI,CAAC;AAAiB,aAAA;AAEtB,WAAQ,oBAAA,UAAA,EAAmB,OAAc,KAAA,GAAnB,GAA+B;AAAA,EACtD,CAAA,EACH,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../../src/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../../src/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\n\nimport { useFlowNodeUtils } from \"../../hooks\";\nimport { HvFlowNodeSelectParam } from \"../../types\";\n\ninterface SelectProps {\n param: Omit<HvFlowNodeSelectParam, \"type\">;\n data: any;\n}\n\nconst Select = ({ param, data }: SelectProps) => {\n const { id, label, multiple = false, options } = param;\n const { setNodeData } = useFlowNodeUtils();\n\n const [opts, setOpts] = useState<string[] | undefined>(\n data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined,\n );\n\n const handleChange: HvDropdownProps[\"onChange\"] = (item) => {\n const newOpts = Array.isArray(item)\n ? item.map((x) => x.id as string)\n : (item?.id as string) ?? undefined;\n\n setNodeData((prev) => ({ ...prev, [id]: newOpts }));\n setOpts(\n newOpts ? (Array.isArray(newOpts) ? newOpts : [newOpts]) : undefined,\n );\n };\n\n return (\n <HvDropdown\n className=\"nodrag\" // Prevents dragging within the select field\n disablePortal\n label={label}\n values={options?.map((option) => {\n const optionId = typeof option === \"string\" ? option : option.id;\n const optionLabel = typeof option === \"string\" ? option : option.label;\n\n return {\n id: optionId,\n label: optionLabel,\n selected: !!opts?.find((opt) => opt === optionId),\n };\n })}\n onChange={handleChange}\n maxHeight={100}\n multiSelect={multiple}\n />\n );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;AAWA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AAC/C,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,QAAY,IAAA;AAC3C,QAAA,EAAE,gBAAgB;AAElB,QAAA,CAAC,MAAM,OAAO,IAAI;AAAA,IACtB,KAAK,EAAE,IAAK,MAAM,QAAQ,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAK;AAAA,EAAA;AAG3D,QAAA,eAA4C,CAAC,SAAS;AAC1D,UAAM,UAAU,MAAM,QAAQ,IAAI,IAC9B,KAAK,IAAI,CAAC,MAAM,EAAE,EAAY,IAC7B,MAAM,MAAiB;AAEhB,gBAAA,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,QAAU,EAAA;AAClD;AAAA,MACE,UAAW,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,IAAK;AAAA,IAAA;AAAA,EAC7D;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQ,SAAS,IAAI,CAAC,WAAW;AAC/B,cAAM,WAAW,OAAO,WAAW,WAAW,SAAS,OAAO;AAC9D,cAAM,cAAc,OAAO,WAAW,WAAW,SAAS,OAAO;AAE1D,eAAA;AAAA,UACL,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,QAAQ,QAAQ,QAAQ;AAAA,QAAA;AAAA,MAClD,CACD;AAAA,MACD,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EAAA;AAGnB;AAEA,MAAA,WAAe;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":["../../../../../src/Flow/Node/Parameters/Slider.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { HvSlider } from \"@hitachivantara/uikit-react-core\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../../../../../src/Flow/Node/Parameters/Slider.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { HvSlider } from \"@hitachivantara/uikit-react-core\";\n\nimport { useFlowNodeUtils } from \"../../hooks\";\nimport { HvFlowNodeSliderParam } from \"../../types\";\n\ninterface SliderProps {\n param: Omit<HvFlowNodeSliderParam, \"type\">;\n data: any;\n}\n\nconst classes = {\n labelContainer: css({\n marginRight: 0,\n marginLeft: 0,\n }),\n sliderBase: css({\n padding: 0,\n }),\n};\n\nconst Slider = ({ param, data }: SliderProps) => {\n const { id } = param;\n const { setNodeData } = useFlowNodeUtils();\n\n return (\n <HvSlider\n className=\"nodrag\" // Prevents dragging within the input field\n defaultValues={data[id]}\n onChange={(val) => setNodeData((prev) => ({ ...prev, [id]: val }))}\n classes={{\n labelContainer: classes.labelContainer,\n sliderBase: classes.sliderBase,\n }}\n {...param}\n />\n );\n};\n\nexport default Slider;\n"],"names":[],"mappings":";;;;AAWA,MAAM,UAAU;AAAA,EACd,gBAAgB,IAAI;AAAA,IAClB,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,CACb;AAAA,EACD,YAAY,IAAI;AAAA,IACd,SAAS;AAAA,EAAA,CACV;AACH;AAEA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AACzC,QAAA,EAAE,GAAO,IAAA;AACT,QAAA,EAAE,gBAAgB;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAe,KAAK,EAAE;AAAA,MACtB,UAAU,CAAC,QAAQ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM;AAAA,MACjE,SAAS;AAAA,QACP,gBAAgB,QAAQ;AAAA,QACxB,YAAY,QAAQ;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAA,WAAe;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../../../../../src/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { HvInput } from \"@hitachivantara/uikit-react-core\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../../../../src/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { HvInput } from \"@hitachivantara/uikit-react-core\";\n\nimport { useFlowNodeUtils } from \"../../hooks\";\nimport { HvFlowNodeTextParam } from \"../../types\";\n\ninterface TextProps {\n param: Omit<HvFlowNodeTextParam, \"type\">;\n data: any;\n}\n\nconst Text = ({ param, data }: TextProps) => {\n const { id, label } = param;\n const { setNodeData } = useFlowNodeUtils();\n\n return (\n <HvInput\n className=\"nodrag\" // Prevents dragging within the input field\n label={label}\n defaultValue={data[id]}\n onChange={(evt, val) => setNodeData((prev) => ({ ...prev, [id]: val }))}\n />\n );\n};\n\nexport default Text;\n"],"names":[],"mappings":";;;AAUA,MAAM,OAAO,CAAC,EAAE,OAAO,WAAsB;AACrC,QAAA,EAAE,IAAI,MAAU,IAAA;AAChB,QAAA,EAAE,gBAAgB;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,cAAc,KAAK,EAAE;AAAA,MACrB,UAAU,CAAC,KAAK,QAAQ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,IAAM,EAAA;AAAA,IAAA;AAAA,EAAA;AAG5E;AAEA,MAAA,SAAe;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../src/Flow/Node/utils.ts"],"sourcesContent":["import { isValidElement } from \"react\";\nimport { Edge } from \"reactflow\";\nimport { HvActionGeneric } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvFlowNodeInput,\n HvFlowNodeInputGroup,\n HvFlowNodeOutput,\n HvFlowNodeOutputGroup,\n} from \"../types\";\n\nexport const isInputGroup = (\n input: HvFlowNodeInput | HvFlowNodeInputGroup
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/Flow/Node/utils.ts"],"sourcesContent":["import { isValidElement } from \"react\";\nimport { Edge } from \"reactflow\";\nimport { HvActionGeneric } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvFlowNodeInput,\n HvFlowNodeInputGroup,\n HvFlowNodeOutput,\n HvFlowNodeOutputGroup,\n} from \"../types\";\n\nexport const isInputGroup = (\n input: HvFlowNodeInput | HvFlowNodeInputGroup,\n): input is HvFlowNodeInputGroup => {\n return \"inputs\" in input;\n};\n\nexport const isOutputGroup = (\n output: HvFlowNodeOutput | HvFlowNodeOutputGroup,\n): output is HvFlowNodeOutputGroup => {\n return \"outputs\" in output;\n};\n\nexport const isConnected = (\n id: string,\n type: \"target\" | \"source\",\n handleId: string,\n edges: Edge[],\n) => {\n if (type === \"target\") {\n return edges.some((e) => e.target === id && e.targetHandle === handleId);\n }\n if (type === \"source\") {\n return edges.some((e) => e.source === id && e.sourceHandle === handleId);\n }\n\n return false;\n};\n\nexport const renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const identifyHandles = (\n handles?:\n | (HvFlowNodeInput | HvFlowNodeInputGroup)[]\n | (HvFlowNodeOutput | HvFlowNodeOutputGroup)[],\n) => {\n let idx = 0;\n\n return handles?.map(\n (\n handle:\n | HvFlowNodeOutput\n | HvFlowNodeOutputGroup\n | HvFlowNodeInput\n | HvFlowNodeInputGroup,\n ) => {\n if (isInputGroup(handle)) {\n return {\n ...handle,\n inputs: handle.inputs.map((x) => {\n const identifiedHandle =\n x.id != null ? x : { ...x, id: String(idx) };\n idx += 1;\n return identifiedHandle;\n }),\n } satisfies HvFlowNodeInputGroup;\n }\n\n if (isOutputGroup(handle)) {\n return {\n ...handle,\n outputs: handle.outputs.map((x) => {\n const identifiedHandle =\n x.id != null ? x : { ...x, id: String(idx) };\n idx += 1;\n return identifiedHandle;\n }),\n } satisfies HvFlowNodeOutputGroup;\n }\n\n const identifiedHandle =\n handle.id != null ? handle : { ...handle, id: String(idx) };\n idx += 1;\n return identifiedHandle;\n },\n );\n};\n"],"names":["identifiedHandle"],"mappings":";AAWa,MAAA,eAAe,CAC1B,UACkC;AAClC,SAAO,YAAY;AACrB;AAEa,MAAA,gBAAgB,CAC3B,WACoC;AACpC,SAAO,aAAa;AACtB;AAEO,MAAM,cAAc,CACzB,IACA,MACA,UACA,UACG;AACH,MAAI,SAAS,UAAU;AACd,WAAA,MAAM,KAAK,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE,iBAAiB,QAAQ;AAAA,EACzE;AACA,MAAI,SAAS,UAAU;AACd,WAAA,MAAM,KAAK,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE,iBAAiB,QAAQ;AAAA,EACzE;AAEO,SAAA;AACT;AAEO,MAAM,eAAe,CAAC,eAC3B,eAAe,UAAU,IAAI,aAAc,aAA0B;AAE1D,MAAA,kBAAkB,CAC7B,YAGG;AACH,MAAI,MAAM;AAEV,SAAO,SAAS;AAAA,IACd,CACE,WAKG;AACC,UAAA,aAAa,MAAM,GAAG;AACjB,eAAA;AAAA,UACL,GAAG;AAAA,UACH,QAAQ,OAAO,OAAO,IAAI,CAAC,MAAM;AACzBA,kBAAAA,oBACJ,EAAE,MAAM,OAAO,IAAI,EAAE,GAAG,GAAG,IAAI,OAAO,GAAG,EAAE;AACtC,mBAAA;AACAA,mBAAAA;AAAAA,UAAA,CACR;AAAA,QAAA;AAAA,MAEL;AAEI,UAAA,cAAc,MAAM,GAAG;AAClB,eAAA;AAAA,UACL,GAAG;AAAA,UACH,SAAS,OAAO,QAAQ,IAAI,CAAC,MAAM;AAC3BA,kBAAAA,oBACJ,EAAE,MAAM,OAAO,IAAI,EAAE,GAAG,GAAG,IAAI,OAAO,GAAG,EAAE;AACtC,mBAAA;AACAA,mBAAAA;AAAAA,UAAA,CACR;AAAA,QAAA;AAAA,MAEL;AAEM,YAAA,mBACJ,OAAO,MAAM,OAAO,SAAS,EAAE,GAAG,QAAQ,IAAI,OAAO,GAAG,EAAE;AACrD,aAAA;AACA,aAAA;AAAA,IACT;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useMemo, useState, useEffect } from "react";
|
|
3
|
-
import { useDebounceCallback } from "usehooks-ts";
|
|
4
3
|
import { useDroppable, useDndMonitor, DragOverlay } from "@dnd-kit/core";
|
|
5
4
|
import { restrictToWindowEdges } from "@dnd-kit/modifiers";
|
|
5
|
+
import { useDebounceCallback } from "usehooks-ts";
|
|
6
6
|
import { useLabels, useUniqueId, HvDrawer, HvTypography, HvInput } from "@hitachivantara/uikit-react-core";
|
|
7
7
|
import { Add } from "@hitachivantara/uikit-react-icons";
|
|
8
8
|
import { useClasses } from "./Sidebar.styles.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sources":["../../../../src/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { useDebounceCallback } from \"usehooks-ts\";\nimport {\n DndContextProps,\n DragOverlay,\n DragOverlayProps,\n useDndMonitor,\n useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport {\n ExtractNames,\n HvDrawer,\n HvDrawerProps,\n HvInput,\n HvInputProps,\n HvTypography,\n useLabels,\n useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport { useFlowContext } from \"../hooks\";\nimport { buildGroups } from \"./utils\";\nimport {\n HvFlowDraggableSidebarGroupItem,\n HvFlowSidebarGroupItem,\n} from \"./SidebarGroup/SidebarGroupItem\";\nimport { HvFlowNodeGroup } from \"../types\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n /** Sidebar title. */\n title?: string;\n /** Sidebar description. */\n description?: string;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowSidebarClasses;\n /** Labels used on the sidebar. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /**\n * Dnd Kit drag overlay props for customization.\n *\n * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).\n */\n dragOverlayProps?: DragOverlayProps;\n /** Props to be applied to the default nodes group. */\n defaultGroupProps?: HvFlowNodeGroup;\n}\n\nconst DEFAULT_LABELS = {\n itemAriaRoleDescription: \"Draggable\",\n expandGroupButtonAriaLabel: \"Expand group\",\n searchPlaceholder: \"Search node...\",\n searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n id,\n title,\n description,\n anchor = \"right\",\n buttonTitle = \"Close\",\n classes: classesProp,\n labels: labelsProps,\n dragOverlayProps,\n defaultGroupProps,\n ...others\n}: HvFlowSidebarProps) => {\n const { classes } = useClasses(classesProp);\n\n const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n const unfilteredGroups = useMemo(\n () => buildGroups(nodeGroups, nodeTypes, defaultGroupProps),\n [nodeGroups, nodeTypes, defaultGroupProps]\n );\n\n const [groups, setGroups] = useState(unfilteredGroups);\n const [ndTypes, setNdTypes] = useState(nodeTypes);\n const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n useEffect(() => {\n setGroups(unfilteredGroups);\n }, [unfilteredGroups]);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n const drawerElementId = useUniqueId(id);\n const groupsElementId = useUniqueId(id);\n\n // The sidebar is droppable to distinguish between the canvas and the sidebar\n // Otherwise items dropped inside the sidebar will be added to the canvas\n const { setNodeRef } = useDroppable({\n id: drawerElementId,\n });\n\n const handleDragStart: DndContextProps[\"onDragStart\"] = (event) => {\n if (event.active.data.current?.hvFlow) {\n setDraggingLabel(event.active.data.current.hvFlow?.label);\n }\n };\n\n const handleDragEnd: DndContextProps[\"onDragEnd\"] = () => {\n setDraggingLabel(undefined);\n };\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n onDragStart: handleDragStart,\n });\n\n const handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n if (nodeGroups) {\n const gps = value\n ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n // Filter nodes by search\n const filteredNodes = curr[1].nodes.filter((obj) =>\n obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())\n );\n const nodesCount = filteredNodes.length;\n\n // Only show groups with nodes\n if (nodesCount > 0) {\n acc[curr[0]] = {\n ...curr[1],\n nodes: filteredNodes,\n };\n }\n\n return acc;\n }, {})\n : unfilteredGroups;\n\n setGroups(gps);\n setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n } else if (nodeTypes) {\n const filteredNodeTypes = {};\n for (const [key, node] of Object.entries(nodeTypes)) {\n if (\n node.meta?.label\n .toLocaleLowerCase()\n .includes(value.toLocaleLowerCase())\n ) {\n filteredNodeTypes[key] = node;\n }\n }\n setNdTypes(value ? filteredNodeTypes : nodeTypes);\n }\n };\n\n const handleDebouncedSearch = useDebounceCallback(handleSearch, 500);\n\n return (\n <HvDrawer\n BackdropComponent={undefined}\n variant=\"persistent\"\n classes={{\n paper: classes.drawerPaper,\n }}\n showBackdrop={false}\n anchor={anchor}\n buttonTitle={buttonTitle}\n {...others}\n >\n <div id={drawerElementId} ref={setNodeRef}>\n <div className={classes.titleContainer}>\n <Add role=\"none\" />\n <HvTypography component=\"p\" variant=\"title3\">\n {title}\n </HvTypography>\n </div>\n <div className={classes.contentContainer}>\n <HvTypography className={classes.description}>\n {description}\n </HvTypography>\n <HvInput\n className={classes.searchRoot}\n type=\"search\"\n placeholder={labels?.searchPlaceholder}\n aria-label={labels?.searchAriaLabel}\n aria-controls={groupsElementId}\n aria-owns={groupsElementId}\n onChange={handleDebouncedSearch}\n inputProps={{ autoComplete: \"off\" }}\n />\n {nodeGroups ? (\n <ul id={groupsElementId} className={classes.groupsContainer}>\n {Object.entries(groups).map((obj) => {\n return (\n <HvFlowSidebarGroup\n key={obj[0]}\n id={obj[0]}\n expandButtonProps={{\n \"aria-label\": labels?.expandGroupButtonAriaLabel,\n }}\n itemProps={{\n \"aria-roledescription\": labels?.itemAriaRoleDescription,\n }}\n {...obj[1]}\n />\n );\n })}\n </ul>\n ) : (\n ndTypes &&\n Object.entries(ndTypes).map((obj) => {\n return (\n <HvFlowDraggableSidebarGroupItem\n key={obj[0]}\n id={obj[0]}\n type={obj[0]}\n label={obj[1]?.meta?.label || \"\"}\n data={obj[1]?.meta?.data}\n aria-roledescription={labels?.itemAriaRoleDescription}\n className={classes.nodeType}\n />\n );\n })\n )}\n </div>\n </div>\n <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n {draggingLabel ? (\n <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n ) : null}\n </DragOverlay>\n </HvDrawer>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sources":["../../../../src/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport {\n DndContextProps,\n DragOverlay,\n DragOverlayProps,\n useDndMonitor,\n useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport { useDebounceCallback } from \"usehooks-ts\";\nimport {\n ExtractNames,\n HvDrawer,\n HvDrawerProps,\n HvInput,\n HvInputProps,\n HvTypography,\n useLabels,\n useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext } from \"../hooks\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport {\n HvFlowDraggableSidebarGroupItem,\n HvFlowSidebarGroupItem,\n} from \"./SidebarGroup/SidebarGroupItem\";\nimport { buildGroups } from \"./utils\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n /** Sidebar title. */\n title?: string;\n /** Sidebar description. */\n description?: string;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowSidebarClasses;\n /** Labels used on the sidebar. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /**\n * Dnd Kit drag overlay props for customization.\n *\n * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).\n */\n dragOverlayProps?: DragOverlayProps;\n /** Props to be applied to the default nodes group. */\n defaultGroupProps?: HvFlowNodeGroup;\n}\n\nconst DEFAULT_LABELS = {\n itemAriaRoleDescription: \"Draggable\",\n expandGroupButtonAriaLabel: \"Expand group\",\n searchPlaceholder: \"Search node...\",\n searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n id,\n title,\n description,\n anchor = \"right\",\n buttonTitle = \"Close\",\n classes: classesProp,\n labels: labelsProps,\n dragOverlayProps,\n defaultGroupProps,\n ...others\n}: HvFlowSidebarProps) => {\n const { classes } = useClasses(classesProp);\n\n const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n const unfilteredGroups = useMemo(\n () => buildGroups(nodeGroups, nodeTypes, defaultGroupProps),\n [nodeGroups, nodeTypes, defaultGroupProps],\n );\n\n const [groups, setGroups] = useState(unfilteredGroups);\n const [ndTypes, setNdTypes] = useState(nodeTypes);\n const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n useEffect(() => {\n setGroups(unfilteredGroups);\n }, [unfilteredGroups]);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n const drawerElementId = useUniqueId(id);\n const groupsElementId = useUniqueId(id);\n\n // The sidebar is droppable to distinguish between the canvas and the sidebar\n // Otherwise items dropped inside the sidebar will be added to the canvas\n const { setNodeRef } = useDroppable({\n id: drawerElementId,\n });\n\n const handleDragStart: DndContextProps[\"onDragStart\"] = (event) => {\n if (event.active.data.current?.hvFlow) {\n setDraggingLabel(event.active.data.current.hvFlow?.label);\n }\n };\n\n const handleDragEnd: DndContextProps[\"onDragEnd\"] = () => {\n setDraggingLabel(undefined);\n };\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n onDragStart: handleDragStart,\n });\n\n const handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n if (nodeGroups) {\n const gps = value\n ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n // Filter nodes by search\n const filteredNodes = curr[1].nodes.filter((obj) =>\n obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase()),\n );\n const nodesCount = filteredNodes.length;\n\n // Only show groups with nodes\n if (nodesCount > 0) {\n acc[curr[0]] = {\n ...curr[1],\n nodes: filteredNodes,\n };\n }\n\n return acc;\n }, {})\n : unfilteredGroups;\n\n setGroups(gps);\n setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n } else if (nodeTypes) {\n const filteredNodeTypes = {};\n for (const [key, node] of Object.entries(nodeTypes)) {\n if (\n node.meta?.label\n .toLocaleLowerCase()\n .includes(value.toLocaleLowerCase())\n ) {\n filteredNodeTypes[key] = node;\n }\n }\n setNdTypes(value ? filteredNodeTypes : nodeTypes);\n }\n };\n\n const handleDebouncedSearch = useDebounceCallback(handleSearch, 500);\n\n return (\n <HvDrawer\n BackdropComponent={undefined}\n variant=\"persistent\"\n classes={{\n paper: classes.drawerPaper,\n }}\n showBackdrop={false}\n anchor={anchor}\n buttonTitle={buttonTitle}\n {...others}\n >\n <div id={drawerElementId} ref={setNodeRef}>\n <div className={classes.titleContainer}>\n <Add role=\"none\" />\n <HvTypography component=\"p\" variant=\"title3\">\n {title}\n </HvTypography>\n </div>\n <div className={classes.contentContainer}>\n <HvTypography className={classes.description}>\n {description}\n </HvTypography>\n <HvInput\n className={classes.searchRoot}\n type=\"search\"\n placeholder={labels?.searchPlaceholder}\n aria-label={labels?.searchAriaLabel}\n aria-controls={groupsElementId}\n aria-owns={groupsElementId}\n onChange={handleDebouncedSearch}\n inputProps={{ autoComplete: \"off\" }}\n />\n {nodeGroups ? (\n <ul id={groupsElementId} className={classes.groupsContainer}>\n {Object.entries(groups).map((obj) => {\n return (\n <HvFlowSidebarGroup\n key={obj[0]}\n id={obj[0]}\n expandButtonProps={{\n \"aria-label\": labels?.expandGroupButtonAriaLabel,\n }}\n itemProps={{\n \"aria-roledescription\": labels?.itemAriaRoleDescription,\n }}\n {...obj[1]}\n />\n );\n })}\n </ul>\n ) : (\n ndTypes &&\n Object.entries(ndTypes).map((obj) => {\n return (\n <HvFlowDraggableSidebarGroupItem\n key={obj[0]}\n id={obj[0]}\n type={obj[0]}\n label={obj[1]?.meta?.label || \"\"}\n data={obj[1]?.meta?.data}\n aria-roledescription={labels?.itemAriaRoleDescription}\n className={classes.nodeType}\n />\n );\n })\n )}\n </div>\n </div>\n <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n {draggingLabel ? (\n <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n ) : null}\n </DragOverlay>\n </HvDrawer>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useMemo, useCallback } from "react";
|
|
3
|
-
import { Up, Down } from "@hitachivantara/uikit-react-icons";
|
|
4
3
|
import { HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
|
|
4
|
+
import { Up, Down } from "@hitachivantara/uikit-react-icons";
|
|
5
5
|
import { getColor } from "@hitachivantara/uikit-styles";
|
|
6
6
|
import { useClasses } from "./SidebarGroup.styles.js";
|
|
7
7
|
import { staticClasses } from "./SidebarGroup.styles.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarGroup.js","sources":["../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\
|
|
1
|
+
{"version":3,"file":"SidebarGroup.js","sources":["../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n ExtractNames,\n HvButton,\n HvButtonProps,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { useFlowContext } from \"../../hooks\";\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n HvFlowDraggableSidebarGroupItem,\n HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNode = {\n type: string;\n label: string;\n data?: unknown;\n};\n\nexport type HvFlowSidebarGroupNodes = HvFlowSidebarGroupNode[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n /** Group id. */\n id: string;\n /** Group nodes. */\n nodes: HvFlowSidebarGroupNodes;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowSidebarGroupClasses;\n /** Expand button props. */\n expandButtonProps?: HvButtonProps;\n /** Item group props. */\n itemProps?: Partial<HvFlowDraggableSidebarGroupItemProps>;\n}\n\nexport const HvFlowSidebarGroup = ({\n id,\n label,\n nodes,\n color,\n description,\n icon,\n expandButtonProps,\n classes: classesProp,\n itemProps,\n}: HvFlowSidebarGroupProps) => {\n const { classes, cx, css } = useClasses(classesProp);\n\n const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n const opened = useMemo(\n () => !!expandedNodeGroups?.find((groupId) => groupId === id),\n [expandedNodeGroups, id],\n );\n\n const handleClick = useCallback(() => {\n setExpandedNodeGroups?.((prev) =>\n opened ? prev.filter((groupId) => id !== groupId) : [...prev, id],\n );\n }, [id, opened, setExpandedNodeGroups]);\n\n return (\n <li className={cx(css({ borderColor: getColor(color) }), classes.root)}>\n <div className={classes.titleContainer}>\n <div className={classes.labelContainer}>\n <div className={classes.icon} role=\"none\">\n {icon}\n </div>\n <HvTypography component=\"p\" variant=\"title4\">\n {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n </HvTypography>\n </div>\n <HvButton\n icon\n onClick={handleClick}\n aria-expanded={opened}\n {...expandButtonProps}\n >\n {opened ? <Up role=\"none\" /> : <Down role=\"none\" />}\n </HvButton>\n </div>\n {description && (\n <div className={classes.descriptionContainer}>\n <HvTypography>{description}</HvTypography>\n </div>\n )}\n {opened && (\n <div className={classes.itemsContainer}>\n {nodes.map((obj) => (\n <HvFlowDraggableSidebarGroupItem\n key={obj.type}\n {...itemProps}\n {...obj}\n />\n ))}\n </div>\n )}\n </li>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AA2CO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,MAA+B;AAC7B,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,oBAAoB,sBAAsB,IAAI,eAAe;AAErE,QAAM,SAAS;AAAA,IACb,MAAM,CAAC,CAAC,oBAAoB,KAAK,CAAC,YAAY,YAAY,EAAE;AAAA,IAC5D,CAAC,oBAAoB,EAAE;AAAA,EAAA;AAGnB,QAAA,cAAc,YAAY,MAAM;AACpC;AAAA,MAAwB,CAAC,SACvB,SAAS,KAAK,OAAO,CAAC,YAAY,OAAO,OAAO,IAAI,CAAC,GAAG,MAAM,EAAE;AAAA,IAAA;AAAA,EAEjE,GAAA,CAAC,IAAI,QAAQ,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAW,GAAG,IAAI,EAAE,aAAa,SAAS,KAAK,EAAE,CAAC,GAAG,QAAQ,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAW,QAAQ,MAAM,MAAK,QAChC,UACH,MAAA;AAAA,QACC,oBAAA,cAAA,EAAa,WAAU,KAAI,SAAQ,UACjC,UAAA,MAAM,SAAS,IAAI,GAAG,KAAK,KAAK,MAAM,MAAM,MAAM,OACrD;AAAA,MAAA,GACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,SAAS;AAAA,UACT,iBAAe;AAAA,UACd,GAAG;AAAA,UAEH,UAAA,6BAAU,IAAG,EAAA,MAAK,QAAO,IAAK,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,QAAA;AAAA,MACnD;AAAA,IAAA,GACF;AAAA,IACC,mCACE,OAAI,EAAA,WAAW,QAAQ,sBACtB,UAAA,oBAAC,cAAc,EAAA,UAAA,YAAA,CAAY,EAC7B,CAAA;AAAA,IAED,8BACE,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA,MAAM,IAAI,CAAC,QACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAEE,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,MAFC,IAAI;AAAA,IAIZ,CAAA,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarGroup.styles.js","sources":["../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvFlowSidebarGroup\",\n {\n root: {\n padding: theme.space.sm,\n borderRadius: theme.radii.round,\n borderWidth: \"1px\",\n borderTopWidth: \"3px\",\n },\n titleContainer: {\n display: \"flex\",\n justifyContent: \"space-between\",\n },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n },\n icon: { paddingRight: theme.space.xs },\n descriptionContainer: {\n padding: `${theme.space.xs} 0 ${theme.space.sm} calc(32px + ${theme.space.xs})`,\n },\n itemsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n paddingLeft: theme.space.sm,\n },\n }
|
|
1
|
+
{"version":3,"file":"SidebarGroup.styles.js","sources":["../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvFlowSidebarGroup\",\n {\n root: {\n padding: theme.space.sm,\n borderRadius: theme.radii.round,\n borderWidth: \"1px\",\n borderTopWidth: \"3px\",\n },\n titleContainer: {\n display: \"flex\",\n justifyContent: \"space-between\",\n },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n },\n icon: { paddingRight: theme.space.xs },\n descriptionContainer: {\n padding: `${theme.space.xs} 0 ${theme.space.sm} calc(32px + ${theme.space.xs})`,\n },\n itemsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n paddingLeft: theme.space.sm,\n },\n },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS,MAAM,MAAM;AAAA,MACrB,cAAc,MAAM,MAAM;AAAA,MAC1B,aAAa;AAAA,MACb,gBAAgB;AAAA,IAClB;AAAA,IACA,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,gBAAgB;AAAA,IAClB;AAAA,IACA,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IACA,MAAM,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,IACrC,sBAAsB;AAAA,MACpB,SAAS,GAAG,MAAM,MAAM,EAAE,MAAM,MAAM,MAAM,EAAE,gBAAgB,MAAM,MAAM,EAAE;AAAA,IAC9E;AAAA,IACA,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,MAAM,MAAM;AAAA,MACjB,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,EACF;AACF;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useRef } from "react";
|
|
3
|
-
import { useForkRef } from "@mui/material/utils";
|
|
4
3
|
import { useDraggable } from "@dnd-kit/core";
|
|
4
|
+
import { useForkRef } from "@mui/material/utils";
|
|
5
5
|
import { useUniqueId } from "@hitachivantara/uikit-react-core";
|
|
6
6
|
import { HvFlowSidebarGroupItem } from "./SidebarGroupItem.js";
|
|
7
7
|
const HvFlowDraggableSidebarGroupItem = ({
|
package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\
|
|
1
|
+
{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { useDraggable } from \"@dnd-kit/core\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvFlowSidebarGroupItem,\n HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n extends HvFlowSidebarGroupItemProps {\n /** Item type. */\n type: string;\n /** Item data. */\n data?: unknown;\n}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n id,\n label,\n type,\n data,\n ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n const itemRef = useRef<HTMLElement>(null);\n const elementId = useUniqueId(id);\n\n const { attributes, listeners, setNodeRef, isDragging, transform } =\n useDraggable({\n id: elementId,\n data: {\n hvFlow: {\n // Needed to know which item is being dragged and dropped\n type,\n // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow\n label,\n // Item position: used to position the item when dropped\n x: itemRef.current?.getBoundingClientRect().x,\n y: itemRef.current?.getBoundingClientRect().y,\n // Data\n data,\n },\n },\n });\n\n const forkedRef = useForkRef(itemRef, setNodeRef);\n\n const style = transform\n ? {\n transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n }\n : undefined;\n\n return (\n <HvFlowSidebarGroupItem\n ref={forkedRef}\n style={style}\n label={label}\n isDragging={isDragging}\n {...listeners}\n {...attributes}\n {...others}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,kCAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4C;AACpC,QAAA,UAAU,OAAoB,IAAI;AAClC,QAAA,YAAY,YAAY,EAAE;AAEhC,QAAM,EAAE,YAAY,WAAW,YAAY,YAAY,cACrD,aAAa;AAAA,IACX,IAAI;AAAA,IACJ,MAAM;AAAA,MACJ,QAAQ;AAAA;AAAA,QAEN;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA,QAC5C,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA;AAAA,QAE5C;AAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AAEG,QAAA,YAAY,WAAW,SAAS,UAAU;AAEhD,QAAM,QAAQ,YACV;AAAA,IACE,WAAW,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,EAEzD,IAAA;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\
|
|
1
|
+
{"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Drag } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./SidebarGroupItem.styles\";\n\nexport { staticClasses as flowSidebarGroupItemClasses };\n\nexport type HvFlowSidebarGroupItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarGroupItemProps extends HvBaseProps {\n /** Item label. */\n label: string;\n /** Whether the item is being dragged. */\n isDragging?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowSidebarGroupItemClasses;\n}\n\nexport const HvFlowSidebarGroupItem = forwardRef<\n HTMLDivElement,\n HvFlowSidebarGroupItemProps\n>(\n (\n {\n label,\n isDragging,\n classes: classesProp,\n className,\n ...others\n }: HvFlowSidebarGroupItemProps,\n ref,\n ) => {\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <div\n ref={ref}\n className={cx(\n classes.root,\n { [classes.dragging]: isDragging },\n className,\n )}\n {...others}\n >\n <HvTypography>{label}</HvTypography>\n <Drag role=\"none\" />\n </div>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,yBAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,UACjC;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,gBAAc,UAAM,MAAA,CAAA;AAAA,UACrB,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxB;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarGroupItem.styles.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.tsx"],"sourcesContent":["import {\n createClasses,\n outlineStyles,\n theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvFlowSidebarGroupItem\",\n {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n border: `1px solid ${theme.colors.atmo4}`,\n padding: theme.spacing(0, 0, 0, \"sm\"),\n cursor: \"pointer\",\n boxShadow: `0 1px 0 ${theme.colors.shad1}`,\n\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n dragging: { borderColor: theme.colors.primary_80 },\n }
|
|
1
|
+
{"version":3,"file":"SidebarGroupItem.styles.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.tsx"],"sourcesContent":["import {\n createClasses,\n outlineStyles,\n theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvFlowSidebarGroupItem\",\n {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n border: `1px solid ${theme.colors.atmo4}`,\n padding: theme.spacing(0, 0, 0, \"sm\"),\n cursor: \"pointer\",\n boxShadow: `0 1px 0 ${theme.colors.shad1}`,\n\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n dragging: { borderColor: theme.colors.primary_80 },\n },\n);\n"],"names":[],"mappings":";AAMa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,MACvC,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,IAAI;AAAA,MACpC,QAAQ;AAAA,MACR,WAAW,WAAW,MAAM,OAAO,KAAK;AAAA,MAExC,mBAAmB;AAAA,QACjB,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,UAAU,EAAE,aAAa,MAAM,OAAO,WAAW;AAAA,EACnD;AACF;"}
|
|
@@ -1,39 +1,42 @@
|
|
|
1
1
|
const buildGroups = (nodeGroups, nodeTypes, defaultGroupProps) => {
|
|
2
2
|
if (!nodeGroups)
|
|
3
3
|
return {};
|
|
4
|
-
return Object.entries(nodeGroups).reduce(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
4
|
+
return Object.entries(nodeGroups).reduce(
|
|
5
|
+
(acc, curr) => {
|
|
6
|
+
const nodesWithGroupId = [];
|
|
7
|
+
const nodesWithoutGroupId = [];
|
|
8
|
+
if (nodeTypes) {
|
|
9
|
+
for (const [nodeType, node] of Object.entries(nodeTypes)) {
|
|
10
|
+
if (node.meta?.groupId === curr[0]) {
|
|
11
|
+
nodesWithGroupId.push({
|
|
12
|
+
type: nodeType,
|
|
13
|
+
label: node.meta?.label,
|
|
14
|
+
data: node.meta?.data
|
|
15
|
+
});
|
|
16
|
+
} else if (!node.meta?.groupId) {
|
|
17
|
+
nodesWithoutGroupId.push({
|
|
18
|
+
type: nodeType,
|
|
19
|
+
label: node.meta?.label || "",
|
|
20
|
+
data: node.meta?.data
|
|
21
|
+
});
|
|
22
|
+
}
|
|
21
23
|
}
|
|
22
24
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
nodes: nodesWithGroupId
|
|
27
|
-
};
|
|
28
|
-
if (nodesWithoutGroupId.length > 0) {
|
|
29
|
-
acc.Default = {
|
|
30
|
-
label: "Default",
|
|
31
|
-
nodes: nodesWithoutGroupId,
|
|
32
|
-
...defaultGroupProps
|
|
25
|
+
acc[curr[0]] = {
|
|
26
|
+
...curr[1],
|
|
27
|
+
nodes: nodesWithGroupId
|
|
33
28
|
};
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
if (nodesWithoutGroupId.length > 0) {
|
|
30
|
+
acc.Default = {
|
|
31
|
+
label: "Default",
|
|
32
|
+
nodes: nodesWithoutGroupId,
|
|
33
|
+
...defaultGroupProps
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
return acc;
|
|
37
|
+
},
|
|
38
|
+
{}
|
|
39
|
+
);
|
|
37
40
|
};
|
|
38
41
|
export {
|
|
39
42
|
buildGroups
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../src/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport {\n
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport {\n HvFlowSidebarGroupNode,\n HvFlowSidebarGroupNodes,\n} from \"./SidebarGroup\";\n\ntype NodeGroup = HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n\nexport const buildGroups = (\n nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n nodeTypes: HvFlowContextValue[\"nodeTypes\"],\n defaultGroupProps?: HvFlowNodeGroup,\n) => {\n if (!nodeGroups) return {};\n\n return Object.entries(nodeGroups).reduce(\n (acc, curr) => {\n const nodesWithGroupId: HvFlowSidebarGroupNode[] = [];\n const nodesWithoutGroupId: HvFlowSidebarGroupNode[] = [];\n\n if (nodeTypes) {\n for (const [nodeType, node] of Object.entries(nodeTypes)) {\n if (node.meta?.groupId === curr[0]) {\n nodesWithGroupId.push({\n type: nodeType,\n label: node.meta?.label,\n data: node.meta?.data,\n });\n } else if (!node.meta?.groupId) {\n nodesWithoutGroupId.push({\n type: nodeType,\n label: node.meta?.label || \"\",\n data: node.meta?.data,\n });\n }\n }\n }\n\n acc[curr[0]] = {\n ...curr[1],\n nodes: nodesWithGroupId,\n };\n\n // Create a \"Default\" group for nodes without a groupId\n if (nodesWithoutGroupId.length > 0) {\n acc.Default = {\n label: \"Default\",\n nodes: nodesWithoutGroupId,\n ...defaultGroupProps,\n };\n }\n\n return acc;\n },\n {} as Record<string, NodeGroup>,\n );\n};\n"],"names":[],"mappings":"AASO,MAAM,cAAc,CACzB,YACA,WACA,sBACG;AACH,MAAI,CAAC;AAAY,WAAO;AAEjB,SAAA,OAAO,QAAQ,UAAU,EAAE;AAAA,IAChC,CAAC,KAAK,SAAS;AACb,YAAM,mBAA6C,CAAA;AACnD,YAAM,sBAAgD,CAAA;AAEtD,UAAI,WAAW;AACb,mBAAW,CAAC,UAAU,IAAI,KAAK,OAAO,QAAQ,SAAS,GAAG;AACxD,cAAI,KAAK,MAAM,YAAY,KAAK,CAAC,GAAG;AAClC,6BAAiB,KAAK;AAAA,cACpB,MAAM;AAAA,cACN,OAAO,KAAK,MAAM;AAAA,cAClB,MAAM,KAAK,MAAM;AAAA,YAAA,CAClB;AAAA,UACQ,WAAA,CAAC,KAAK,MAAM,SAAS;AAC9B,gCAAoB,KAAK;AAAA,cACvB,MAAM;AAAA,cACN,OAAO,KAAK,MAAM,SAAS;AAAA,cAC3B,MAAM,KAAK,MAAM;AAAA,YAAA,CAClB;AAAA,UACH;AAAA,QACF;AAAA,MACF;AAEI,UAAA,KAAK,CAAC,CAAC,IAAI;AAAA,QACb,GAAG,KAAK,CAAC;AAAA,QACT,OAAO;AAAA,MAAA;AAIL,UAAA,oBAAoB,SAAS,GAAG;AAClC,YAAI,UAAU;AAAA,UACZ,OAAO;AAAA,UACP,OAAO;AAAA,UACP,GAAG;AAAA,QAAA;AAAA,MAEP;AAEO,aAAA;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EAAA;AAEL;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFlowInstance.js","sources":["../../../../src/Flow/hooks/useFlowInstance.ts"],"sourcesContent":["import { useReactFlow } from \"reactflow\";\n\nimport { HvFlowInstance } from \"../types\";\n\n/** Retrieves the React Flow instance */\nexport function useFlowInstance<\n NodeData = any,\n EdgeData = any
|
|
1
|
+
{"version":3,"file":"useFlowInstance.js","sources":["../../../../src/Flow/hooks/useFlowInstance.ts"],"sourcesContent":["import { useReactFlow } from \"reactflow\";\n\nimport { HvFlowInstance } from \"../types\";\n\n/** Retrieves the React Flow instance */\nexport function useFlowInstance<\n NodeData = any,\n EdgeData = any,\n>(): HvFlowInstance<NodeData, EdgeData> {\n return useReactFlow<NodeData, EdgeData>();\n}\n"],"names":[],"mappings":";AAKO,SAAS,kBAGwB;AACtC,SAAO,aAAiC;AAC1C;"}
|