@hitachivantara/uikit-react-lab 5.28.4 → 5.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Flow/Node/Node.cjs +16 -30
- package/dist/cjs/Flow/Node/Node.cjs.map +1 -1
- package/dist/cjs/Flow/Node/Node.styles.cjs +3 -3
- package/dist/cjs/Flow/Node/Node.styles.cjs.map +1 -1
- package/dist/esm/Flow/Node/Node.js +18 -32
- package/dist/esm/Flow/Node/Node.js.map +1 -1
- package/dist/esm/Flow/Node/Node.styles.js +3 -3
- package/dist/esm/Flow/Node/Node.styles.js.map +1 -1
- package/dist/types/index.d.ts +21 -9
- package/package.json +3 -3
|
@@ -13,7 +13,6 @@ const DEFAULT_LABELS = {
|
|
|
13
13
|
collapseLabel: "Collapse",
|
|
14
14
|
expandLabel: "Expand"
|
|
15
15
|
};
|
|
16
|
-
const renderedIcon = (actionIcon) => React.isValidElement(actionIcon) ? actionIcon : actionIcon?.();
|
|
17
16
|
const HvFlowNode = ({
|
|
18
17
|
id,
|
|
19
18
|
type,
|
|
@@ -21,8 +20,11 @@ const HvFlowNode = ({
|
|
|
21
20
|
description,
|
|
22
21
|
actions,
|
|
23
22
|
actionCallback,
|
|
23
|
+
// TODO - remove in v6
|
|
24
|
+
onAction,
|
|
24
25
|
maxVisibleActions = 1,
|
|
25
26
|
expanded = false,
|
|
27
|
+
actionsIconOnly = true,
|
|
26
28
|
params,
|
|
27
29
|
nodeDefaults,
|
|
28
30
|
classes: classesProp,
|
|
@@ -42,8 +44,6 @@ const HvFlowNode = ({
|
|
|
42
44
|
const groupLabel = group?.label || nodeDefaults?.title;
|
|
43
45
|
const icon = group?.icon || nodeDefaults?.icon;
|
|
44
46
|
const color = group?.color || nodeDefaults?.color;
|
|
45
|
-
const actsVisible = actions?.slice(0, maxVisibleActions);
|
|
46
|
-
const actsDropdown = actions?.slice(maxVisibleActions);
|
|
47
47
|
const hasParams = !!(params && params.length > 0);
|
|
48
48
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49
49
|
BaseNode.HvFlowBaseNode,
|
|
@@ -73,34 +73,20 @@ const HvFlowNode = ({
|
|
|
73
73
|
labels,
|
|
74
74
|
...props,
|
|
75
75
|
children: [
|
|
76
|
-
(subtitle ||
|
|
76
|
+
(subtitle || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.subtitleContainer, children: [
|
|
77
77
|
subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: subtitle }) }),
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
actsDropdown && actsDropdown.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
91
|
-
uikitReactCore.HvDropDownMenu,
|
|
92
|
-
{
|
|
93
|
-
keepOpened: false,
|
|
94
|
-
dataList: actsDropdown?.map((action) => ({
|
|
95
|
-
id: action.id,
|
|
96
|
-
label: action.label
|
|
97
|
-
})),
|
|
98
|
-
onClick: (event, action) => {
|
|
99
|
-
actionCallback?.(event, id, action);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
)
|
|
103
|
-
] }) })
|
|
78
|
+
actions && /* @__PURE__ */ jsxRuntime.jsx(
|
|
79
|
+
uikitReactCore.HvActionsGeneric,
|
|
80
|
+
{
|
|
81
|
+
className: classes.actions,
|
|
82
|
+
classes: { button: classes.actionsButton },
|
|
83
|
+
actions,
|
|
84
|
+
actionsCallback: actionCallback,
|
|
85
|
+
onAction,
|
|
86
|
+
maxVisibleActions,
|
|
87
|
+
iconOnly: actionsIconOnly
|
|
88
|
+
}
|
|
89
|
+
)
|
|
104
90
|
] }),
|
|
105
91
|
children,
|
|
106
92
|
showParams && params && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsxRuntime.jsx(ParamRenderer.ParamRenderer, { params, data: node?.data }) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Node.cjs","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Node.cjs","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n ExtractNames,\n HvActionsGeneric,\n HvActionsGenericProps,\n HvButton,\n HvButtonProps,\n HvTooltip,\n HvTypography,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport { ParamRenderer } from \"./Parameters\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowNodeDefaults = {\n title?: string;\n subTitle?: string;\n color?: string;\n icon?: React.ReactNode;\n};\n\nconst DEFAULT_LABELS = {\n collapseLabel: \"Collapse\",\n expandLabel: \"Expand\",\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n /** Node description. */\n description?: string;\n /** Node actions. */\n actions?: HvActionsGenericProps[\"actions\"];\n /**\n * Node action callback.\n *\n * @deprecated Use `onAction` instead.\n * */\n actionCallback?: HvActionsGenericProps[\"actionsCallback\"]; // TODO - remove in v6\n /** Node action callback. */\n onAction?: HvActionsGenericProps[\"onAction\"];\n /** Whether the actions should be all icon buttons when visible. @default true */\n actionsIconOnly?: HvActionsGenericProps[\"iconOnly\"];\n /** Node maximum number of actions visible. */\n maxVisibleActions?: HvActionsGenericProps[\"maxVisibleActions\"];\n /** Node expanded */\n expanded?: boolean;\n /** Node parameters */\n params?: HvFlowNodeParam[];\n /** A set of node default values for when there are no groups to fetch this data from. */\n nodeDefaults?: HvFlowNodeDefaults;\n /** Props to be passed to the expand parameters button. */\n expandParamsButtonProps?: HvButtonProps;\n /** Labels used on the node. */\n labels?: HvFlowBaseNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowNodeClasses;\n}\n\nexport const HvFlowNode = ({\n id,\n type,\n headerItems,\n description,\n actions,\n actionCallback, // TODO - remove in v6\n onAction,\n maxVisibleActions = 1,\n expanded = false,\n actionsIconOnly = true,\n params,\n nodeDefaults,\n classes: classesProp,\n labels: labelsProps,\n children,\n expandParamsButtonProps,\n ...props\n}: HvFlowNodeProps<unknown>) => {\n const { classes } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n const [showParams, setShowParams] = useState(expanded);\n\n const node = useFlowNode();\n\n const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n const groupId = nodeTypes?.[type].meta?.groupId;\n\n const group = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n const groupLabel = group?.label || nodeDefaults?.title;\n const icon = group?.icon || nodeDefaults?.icon;\n const color = group?.color || nodeDefaults?.color;\n\n const hasParams = !!(params && params.length > 0);\n\n return (\n <HvFlowBaseNode\n id={id}\n type={type}\n title={groupLabel}\n icon={icon}\n color={color}\n nodeActions={defaultActions}\n classes={classes}\n headerItems={\n <>\n {headerItems}\n {description && (\n <HvTooltip title={description}>\n <div>\n <Info role=\"none\" color=\"base_dark\" />\n </div>\n </HvTooltip>\n )}\n {hasParams && (\n <HvButton\n icon\n overrideIconColors={false}\n onClick={() => setShowParams((p) => !p)}\n aria-label={\n showParams ? labels?.collapseLabel : labels?.expandLabel\n }\n {...expandParamsButtonProps}\n >\n {showParams ? (\n <Up role=\"none\" color=\"base_dark\" />\n ) : (\n <Down role=\"none\" color=\"base_dark\" />\n )}\n </HvButton>\n )}\n </>\n }\n labels={labels as HvFlowNodeProps[\"labels\"]}\n {...props}\n >\n {(subtitle || actions) && (\n <div className={classes.subtitleContainer}>\n {subtitle && (\n <div>\n <HvTypography>{subtitle}</HvTypography>\n </div>\n )}\n {actions && (\n <HvActionsGeneric\n className={classes.actions}\n classes={{ button: classes.actionsButton }}\n actions={actions}\n actionsCallback={actionCallback}\n onAction={onAction}\n maxVisibleActions={maxVisibleActions}\n iconOnly={actionsIconOnly}\n />\n )}\n </div>\n )}\n {children}\n {showParams && params && (\n <div className={classes.paramsContainer}>\n <ParamRenderer params={params} data={node?.data} />\n </div>\n )}\n </HvFlowBaseNode>\n );\n};\n"],"names":["useClasses","useLabels","useState","useFlowNode","useFlowContext","jsxs","HvFlowBaseNode","Fragment","jsx","HvTooltip","Info","HvButton","Up","Down","HvTypography","HvActionsGeneric","ParamRenderer"],"mappings":";;;;;;;;;;;AA8BA,MAAM,iBAAiB;AAAA,EACrB,eAAe;AAAA,EACf,aAAa;AACf;AAiCO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM,EAAE,QAAA,IAAYA,YAAA,WAAW,WAAW;AAEpC,QAAA,SAASC,eAAAA,UAAU,gBAAgB,WAAW;AAEpD,QAAM,CAAC,YAAY,aAAa,IAAIC,eAAS,QAAQ;AAErD,QAAM,OAAOC,YAAAA;AAEb,QAAM,EAAE,YAAY,WAAW,mBAAmBC,eAAe,eAAA;AAEjE,QAAM,WAAW,YAAY,IAAI,EAAE,MAAM,SAAS,cAAc;AAChE,QAAM,UAAU,YAAY,IAAI,EAAE,MAAM;AAExC,QAAM,QAAS,WAAW,cAAc,WAAW,OAAO,KAAM;AAC1D,QAAA,aAAa,OAAO,SAAS,cAAc;AAC3C,QAAA,OAAO,OAAO,QAAQ,cAAc;AACpC,QAAA,QAAQ,OAAO,SAAS,cAAc;AAE5C,QAAM,YAAY,CAAC,EAAE,UAAU,OAAO,SAAS;AAG7C,SAAAC,2BAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,aAEKD,2BAAA,KAAAE,qBAAA,EAAA,UAAA;AAAA,QAAA;AAAA,QACA,eACCC,2BAAAA,IAACC,eAAAA,WAAU,EAAA,OAAO,aAChB,UAACD,2BAAA,IAAA,OAAA,EACC,UAACA,+BAAAE,gBAAAA,MAAA,EAAK,MAAK,QAAO,OAAM,YAAA,CAAY,EACtC,CAAA,GACF;AAAA,QAED,aACCF,2BAAA;AAAA,UAACG,eAAA;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,oBAAoB;AAAA,YACpB,SAAS,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;AAAA,YACtC,cACE,aAAa,QAAQ,gBAAgB,QAAQ;AAAA,YAE9C,GAAG;AAAA,YAEH,UACC,aAAAH,+BAACI,gBAAAA,IAAG,EAAA,MAAK,QAAO,OAAM,YAAY,CAAA,IAEjCJ,2BAAAA,IAAAK,gBAAAA,MAAA,EAAK,MAAK,QAAO,OAAM,aAAY;AAAA,UAAA;AAAA,QAExC;AAAA,MAAA,GAEJ;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,YAAY,YACZR,gCAAC,OAAI,EAAA,WAAW,QAAQ,mBACrB,UAAA;AAAA,UAAA,YACEG,2BAAA,IAAA,OAAA,EACC,UAACA,2BAAAA,IAAAM,eAAA,cAAA,EAAc,mBAAS,CAAA,GAC1B;AAAA,UAED,WACCN,2BAAA;AAAA,YAACO,eAAA;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAS,EAAE,QAAQ,QAAQ,cAAc;AAAA,cACzC;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,cACA;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA,GAEJ;AAAA,QAED;AAAA,QACA,cAAc,UACZP,+BAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAAA,2BAAAA,IAACQ,cAAAA,eAAc,EAAA,QAAgB,MAAM,MAAM,KAAM,CAAA,GACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;;"}
|
|
@@ -19,9 +19,9 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowNode",
|
|
|
19
19
|
justifyContent: "space-between",
|
|
20
20
|
alignItems: "center"
|
|
21
21
|
},
|
|
22
|
-
actions: {
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
actions: {},
|
|
23
|
+
actionsButton: {
|
|
24
|
+
gap: 0
|
|
25
25
|
},
|
|
26
26
|
paramsContainer: {
|
|
27
27
|
borderTop: `1px solid ${uikitReactCore.theme.colors.atmo4}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Node.styles.cjs","sources":["../../../../src/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses as baseNodeClasses } from \"./BaseNode.styles\";\n\nconst baseClasses = Object.fromEntries(\n Object.keys(baseNodeClasses).map((key) => [key, {}])\n) as Record<keyof typeof baseNodeClasses, {}>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n subtitleContainer: {\n minHeight: 48,\n padding: theme.spacing(\n theme.space.xs,\n theme.space.xs,\n theme.space.xs,\n theme.space.sm\n ),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n actions: {
|
|
1
|
+
{"version":3,"file":"Node.styles.cjs","sources":["../../../../src/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses as baseNodeClasses } from \"./BaseNode.styles\";\n\nconst baseClasses = Object.fromEntries(\n Object.keys(baseNodeClasses).map((key) => [key, {}])\n) as Record<keyof typeof baseNodeClasses, {}>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n subtitleContainer: {\n minHeight: 48,\n padding: theme.spacing(\n theme.space.xs,\n theme.space.xs,\n theme.space.xs,\n theme.space.sm\n ),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n actions: {},\n actionsButton: {\n gap: 0,\n },\n paramsContainer: {\n borderTop: `1px solid ${theme.colors.atmo4}`,\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n padding: theme.space.sm,\n },\n // Spread here to know if we are overriding classes from parents\n ...baseClasses,\n});\n"],"names":["baseNodeClasses","createClasses","theme"],"mappings":";;;;AAIA,MAAM,cAAc,OAAO;AAAA,EACzB,OAAO,KAAKA,gBAAAA,aAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA,CAAE,CAAC;AACrD;AAEO,MAAM,EAAE,eAAe,eAAeC,eAAAA,cAAc,cAAc;AAAA,EACvE,mBAAmB;AAAA,IACjB,WAAW;AAAA,IACX,SAASC,eAAM,MAAA;AAAA,MACbA,qBAAM,MAAM;AAAA,MACZA,qBAAM,MAAM;AAAA,MACZA,qBAAM,MAAM;AAAA,MACZA,qBAAM,MAAM;AAAA,IACd;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,IACb,KAAK;AAAA,EACP;AAAA,EACA,iBAAiB;AAAA,IACf,WAAW,aAAaA,eAAM,MAAA,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAKA,eAAAA,MAAM,MAAM;AAAA,IACjB,SAASA,eAAAA,MAAM,MAAM;AAAA,EACvB;AAAA;AAAA,EAEA,GAAG;AACL,CAAC;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import { useState
|
|
3
|
-
import { useLabels, HvTooltip, HvButton, HvTypography,
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { useLabels, HvTooltip, HvButton, HvTypography, HvActionsGeneric } from "@hitachivantara/uikit-react-core";
|
|
4
4
|
import { Info, Up, Down } from "@hitachivantara/uikit-react-icons";
|
|
5
5
|
import { useClasses } from "./Node.styles.js";
|
|
6
6
|
import { staticClasses } from "./Node.styles.js";
|
|
@@ -12,7 +12,6 @@ const DEFAULT_LABELS = {
|
|
|
12
12
|
collapseLabel: "Collapse",
|
|
13
13
|
expandLabel: "Expand"
|
|
14
14
|
};
|
|
15
|
-
const renderedIcon = (actionIcon) => isValidElement(actionIcon) ? actionIcon : actionIcon?.();
|
|
16
15
|
const HvFlowNode = ({
|
|
17
16
|
id,
|
|
18
17
|
type,
|
|
@@ -20,8 +19,11 @@ const HvFlowNode = ({
|
|
|
20
19
|
description,
|
|
21
20
|
actions,
|
|
22
21
|
actionCallback,
|
|
22
|
+
// TODO - remove in v6
|
|
23
|
+
onAction,
|
|
23
24
|
maxVisibleActions = 1,
|
|
24
25
|
expanded = false,
|
|
26
|
+
actionsIconOnly = true,
|
|
25
27
|
params,
|
|
26
28
|
nodeDefaults,
|
|
27
29
|
classes: classesProp,
|
|
@@ -41,8 +43,6 @@ const HvFlowNode = ({
|
|
|
41
43
|
const groupLabel = group?.label || nodeDefaults?.title;
|
|
42
44
|
const icon = group?.icon || nodeDefaults?.icon;
|
|
43
45
|
const color = group?.color || nodeDefaults?.color;
|
|
44
|
-
const actsVisible = actions?.slice(0, maxVisibleActions);
|
|
45
|
-
const actsDropdown = actions?.slice(maxVisibleActions);
|
|
46
46
|
const hasParams = !!(params && params.length > 0);
|
|
47
47
|
return /* @__PURE__ */ jsxs(
|
|
48
48
|
HvFlowBaseNode,
|
|
@@ -72,34 +72,20 @@ const HvFlowNode = ({
|
|
|
72
72
|
labels,
|
|
73
73
|
...props,
|
|
74
74
|
children: [
|
|
75
|
-
(subtitle ||
|
|
75
|
+
(subtitle || actions) && /* @__PURE__ */ jsxs("div", { className: classes.subtitleContainer, children: [
|
|
76
76
|
subtitle && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvTypography, { children: subtitle }) }),
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
actsDropdown && actsDropdown.length > 0 && /* @__PURE__ */ jsx(
|
|
90
|
-
HvDropDownMenu,
|
|
91
|
-
{
|
|
92
|
-
keepOpened: false,
|
|
93
|
-
dataList: actsDropdown?.map((action) => ({
|
|
94
|
-
id: action.id,
|
|
95
|
-
label: action.label
|
|
96
|
-
})),
|
|
97
|
-
onClick: (event, action) => {
|
|
98
|
-
actionCallback?.(event, id, action);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
)
|
|
102
|
-
] }) })
|
|
77
|
+
actions && /* @__PURE__ */ jsx(
|
|
78
|
+
HvActionsGeneric,
|
|
79
|
+
{
|
|
80
|
+
className: classes.actions,
|
|
81
|
+
classes: { button: classes.actionsButton },
|
|
82
|
+
actions,
|
|
83
|
+
actionsCallback: actionCallback,
|
|
84
|
+
onAction,
|
|
85
|
+
maxVisibleActions,
|
|
86
|
+
iconOnly: actionsIconOnly
|
|
87
|
+
}
|
|
88
|
+
)
|
|
103
89
|
] }),
|
|
104
90
|
children,
|
|
105
91
|
showParams && params && /* @__PURE__ */ jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsx(ParamRenderer, { params, data: node?.data }) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n ExtractNames,\n HvActionsGeneric,\n HvActionsGenericProps,\n HvButton,\n HvButtonProps,\n HvTooltip,\n HvTypography,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport { ParamRenderer } from \"./Parameters\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowNodeDefaults = {\n title?: string;\n subTitle?: string;\n color?: string;\n icon?: React.ReactNode;\n};\n\nconst DEFAULT_LABELS = {\n collapseLabel: \"Collapse\",\n expandLabel: \"Expand\",\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n /** Node description. */\n description?: string;\n /** Node actions. */\n actions?: HvActionsGenericProps[\"actions\"];\n /**\n * Node action callback.\n *\n * @deprecated Use `onAction` instead.\n * */\n actionCallback?: HvActionsGenericProps[\"actionsCallback\"]; // TODO - remove in v6\n /** Node action callback. */\n onAction?: HvActionsGenericProps[\"onAction\"];\n /** Whether the actions should be all icon buttons when visible. @default true */\n actionsIconOnly?: HvActionsGenericProps[\"iconOnly\"];\n /** Node maximum number of actions visible. */\n maxVisibleActions?: HvActionsGenericProps[\"maxVisibleActions\"];\n /** Node expanded */\n expanded?: boolean;\n /** Node parameters */\n params?: HvFlowNodeParam[];\n /** A set of node default values for when there are no groups to fetch this data from. */\n nodeDefaults?: HvFlowNodeDefaults;\n /** Props to be passed to the expand parameters button. */\n expandParamsButtonProps?: HvButtonProps;\n /** Labels used on the node. */\n labels?: HvFlowBaseNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowNodeClasses;\n}\n\nexport const HvFlowNode = ({\n id,\n type,\n headerItems,\n description,\n actions,\n actionCallback, // TODO - remove in v6\n onAction,\n maxVisibleActions = 1,\n expanded = false,\n actionsIconOnly = true,\n params,\n nodeDefaults,\n classes: classesProp,\n labels: labelsProps,\n children,\n expandParamsButtonProps,\n ...props\n}: HvFlowNodeProps<unknown>) => {\n const { classes } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n const [showParams, setShowParams] = useState(expanded);\n\n const node = useFlowNode();\n\n const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n const groupId = nodeTypes?.[type].meta?.groupId;\n\n const group = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n const groupLabel = group?.label || nodeDefaults?.title;\n const icon = group?.icon || nodeDefaults?.icon;\n const color = group?.color || nodeDefaults?.color;\n\n const hasParams = !!(params && params.length > 0);\n\n return (\n <HvFlowBaseNode\n id={id}\n type={type}\n title={groupLabel}\n icon={icon}\n color={color}\n nodeActions={defaultActions}\n classes={classes}\n headerItems={\n <>\n {headerItems}\n {description && (\n <HvTooltip title={description}>\n <div>\n <Info role=\"none\" color=\"base_dark\" />\n </div>\n </HvTooltip>\n )}\n {hasParams && (\n <HvButton\n icon\n overrideIconColors={false}\n onClick={() => setShowParams((p) => !p)}\n aria-label={\n showParams ? labels?.collapseLabel : labels?.expandLabel\n }\n {...expandParamsButtonProps}\n >\n {showParams ? (\n <Up role=\"none\" color=\"base_dark\" />\n ) : (\n <Down role=\"none\" color=\"base_dark\" />\n )}\n </HvButton>\n )}\n </>\n }\n labels={labels as HvFlowNodeProps[\"labels\"]}\n {...props}\n >\n {(subtitle || actions) && (\n <div className={classes.subtitleContainer}>\n {subtitle && (\n <div>\n <HvTypography>{subtitle}</HvTypography>\n </div>\n )}\n {actions && (\n <HvActionsGeneric\n className={classes.actions}\n classes={{ button: classes.actionsButton }}\n actions={actions}\n actionsCallback={actionCallback}\n onAction={onAction}\n maxVisibleActions={maxVisibleActions}\n iconOnly={actionsIconOnly}\n />\n )}\n </div>\n )}\n {children}\n {showParams && params && (\n <div className={classes.paramsContainer}>\n <ParamRenderer params={params} data={node?.data} />\n </div>\n )}\n </HvFlowBaseNode>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA8BA,MAAM,iBAAiB;AAAA,EACrB,eAAe;AAAA,EACf,aAAa;AACf;AAiCO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,SAAS,UAAU,gBAAgB,WAAW;AAEpD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,QAAQ;AAErD,QAAM,OAAO;AAEb,QAAM,EAAE,YAAY,WAAW,mBAAmB,eAAe;AAEjE,QAAM,WAAW,YAAY,IAAI,EAAE,MAAM,SAAS,cAAc;AAChE,QAAM,UAAU,YAAY,IAAI,EAAE,MAAM;AAExC,QAAM,QAAS,WAAW,cAAc,WAAW,OAAO,KAAM;AAC1D,QAAA,aAAa,OAAO,SAAS,cAAc;AAC3C,QAAA,OAAO,OAAO,QAAQ,cAAc;AACpC,QAAA,QAAQ,OAAO,SAAS,cAAc;AAE5C,QAAM,YAAY,CAAC,EAAE,UAAU,OAAO,SAAS;AAG7C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,aAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAA;AAAA,QACA,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAC,oBAAA,OAAA,EACC,UAAC,oBAAA,MAAA,EAAK,MAAK,QAAO,OAAM,YAAA,CAAY,EACtC,CAAA,GACF;AAAA,QAED,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,oBAAoB;AAAA,YACpB,SAAS,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;AAAA,YACtC,cACE,aAAa,QAAQ,gBAAgB,QAAQ;AAAA,YAE9C,GAAG;AAAA,YAEH,UACC,aAAA,oBAAC,IAAG,EAAA,MAAK,QAAO,OAAM,YAAY,CAAA,IAEjC,oBAAA,MAAA,EAAK,MAAK,QAAO,OAAM,aAAY;AAAA,UAAA;AAAA,QAExC;AAAA,MAAA,GAEJ;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,YAAY,YACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,mBACrB,UAAA;AAAA,UAAA,YACE,oBAAA,OAAA,EACC,UAAC,oBAAA,cAAA,EAAc,mBAAS,CAAA,GAC1B;AAAA,UAED,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAS,EAAE,QAAQ,QAAQ,cAAc;AAAA,cACzC;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,cACA;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA,GAEJ;AAAA,QAED;AAAA,QACA,cAAc,UACZ,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA,oBAAC,eAAc,EAAA,QAAgB,MAAM,MAAM,KAAM,CAAA,GACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
@@ -17,9 +17,9 @@ const { staticClasses, useClasses } = createClasses("HvFlowNode", {
|
|
|
17
17
|
justifyContent: "space-between",
|
|
18
18
|
alignItems: "center"
|
|
19
19
|
},
|
|
20
|
-
actions: {
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
actions: {},
|
|
21
|
+
actionsButton: {
|
|
22
|
+
gap: 0
|
|
23
23
|
},
|
|
24
24
|
paramsContainer: {
|
|
25
25
|
borderTop: `1px solid ${theme.colors.atmo4}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Node.styles.js","sources":["../../../../src/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses as baseNodeClasses } from \"./BaseNode.styles\";\n\nconst baseClasses = Object.fromEntries(\n Object.keys(baseNodeClasses).map((key) => [key, {}])\n) as Record<keyof typeof baseNodeClasses, {}>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n subtitleContainer: {\n minHeight: 48,\n padding: theme.spacing(\n theme.space.xs,\n theme.space.xs,\n theme.space.xs,\n theme.space.sm\n ),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n actions: {
|
|
1
|
+
{"version":3,"file":"Node.styles.js","sources":["../../../../src/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses as baseNodeClasses } from \"./BaseNode.styles\";\n\nconst baseClasses = Object.fromEntries(\n Object.keys(baseNodeClasses).map((key) => [key, {}])\n) as Record<keyof typeof baseNodeClasses, {}>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n subtitleContainer: {\n minHeight: 48,\n padding: theme.spacing(\n theme.space.xs,\n theme.space.xs,\n theme.space.xs,\n theme.space.sm\n ),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n actions: {},\n actionsButton: {\n gap: 0,\n },\n paramsContainer: {\n borderTop: `1px solid ${theme.colors.atmo4}`,\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n padding: theme.space.sm,\n },\n // Spread here to know if we are overriding classes from parents\n ...baseClasses,\n});\n"],"names":["baseNodeClasses"],"mappings":";;AAIA,MAAM,cAAc,OAAO;AAAA,EACzB,OAAO,KAAKA,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA,CAAE,CAAC;AACrD;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,mBAAmB;AAAA,IACjB,WAAW;AAAA,IACX,SAAS,MAAM;AAAA,MACb,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,IACd;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,IACb,KAAK;AAAA,EACP;AAAA,EACA,iBAAiB;AAAA,IACf,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA;AAAA,EAEA,GAAG;AACL,CAAC;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -138,6 +138,7 @@ export declare const flowNodeClasses: {
|
|
|
138
138
|
outputContainer: "HvFlowNode-outputContainer";
|
|
139
139
|
handleConnected: "HvFlowNode-handleConnected";
|
|
140
140
|
subtitleContainer: "HvFlowNode-subtitleContainer";
|
|
141
|
+
actionsButton: "HvFlowNode-actionsButton";
|
|
141
142
|
paramsContainer: "HvFlowNode-paramsContainer";
|
|
142
143
|
};
|
|
143
144
|
|
|
@@ -325,6 +326,7 @@ export declare const hvDashboardNodeClasses: {
|
|
|
325
326
|
outputContainer: "HvDashboardNode-outputContainer";
|
|
326
327
|
handleConnected: "HvDashboardNode-handleConnected";
|
|
327
328
|
subtitleContainer: "HvDashboardNode-subtitleContainer";
|
|
329
|
+
actionsButton: "HvDashboardNode-actionsButton";
|
|
328
330
|
paramsContainer: "HvDashboardNode-paramsContainer";
|
|
329
331
|
};
|
|
330
332
|
|
|
@@ -490,7 +492,7 @@ export declare interface HvFlowMinimapProps<NodeData = any> extends Omit<MiniMap
|
|
|
490
492
|
classes?: HvFlowMinimapClasses;
|
|
491
493
|
}
|
|
492
494
|
|
|
493
|
-
export declare const HvFlowNode: ({ id, type, headerItems, description, actions, actionCallback, maxVisibleActions, expanded, params, nodeDefaults, classes: classesProp, labels: labelsProps, children, expandParamsButtonProps, ...props }: HvFlowNodeProps<unknown>) => JSX_2.Element;
|
|
495
|
+
export declare const HvFlowNode: ({ id, type, headerItems, description, actions, actionCallback, onAction, maxVisibleActions, expanded, actionsIconOnly, params, nodeDefaults, classes: classesProp, labels: labelsProps, children, expandParamsButtonProps, ...props }: HvFlowNodeProps<unknown>) => JSX_2.Element;
|
|
494
496
|
|
|
495
497
|
export declare interface HvFlowNodeAction extends HvActionGeneric {
|
|
496
498
|
callback?: (node: Node_2) => void;
|
|
@@ -561,14 +563,22 @@ export declare interface HvFlowNodeOutputGroup {
|
|
|
561
563
|
export declare type HvFlowNodeParam = HvFlowNodeSelectParam | HvFlowNodeTextParam | HvFlowNodeSliderParam;
|
|
562
564
|
|
|
563
565
|
export declare interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {
|
|
564
|
-
/** Node description */
|
|
566
|
+
/** Node description. */
|
|
565
567
|
description?: string;
|
|
566
|
-
/** Node actions */
|
|
567
|
-
actions?:
|
|
568
|
-
/**
|
|
568
|
+
/** Node actions. */
|
|
569
|
+
actions?: HvActionsGenericProps["actions"];
|
|
570
|
+
/**
|
|
571
|
+
* Node action callback.
|
|
572
|
+
*
|
|
573
|
+
* @deprecated Use `onAction` instead.
|
|
574
|
+
* */
|
|
569
575
|
actionCallback?: HvActionsGenericProps["actionsCallback"];
|
|
570
|
-
/** Node
|
|
571
|
-
|
|
576
|
+
/** Node action callback. */
|
|
577
|
+
onAction?: HvActionsGenericProps["onAction"];
|
|
578
|
+
/** Whether the actions should be all icon buttons when visible. @default true */
|
|
579
|
+
actionsIconOnly?: HvActionsGenericProps["iconOnly"];
|
|
580
|
+
/** Node maximum number of actions visible. */
|
|
581
|
+
maxVisibleActions?: HvActionsGenericProps["maxVisibleActions"];
|
|
572
582
|
/** Node expanded */
|
|
573
583
|
expanded?: boolean;
|
|
574
584
|
/** Node parameters */
|
|
@@ -1077,7 +1087,7 @@ declare const useClasses_7: (classesProp?: Partial<Record<"root" | "title" | "ti
|
|
|
1077
1087
|
cx: (...args: any) => string;
|
|
1078
1088
|
};
|
|
1079
1089
|
|
|
1080
|
-
declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "actions" | "footerContainer" | "inputContainer" | "handle" | "contentContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitleContainer" | "paramsContainer", string>>, addStatic?: boolean) => {
|
|
1090
|
+
declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "actions" | "footerContainer" | "inputContainer" | "handle" | "contentContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitleContainer" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
|
|
1081
1091
|
classes: {
|
|
1082
1092
|
root: string;
|
|
1083
1093
|
title: string;
|
|
@@ -1098,6 +1108,7 @@ declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "ti
|
|
|
1098
1108
|
outputContainer: string;
|
|
1099
1109
|
handleConnected: string;
|
|
1100
1110
|
subtitleContainer: string;
|
|
1111
|
+
actionsButton: string;
|
|
1101
1112
|
paramsContainer: string;
|
|
1102
1113
|
};
|
|
1103
1114
|
css: {
|
|
@@ -1107,7 +1118,7 @@ declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "ti
|
|
|
1107
1118
|
cx: (...args: any) => string;
|
|
1108
1119
|
};
|
|
1109
1120
|
|
|
1110
|
-
declare const useClasses_9: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "empty" | "actions" | "footerContainer" | "inputContainer" | "handle" | "contentContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitleContainer" | "paramsContainer", string>>, addStatic?: boolean) => {
|
|
1121
|
+
declare const useClasses_9: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "empty" | "actions" | "footerContainer" | "inputContainer" | "handle" | "contentContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitleContainer" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
|
|
1111
1122
|
classes: {
|
|
1112
1123
|
root: string;
|
|
1113
1124
|
title: string;
|
|
@@ -1129,6 +1140,7 @@ declare const useClasses_9: (classesProp?: Partial<Record<"root" | "title" | "ti
|
|
|
1129
1140
|
outputContainer: string;
|
|
1130
1141
|
handleConnected: string;
|
|
1131
1142
|
subtitleContainer: string;
|
|
1143
|
+
actionsButton: string;
|
|
1132
1144
|
paramsContainer: string;
|
|
1133
1145
|
};
|
|
1134
1146
|
css: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.29.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React components for the NEXT UI Kit.",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@dnd-kit/core": "^6.1.0",
|
|
33
33
|
"@dnd-kit/modifiers": "^6.0.1",
|
|
34
34
|
"@emotion/css": "^11.11.0",
|
|
35
|
-
"@hitachivantara/uikit-react-core": "^5.
|
|
35
|
+
"@hitachivantara/uikit-react-core": "^5.57.0",
|
|
36
36
|
"@hitachivantara/uikit-react-icons": "^5.8.6",
|
|
37
37
|
"@hitachivantara/uikit-styles": "^5.22.0",
|
|
38
38
|
"@types/react-grid-layout": "^1.3.5",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"access": "public",
|
|
51
51
|
"directory": "package"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "2ee2a5f6502b55ac9f6aafd36baf96bbb8c9d765",
|
|
54
54
|
"main": "dist/cjs/index.cjs",
|
|
55
55
|
"exports": {
|
|
56
56
|
".": {
|