@hitachivantara/uikit-react-lab 5.33.4 → 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.
@@ -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("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: subtitle }) }),
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: () => setTab((t) => t - 1),
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 { useLabels, HvTooltip, HvButton, HvTypography, HvActionsGeneric } from "@hitachivantara/uikit-react-core";
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("div", { children: /* @__PURE__ */ jsx(HvTypography, { children: subtitle }) }),
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 = 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 <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 <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,mCACE,WAAU,EAAA,OAAO,aAChB,UAAC,oBAAA,MAAA,EAAK,OAAM,YAAA,CAAY,EAC1B,CAAA;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,UAAA,iCACE,IAAG,EAAA,OAAM,aAAY,IAEtB,oBAAC,MAAK,EAAA,OAAM,YAAY,CAAA;AAAA,UAAA;AAAA,QAE5B;AAAA,MAAA,GAEJ;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,YAAY,YACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,mBACrB,UAAA;AAAA,UAAA,YACE,oBAAA,OAAA,EACC,UAAC,oBAAA,cAAA,EAAc,mBAAS,CAAA,GAC1B;AAAA,UAED,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAS,EAAE,QAAQ,QAAQ,cAAc;AAAA,cACzC;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,cACA;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA,GAEJ;AAAA,QAED;AAAA,QACA,cAAc,UACZ,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA,oBAAC,eAAc,EAAA,QAAgB,MAAM,MAAM,KAAM,CAAA,GACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
1
+ {"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":";;;;;;;;;;;AAiCA,MAAM,iBAAiB;AAAA,EACrB,eAAe;AAAA,EACf,aAAa;AACf;AAmCO,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;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;AAEP,QAAA,EAAE,gBAAgB;AAExB,QAAM,EAAE,YAAY,WAAW,mBAAmB,eAAe;AAE3D,QAAA,WACJ,MAAM,KAAK,mBACX,YAAY,IAAI,EAAE,MAAM,SACxB,cAAc;AAChB,QAAM,UAAU,YAAY,IAAI,EAAE,MAAM;AAExC,QAAM,oBACJ,YAAY,UACX,MAAM,QAAQ,OAAO,KAAK,QAAQ,WAAW,KAC9C,sBAAsB,IAClB,SACA,qBAAqB,iBAAiB,aAAa,MAAM,QAAQ,CAAC,CAAC;AAEzE,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,mCACE,WAAU,EAAA,OAAO,aAChB,UAAC,oBAAA,MAAA,EAAK,OAAM,YAAA,CAAY,EAC1B,CAAA;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,UAAA,iCACE,IAAG,EAAA,OAAM,aAAY,IAEtB,oBAAC,MAAK,EAAA,OAAM,YAAY,CAAA;AAAA,UAAA;AAAA,QAE5B;AAAA,MAAA,GAEJ;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,YAAY,YACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,mBACrB,UAAA;AAAA,UAAA,aACE,oBACE,oBAAA,cAAA,EAAa,WAAW,QAAQ,UAC9B,oBACH,IAEA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,cAAc;AAAA,cACd,UAAQ;AAAA,cACR,SAAS;AAAA,gBACP,MAAM,QAAQ;AAAA,gBACd,QAAQ,QAAQ;AAAA,gBAChB,WAAW,IAAI;AAAA,kBACb,OAAO;AAAA,gBAAA,CACR;AAAA,cACH;AAAA,cACA,QAAQ,CAAC,KAAK,UACZ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,iBAAiB,MAAQ,EAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAIlE,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;"}
@@ -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(\n theme.space.xs,\n theme.space.xs,\n theme.space.xs,\n theme.space.sm,\n ),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n actions: {},\n actionsButton: {\n gap: 0,\n },\n paramsContainer: {\n borderTop: `1px solid ${theme.colors.atmo4}`,\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n padding: theme.space.sm,\n },\n // Spread here to know if we are overriding classes from parents\n ...baseClasses,\n});\n"],"names":["baseNodeClasses"],"mappings":";;AAIA,MAAM,cAAc,OAAO;AAAA,EACzB,OAAO,KAAKA,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA,CAAE,CAAC;AACrD;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,mBAAmB;AAAA,IACjB,WAAW;AAAA,IACX,SAAS,MAAM;AAAA,MACb,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,IACd;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,IACb,KAAK;AAAA,EACP;AAAA,EACA,iBAAiB;AAAA,IACf,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA;AAAA,EAEA,GAAG;AACL,CAAC;"}
1
+ {"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;AAiBa,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;"}
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: () => setTab((t) => t - 1),
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 &nbsp;\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":"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"}
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 &nbsp;\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":"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"}
@@ -2,6 +2,7 @@ import { BackgroundProps } from 'reactflow';
2
2
  import { ComponentClass } from 'react';
3
3
  import { ControlProps } from 'reactflow';
4
4
  import { CSSInterpolation } from '@emotion/serialize';
5
+ import { default as default_2 } from 'react';
5
6
  import { Dispatch } from 'react';
6
7
  import { DndContextProps } from '@dnd-kit/core';
7
8
  import { DragEndEvent } from '@dnd-kit/core';
@@ -29,7 +30,6 @@ import { ModalProps } from '@mui/material/Modal';
29
30
  import { Node as Node_2 } from 'reactflow';
30
31
  import { NodeProps } from 'reactflow';
31
32
  import { PanelPosition } from 'reactflow';
32
- import { default as React_2 } from 'react';
33
33
  import { ReactFlowInstance } from 'reactflow';
34
34
  import { ReactFlowProps } from 'reactflow';
35
35
  import { ReactGridLayoutProps } from 'react-grid-layout';
@@ -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
  };
