@hitachivantara/uikit-react-lab 5.33.5 → 5.34.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 +20 -2
- package/dist/cjs/Flow/Node/Node.styles.cjs +11 -6
- package/dist/cjs/Wizard/WizardActions/WizardActions.cjs +9 -2
- package/dist/esm/Flow/Node/Node.js +22 -4
- package/dist/esm/Flow/Node/Node.js.map +1 -1
- package/dist/esm/Flow/Node/Node.styles.js +11 -6
- package/dist/esm/Flow/Node/Node.styles.js.map +1 -1
- package/dist/esm/Flow/nodes/DashboardNode.js.map +1 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.js +9 -2
- package/dist/esm/Wizard/WizardActions/WizardActions.js.map +1 -1
- package/dist/types/index.d.ts +21 -4
- package/package.json +3 -3
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
4
|
const React = require("react");
|
|
5
|
+
const css = require("@emotion/css");
|
|
5
6
|
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
6
7
|
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
7
8
|
const BaseNode = require("./BaseNode.cjs");
|
|
@@ -31,15 +32,18 @@ const HvFlowNode = ({
|
|
|
31
32
|
labels: labelsProps,
|
|
32
33
|
children,
|
|
33
34
|
expandParamsButtonProps,
|
|
35
|
+
disableInlineEdit,
|
|
34
36
|
...props
|
|
35
37
|
}) => {
|
|
36
38
|
const { classes } = Node_styles.useClasses(classesProp);
|
|
37
39
|
const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
|
|
38
40
|
const [showParams, setShowParams] = React.useState(expanded);
|
|
39
41
|
const node = useFlowNode.useFlowNode();
|
|
42
|
+
const { setNodeData } = useFlowNode.useFlowNodeUtils();
|
|
40
43
|
const { nodeGroups, nodeTypes, defaultActions } = useFlowContext.useFlowContext();
|
|
41
|
-
const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;
|
|
44
|
+
const subtitle = node?.data.customNodeLabel || nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;
|
|
42
45
|
const groupId = nodeTypes?.[type].meta?.groupId;
|
|
46
|
+
const inlineEditorWidth = actions === void 0 || Array.isArray(actions) && actions.length === 0 || maxVisibleActions === 0 ? "100%" : `calc(200px - calc(${maxVisibleActions} * 32px + ${uikitReactCore.theme.spacing(2)}))`;
|
|
43
47
|
const group = groupId && nodeGroups && nodeGroups[groupId] || void 0;
|
|
44
48
|
const groupLabel = group?.label || nodeDefaults?.title;
|
|
45
49
|
const icon = group?.icon || nodeDefaults?.icon;
|
|
@@ -74,7 +78,21 @@ const HvFlowNode = ({
|
|
|
74
78
|
...props,
|
|
75
79
|
children: [
|
|
76
80
|
(subtitle || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.subtitleContainer, children: [
|
|
77
|
-
subtitle && /* @__PURE__ */ jsxRuntime.jsx(
|
|
81
|
+
subtitle && (disableInlineEdit ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { className: classes.subtitle, children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
82
|
+
uikitReactCore.HvInlineEditor,
|
|
83
|
+
{
|
|
84
|
+
defaultValue: subtitle,
|
|
85
|
+
showIcon: true,
|
|
86
|
+
classes: {
|
|
87
|
+
root: classes.inlineEditRoot,
|
|
88
|
+
button: classes.inlineEditButton,
|
|
89
|
+
inputRoot: css.css({
|
|
90
|
+
width: inlineEditorWidth
|
|
91
|
+
})
|
|
92
|
+
},
|
|
93
|
+
onBlur: (evt, value) => setNodeData((prev) => ({ ...prev, customNodeLabel: value }))
|
|
94
|
+
}
|
|
95
|
+
)),
|
|
78
96
|
actions && /* @__PURE__ */ jsxRuntime.jsx(
|
|
79
97
|
uikitReactCore.HvActionsGeneric,
|
|
80
98
|
{
|
|
@@ -8,17 +8,22 @@ const baseClasses = Object.fromEntries(
|
|
|
8
8
|
const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowNode", {
|
|
9
9
|
subtitleContainer: {
|
|
10
10
|
minHeight: 48,
|
|
11
|
-
padding: uikitReactCore.theme.spacing(
|
|
12
|
-
uikitReactCore.theme.space.xs,
|
|
13
|
-
uikitReactCore.theme.space.xs,
|
|
14
|
-
uikitReactCore.theme.space.xs,
|
|
15
|
-
uikitReactCore.theme.space.sm
|
|
16
|
-
),
|
|
11
|
+
padding: uikitReactCore.theme.spacing("xs"),
|
|
17
12
|
display: "flex",
|
|
18
13
|
flexDirection: "row",
|
|
19
14
|
justifyContent: "space-between",
|
|
20
15
|
alignItems: "center"
|
|
21
16
|
},
|
|
17
|
+
subtitle: {
|
|
18
|
+
paddingLeft: uikitReactCore.theme.spacing("xs")
|
|
19
|
+
},
|
|
20
|
+
inlineEditRoot: {
|
|
21
|
+
display: "inline-flex",
|
|
22
|
+
flexGrow: 1
|
|
23
|
+
},
|
|
24
|
+
inlineEditButton: {
|
|
25
|
+
justifyContent: "space-between"
|
|
26
|
+
},
|
|
22
27
|
actions: {},
|
|
23
28
|
actionsButton: {
|
|
24
29
|
gap: 0
|
|
@@ -19,7 +19,8 @@ const HvWizardActions = ({
|
|
|
19
19
|
skip: "Skip",
|
|
20
20
|
submit: "Submit"
|
|
21
21
|
},
|
|
22
|
-
handleBeforeNext
|
|
22
|
+
handleBeforeNext,
|
|
23
|
+
handleBeforePrevious
|
|
23
24
|
}) => {
|
|
24
25
|
const { classes, css, cx } = WizardActions_styles.useClasses(classesProp);
|
|
25
26
|
const { context, setContext, tab, setTab } = React.useContext(WizardContext.default);
|
|
@@ -91,7 +92,13 @@ const HvWizardActions = ({
|
|
|
91
92
|
variant: "secondaryGhost",
|
|
92
93
|
className: classes.buttonWidth,
|
|
93
94
|
disabled: tab <= 0,
|
|
94
|
-
onClick: () =>
|
|
95
|
+
onClick: () => {
|
|
96
|
+
if (handleBeforePrevious) {
|
|
97
|
+
handleBeforePrevious();
|
|
98
|
+
} else {
|
|
99
|
+
setTab((t) => t - 1);
|
|
100
|
+
}
|
|
101
|
+
},
|
|
95
102
|
startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {}),
|
|
96
103
|
children: labels.previous ?? "Previous"
|
|
97
104
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useState } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { css } from "@emotion/css";
|
|
4
|
+
import { useLabels, theme, HvTooltip, HvButton, HvTypography, HvInlineEditor, HvActionsGeneric } from "@hitachivantara/uikit-react-core";
|
|
4
5
|
import { Info, Up, Down } from "@hitachivantara/uikit-react-icons";
|
|
5
6
|
import { HvFlowBaseNode } from "./BaseNode.js";
|
|
6
7
|
import { useClasses } from "./Node.styles.js";
|
|
7
8
|
import { staticClasses } from "./Node.styles.js";
|
|
8
|
-
import { useFlowNode } from "../hooks/useFlowNode.js";
|
|
9
|
+
import { useFlowNode, useFlowNodeUtils } from "../hooks/useFlowNode.js";
|
|
9
10
|
import { ParamRenderer } from "./Parameters/ParamRenderer.js";
|
|
10
11
|
import { useFlowContext } from "../hooks/useFlowContext.js";
|
|
11
12
|
const DEFAULT_LABELS = {
|
|
@@ -30,15 +31,18 @@ const HvFlowNode = ({
|
|
|
30
31
|
labels: labelsProps,
|
|
31
32
|
children,
|
|
32
33
|
expandParamsButtonProps,
|
|
34
|
+
disableInlineEdit,
|
|
33
35
|
...props
|
|
34
36
|
}) => {
|
|
35
37
|
const { classes } = useClasses(classesProp);
|
|
36
38
|
const labels = useLabels(DEFAULT_LABELS, labelsProps);
|
|
37
39
|
const [showParams, setShowParams] = useState(expanded);
|
|
38
40
|
const node = useFlowNode();
|
|
41
|
+
const { setNodeData } = useFlowNodeUtils();
|
|
39
42
|
const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();
|
|
40
|
-
const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;
|
|
43
|
+
const subtitle = node?.data.customNodeLabel || nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;
|
|
41
44
|
const groupId = nodeTypes?.[type].meta?.groupId;
|
|
45
|
+
const inlineEditorWidth = actions === void 0 || Array.isArray(actions) && actions.length === 0 || maxVisibleActions === 0 ? "100%" : `calc(200px - calc(${maxVisibleActions} * 32px + ${theme.spacing(2)}))`;
|
|
42
46
|
const group = groupId && nodeGroups && nodeGroups[groupId] || void 0;
|
|
43
47
|
const groupLabel = group?.label || nodeDefaults?.title;
|
|
44
48
|
const icon = group?.icon || nodeDefaults?.icon;
|
|
@@ -73,7 +77,21 @@ const HvFlowNode = ({
|
|
|
73
77
|
...props,
|
|
74
78
|
children: [
|
|
75
79
|
(subtitle || actions) && /* @__PURE__ */ jsxs("div", { className: classes.subtitleContainer, children: [
|
|
76
|
-
subtitle && /* @__PURE__ */ jsx(
|
|
80
|
+
subtitle && (disableInlineEdit ? /* @__PURE__ */ jsx(HvTypography, { className: classes.subtitle, children: subtitle }) : /* @__PURE__ */ jsx(
|
|
81
|
+
HvInlineEditor,
|
|
82
|
+
{
|
|
83
|
+
defaultValue: subtitle,
|
|
84
|
+
showIcon: true,
|
|
85
|
+
classes: {
|
|
86
|
+
root: classes.inlineEditRoot,
|
|
87
|
+
button: classes.inlineEditButton,
|
|
88
|
+
inputRoot: css({
|
|
89
|
+
width: inlineEditorWidth
|
|
90
|
+
})
|
|
91
|
+
},
|
|
92
|
+
onBlur: (evt, value) => setNodeData((prev) => ({ ...prev, customNodeLabel: value }))
|
|
93
|
+
}
|
|
94
|
+
)),
|
|
77
95
|
actions && /* @__PURE__ */ jsx(
|
|
78
96
|
HvActionsGeneric,
|
|
79
97
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n ExtractNames,\n HvActionsGeneric,\n HvActionsGenericProps,\n HvButton,\n HvButtonProps,\n HvTooltip,\n HvTypography,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeParam } from \"../types\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport { ParamRenderer } from \"./Parameters\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowNodeDefaults = {\n title?: string;\n subTitle?: string;\n color?: string;\n icon?: React.ReactNode;\n};\n\nconst DEFAULT_LABELS = {\n collapseLabel: \"Collapse\",\n expandLabel: \"Expand\",\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n /** Node description. */\n description?: string;\n /** Node actions. */\n actions?: HvActionsGenericProps[\"actions\"];\n /**\n * Node action callback.\n *\n * @deprecated Use `onAction` instead.\n * */\n actionCallback?: HvActionsGenericProps[\"actionsCallback\"]; // TODO - remove in v6\n /** Node action callback. */\n onAction?: HvActionsGenericProps[\"onAction\"];\n /** Whether the actions should be all icon buttons when visible. @default true */\n actionsIconOnly?: HvActionsGenericProps[\"iconOnly\"];\n /** Node maximum number of actions visible. */\n maxVisibleActions?: HvActionsGenericProps[\"maxVisibleActions\"];\n /** Node expanded */\n expanded?: boolean;\n /** Node parameters */\n params?: HvFlowNodeParam[];\n /** A set of node default values for when there are no groups to fetch this data from. */\n nodeDefaults?: HvFlowNodeDefaults;\n /** Props to be passed to the expand parameters button. */\n expandParamsButtonProps?: HvButtonProps;\n /** Labels used on the node. */\n labels?: HvFlowBaseNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowNodeClasses;\n}\n\nexport const HvFlowNode = ({\n id,\n type,\n headerItems,\n description,\n actions,\n actionCallback, // TODO - remove in v6\n onAction,\n maxVisibleActions = 1,\n expanded = false,\n actionsIconOnly = true,\n params,\n nodeDefaults,\n classes: classesProp,\n labels: labelsProps,\n children,\n expandParamsButtonProps,\n ...props\n}: HvFlowNodeProps<unknown>) => {\n const { classes } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n const [showParams, setShowParams] = useState(expanded);\n\n const node = useFlowNode();\n\n const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n const subtitle
|
|
1
|
+
{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { css } from \"@emotion/css\";\nimport {\n ExtractNames,\n HvActionsGeneric,\n HvActionsGenericProps,\n HvButton,\n HvButtonProps,\n HvInlineEditor,\n HvTooltip,\n HvTypography,\n theme,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode, useFlowNodeUtils } from \"../hooks\";\nimport { HvFlowNodeParam } from \"../types\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport { ParamRenderer } from \"./Parameters\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowNodeDefaults = {\n title?: string;\n subTitle?: string;\n color?: string;\n icon?: React.ReactNode;\n};\n\nconst DEFAULT_LABELS = {\n collapseLabel: \"Collapse\",\n expandLabel: \"Expand\",\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n /** Node description. */\n description?: string;\n /** Node actions. */\n actions?: HvActionsGenericProps[\"actions\"];\n /**\n * Node action callback.\n *\n * @deprecated Use `onAction` instead.\n * */\n actionCallback?: HvActionsGenericProps[\"actionsCallback\"]; // TODO - remove in v6\n /** Node action callback. */\n onAction?: HvActionsGenericProps[\"onAction\"];\n /** Whether the actions should be all icon buttons when visible. @default true */\n actionsIconOnly?: HvActionsGenericProps[\"iconOnly\"];\n /** Node maximum number of actions visible. */\n maxVisibleActions?: HvActionsGenericProps[\"maxVisibleActions\"];\n /** Node expanded */\n expanded?: boolean;\n /** Node parameters */\n params?: HvFlowNodeParam[];\n /** A set of node default values for when there are no groups to fetch this data from. */\n nodeDefaults?: HvFlowNodeDefaults;\n /** Props to be passed to the expand parameters button. */\n expandParamsButtonProps?: HvButtonProps;\n /** Labels used on the node. */\n labels?: HvFlowBaseNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowNodeClasses;\n /** Remove the ability to customize the label of the Node */\n disableInlineEdit?: boolean;\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 disableInlineEdit,\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 { setNodeData } = useFlowNodeUtils();\n\n const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n const subtitle =\n node?.data.customNodeLabel ||\n nodeTypes?.[type].meta?.label ||\n nodeDefaults?.subTitle;\n const groupId = nodeTypes?.[type].meta?.groupId;\n\n const inlineEditorWidth =\n actions === undefined ||\n (Array.isArray(actions) && actions.length === 0) ||\n maxVisibleActions === 0\n ? \"100%\"\n : `calc(200px - calc(${maxVisibleActions} * 32px + ${theme.spacing(2)}))`;\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 <Info color=\"base_dark\" />\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 color=\"base_dark\" />\n ) : (\n <Down 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 (disableInlineEdit ? (\n <HvTypography className={classes.subtitle}>\n {subtitle}\n </HvTypography>\n ) : (\n <HvInlineEditor\n defaultValue={subtitle}\n showIcon\n classes={{\n root: classes.inlineEditRoot,\n button: classes.inlineEditButton,\n inputRoot: css({\n width: inlineEditorWidth,\n }),\n }}\n onBlur={(evt, value) =>\n setNodeData((prev) => ({ ...prev, customNodeLabel: value }))\n }\n />\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":"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"}
|
|
@@ -6,17 +6,22 @@ const baseClasses = Object.fromEntries(
|
|
|
6
6
|
const { staticClasses, useClasses } = createClasses("HvFlowNode", {
|
|
7
7
|
subtitleContainer: {
|
|
8
8
|
minHeight: 48,
|
|
9
|
-
padding: theme.spacing(
|
|
10
|
-
theme.space.xs,
|
|
11
|
-
theme.space.xs,
|
|
12
|
-
theme.space.xs,
|
|
13
|
-
theme.space.sm
|
|
14
|
-
),
|
|
9
|
+
padding: theme.spacing("xs"),
|
|
15
10
|
display: "flex",
|
|
16
11
|
flexDirection: "row",
|
|
17
12
|
justifyContent: "space-between",
|
|
18
13
|
alignItems: "center"
|
|
19
14
|
},
|
|
15
|
+
subtitle: {
|
|
16
|
+
paddingLeft: theme.spacing("xs")
|
|
17
|
+
},
|
|
18
|
+
inlineEditRoot: {
|
|
19
|
+
display: "inline-flex",
|
|
20
|
+
flexGrow: 1
|
|
21
|
+
},
|
|
22
|
+
inlineEditButton: {
|
|
23
|
+
justifyContent: "space-between"
|
|
24
|
+
},
|
|
20
25
|
actions: {},
|
|
21
26
|
actionsButton: {
|
|
22
27
|
gap: 0
|
|
@@ -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(\
|
|
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(\"xs\"),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n subtitle: {\n paddingLeft: theme.spacing(\"xs\"),\n },\n inlineEditRoot: {\n display: \"inline-flex\",\n flexGrow: 1,\n },\n inlineEditButton: {\n justifyContent: \"space-between\",\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,QAAQ,IAAI;AAAA,IAC3B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,UAAU;AAAA,IACR,aAAa,MAAM,QAAQ,IAAI;AAAA,EACjC;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,IACb,KAAK;AAAA,EACP;AAAA,EACA,iBAAiB;AAAA,IACf,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA;AAAA,EAEA,GAAG;AACL,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardNode.js","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 useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDashboard, HvDashboardProps } from \"../../Dashboard\";\nimport { HvFlowNode, HvFlowNodeProps } from \"../Node\";\nimport { staticClasses, useClasses } from \"./DashboardNode.styles\";\n\nexport { staticClasses as hvDashboardNodeClasses };\n\nconst DEFAULT_LABELS = {\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 type HvDashboardNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDashboardNodeProps\n extends HvFlowNodeProps,\n Pick<HvDialogProps, \"open\" | \"onClose\">,\n Pick<HvDashboardProps, \"layout\"> {\n classes?: HvDashboardNodeClasses;\n labels?: HvFlowNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n previewItems?: React.ReactNode;\n onApply?: () => void;\n onCancel?: () => void;\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\n id={id}\n classes={classes}\n labels={labels as HvDashboardNodeProps[\"labels\"]}\n {...others}\n >\n {children}\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 />}\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":";;;;;;;AAmBA,MAAM,iBAAiB;AAAA,EACrB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;
|
|
1
|
+
{"version":3,"file":"DashboardNode.js","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 useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDashboard, HvDashboardProps } from \"../../Dashboard\";\nimport { HvFlowNode, HvFlowNodeProps } from \"../Node\";\nimport { staticClasses, useClasses } from \"./DashboardNode.styles\";\n\nexport { staticClasses as hvDashboardNodeClasses };\n\nconst DEFAULT_LABELS = {\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 type HvDashboardNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDashboardNodeProps\n extends HvFlowNodeProps,\n Pick<HvDialogProps, \"open\" | \"onClose\">,\n Pick<HvDashboardProps, \"layout\"> {\n classes?: HvDashboardNodeClasses;\n labels?: HvFlowNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n previewItems?: React.ReactNode;\n onApply?: () => void;\n onCancel?: () => void;\n dashboardProps?: Omit<HvDashboardProps, \"children\">;\n dialogProps?: HvDialogProps;\n}\n\n/** @deprecated no longer supported. Instead create a custom node with `HvDialog` + `HvDashboard` */\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\n id={id}\n classes={classes}\n labels={labels as HvDashboardNodeProps[\"labels\"]}\n {...others}\n >\n {children}\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 />}\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":";;;;;;;AAmBA,MAAM,iBAAiB;AAAA,EACrB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;AAkBa,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;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAS;AAAA,YACT,WAAS;AAAA,YACT;AAAA,YACC,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAA,oBAAC,eAAc,EAAA,SAAQ,QAAQ,UAAA,QAAQ,aAAY;AAAA,cACnD,qBAAC,iBAAgB,EAAA,eAAa,MAC3B,UAAA;AAAA,gBAAQ,QAAA;AAAA,gBACR,UAAU,QAAQ,SAAS,IAC1B;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAM;AAAA,oBACN;AAAA,oBACA,aAAY;AAAA,oBACZ,WAAW;AAAA,oBACX,QAAQ,CAAC,IAAI,EAAE;AAAA,oBACf,kBAAkB,CAAC,GAAG,EAAE;AAAA,oBACvB,GAAG;AAAA,oBAEH,UAAA;AAAA,kBAAA;AAAA,gBAAA,IAGH;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW,QAAQ;AAAA,oBACnB,0BAAO,MAAK,EAAA;AAAA,oBACZ,SAAS,QAAQ;AAAA,kBAAA;AAAA,gBACnB;AAAA,cAAA,GAEJ;AAAA,mCACC,iBACC,EAAA,UAAA;AAAA,gBAAA,oBAAC,YAAS,SAAQ,WAAU,SAAS,SAClC,kBAAQ,aACX;AAAA,oCACC,UAAS,EAAA,SAAQ,mBAAkB,SAAS,UAC1C,kBAAQ,cACX;AAAA,cAAA,GACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -18,7 +18,8 @@ const HvWizardActions = ({
|
|
|
18
18
|
skip: "Skip",
|
|
19
19
|
submit: "Submit"
|
|
20
20
|
},
|
|
21
|
-
handleBeforeNext
|
|
21
|
+
handleBeforeNext,
|
|
22
|
+
handleBeforePrevious
|
|
22
23
|
}) => {
|
|
23
24
|
const { classes, css, cx } = useClasses(classesProp);
|
|
24
25
|
const { context, setContext, tab, setTab } = useContext(HvWizardContext);
|
|
@@ -90,7 +91,13 @@ const HvWizardActions = ({
|
|
|
90
91
|
variant: "secondaryGhost",
|
|
91
92
|
className: classes.buttonWidth,
|
|
92
93
|
disabled: tab <= 0,
|
|
93
|
-
onClick: () =>
|
|
94
|
+
onClick: () => {
|
|
95
|
+
if (handleBeforePrevious) {
|
|
96
|
+
handleBeforePrevious();
|
|
97
|
+
} else {
|
|
98
|
+
setTab((t) => t - 1);
|
|
99
|
+
}
|
|
100
|
+
},
|
|
94
101
|
startIcon: /* @__PURE__ */ jsx(Backwards, {}),
|
|
95
102
|
children: labels.previous ?? "Previous"
|
|
96
103
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardActions.js","sources":["../../../../src/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\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 | React.ReactNode;\n /** Skip button label. */\n skip?: string | React.ReactNode;\n /** Previous button label. */\n previous?: string | React.ReactNode;\n /** Next button label. */\n next?: string | React.ReactNode;\n /** Submit button label. */\n submit?: string | React.ReactNode;\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 /** Function executed instead of default go to next page */\n handleBeforeNext?: () => void;\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 handleBeforeNext,\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 const nextDisabled = useMemo(() => {\n if (loading) return true;\n\n return !skippable && !context?.[tab]?.valid;\n }, [context, loading, skippable, tab]);\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={() => {\n if (handleBeforeNext) {\n handleBeforeNext();\n } else {\n setTab((t) => t + 1);\n }\n }}\n disabled={nextDisabled}\n endIcon={<Forwards />}\n >\n {labels.next ?? \"Next\"}\n </HvButton>\n )}\n </div>\n </HvDialogActions>\n );\n};\n"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"WizardActions.js","sources":["../../../../src/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\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 | React.ReactNode;\n /** Skip button label. */\n skip?: string | React.ReactNode;\n /** Previous button label. */\n previous?: string | React.ReactNode;\n /** Next button label. */\n next?: string | React.ReactNode;\n /** Submit button label. */\n submit?: string | React.ReactNode;\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 /** Function executed instead of default go to next page */\n handleBeforeNext?: () => void;\n /** Function executed instead of default go to previous page */\n handleBeforePrevious?: () => void;\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 handleBeforeNext,\n handleBeforePrevious,\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 const nextDisabled = useMemo(() => {\n if (loading) return true;\n\n return !skippable && !context?.[tab]?.valid;\n }, [context, loading, skippable, tab]);\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={() => {\n if (handleBeforePrevious) {\n handleBeforePrevious();\n } else {\n setTab((t) => t - 1);\n }\n }}\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={() => {\n if (handleBeforeNext) {\n handleBeforeNext();\n } else {\n setTab((t) => t + 1);\n }\n }}\n disabled={nextDisabled}\n endIcon={<Forwards />}\n >\n {labels.next ?? \"Next\"}\n </HvButton>\n )}\n </div>\n </HvDialogActions>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAiDO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,SAAS,YAAY,KAAK,WAAW,WAAW,eAAe;AACvE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACR,UAAA,iBAAiB,OAAO,QAAQ,OAAO;AAC7C,QAAI,eAAe,QAAQ;AACzB,eAAS,eAAe,MAAM;AAE9B,YAAM,cAAc,OAAO,QAAQ,OAAO,EAAE;AAAA,QAC1C,CAAC,CAAG,EAAA,KAAK,MAAM,OAAO;AAAA,MAAA;AAExB,UAAI,gBAAgB,WAAW;AAC7B,qBAAa,WAAW;AAAA,MAC1B;AAAA,IACF;AAAA,KACC,CAAC,SAAS,WAAW,cAAc,QAAQ,CAAC;AAE/C,QAAM,WAAW,QAAQ;AACzB,QAAM,aAAa,OAAO;AAEpB,QAAA,aAAa,YAAY,MAAM;AACnC;AAAA,MAAW,CAAC,MACV,OAAO,QAAQ,CAAC,EAAE;AAAA,QAChB,CAAC,KAAK,CAAC,KAAK,KAAK,OAAO;AAAA,UACtB,GAAG;AAAA,UACH,CAAC,CAAC,GAAG,GAAG;AAAA,YACN,GAAG;AAAA,YACH,OAAO,OAAO,UAAU;AAAA,UAC1B;AAAA,QAAA;AAAA,QAEF,CAAC;AAAA,MACH;AAAA,IAAA;AAEF,WAAO,QAAQ;AAAA,EACd,GAAA,CAAC,QAAQ,UAAU,UAAU,CAAC;AAEjC,QAAM,uBAAuB;AAAA,IAC3B,MAAM,aAAa,OAAO;AAAA,IAC1B,CAAC,cAAc,OAAO;AAAA,EAAA;AAGlB,QAAA,eAAe,QAAQ,MAAM;AAC7B,QAAA;AAAgB,aAAA;AAEpB,WAAO,CAAC,aAAa,CAAC,UAAU,GAAG,GAAG;AAAA,KACrC,CAAC,SAAS,SAAS,WAAW,GAAG,CAAC;AAErC,SACG,qBAAA,iBAAA,EAAgB,WAAW,QAAQ,kBAClC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAW,QAAQ;AAAA,QAElB,iBAAO,UAAU;AAAA,MAAA;AAAA,IACpB;AAAA,IACC,aACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,UAAU;AAAA,QACV,WAAW,QAAQ;AAAA,QACnB,SAAS;AAAA,QAER,iBAAO,QAAQ;AAAA,MAAA;AAAA,IAClB;AAAA,IAEF,oBAAC,OAAI,EAAA,eAAW,MAAC,WAAW,IAAI,EAAE,MAAM,EAAG,CAAA,GAAG,UAE9C,IAAA,CAAA;AAAA,IACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,kBACtB,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAW,QAAQ;AAAA,UACnB,UAAU,OAAO;AAAA,UACjB,SAAS,MAAM;AACb,gBAAI,sBAAsB;AACH;YAAA,OAChB;AACE,qBAAA,CAAC,MAAM,IAAI,CAAC;AAAA,YACrB;AAAA,UACF;AAAA,UACA,+BAAY,WAAU,EAAA;AAAA,UAErB,iBAAO,YAAY;AAAA,QAAA;AAAA,MACtB;AAAA,MACC,aACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAW,QAAQ;AAAA,UACnB,UAAU,WAAW,CAAC;AAAA,UACtB,SAAS;AAAA,UAER,iBAAO,UAAU;AAAA,QAAA;AAAA,MAAA,IAGpB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAW,GAAG,QAAQ,aAAa,QAAQ,aAAa;AAAA,UACxD,SAAS,MAAM;AACb,gBAAI,kBAAkB;AACH;YAAA,OACZ;AACE,qBAAA,CAAC,MAAM,IAAI,CAAC;AAAA,YACrB;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,6BAAU,UAAS,EAAA;AAAA,UAElB,iBAAO,QAAQ;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA,GAEJ;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -138,6 +138,9 @@ export declare const flowNodeClasses: {
|
|
|
138
138
|
outputContainer: "HvFlowNode-outputContainer";
|
|
139
139
|
handleConnected: "HvFlowNode-handleConnected";
|
|
140
140
|
subtitleContainer: "HvFlowNode-subtitleContainer";
|
|
141
|
+
subtitle: "HvFlowNode-subtitle";
|
|
142
|
+
inlineEditRoot: "HvFlowNode-inlineEditRoot";
|
|
143
|
+
inlineEditButton: "HvFlowNode-inlineEditButton";
|
|
141
144
|
actionsButton: "HvFlowNode-actionsButton";
|
|
142
145
|
paramsContainer: "HvFlowNode-paramsContainer";
|
|
143
146
|
};
|
|
@@ -301,6 +304,7 @@ export declare const HvDashboard: (props: HvDashboardProps) => JSX_2.Element;
|
|
|
301
304
|
|
|
302
305
|
export declare type HvDashboardClasses = ExtractNames<typeof useClasses_3>;
|
|
303
306
|
|
|
307
|
+
/** @deprecated no longer supported. Instead create a custom node with `HvDialog` + `HvDashboard` */
|
|
304
308
|
export declare const HvDashboardNode: (props: HvDashboardNodeProps) => JSX_2.Element;
|
|
305
309
|
|
|
306
310
|
export declare type HvDashboardNodeClasses = ExtractNames<typeof useClasses_9>;
|
|
@@ -326,6 +330,9 @@ export declare const hvDashboardNodeClasses: {
|
|
|
326
330
|
outputContainer: "HvDashboardNode-outputContainer";
|
|
327
331
|
handleConnected: "HvDashboardNode-handleConnected";
|
|
328
332
|
subtitleContainer: "HvDashboardNode-subtitleContainer";
|
|
333
|
+
subtitle: "HvDashboardNode-subtitle";
|
|
334
|
+
inlineEditRoot: "HvDashboardNode-inlineEditRoot";
|
|
335
|
+
inlineEditButton: "HvDashboardNode-inlineEditButton";
|
|
329
336
|
actionsButton: "HvDashboardNode-actionsButton";
|
|
330
337
|
paramsContainer: "HvDashboardNode-paramsContainer";
|
|
331
338
|
};
|
|
@@ -492,7 +499,7 @@ export declare interface HvFlowMinimapProps<NodeData = any> extends Omit<MiniMap
|
|
|
492
499
|
classes?: HvFlowMinimapClasses;
|
|
493
500
|
}
|
|
494
501
|
|
|
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;
|
|
502
|
+
export declare const HvFlowNode: ({ id, type, headerItems, description, actions, actionCallback, onAction, maxVisibleActions, expanded, actionsIconOnly, params, nodeDefaults, classes: classesProp, labels: labelsProps, children, expandParamsButtonProps, disableInlineEdit, ...props }: HvFlowNodeProps<unknown>) => JSX_2.Element;
|
|
496
503
|
|
|
497
504
|
export declare interface HvFlowNodeAction extends HvActionGeneric {
|
|
498
505
|
callback?: (node: Node_2) => void;
|
|
@@ -591,6 +598,8 @@ export declare interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T>
|
|
|
591
598
|
labels?: HvFlowBaseNodeProps["labels"] & Partial<typeof DEFAULT_LABELS_4>;
|
|
592
599
|
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
593
600
|
classes?: HvFlowNodeClasses;
|
|
601
|
+
/** Remove the ability to customize the label of the Node */
|
|
602
|
+
disableInlineEdit?: boolean;
|
|
594
603
|
}
|
|
595
604
|
|
|
596
605
|
export declare interface HvFlowNodeSelectParam extends HvFlowNodeSharedParam {
|
|
@@ -733,7 +742,7 @@ declare interface HvStepProps extends Pick<HvButtonProps, "onClick">, Omit<HvBas
|
|
|
733
742
|
|
|
734
743
|
export declare const HvWizard: ({ className, children, onClose, handleSubmit, title, open, skippable, loading, hasSummary, summaryContent, labels, fixedHeight, customStep, classes: classesProp, ...others }: HvWizardProps) => JSX_2.Element;
|
|
735
744
|
|
|
736
|
-
export declare const HvWizardActions: ({ classes: classesProp, handleClose, handleSubmit, loading, skippable, labels, handleBeforeNext, }: HvWizardActionsProps) => JSX_2.Element;
|
|
745
|
+
export declare const HvWizardActions: ({ classes: classesProp, handleClose, handleSubmit, loading, skippable, labels, handleBeforeNext, handleBeforePrevious, }: HvWizardActionsProps) => JSX_2.Element;
|
|
737
746
|
|
|
738
747
|
export declare type HvWizardActionsClasses = ExtractNames<typeof useClasses_13>;
|
|
739
748
|
|
|
@@ -763,6 +772,8 @@ export declare interface HvWizardActionsProps extends HvBaseProps {
|
|
|
763
772
|
classes?: HvWizardActionsClasses;
|
|
764
773
|
/** Function executed instead of default go to next page */
|
|
765
774
|
handleBeforeNext?: () => void;
|
|
775
|
+
/** Function executed instead of default go to previous page */
|
|
776
|
+
handleBeforePrevious?: () => void;
|
|
766
777
|
}
|
|
767
778
|
|
|
768
779
|
export declare type HvWizardClasses = ExtractNames<typeof useClasses_12>;
|
|
@@ -1091,7 +1102,7 @@ declare const useClasses_7: (classesProp?: Partial<Record<"root" | "title" | "ti
|
|
|
1091
1102
|
cx: (...args: any) => string;
|
|
1092
1103
|
};
|
|
1093
1104
|
|
|
1094
|
-
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) => {
|
|
1105
|
+
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" | "subtitle" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
|
|
1095
1106
|
classes: {
|
|
1096
1107
|
root: string;
|
|
1097
1108
|
title: string;
|
|
@@ -1112,6 +1123,9 @@ declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "ti
|
|
|
1112
1123
|
outputContainer: string;
|
|
1113
1124
|
handleConnected: string;
|
|
1114
1125
|
subtitleContainer: string;
|
|
1126
|
+
subtitle: string;
|
|
1127
|
+
inlineEditRoot: string;
|
|
1128
|
+
inlineEditButton: string;
|
|
1115
1129
|
actionsButton: string;
|
|
1116
1130
|
paramsContainer: string;
|
|
1117
1131
|
};
|
|
@@ -1122,7 +1136,7 @@ declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "ti
|
|
|
1122
1136
|
cx: (...args: any) => string;
|
|
1123
1137
|
};
|
|
1124
1138
|
|
|
1125
|
-
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) => {
|
|
1139
|
+
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" | "subtitle" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
|
|
1126
1140
|
classes: {
|
|
1127
1141
|
root: string;
|
|
1128
1142
|
title: string;
|
|
@@ -1144,6 +1158,9 @@ declare const useClasses_9: (classesProp?: Partial<Record<"root" | "title" | "ti
|
|
|
1144
1158
|
outputContainer: string;
|
|
1145
1159
|
handleConnected: string;
|
|
1146
1160
|
subtitleContainer: string;
|
|
1161
|
+
subtitle: string;
|
|
1162
|
+
inlineEditRoot: string;
|
|
1163
|
+
inlineEditButton: string;
|
|
1147
1164
|
actionsButton: string;
|
|
1148
1165
|
paramsContainer: string;
|
|
1149
1166
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.34.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.64.
|
|
35
|
+
"@hitachivantara/uikit-react-core": "^5.64.3",
|
|
36
36
|
"@hitachivantara/uikit-react-icons": "^5.9.10",
|
|
37
37
|
"@hitachivantara/uikit-styles": "^5.29.0",
|
|
38
38
|
"@types/react-grid-layout": "^1.3.5",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"access": "public",
|
|
50
50
|
"directory": "package"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "e4d9b95ff33f0a36aa8205bd3529475974aa0fe2",
|
|
53
53
|
"exports": {
|
|
54
54
|
".": {
|
|
55
55
|
"require": "./dist/cjs/index.cjs",
|