@hitachivantara/uikit-react-lab 5.20.3 → 5.20.4
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/esm/Dashboard/{Dashboard.js → Dashboard.mjs} +3 -3
- package/dist/esm/Dashboard/Dashboard.mjs.map +1 -0
- package/dist/esm/Dashboard/{Dashboard.styles.js → Dashboard.styles.mjs} +1 -1
- package/dist/esm/Dashboard/Dashboard.styles.mjs.map +1 -0
- package/dist/esm/Flow/Background/{Background.js → Background.mjs} +1 -1
- package/dist/esm/Flow/Background/Background.mjs.map +1 -0
- package/dist/esm/Flow/Controls/{Controls.js → Controls.mjs} +1 -1
- package/dist/esm/Flow/Controls/Controls.mjs.map +1 -0
- package/dist/esm/Flow/{DroppableFlow.js → DroppableFlow.mjs} +6 -6
- package/dist/esm/Flow/DroppableFlow.mjs.map +1 -0
- package/dist/esm/Flow/Empty/{Empty.js → Empty.mjs} +2 -2
- package/dist/esm/Flow/Empty/Empty.mjs.map +1 -0
- package/dist/esm/Flow/Empty/{Empty.styles.js → Empty.styles.mjs} +1 -1
- package/dist/esm/Flow/Empty/Empty.styles.mjs.map +1 -0
- package/dist/esm/Flow/{Flow.js → Flow.mjs} +3 -3
- package/dist/esm/Flow/Flow.mjs.map +1 -0
- package/dist/esm/Flow/{Flow.styles.js → Flow.styles.mjs} +2 -2
- package/dist/esm/Flow/Flow.styles.mjs.map +1 -0
- package/dist/esm/Flow/FlowContext/{FlowContext.js → FlowContext.mjs} +2 -2
- package/dist/esm/Flow/FlowContext/FlowContext.mjs.map +1 -0
- package/dist/esm/Flow/FlowContext/{NodeMetaContext.js → NodeMetaContext.mjs} +1 -1
- package/dist/esm/Flow/FlowContext/NodeMetaContext.mjs.map +1 -0
- package/dist/esm/Flow/Minimap/{Minimap.js → Minimap.mjs} +3 -3
- package/dist/esm/Flow/Minimap/Minimap.mjs.map +1 -0
- package/dist/esm/Flow/Minimap/{Minimap.styles.js → Minimap.styles.mjs} +1 -1
- package/dist/esm/Flow/Minimap/Minimap.styles.mjs.map +1 -0
- package/dist/esm/Flow/Node/{BaseNode.js → BaseNode.mjs} +5 -5
- package/dist/esm/Flow/Node/BaseNode.mjs.map +1 -0
- package/dist/esm/Flow/Node/{BaseNode.styles.js → BaseNode.styles.mjs} +1 -1
- package/dist/esm/Flow/Node/BaseNode.styles.mjs.map +1 -0
- package/dist/esm/Flow/Node/{Node.js → Node.mjs} +7 -7
- package/dist/esm/Flow/Node/Node.mjs.map +1 -0
- package/dist/esm/Flow/Node/{Node.styles.js → Node.styles.mjs} +1 -1
- package/dist/esm/Flow/Node/Node.styles.mjs.map +1 -0
- package/dist/esm/Flow/Node/Parameters/{ParamRenderer.js → ParamRenderer.mjs} +3 -3
- package/dist/esm/Flow/Node/Parameters/ParamRenderer.mjs.map +1 -0
- package/dist/esm/Flow/Node/Parameters/{Select.js → Select.mjs} +1 -1
- package/dist/esm/Flow/Node/Parameters/Select.mjs.map +1 -0
- package/dist/esm/Flow/Node/Parameters/{Text.js → Text.mjs} +1 -1
- package/dist/esm/Flow/Node/Parameters/Text.mjs.map +1 -0
- package/dist/esm/Flow/Sidebar/{Sidebar.js → Sidebar.mjs} +8 -8
- package/dist/esm/Flow/Sidebar/Sidebar.mjs.map +1 -0
- package/dist/esm/Flow/Sidebar/{Sidebar.styles.js → Sidebar.styles.mjs} +1 -1
- package/dist/esm/Flow/Sidebar/Sidebar.styles.mjs.map +1 -0
- package/dist/esm/Flow/Sidebar/SidebarGroup/{SidebarGroup.js → SidebarGroup.mjs} +5 -5
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.mjs.map +1 -0
- package/dist/esm/Flow/Sidebar/SidebarGroup/{SidebarGroup.styles.js → SidebarGroup.styles.mjs} +1 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.mjs.map +1 -0
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/{DraggableSidebarGroupItem.js → DraggableSidebarGroupItem.mjs} +2 -2
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.mjs.map +1 -0
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/{SidebarGroupItem.js → SidebarGroupItem.mjs} +3 -3
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.mjs.map +1 -0
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/{SidebarGroupItem.styles.js → SidebarGroupItem.styles.mjs} +1 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.mjs.map +1 -0
- package/dist/esm/Flow/Sidebar/{utils.js → utils.mjs} +1 -1
- package/dist/esm/Flow/Sidebar/utils.mjs.map +1 -0
- package/dist/esm/Flow/{base.js → base.mjs} +1 -1
- package/dist/esm/Flow/base.mjs.map +1 -0
- package/dist/esm/Flow/hooks/{useFlowContext.js → useFlowContext.mjs} +2 -2
- package/dist/esm/Flow/hooks/useFlowContext.mjs.map +1 -0
- package/dist/esm/Flow/hooks/{useFlowNode.js → useFlowNode.mjs} +1 -1
- package/dist/esm/Flow/hooks/useFlowNode.mjs.map +1 -0
- package/dist/esm/Flow/hooks/{useFlowNodeMeta.js → useFlowNodeMeta.mjs} +2 -2
- package/dist/esm/Flow/hooks/useFlowNodeMeta.mjs.map +1 -0
- package/dist/esm/Flow/nodes/{DashboardNode.js → DashboardNode.mjs} +3 -3
- package/dist/esm/Flow/nodes/DashboardNode.mjs.map +1 -0
- package/dist/esm/StepNavigation/DefaultNavigation/{DefaultNavigation.js → DefaultNavigation.mjs} +3 -3
- package/dist/esm/StepNavigation/DefaultNavigation/DefaultNavigation.mjs.map +1 -0
- package/dist/esm/StepNavigation/DefaultNavigation/Step/{Step.js → Step.mjs} +3 -3
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.mjs.map +1 -0
- package/dist/esm/StepNavigation/DefaultNavigation/Step/{Step.styles.js → Step.styles.mjs} +1 -1
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.styles.mjs.map +1 -0
- package/dist/esm/StepNavigation/DefaultNavigation/{utils.js → utils.mjs} +1 -1
- package/dist/esm/StepNavigation/DefaultNavigation/utils.mjs.map +1 -0
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/{Dot.js → Dot.mjs} +4 -4
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.mjs.map +1 -0
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/{Dot.styles.js → Dot.styles.mjs} +1 -1
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.styles.mjs.map +1 -0
- package/dist/esm/StepNavigation/SimpleNavigation/{SimpleNavigation.js → SimpleNavigation.mjs} +3 -3
- package/dist/esm/StepNavigation/SimpleNavigation/SimpleNavigation.mjs.map +1 -0
- package/dist/esm/StepNavigation/SimpleNavigation/{utils.js → utils.mjs} +1 -1
- package/dist/esm/StepNavigation/SimpleNavigation/utils.mjs.map +1 -0
- package/dist/esm/StepNavigation/{StepNavigation.js → StepNavigation.mjs} +6 -6
- package/dist/esm/StepNavigation/StepNavigation.mjs.map +1 -0
- package/dist/esm/StepNavigation/{StepNavigation.styles.js → StepNavigation.styles.mjs} +1 -1
- package/dist/esm/StepNavigation/StepNavigation.styles.mjs.map +1 -0
- package/dist/esm/StepNavigation/{utils.js → utils.mjs} +1 -1
- package/dist/esm/StepNavigation/utils.mjs.map +1 -0
- package/dist/esm/Wizard/{Wizard.js → Wizard.mjs} +8 -8
- package/dist/esm/Wizard/Wizard.mjs.map +1 -0
- package/dist/esm/Wizard/{Wizard.styles.js → Wizard.styles.mjs} +1 -1
- package/dist/esm/Wizard/Wizard.styles.mjs.map +1 -0
- package/dist/esm/Wizard/WizardActions/{WizardActions.js → WizardActions.mjs} +4 -4
- package/dist/esm/Wizard/WizardActions/WizardActions.mjs.map +1 -0
- package/dist/esm/Wizard/WizardActions/{WizardActions.styles.js → WizardActions.styles.mjs} +1 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.styles.mjs.map +1 -0
- package/dist/esm/Wizard/WizardContainer/{WizardContainer.js → WizardContainer.mjs} +3 -3
- package/dist/esm/Wizard/WizardContainer/WizardContainer.mjs.map +1 -0
- package/dist/esm/Wizard/WizardContainer/{WizardContainer.styles.js → WizardContainer.styles.mjs} +1 -1
- package/dist/esm/Wizard/WizardContainer/WizardContainer.styles.mjs.map +1 -0
- package/dist/esm/Wizard/WizardContent/{LoadingContainer.js → LoadingContainer.mjs} +2 -2
- package/dist/esm/Wizard/WizardContent/LoadingContainer.mjs.map +1 -0
- package/dist/esm/Wizard/WizardContent/{LoadingContainer.styles.js → LoadingContainer.styles.mjs} +1 -1
- package/dist/esm/Wizard/WizardContent/LoadingContainer.styles.mjs.map +1 -0
- package/dist/esm/Wizard/WizardContent/{WizardContent.js → WizardContent.mjs} +5 -5
- package/dist/esm/Wizard/WizardContent/WizardContent.mjs.map +1 -0
- package/dist/esm/Wizard/WizardContent/{WizardContent.styles.js → WizardContent.styles.mjs} +1 -1
- package/dist/esm/Wizard/WizardContent/WizardContent.styles.mjs.map +1 -0
- package/dist/esm/Wizard/WizardContext/{WizardContext.js → WizardContext.mjs} +1 -1
- package/dist/esm/Wizard/WizardContext/WizardContext.mjs.map +1 -0
- package/dist/esm/Wizard/WizardTitle/{WizardTitle.js → WizardTitle.mjs} +5 -5
- package/dist/esm/Wizard/WizardTitle/WizardTitle.mjs.map +1 -0
- package/dist/esm/Wizard/WizardTitle/{WizardTitle.styles.js → WizardTitle.styles.mjs} +1 -1
- package/dist/esm/Wizard/WizardTitle/WizardTitle.styles.mjs.map +1 -0
- package/dist/esm/{index.js → index.mjs} +33 -33
- package/dist/esm/index.mjs.map +1 -0
- package/package.json +7 -7
- package/dist/esm/Dashboard/Dashboard.js.map +0 -1
- package/dist/esm/Dashboard/Dashboard.styles.js.map +0 -1
- package/dist/esm/Flow/Background/Background.js.map +0 -1
- package/dist/esm/Flow/Controls/Controls.js.map +0 -1
- package/dist/esm/Flow/DroppableFlow.js.map +0 -1
- package/dist/esm/Flow/Empty/Empty.js.map +0 -1
- package/dist/esm/Flow/Empty/Empty.styles.js.map +0 -1
- package/dist/esm/Flow/Flow.js.map +0 -1
- package/dist/esm/Flow/Flow.styles.js.map +0 -1
- package/dist/esm/Flow/FlowContext/FlowContext.js.map +0 -1
- package/dist/esm/Flow/FlowContext/NodeMetaContext.js.map +0 -1
- package/dist/esm/Flow/Minimap/Minimap.js.map +0 -1
- package/dist/esm/Flow/Minimap/Minimap.styles.js.map +0 -1
- package/dist/esm/Flow/Node/BaseNode.js.map +0 -1
- package/dist/esm/Flow/Node/BaseNode.styles.js.map +0 -1
- package/dist/esm/Flow/Node/Node.js.map +0 -1
- package/dist/esm/Flow/Node/Node.styles.js.map +0 -1
- package/dist/esm/Flow/Node/Parameters/ParamRenderer.js.map +0 -1
- package/dist/esm/Flow/Node/Parameters/Select.js.map +0 -1
- package/dist/esm/Flow/Node/Parameters/Text.js.map +0 -1
- package/dist/esm/Flow/Sidebar/Sidebar.js.map +0 -1
- package/dist/esm/Flow/Sidebar/Sidebar.styles.js.map +0 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.js.map +0 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.js.map +0 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js.map +0 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js.map +0 -1
- package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js.map +0 -1
- package/dist/esm/Flow/Sidebar/utils.js.map +0 -1
- package/dist/esm/Flow/base.js.map +0 -1
- package/dist/esm/Flow/hooks/useFlowContext.js.map +0 -1
- package/dist/esm/Flow/hooks/useFlowNode.js.map +0 -1
- package/dist/esm/Flow/hooks/useFlowNodeMeta.js.map +0 -1
- package/dist/esm/Flow/nodes/DashboardNode.js.map +0 -1
- package/dist/esm/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +0 -1
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.js.map +0 -1
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.styles.js.map +0 -1
- package/dist/esm/StepNavigation/DefaultNavigation/utils.js.map +0 -1
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.js.map +0 -1
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.styles.js.map +0 -1
- package/dist/esm/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +0 -1
- package/dist/esm/StepNavigation/SimpleNavigation/utils.js.map +0 -1
- package/dist/esm/StepNavigation/StepNavigation.js.map +0 -1
- package/dist/esm/StepNavigation/StepNavigation.styles.js.map +0 -1
- package/dist/esm/StepNavigation/utils.js.map +0 -1
- package/dist/esm/Wizard/Wizard.js.map +0 -1
- package/dist/esm/Wizard/Wizard.styles.js.map +0 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.js.map +0 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.styles.js.map +0 -1
- package/dist/esm/Wizard/WizardContainer/WizardContainer.js.map +0 -1
- package/dist/esm/Wizard/WizardContainer/WizardContainer.styles.js.map +0 -1
- package/dist/esm/Wizard/WizardContent/LoadingContainer.js.map +0 -1
- package/dist/esm/Wizard/WizardContent/LoadingContainer.styles.js.map +0 -1
- package/dist/esm/Wizard/WizardContent/WizardContent.js.map +0 -1
- package/dist/esm/Wizard/WizardContent/WizardContent.styles.js.map +0 -1
- package/dist/esm/Wizard/WizardContext/WizardContext.js.map +0 -1
- package/dist/esm/Wizard/WizardTitle/WizardTitle.js.map +0 -1
- package/dist/esm/Wizard/WizardTitle/WizardTitle.styles.js.map +0 -1
- package/dist/esm/index.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidebarGroup.mjs","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.mjs","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.mjs";
|
|
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.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DraggableSidebarGroupItem.mjs","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.mjs";
|
|
6
|
+
import { staticClasses } from "./SidebarGroupItem.styles.mjs";
|
|
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.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidebarGroupItem.mjs","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.mjs","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.mjs","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;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base.mjs","sources":["../../../src/Flow/base.ts"],"sourcesContent":["import { css } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const flowStyles = css`\n /* this gets exported as style.css and can be used for the default theming */\n /* these are the necessary styles for React Flow, they get used by base.css and style.css */\n .react-flow__container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n .react-flow__pane {\n z-index: 1;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__pane.selection {\n cursor: pointer;\n }\n .react-flow__pane.dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .react-flow__viewport {\n transform-origin: 0 0;\n z-index: 2;\n pointer-events: none;\n }\n .react-flow__renderer {\n z-index: 4;\n }\n .react-flow__selection {\n z-index: 6;\n }\n .react-flow__nodesselection-rect:focus,\n .react-flow__nodesselection-rect:focus-visible {\n outline: none;\n }\n .react-flow .react-flow__edges {\n pointer-events: none;\n overflow: visible;\n }\n .react-flow__edge-path,\n .react-flow__connection-path {\n stroke: ${theme.colors.secondary};\n stroke-width: 1;\n fill: none;\n }\n .react-flow__edge {\n pointer-events: visibleStroke;\n cursor: pointer;\n }\n .react-flow__edge.animated path {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n .react-flow__edge.animated path.react-flow__edge-interaction {\n stroke-dasharray: none;\n -webkit-animation: none;\n animation: none;\n }\n .react-flow__edge.inactive {\n pointer-events: none;\n }\n .react-flow__edge.selected,\n .react-flow__edge:focus,\n .react-flow__edge:focus-visible {\n outline: none;\n }\n .react-flow__edge.selected .react-flow__edge-path,\n .react-flow__edge:focus .react-flow__edge-path,\n .react-flow__edge:focus-visible .react-flow__edge-path {\n stroke: #555;\n }\n .react-flow__edge-textwrapper {\n pointer-events: all;\n }\n .react-flow__edge-textbg {\n fill: white;\n }\n .react-flow__edge .react-flow__edge-text {\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .react-flow__connection {\n pointer-events: none;\n }\n .react-flow__connection .animated {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n .react-flow__connectionline {\n z-index: 1001;\n }\n .react-flow__nodes {\n pointer-events: none;\n transform-origin: 0 0;\n }\n .react-flow__node {\n position: absolute;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n box-sizing: border-box;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__node.dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .react-flow__nodesselection {\n z-index: 3;\n transform-origin: left top;\n pointer-events: none;\n }\n .react-flow__nodesselection-rect {\n position: absolute;\n pointer-events: all;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__handle {\n position: absolute;\n pointer-events: none;\n min-width: 5px;\n min-height: 5px;\n width: 6px;\n height: 6px;\n background: #1a192b;\n border: 1px solid white;\n border-radius: 100%;\n }\n .react-flow__handle.connectionindicator {\n pointer-events: all;\n cursor: crosshair;\n }\n .react-flow__handle-bottom {\n top: auto;\n left: 50%;\n bottom: -4px;\n transform: translate(-50%, 0);\n }\n .react-flow__handle-top {\n left: 50%;\n top: -4px;\n transform: translate(-50%, 0);\n }\n .react-flow__handle-left {\n top: 50%;\n left: -4px;\n transform: translate(0, -50%);\n }\n .react-flow__handle-right {\n right: -4px;\n top: 50%;\n transform: translate(0, -50%);\n }\n .react-flow__edgeupdater {\n cursor: move;\n pointer-events: all;\n }\n .react-flow__panel {\n position: absolute;\n z-index: 5;\n margin: 15px;\n }\n .react-flow__panel.top {\n top: 0;\n }\n .react-flow__panel.bottom {\n bottom: 0;\n }\n .react-flow__panel.left {\n left: 0;\n }\n .react-flow__panel.right {\n right: 0;\n }\n .react-flow__panel.center {\n left: 50%;\n transform: translateX(-50%);\n }\n .react-flow__attribution {\n font-size: 10px;\n background: rgba(255, 255, 255, 0.5);\n padding: 2px 3px;\n margin: 0;\n }\n .react-flow__attribution a {\n text-decoration: none;\n color: #999;\n }\n @-webkit-keyframes dashdraw {\n from {\n stroke-dashoffset: 10;\n }\n }\n @keyframes dashdraw {\n from {\n stroke-dashoffset: 10;\n }\n }\n .react-flow__edgelabel-renderer {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .react-flow__edge.updating .react-flow__edge-path {\n stroke: #777;\n }\n .react-flow__edge-text {\n font-size: 10px;\n }\n .react-flow__node.selectable:focus,\n .react-flow__node.selectable:focus-visible {\n outline: none;\n }\n .react-flow__node-default,\n .react-flow__node-input,\n .react-flow__node-output,\n .react-flow__node-group {\n padding: ${theme.space.sm};\n border-radius: ${theme.radii.round};\n width: 150px;\n color: ${theme.colors.secondary};\n text-align: center;\n border: 1px solid ${theme.colors.negative};\n background-color: ${theme.colors.negative_20};\n }\n .react-flow__node-default::before {\n content: \"Unknown node type\";\n display: block;\n }\n .react-flow__node-default.selectable:hover,\n .react-flow__node-input.selectable:hover,\n .react-flow__node-output.selectable:hover,\n .react-flow__node-group.selectable:hover {\n box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n }\n .react-flow__node-default.selectable.selected,\n .react-flow__node-default.selectable:focus,\n .react-flow__node-default.selectable:focus-visible,\n .react-flow__node-input.selectable.selected,\n .react-flow__node-input.selectable:focus,\n .react-flow__node-input.selectable:focus-visible,\n .react-flow__node-output.selectable.selected,\n .react-flow__node-output.selectable:focus,\n .react-flow__node-output.selectable:focus-visible,\n .react-flow__node-group.selectable.selected,\n .react-flow__node-group.selectable:focus,\n .react-flow__node-group.selectable:focus-visible {\n box-shadow: 0 0 0 0.5px #1a192b;\n }\n .react-flow__node-group {\n background-color: rgba(240, 240, 240, 0.25);\n }\n .react-flow__nodesselection-rect,\n .react-flow__selection {\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n }\n .react-flow__nodesselection-rect:focus,\n .react-flow__nodesselection-rect:focus-visible,\n .react-flow__selection:focus,\n .react-flow__selection:focus-visible {\n outline: none;\n }\n .react-flow__controls {\n box-shadow: ${theme.colors.shadow};\n }\n .react-flow__controls-button {\n border: none;\n background: #fefefe;\n border-bottom: 1px solid #eee;\n box-sizing: content-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 16px;\n height: 16px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n padding: 5px;\n }\n .react-flow__controls-button:hover {\n background: #f4f4f4;\n }\n .react-flow__controls-button svg {\n width: 100%;\n max-width: 12px;\n max-height: 12px;\n }\n .react-flow__controls-button:disabled {\n pointer-events: none;\n }\n .react-flow__controls-button:disabled svg {\n fill-opacity: 0.4;\n }\n .react-flow__minimap {\n background-color: #fff;\n }\n .react-flow__resize-control {\n position: absolute;\n }\n .react-flow__resize-control.left,\n .react-flow__resize-control.right {\n cursor: ew-resize;\n }\n .react-flow__resize-control.top,\n .react-flow__resize-control.bottom {\n cursor: ns-resize;\n }\n .react-flow__resize-control.top.left,\n .react-flow__resize-control.bottom.right {\n cursor: nwse-resize;\n }\n .react-flow__resize-control.bottom.left,\n .react-flow__resize-control.top.right {\n cursor: nesw-resize;\n }\n /* handle styles */\n .react-flow__resize-control.handle {\n width: 4px;\n height: 4px;\n border: 1px solid #fff;\n border-radius: 1px;\n background-color: ${theme.colors.primary};\n transform: translate(-50%, -50%);\n }\n .react-flow__resize-control.handle.left {\n left: 0;\n top: 50%;\n }\n .react-flow__resize-control.handle.right {\n left: 100%;\n top: 50%;\n }\n .react-flow__resize-control.handle.top {\n left: 50%;\n top: 0;\n }\n .react-flow__resize-control.handle.bottom {\n left: 50%;\n top: 100%;\n }\n .react-flow__resize-control.handle.top.left {\n left: 0;\n }\n .react-flow__resize-control.handle.bottom.left {\n left: 0;\n }\n .react-flow__resize-control.handle.top.right {\n left: 100%;\n }\n .react-flow__resize-control.handle.bottom.right {\n left: 100%;\n }\n /* line styles */\n .react-flow__resize-control.line {\n border-color: ${theme.colors.primary};\n border-width: 0;\n border-style: solid;\n }\n .react-flow__resize-control.line.left,\n .react-flow__resize-control.line.right {\n width: 1px;\n transform: translate(-50%, 0);\n top: 0;\n height: 100%;\n }\n .react-flow__resize-control.line.left {\n left: 0;\n border-left-width: 1px;\n }\n .react-flow__resize-control.line.right {\n left: 100%;\n border-right-width: 1px;\n }\n .react-flow__resize-control.line.top,\n .react-flow__resize-control.line.bottom {\n height: 1px;\n transform: translate(0, -50%);\n left: 0;\n width: 100%;\n }\n .react-flow__resize-control.line.top {\n top: 0;\n border-top-width: 1px;\n }\n .react-flow__resize-control.line.bottom {\n border-bottom-width: 1px;\n top: 100%;\n }\n`;\n"],"names":[],"mappings":";;AAGO,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cA2CZ,MAAM,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eA4LrB,MAAM,MAAM,EAAE;AAAA,qBACR,MAAM,MAAM,KAAK;AAAA;AAAA,aAEzB,MAAM,OAAO,SAAS;AAAA;AAAA,wBAEX,MAAM,OAAO,QAAQ;AAAA,wBACrB,MAAM,OAAO,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAyC9B,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA4Db,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAiCxB,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useContext } from "react";
|
|
2
|
-
import { HvFlowContext } from "../FlowContext/FlowContext.
|
|
2
|
+
import { HvFlowContext } from "../FlowContext/FlowContext.mjs";
|
|
3
3
|
const useFlowContext = () => useContext(HvFlowContext);
|
|
4
4
|
export {
|
|
5
5
|
useFlowContext
|
|
6
6
|
};
|
|
7
|
-
//# sourceMappingURL=useFlowContext.
|
|
7
|
+
//# sourceMappingURL=useFlowContext.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFlowContext.mjs","sources":["../../../../src/Flow/hooks/useFlowContext.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvFlowContext } from \"../FlowContext\";\n\nexport const useFlowContext = () => useContext(HvFlowContext);\n"],"names":[],"mappings":";;AAIa,MAAA,iBAAiB,MAAM,WAAW,aAAa;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFlowNode.mjs","sources":["../../../../src/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n Node,\n Edge,\n ReactFlowState,\n useStore,\n useNodes,\n useEdges,\n} from \"reactflow\";\n\nexport function useFlowNode<T extends Node = Node>(id: string) {\n const nodeSelector = useCallback(\n (state: ReactFlowState) =>\n state.getNodes().find((n: Node): n is T => n.id === id),\n [id]\n );\n return useStore<T | undefined>(nodeSelector);\n}\n\nexport function useFlowNodeInputEdges(id: string) {\n const inputEdgesSelector = useCallback(\n (state: ReactFlowState) => state.edges.filter((e: Edge) => e.target === id),\n [id]\n );\n return useStore(inputEdgesSelector);\n}\n\nexport function useFlowNodeOutputEdges(id: string) {\n const outputEdgesSelector = useCallback(\n (state: ReactFlowState) => state.edges.filter((e: Edge) => e.source === id),\n [id]\n );\n return useStore(outputEdgesSelector);\n}\n\nexport function useFlowNodeEdges(id: string) {\n const edgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter((e: Edge) => e.source === id || e.target === id),\n [id]\n );\n return useStore(edgesSelector);\n}\n\nexport function useFlowNodeParents(id: string) {\n const inputEdges = useFlowNodeInputEdges(id);\n const parentNodesSelector = useCallback(\n (state: ReactFlowState) => {\n return inputEdges\n .map((e) => state.getNodes().find((n: Node) => n.id === e.source))\n .filter((n): n is Node => n !== null);\n },\n [inputEdges]\n );\n return useStore(parentNodesSelector);\n}\n\nexport function useFlowInputNodes<T = any>(id: string) {\n const nodes = useNodes();\n const edges = useEdges();\n\n return useMemo(() => {\n return edges\n .filter((e) => e.target === id)\n .map((e) => nodes.find((n) => n.id === e.source))\n .filter((n): n is Node<T> => n !== null);\n }, [edges, id, nodes]);\n}\n\nexport function useFlowOutputNodes<T = any>(id: string) {\n const nodes = useNodes();\n const edges = useEdges();\n\n return useMemo(() => {\n return edges\n .filter((e) => e.source === id)\n .map((e) => nodes.find((n) => n.id === e.target))\n .filter((n): n is Node<T> => n !== null);\n }, [edges, id, nodes]);\n}\n"],"names":[],"mappings":";;AAUO,SAAS,YAAmC,IAAY;AAC7D,QAAM,eAAe;AAAA,IACnB,CAAC,UACC,MAAM,WAAW,KAAK,CAAC,MAAoB,EAAE,OAAO,EAAE;AAAA,IACxD,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAwB,YAAY;AAC7C;AAEO,SAAS,sBAAsB,IAAY;AAChD,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAA0B,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,EAAE;AAAA,IAC1E,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,kBAAkB;AACpC;AAEO,SAAS,uBAAuB,IAAY;AACjD,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UAA0B,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,EAAE;AAAA,IAC1E,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,mBAAmB;AACrC;AAEO,SAAS,iBAAiB,IAAY;AAC3C,QAAM,gBAAgB;AAAA,IACpB,CAAC,UACC,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,MAAM,EAAE,WAAW,EAAE;AAAA,IACpE,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,aAAa;AAC/B;AAEO,SAAS,mBAAmB,IAAY;AACvC,QAAA,aAAa,sBAAsB,EAAE;AAC3C,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UAA0B;AAClB,aAAA,WACJ,IAAI,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK,CAAC,MAAY,EAAE,OAAO,EAAE,MAAM,CAAC,EAChE,OAAO,CAAC,MAAiB,MAAM,IAAI;AAAA,IACxC;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAEb,SAAO,SAAS,mBAAmB;AACrC;AAEO,SAAS,kBAA2B,IAAY;AACrD,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO,QAAQ,MAAM;AACZ,WAAA,MACJ,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,EAC7B,IAAI,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/C,OAAO,CAAC,MAAoB,MAAM,IAAI;AAAA,EACxC,GAAA,CAAC,OAAO,IAAI,KAAK,CAAC;AACvB;AAEO,SAAS,mBAA4B,IAAY;AACtD,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO,QAAQ,MAAM;AACZ,WAAA,MACJ,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,EAC7B,IAAI,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/C,OAAO,CAAC,MAAoB,MAAM,IAAI;AAAA,EACxC,GAAA,CAAC,OAAO,IAAI,KAAK,CAAC;AACvB;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.
|
|
1
|
+
import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.mjs";
|
|
2
2
|
function useFlowNodeMeta(id) {
|
|
3
3
|
const { registry } = useNodeMetaRegistry();
|
|
4
4
|
return registry[id];
|
|
@@ -6,4 +6,4 @@ function useFlowNodeMeta(id) {
|
|
|
6
6
|
export {
|
|
7
7
|
useFlowNodeMeta
|
|
8
8
|
};
|
|
9
|
-
//# sourceMappingURL=useFlowNodeMeta.
|
|
9
|
+
//# sourceMappingURL=useFlowNodeMeta.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFlowNodeMeta.mjs","sources":["../../../../src/Flow/hooks/useFlowNodeMeta.ts"],"sourcesContent":["import { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\n\nexport function useFlowNodeMeta(id: string) {\n const { registry } = useNodeMetaRegistry();\n\n return registry[id];\n}\n"],"names":[],"mappings":";AAEO,SAAS,gBAAgB,IAAY;AACpC,QAAA,EAAE,aAAa;AAErB,SAAO,SAAS,EAAE;AACpB;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { createClasses, theme, useLabels, HvDialog, HvDialogTitle, HvDialogContent, HvEmptyState, HvDialogActions, HvButton } from "@hitachivantara/uikit-react-core";
|
|
3
3
|
import { Info } from "@hitachivantara/uikit-react-icons";
|
|
4
|
-
import { HvFlowNode } from "../Node/Node.
|
|
5
|
-
import { HvDashboard } from "../../Dashboard/Dashboard.
|
|
4
|
+
import { HvFlowNode } from "../Node/Node.mjs";
|
|
5
|
+
import { HvDashboard } from "../../Dashboard/Dashboard.mjs";
|
|
6
6
|
const { staticClasses, useClasses } = createClasses("HvDashboardNode", {
|
|
7
7
|
actions: {
|
|
8
8
|
display: "flex",
|
|
@@ -88,4 +88,4 @@ export {
|
|
|
88
88
|
HvDashboardNode,
|
|
89
89
|
staticClasses as hvDashboardNodeClasses
|
|
90
90
|
};
|
|
91
|
-
//# sourceMappingURL=DashboardNode.
|
|
91
|
+
//# sourceMappingURL=DashboardNode.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DashboardNode.mjs","sources":["../../../../src/Flow/nodes/DashboardNode.tsx"],"sourcesContent":["import {\n ExtractNames,\n HvButton,\n HvDialog,\n HvDialogActions,\n HvDialogContent,\n HvDialogProps,\n HvDialogTitle,\n HvEmptyState,\n createClasses,\n theme,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDashboard, HvDashboardProps } from \"../../Dashboard\";\nimport { HvFlowNode, HvFlowNodeProps, HvFlowNodeClasses } from \"../Node\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvDashboardNode\", {\n actions: {\n display: \"flex\",\n justifyContent: \"space-around\",\n padding: theme.space.xs,\n },\n empty: {\n padding: theme.spacing(\"sm\", 0, 0, 0),\n },\n});\n\nexport { staticClasses as hvDashboardNodeClasses };\n\nconst DEFAULT_LABELS = {\n title: \"Dashboard\",\n description: \"Dashboard\",\n emptyMessage: \"No visualizations connected to the dashboard.\",\n dialogTitle: \"Configure dashboard\",\n dialogSubtitle: \"Please configure the layout of your dashboard as needed.\",\n dialogApply: \"Apply\",\n dialogCancel: \"Cancel\",\n};\n\nexport interface HvDashboardNodeClasses\n extends ExtractNames<typeof useClasses>,\n HvFlowNodeClasses {}\n\nexport interface HvDashboardNodeProps\n extends HvFlowNodeProps,\n Pick<HvDialogProps, \"open\" | \"onClose\">,\n Pick<HvDashboardProps, \"layout\"> {\n classes?: HvDashboardNodeClasses;\n labels?: typeof DEFAULT_LABELS;\n previewItems?: React.ReactNode;\n onApply?: () => void;\n onCancel?: () => void;\n\n dashboardProps?: Omit<HvDashboardProps, \"children\">;\n dialogProps?: HvDialogProps;\n}\n\nexport const HvDashboardNode = (props: HvDashboardNodeProps) => {\n const {\n id,\n open,\n layout,\n labels: labelsProp,\n classes: classesProp,\n previewItems,\n children,\n dialogProps,\n dashboardProps,\n onApply,\n onCancel,\n onClose,\n ...others\n } = props;\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n const { classes } = useClasses(classesProp);\n\n return (\n <HvFlowNode id={id} classes={classes as any} {...others}>\n <div className={classes.actions}>{children}</div>\n <HvDialog\n open={open}\n maxWidth=\"lg\"\n fullWidth\n onClose={onClose}\n {...dialogProps}\n >\n <HvDialogTitle variant=\"info\">{labels?.dialogTitle}</HvDialogTitle>\n <HvDialogContent indentContent>\n {labels?.dialogSubtitle}\n {layout && layout?.length > 0 ? (\n <HvDashboard\n cols={12}\n layout={layout}\n compactType=\"vertical\"\n rowHeight={80}\n margin={[16, 16]}\n containerPadding={[0, 16]}\n {...dashboardProps}\n >\n {previewItems}\n </HvDashboard>\n ) : (\n <HvEmptyState\n className={classes.empty}\n icon={<Info role=\"none\" />}\n message={labels?.emptyMessage}\n />\n )}\n </HvDialogContent>\n <HvDialogActions>\n <HvButton variant=\"primary\" onClick={onApply}>\n {labels?.dialogApply}\n </HvButton>\n <HvButton variant=\"secondarySubtle\" onClick={onCancel}>\n {labels?.dialogCancel}\n </HvButton>\n </HvDialogActions>\n </HvDialog>\n </HvFlowNode>\n );\n};\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EACrE,SAAS;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,MAAM,GAAG,GAAG,CAAC;AAAA,EACtC;AACF,CAAC;AAID,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;AAoBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACE,QAAA,SAAS,UAAU,gBAAgB,UAAU;AACnD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,SACG,qBAAA,YAAA,EAAW,IAAQ,SAA0B,GAAG,QAC/C,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,SAAU,UAAS;AAAA,IAC3C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAS;AAAA,QACT,WAAS;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,eAAc,EAAA,SAAQ,QAAQ,UAAA,QAAQ,aAAY;AAAA,UACnD,qBAAC,iBAAgB,EAAA,eAAa,MAC3B,UAAA;AAAA,YAAQ,QAAA;AAAA,YACR,UAAU,QAAQ,SAAS,IAC1B;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN;AAAA,gBACA,aAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,QAAQ,CAAC,IAAI,EAAE;AAAA,gBACf,kBAAkB,CAAC,GAAG,EAAE;AAAA,gBACvB,GAAG;AAAA,gBAEH,UAAA;AAAA,cAAA;AAAA,YAAA,IAGH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,QAAQ;AAAA,gBACnB,MAAM,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,gBACxB,SAAS,QAAQ;AAAA,cAAA;AAAA,YACnB;AAAA,UAAA,GAEJ;AAAA,+BACC,iBACC,EAAA,UAAA;AAAA,YAAA,oBAAC,YAAS,SAAQ,WAAU,SAAS,SAClC,kBAAQ,aACX;AAAA,gCACC,UAAS,EAAA,SAAQ,mBAAkB,SAAS,UAC1C,kBAAQ,cACX;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
package/dist/esm/StepNavigation/DefaultNavigation/{DefaultNavigation.js → DefaultNavigation.mjs}
RENAMED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useTheme } from "@hitachivantara/uikit-react-core";
|
|
3
|
-
import { getColor, stepSizes } from "./utils.
|
|
4
|
-
import { HvStep } from "./Step/Step.
|
|
3
|
+
import { getColor, stepSizes } from "./utils.mjs";
|
|
4
|
+
import { HvStep } from "./Step/Step.mjs";
|
|
5
5
|
const HvDefaultNavigation = ({
|
|
6
6
|
numSteps,
|
|
7
7
|
stepSize,
|
|
@@ -54,4 +54,4 @@ const HvDefaultNavigation = ({
|
|
|
54
54
|
export {
|
|
55
55
|
HvDefaultNavigation
|
|
56
56
|
};
|
|
57
|
-
//# sourceMappingURL=DefaultNavigation.
|
|
57
|
+
//# sourceMappingURL=DefaultNavigation.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DefaultNavigation.mjs","sources":["../../../../src/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n HvBaseProps,\n HvTheme,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStep, HvStepProps } from \"./Step\";\nimport { getColor, stepSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n stepsWidth: number;\n navWidth: number;\n separatorValues: {\n minWidth: number;\n maxWidth: number;\n getColor: (state: HvStepProps[\"state\"], activeTheme: HvTheme) => any;\n height: number;\n };\n stepValues: {\n minSize: number;\n maxSize: number;\n StepComponent: React.ComponentType<HvStepProps>;\n };\n};\n\nexport interface HvDefaultNavigationProps\n extends Omit<HvBaseProps, \"children\"> {\n /** Number of steps to show on the component. */\n numSteps: number;\n /** Sets one of the standard sizes of the steps. */\n stepSize: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Returns a `ReactNode` of the titles container. */\n getTitles: (\n getTitleProps?: (params: {\n state: HvStepProps[\"state\"];\n rawTitle: string;\n number: number;\n }) => { variant?: string; title?: string }\n ) => ReactNode;\n /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n getDynamicValues: (stepsWidth: number) => {\n width: number;\n titleWidth: number;\n separatorWidth: number;\n };\n /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvDefaultNavigation = ({\n numSteps,\n stepSize,\n getTitles,\n getDynamicValues,\n className,\n children,\n ...other\n}: HvDefaultNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // step values\n const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n const StepComponent = HvStep;\n //\n\n const stepsWidth = maxSize + minSize * (numSteps - 1);\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n const minWidth = Math.max(\n titleWidth - (maxSize + minSize) * 0.5,\n separatorWidth\n );\n //\n\n const Steps = children;\n\n const titles = getTitles(({ state }) => ({\n variant: \"label\",\n titleWidth,\n titleDisabled: state === \"Disabled\",\n }));\n\n return (\n <div {...other}>\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0,\n },\n stepValues: {\n minSize,\n maxSize,\n StepComponent,\n },\n }}\n />\n {titles}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAkDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AACxB,QAAA,EAAE,gBAAgB;AAGxB,QAAM,EAAE,WAAW,SAAS,QAAQ,YAAY,UAAU,QAAQ;AAClE,QAAM,gBAAgB;AAGhB,QAAA,aAAa,UAAU,WAAW,WAAW;AACnD,QAAM,EAAE,OAAO,YAAY,eAAe,IAAI,iBAAiB,UAAU;AAGzE,QAAM,WAAW,KAAK,IAAI,aAAa,SAAS,cAAc;AAC9D,QAAM,WAAW,KAAK;AAAA,IACpB,cAAc,UAAU,WAAW;AAAA,IACnC;AAAA,EAAA;AAIF,QAAM,QAAQ;AAEd,QAAM,SAAS,UAAU,CAAC,EAAE,aAAa;AAAA,IACvC,SAAS;AAAA,IACT;AAAA,IACA,eAAe,UAAU;AAAA,EACzB,EAAA;AAGA,SAAA,qBAAC,OAAK,EAAA,GAAG,OACP,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,iBAAiB;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAQ,aAAa,eAAe,0BAA0B;AAAA,UAChE;AAAA,UACA,YAAY;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { HourGlass, Level3Bad, Level0Good } from "@hitachivantara/uikit-react-icons";
|
|
3
3
|
import { HvButton, HvAvatar } from "@hitachivantara/uikit-react-core";
|
|
4
|
-
import { getColor, getSemantic } from "../utils.
|
|
5
|
-
import { useClasses } from "./Step.styles.
|
|
4
|
+
import { getColor, getSemantic } from "../utils.mjs";
|
|
5
|
+
import { useClasses } from "./Step.styles.mjs";
|
|
6
6
|
const HvStep = ({
|
|
7
7
|
className,
|
|
8
8
|
classes: classesProp,
|
|
@@ -90,4 +90,4 @@ const HvStep = ({
|
|
|
90
90
|
export {
|
|
91
91
|
HvStep
|
|
92
92
|
};
|
|
93
|
-
//# sourceMappingURL=Step.
|
|
93
|
+
//# sourceMappingURL=Step.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.mjs","sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import {\n Level0Good,\n Level3Bad,\n HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n HvAvatarSize,\n HvButtonProps,\n HvBaseProps,\n ExtractNames,\n HvAvatar,\n HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor, getSemantic } from \"../utils\";\nimport { useClasses } from \"./Step.styles\";\n\ntype HvStepClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepProps\n extends Pick<HvButtonProps, \"onClick\">,\n Omit<HvBaseProps, \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepClasses;\n /** State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"} */\n state:\n | \"Pending\"\n | \"Failed\"\n | \"Completed\"\n | \"Current\"\n | \"Disabled\"\n | \"Enabled\";\n /** Title of the step. */\n title: string;\n /** Sets one of the standard sizes of the step */\n size?: HvAvatarSize;\n /** Number of the step. */\n number?: number;\n /**\n * Define if a step is disabled/enabled.\n * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n */\n disabled?: boolean;\n}\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nexport const HvStep = ({\n className,\n classes: classesProp,\n state,\n title,\n onClick,\n disabled,\n size = \"md\",\n number = 1,\n}: HvStepProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const iconSize = {\n xs: \"XS\",\n sm: \"XS\",\n md: \"S\",\n ml: \"M\",\n xl: \"M\",\n }[size];\n\n const squareL = {\n Pending: 16,\n Failed: 24,\n Completed: 24,\n }[state];\n\n const svgSize = {\n xs: squareL - 8,\n sm: squareL,\n md: squareL + 8,\n lg: squareL + 16,\n xl: squareL + 24,\n }[size];\n\n const backgroundColor = getColor(state);\n\n const color = state === \"Pending\" ? \"atmo2\" : undefined;\n const semantic = state !== \"Pending\" ? getSemantic(state) : undefined;\n const status = state === \"Current\" ? \"secondary_60\" : undefined;\n\n const IconComponent = {\n Pending: HourGlass,\n Failed: Level3Bad,\n Completed: Level0Good,\n }[state];\n\n return (\n <div\n className={cx(\n classes.root,\n {\n [classes.notCurrent]: state !== \"Current\",\n },\n className\n )}\n >\n <HvButton\n className={cx(classes.ghost, {\n [classes.ghostDisabled]: state === \"Current\",\n })}\n aria-label={`${title}`}\n icon\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n <HvAvatar\n className={cx(classes.avatar, classes[size])}\n backgroundColor={backgroundColor}\n status={status}\n size={size}\n >\n {IconComponent ? (\n <IconComponent\n color={color}\n semantic={semantic}\n width={svgSize}\n height={svgSize}\n iconSize={iconSize}\n />\n ) : (\n number\n )}\n </HvAvatar>\n </HvButton>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;AAgDO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AACX,MAAmB;AACjB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,WAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAEN,QAAM,UAAU;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,KAAK;AAEP,QAAM,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI;AAAA,IACJ,IAAI,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI;AAEA,QAAA,kBAAkB,SAAS,KAAK;AAEhC,QAAA,QAAQ,UAAU,YAAY,UAAU;AAC9C,QAAM,WAAW,UAAU,YAAY,YAAY,KAAK,IAAI;AACtD,QAAA,SAAS,UAAU,YAAY,iBAAiB;AAEtD,QAAM,gBAAgB;AAAA,IACpB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,KAAK;AAGL,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG,UAAU;AAAA,QAClC;AAAA,QACA;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,OAAO;AAAA,YAC3B,CAAC,QAAQ,aAAa,GAAG,UAAU;AAAA,UAAA,CACpC;AAAA,UACD,cAAY,GAAG,KAAK;AAAA,UACpB,MAAI;AAAA,UACJ,oBAAoB;AAAA,UACpB,UAAU,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,UAC5D;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,IAAI,CAAC;AAAA,cAC3C;AAAA,cACA;AAAA,cACA;AAAA,cAEC,UACC,gBAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR;AAAA,gBAAA;AAAA,cAAA,IAGF;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.styles.mjs","sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvStep\", {\n root: {},\n ghost: {\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n \"&$ghostDisabled\": {\n cursor: \"default\",\n },\n \"&$ghostDisabled&:hover\": {\n cursor: \"default\",\n },\n },\n ghostDisabled: {},\n notCurrent: { margin: \"-8px\" },\n xs: {},\n sm: {},\n md: {},\n lg: {},\n xl: {},\n avatar: {\n \"&$xs\": {\n fontSize: \"0.625rem\",\n },\n \"&$sm\": {\n fontSize: \"1rem\",\n },\n \"&$md\": {\n fontSize: \"1.5rem\",\n },\n \"&$lg\": {\n fontSize: \"2rem\",\n },\n \"&$xl\": {\n fontSize: \"2.5rem\",\n },\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,OAAO;AAAA,IACL,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IACA,mBAAmB;AAAA,MACjB,QAAQ;AAAA,IACV;AAAA,IACA,0BAA0B;AAAA,MACxB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,YAAY,EAAE,QAAQ,OAAO;AAAA,EAC7B,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,EACF;AACF,CAAC;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.mjs","sources":["../../../../src/StepNavigation/DefaultNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { HvStepProps } from \"./Step\";\n\nexport const getColor = (state: HvStepProps[\"state\"]) =>\n ({\n Pending: theme.colors.warning ?? \"warning\",\n Failed: theme.colors.negative ?? \"negative\",\n Completed: theme.colors.positive ?? \"positive\",\n Current: theme.colors.secondary ?? \"secondary\",\n Disabled: theme.colors.secondary_60 ?? \"secondary_60\",\n Enabled: theme.colors.secondary ?? \"secondary\",\n }[state]);\n\nexport const getSemantic = (state: HvStepProps[\"state\"]) =>\n ({\n Pending: \"warning\",\n Failed: \"negative\",\n Completed: \"positive\",\n Current: \"secondary\",\n Disabled: \"secondary_60\",\n Enabled: \"secondary\",\n }[state]);\n\nconst EXTRA_SMALL = { container: 32, avatar: 24 };\nconst SMALL = { container: 40, avatar: 32 };\nconst MEDIUM = { container: 48, avatar: 40 };\nconst LARGE = { container: 60, avatar: 52 };\nconst EXTRA_LARGE = { container: 96, avatar: 88 };\n\nexport const stepSizes = {\n xs: EXTRA_SMALL,\n sm: SMALL,\n md: MEDIUM,\n lg: LARGE,\n xl: EXTRA_LARGE,\n};\n"],"names":[],"mappings":";AAIa,MAAA,WAAW,CAAC,WACtB;AAAA,EACC,SAAS,MAAM,OAAO,WAAW;AAAA,EACjC,QAAQ,MAAM,OAAO,YAAY;AAAA,EACjC,WAAW,MAAM,OAAO,YAAY;AAAA,EACpC,SAAS,MAAM,OAAO,aAAa;AAAA,EACnC,UAAU,MAAM,OAAO,gBAAgB;AAAA,EACvC,SAAS,MAAM,OAAO,aAAa;AACrC,GAAE,KAAK;AAEI,MAAA,cAAc,CAAC,WACzB;AAAA,EACC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX,GAAE,KAAK;AAET,MAAM,cAAc,EAAE,WAAW,IAAI,QAAQ,GAAG;AAChD,MAAM,QAAQ,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC1C,MAAM,SAAS,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC3C,MAAM,QAAQ,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC1C,MAAM,cAAc,EAAE,WAAW,IAAI,QAAQ,GAAG;AAEzC,MAAM,YAAY;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { HvButton } from "@hitachivantara/uikit-react-core";
|
|
3
|
-
import { getColor, dotSizes } from "../utils.
|
|
4
|
-
import { useClasses } from "./Dot.styles.
|
|
5
|
-
import { staticClasses } from "./Dot.styles.
|
|
3
|
+
import { getColor, dotSizes } from "../utils.mjs";
|
|
4
|
+
import { useClasses } from "./Dot.styles.mjs";
|
|
5
|
+
import { staticClasses } from "./Dot.styles.mjs";
|
|
6
6
|
const HvDot = ({
|
|
7
7
|
classes: classesProp,
|
|
8
8
|
className,
|
|
@@ -46,4 +46,4 @@ export {
|
|
|
46
46
|
HvDot,
|
|
47
47
|
staticClasses as dotClasses
|
|
48
48
|
};
|
|
49
|
-
//# sourceMappingURL=Dot.
|
|
49
|
+
//# sourceMappingURL=Dot.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dot.mjs","sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import {\n ExtractNames,\n HvBaseProps,\n HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { getColor, dotSizes } from \"../utils\";\nimport { staticClasses, useClasses } from \"./Dot.styles\";\n\nexport { staticClasses as dotClasses };\n\nexport type HvDotClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotProps\n extends Pick<\n HvStepProps,\n \"size\" | \"title\" | \"state\" | \"onClick\" | \"disabled\"\n >,\n Omit<HvBaseProps, \"title\" | \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvDotClasses;\n}\n\nexport const HvDot = ({\n classes: classesProp,\n className,\n state,\n title,\n size = \"sm\",\n onClick,\n disabled,\n}: HvDotProps) => {\n const { classes, cx, css } = useClasses(classesProp);\n\n const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n return (\n <HvButton\n className={cx(\n css({\n backgroundColor: getColor(state),\n width: dotSize,\n height: dotSize,\n \"&:hover, &:disabled\": {\n backgroundColor: getColor(state),\n },\n }),\n classes.root,\n {\n [classes.active]: state === \"Current\",\n [classes.ghostDisabled]:\n disabled ?? [\"Current\", \"Disabled\"].includes(state),\n },\n className\n )}\n aria-label={`${title}`}\n icon\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n {[]}\n </HvButton>\n );\n};\n"],"names":[],"mappings":";;;;;AAwBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,UAAU,SAAS,IAAI,KAAK,UAAU,YAAY,MAAM;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,IAAI;AAAA,UACF,iBAAiB,SAAS,KAAK;AAAA,UAC/B,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,uBAAuB;AAAA,YACrB,iBAAiB,SAAS,KAAK;AAAA,UACjC;AAAA,QAAA,CACD;AAAA,QACD,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG,UAAU;AAAA,UAC5B,CAAC,QAAQ,aAAa,GACpB,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,QACtD;AAAA,QACA;AAAA,MACF;AAAA,MACA,cAAY,GAAG,KAAK;AAAA,MACpB,MAAI;AAAA,MACJ,oBAAoB;AAAA,MACpB,UAAU,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,MAC5D;AAAA,MAEC,UAAC,CAAA;AAAA,IAAA;AAAA,EAAA;AAGR;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dot.styles.mjs","sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDot\", {\n root: { borderRadius: \"50%\", zIndex: 1 },\n active: {},\n ghostDisabled: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM,EAAE,cAAc,OAAO,QAAQ,EAAE;AAAA,EACvC,QAAQ,CAAC;AAAA,EACT,eAAe,CAAC;AAClB,CAAC;"}
|
package/dist/esm/StepNavigation/SimpleNavigation/{SimpleNavigation.js → SimpleNavigation.mjs}
RENAMED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useTheme } from "@hitachivantara/uikit-react-core";
|
|
3
|
-
import { getColor, dotSizes } from "./utils.
|
|
4
|
-
import { HvDot } from "./Dot/Dot.
|
|
3
|
+
import { getColor, dotSizes } from "./utils.mjs";
|
|
4
|
+
import { HvDot } from "./Dot/Dot.mjs";
|
|
5
5
|
const HvSimpleNavigation = ({
|
|
6
6
|
numSteps,
|
|
7
7
|
stepSize = "sm",
|
|
@@ -50,4 +50,4 @@ const HvSimpleNavigation = ({
|
|
|
50
50
|
export {
|
|
51
51
|
HvSimpleNavigation
|
|
52
52
|
};
|
|
53
|
-
//# sourceMappingURL=SimpleNavigation.
|
|
53
|
+
//# sourceMappingURL=SimpleNavigation.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SimpleNavigation.mjs","sources":["../../../../src/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n HvBaseProps,\n HvTheme,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvDot, HvDotProps } from \"./Dot\";\nimport { getColor, dotSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n stepsWidth: number;\n navWidth: number;\n separatorValues: {\n minWidth: number;\n maxWidth: number;\n getColor: (state: HvDotProps[\"state\"], activeTheme: HvTheme) => any;\n height: number;\n };\n stepValues: {\n minSize: number;\n maxSize: number;\n StepComponent: React.ComponentType<HvDotProps>;\n };\n};\n\nexport interface HvSimpleNavigationProps extends Omit<HvBaseProps, \"children\"> {\n /** Sets one of the standard sizes of the steps. */\n stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Number of steps to show on the component. */\n numSteps: number;\n /** Returns a `ReactNode` of the titles container. */\n getTitles: (\n getTitleProps?: (params: {\n state: HvDotProps[\"state\"];\n rawTitle: string;\n number: number;\n }) => { variant: string; title: string }\n ) => ReactNode;\n /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n getDynamicValues: (stepsWidth: number) => {\n width: number;\n titleWidth: number;\n separatorWidth: number;\n };\n /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvSimpleNavigation = ({\n numSteps,\n stepSize = \"sm\",\n getTitles,\n getDynamicValues,\n children,\n ...others\n}: HvSimpleNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // step values\n const dotSize = dotSizes[stepSize];\n const StepComponent = HvDot;\n //\n\n const stepsWidth = (numSteps + 0.5) * dotSize;\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n //\n\n const Steps = children;\n\n const titles = getTitles(({ rawTitle, number }) => ({\n variant: \"label\",\n title: `${number}. ${rawTitle}`,\n titleWidth,\n }));\n\n return (\n <div {...others}>\n {titles}\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0,\n },\n stepValues: {\n minSize: dotSize,\n maxSize: 1.5 * dotSize,\n StepComponent,\n },\n }}\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAiDO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AACvB,QAAA,EAAE,gBAAgB;AAGlB,QAAA,UAAU,SAAS,QAAQ;AACjC,QAAM,gBAAgB;AAGhB,QAAA,cAAc,WAAW,OAAO;AACtC,QAAM,EAAE,OAAO,YAAY,eAAe,IAAI,iBAAiB,UAAU;AAGzE,QAAM,WAAW,KAAK,IAAI,aAAa,SAAS,cAAc;AAC9D,QAAM,WAAW,KAAK,IAAI,aAAa,UAAU,MAAM,cAAc;AAGrE,QAAM,QAAQ;AAEd,QAAM,SAAS,UAAU,CAAC,EAAE,UAAU,cAAc;AAAA,IAClD,SAAS;AAAA,IACT,OAAO,GAAG,MAAM,KAAK,QAAQ;AAAA,IAC7B;AAAA,EACA,EAAA;AAGA,SAAA,qBAAC,OAAK,EAAA,GAAG,QACN,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,iBAAiB;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAQ,aAAa,eAAe,yBAAyB;AAAA,UAC/D;AAAA,UACA,YAAY;AAAA,YACV,SAAS;AAAA,YACT,SAAS,MAAM;AAAA,YACf;AAAA,UACF;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.mjs","sources":["../../../../src/StepNavigation/SimpleNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvStepProps } from \"../DefaultNavigation\";\n\nexport const dotSizes = {\n xs: 8,\n sm: 10,\n md: 12,\n lg: 14,\n xl: 16,\n};\n\nexport const getColor = (state: HvStepProps[\"state\"]) =>\n state === \"Disabled\" ? theme.colors.secondary_60 : theme.colors.secondary;\n"],"names":[],"mappings":";AAIO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEa,MAAA,WAAW,CAAC,UACvB,UAAU,aAAa,MAAM,OAAO,eAAe,MAAM,OAAO;"}
|
|
@@ -2,11 +2,11 @@ import { jsx } from "@emotion/react/jsx-runtime";
|
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
3
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
4
4
|
import { useTheme, useWidth, HvBox, HvTooltip, HvTypography } from "@hitachivantara/uikit-react-core";
|
|
5
|
-
import { TITLE_WIDTH, TITLE_MARGIN, SEPARATOR_WIDTH } from "./utils.
|
|
6
|
-
import { useClasses } from "./StepNavigation.styles.
|
|
7
|
-
import { staticClasses } from "./StepNavigation.styles.
|
|
8
|
-
import { HvDefaultNavigation } from "./DefaultNavigation/DefaultNavigation.
|
|
9
|
-
import { HvSimpleNavigation } from "./SimpleNavigation/SimpleNavigation.
|
|
5
|
+
import { TITLE_WIDTH, TITLE_MARGIN, SEPARATOR_WIDTH } from "./utils.mjs";
|
|
6
|
+
import { useClasses } from "./StepNavigation.styles.mjs";
|
|
7
|
+
import { staticClasses } from "./StepNavigation.styles.mjs";
|
|
8
|
+
import { HvDefaultNavigation } from "./DefaultNavigation/DefaultNavigation.mjs";
|
|
9
|
+
import { HvSimpleNavigation } from "./SimpleNavigation/SimpleNavigation.mjs";
|
|
10
10
|
const HvStepNavigation = ({
|
|
11
11
|
className,
|
|
12
12
|
classes: classesProp,
|
|
@@ -186,4 +186,4 @@ export {
|
|
|
186
186
|
HvStepNavigation,
|
|
187
187
|
staticClasses as stepNavigationClasses
|
|
188
188
|
};
|
|
189
|
-
//# sourceMappingURL=StepNavigation.
|
|
189
|
+
//# sourceMappingURL=StepNavigation.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StepNavigation.mjs","sources":["../../../src/StepNavigation/StepNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n HvBaseProps,\n HvBreakpoints,\n useTheme,\n useWidth,\n HvBox,\n HvTooltip,\n HvTypography,\n ExtractNames,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvDefaultNavigation,\n HvDefaultNavigationProps,\n HvStepProps,\n} from \"./DefaultNavigation\";\nimport { HvSimpleNavigation } from \"./SimpleNavigation\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\nimport { staticClasses, useClasses } from \"./StepNavigation.styles\";\n\nexport { staticClasses as stepNavigationClasses };\n\nexport type HvStepNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepNavigationProps extends HvBaseProps {\n /** Type of step navigation. Values = {\"Simple\", \"Default\"} */\n type?: \"Simple\" | \"Default\";\n /** Steps to show on the component. */\n steps: Array<\n Pick<\n HvStepProps,\n \"state\" | \"title\" | \"onClick\" | \"className\" | \"disabled\"\n > & {\n /** Class names to override styles on the separator component after the step. */\n separatorClassName?: string;\n /** Class names to override styles on the title component above the step. */\n titleClassName?: string;\n }\n >;\n /** Sets one of the standard sizes of the steps. */\n stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Width of the component element on each breakpoint screen resolution. */\n width?: { [breakpoint in HvBreakpoints]?: number };\n /** Defines either show a title or only a tooltip on each step component. */\n showTitles?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepNavigationClasses;\n}\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"xs\", \"sm\", \"md\", \"lg\", \"xl\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tooltip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n */\nexport const HvStepNavigation = ({\n className,\n classes: classesProp,\n width,\n steps,\n stepSize,\n showTitles,\n type = \"Default\",\n \"aria-label\": ariaLabel,\n ...others\n}: HvStepNavigationProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { activeTheme } = useTheme();\n\n // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n const breakpoint = useWidth();\n // step configurations\n const stepSizeKey =\n stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"sm\" : \"md\");\n const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n const styledLi = (containerSize) =>\n styled(\"li\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledDiv = (containerSize) =>\n styled(\"div\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledSeparatorElement = (\n title,\n separatorClassName,\n separatorHeight,\n separatorWidth,\n backgroundColor\n ) => {\n const widthValue =\n separatorWidth -\n 2 *\n Number(\n (activeTheme?.stepNavigation.separatorMargin || \"0px\").replace(\n \"px\",\n \"\"\n )\n );\n\n return (\n <li\n aria-hidden\n key={`separator-${title}`}\n className={cx(\n css({\n height: separatorHeight,\n width: widthValue,\n backgroundColor,\n margin: `0 ${theme.stepNavigation.separatorMargin}`,\n }),\n classes.separator\n )}\n >\n <div className={separatorClassName} />\n </li>\n );\n };\n\n const drawItems = ({\n separatorValues: { minWidth, maxWidth, getColor, height },\n stepValues: { minSize, maxSize, StepComponent },\n }: any) => {\n const items = steps.reduce<ReactNode[]>(\n (acc, { state, title, separatorClassName, ...props }, index): any => {\n const containerSize = state === \"Current\" ? maxSize : minSize;\n const StepContainer = styledLi(containerSize);\n const Step = styledDiv(Math.max(containerSize, 30));\n const stepProps = {\n ...{\n size: stepSizeKey,\n state,\n title,\n number: index + 1,\n ...props,\n },\n };\n const stepElement = (\n <StepContainer key={`step-${title}`} className={classes.li}>\n {hasTitles ? (\n <StepComponent\n key={`step-${title}`}\n aria-label={`${title}`}\n {...stepProps}\n />\n ) : (\n <HvTooltip\n placement=\"bottom\"\n title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n >\n <div>\n <Step className={classes.li}>\n <StepComponent aria-label={`${title}`} {...stepProps} />\n </Step>\n </div>\n </HvTooltip>\n )}\n </StepContainer>\n );\n if (index < steps.length - 1) {\n const separatorElement = styledSeparatorElement(\n title,\n separatorClassName,\n height,\n [steps[index + 1].state, state].includes(\"Current\")\n ? minWidth\n : maxWidth,\n getColor(\n steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state,\n theme\n )\n );\n return [...acc, stepElement, separatorElement];\n }\n return [...acc, stepElement];\n },\n []\n );\n\n return <ol className={classes.ol}>{items}</ol>;\n };\n\n const getDynamicValues: HvDefaultNavigationProps[\"getDynamicValues\"] = (\n stepsWidth\n ) => {\n const themeBreakpoints = activeTheme?.breakpoints.values || {};\n const maxWidth =\n width?.[breakpoint] ??\n Math.max(\n Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -\n TITLE_MARGIN,\n SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n );\n const next = Object.keys(themeBreakpoints).find((_, index, self) =>\n index - 1 >= 0 ? self[index - 1] === breakpoint : false\n );\n const navWidth = Math.min(\n maxWidth,\n next ? themeBreakpoints[next] : maxWidth\n );\n const titleWidth =\n Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n const separatorWidth =\n Number(!hasTitles) *\n Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n return { width: navWidth, titleWidth, separatorWidth };\n };\n\n const getTitles = (getTitleProps) =>\n hasTitles ? (\n <div className={classes.titles}>\n {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n const {\n variant = \"label\",\n title = rawTitle,\n titleWidth = 0,\n titleDisabled = false,\n } = getTitleProps({\n state,\n rawTitle,\n number: index + 1,\n });\n\n return (\n <HvTypography\n variant={variant}\n className={cx(\n css({\n textAlign: \"center\",\n width: titleWidth - TITLE_MARGIN,\n marginRight: TITLE_MARGIN,\n }),\n titleClassName\n )}\n disabled={titleDisabled}\n key={title}\n >\n {title}\n </HvTypography>\n );\n })}\n </div>\n ) : null;\n\n const StepNavigation = {\n Default: HvDefaultNavigation,\n Simple: HvSimpleNavigation,\n }[type];\n\n return (\n <StepNavigation\n numSteps={steps.length}\n stepSize={stepSizeKey}\n getTitles={getTitles}\n getDynamicValues={getDynamicValues}\n className={cx(classes.root, className)}\n {...others}\n >\n {({ stepsWidth, navWidth, ...itemsProps }) => (\n <HvBox\n component=\"nav\"\n style={{\n width: `${navWidth}px`,\n margin: 0,\n }}\n aria-label={ariaLabel}\n >\n {drawItems(itemsProps)}\n </HvBox>\n )}\n </StepNavigation>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StepNavigation.styles.mjs","sources":["../../../src/StepNavigation/StepNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvStepNavigation\", {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n },\n titles: {\n marginTop: 8,\n display: \"flex\",\n },\n ol: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n flexWrap: \"wrap\",\n padding: 0,\n listStyle: \"none\",\n },\n li: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n separator: {\n userSelect: \"none\",\n \"& > div\": {\n display: \"flex\",\n },\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,IAAI;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,IAAI;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,WAAW;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.mjs","sources":["../../../src/StepNavigation/utils.ts"],"sourcesContent":["const TITLE_MARGIN = 20;\nconst TITLE_WIDTH = 215;\nconst STEP_MARGIN = 20;\nconst SEPARATOR_WIDTH = 100;\n\nexport { STEP_MARGIN, TITLE_MARGIN, TITLE_WIDTH, SEPARATOR_WIDTH };\n"],"names":[],"mappings":"AAAA,MAAM,eAAe;AACrB,MAAM,cAAc;AAEpB,MAAM,kBAAkB;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useState, useCallback, useEffect, useMemo } from "react";
|
|
3
|
-
import { useClasses } from "./Wizard.styles.
|
|
4
|
-
import { staticClasses } from "./Wizard.styles.
|
|
5
|
-
import HvWizardContext from "./WizardContext/WizardContext.
|
|
6
|
-
import { HvWizardContainer } from "./WizardContainer/WizardContainer.
|
|
7
|
-
import { HvWizardTitle } from "./WizardTitle/WizardTitle.
|
|
8
|
-
import { HvWizardContent } from "./WizardContent/WizardContent.
|
|
9
|
-
import { HvWizardActions } from "./WizardActions/WizardActions.
|
|
3
|
+
import { useClasses } from "./Wizard.styles.mjs";
|
|
4
|
+
import { staticClasses } from "./Wizard.styles.mjs";
|
|
5
|
+
import HvWizardContext from "./WizardContext/WizardContext.mjs";
|
|
6
|
+
import { HvWizardContainer } from "./WizardContainer/WizardContainer.mjs";
|
|
7
|
+
import { HvWizardTitle } from "./WizardTitle/WizardTitle.mjs";
|
|
8
|
+
import { HvWizardContent } from "./WizardContent/WizardContent.mjs";
|
|
9
|
+
import { HvWizardActions } from "./WizardActions/WizardActions.mjs";
|
|
10
10
|
const HvWizard = ({
|
|
11
11
|
className,
|
|
12
12
|
children,
|
|
@@ -111,4 +111,4 @@ export {
|
|
|
111
111
|
HvWizard,
|
|
112
112
|
staticClasses as wizardClasses
|
|
113
113
|
};
|
|
114
|
-
//# sourceMappingURL=Wizard.
|
|
114
|
+
//# sourceMappingURL=Wizard.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Wizard.mjs","sources":["../../../src/Wizard/Wizard.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialogProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { ModalProps } from \"@mui/material/Modal\";\n\nimport { HvStepNavigationProps } from \"../StepNavigation\";\nimport { HvWizardContent } from \"./WizardContent\";\nimport { HvWizardContext, HvWizardTabs } from \"./WizardContext\";\nimport { HvWizardTitle, HvWizardTitleProps } from \"./WizardTitle\";\nimport { HvWizardActions, HvWizardActionsProps } from \"./WizardActions\";\nimport { HvWizardContainer } from \"./WizardContainer\";\n\nimport { staticClasses, useClasses } from \"./Wizard.styles\";\n\nexport { staticClasses as wizardClasses };\n\nexport type HvWizardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardProps\n extends HvBaseProps,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n onClose: ModalProps[\"onClose\"];\n /** Function executed on submit. */\n handleSubmit: (context: HvWizardTabs) => void;\n /** Title for the wizard. */\n title?: string;\n /** An object containing all the labels for the wizard. */\n labels?: HvWizardActionsProps[\"labels\"] & HvWizardTitleProps[\"labels\"];\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** Enables the skip button. */\n skippable?: boolean;\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardClasses;\n}\n\nexport const HvWizard = ({\n className,\n children,\n onClose,\n handleSubmit,\n title,\n open,\n skippable = true,\n loading = false,\n hasSummary = false,\n summaryContent,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n summary: \"Summary\",\n },\n fixedHeight = false,\n customStep,\n classes: classesProp,\n ...others\n}: HvWizardProps) => {\n const { classes } = useClasses(classesProp);\n\n const [context, setContext] = useState<HvWizardTabs>({});\n const [summary, setSummary] = useState(false);\n const [tab, setTab] = useState(0);\n\n const handleClose = useCallback(\n (evt, reason) => {\n if (reason !== \"backdropClick\") {\n onClose?.(evt, reason);\n }\n },\n [onClose]\n );\n\n // on unmount\n useEffect(() => {\n return () => {\n if (!open) {\n setContext((c) =>\n Object.entries(c).reduce(\n (acc, [key, child]) => ({\n ...acc,\n [+key]: {\n ...child,\n touched: false,\n },\n }),\n {} as HvWizardTabs\n )\n );\n setTab(0);\n }\n };\n }, [open]);\n\n const value = useMemo(\n () => ({ context, setContext, summary, setSummary, tab, setTab }),\n [context, setContext, summary, setSummary, tab, setTab]\n );\n\n return (\n <HvWizardContext.Provider value={value}>\n <HvWizardContainer\n className={className}\n classes={{ root: classes.root }}\n handleClose={handleClose}\n open={open}\n {...others}\n >\n <HvWizardTitle\n title={title}\n hasSummary={hasSummary}\n labels={labels}\n customStep={customStep}\n />\n <HvWizardContent\n loading={loading}\n fixedHeight={fixedHeight}\n summaryContent={summaryContent}\n >\n {children}\n </HvWizardContent>\n <HvWizardActions\n loading={loading}\n skippable={skippable}\n labels={labels}\n handleClose={handleClose}\n handleSubmit={handleSubmit}\n />\n </HvWizardContainer>\n </HvWizardContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoDO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,MAAqB;AACnB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAE,CAAA;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,QAAM,cAAc;AAAA,IAClB,CAAC,KAAK,WAAW;AACf,UAAI,WAAW,iBAAiB;AAC9B,kBAAU,KAAK,MAAM;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EAAA;AAIV,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,CAAC,MAAM;AACT;AAAA,UAAW,CAAC,MACV,OAAO,QAAQ,CAAC,EAAE;AAAA,YAChB,CAAC,KAAK,CAAC,KAAK,KAAK,OAAO;AAAA,cACtB,GAAG;AAAA,cACH,CAAC,CAAC,GAAG,GAAG;AAAA,gBACN,GAAG;AAAA,gBACH,SAAS;AAAA,cACX;AAAA,YAAA;AAAA,YAEF,CAAC;AAAA,UACH;AAAA,QAAA;AAEF,eAAO,CAAC;AAAA,MACV;AAAA,IAAA;AAAA,EACF,GACC,CAAC,IAAI,CAAC;AAET,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,SAAS,YAAY,SAAS,YAAY,KAAK;IACxD,CAAC,SAAS,YAAY,SAAS,YAAY,KAAK,MAAM;AAAA,EAAA;AAGxD,SACG,oBAAA,gBAAgB,UAAhB,EAAyB,OACxB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,EAAE,MAAM,QAAQ,KAAK;AAAA,MAC9B;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA,UAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Wizard.styles.mjs","sources":["../../../src/Wizard/Wizard.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizard\", {\n root: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM,CAAC;AACT,CAAC;"}
|
|
@@ -2,9 +2,9 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
|
2
2
|
import { useContext, useState, useEffect, useCallback } from "react";
|
|
3
3
|
import { HvDialogActions, HvButton } from "@hitachivantara/uikit-react-core";
|
|
4
4
|
import { Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
|
|
5
|
-
import { useClasses } from "./WizardActions.styles.
|
|
6
|
-
import { staticClasses } from "./WizardActions.styles.
|
|
7
|
-
import HvWizardContext from "../WizardContext/WizardContext.
|
|
5
|
+
import { useClasses } from "./WizardActions.styles.mjs";
|
|
6
|
+
import { staticClasses } from "./WizardActions.styles.mjs";
|
|
7
|
+
import HvWizardContext from "../WizardContext/WizardContext.mjs";
|
|
8
8
|
const HvWizardActions = ({
|
|
9
9
|
classes: classesProp,
|
|
10
10
|
handleClose,
|
|
@@ -116,4 +116,4 @@ export {
|
|
|
116
116
|
HvWizardActions,
|
|
117
117
|
staticClasses as wizardActionsClasses
|
|
118
118
|
};
|
|
119
|
-
//# sourceMappingURL=WizardActions.
|
|
119
|
+
//# sourceMappingURL=WizardActions.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WizardActions.mjs","sources":["../../../../src/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvDialogActions,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardActions.styles\";\n\nexport { staticClasses as wizardActionsClasses };\n\nexport type HvWizardActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardActionsProps extends HvBaseProps {\n /** Function to handle the cancel button. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** Function to handle the submit button. Also sends the current context state. */\n handleSubmit: (context: any) => void;\n /** An object containing all the labels for the wizard actions component. */\n labels?: {\n /** Cancel button label. */\n cancel?: string;\n /** Skip button label. */\n skip?: string;\n /** Previous button label. */\n previous?: string;\n /** Next button label. */\n next?: string;\n /** Submit button label. */\n submit?: string;\n };\n /** Whether the submit button is disabled. */\n loading?: boolean;\n /** Enables the skip button. */\n skippable?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardActionsClasses;\n}\n\nexport const HvWizardActions = ({\n classes: classesProp,\n handleClose,\n handleSubmit,\n loading = false,\n skippable = false,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n },\n}: HvWizardActionsProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { context, setContext, tab, setTab } = useContext(HvWizardContext);\n const [pages, setPages] = useState(0);\n const [canSubmit, setCanSubmit] = useState(false);\n\n useEffect(() => {\n const contextEntries = Object.entries(context);\n if (contextEntries.length) {\n setPages(contextEntries.length);\n\n const validWizard = Object.entries(context).every(\n ([, value]) => value?.valid\n );\n if (validWizard !== canSubmit) {\n setCanSubmit(validWizard);\n }\n }\n }, [context, canSubmit, setCanSubmit, setPages]);\n\n const lastPage = pages - 1;\n const isLastPage = tab >= lastPage;\n\n const handleSkip = useCallback(() => {\n setContext((c) =>\n Object.entries(c).reduce(\n (acc, [key, child]) => ({\n ...acc,\n [+key]: {\n ...child,\n valid: child?.valid !== false,\n },\n }),\n {} as HvWizardTabs\n )\n );\n setTab(lastPage);\n }, [setTab, lastPage, setContext]);\n\n const handleSubmitInternal = useCallback(\n () => handleSubmit(context),\n [handleSubmit, context]\n );\n\n return (\n <HvDialogActions className={classes.actionsContainer}>\n <HvButton\n variant=\"secondaryGhost\"\n onClick={handleClose}\n className={classes.buttonWidth}\n >\n {`${labels.cancel ?? \"Cancel\"}`}\n </HvButton>\n {skippable && (\n <HvButton\n variant=\"secondaryGhost\"\n disabled={isLastPage}\n className={classes.buttonWidth}\n onClick={handleSkip}\n >\n {`${labels.skip ?? \"Skip\"}`}\n </HvButton>\n )}\n <div aria-hidden className={css({ flex: 1 })}>\n \n </div>\n <div className={classes.buttonsContainer}>\n <HvButton\n variant=\"secondaryGhost\"\n className={classes.buttonWidth}\n disabled={tab <= 0}\n onClick={() => setTab((t) => t - 1)}\n startIcon={<Backwards />}\n >\n {`${labels.previous ?? \"Previous\"}`}\n </HvButton>\n {isLastPage ? (\n <HvButton\n variant=\"primary\"\n className={classes.buttonWidth}\n disabled={loading || !canSubmit}\n onClick={handleSubmitInternal}\n >\n {`${labels.submit ?? \"Submit\"}`}\n </HvButton>\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n className={cx(classes.buttonWidth, classes.buttonSpacing)}\n onClick={() => setTab((t) => t + 1)}\n disabled={!skippable && !context?.[tab]?.valid}\n endIcon={<Forwards />}\n >\n {`${labels.next ?? \"Next\"}`}\n </HvButton>\n )}\n </div>\n </HvDialogActions>\n );\n};\n"],"names":[],"mappings":"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"}
|