@@ -167,13 +170,13 @@ export declare interface HvBladeProps extends HvBaseProps<HTMLDivElement, "onCha
167
170
  /**
168
171
  * The content that will be rendered within the blade.
169
172
  */
170
- children: React_2.ReactNode;
173
+ children: default_2.ReactNode;
171
174
  /**
172
175
  * The content of the blade's button.
173
176
  *
174
177
  * If a render function is provided, it will be called with the expanded state as an argument.
175
178
  */
176
- label?: React_2.ReactNode | ((expanded: boolean) => React_2.ReactNode);
179
+ label?: default_2.ReactNode | ((expanded: boolean) => default_2.ReactNode);
177
180
  /**
178
181
  * Typography variant for the blade's button label.
179
182
  */
@@ -206,7 +209,7 @@ export declare interface HvBladeProps extends HvBaseProps<HTMLDivElement, "onCha
206
209
  * @param {SyntheticEvent} event The event source of the callback.
207
210
  * @param {boolean} value The new value.
208
211
  */
209
- onChange?: (event: React_2.SyntheticEvent, value: boolean) => void;
212
+ onChange?: (event: default_2.SyntheticEvent, value: boolean) => void;
210
213
  /**
211
214
  * Specifies whether the blade is disabled. If true, the blade cannot be interacted with.
212
215
  */
@@ -282,7 +285,7 @@ export declare interface HvBladesProps extends HvBaseProps<HTMLDivElement, "onCh
282
285
  * The blades to be rendered within the group.
283
286
  * Must be instances of `HvBlade`, otherwise the behavior is undefined and will most likely break.
284
287
  */
285
- children: React_2.ReactNode;
288
+ children: default_2.ReactNode;
286
289
  /**
287
290
  * A Jss Object used to override or extend the styles applied.
288
291
  */
@@ -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
  };
@@ -409,11 +416,11 @@ export declare interface HvFlowBaseNodeProps<T = any> extends Omit<HvBaseProps,
409
416
  /** Header title */
410
417
  title?: string;
411
418
  /** Header icon */
412
- icon?: React_2.ReactNode;
419
+ icon?: default_2.ReactNode;
413
420
  /** Header color */
414
421
  color?: HvColorAny;
415
422
  /** Header items */
416
- headerItems?: React_2.ReactNode;
423
+ headerItems?: default_2.ReactNode;
417
424
  /** Node inputs */
418
425
  inputs?: (HvFlowNodeInput | HvFlowNodeInputGroup)[];
419
426
  /** Node outputs */
