@hitachivantara/uikit-react-lab 5.22.1 → 5.23.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.
- package/dist/cjs/Blade/Blade.cjs +169 -0
- package/dist/cjs/Blade/Blade.cjs.map +1 -0
- package/dist/cjs/Blade/Blade.styles.cjs +72 -0
- package/dist/cjs/Blade/Blade.styles.cjs.map +1 -0
- package/dist/cjs/Blades/Blades.cjs +105 -0
- package/dist/cjs/Blades/Blades.cjs.map +1 -0
- package/dist/cjs/Blades/Blades.styles.cjs +12 -0
- package/dist/cjs/Blades/Blades.styles.cjs.map +1 -0
- package/dist/cjs/Flow/Node/Parameters/Select.cjs +11 -11
- package/dist/cjs/Flow/Node/Parameters/Select.cjs.map +1 -1
- package/dist/cjs/Flow/Node/Parameters/Slider.cjs +8 -8
- package/dist/cjs/Flow/Node/Parameters/Slider.cjs.map +1 -1
- package/dist/cjs/Flow/Node/Parameters/Text.cjs +8 -8
- package/dist/cjs/Flow/Node/Parameters/Text.cjs.map +1 -1
- package/dist/cjs/Flow/nodes/DashboardNode.cjs +1 -3
- package/dist/cjs/Flow/nodes/DashboardNode.cjs.map +1 -1
- package/dist/cjs/index.cjs +8 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/Blade/Blade.js +168 -0
- package/dist/esm/Blade/Blade.js.map +1 -0
- package/dist/esm/Blade/Blade.styles.js +72 -0
- package/dist/esm/Blade/Blade.styles.js.map +1 -0
- package/dist/esm/Blades/Blades.js +106 -0
- package/dist/esm/Blades/Blades.js.map +1 -0
- package/dist/esm/Blades/Blades.styles.js +12 -0
- package/dist/esm/Blades/Blades.styles.js.map +1 -0
- package/dist/esm/Dashboard/{Dashboard.mjs → Dashboard.js} +3 -3
- package/dist/esm/Dashboard/Dashboard.js.map +1 -0
- package/dist/esm/Dashboard/{Dashboard.styles.mjs → Dashboard.styles.js} +1 -1
- package/dist/esm/Dashboard/Dashboard.styles.js.map +1 -0
- package/dist/esm/Flow/Background/{Background.mjs → Background.js} +1 -1
- package/dist/esm/Flow/Background/Background.js.map +1 -0
- package/dist/esm/Flow/Controls/{Controls.mjs → Controls.js} +1 -1
- package/dist/esm/Flow/Controls/Controls.js.map +1 -0
- package/dist/esm/Flow/{DroppableFlow.mjs → DroppableFlow.js} +6 -6
- package/dist/esm/Flow/DroppableFlow.js.map +1 -0
- package/dist/esm/Flow/Empty/{Empty.mjs → Empty.js} +2 -2
- package/dist/esm/Flow/Empty/Empty.js.map +1 -0
- package/dist/esm/Flow/Empty/{Empty.styles.mjs → Empty.styles.js} +1 -1
- package/dist/esm/Flow/Empty/Empty.styles.js.map +1 -0
- package/dist/esm/Flow/{Flow.mjs → Flow.js} +3 -3
- package/dist/esm/Flow/Flow.js.map +1 -0
- package/dist/esm/Flow/{Flow.styles.mjs → Flow.styles.js} +2 -2
- package/dist/esm/Flow/Flow.styles.js.map +1 -0
- package/dist/esm/Flow/FlowContext/{FlowContext.mjs → FlowContext.js} +2 -2
- package/dist/esm/Flow/FlowContext/FlowContext.js.map +1 -0
- package/dist/esm/Flow/FlowContext/{NodeMetaContext.mjs → NodeMetaContext.js} +1 -1
- package/dist/esm/Flow/FlowContext/NodeMetaContext.js.map +1 -0
- package/dist/esm/Flow/Minimap/{Minimap.mjs → Minimap.js} +3 -3
- package/dist/esm/Flow/Minimap/Minimap.js.map +1 -0
- package/dist/esm/Flow/Minimap/{Minimap.styles.mjs → Minimap.styles.js} +1 -1
- package/dist/esm/Flow/Minimap/Minimap.styles.js.map +1 -0
- package/dist/esm/Flow/Node/{BaseNode.mjs → BaseNode.js} +5 -5
- package/dist/esm/Flow/Node/BaseNode.js.map +1 -0
- package/dist/esm/Flow/Node/{BaseNode.styles.mjs → BaseNode.styles.js} +1 -1
- package/dist/esm/Flow/Node/BaseNode.styles.js.map +1 -0
- package/dist/esm/Flow/Node/{Node.mjs → Node.js} +7 -7
- package/dist/esm/Flow/Node/Node.js.map +1 -0
- package/dist/esm/Flow/Node/{Node.styles.mjs → Node.styles.js} +1 -1
- package/dist/esm/Flow/Node/Node.styles.js.map +1 -0
- package/dist/esm/Flow/Node/Parameters/{ParamRenderer.mjs → ParamRenderer.js} +4 -4
- package/dist/esm/Flow/Node/Parameters/ParamRenderer.js.map +1 -0
- package/dist/esm/Flow/Node/Parameters/{Select.mjs → Select.js} +12 -12
- package/dist/esm/Flow/Node/Parameters/Select.js.map +1 -0
- package/dist/esm/Flow/Node/Parameters/{Slider.mjs → Slider.js} +9 -9
- package/dist/esm/Flow/Node/Parameters/Slider.js.map +1 -0
- package/dist/esm/Flow/Node/Parameters/{Text.mjs → Text.js} +9 -9
- package/dist/esm/Flow/Node/Parameters/Text.js.map +1 -0
- package/dist/esm/Flow/Sidebar/{Sidebar.mjs → Sidebar.js} +8 -8
- package/dist/esm/Flow/Sidebar/Sidebar.js.map +1 -0
- package/dist/esm/Flow/Sidebar/{Sidebar.styles.mjs → Sidebar.styles.js} +1 -1
- package/dist/esm/Flow/Sidebar/Sidebar.styles.js.map +1 -0
- package/dist/esm/Flow/Sidebar/SidebarGroup/{SidebarGroup.mjs → SidebarGroup.js} +5 -5
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.js.map +1 -0
- package/dist/esm/Flow/Sidebar/SidebarGroup/{SidebarGroup.styles.mjs → SidebarGroup.styles.js} +1 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.js.map +1 -0
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/{DraggableSidebarGroupItem.mjs → DraggableSidebarGroupItem.js} +2 -2
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js.map +1 -0
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/{SidebarGroupItem.mjs → SidebarGroupItem.js} +3 -3
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js.map +1 -0
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/{SidebarGroupItem.styles.mjs → SidebarGroupItem.styles.js} +1 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js.map +1 -0
- package/dist/esm/Flow/Sidebar/{utils.mjs → utils.js} +1 -1
- package/dist/esm/Flow/Sidebar/utils.js.map +1 -0
- package/dist/esm/Flow/{base.mjs → base.js} +1 -1
- package/dist/esm/Flow/base.js.map +1 -0
- package/dist/esm/Flow/hooks/{useFlowContext.mjs → useFlowContext.js} +2 -2
- package/dist/esm/Flow/hooks/useFlowContext.js.map +1 -0
- package/dist/esm/Flow/hooks/{useFlowNode.mjs → useFlowNode.js} +1 -1
- package/dist/esm/Flow/hooks/useFlowNode.js.map +1 -0
- package/dist/esm/Flow/hooks/{useFlowNodeMeta.mjs → useFlowNodeMeta.js} +2 -2
- package/dist/esm/Flow/hooks/useFlowNodeMeta.js.map +1 -0
- package/dist/esm/Flow/nodes/{DashboardNode.mjs → DashboardNode.js} +4 -6
- package/dist/esm/Flow/nodes/DashboardNode.js.map +1 -0
- package/dist/esm/StepNavigation/DefaultNavigation/{DefaultNavigation.mjs → DefaultNavigation.js} +3 -3
- package/dist/esm/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/esm/StepNavigation/DefaultNavigation/Step/{Step.mjs → Step.js} +3 -3
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/esm/StepNavigation/DefaultNavigation/Step/{Step.styles.mjs → Step.styles.js} +1 -1
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.styles.js.map +1 -0
- package/dist/esm/StepNavigation/DefaultNavigation/{utils.mjs → utils.js} +1 -1
- package/dist/esm/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/{Dot.mjs → Dot.js} +4 -4
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/{Dot.styles.mjs → Dot.styles.js} +1 -1
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.styles.js.map +1 -0
- package/dist/esm/StepNavigation/SimpleNavigation/{SimpleNavigation.mjs → SimpleNavigation.js} +3 -3
- package/dist/esm/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/esm/StepNavigation/SimpleNavigation/{utils.mjs → utils.js} +1 -1
- package/dist/esm/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/esm/StepNavigation/{StepNavigation.mjs → StepNavigation.js} +6 -6
- package/dist/esm/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/esm/StepNavigation/{StepNavigation.styles.mjs → StepNavigation.styles.js} +1 -1
- package/dist/esm/StepNavigation/StepNavigation.styles.js.map +1 -0
- package/dist/esm/StepNavigation/{utils.mjs → utils.js} +1 -1
- package/dist/esm/StepNavigation/utils.js.map +1 -0
- package/dist/esm/Wizard/{Wizard.mjs → Wizard.js} +8 -8
- package/dist/esm/Wizard/Wizard.js.map +1 -0
- package/dist/esm/Wizard/{Wizard.styles.mjs → Wizard.styles.js} +1 -1
- package/dist/esm/Wizard/Wizard.styles.js.map +1 -0
- package/dist/esm/Wizard/WizardActions/{WizardActions.mjs → WizardActions.js} +4 -4
- package/dist/esm/Wizard/WizardActions/WizardActions.js.map +1 -0
- package/dist/esm/Wizard/WizardActions/{WizardActions.styles.mjs → WizardActions.styles.js} +1 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.styles.js.map +1 -0
- package/dist/esm/Wizard/WizardContainer/{WizardContainer.mjs → WizardContainer.js} +3 -3
- package/dist/esm/Wizard/WizardContainer/WizardContainer.js.map +1 -0
- package/dist/esm/Wizard/WizardContainer/{WizardContainer.styles.mjs → WizardContainer.styles.js} +1 -1
- package/dist/esm/Wizard/WizardContainer/WizardContainer.styles.js.map +1 -0
- package/dist/esm/Wizard/WizardContent/{LoadingContainer.mjs → LoadingContainer.js} +2 -2
- package/dist/esm/Wizard/WizardContent/LoadingContainer.js.map +1 -0
- package/dist/esm/Wizard/WizardContent/{LoadingContainer.styles.mjs → LoadingContainer.styles.js} +1 -1
- package/dist/esm/Wizard/WizardContent/LoadingContainer.styles.js.map +1 -0
- package/dist/esm/Wizard/WizardContent/{WizardContent.mjs → WizardContent.js} +5 -5
- package/dist/esm/Wizard/WizardContent/WizardContent.js.map +1 -0
- package/dist/esm/Wizard/WizardContent/{WizardContent.styles.mjs → WizardContent.styles.js} +1 -1
- package/dist/esm/Wizard/WizardContent/WizardContent.styles.js.map +1 -0
- package/dist/esm/Wizard/WizardContext/{WizardContext.mjs → WizardContext.js} +1 -1
- package/dist/esm/Wizard/WizardContext/WizardContext.js.map +1 -0
- package/dist/esm/Wizard/WizardTitle/{WizardTitle.mjs → WizardTitle.js} +5 -5
- package/dist/esm/Wizard/WizardTitle/WizardTitle.js.map +1 -0
- package/dist/esm/Wizard/WizardTitle/{WizardTitle.styles.mjs → WizardTitle.styles.js} +1 -1
- package/dist/esm/Wizard/WizardTitle/WizardTitle.styles.js.map +1 -0
- package/dist/esm/index.js +82 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/types/index.d.ts +244 -62
- package/package.json +6 -6
- package/dist/esm/Dashboard/Dashboard.mjs.map +0 -1
- package/dist/esm/Dashboard/Dashboard.styles.mjs.map +0 -1
- package/dist/esm/Flow/Background/Background.mjs.map +0 -1
- package/dist/esm/Flow/Controls/Controls.mjs.map +0 -1
- package/dist/esm/Flow/DroppableFlow.mjs.map +0 -1
- package/dist/esm/Flow/Empty/Empty.mjs.map +0 -1
- package/dist/esm/Flow/Empty/Empty.styles.mjs.map +0 -1
- package/dist/esm/Flow/Flow.mjs.map +0 -1
- package/dist/esm/Flow/Flow.styles.mjs.map +0 -1
- package/dist/esm/Flow/FlowContext/FlowContext.mjs.map +0 -1
- package/dist/esm/Flow/FlowContext/NodeMetaContext.mjs.map +0 -1
- package/dist/esm/Flow/Minimap/Minimap.mjs.map +0 -1
- package/dist/esm/Flow/Minimap/Minimap.styles.mjs.map +0 -1
- package/dist/esm/Flow/Node/BaseNode.mjs.map +0 -1
- package/dist/esm/Flow/Node/BaseNode.styles.mjs.map +0 -1
- package/dist/esm/Flow/Node/Node.mjs.map +0 -1
- package/dist/esm/Flow/Node/Node.styles.mjs.map +0 -1
- package/dist/esm/Flow/Node/Parameters/ParamRenderer.mjs.map +0 -1
- package/dist/esm/Flow/Node/Parameters/Select.mjs.map +0 -1
- package/dist/esm/Flow/Node/Parameters/Slider.mjs.map +0 -1
- package/dist/esm/Flow/Node/Parameters/Text.mjs.map +0 -1
- package/dist/esm/Flow/Sidebar/Sidebar.mjs.map +0 -1
- package/dist/esm/Flow/Sidebar/Sidebar.styles.mjs.map +0 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.mjs.map +0 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.mjs.map +0 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.mjs.map +0 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.mjs.map +0 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.mjs.map +0 -1
- package/dist/esm/Flow/Sidebar/utils.mjs.map +0 -1
- package/dist/esm/Flow/base.mjs.map +0 -1
- package/dist/esm/Flow/hooks/useFlowContext.mjs.map +0 -1
- package/dist/esm/Flow/hooks/useFlowNode.mjs.map +0 -1
- package/dist/esm/Flow/hooks/useFlowNodeMeta.mjs.map +0 -1
- package/dist/esm/Flow/nodes/DashboardNode.mjs.map +0 -1
- package/dist/esm/StepNavigation/DefaultNavigation/DefaultNavigation.mjs.map +0 -1
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.mjs.map +0 -1
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.styles.mjs.map +0 -1
- package/dist/esm/StepNavigation/DefaultNavigation/utils.mjs.map +0 -1
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.mjs.map +0 -1
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.styles.mjs.map +0 -1
- package/dist/esm/StepNavigation/SimpleNavigation/SimpleNavigation.mjs.map +0 -1
- package/dist/esm/StepNavigation/SimpleNavigation/utils.mjs.map +0 -1
- package/dist/esm/StepNavigation/StepNavigation.mjs.map +0 -1
- package/dist/esm/StepNavigation/StepNavigation.styles.mjs.map +0 -1
- package/dist/esm/StepNavigation/utils.mjs.map +0 -1
- package/dist/esm/Wizard/Wizard.mjs.map +0 -1
- package/dist/esm/Wizard/Wizard.styles.mjs.map +0 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.mjs.map +0 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.styles.mjs.map +0 -1
- package/dist/esm/Wizard/WizardContainer/WizardContainer.mjs.map +0 -1
- package/dist/esm/Wizard/WizardContainer/WizardContainer.styles.mjs.map +0 -1
- package/dist/esm/Wizard/WizardContent/LoadingContainer.mjs.map +0 -1
- package/dist/esm/Wizard/WizardContent/LoadingContainer.styles.mjs.map +0 -1
- package/dist/esm/Wizard/WizardContent/WizardContent.mjs.map +0 -1
- package/dist/esm/Wizard/WizardContent/WizardContent.styles.mjs.map +0 -1
- package/dist/esm/Wizard/WizardContext/WizardContext.mjs.map +0 -1
- package/dist/esm/Wizard/WizardTitle/WizardTitle.mjs.map +0 -1
- package/dist/esm/Wizard/WizardTitle/WizardTitle.styles.mjs.map +0 -1
- package/dist/esm/index.mjs +0 -74
- package/dist/esm/index.mjs.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Flow.styles.js","sources":["../../../src/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowBaseNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n root: {\n height: \"100%\",\n \"& .react-flow__handle\": {\n backgroundColor: theme.colors.secondary_60,\n width: 8,\n height: 8,\n zIndex: theme.zIndices.overlay,\n },\n \"& .react-flow__handle-connecting\": {\n backgroundColor: theme.colors.negative_20,\n width: 12,\n height: 12,\n \"&.react-flow__handle-left\": {\n translate: \"0 4px\",\n },\n },\n \"& .react-flow__handle-valid\": {\n backgroundColor: theme.colors.positive_20,\n width: 12,\n height: 12,\n \"&.react-flow__handle-left\": {\n translate: \"0 4px\",\n },\n },\n [`& .selected > .${flowBaseNodeClasses.root}`]: {\n border: `1px solid ${theme.colors.secondary_60}`,\n borderRadius: theme.radii.round,\n boxSizing: \"border-box\",\n },\n },\n});\n"],"names":["flowBaseNodeClasses"],"mappings":";;;;;;;;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,MAAM,SAAS;AAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClC,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3B,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,+BAA+B;AAAA,MAC7B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3B,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAC,kBAAkBA,gBAAoB,IAAI,EAAE,GAAG;AAAA,MAC9C,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,cAAc,MAAM,MAAM;AAAA,MAC1B,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { createContext, useState, useMemo } from "react";
|
|
3
|
-
import { HvFlowNodeMetaProvider } from "./NodeMetaContext.
|
|
3
|
+
import { HvFlowNodeMetaProvider } from "./NodeMetaContext.js";
|
|
4
4
|
const HvFlowContext = createContext({});
|
|
5
5
|
const HvFlowProvider = ({
|
|
6
6
|
nodeGroups,
|
|
@@ -25,4 +25,4 @@ export {
|
|
|
25
25
|
HvFlowContext,
|
|
26
26
|
HvFlowProvider
|
|
27
27
|
};
|
|
28
|
-
//# sourceMappingURL=FlowContext.
|
|
28
|
+
//# sourceMappingURL=FlowContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FlowContext.js","sources":["../../../../src/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n Dispatch,\n SetStateAction,\n createContext,\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;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NodeMetaContext.js","sources":["../../../../src/Flow/FlowContext/NodeMetaContext.tsx"],"sourcesContent":["import { createContext, useRef, useCallback, useContext, useMemo } 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,8 +1,8 @@
|
|
|
1
1
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { MiniMap } from "reactflow";
|
|
3
3
|
import { getColor } from "@hitachivantara/uikit-styles";
|
|
4
|
-
import { useClasses } from "./Minimap.styles.
|
|
5
|
-
import { staticClasses } from "./Minimap.styles.
|
|
4
|
+
import { useClasses } from "./Minimap.styles.js";
|
|
5
|
+
import { staticClasses } from "./Minimap.styles.js";
|
|
6
6
|
const HvFlowMinimap = ({
|
|
7
7
|
nodeColor = "atmo4",
|
|
8
8
|
maskColor = "atmo3",
|
|
@@ -29,4 +29,4 @@ export {
|
|
|
29
29
|
HvFlowMinimap,
|
|
30
30
|
staticClasses as flowMinimapClasses
|
|
31
31
|
};
|
|
32
|
-
//# sourceMappingURL=Minimap.
|
|
32
|
+
//# sourceMappingURL=Minimap.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Minimap.js","sources":["../../../../src/Flow/Minimap/Minimap.tsx"],"sourcesContent":["import { GetMiniMapNodeAttribute, MiniMap, MiniMapProps } from \"reactflow\";\n\nimport { ExtractNames } from \"@hitachivantara/uikit-react-core\";\nimport { HvColorAny, getColor } 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":";;;;;AA4BO,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;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Minimap.styles.js","sources":["../../../../src/Flow/Minimap/Minimap.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowMinimap\", {\n root: {\n \"&.react-flow__minimap\": { backgroundColor: theme.colors.atmo2 },\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,yBAAyB,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EACjE;AACF,CAAC;"}
|
|
@@ -5,10 +5,10 @@ import { uid } from "uid";
|
|
|
5
5
|
import { HvButton, 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.
|
|
9
|
-
import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.
|
|
10
|
-
import { useClasses } from "./BaseNode.styles.
|
|
11
|
-
import { staticClasses } from "./BaseNode.styles.
|
|
8
|
+
import { useFlowNode, useFlowNodeInputEdges, useFlowNodeOutputEdges } from "../hooks/useFlowNode.js";
|
|
9
|
+
import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.js";
|
|
10
|
+
import { useClasses } from "./BaseNode.styles.js";
|
|
11
|
+
import { staticClasses } from "./BaseNode.styles.js";
|
|
12
12
|
const isInputConnected = (id, type, handleId, edges) => {
|
|
13
13
|
if (type === "target") {
|
|
14
14
|
return edges.some((e) => e.target === id && e.targetHandle === handleId);
|
|
@@ -182,4 +182,4 @@ export {
|
|
|
182
182
|
HvFlowBaseNode,
|
|
183
183
|
staticClasses as flowBaseNodeClasses
|
|
184
184
|
};
|
|
185
|
-
//# sourceMappingURL=BaseNode.
|
|
185
|
+
//# sourceMappingURL=BaseNode.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import React, { isValidElement, useCallback, useEffect, useState } from \"react\";\nimport {\n Edge,\n Handle,\n NodeProps,\n NodeToolbar,\n Position,\n useReactFlow,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport {\n ExtractNames,\n HvActionGeneric,\n HvBaseProps,\n HvButton,\n HvTypography,\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 HvFlowBuiltInActions,\n HvFlowNodeInput,\n HvFlowNodeOutput,\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\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\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[];\n /** Node outputs */\n outputs?: HvFlowNodeOutput[];\n /** Node actions */\n nodeActions?: HvFlowNodeAction[];\n /** The content of the Node footer */\n footer?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowBaseNodeClasses;\n}\n\nconst isInputConnected = (\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\nconst defaultActions: HvFlowBuiltInActions[] = [\n { id: \"delete\", label: \"Delete\", icon: <Delete /> },\n { id: \"duplicate\", label: \"Duplicate\", icon: <Duplicate /> },\n];\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowBaseNode = ({\n id,\n title,\n headerItems,\n icon,\n color: colorProp,\n inputs,\n outputs,\n nodeActions = defaultActions,\n footer,\n classes: classesProp,\n className,\n children,\n}: HvFlowBaseNodeProps<unknown>) => {\n const { registerNode, unregisterNode } = useNodeMetaRegistry();\n useEffect(() => {\n registerNode(id, { label: title || \"\", inputs, outputs });\n return () => unregisterNode(id);\n }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n const [showActions, setShowActions] = useState(false);\n const reactFlowInstance = useReactFlow();\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const node = useFlowNode(id);\n const inputEdges = useFlowNodeInputEdges(id);\n const outputEdges = useFlowNodeOutputEdges(id);\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 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 <HvButton\n key={action.id}\n icon\n onClick={() => handleDefaultAction(action)}\n >\n {renderedIcon(action.icon)}\n </HvButton>\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>Inputs</HvTypography>\n </div>\n\n <div className={classes.inputsContainer}>\n {inputs?.map((input, idx) => {\n const handleId = input.id ?? idx.toString();\n return (\n <div className={classes.inputContainer} key={idx}>\n <Handle\n type=\"target\"\n isConnectableStart={false}\n id={handleId}\n position={Position.Left}\n />\n <HvTypography>{input.label}</HvTypography>\n {input.isMandatory &&\n !isInputConnected(id, \"target\", handleId, inputEdges) && (\n <div className={classes.mandatory} />\n )}\n </div>\n );\n })}\n </div>\n </>\n )}\n {outputs && outputs.length > 0 && (\n <>\n <div className={classes.outputsTitleContainer}>\n <HvTypography>Outputs</HvTypography>\n </div>\n <div className={classes.outputsContainer}>\n {outputs?.map((output, idx) => {\n const handleId = output.id ?? idx.toString();\n return (\n <div className={classes.outputContainer} key={idx}>\n <Handle\n type=\"source\"\n isConnectableEnd={false}\n id={handleId}\n position={Position.Right}\n />\n {output.isMandatory &&\n !isInputConnected(id, \"source\", handleId, outputEdges) && (\n <div className={classes.mandatory} />\n )}\n <HvTypography>{output.label}</HvTypography>\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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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseNode.styles.js","sources":["../../../../src/Flow/Node/BaseNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowBaseNode\", {\n root: {\n borderRadius: theme.radii.round,\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n minWidth: \"250px\",\n },\n headerContainer: {\n padding: theme.spacing(0.5, 1),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n borderTopLeftRadius: \"inherit\",\n borderTopRightRadius: \"inherit\",\n },\n titleContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n title: {\n color: theme.colors.base_dark,\n },\n inputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo3}`,\n borderBottom: `1px solid ${theme.colors.atmo3}`,\n },\n outputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo3}`,\n borderBottom: `1px solid ${theme.colors.atmo3}`,\n },\n contentContainer: {},\n inputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-start\",\n },\n outputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-end\",\n },\n inputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n position: \"relative\",\n \"& .react-flow__handle-left\": {\n left: -20,\n },\n },\n outputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n position: \"relative\",\n \"& .react-flow__handle-right\": {\n right: -20,\n },\n },\n mandatory: {\n width: 10,\n height: 10,\n margin: theme.spacing(0, theme.space.xs),\n borderRadius: theme.radii.circle,\n backgroundColor: theme.colors.negative_20,\n },\n footerContainer: {\n padding: theme.space.sm,\n borderTop: `1px solid ${theme.colors.atmo3}`,\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,MAAM,OAAO;AAAA,IACxB,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS,MAAM,QAAQ,KAAK,CAAC;AAAA,IAC7B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,sBAAsB;AAAA,IACpB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,EAC/C;AAAA,EACA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,EAC/C;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAAS,MAAM,MAAM;AAAA,IACrB,KAAK,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,EACd;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAAS,MAAM,MAAM;AAAA,IACrB,KAAK,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,EACd;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,8BAA8B;AAAA,MAC5B,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,+BAA+B;AAAA,MAC7B,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,MAAM,QAAQ,GAAG,MAAM,MAAM,EAAE;AAAA,IACvC,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,EAC5C;AACF,CAAC;"}
|
|
@@ -2,12 +2,12 @@ import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
|
|
|
2
2
|
import { useState, isValidElement } from "react";
|
|
3
3
|
import { HvTooltip, HvButton, HvTypography, HvDropDownMenu } from "@hitachivantara/uikit-react-core";
|
|
4
4
|
import { Info, Up, Down } from "@hitachivantara/uikit-react-icons";
|
|
5
|
-
import { useClasses } from "./Node.styles.
|
|
6
|
-
import { staticClasses } from "./Node.styles.
|
|
7
|
-
import ParamRenderer from "./Parameters/ParamRenderer.
|
|
8
|
-
import { HvFlowBaseNode } from "./BaseNode.
|
|
9
|
-
import { useFlowNode } from "../hooks/useFlowNode.
|
|
10
|
-
import { useFlowContext } from "../hooks/useFlowContext.
|
|
5
|
+
import { useClasses } from "./Node.styles.js";
|
|
6
|
+
import { staticClasses } from "./Node.styles.js";
|
|
7
|
+
import ParamRenderer from "./Parameters/ParamRenderer.js";
|
|
8
|
+
import { HvFlowBaseNode } from "./BaseNode.js";
|
|
9
|
+
import { useFlowNode } from "../hooks/useFlowNode.js";
|
|
10
|
+
import { useFlowContext } from "../hooks/useFlowContext.js";
|
|
11
11
|
const renderedIcon = (actionIcon) => isValidElement(actionIcon) ? actionIcon : actionIcon?.();
|
|
12
12
|
const HvFlowNode = ({
|
|
13
13
|
id,
|
|
@@ -108,4 +108,4 @@ export {
|
|
|
108
108
|
HvFlowNode,
|
|
109
109
|
staticClasses as flowNodeClasses
|
|
110
110
|
};
|
|
111
|
-
//# sourceMappingURL=Node.
|
|
111
|
+
//# sourceMappingURL=Node.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { isValidElement, useState } from \"react\";\n\nimport {\n ExtractNames,\n HvActionGeneric,\n HvActionsGenericProps,\n HvButton,\n HvButtonProps,\n HvDropDownMenu,\n HvTooltip,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeInput, HvFlowNodeOutput, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\nimport {\n HvFlowBaseNode,\n HvFlowBaseNodeProps,\n HvFlowBaseNodeClasses,\n} from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport interface HvFlowNodeClasses\n extends ExtractNames<typeof useClasses>,\n HvFlowBaseNodeClasses {}\n\nexport type HvFlowNodeDefaults = {\n title?: string;\n subTitle?: string;\n color?: string;\n icon?: React.ReactNode;\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n /** Node description */\n description?: string;\n /** Node actions */\n actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n /** Node action callback */\n actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /** Node maximum number of actions visible */\n maxVisibleActions?: number;\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 /** Node outputs. */\n outputs?: HvFlowNodeOutput[];\n /** Node inputs. */\n inputs?: HvFlowNodeInput[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowNodeClasses;\n}\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowNode = ({\n id,\n type,\n headerItems,\n description,\n actions,\n outputs,\n inputs,\n actionCallback,\n maxVisibleActions = 1,\n expanded = false,\n params,\n nodeDefaults,\n classes: classesProp,\n children,\n expandParamsButtonProps,\n ...props\n}: HvFlowNodeProps<unknown>) => {\n const { classes } = useClasses(classesProp as HvFlowNodeClasses);\n\n const [showParams, setShowParams] = useState(expanded);\n\n const node = useFlowNode(id);\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 actsVisible = actions?.slice(0, maxVisibleActions);\n const actsDropdown = actions?.slice(maxVisibleActions);\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 inputs={inputs}\n outputs={outputs}\n nodeActions={defaultActions}\n classes={classesProp as HvFlowBaseNodeClasses}\n headerItems={\n <>\n {headerItems}\n {description && (\n <HvTooltip title={description}>\n <div>\n <Info 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={showParams ? \"Collapse\" : \"Expand\"}\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 {...props}\n >\n {(subtitle || actsVisible?.length || actsDropdown?.length) && (\n <div className={classes.subtitleContainer}>\n {subtitle && (\n <div>\n <HvTypography>{subtitle}</HvTypography>\n </div>\n )}\n <div className={classes.actions}>\n {actions?.length && actions?.length > 0 && (\n <>\n {actsVisible?.map((action) => (\n <HvTooltip key={action.id} title={action.label}>\n <HvButton\n icon\n onClick={(event) => {\n actionCallback?.(event, id, action);\n }}\n aria-label={action.label}\n >\n {renderedIcon(action.icon)}\n </HvButton>\n </HvTooltip>\n ))}\n\n {actsDropdown && actsDropdown.length > 0 && (\n <HvDropDownMenu\n keepOpened={false}\n dataList={actsDropdown?.map((action) => ({\n id: action.id,\n label: action.label,\n }))}\n onClick={(event, action) => {\n actionCallback?.(event, id, action as HvActionGeneric);\n }}\n />\n )}\n </>\n )}\n </div>\n </div>\n )}\n {children}\n {showParams && params && (\n <div className={classes.paramsContainer}>\n <ParamRenderer nodeId={id} params={params} data={node?.data} />\n </div>\n )}\n </HvFlowBaseNode>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +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\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 display: \"flex\",\n alignItems: \"center\",\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});\n"],"names":[],"mappings":";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;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,EACd;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;AACF,CAAC;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, Fragment } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import Text from "./Text.
|
|
3
|
-
import Select from "./Select.
|
|
4
|
-
import Slider from "./Slider.
|
|
2
|
+
import Text from "./Text.js";
|
|
3
|
+
import Select from "./Select.js";
|
|
4
|
+
import Slider from "./Slider.js";
|
|
5
5
|
const renderers = {
|
|
6
6
|
text: Text,
|
|
7
7
|
select: Select,
|
|
@@ -19,4 +19,4 @@ const ParamRenderer$1 = ParamRenderer;
|
|
|
19
19
|
export {
|
|
20
20
|
ParamRenderer$1 as default
|
|
21
21
|
};
|
|
22
|
-
//# sourceMappingURL=ParamRenderer.
|
|
22
|
+
//# sourceMappingURL=ParamRenderer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ParamRenderer.js","sources":["../../../../../src/Flow/Node/Parameters/ParamRenderer.tsx"],"sourcesContent":["import { HvFlowNodeParam } from \"../../types\";\nimport Text from \"./Text\";\nimport Select from \"./Select\";\nimport Slider from \"./Slider\";\n\nexport type ParamRendererProps = {\n nodeId: string;\n params: HvFlowNodeParam[];\n data: any;\n};\n\nconst renderers = {\n text: Text,\n select: Select,\n slider: Slider,\n};\n\nconst ParamRenderer = ({ nodeId, 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} nodeId={nodeId} param={param} data={data} />;\n })}\n </>\n );\n};\n\nexport default ParamRenderer;\n"],"names":[],"mappings":";;;;AAWA,MAAM,YAAY;AAAA,EAChB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AACV;AAEA,MAAM,gBAAgB,CAAC,EAAE,QAAQ,QAAQ,WAA+B;AACtE,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,QAAgB,OAAc,QAAnC,GAA+C;AAAA,EACtE,CAAA,EACH,CAAA;AAEJ;AAEA,MAAA,kBAAe;"}
|
|
@@ -9,18 +9,18 @@ const Select = ({ nodeId, param, data }) => {
|
|
|
9
9
|
data[id] ? Array.isArray(data[id]) ? data[id] : [data[id]] : void 0
|
|
10
10
|
);
|
|
11
11
|
const onSelectChange = (item) => {
|
|
12
|
-
const nodes = reactFlowInstance.getNodes();
|
|
13
12
|
const newOpts = Array.isArray(item) ? item.map((x) => x.label) : item?.label ?? void 0;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
node.
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
13
|
+
reactFlowInstance.setNodes(
|
|
14
|
+
(nodes) => nodes.map((node) => {
|
|
15
|
+
if (node.id === nodeId) {
|
|
16
|
+
node.data = {
|
|
17
|
+
...node.data,
|
|
18
|
+
[id]: newOpts
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
return node;
|
|
22
|
+
})
|
|
23
|
+
);
|
|
24
24
|
setOpts(
|
|
25
25
|
newOpts ? Array.isArray(newOpts) ? newOpts : [newOpts] : void 0
|
|
26
26
|
);
|
|
@@ -44,4 +44,4 @@ const Select$1 = Select;
|
|
|
44
44
|
export {
|
|
45
45
|
Select$1 as default
|
|
46
46
|
};
|
|
47
|
-
//# sourceMappingURL=Select.
|
|
47
|
+
//# sourceMappingURL=Select.js.map
|
|
@@ -0,0 +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\";\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvFlowNodeSelectParam } from \"../../types\";\n\ninterface SelectProps {\n nodeId: string;\n param: Omit<HvFlowNodeSelectParam, \"type\">;\n data: any;\n}\n\nconst Select = ({ nodeId, param, data }: SelectProps) => {\n const { id, label, multiple = false, options } = param;\n\n const reactFlowInstance = useReactFlow();\n\n const [opts, setOpts] = useState<string[] | undefined>(\n data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined\n );\n\n const onSelectChange: HvDropdownProps[\"onChange\"] = (item) => {\n const newOpts = Array.isArray(item)\n ? item.map((x) => x.label as string)\n : (item?.label as string) ?? undefined;\n\n reactFlowInstance.setNodes((nodes) =>\n nodes.map((node) => {\n if (node.id === nodeId) {\n node.data = {\n ...node.data,\n [id]: newOpts,\n };\n }\n return node;\n })\n );\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((o) => {\n return { id: o, label: o, selected: !!opts?.find((opt) => opt === o) };\n })}\n onChange={onSelectChange}\n maxHeight={100}\n multiSelect={multiple}\n />\n );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;AAYA,MAAM,SAAS,CAAC,EAAE,QAAQ,OAAO,WAAwB;AACvD,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,QAAY,IAAA;AAEjD,QAAM,oBAAoB;AAEpB,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,iBAA8C,CAAC,SAAS;AAC5D,UAAM,UAAU,MAAM,QAAQ,IAAI,IAC9B,KAAK,IAAI,CAAC,MAAM,EAAE,KAAe,IAChC,MAAM,SAAoB;AAEb,sBAAA;AAAA,MAAS,CAAC,UAC1B,MAAM,IAAI,CAAC,SAAS;AACd,YAAA,KAAK,OAAO,QAAQ;AACtB,eAAK,OAAO;AAAA,YACV,GAAG,KAAK;AAAA,YACR,CAAC,EAAE,GAAG;AAAA,UAAA;AAAA,QAEV;AACO,eAAA;AAAA,MAAA,CACR;AAAA,IAAA;AAEH;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,MAAM;AAC1B,eAAO,EAAE,IAAI,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,QAAQ,QAAQ,CAAC,EAAE;AAAA,MAAA,CACtE;AAAA,MACD,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EAAA;AAGnB;AAEA,MAAA,WAAe;"}
|
|
@@ -17,14 +17,14 @@ const Slider = ({ nodeId, param, data }) => {
|
|
|
17
17
|
const reactFlowInstance = useReactFlow();
|
|
18
18
|
const [value, setValue] = useState(data[id]);
|
|
19
19
|
const onSliderChange = (val) => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
20
|
+
reactFlowInstance.setNodes(
|
|
21
|
+
(nodes) => nodes.map((node) => {
|
|
22
|
+
if (node.id === nodeId) {
|
|
23
|
+
node.data = { ...node.data, [id]: val };
|
|
24
|
+
}
|
|
25
|
+
return node;
|
|
26
|
+
})
|
|
27
|
+
);
|
|
28
28
|
setValue(val);
|
|
29
29
|
};
|
|
30
30
|
return /* @__PURE__ */ jsx(
|
|
@@ -45,4 +45,4 @@ const Slider$1 = Slider;
|
|
|
45
45
|
export {
|
|
46
46
|
Slider$1 as default
|
|
47
47
|
};
|
|
48
|
-
//# sourceMappingURL=Slider.
|
|
48
|
+
//# sourceMappingURL=Slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../../../../../src/Flow/Node/Parameters/Slider.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { css } from \"@emotion/css\";\n\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvSlider, HvSliderProps } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeSliderParam } from \"../../types\";\n\ninterface SliderProps {\n nodeId: string;\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 = ({ nodeId, param, data }: SliderProps) => {\n const { id } = param;\n\n const reactFlowInstance = useReactFlow();\n\n const [value, setValue] = useState(data[id]);\n\n const onSliderChange: HvSliderProps[\"onChange\"] = (val) => {\n reactFlowInstance.setNodes((nodes) =>\n nodes.map((node) => {\n if (node.id === nodeId) {\n node.data = { ...node.data, [id]: val };\n }\n return node;\n })\n );\n setValue(val);\n };\n\n return (\n <HvSlider\n className=\"nodrag\" // Prevents dragging within the input field\n defaultValues={value}\n onChange={onSliderChange}\n classes={{\n labelContainer: classes.labelContainer,\n sliderBase: classes.sliderBase,\n }}\n {...param}\n />\n );\n};\n\nexport default Slider;\n"],"names":[],"mappings":";;;;;AAgBA,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,QAAQ,OAAO,WAAwB;AACjD,QAAA,EAAE,GAAO,IAAA;AAEf,QAAM,oBAAoB;AAE1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK,EAAE,CAAC;AAErC,QAAA,iBAA4C,CAAC,QAAQ;AACvC,sBAAA;AAAA,MAAS,CAAC,UAC1B,MAAM,IAAI,CAAC,SAAS;AACd,YAAA,KAAK,OAAO,QAAQ;AACjB,eAAA,OAAO,EAAE,GAAG,KAAK,MAAM,CAAC,EAAE,GAAG;QACpC;AACO,eAAA;AAAA,MAAA,CACR;AAAA,IAAA;AAEH,aAAS,GAAG;AAAA,EAAA;AAIZ,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAe;AAAA,MACf,UAAU;AAAA,MACV,SAAS;AAAA,QACP,gBAAgB,QAAQ;AAAA,QACxB,YAAY,QAAQ;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAA,WAAe;"}
|
|
@@ -7,14 +7,14 @@ const Text = ({ nodeId, param, data }) => {
|
|
|
7
7
|
const reactFlowInstance = useReactFlow();
|
|
8
8
|
const [text, setText] = useState(data[id]);
|
|
9
9
|
const onTextChange = (event, val) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
10
|
+
reactFlowInstance.setNodes(
|
|
11
|
+
(nodes) => nodes.map((node) => {
|
|
12
|
+
if (node.id === nodeId) {
|
|
13
|
+
node.data = { ...node.data, [id]: val };
|
|
14
|
+
}
|
|
15
|
+
return node;
|
|
16
|
+
})
|
|
17
|
+
);
|
|
18
18
|
setText(val);
|
|
19
19
|
};
|
|
20
20
|
return /* @__PURE__ */ jsx(
|
|
@@ -31,4 +31,4 @@ const Text$1 = Text;
|
|
|
31
31
|
export {
|
|
32
32
|
Text$1 as default
|
|
33
33
|
};
|
|
34
|
-
//# sourceMappingURL=Text.
|
|
34
|
+
//# sourceMappingURL=Text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../../../../src/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvInput, HvInputProps } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvFlowNodeTextParam } from \"../../types\";\n\ninterface TextProps {\n nodeId: string;\n param: Omit<HvFlowNodeTextParam, \"type\">;\n data: any;\n}\n\nconst Text = ({ nodeId, param, data }: TextProps) => {\n const { id, label } = param;\n\n const reactFlowInstance = useReactFlow();\n\n const [text, setText] = useState(data[id]);\n\n const onTextChange: HvInputProps[\"onChange\"] = (event, val) => {\n reactFlowInstance.setNodes((nodes) =>\n nodes.map((node) => {\n if (node.id === nodeId) {\n node.data = { ...node.data, [id]: val };\n }\n return node;\n })\n );\n setText(val);\n };\n\n return (\n <HvInput\n className=\"nodrag\" // Prevents dragging within the input field\n label={label}\n value={text}\n onChange={onTextChange}\n />\n );\n};\n\nexport default Text;\n"],"names":[],"mappings":";;;;AAYA,MAAM,OAAO,CAAC,EAAE,QAAQ,OAAO,WAAsB;AAC7C,QAAA,EAAE,IAAI,MAAU,IAAA;AAEtB,QAAM,oBAAoB;AAE1B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK,EAAE,CAAC;AAEnC,QAAA,eAAyC,CAAC,OAAO,QAAQ;AAC3C,sBAAA;AAAA,MAAS,CAAC,UAC1B,MAAM,IAAI,CAAC,SAAS;AACd,YAAA,KAAK,OAAO,QAAQ;AACjB,eAAA,OAAO,EAAE,GAAG,KAAK,MAAM,CAAC,EAAE,GAAG;QACpC;AACO,eAAA;AAAA,MAAA,CACR;AAAA,IAAA;AAEH,YAAQ,GAAG;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEA,MAAA,SAAe;"}
|
|
@@ -5,13 +5,13 @@ import { useDroppable, useDndMonitor, DragOverlay } from "@dnd-kit/core";
|
|
|
5
5
|
import { restrictToWindowEdges } from "@dnd-kit/modifiers";
|
|
6
6
|
import { useLabels, useUniqueId, HvDrawer, HvTypography, HvInput } from "@hitachivantara/uikit-react-core";
|
|
7
7
|
import { Add } from "@hitachivantara/uikit-react-icons";
|
|
8
|
-
import { useClasses } from "./Sidebar.styles.
|
|
9
|
-
import { staticClasses } from "./Sidebar.styles.
|
|
10
|
-
import { buildGroups } from "./utils.
|
|
11
|
-
import { HvFlowSidebarGroup } from "./SidebarGroup/SidebarGroup.
|
|
12
|
-
import { HvFlowSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/SidebarGroupItem.
|
|
13
|
-
import { useFlowContext } from "../hooks/useFlowContext.
|
|
14
|
-
import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.
|
|
8
|
+
import { useClasses } from "./Sidebar.styles.js";
|
|
9
|
+
import { staticClasses } from "./Sidebar.styles.js";
|
|
10
|
+
import { buildGroups } from "./utils.js";
|
|
11
|
+
import { HvFlowSidebarGroup } from "./SidebarGroup/SidebarGroup.js";
|
|
12
|
+
import { HvFlowSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/SidebarGroupItem.js";
|
|
13
|
+
import { useFlowContext } from "../hooks/useFlowContext.js";
|
|
14
|
+
import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js";
|
|
15
15
|
const DEFAULT_LABELS = {
|
|
16
16
|
itemAriaRoleDescription: "Draggable",
|
|
17
17
|
expandGroupButtonAriaLabel: "Expand group",
|
|
@@ -161,4 +161,4 @@ export {
|
|
|
161
161
|
HvFlowSidebar,
|
|
162
162
|
staticClasses as flowSidebarClasses
|
|
163
163
|
};
|
|
164
|
-
//# sourceMappingURL=Sidebar.
|
|
164
|
+
//# sourceMappingURL=Sidebar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sources":["../../../../src/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport debounce from \"lodash/debounce\";\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?: {\n itemAriaRoleDescription?: string;\n expandGroupButtonAriaLabel?: string;\n searchPlaceholder?: string;\n searchAriaLabel?: string;\n };\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: HvFlowSidebarProps[\"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, \"hvFlowSidebarDrawer\");\n const groupsElementId = useUniqueId(id, \"hvFlowSidebarGroups\");\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 = debounce(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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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sidebar.styles.js","sources":["../../../../src/Flow/Sidebar/Sidebar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowSidebar\", {\n drawerPaper: { width: \"360px\" },\n titleContainer: {\n display: \"flex\",\n padding: theme.spacing(\"sm\", \"lg\", \"xs\", \"sm\"),\n },\n contentContainer: { padding: theme.spacing(0, \"lg\", \"sm\", \"lg\") },\n description: { color: theme.colors.secondary_60 },\n searchRoot: {\n paddingTop: theme.space.sm,\n paddingBottom: theme.space.sm,\n },\n groupsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.sm,\n listStyleType: \"none\",\n },\n nodeType: {\n marginBottom: theme.space.xs,\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,aAAa,EAAE,OAAO,QAAQ;AAAA,EAC9B,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACA,kBAAkB,EAAE,SAAS,MAAM,QAAQ,GAAG,MAAM,MAAM,IAAI,EAAE;AAAA,EAChE,aAAa,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EAChD,YAAY;AAAA,IACV,YAAY,MAAM,MAAM;AAAA,IACxB,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,eAAe;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,EAC5B;AACF,CAAC;"}
|
|
@@ -3,10 +3,10 @@ import { useMemo, useCallback } from "react";
|
|
|
3
3
|
import { Up, Down } from "@hitachivantara/uikit-react-icons";
|
|
4
4
|
import { HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
|
|
5
5
|
import { getColor } from "@hitachivantara/uikit-styles";
|
|
6
|
-
import { useClasses } from "./SidebarGroup.styles.
|
|
7
|
-
import { staticClasses } from "./SidebarGroup.styles.
|
|
8
|
-
import { useFlowContext } from "../../hooks/useFlowContext.
|
|
9
|
-
import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroupItem/DraggableSidebarGroupItem.
|
|
6
|
+
import { useClasses } from "./SidebarGroup.styles.js";
|
|
7
|
+
import { staticClasses } from "./SidebarGroup.styles.js";
|
|
8
|
+
import { useFlowContext } from "../../hooks/useFlowContext.js";
|
|
9
|
+
import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroupItem/DraggableSidebarGroupItem.js";
|
|
10
10
|
const HvFlowSidebarGroup = ({
|
|
11
11
|
id,
|
|
12
12
|
label,
|
|
@@ -61,4 +61,4 @@ export {
|
|
|
61
61
|
HvFlowSidebarGroup,
|
|
62
62
|
staticClasses as flowSidebarGroupClasses
|
|
63
63
|
};
|
|
64
|
-
//# sourceMappingURL=SidebarGroup.
|
|
64
|
+
//# sourceMappingURL=SidebarGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidebarGroup.js","sources":["../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {\n ExtractNames,\n HvButton,\n HvButtonProps,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n HvFlowDraggableSidebarGroupItem,\n HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\nimport { useFlowContext } from \"../../hooks\";\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":";;;;;;;;;AA4CO,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;"}
|
|
@@ -0,0 +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 }\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;"}
|
|
@@ -3,7 +3,7 @@ import { useRef } from "react";
|
|
|
3
3
|
import { useForkRef } from "@mui/material/utils";
|
|
4
4
|
import { useDraggable } from "@dnd-kit/core";
|
|
5
5
|
import { useUniqueId } from "@hitachivantara/uikit-react-core";
|
|
6
|
-
import { HvFlowSidebarGroupItem } from "./SidebarGroupItem.
|
|
6
|
+
import { HvFlowSidebarGroupItem } from "./SidebarGroupItem.js";
|
|
7
7
|
const HvFlowDraggableSidebarGroupItem = ({
|
|
8
8
|
id,
|
|
9
9
|
label,
|
|
@@ -49,4 +49,4 @@ const HvFlowDraggableSidebarGroupItem = ({
|
|
|
49
49
|
export {
|
|
50
50
|
HvFlowDraggableSidebarGroupItem
|
|
51
51
|
};
|
|
52
|
-
//# sourceMappingURL=DraggableSidebarGroupItem.
|
|
52
|
+
//# sourceMappingURL=DraggableSidebarGroupItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { useDraggable } from \"@dnd-kit/core\";\n\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\n const elementId = useUniqueId(id, `hvFlowDraggableItem-${type}`);\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":";;;;;;AAqBO,MAAM,kCAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4C;AACpC,QAAA,UAAU,OAAoB,IAAI;AAExC,QAAM,YAAY,YAAY,IAAI,uBAAuB,IAAI,EAAE;AAE/D,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;"}
|
|
@@ -2,8 +2,8 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { HvTypography } from "@hitachivantara/uikit-react-core";
|
|
4
4
|
import { Drag } from "@hitachivantara/uikit-react-icons";
|
|
5
|
-
import { useClasses } from "./SidebarGroupItem.styles.
|
|
6
|
-
import { staticClasses } from "./SidebarGroupItem.styles.
|
|
5
|
+
import { useClasses } from "./SidebarGroupItem.styles.js";
|
|
6
|
+
import { staticClasses } from "./SidebarGroupItem.styles.js";
|
|
7
7
|
const HvFlowSidebarGroupItem = forwardRef(
|
|
8
8
|
({
|
|
9
9
|
label,
|
|
@@ -35,4 +35,4 @@ export {
|
|
|
35
35
|
HvFlowSidebarGroupItem,
|
|
36
36
|
staticClasses as flowSidebarGroupItemClasses
|
|
37
37
|
};
|
|
38
|
-
//# sourceMappingURL=SidebarGroupItem.
|
|
38
|
+
//# sourceMappingURL=SidebarGroupItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\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":";;;;;;AAwBO,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;"}
|
|
@@ -0,0 +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 }\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;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport {\n HvFlowSidebarGroupNodes,\n HvFlowSidebarGroupNode,\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((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 // @ts-ignore\n name: \"Default\",\n label: \"Default\",\n nodes: nodesWithoutGroupId,\n ...defaultGroupProps,\n };\n }\n\n return acc;\n }, {} as Record<string, NodeGroup>);\n};\n"],"names":[],"mappings":"AASO,MAAM,cAAc,CACzB,YACA,WACA,sBACG;AACH,MAAI,CAAC;AAAY,WAAO;AAExB,SAAO,OAAO,QAAQ,UAAU,EAAE,OAAO,CAAC,KAAK,SAAS;AACtD,UAAM,mBAA6C,CAAA;AACnD,UAAM,sBAAgD,CAAA;AAEtD,QAAI,WAAW;AACb,iBAAW,CAAC,UAAU,IAAI,KAAK,OAAO,QAAQ,SAAS,GAAG;AACxD,YAAI,KAAK,MAAM,YAAY,KAAK,CAAC,GAAG;AAClC,2BAAiB,KAAK;AAAA,YACpB,MAAM;AAAA,YACN,OAAO,KAAK,MAAM;AAAA,YAClB,MAAM,KAAK,MAAM;AAAA,UAAA,CAClB;AAAA,QACQ,WAAA,CAAC,KAAK,MAAM,SAAS;AAC9B,8BAAoB,KAAK;AAAA,YACvB,MAAM;AAAA,YACN,OAAO,KAAK,MAAM,SAAS;AAAA,YAC3B,MAAM,KAAK,MAAM;AAAA,UAAA,CAClB;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEI,QAAA,KAAK,CAAC,CAAC,IAAI;AAAA,MACb,GAAG,KAAK,CAAC;AAAA,MACT,OAAO;AAAA,IAAA;AAIL,QAAA,oBAAoB,SAAS,GAAG;AAClC,UAAI,UAAU;AAAA;AAAA,QAEZ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAEP;AAEO,WAAA;AAAA,EACT,GAAG,CAA+B,CAAA;AACpC;"}
|