@hitachivantara/uikit-react-lab 5.43.5 → 5.43.7
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/BaseNode.cjs +6 -12
- package/dist/cjs/Flow/Node/BaseNode.styles.cjs +1 -1
- package/dist/cjs/Flow/Node/Node.cjs +0 -1
- package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.cjs +21 -34
- package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.styles.cjs +3 -12
- package/dist/cjs/StepNavigation/SimpleNavigation/Dot/Dot.cjs +0 -1
- package/dist/cjs/StepNavigation/SimpleNavigation/Dot/Dot.styles.cjs +1 -1
- package/dist/esm/Flow/Node/BaseNode.js +6 -12
- package/dist/esm/Flow/Node/BaseNode.js.map +1 -1
- package/dist/esm/Flow/Node/BaseNode.styles.js +1 -1
- package/dist/esm/Flow/Node/BaseNode.styles.js.map +1 -1
- package/dist/esm/Flow/Node/Node.js +0 -1
- package/dist/esm/Flow/Node/Node.js.map +1 -1
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.js +21 -34
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -1
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.styles.js +3 -12
- package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.styles.js.map +1 -1
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.js +0 -1
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.styles.js +2 -2
- package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.styles.js.map +1 -1
- package/dist/types/index.d.ts +1 -3
- package/package.json +6 -6
|
@@ -96,12 +96,9 @@ const HvFlowBaseNode = ({
|
|
|
96
96
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
97
97
|
"div",
|
|
98
98
|
{
|
|
99
|
-
style: uikitReactUtils.mergeStyles(
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
"--node-color": color
|
|
103
|
-
}
|
|
104
|
-
),
|
|
99
|
+
style: uikitReactUtils.mergeStyles(void 0, {
|
|
100
|
+
"--node-color": color
|
|
101
|
+
}),
|
|
105
102
|
className: cx(
|
|
106
103
|
"nowheel",
|
|
107
104
|
// Disables the default canvas pan behaviour when scrolling inside the node
|
|
@@ -124,12 +121,9 @@ const HvFlowBaseNode = ({
|
|
|
124
121
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
125
122
|
"div",
|
|
126
123
|
{
|
|
127
|
-
style: uikitReactUtils.mergeStyles(
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
"--icon-color": iconColor
|
|
131
|
-
}
|
|
132
|
-
),
|
|
124
|
+
style: uikitReactUtils.mergeStyles(void 0, {
|
|
125
|
+
"--icon-color": iconColor
|
|
126
|
+
}),
|
|
133
127
|
className: classes.titleContainer,
|
|
134
128
|
children: [
|
|
135
129
|
icon,
|
|
@@ -123,7 +123,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowBaseNo
|
|
|
123
123
|
width: 10,
|
|
124
124
|
height: 10,
|
|
125
125
|
margin: uikitReactCore.theme.spacing(0, uikitReactCore.theme.space.xs),
|
|
126
|
-
borderRadius: uikitReactCore.theme.radii.
|
|
126
|
+
borderRadius: uikitReactCore.theme.radii.full,
|
|
127
127
|
backgroundColor: uikitReactCore.theme.colors.negative_20
|
|
128
128
|
},
|
|
129
129
|
footerContainer: {
|
|
@@ -48,45 +48,32 @@ const HvStep = ({
|
|
|
48
48
|
const status = state === "Current" ? "secondary_60" : void 0;
|
|
49
49
|
const IconComponent = iconStateObject[state];
|
|
50
50
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
51
|
-
|
|
51
|
+
uikitReactCore.HvButton,
|
|
52
52
|
{
|
|
53
|
-
className: cx(
|
|
54
|
-
classes.
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
53
|
+
className: cx(classes.root, className, {
|
|
54
|
+
[classes.notCurrent]: state !== "Current"
|
|
55
|
+
}),
|
|
56
|
+
"aria-label": title,
|
|
57
|
+
icon: true,
|
|
58
|
+
disabled: disabled ?? ["Current", "Disabled"].includes(state),
|
|
59
|
+
onClick,
|
|
60
60
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
61
|
-
uikitReactCore.
|
|
61
|
+
uikitReactCore.HvAvatar,
|
|
62
62
|
{
|
|
63
|
-
className: cx(classes.
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
disabled: disabled ?? ["Current", "Disabled"].includes(state),
|
|
70
|
-
onClick,
|
|
71
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
72
|
-
uikitReactCore.HvAvatar,
|
|
63
|
+
className: cx(classes.avatar, classes[size]),
|
|
64
|
+
backgroundColor,
|
|
65
|
+
status,
|
|
66
|
+
size,
|
|
67
|
+
children: IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
68
|
+
IconComponent,
|
|
73
69
|
{
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
IconComponent,
|
|
80
|
-
{
|
|
81
|
-
color,
|
|
82
|
-
semantic,
|
|
83
|
-
width: svgSize,
|
|
84
|
-
height: svgSize,
|
|
85
|
-
iconSize
|
|
86
|
-
}
|
|
87
|
-
) : number
|
|
70
|
+
color,
|
|
71
|
+
semantic,
|
|
72
|
+
width: svgSize,
|
|
73
|
+
height: svgSize,
|
|
74
|
+
iconSize
|
|
88
75
|
}
|
|
89
|
-
)
|
|
76
|
+
) : number
|
|
90
77
|
}
|
|
91
78
|
)
|
|
92
79
|
}
|
|
@@ -2,19 +2,10 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
4
4
|
const { staticClasses, useClasses } = uikitReactCore.createClasses("HvStep", {
|
|
5
|
-
root: {
|
|
6
|
-
|
|
7
|
-
"
|
|
8
|
-
backgroundColor: "transparent"
|
|
9
|
-
},
|
|
10
|
-
"&$ghostDisabled": {
|
|
11
|
-
cursor: "default"
|
|
12
|
-
},
|
|
13
|
-
"&$ghostDisabled&:hover": {
|
|
14
|
-
cursor: "default"
|
|
15
|
-
}
|
|
5
|
+
root: {
|
|
6
|
+
width: "fit-content",
|
|
7
|
+
height: "fit-content"
|
|
16
8
|
},
|
|
17
|
-
ghostDisabled: {},
|
|
18
9
|
notCurrent: { margin: "-8px" },
|
|
19
10
|
xs: {},
|
|
20
11
|
sm: {},
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
4
4
|
const { staticClasses, useClasses } = uikitReactCore.createClasses("HvDot", {
|
|
5
|
-
root: { borderRadius:
|
|
5
|
+
root: { borderRadius: uikitReactCore.theme.radii.full, zIndex: 1 },
|
|
6
6
|
active: {},
|
|
7
7
|
ghostDisabled: {}
|
|
8
8
|
});
|
|
@@ -95,12 +95,9 @@ const HvFlowBaseNode = ({
|
|
|
95
95
|
return /* @__PURE__ */ jsxs(
|
|
96
96
|
"div",
|
|
97
97
|
{
|
|
98
|
-
style: mergeStyles(
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
"--node-color": color
|
|
102
|
-
}
|
|
103
|
-
),
|
|
98
|
+
style: mergeStyles(void 0, {
|
|
99
|
+
"--node-color": color
|
|
100
|
+
}),
|
|
104
101
|
className: cx(
|
|
105
102
|
"nowheel",
|
|
106
103
|
// Disables the default canvas pan behaviour when scrolling inside the node
|
|
@@ -123,12 +120,9 @@ const HvFlowBaseNode = ({
|
|
|
123
120
|
/* @__PURE__ */ jsxs(
|
|
124
121
|
"div",
|
|
125
122
|
{
|
|
126
|
-
style: mergeStyles(
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
"--icon-color": iconColor
|
|
130
|
-
}
|
|
131
|
-
),
|
|
123
|
+
style: mergeStyles(void 0, {
|
|
124
|
+
"--icon-color": iconColor
|
|
125
|
+
}),
|
|
132
126
|
className: classes.titleContainer,
|
|
133
127
|
children: [
|
|
134
128
|
icon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvIconButton,\n HvTypography,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { mergeStyles } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvUseNodeParams, useHvNode } from \"../hooks\";\nimport {\n HvFlowNodeInput,\n HvFlowNodeInputGroup,\n HvFlowNodeOutput,\n HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n isConnected,\n isInputGroup,\n isOutputGroup,\n renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const DEFAULT_LABELS = {\n outputsTitle: \"Outputs\",\n inputsTitle: \"Inputs\",\n deleteActionLabel: \"Delete\",\n duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvFlowBaseNodeProps<T = any>\n extends Omit<HvBaseProps, \"id\" | \"color\">,\n Omit<HvUseNodeParams, \"id\">,\n NodeProps<T> {\n /** Header items */\n headerItems?: React.ReactNode;\n /** The content of the node footer */\n footer?: React.ReactNode;\n /** Labels used on the node. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n id,\n title: titleProp,\n headerItems,\n icon: iconProp,\n color: colorProp,\n inputs: inputsProp,\n outputs: outputsProp,\n nodeActions: nodeActionsProp,\n footer,\n classes: classesProp,\n labels: labelsProp,\n className,\n children,\n}: HvFlowBaseNodeProps<unknown>) => {\n const {\n toggleShowActions,\n getNodeToolbarProps,\n handleDefaultAction,\n nodeActions,\n title,\n icon,\n color,\n iconColor,\n inputEdges,\n inputs,\n outputEdges,\n outputs,\n node,\n } = useHvNode({\n id,\n title: titleProp,\n inputs: inputsProp,\n outputs: outputsProp,\n icon: iconProp,\n color: colorProp,\n labels: labelsProp,\n nodeActions: nodeActionsProp,\n });\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const { classes, cx } = useClasses(classesProp);\n\n const renderOutput = (output: HvFlowNodeOutput) => {\n const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n return (\n <div className={classes.outputContainer} key={output.id}>\n <Handle\n type=\"source\"\n isConnectableEnd={false}\n id={output.id}\n position={Position.Right}\n className={cx(classes.handle, {\n [classes.handleConnected]: edgeConnected,\n })}\n />\n {output.isMandatory && !edgeConnected && (\n <div className={classes.mandatory} />\n )}\n <HvTypography component=\"div\">{output.label}</HvTypography>\n </div>\n );\n };\n\n const renderInput = (input: HvFlowNodeInput) => {\n const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n return (\n <div className={classes.inputContainer} key={input.id}>\n <Handle\n type=\"target\"\n isConnectableStart={false}\n id={input.id}\n position={Position.Left}\n className={cx(classes.handle, {\n [classes.handleConnected]: edgeConnected,\n })}\n />\n <HvTypography component=\"div\">{input.label}</HvTypography>\n {input.isMandatory && !edgeConnected && (\n <div className={classes.mandatory} />\n )}\n </div>\n );\n };\n\n if (!node) return null;\n\n return (\n <div\n style={mergeStyles(\n {},\n {\n \"--node-color\": color,\n },\n )}\n className={cx(\n \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n classes.root,\n className,\n )}\n onMouseEnter={toggleShowActions}\n onMouseLeave={toggleShowActions}\n >\n <NodeToolbar {...getNodeToolbarProps()}>\n {nodeActions?.map((action) => (\n <HvIconButton\n key={action.id}\n title={action.label}\n onClick={() => handleDefaultAction(action)}\n >\n {renderedIcon(action.icon)}\n </HvIconButton>\n ))}\n </NodeToolbar>\n <div className={classes.headerContainer}>\n <div\n style={mergeStyles(\n {},\n {\n \"--icon-color\": iconColor,\n },\n )}\n className={classes.titleContainer}\n >\n {icon}\n <HvTypography\n component=\"p\"\n variant=\"title4\"\n className={classes.title}\n >\n {title}\n </HvTypography>\n </div>\n {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n </div>\n {children && <div className={classes.contentContainer}>{children}</div>}\n {inputs && inputs.length > 0 && (\n <>\n <div className={classes.inputsTitleContainer}>\n <HvTypography>{labels?.inputsTitle}</HvTypography>\n </div>\n <div className={classes.inputsContainer}>\n {inputs?.map((input, idx) => {\n if (!isInputGroup(input)) return renderInput(input);\n\n return (\n <div\n className={classes.inputGroupContainer}\n key={`group${idx}`}\n >\n <HvTypography component=\"div\" variant=\"label\">\n {input.label}\n </HvTypography>\n {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n renderInput(inp),\n )}\n </div>\n );\n })}\n </div>\n </>\n )}\n {outputs && outputs.length > 0 && (\n <>\n <div className={classes.outputsTitleContainer}>\n <HvTypography>{labels?.outputsTitle}</HvTypography>\n </div>\n <div className={classes.outputsContainer}>\n {outputs?.map((output, idx) => {\n if (!isOutputGroup(output)) {\n return renderOutput(output);\n }\n\n return (\n <div\n className={classes.outputGroupContainer}\n key={`group${idx}`}\n >\n <HvTypography component=\"div\" variant=\"label\">\n {output.label}\n </HvTypography>\n {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n return renderOutput(out);\n })}\n </div>\n );\n })}\n </div>\n </>\n )}\n {footer && <div className={classes.footerContainer}>{footer}</div>}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvIconButton,\n HvTypography,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { mergeStyles } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvUseNodeParams, useHvNode } from \"../hooks\";\nimport {\n HvFlowNodeInput,\n HvFlowNodeInputGroup,\n HvFlowNodeOutput,\n HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n isConnected,\n isInputGroup,\n isOutputGroup,\n renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const DEFAULT_LABELS = {\n outputsTitle: \"Outputs\",\n inputsTitle: \"Inputs\",\n deleteActionLabel: \"Delete\",\n duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvFlowBaseNodeProps<T = any>\n extends Omit<HvBaseProps, \"id\" | \"color\">,\n Omit<HvUseNodeParams, \"id\">,\n NodeProps<T> {\n /** Header items */\n headerItems?: React.ReactNode;\n /** The content of the node footer */\n footer?: React.ReactNode;\n /** Labels used on the node. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n id,\n title: titleProp,\n headerItems,\n icon: iconProp,\n color: colorProp,\n inputs: inputsProp,\n outputs: outputsProp,\n nodeActions: nodeActionsProp,\n footer,\n classes: classesProp,\n labels: labelsProp,\n className,\n children,\n}: HvFlowBaseNodeProps<unknown>) => {\n const {\n toggleShowActions,\n getNodeToolbarProps,\n handleDefaultAction,\n nodeActions,\n title,\n icon,\n color,\n iconColor,\n inputEdges,\n inputs,\n outputEdges,\n outputs,\n node,\n } = useHvNode({\n id,\n title: titleProp,\n inputs: inputsProp,\n outputs: outputsProp,\n icon: iconProp,\n color: colorProp,\n labels: labelsProp,\n nodeActions: nodeActionsProp,\n });\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const { classes, cx } = useClasses(classesProp);\n\n const renderOutput = (output: HvFlowNodeOutput) => {\n const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n return (\n <div className={classes.outputContainer} key={output.id}>\n <Handle\n type=\"source\"\n isConnectableEnd={false}\n id={output.id}\n position={Position.Right}\n className={cx(classes.handle, {\n [classes.handleConnected]: edgeConnected,\n })}\n />\n {output.isMandatory && !edgeConnected && (\n <div className={classes.mandatory} />\n )}\n <HvTypography component=\"div\">{output.label}</HvTypography>\n </div>\n );\n };\n\n const renderInput = (input: HvFlowNodeInput) => {\n const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n return (\n <div className={classes.inputContainer} key={input.id}>\n <Handle\n type=\"target\"\n isConnectableStart={false}\n id={input.id}\n position={Position.Left}\n className={cx(classes.handle, {\n [classes.handleConnected]: edgeConnected,\n })}\n />\n <HvTypography component=\"div\">{input.label}</HvTypography>\n {input.isMandatory && !edgeConnected && (\n <div className={classes.mandatory} />\n )}\n </div>\n );\n };\n\n if (!node) return null;\n\n return (\n <div\n style={mergeStyles(undefined, {\n \"--node-color\": color,\n })}\n className={cx(\n \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n classes.root,\n className,\n )}\n onMouseEnter={toggleShowActions}\n onMouseLeave={toggleShowActions}\n >\n <NodeToolbar {...getNodeToolbarProps()}>\n {nodeActions?.map((action) => (\n <HvIconButton\n key={action.id}\n title={action.label}\n onClick={() => handleDefaultAction(action)}\n >\n {renderedIcon(action.icon)}\n </HvIconButton>\n ))}\n </NodeToolbar>\n <div className={classes.headerContainer}>\n <div\n style={mergeStyles(undefined, {\n \"--icon-color\": iconColor,\n })}\n className={classes.titleContainer}\n >\n {icon}\n <HvTypography\n component=\"p\"\n variant=\"title4\"\n className={classes.title}\n >\n {title}\n </HvTypography>\n </div>\n {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n </div>\n {children && <div className={classes.contentContainer}>{children}</div>}\n {inputs && inputs.length > 0 && (\n <>\n <div className={classes.inputsTitleContainer}>\n <HvTypography>{labels?.inputsTitle}</HvTypography>\n </div>\n <div className={classes.inputsContainer}>\n {inputs?.map((input, idx) => {\n if (!isInputGroup(input)) return renderInput(input);\n\n return (\n <div\n className={classes.inputGroupContainer}\n key={`group${idx}`}\n >\n <HvTypography component=\"div\" variant=\"label\">\n {input.label}\n </HvTypography>\n {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n renderInput(inp),\n )}\n </div>\n );\n })}\n </div>\n </>\n )}\n {outputs && outputs.length > 0 && (\n <>\n <div className={classes.outputsTitleContainer}>\n <HvTypography>{labels?.outputsTitle}</HvTypography>\n </div>\n <div className={classes.outputsContainer}>\n {outputs?.map((output, idx) => {\n if (!isOutputGroup(output)) {\n return renderOutput(output);\n }\n\n return (\n <div\n className={classes.outputGroupContainer}\n key={`group${idx}`}\n >\n <HvTypography component=\"div\" variant=\"label\">\n {output.label}\n </HvTypography>\n {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n return renderOutput(out);\n })}\n </div>\n );\n })}\n </div>\n </>\n )}\n {footer && <div className={classes.footerContainer}>{footer}</div>}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,iBAAiB;AAAA,EAC5B,cAAc;AAAA,EACd,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,sBAAsB;AACxB;AAgBO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AAAA,EACb;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AACF,MAAoC;AAC5B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,UAAU;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,EAAA,CACd;AAEK,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,eAAe,CAAC,WAA6B;AACjD,UAAM,gBAAgB,YAAY,IAAI,UAAU,OAAO,IAAK,WAAW;AAEvE,WACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,kBAAkB;AAAA,UAClB,IAAI,OAAO;AAAA,UACX,UAAU,SAAS;AAAA,UACnB,WAAW,GAAG,QAAQ,QAAQ;AAAA,YAC5B,CAAC,QAAQ,eAAe,GAAG;AAAA,UAC5B,CAAA;AAAA,QAAA;AAAA,MACH;AAAA,MACC,OAAO,eAAe,CAAC,qCACrB,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,MAEpC,oBAAA,cAAA,EAAa,WAAU,OAAO,iBAAO,MAAM,CAAA;AAAA,IAAA,EAAA,GAbA,OAAO,EAcrD;AAAA,EAEJ;AAEM,QAAA,cAAc,CAAC,UAA2B;AAC9C,UAAM,gBAAgB,YAAY,IAAI,UAAU,MAAM,IAAK,UAAU;AAErE,WACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,oBAAoB;AAAA,UACpB,IAAI,MAAM;AAAA,UACV,UAAU,SAAS;AAAA,UACnB,WAAW,GAAG,QAAQ,QAAQ;AAAA,YAC5B,CAAC,QAAQ,eAAe,GAAG;AAAA,UAC5B,CAAA;AAAA,QAAA;AAAA,MACH;AAAA,MACC,oBAAA,cAAA,EAAa,WAAU,OAAO,gBAAM,OAAM;AAAA,MAC1C,MAAM,eAAe,CAAC,qCACpB,OAAI,EAAA,WAAW,QAAQ,UAAW,CAAA;AAAA,IAAA,EAAA,GAZM,MAAM,EAcnD;AAAA,EAEJ;AAEI,MAAA,CAAC,KAAa,QAAA;AAGhB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,YAAY,QAAW;AAAA,QAC5B,gBAAgB;AAAA,MAAA,CACjB;AAAA,MACD,WAAW;AAAA,QACT;AAAA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,MAEd,UAAA;AAAA,QAAA,oBAAC,eAAa,GAAG,uBACd,UAAa,aAAA,IAAI,CAAC,WACjB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,SAAS,MAAM,oBAAoB,MAAM;AAAA,YAExC,UAAA,aAAa,OAAO,IAAI;AAAA,UAAA;AAAA,UAJpB,OAAO;AAAA,QAMf,CAAA,GACH;AAAA,QACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO,YAAY,QAAW;AAAA,gBAC5B,gBAAgB;AAAA,cAAA,CACjB;AAAA,cACD,WAAW,QAAQ;AAAA,cAElB,UAAA;AAAA,gBAAA;AAAA,gBACD;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,SAAQ;AAAA,oBACR,WAAW,QAAQ;AAAA,oBAElB,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UACF;AAAA,UACC,mCAAgB,OAAI,EAAA,OAAO,EAAE,SAAS,OAAA,GAAW,UAAY,YAAA,CAAA;AAAA,QAAA,GAChE;AAAA,QACC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBAAmB,UAAS;AAAA,QAChE,UAAU,OAAO,SAAS,KAEvB,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,sBACtB,8BAAC,cAAc,EAAA,UAAA,QAAQ,aAAY,EACrC,CAAA;AAAA,UACA,oBAAC,SAAI,WAAW,QAAQ,iBACrB,UAAQ,QAAA,IAAI,CAAC,OAAO,QAAQ;AAC3B,gBAAI,CAAC,aAAa,KAAK,EAAG,QAAO,YAAY,KAAK;AAGhD,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,QAAQ;AAAA,gBAGnB,UAAA;AAAA,kBAAA,oBAAC,gBAAa,WAAU,OAAM,SAAQ,SACnC,gBAAM,OACT;AAAA,kBACE,MAA+B,OAAO;AAAA,oBAAI,CAAC,QAC3C,YAAY,GAAG;AAAA,kBAAA;AAAA,gBACjB;AAAA,cAAA;AAAA,cAPK,QAAQ,GAAG;AAAA,YAQlB;AAAA,UAAA,CAEH,EACH,CAAA;AAAA,QAAA,GACF;AAAA,QAED,WAAW,QAAQ,SAAS,KAEzB,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,uBACtB,8BAAC,cAAc,EAAA,UAAA,QAAQ,cAAa,EACtC,CAAA;AAAA,UACA,oBAAC,SAAI,WAAW,QAAQ,kBACrB,UAAS,SAAA,IAAI,CAAC,QAAQ,QAAQ;AACzB,gBAAA,CAAC,cAAc,MAAM,GAAG;AAC1B,qBAAO,aAAa,MAAM;AAAA,YAAA;AAI1B,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,QAAQ;AAAA,gBAGnB,UAAA;AAAA,kBAAA,oBAAC,gBAAa,WAAU,OAAM,SAAQ,SACnC,iBAAO,OACV;AAAA,kBACE,OAAiC,QAAQ,IAAI,CAAC,QAAQ;AACtD,2BAAO,aAAa,GAAG;AAAA,kBACxB,CAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAPI,QAAQ,GAAG;AAAA,YAQlB;AAAA,UAAA,CAEH,EACH,CAAA;AAAA,QAAA,GACF;AAAA,QAED,UAAW,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBAAkB,UAAO,OAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9D;AAEJ;"}
|
|
@@ -121,7 +121,7 @@ const { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
|
|
|
121
121
|
width: 10,
|
|
122
122
|
height: 10,
|
|
123
123
|
margin: theme.spacing(0, theme.space.xs),
|
|
124
|
-
borderRadius: theme.radii.
|
|
124
|
+
borderRadius: theme.radii.full,
|
|
125
125
|
backgroundColor: theme.colors.negative_20
|
|
126
126
|
},
|
|
127
127
|
footerContainer: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseNode.styles.js","sources":["../../../../src/Flow/Node/BaseNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowBaseNode\", {\n root: {\n borderRadius: theme.radii.round,\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n minWidth: \"250px\",\n border: \"1px solid var(--node-color)\",\n },\n headerContainer: {\n padding: theme.spacing(0.5, 1),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n borderTopLeftRadius: \"inherit\",\n borderTopRightRadius: \"inherit\",\n backgroundColor: \"var(--node-color)\",\n },\n titleContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n \"& svg *.color0\": { fill: \"var(--icon-color)\" },\n },\n title: {\n color: theme.colors.base_dark,\n },\n inputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo3}`,\n borderBottom: `1px solid ${theme.colors.atmo3}`,\n },\n outputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo3}`,\n borderBottom: `1px solid ${theme.colors.atmo3}`,\n },\n contentContainer: {},\n inputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-start\",\n },\n outputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-end\",\n },\n inputGroupContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n alignItems: \"flex-start\",\n },\n outputGroupContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n alignItems: \"flex-end\",\n },\n inputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n position: \"relative\",\n },\n outputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n position: \"relative\",\n },\n handle: {\n zIndex: theme.zIndices.overlay,\n marginLeft: 2,\n backgroundColor: theme.colors.atmo1,\n height: 10,\n width: 10,\n border: `1px solid ${theme.colors.secondary_60}`,\n \"&.react-flow__handle-left\": {\n left: -23,\n },\n \"&.react-flow__handle-right\": {\n right: -21,\n },\n \"&.react-flow__handle-connecting\": {\n backgroundColor: theme.colors.negative_20,\n },\n \"&.react-flow__handle-valid\": {\n backgroundColor: theme.colors.positive_20,\n },\n \"::before\": {\n fontSize: 14,\n color: theme.colors.secondary_60,\n content: '\"+\"',\n marginTop: -7,\n position: \"absolute\",\n },\n },\n handleConnected: {\n backgroundColor: theme.colors.secondary_60,\n width: 8,\n height: 8,\n\n \"::before\": {\n fontSize: 11,\n marginTop: -8,\n },\n },\n mandatory: {\n width: 10,\n height: 10,\n margin: theme.spacing(0, theme.space.xs),\n borderRadius: theme.radii.
|
|
1
|
+
{"version":3,"file":"BaseNode.styles.js","sources":["../../../../src/Flow/Node/BaseNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowBaseNode\", {\n root: {\n borderRadius: theme.radii.round,\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n minWidth: \"250px\",\n border: \"1px solid var(--node-color)\",\n },\n headerContainer: {\n padding: theme.spacing(0.5, 1),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n borderTopLeftRadius: \"inherit\",\n borderTopRightRadius: \"inherit\",\n backgroundColor: \"var(--node-color)\",\n },\n titleContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n \"& svg *.color0\": { fill: \"var(--icon-color)\" },\n },\n title: {\n color: theme.colors.base_dark,\n },\n inputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo3}`,\n borderBottom: `1px solid ${theme.colors.atmo3}`,\n },\n outputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo3}`,\n borderBottom: `1px solid ${theme.colors.atmo3}`,\n },\n contentContainer: {},\n inputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-start\",\n },\n outputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-end\",\n },\n inputGroupContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n alignItems: \"flex-start\",\n },\n outputGroupContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n alignItems: \"flex-end\",\n },\n inputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n position: \"relative\",\n },\n outputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n position: \"relative\",\n },\n handle: {\n zIndex: theme.zIndices.overlay,\n marginLeft: 2,\n backgroundColor: theme.colors.atmo1,\n height: 10,\n width: 10,\n border: `1px solid ${theme.colors.secondary_60}`,\n \"&.react-flow__handle-left\": {\n left: -23,\n },\n \"&.react-flow__handle-right\": {\n right: -21,\n },\n \"&.react-flow__handle-connecting\": {\n backgroundColor: theme.colors.negative_20,\n },\n \"&.react-flow__handle-valid\": {\n backgroundColor: theme.colors.positive_20,\n },\n \"::before\": {\n fontSize: 14,\n color: theme.colors.secondary_60,\n content: '\"+\"',\n marginTop: -7,\n position: \"absolute\",\n },\n },\n handleConnected: {\n backgroundColor: theme.colors.secondary_60,\n width: 8,\n height: 8,\n\n \"::before\": {\n fontSize: 11,\n marginTop: -8,\n },\n },\n mandatory: {\n width: 10,\n height: 10,\n margin: theme.spacing(0, theme.space.xs),\n borderRadius: theme.radii.full,\n backgroundColor: theme.colors.negative_20,\n },\n footerContainer: {\n padding: theme.space.sm,\n borderTop: `1px solid ${theme.colors.atmo3}`,\n },\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import { useState } from \"react\";\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 { DropDownXS, Info } 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\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 subtitle - this is typically the node \"name\" */\n subtitle?: string;\n /** Node group ID */\n groupId?: string;\n /** Node expanded */\n expanded?: boolean;\n /** Node parameters */\n params?: HvFlowNodeParam[];\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 actions,\n actionCallback, // TODO - remove in v6\n onAction,\n maxVisibleActions = 1,\n expanded = false,\n actionsIconOnly = true,\n params,\n classes: classesProp,\n labels: labelsProps,\n children,\n expandParamsButtonProps,\n disableInlineEdit,\n title: titleProp,\n subtitle: subtitleProp,\n description,\n groupId,\n color: colorProp,\n icon: iconProp,\n ...props\n}: HvFlowNodeProps<unknown>) => {\n const { classes } = useClasses(classesProp);\n const [showParams, setShowParams] = useState(expanded);\n const { nodeGroups, defaultActions } = useFlowContext();\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n const node = useFlowNode();\n const { setNodeData } = useFlowNodeUtils();\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 nodeGroup = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n\n const title = titleProp || nodeGroup?.label;\n const icon = iconProp || nodeGroup?.icon;\n const color = colorProp || nodeGroup?.color;\n const subtitle = subtitleProp || node?.data.nodeLabel;\n\n const hasParams = !!(params && params.length > 0);\n\n return (\n <HvFlowBaseNode\n id={id}\n type={type}\n title={title}\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
|
|
1
|
+
{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import { useState } from \"react\";\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 { DropDownXS, Info } 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\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 subtitle - this is typically the node \"name\" */\n subtitle?: string;\n /** Node group ID */\n groupId?: string;\n /** Node expanded */\n expanded?: boolean;\n /** Node parameters */\n params?: HvFlowNodeParam[];\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 actions,\n actionCallback, // TODO - remove in v6\n onAction,\n maxVisibleActions = 1,\n expanded = false,\n actionsIconOnly = true,\n params,\n classes: classesProp,\n labels: labelsProps,\n children,\n expandParamsButtonProps,\n disableInlineEdit,\n title: titleProp,\n subtitle: subtitleProp,\n description,\n groupId,\n color: colorProp,\n icon: iconProp,\n ...props\n}: HvFlowNodeProps<unknown>) => {\n const { classes } = useClasses(classesProp);\n const [showParams, setShowParams] = useState(expanded);\n const { nodeGroups, defaultActions } = useFlowContext();\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n const node = useFlowNode();\n const { setNodeData } = useFlowNodeUtils();\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 nodeGroup = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n\n const title = titleProp || nodeGroup?.label;\n const icon = iconProp || nodeGroup?.icon;\n const color = colorProp || nodeGroup?.color;\n const subtitle = subtitleProp || node?.data.nodeLabel;\n\n const hasParams = !!(params && params.length > 0);\n\n return (\n <HvFlowBaseNode\n id={id}\n type={type}\n title={title}\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 onClick={() => setShowParams((p) => !p)}\n aria-label={\n showParams ? labels?.collapseLabel : labels?.expandLabel\n }\n {...expandParamsButtonProps}\n >\n <DropDownXS rotate={showParams} color=\"base_dark\" />\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 style={{ width: inlineEditorWidth }}\n classes={{\n root: classes.inlineEditRoot,\n button: classes.inlineEditButton,\n }}\n onBlur={(evt, value) =>\n setNodeData((prev) => ({ ...prev, nodeLabel: 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":";;;;;;;;;;AAyBA,MAAM,iBAAiB;AAAA,EACrB,eAAe;AAAA,EACf,aAAa;AACf;AAqCO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,MAAM;AAAA,EACN,GAAG;AACL,MAAgC;AAC9B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAC1C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,QAAQ;AACrD,QAAM,EAAE,YAAY,eAAe,IAAI,eAAe;AAChD,QAAA,SAAS,UAAU,gBAAgB,WAAW;AACpD,QAAM,OAAO,YAAY;AACnB,QAAA,EAAE,YAAY,IAAI,iBAAiB;AAEzC,QAAM,oBACJ,YAAY,UACX,MAAM,QAAQ,OAAO,KAAK,QAAQ,WAAW,KAC9C,sBAAsB,IAClB,SACA,qBAAqB,iBAAiB,aAAa,MAAM,QAAQ,CAAC,CAAC;AAEzE,QAAM,YAAa,WAAW,cAAc,WAAW,OAAO,KAAM;AAE9D,QAAA,QAAQ,aAAa,WAAW;AAChC,QAAA,OAAO,YAAY,WAAW;AAC9B,QAAA,QAAQ,aAAa,WAAW;AAChC,QAAA,WAAW,gBAAgB,MAAM,KAAK;AAE5C,QAAM,YAAY,CAAC,EAAE,UAAU,OAAO,SAAS;AAG7C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;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,SAAS,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;AAAA,YACtC,cACE,aAAa,QAAQ,gBAAgB,QAAQ;AAAA,YAE9C,GAAG;AAAA,YAEJ,UAAC,oBAAA,YAAA,EAAW,QAAQ,YAAY,OAAM,YAAY,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACpD,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,OAAO,EAAE,OAAO,kBAAkB;AAAA,cAClC,SAAS;AAAA,gBACP,MAAM,QAAQ;AAAA,gBACd,QAAQ,QAAQ;AAAA,cAClB;AAAA,cACA,QAAQ,CAAC,KAAK,UACZ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,WAAW,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,UAI5D,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,UAAA;AAAA,QACZ,GAEJ;AAAA,QAED;AAAA,QACA,cAAc,UACZ,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA,oBAAC,eAAc,EAAA,QAAgB,MAAM,MAAM,MAAM,EACnD,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}
|
|
@@ -46,45 +46,32 @@ const HvStep = ({
|
|
|
46
46
|
const status = state === "Current" ? "secondary_60" : void 0;
|
|
47
47
|
const IconComponent = iconStateObject[state];
|
|
48
48
|
return /* @__PURE__ */ jsx(
|
|
49
|
-
|
|
49
|
+
HvButton,
|
|
50
50
|
{
|
|
51
|
-
className: cx(
|
|
52
|
-
classes.
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
51
|
+
className: cx(classes.root, className, {
|
|
52
|
+
[classes.notCurrent]: state !== "Current"
|
|
53
|
+
}),
|
|
54
|
+
"aria-label": title,
|
|
55
|
+
icon: true,
|
|
56
|
+
disabled: disabled ?? ["Current", "Disabled"].includes(state),
|
|
57
|
+
onClick,
|
|
58
58
|
children: /* @__PURE__ */ jsx(
|
|
59
|
-
|
|
59
|
+
HvAvatar,
|
|
60
60
|
{
|
|
61
|
-
className: cx(classes.
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
disabled: disabled ?? ["Current", "Disabled"].includes(state),
|
|
68
|
-
onClick,
|
|
69
|
-
children: /* @__PURE__ */ jsx(
|
|
70
|
-
HvAvatar,
|
|
61
|
+
className: cx(classes.avatar, classes[size]),
|
|
62
|
+
backgroundColor,
|
|
63
|
+
status,
|
|
64
|
+
size,
|
|
65
|
+
children: IconComponent ? /* @__PURE__ */ jsx(
|
|
66
|
+
IconComponent,
|
|
71
67
|
{
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
IconComponent,
|
|
78
|
-
{
|
|
79
|
-
color,
|
|
80
|
-
semantic,
|
|
81
|
-
width: svgSize,
|
|
82
|
-
height: svgSize,
|
|
83
|
-
iconSize
|
|
84
|
-
}
|
|
85
|
-
) : number
|
|
68
|
+
color,
|
|
69
|
+
semantic,
|
|
70
|
+
width: svgSize,
|
|
71
|
+
height: svgSize,
|
|
72
|
+
iconSize
|
|
86
73
|
}
|
|
87
|
-
)
|
|
74
|
+
) : number
|
|
88
75
|
}
|
|
89
76
|
)
|
|
90
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.js","sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import {\n ExtractNames,\n HvAvatar,\n HvBaseProps,\n HvButton,\n HvButtonProps,\n HvSize,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n HourGlass,\n IconSize,\n IconType,\n Level0Good,\n Level3Bad,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { getColor, getSemantic } from \"../utils\";\nimport { useClasses } from \"./Step.styles\";\n\ntype HvStepClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepProps\n extends Pick<HvButtonProps, \"onClick\">,\n Omit<HvBaseProps, \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepClasses;\n /** State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"} */\n state:\n | \"Pending\"\n | \"Failed\"\n | \"Completed\"\n | \"Current\"\n | \"Disabled\"\n | \"Enabled\";\n /** Title of the step. */\n title: string;\n /** Sets one of the standard sizes of the step */\n size?: HvSize;\n /** Number of the step. */\n number?: number;\n /**\n * Define if a step is disabled/enabled.\n * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n */\n disabled?: boolean;\n}\n\nconst iconSizeObject: Record<HvSize, IconSize> = {\n xs: \"XS\",\n sm: \"XS\",\n md: \"S\",\n lg: \"M\",\n xl: \"M\",\n};\n\nconst stateObject: Record<string, number> = {\n Pending: 16,\n Failed: 24,\n Completed: 24,\n};\n\nconst iconStateObject: Record<string, IconType> = {\n Pending: HourGlass,\n Failed: Level3Bad,\n Completed: Level0Good,\n};\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nexport const HvStep = ({\n className,\n classes: classesProp,\n state,\n title,\n onClick,\n disabled,\n size = \"md\",\n number = 1,\n}: HvStepProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const iconSize = iconSizeObject[size];\n const squareL = stateObject[state];\n const svgSize = {\n xs: squareL - 8,\n sm: squareL,\n md: squareL + 8,\n lg: squareL + 16,\n xl: squareL + 24,\n }[size];\n\n const backgroundColor = getColor(state);\n\n const color = state === \"Pending\" ? \"atmo2\" : undefined;\n const semantic = state !== \"Pending\" ? getSemantic(state) : undefined;\n const status = state === \"Current\" ? \"secondary_60\" : undefined;\n const IconComponent = iconStateObject[state];\n\n return (\n <
|
|
1
|
+
{"version":3,"file":"Step.js","sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import {\n ExtractNames,\n HvAvatar,\n HvBaseProps,\n HvButton,\n HvButtonProps,\n HvSize,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n HourGlass,\n IconSize,\n IconType,\n Level0Good,\n Level3Bad,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { getColor, getSemantic } from \"../utils\";\nimport { useClasses } from \"./Step.styles\";\n\ntype HvStepClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepProps\n extends Pick<HvButtonProps, \"onClick\">,\n Omit<HvBaseProps, \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepClasses;\n /** State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"} */\n state:\n | \"Pending\"\n | \"Failed\"\n | \"Completed\"\n | \"Current\"\n | \"Disabled\"\n | \"Enabled\";\n /** Title of the step. */\n title: string;\n /** Sets one of the standard sizes of the step */\n size?: HvSize;\n /** Number of the step. */\n number?: number;\n /**\n * Define if a step is disabled/enabled.\n * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n */\n disabled?: boolean;\n}\n\nconst iconSizeObject: Record<HvSize, IconSize> = {\n xs: \"XS\",\n sm: \"XS\",\n md: \"S\",\n lg: \"M\",\n xl: \"M\",\n};\n\nconst stateObject: Record<string, number> = {\n Pending: 16,\n Failed: 24,\n Completed: 24,\n};\n\nconst iconStateObject: Record<string, IconType> = {\n Pending: HourGlass,\n Failed: Level3Bad,\n Completed: Level0Good,\n};\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nexport const HvStep = ({\n className,\n classes: classesProp,\n state,\n title,\n onClick,\n disabled,\n size = \"md\",\n number = 1,\n}: HvStepProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const iconSize = iconSizeObject[size];\n const squareL = stateObject[state];\n const svgSize = {\n xs: squareL - 8,\n sm: squareL,\n md: squareL + 8,\n lg: squareL + 16,\n xl: squareL + 24,\n }[size];\n\n const backgroundColor = getColor(state);\n\n const color = state === \"Pending\" ? \"atmo2\" : undefined;\n const semantic = state !== \"Pending\" ? getSemantic(state) : undefined;\n const status = state === \"Current\" ? \"secondary_60\" : undefined;\n const IconComponent = iconStateObject[state];\n\n return (\n <HvButton\n className={cx(classes.root, className, {\n [classes.notCurrent]: state !== \"Current\",\n })}\n aria-label={title}\n icon\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n <HvAvatar\n className={cx(classes.avatar, classes[size])}\n backgroundColor={backgroundColor}\n status={status}\n size={size}\n >\n {IconComponent ? (\n <IconComponent\n color={color}\n semantic={semantic}\n width={svgSize}\n height={svgSize}\n iconSize={iconSize}\n />\n ) : (\n number\n )}\n </HvAvatar>\n </HvButton>\n );\n};\n"],"names":[],"mappings":";;;;;AA+CA,MAAM,iBAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,cAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AACb;AAEA,MAAM,kBAA4C;AAAA,EAChD,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AACb;AAKO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AACX,MAAmB;AACjB,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,WAAW,eAAe,IAAI;AAC9B,QAAA,UAAU,YAAY,KAAK;AACjC,QAAM,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI;AAAA,IACJ,IAAI,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI;AAEA,QAAA,kBAAkB,SAAS,KAAK;AAEhC,QAAA,QAAQ,UAAU,YAAY,UAAU;AAC9C,QAAM,WAAW,UAAU,YAAY,YAAY,KAAK,IAAI;AACtD,QAAA,SAAS,UAAU,YAAY,iBAAiB;AAChD,QAAA,gBAAgB,gBAAgB,KAAK;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,UAAU,GAAG,UAAU;AAAA,MAAA,CACjC;AAAA,MACD,cAAY;AAAA,MACZ,MAAI;AAAA,MACJ,UAAU,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,MAC5D;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,IAAI,CAAC;AAAA,UAC3C;AAAA,UACA;AAAA,UACA;AAAA,UAEC,UACC,gBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,QAAQ;AAAA,cACR;AAAA,YAAA;AAAA,UAAA,IAGF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAEJ;"}
|
|
@@ -1,18 +1,9 @@
|
|
|
1
1
|
import { createClasses } from "@hitachivantara/uikit-react-core";
|
|
2
2
|
const { staticClasses, useClasses } = createClasses("HvStep", {
|
|
3
|
-
root: {
|
|
4
|
-
|
|
5
|
-
"
|
|
6
|
-
backgroundColor: "transparent"
|
|
7
|
-
},
|
|
8
|
-
"&$ghostDisabled": {
|
|
9
|
-
cursor: "default"
|
|
10
|
-
},
|
|
11
|
-
"&$ghostDisabled&:hover": {
|
|
12
|
-
cursor: "default"
|
|
13
|
-
}
|
|
3
|
+
root: {
|
|
4
|
+
width: "fit-content",
|
|
5
|
+
height: "fit-content"
|
|
14
6
|
},
|
|
15
|
-
ghostDisabled: {},
|
|
16
7
|
notCurrent: { margin: "-8px" },
|
|
17
8
|
xs: {},
|
|
18
9
|
sm: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.styles.js","sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvStep\", {\n root: {
|
|
1
|
+
{"version":3,"file":"Step.styles.js","sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvStep\", {\n root: {\n width: \"fit-content\",\n height: \"fit-content\",\n },\n notCurrent: { margin: \"-8px\" },\n xs: {},\n sm: {},\n md: {},\n lg: {},\n xl: {},\n avatar: {\n \"&$xs\": {\n fontSize: \"0.625rem\",\n },\n \"&$sm\": {\n fontSize: \"1rem\",\n },\n \"&$md\": {\n fontSize: \"1.5rem\",\n },\n \"&$lg\": {\n fontSize: \"2rem\",\n },\n \"&$xl\": {\n fontSize: \"2.5rem\",\n },\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,EAAE,QAAQ,OAAO;AAAA,EAC7B,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dot.js","sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import {\n ExtractNames,\n HvBaseProps,\n HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { dotSizes, getColor } from \"../utils\";\nimport { staticClasses, useClasses } from \"./Dot.styles\";\n\nexport { staticClasses as dotClasses };\n\nexport type HvDotClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotProps\n extends Pick<\n HvStepProps,\n \"size\" | \"title\" | \"state\" | \"onClick\" | \"disabled\"\n >,\n Omit<HvBaseProps, \"title\" | \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvDotClasses;\n}\n\nexport const HvDot = ({\n classes: classesProp,\n className,\n state,\n title,\n size = \"sm\",\n onClick,\n disabled,\n}: HvDotProps) => {\n const { classes, cx, css } = useClasses(classesProp);\n\n const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n return (\n <HvButton\n className={cx(\n css({\n backgroundColor: getColor(state),\n width: dotSize,\n height: dotSize,\n \"&:hover, &:disabled\": {\n backgroundColor: getColor(state),\n },\n }),\n classes.root,\n {\n [classes.active]: state === \"Current\",\n [classes.ghostDisabled]:\n disabled ?? [\"Current\", \"Disabled\"].includes(state),\n },\n className,\n )}\n aria-label={`${title}`}\n icon\n
|
|
1
|
+
{"version":3,"file":"Dot.js","sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import {\n ExtractNames,\n HvBaseProps,\n HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { dotSizes, getColor } from \"../utils\";\nimport { staticClasses, useClasses } from \"./Dot.styles\";\n\nexport { staticClasses as dotClasses };\n\nexport type HvDotClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotProps\n extends Pick<\n HvStepProps,\n \"size\" | \"title\" | \"state\" | \"onClick\" | \"disabled\"\n >,\n Omit<HvBaseProps, \"title\" | \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvDotClasses;\n}\n\nexport const HvDot = ({\n classes: classesProp,\n className,\n state,\n title,\n size = \"sm\",\n onClick,\n disabled,\n}: HvDotProps) => {\n const { classes, cx, css } = useClasses(classesProp);\n\n const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n return (\n <HvButton\n className={cx(\n css({\n backgroundColor: getColor(state),\n width: dotSize,\n height: dotSize,\n \"&:hover, &:disabled\": {\n backgroundColor: getColor(state),\n },\n }),\n classes.root,\n {\n [classes.active]: state === \"Current\",\n [classes.ghostDisabled]:\n disabled ?? [\"Current\", \"Disabled\"].includes(state),\n },\n className,\n )}\n aria-label={`${title}`}\n icon\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n {[]}\n </HvButton>\n );\n};\n"],"names":[],"mappings":";;;;;AAwBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,UAAU,SAAS,IAAI,KAAK,UAAU,YAAY,MAAM;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,IAAI;AAAA,UACF,iBAAiB,SAAS,KAAK;AAAA,UAC/B,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,uBAAuB;AAAA,YACrB,iBAAiB,SAAS,KAAK;AAAA,UAAA;AAAA,QACjC,CACD;AAAA,QACD,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG,UAAU;AAAA,UAC5B,CAAC,QAAQ,aAAa,GACpB,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,QACtD;AAAA,QACA;AAAA,MACF;AAAA,MACA,cAAY,GAAG,KAAK;AAAA,MACpB,MAAI;AAAA,MACJ,UAAU,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,MAC5D;AAAA,MAEC,UAAC,CAAA;AAAA,IAAA;AAAA,EACJ;AAEJ;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { createClasses } from "@hitachivantara/uikit-react-core";
|
|
1
|
+
import { createClasses, theme } from "@hitachivantara/uikit-react-core";
|
|
2
2
|
const { staticClasses, useClasses } = createClasses("HvDot", {
|
|
3
|
-
root: { borderRadius:
|
|
3
|
+
root: { borderRadius: theme.radii.full, zIndex: 1 },
|
|
4
4
|
active: {},
|
|
5
5
|
ghostDisabled: {}
|
|
6
6
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dot.styles.js","sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDot\", {\n root: { borderRadius:
|
|
1
|
+
{"version":3,"file":"Dot.styles.js","sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDot\", {\n root: { borderRadius: theme.radii.full, zIndex: 1 },\n active: {},\n ghostDisabled: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM,EAAE,cAAc,MAAM,MAAM,MAAM,QAAQ,EAAE;AAAA,EAClD,QAAQ,CAAC;AAAA,EACT,eAAe,CAAA;AACjB,CAAC;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -915,11 +915,9 @@ declare const useClasses_10: (classesProp?: Partial<Record<"root" | "separator"
|
|
|
915
915
|
readonly cx: (...args: any) => string;
|
|
916
916
|
};
|
|
917
917
|
|
|
918
|
-
declare const useClasses_11: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "root" | "
|
|
918
|
+
declare const useClasses_11: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "root" | "avatar" | "notCurrent", string>>, addStatic?: boolean) => {
|
|
919
919
|
readonly classes: {
|
|
920
920
|
root: string;
|
|
921
|
-
ghost: string;
|
|
922
|
-
ghostDisabled: string;
|
|
923
921
|
notCurrent: string;
|
|
924
922
|
xs: string;
|
|
925
923
|
sm: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "5.43.
|
|
3
|
+
"version": "5.43.7",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React components for the NEXT UI Kit.",
|
|
@@ -33,10 +33,10 @@
|
|
|
33
33
|
"@dnd-kit/core": "^6.1.0",
|
|
34
34
|
"@dnd-kit/modifiers": "^6.0.1",
|
|
35
35
|
"@emotion/css": "^11.11.0",
|
|
36
|
-
"@hitachivantara/uikit-react-core": "^5.
|
|
37
|
-
"@hitachivantara/uikit-react-icons": "^5.14.
|
|
38
|
-
"@hitachivantara/uikit-react-utils": "^0.2.
|
|
39
|
-
"@hitachivantara/uikit-styles": "^5.
|
|
36
|
+
"@hitachivantara/uikit-react-core": "^5.91.0",
|
|
37
|
+
"@hitachivantara/uikit-react-icons": "^5.14.2",
|
|
38
|
+
"@hitachivantara/uikit-react-utils": "^0.2.28",
|
|
39
|
+
"@hitachivantara/uikit-styles": "^5.44.0",
|
|
40
40
|
"@mui/base": "5.0.0-beta.68",
|
|
41
41
|
"@types/react-grid-layout": "^1.3.5",
|
|
42
42
|
"react-grid-layout": "^1.4.4",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"access": "public",
|
|
53
53
|
"directory": "package"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "6e2771d0ab5d8b8f3fa36e35da3c4233ffa59db9",
|
|
56
56
|
"exports": {
|
|
57
57
|
".": {
|
|
58
58
|
"types": "./dist/types/index.d.ts",
|