@@ -421,7 +428,7 @@ export declare interface HvFlowBaseNodeProps<T = any> extends Omit<HvBaseProps,
421
428
  /** Node actions */
422
429
  nodeActions?: HvFlowNodeAction[];
423
430
  /** The content of the node footer */
424
- footer?: React_2.ReactNode;
431
+ footer?: default_2.ReactNode;
425
432
  /** Labels used on the node. */
426
433
  labels?: Partial<typeof DEFAULT_LABELS>;
427
434
  /** A Jss Object used to override or extend the styles applied to the component. */
@@ -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;
@@ -509,7 +516,7 @@ export declare type HvFlowNodeDefaults = {
509
516
  title?: string;
510
517
  subTitle?: string;
511
518
  color?: string;
512
- icon?: React_2.ReactNode;
519
+ icon?: default_2.ReactNode;
513
520
  };
514
521
 
515
522
  /** HvFlowNode component type. @extends React.FC */
@@ -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>;
@@ -775,7 +786,7 @@ export declare interface HvWizardContainerProps extends Omit<HvBaseProps, "onClo
775
786
  /** Current state of the Wizard. */
776
787
  open: boolean;
777
788
  /** Function executed on close. */
778
- handleClose: (event: React_2.SyntheticEvent, reason?: "escapeKeyDown" | "backdropClick") => void;
789
+ handleClose: (event: default_2.SyntheticEvent, reason?: "escapeKeyDown" | "backdropClick") => void;
779
790
  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
780
791
  classes?: HvWizardContainerClasses;
781
792
  }
@@ -790,18 +801,18 @@ export declare interface HvWizardContentProps extends HvBaseProps {
790
801
  /** Whether the loading animation is shown. */
791
802
  loading?: boolean;
792
803
  /** The content of the summary. */
793
- summaryContent?: React_2.ReactNode;
804
+ summaryContent?: default_2.ReactNode;
794
805
  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
795
806
  classes?: HvWizardContentClasses;
796
807
  }
797
808
 
798
- export declare const HvWizardContext: React_2.Context<HvWizardContextProp>;
809
+ export declare const HvWizardContext: default_2.Context<HvWizardContextProp>;
799
810
 
800
811
  declare type HvWizardContextProp = {
801
812
  context: HvWizardTabs;
802
- setContext: React_2.Dispatch<React_2.SetStateAction<HvWizardTabs>>;
813
+ setContext: default_2.Dispatch<default_2.SetStateAction<HvWizardTabs>>;
803
814
  summary: boolean;
804
- setSummary: React_2.Dispatch<React_2.SetStateAction<boolean>>;
815
+ setSummary: default_2.Dispatch<default_2.SetStateAction<boolean>>;
805
816
  tab: number;
806
817
  setTab: Dispatch<SetStateAction<number>>;
807
818
  };
@@ -820,7 +831,7 @@ export declare interface HvWizardProps extends HvBaseProps, Pick<HvDialogProps,
820
831
  /** Shows the summary button. */
821
832
  hasSummary?: boolean;
822
833
  /** The content of the summary. */
823
- summaryContent?: React_2.ReactNode;
834
+ summaryContent?: default_2.ReactNode;
824
835
  /** Enables the skip button. */
825
836
  skippable?: boolean;
826
837
  /** Forces minimum height to the component. */
@@ -839,7 +850,7 @@ export declare type HvWizardTab = {
839
850
  mustValidate?: boolean;
840
851
  touched?: boolean;
841
852
  form?: any;
842
- children?: React_2.ReactNode;
853
+ children?: default_2.ReactNode;
843
854
  disabled?: boolean;
844
855
  loading?: boolean;
845
856
  [other: string]: any;
@@ -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.33.4",
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.1",
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,8 +49,7 @@
49
49
  "access": "public",
50
50
  "directory": "package"
51
51
  },
52
- "gitHead": "bdd638b19425b905ffa70b083e006f0820450113",
53
- "main": "dist/cjs/index.cjs",
52
+ "gitHead": "e4d9b95ff33f0a36aa8205bd3529475974aa0fe2",
54
53
  "exports": {
55
54
  ".": {
56
55
  "require": "./dist/cjs/index.cjs",