@hitachivantara/uikit-react-lab 5.43.11 → 5.44.1

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.
Files changed (73) hide show
  1. package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.cjs +4 -8
  2. package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.styles.cjs +2 -1
  3. package/dist/cjs/Wizard/WizardTitle/WizardTitle.styles.cjs +1 -4
  4. package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.js +5 -9
  5. package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.styles.js +3 -2
  6. package/dist/esm/Wizard/WizardTitle/WizardTitle.styles.js +1 -4
  7. package/dist/types/index.d.ts +14 -1
  8. package/package.json +6 -6
  9. package/dist/esm/Blade/Blade.js.map +0 -1
  10. package/dist/esm/Blade/Blade.styles.js.map +0 -1
  11. package/dist/esm/Blades/Blades.js.map +0 -1
  12. package/dist/esm/Blades/Blades.styles.js.map +0 -1
  13. package/dist/esm/Dashboard/Dashboard.js.map +0 -1
  14. package/dist/esm/Dashboard/Dashboard.styles.js.map +0 -1
  15. package/dist/esm/Flow/Background/Background.js.map +0 -1
  16. package/dist/esm/Flow/Controls/Controls.js.map +0 -1
  17. package/dist/esm/Flow/DroppableFlow.js.map +0 -1
  18. package/dist/esm/Flow/Empty/Empty.js.map +0 -1
  19. package/dist/esm/Flow/Empty/Empty.styles.js.map +0 -1
  20. package/dist/esm/Flow/Flow.js.map +0 -1
  21. package/dist/esm/Flow/Flow.styles.js.map +0 -1
  22. package/dist/esm/Flow/FlowContext/FlowContext.js.map +0 -1
  23. package/dist/esm/Flow/FlowContext/NodeMetaContext.js.map +0 -1
  24. package/dist/esm/Flow/Minimap/Minimap.js.map +0 -1
  25. package/dist/esm/Flow/Minimap/Minimap.styles.js.map +0 -1
  26. package/dist/esm/Flow/Node/BaseNode.js.map +0 -1
  27. package/dist/esm/Flow/Node/BaseNode.styles.js.map +0 -1
  28. package/dist/esm/Flow/Node/Node.js.map +0 -1
  29. package/dist/esm/Flow/Node/Node.styles.js.map +0 -1
  30. package/dist/esm/Flow/Node/Parameters/ParamRenderer.js.map +0 -1
  31. package/dist/esm/Flow/Node/Parameters/Select.js.map +0 -1
  32. package/dist/esm/Flow/Node/Parameters/Slider.js.map +0 -1
  33. package/dist/esm/Flow/Node/Parameters/Text.js.map +0 -1
  34. package/dist/esm/Flow/Node/utils.js.map +0 -1
  35. package/dist/esm/Flow/Sidebar/Sidebar.js.map +0 -1
  36. package/dist/esm/Flow/Sidebar/Sidebar.styles.js.map +0 -1
  37. package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.js.map +0 -1
  38. package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.js.map +0 -1
  39. package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js.map +0 -1
  40. package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js.map +0 -1
  41. package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js.map +0 -1
  42. package/dist/esm/Flow/base.js.map +0 -1
  43. package/dist/esm/Flow/hooks/useFlowContext.js.map +0 -1
  44. package/dist/esm/Flow/hooks/useFlowInstance.js.map +0 -1
  45. package/dist/esm/Flow/hooks/useFlowNode.js.map +0 -1
  46. package/dist/esm/Flow/hooks/useFlowNodeMeta.js.map +0 -1
  47. package/dist/esm/Flow/hooks/useNode.js.map +0 -1
  48. package/dist/esm/Flow/hooks/useNodeId.js.map +0 -1
  49. package/dist/esm/Flow/nodes/DashboardNode.js.map +0 -1
  50. package/dist/esm/Flow/nodes/DashboardNode.styles.js.map +0 -1
  51. package/dist/esm/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +0 -1
  52. package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.js.map +0 -1
  53. package/dist/esm/StepNavigation/DefaultNavigation/Step/Step.styles.js.map +0 -1
  54. package/dist/esm/StepNavigation/DefaultNavigation/utils.js.map +0 -1
  55. package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.js.map +0 -1
  56. package/dist/esm/StepNavigation/SimpleNavigation/Dot/Dot.styles.js.map +0 -1
  57. package/dist/esm/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +0 -1
  58. package/dist/esm/StepNavigation/SimpleNavigation/utils.js.map +0 -1
  59. package/dist/esm/StepNavigation/StepNavigation.js.map +0 -1
  60. package/dist/esm/StepNavigation/StepNavigation.styles.js.map +0 -1
  61. package/dist/esm/StepNavigation/utils.js.map +0 -1
  62. package/dist/esm/Wizard/Wizard.js.map +0 -1
  63. package/dist/esm/Wizard/Wizard.styles.js.map +0 -1
  64. package/dist/esm/Wizard/WizardActions/WizardActions.js.map +0 -1
  65. package/dist/esm/Wizard/WizardActions/WizardActions.styles.js.map +0 -1
  66. package/dist/esm/Wizard/WizardContainer/WizardContainer.js.map +0 -1
  67. package/dist/esm/Wizard/WizardContainer/WizardContainer.styles.js.map +0 -1
  68. package/dist/esm/Wizard/WizardContent/WizardContent.js.map +0 -1
  69. package/dist/esm/Wizard/WizardContent/WizardContent.styles.js.map +0 -1
  70. package/dist/esm/Wizard/WizardContext/WizardContext.js.map +0 -1
  71. package/dist/esm/Wizard/WizardTitle/WizardTitle.js.map +0 -1
  72. package/dist/esm/Wizard/WizardTitle/WizardTitle.styles.js.map +0 -1
  73. package/dist/esm/index.js.map +0 -1
@@ -43,18 +43,16 @@ const HvStep = ({
43
43
  xl: squareL + 24
44
44
  }[size];
45
45
  const backgroundColor = utils.getColor(state);
46
- const color = state === "Pending" ? "atmo2" : void 0;
47
- const semantic = state !== "Pending" ? utils.getSemantic(state) : void 0;
46
+ const color = state === "Pending" ? "atmo2" : utils.getSemantic(state);
48
47
  const status = state === "Current" ? "secondary_60" : void 0;
49
48
  const IconComponent = iconStateObject[state];
50
49
  return /* @__PURE__ */ jsxRuntime.jsx(
51
- uikitReactCore.HvButton,
50
+ uikitReactCore.HvButtonBase,
52
51
  {
53
52
  className: cx(classes.root, className, {
54
53
  [classes.notCurrent]: state !== "Current"
55
54
  }),
56
55
  "aria-label": title,
57
- icon: true,
58
56
  disabled: disabled ?? ["Current", "Disabled"].includes(state),
59
57
  onClick,
60
58
  children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -68,10 +66,8 @@ const HvStep = ({
68
66
  IconComponent,
69
67
  {
70
68
  color,
71
- semantic,
72
- width: svgSize,
73
- height: svgSize,
74
- iconSize
69
+ style: { fontSize: svgSize },
70
+ size: iconSize
75
71
  }
76
72
  ) : number
77
73
  }
@@ -4,7 +4,8 @@ const uikitReactCore = require("@hitachivantara/uikit-react-core");
4
4
  const { staticClasses, useClasses } = uikitReactCore.createClasses("HvStep", {
5
5
  root: {
6
6
  width: "fit-content",
7
- height: "fit-content"
7
+ height: "fit-content",
8
+ fontWeight: uikitReactCore.theme.fontWeights.semibold
8
9
  },
9
10
  notCurrent: { margin: "-8px" },
10
11
  xs: {},
@@ -14,10 +14,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvWizardTitl
14
14
  messageContainer: {},
15
15
  /** @deprecated use `classes.root` */
16
16
  titleContainer: {},
17
- summaryButton: {
18
- width: 120,
19
- paddingRight: 18
20
- },
17
+ summaryButton: {},
21
18
  /** @deprecated use `classes.summaryButton` */
22
19
  buttonWidth: {},
23
20
  /** @deprecated use `classes.summaryButton` */
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { HvButton, HvAvatar } from "@hitachivantara/uikit-react-core";
2
+ import { HvButtonBase, HvAvatar } from "@hitachivantara/uikit-react-core";
3
3
  import { Level0Good, Level3Bad, HourGlass } from "@hitachivantara/uikit-react-icons";
4
4
  import { getColor, getSemantic } from "../utils.js";
5
5
  import { useClasses } from "./Step.styles.js";
@@ -41,18 +41,16 @@ const HvStep = ({
41
41
  xl: squareL + 24
42
42
  }[size];
43
43
  const backgroundColor = getColor(state);
44
- const color = state === "Pending" ? "atmo2" : void 0;
45
- const semantic = state !== "Pending" ? getSemantic(state) : void 0;
44
+ const color = state === "Pending" ? "atmo2" : getSemantic(state);
46
45
  const status = state === "Current" ? "secondary_60" : void 0;
47
46
  const IconComponent = iconStateObject[state];
48
47
  return /* @__PURE__ */ jsx(
49
- HvButton,
48
+ HvButtonBase,
50
49
  {
51
50
  className: cx(classes.root, className, {
52
51
  [classes.notCurrent]: state !== "Current"
53
52
  }),
54
53
  "aria-label": title,
55
- icon: true,
56
54
  disabled: disabled ?? ["Current", "Disabled"].includes(state),
57
55
  onClick,
58
56
  children: /* @__PURE__ */ jsx(
@@ -66,10 +64,8 @@ const HvStep = ({
66
64
  IconComponent,
67
65
  {
68
66
  color,
69
- semantic,
70
- width: svgSize,
71
- height: svgSize,
72
- iconSize
67
+ style: { fontSize: svgSize },
68
+ size: iconSize
73
69
  }
74
70
  ) : number
75
71
  }
@@ -1,8 +1,9 @@
1
- import { createClasses } from "@hitachivantara/uikit-react-core";
1
+ import { createClasses, theme } from "@hitachivantara/uikit-react-core";
2
2
  const { staticClasses, useClasses } = createClasses("HvStep", {
3
3
  root: {
4
4
  width: "fit-content",
5
- height: "fit-content"
5
+ height: "fit-content",
6
+ fontWeight: theme.fontWeights.semibold
6
7
  },
7
8
  notCurrent: { margin: "-8px" },
8
9
  xs: {},
@@ -12,10 +12,7 @@ const { staticClasses, useClasses } = createClasses("HvWizardTitle", {
12
12
  messageContainer: {},
13
13
  /** @deprecated use `classes.root` */
14
14
  titleContainer: {},
15
- summaryButton: {
16
- width: 120,
17
- paddingRight: 18
18
- },
15
+ summaryButton: {},
19
16
  /** @deprecated use `classes.summaryButton` */
20
17
  buttonWidth: {},
21
18
  /** @deprecated use `classes.summaryButton` */
@@ -23,6 +23,7 @@ import { HvActionGeneric } from '@hitachivantara/uikit-react-core';
23
23
  import { HvActionsGenericProps } from '@hitachivantara/uikit-react-core';
24
24
  import { HvBaseProps } from '@hitachivantara/uikit-react-core';
25
25
  import { HvBreakpoints } from '@hitachivantara/uikit-react-core';
26
+ import { HvButtonBaseProps } from '@hitachivantara/uikit-react-core';
26
27
  import { HvButtonProps } from '@hitachivantara/uikit-react-core';
27
28
  import { HvColorAny } from '@hitachivantara/uikit-styles';
28
29
  import { HvDialogProps } from '@hitachivantara/uikit-react-core';
@@ -702,7 +703,7 @@ export declare interface HvStepNavigationProps extends HvBaseProps {
702
703
  classes?: HvStepNavigationClasses;
703
704
  }
704
705
 
705
- declare interface HvStepProps extends Pick<HvButtonProps, "onClick">, Omit<HvBaseProps, "onClick"> {
706
+ declare interface HvStepProps extends Pick<HvButtonBaseProps, "onClick">, Omit<HvBaseProps, "onClick"> {
706
707
  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */
707
708
  classes?: HvStepClasses;
708
709
  /** State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled", "Enabled"} */
@@ -1503,3 +1504,15 @@ export declare const wizardTitleClasses: {
1503
1504
  };
1504
1505
 
1505
1506
  export { }
1507
+
1508
+ declare namespace _default {
1509
+ function process(sourceText: any, sourcePath: any): {
1510
+ code: string;
1511
+ };
1512
+ }
1513
+
1514
+ declare namespace _default {
1515
+ function process(sourceText: any, sourcePath: any): {
1516
+ code: string;
1517
+ };
1518
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-lab",
3
- "version": "5.43.11",
3
+ "version": "5.44.1",
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.92.0",
37
- "@hitachivantara/uikit-react-icons": "^5.14.6",
38
- "@hitachivantara/uikit-react-utils": "^0.2.32",
39
- "@hitachivantara/uikit-styles": "^5.45.0",
36
+ "@hitachivantara/uikit-react-core": "^5.93.1",
37
+ "@hitachivantara/uikit-react-icons": "^5.15.1",
38
+ "@hitachivantara/uikit-react-utils": "^0.2.34",
39
+ "@hitachivantara/uikit-styles": "^5.46.1",
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": "63a3b4cee40c7f8cbc42e4d2e53c3c67b828ca68",
55
+ "gitHead": "b05a15b41bfa20c2c4e8bc248429a4a01b23784f",
56
56
  "exports": {
57
57
  ".": {
58
58
  "types": "./dist/types/index.d.ts",
@@ -1 +0,0 @@
1
- {"version":3,"file":"Blade.js","sources":["../../../src/Blade/Blade.tsx"],"sourcesContent":["import {\n HTMLAttributes,\n SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvTypography,\n HvTypographyVariants,\n setId,\n useControlled,\n useDefaultProps,\n useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blade.styles\";\n\nexport { staticClasses as bladeClasses };\n\nexport type HvBladeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladeProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n /**\n * The content that will be rendered within the blade.\n */\n children: React.ReactNode;\n\n /**\n * The content of the blade's button.\n *\n * If a render function is provided, it will be called with the expanded state as an argument.\n */\n label?: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n /**\n * Typography variant for the blade's button label.\n */\n labelVariant?: HvTypographyVariants;\n /**\n * Heading Level to apply to blade button.\n *\n * If 'undefined', the button will not have a header wrapper.\n */\n headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n /**\n * Indicates whether the blade is expanded or not.\n *\n * When defined the expanded state becomes controlled.\n *\n * @default undefined\n */\n expanded?: boolean;\n /**\n * Specifies the initial expanded state of the blade when it is uncontrolled.\n */\n defaultExpanded?: boolean;\n\n /**\n * Callback function triggered when the blade's button is pressed.\n * It receives the event and the new expanded state as arguments.\n *\n * If the blade is uncontrolled, this new state will be effective.\n * If the blade is controlled, it is up to the parent component to manage this state.\n *\n * @param {SyntheticEvent} event The event source of the callback.\n * @param {boolean} value The new value.\n */\n onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n\n /**\n * Specifies whether the blade is disabled. If true, the blade cannot be interacted with.\n */\n disabled?: boolean;\n\n /**\n * If true, the blade will take up the maximum width of the container when expanded.\n */\n fullWidth?: boolean;\n\n /**\n * Props to be passed to the button that toggles the blade's expanded state.\n * This can be used to further customize the appearance or behavior of the blade's button,\n * e.g. to set the aria-label attribute.\n */\n buttonProps?: HTMLAttributes<HTMLDivElement>;\n /**\n * Props to be passed to the container div that holds the blade's children.\n * This can be used to further customize the appearance or behavior of the blade's content area.\n */\n containerProps?: HTMLAttributes<HTMLDivElement>;\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes?: HvBladeClasses;\n}\n\n/**\n * A blade is a design element that expands horizontally to reveal information, similar to an accordion.\n *\n * It is usually stacked horizontally with other blades and works best when used within a flex container.\n * The `HvBlades` component is recommended for this purpose, as it also provides better management of the\n * blades' expanded state.\n */\nexport const HvBlade = (props: HvBladeProps) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n expanded,\n defaultExpanded = false,\n label,\n labelVariant = \"label\",\n headingLevel,\n onChange,\n disabled = false,\n children,\n fullWidth,\n buttonProps,\n containerProps,\n ...others\n } = useDefaultProps(\"HvBlade\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [isExpanded, setIsExpanded] = useControlled(\n expanded,\n Boolean(defaultExpanded),\n );\n\n const handleAction = useCallback(\n (event: SyntheticEvent) => {\n if (!disabled) {\n onChange?.(event, !isExpanded);\n\n // This will only run if uncontrolled\n setIsExpanded(!isExpanded);\n\n return true;\n }\n return false;\n },\n [disabled, onChange, isExpanded, setIsExpanded],\n );\n\n const handleClick = useCallback(\n (event: SyntheticEvent) => {\n handleAction(event);\n event.preventDefault();\n event.stopPropagation();\n },\n [handleAction],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n let isEventHandled = false;\n const { key } = event;\n\n if (\n event.altKey ||\n event.ctrlKey ||\n event.metaKey ||\n event.currentTarget !== event.target\n ) {\n return;\n }\n switch (key) {\n case \"Enter\":\n case \" \":\n isEventHandled = handleAction(event);\n break;\n default:\n return;\n }\n\n if (isEventHandled) {\n event.preventDefault();\n event.stopPropagation();\n }\n },\n [handleAction],\n );\n\n const id = useUniqueId(idProp);\n const bladeHeaderId = setId(id, \"button\");\n const bladeContainerId = setId(id, \"container\");\n const bladeHeader = useMemo(() => {\n const buttonLabel = typeof label === \"function\" ? label(isExpanded) : label;\n\n const bladeButton = (\n <HvTypography\n id={bladeHeaderId}\n component=\"div\"\n role=\"button\"\n className={cx(classes.button, {\n [classes.disabled]: disabled,\n [classes.textOnlyLabel]: typeof buttonLabel === \"string\",\n })}\n style={{ flexShrink: headingLevel === undefined ? 0 : undefined }}\n disabled={disabled}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n onClick={handleClick}\n variant={labelVariant}\n aria-expanded={isExpanded}\n aria-controls={bladeContainerId}\n {...buttonProps}\n >\n {buttonLabel}\n </HvTypography>\n );\n return headingLevel === undefined ? (\n bladeButton\n ) : (\n <HvTypography\n component={`h${headingLevel}`}\n variant={labelVariant}\n className={classes.heading}\n style={{ flexShrink: 0 }}\n >\n {bladeButton}\n </HvTypography>\n );\n }, [\n bladeContainerId,\n bladeHeaderId,\n buttonProps,\n classes.button,\n classes.disabled,\n classes.heading,\n classes.textOnlyLabel,\n cx,\n disabled,\n handleClick,\n handleKeyDown,\n headingLevel,\n isExpanded,\n label,\n labelVariant,\n ]);\n\n const bladeRef = useRef<HTMLDivElement>(null);\n const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n useEffect(() => {\n if (!bladeRef.current) return;\n const resizeObserver = new ResizeObserver((entries) => {\n setMaxWidth(entries[0].target.clientWidth);\n });\n resizeObserver.observe(\n // using the blade's container as reference max-width is more stable\n bladeRef.current.parentElement ?? bladeRef.current,\n );\n return () => {\n resizeObserver.disconnect();\n };\n }, [isExpanded]);\n\n const { style: containerStyle, ...otherContainerProps } =\n containerProps || {};\n\n return (\n <div\n ref={bladeRef}\n id={idProp}\n className={cx(classes.root, className, {\n [classes.fullWidth]: fullWidth,\n [classes.expanded]: isExpanded,\n })}\n {...others}\n >\n {bladeHeader}\n <div\n id={bladeContainerId}\n role=\"region\"\n aria-labelledby={bladeHeaderId}\n className={classes.container}\n hidden={!isExpanded}\n style={{\n ...containerStyle,\n maxWidth: isExpanded ? maxWidth : 0,\n }}\n {...otherContainerProps}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Blade.styles.js","sources":["../../../src/Blade/Blade.styles.tsx"],"sourcesContent":["import { createClasses, outlineStyles } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBlade\", {\n root: {\n position: \"relative\",\n\n display: \"flex\",\n minWidth: 72,\n\n \"& + $root\": {\n marginLeft: theme.spacing(\"sm\"),\n },\n\n transition: \"flex-grow 600ms linear\",\n\n zIndex: 0,\n\n color: theme.colors.secondary,\n backgroundColor: theme.colors.atmo1,\n borderRadius: theme.radii.round,\n border: `1px solid ${theme.colors.atmo4}`,\n },\n expanded: {},\n\n fullWidth: {\n flexGrow: 0,\n\n \"&$expanded\": {\n flexGrow: 1,\n },\n },\n\n heading: {},\n\n button: {\n height: \"100%\",\n minWidth: 70,\n\n \"&[disabled], &:active\": {\n outline: \"none\",\n },\n\n \"&:focus\": {\n outline: \"none\",\n background: theme.colors.containerBackgroundHover,\n },\n\n \"&:hover\": {\n background: theme.colors.containerBackgroundHover,\n },\n\n \"&:focus-visible\": {\n ...outlineStyles,\n zIndex: 1,\n },\n\n cursor: \"pointer\",\n },\n textOnlyLabel: {\n padding: theme.spacing(\"xs\", \"sm\"),\n },\n\n container: {\n display: \"inline-block\",\n height: \"100%\",\n width: \"100%\",\n\n minWidth: 0,\n\n overflowX: \"hidden\",\n\n maxWidth: 0,\n transition: \"max-width 600ms linear\",\n },\n\n disabled: {\n cursor: \"not-allowed\",\n color: theme.colors.secondary_60,\n\n \"&:focus\": {\n background: \"none\",\n },\n\n \"&:hover\": {\n background: \"none\",\n },\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,UAAU;AAAA,IAEV,SAAS;AAAA,IACT,UAAU;AAAA,IAEV,aAAa;AAAA,MACX,YAAY,MAAM,QAAQ,IAAI;AAAA,IAChC;AAAA,IAEA,YAAY;AAAA,IAEZ,QAAQ;AAAA,IAER,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,EACzC;AAAA,EACA,UAAU,CAAC;AAAA,EAEX,WAAW;AAAA,IACT,UAAU;AAAA,IAEV,cAAc;AAAA,MACZ,UAAU;AAAA,IAAA;AAAA,EAEd;AAAA,EAEA,SAAS,CAAC;AAAA,EAEV,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IAEV,yBAAyB;AAAA,MACvB,SAAS;AAAA,IACX;AAAA,IAEA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,WAAW;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,IAEA,QAAQ;AAAA,EACV;AAAA,EACA,eAAe;AAAA,IACb,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,EACnC;AAAA,EAEA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IAEP,UAAU;AAAA,IAEV,WAAW;AAAA,IAEX,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IAEpB,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IAEA,WAAW;AAAA,MACT,YAAY;AAAA,IAAA;AAAA,EACd;AAEJ,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Blades.js","sources":["../../../src/Blades/Blades.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n SyntheticEvent,\n useCallback,\n useMemo,\n} from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n useControlled,\n useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blades.styles\";\n\nexport { staticClasses as bladesClasses };\n\nexport type HvBladesClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladesProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n /**\n * Array of indices representing the expanded state of each blade.\n *\n * When defined, the expanded state of the blades becomes controlled.\n */\n expanded?: number[];\n /**\n * Initial expanded state of the blades when in an uncontrolled state.\n *\n * It's an array of indices representing the blades that should be initially expanded.\n */\n defaultExpanded?: number[];\n\n /**\n * If true, ensures that only one blade can be expanded at a time.\n */\n atMostOneExpanded?: boolean;\n /**\n * If true, ensures that at least one blade is always expanded.\n */\n atLeastOneExpanded?: boolean;\n\n /**\n * If true, the blades will take up the full width of the container by default.\n */\n fullWidthBlades?: boolean;\n\n /**\n * Callback function triggered when the expanded state of any blade changes.\n * It receives the event and the new array of expanded indices as arguments.\n *\n * If uncontrolled, this new state will be effective.\n * If controlled, it is up to the parent component to manage this state.\n *\n * @param {SyntheticEvent} event The event source of the callback.\n * @param {number[]} value Array of indices of the blades that are expanded.\n */\n onChange?: (event: SyntheticEvent, value: number[]) => void;\n\n /**\n * The blades to be rendered within the group.\n * Must be instances of `HvBlade`, otherwise the behavior is undefined and will most likely break.\n */\n children: React.ReactNode;\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes?: HvBladesClasses;\n}\n\nfunction getExpandedBlades(\n defaultExpanded: number[] | undefined,\n children: React.ReactNode,\n atMostOneExpanded: boolean,\n atLeastOneExpanded: boolean,\n) {\n const childrenArray = Children.toArray(children);\n const expandedBlades =\n defaultExpanded ??\n childrenArray\n .map((child: any, i: number) => {\n const childIsControlled = child?.props?.expanded !== undefined;\n const childIsExpanded = childIsControlled\n ? child?.props?.expanded\n : child?.props?.defaultExpanded;\n\n return childIsExpanded ? i : undefined;\n })\n .filter((v) => v !== undefined);\n\n const numberOfExpandedBlades = expandedBlades.length;\n if (\n atLeastOneExpanded &&\n numberOfExpandedBlades === 0 &&\n childrenArray.length > 0\n ) {\n return [0];\n }\n if (atMostOneExpanded && numberOfExpandedBlades > 1) {\n return [expandedBlades[0]];\n }\n\n return expandedBlades;\n}\n\n/**\n * `HvBlades` is a component that groups multiple `HvBlade` components.\n *\n * It allows for better control over the expanded state of blades, suitable for both\n * controlled and uncontrolled scenarios.\n */\nexport const HvBlades = (props: HvBladesProps) => {\n const {\n id,\n className,\n classes: classesProp,\n children,\n expanded: expandedProp,\n defaultExpanded,\n atMostOneExpanded = false,\n atLeastOneExpanded = false,\n fullWidthBlades = false,\n onChange,\n ...others\n } = useDefaultProps(\"HvBlades\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [expanded, setExpanded] = useControlled(expandedProp, () =>\n getExpandedBlades(\n defaultExpanded,\n children,\n atMostOneExpanded,\n atLeastOneExpanded,\n ),\n );\n\n const onChildChangeInterceptor = useCallback(\n (\n index: number,\n childOnChange: (event: SyntheticEvent, isExpanded: boolean) => void,\n event: SyntheticEvent,\n isExpanded: boolean,\n ) => {\n const newValue: number[] = [];\n if (atMostOneExpanded) {\n if (isExpanded) {\n newValue.push(index);\n }\n } else {\n newValue.push(...(expanded as number[]));\n if (isExpanded) {\n newValue.push(index);\n } else {\n newValue.splice(newValue.indexOf(index), 1);\n }\n }\n\n if (atLeastOneExpanded && newValue.length === 0) {\n newValue.push(index);\n }\n\n childOnChange?.(event, isExpanded);\n\n onChange?.(event, newValue);\n\n // This will only run if uncontrolled\n setExpanded(newValue);\n },\n [onChange, expanded, setExpanded, atMostOneExpanded, atLeastOneExpanded],\n );\n\n const modifiedChildren = useMemo(() => {\n return Children.map(children, (child: any, i: number) => {\n const childIsExpanded = expanded.includes(i);\n\n return cloneElement(child, {\n expanded: childIsExpanded,\n fullWidth: child?.props?.fullWidth ?? fullWidthBlades,\n buttonProps: {\n ...child?.props?.buttonProps,\n \"aria-disabled\":\n // If the accordion panel associated with an accordion header is visible,\n // and if the accordion does not permit the panel to be collapsed, the header\n // button element has aria-disabled set to true.\n child?.props?.disabled ||\n (childIsExpanded && atMostOneExpanded && expanded.length === 1)\n ? true\n : undefined,\n },\n onChange: (\n event: React.ChangeEvent<HTMLInputElement>,\n isExpanded: boolean,\n ) =>\n onChildChangeInterceptor(\n i,\n child?.props?.onChange,\n event,\n isExpanded,\n ),\n });\n });\n }, [\n children,\n expanded,\n fullWidthBlades,\n atMostOneExpanded,\n onChildChangeInterceptor,\n ]);\n\n return (\n <div id={id} className={cx(classes.root, className)} {...others}>\n {modifiedChildren}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;AAwEA,SAAS,kBACP,iBACA,UACA,mBACA,oBACA;AACM,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;AAC/C,QAAM,iBACJ,mBACA,cACG,IAAI,CAAC,OAAY,MAAc;AACxB,UAAA,oBAAoB,OAAO,OAAO,aAAa;AACrD,UAAM,kBAAkB,oBACpB,OAAO,OAAO,WACd,OAAO,OAAO;AAElB,WAAO,kBAAkB,IAAI;AAAA,EAC9B,CAAA,EACA,OAAO,CAAC,MAAM,MAAM,MAAS;AAElC,QAAM,yBAAyB,eAAe;AAC9C,MACE,sBACA,2BAA2B,KAC3B,cAAc,SAAS,GACvB;AACA,WAAO,CAAC,CAAC;AAAA,EAAA;AAEP,MAAA,qBAAqB,yBAAyB,GAAG;AAC5C,WAAA,CAAC,eAAe,CAAC,CAAC;AAAA,EAAA;AAGpB,SAAA;AACT;AAQa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,CAAC,UAAU,WAAW,IAAI;AAAA,IAAc;AAAA,IAAc,MAC1D;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,2BAA2B;AAAA,IAC/B,CACE,OACA,eACA,OACA,eACG;AACH,YAAM,WAAqB,CAAC;AAC5B,UAAI,mBAAmB;AACrB,YAAI,YAAY;AACd,mBAAS,KAAK,KAAK;AAAA,QAAA;AAAA,MACrB,OACK;AACI,iBAAA,KAAK,GAAI,QAAqB;AACvC,YAAI,YAAY;AACd,mBAAS,KAAK,KAAK;AAAA,QAAA,OACd;AACL,mBAAS,OAAO,SAAS,QAAQ,KAAK,GAAG,CAAC;AAAA,QAAA;AAAA,MAC5C;AAGE,UAAA,sBAAsB,SAAS,WAAW,GAAG;AAC/C,iBAAS,KAAK,KAAK;AAAA,MAAA;AAGrB,sBAAgB,OAAO,UAAU;AAEjC,iBAAW,OAAO,QAAQ;AAG1B,kBAAY,QAAQ;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,UAAU,aAAa,mBAAmB,kBAAkB;AAAA,EACzE;AAEM,QAAA,mBAAmB,QAAQ,MAAM;AACrC,WAAO,SAAS,IAAI,UAAU,CAAC,OAAY,MAAc;AACjD,YAAA,kBAAkB,SAAS,SAAS,CAAC;AAE3C,aAAO,aAAa,OAAO;AAAA,QACzB,UAAU;AAAA,QACV,WAAW,OAAO,OAAO,aAAa;AAAA,QACtC,aAAa;AAAA,UACX,GAAG,OAAO,OAAO;AAAA,UACjB;AAAA;AAAA;AAAA;AAAA,YAIE,OAAO,OAAO,YACb,mBAAmB,qBAAqB,SAAS,WAAW,IACzD,OACA;AAAA;AAAA,QACR;AAAA,QACA,UAAU,CACR,OACA,eAEA;AAAA,UACE;AAAA,UACA,OAAO,OAAO;AAAA,UACd;AAAA,UACA;AAAA,QAAA;AAAA,MACF,CACH;AAAA,IAAA,CACF;AAAA,EAAA,GACA;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UACH,iBAAA,CAAA;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Blades.styles.js","sources":["../../../src/Blades/Blades.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBlades\", {\n root: {\n position: \"relative\",\n\n display: \"flex\",\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IAEV,SAAS;AAAA,EAAA;AAEb,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Dashboard.js","sources":["../../../src/Dashboard/Dashboard.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n Layouts,\n ReactGridLayoutProps,\n Responsive as ResponsiveGrid,\n ResponsiveProps,\n WidthProvider,\n} from \"react-grid-layout\";\nimport { Global } from \"@emotion/react\";\nimport {\n ExtractNames,\n useDefaultProps,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { gridStyles, staticClasses, useClasses } from \"./Dashboard.styles\";\n\nconst GridLayout = WidthProvider(ResponsiveGrid);\n\n/** Default column breakpoints. For now, use always 12-column */\nconst defaultCols: HvDashboardProps[\"cols\"] = {\n xs: 12,\n sm: 12,\n md: 12,\n lg: 12,\n xl: 12,\n};\n\nexport { staticClasses as dashboardClasses };\n\nexport type HvDashboardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDashboardProps extends Omit<ResponsiveProps, \"cols\"> {\n /** Dashboard items. Each node must be `key`'ed */\n children: React.ReactNode;\n /** An object used to override or extend the styles applied. */\n classes?: HvDashboardClasses;\n /**\n * Layout is an array of object with the format:\n *\n * `{i: string, x: number, y: number, w: number, h: number}`\n *\n * The `i` must match the key used on each item component.\n */\n layout?: ReactGridLayoutProps[\"layout\"];\n /** Number of grid columns or an object of breakpoint -> #columns */\n cols?: number | ResponsiveProps[\"cols\"];\n}\n\n/**\n * A Dashboard grid layout component, based on `react-grid-layout`.\n * The children elements are grid items and must be `key`ed.\n *\n * @see https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#grid-layout-props\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvDashboard = (props: HvDashboardProps) => {\n const {\n children,\n className,\n layout,\n cols: colsProp,\n layouts: layoutsProp,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvDashboard\", props);\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const layouts = useMemo<Layouts>(() => {\n if (layoutsProp) return layoutsProp;\n if (!layout) return {};\n\n return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };\n }, [layoutsProp, layout]);\n\n const cols = useMemo<ResponsiveProps[\"cols\"]>(() => {\n if (!colsProp) return defaultCols;\n\n if (typeof colsProp === \"number\") {\n return {\n xs: colsProp,\n sm: colsProp,\n md: colsProp,\n lg: colsProp,\n xl: colsProp,\n };\n }\n\n return colsProp;\n }, [colsProp]);\n\n return (\n <>\n <Global styles={gridStyles} />\n <GridLayout\n className={cx(classes.root, className)}\n breakpoints={activeTheme?.breakpoints.values}\n cols={cols}\n layouts={layouts}\n {...others}\n >\n {children}\n </GridLayout>\n </>\n );\n};\n"],"names":["ResponsiveGrid"],"mappings":";;;;;;;AAiBA,MAAM,aAAa,cAAcA,UAAc;AAG/C,MAAM,cAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA+Ba,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,EAAE,YAAY,IAAI,SAAS;AAE3B,QAAA,UAAU,QAAiB,MAAM;AACrC,QAAI,YAAoB,QAAA;AACpB,QAAA,CAAC,OAAQ,QAAO,CAAC;AAEd,WAAA,EAAE,IAAI,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,OAAO;AAAA,EAAA,GACnE,CAAC,aAAa,MAAM,CAAC;AAElB,QAAA,OAAO,QAAiC,MAAM;AAC9C,QAAA,CAAC,SAAiB,QAAA;AAElB,QAAA,OAAO,aAAa,UAAU;AACzB,aAAA;AAAA,QACL,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAEb,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAO,QAAQ,WAAY,CAAA;AAAA,IAC5B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,aAAa,aAAa,YAAY;AAAA,QACtC;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Dashboard.styles.js","sources":["../../../src/Dashboard/Dashboard.styles.ts"],"sourcesContent":["import { css } from \"@emotion/react\";\nimport { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDashboard\", {\n root: {},\n});\n\nexport const gridStyles = css`\n .react-grid-layout {\n position: relative;\n transition: height 200ms ease;\n }\n .react-grid-item {\n transition: all 200ms ease;\n transition-property: left, top, width, height;\n }\n .react-grid-item img {\n pointer-events: none;\n user-select: none;\n }\n .react-grid-item.cssTransforms {\n transition-property: transform, width, height;\n }\n .react-grid-item.resizing {\n transition: none;\n z-index: 1;\n will-change: width, height;\n }\n\n .react-grid-item.react-draggable-dragging {\n transition: none;\n z-index: 3;\n will-change: transform;\n }\n\n .react-grid-item.dropping {\n visibility: hidden;\n }\n\n .react-grid-item.react-grid-placeholder {\n background: ${theme.colors.primary_20};\n transition-duration: 100ms;\n z-index: 2;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n user-select: none;\n }\n\n .react-grid-item.react-grid-placeholder.placeholder-resizing {\n transition: none;\n }\n\n .react-grid-item > .react-resizable-handle {\n position: absolute;\n width: 20px;\n height: 20px;\n }\n\n .react-grid-item > .react-resizable-handle::after {\n content: \"\";\n position: absolute;\n right: 3px;\n bottom: 3px;\n width: 5px;\n height: 5px;\n border-right: 2px solid rgba(0, 0, 0, 0.4);\n border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n }\n\n .react-resizable-hide > .react-resizable-handle {\n display: none;\n }\n\n .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n bottom: 0;\n left: 0;\n cursor: sw-resize;\n transform: rotate(90deg);\n }\n .react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n bottom: 0;\n right: 0;\n cursor: se-resize;\n }\n .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {\n top: 0;\n left: 0;\n cursor: nw-resize;\n transform: rotate(180deg);\n }\n .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {\n top: 0;\n right: 0;\n cursor: ne-resize;\n transform: rotate(270deg);\n }\n .react-grid-item > .react-resizable-handle.react-resizable-handle-w,\n .react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n top: 50%;\n margin-top: -10px;\n cursor: ew-resize;\n }\n .react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n left: 0;\n transform: rotate(135deg);\n }\n .react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n right: 0;\n transform: rotate(315deg);\n }\n .react-grid-item > .react-resizable-handle.react-resizable-handle-n,\n .react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n left: 50%;\n margin-left: -10px;\n cursor: ns-resize;\n }\n .react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n top: 0;\n transform: rotate(225deg);\n }\n .react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n bottom: 0;\n transform: rotate(45deg);\n }\n\n .react-resizable {\n position: relative;\n }\n .react-resizable-handle {\n position: absolute;\n width: 20px;\n height: 20px;\n background-repeat: no-repeat;\n background-origin: content-box;\n box-sizing: border-box;\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+\");\n background-position: bottom right;\n padding: 0 3px 3px 0;\n }\n .react-resizable-handle-sw {\n bottom: 0;\n left: 0;\n cursor: sw-resize;\n transform: rotate(90deg);\n }\n .react-resizable-handle-se {\n bottom: 0;\n right: 0;\n cursor: se-resize;\n }\n .react-resizable-handle-nw {\n top: 0;\n left: 0;\n cursor: nw-resize;\n transform: rotate(180deg);\n }\n .react-resizable-handle-ne {\n top: 0;\n right: 0;\n cursor: ne-resize;\n transform: rotate(270deg);\n }\n .react-resizable-handle-w,\n .react-resizable-handle-e {\n top: 50%;\n margin-top: -10px;\n cursor: ew-resize;\n }\n .react-resizable-handle-w {\n left: 0;\n transform: rotate(135deg);\n }\n .react-resizable-handle-e {\n right: 0;\n transform: rotate(315deg);\n }\n .react-resizable-handle-n,\n .react-resizable-handle-s {\n left: 50%;\n margin-left: -10px;\n cursor: ns-resize;\n }\n .react-resizable-handle-n {\n top: 0;\n transform: rotate(225deg);\n }\n .react-resizable-handle-s {\n bottom: 0;\n transform: rotate(45deg);\n }\n`;\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,CAAA;AACR,CAAC;AAEM,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAiCR,MAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Background.js","sources":["../../../../src/Flow/Background/Background.tsx"],"sourcesContent":["import { Background, BackgroundProps } from \"reactflow\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nexport interface HvFlowBackgroundProps extends Omit<BackgroundProps, \"color\"> {\n /** Color for the background dots. Defaults to `secondary`. */\n color?: HvColorAny;\n}\n\nexport const HvFlowBackground = ({\n color = \"secondary\",\n ...others\n}: HvFlowBackgroundProps) => {\n return (\n <Background\n color={getColor(color, theme.colors.secondary_80)}\n gap={16}\n {...others}\n />\n );\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAQ;AAAA,EACR,GAAG;AACL,MAA6B;AAEzB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,SAAS,OAAO,MAAM,OAAO,YAAY;AAAA,MAChD,KAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Controls.js","sources":["../../../../src/Flow/Controls/Controls.tsx"],"sourcesContent":["import {\n ControlProps,\n Panel,\n PanelPosition,\n ReactFlowState,\n useStore,\n useStoreApi,\n} from \"reactflow\";\nimport { shallow } from \"zustand/shallow\";\nimport {\n HvButton,\n HvMultiButton,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n Focus,\n Lock,\n Unlock,\n ZoomIn,\n ZoomOut,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowInstance } from \"../hooks\";\n\nexport type HvFlowControlsPosition = PanelPosition;\n\nexport interface HvFlowControlsProps\n extends Omit<\n ControlProps,\n \"position\" | \"showFitView\" | \"showInteractive\" | \"showZoom\"\n > {\n /** Controls position. Defaults to `bottom-center`. */\n position?: HvFlowControlsPosition;\n /** Controls orientation. Defaults to `horizontal`. */\n orientation?: \"vertical\" | \"horizontal\";\n /** Labels used on the controls buttons. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** Whether to hide the zoom controls. */\n hideZoom?: boolean;\n /** Whether to hide the fit view controls. */\n hideFitView?: boolean;\n /** Whether to hide the interactive controls. */\n hideInteractive?: boolean;\n}\n\nconst DEFAULT_LABELS = {\n fitView: \"Fit view\",\n zoomIn: \"Zoom in\",\n zoomOut: \"Zoom out\",\n interactive: \"Interactive\",\n};\n\nconst selector = (state: ReactFlowState) => ({\n isInteractive:\n state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,\n minZoomReached: state.transform[2] <= state.minZoom,\n maxZoomReached: state.transform[2] >= state.maxZoom,\n});\n\nexport const HvFlowControls = ({\n onZoomIn: onZoomInProp,\n onZoomOut: onZoomOutProp,\n onFitView: onFitViewProp,\n labels: labelsProps,\n hideInteractive,\n hideFitView,\n hideZoom,\n position = \"bottom-center\",\n orientation = \"horizontal\",\n onInteractiveChange,\n fitViewOptions,\n children,\n ...others\n}: HvFlowControlsProps) => {\n const { isInteractive, minZoomReached, maxZoomReached } = useStore(\n selector,\n shallow,\n );\n const store = useStoreApi();\n const { zoomIn, zoomOut, fitView } = useFlowInstance();\n\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n const handleZoomIn = () => {\n zoomIn();\n onZoomInProp?.();\n };\n\n const handleZoomOut = () => {\n zoomOut();\n onZoomOutProp?.();\n };\n\n const handleFitView = () => {\n fitView(fitViewOptions);\n onFitViewProp?.();\n };\n\n const handleInteractive = () => {\n store.setState({\n nodesDraggable: !isInteractive,\n nodesConnectable: !isInteractive,\n elementsSelectable: !isInteractive,\n });\n\n onInteractiveChange?.(!isInteractive);\n };\n\n return (\n <Panel position={position} {...others}>\n <HvMultiButton vertical={orientation === \"vertical\"}>\n {!hideZoom && (\n <HvButton\n icon\n title={labels?.zoomIn}\n onClick={handleZoomIn}\n disabled={maxZoomReached}\n >\n <ZoomIn />\n </HvButton>\n )}\n {!hideZoom && (\n <HvButton\n icon\n title={labels?.zoomOut}\n onClick={handleZoomOut}\n disabled={minZoomReached}\n >\n <ZoomOut />\n </HvButton>\n )}\n {!hideFitView && (\n <HvButton icon title={labels?.fitView} onClick={handleFitView}>\n <Focus />\n </HvButton>\n )}\n {!hideInteractive && (\n <HvButton\n icon\n title={labels?.interactive}\n onClick={handleInteractive}\n >\n {isInteractive ? <Unlock /> : <Lock />}\n </HvButton>\n )}\n {children}\n </HvMultiButton>\n </Panel>\n );\n};\n"],"names":[],"mappings":";;;;;;AA6CA,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AACf;AAEA,MAAM,WAAW,CAAC,WAA2B;AAAA,EAC3C,eACE,MAAM,kBAAkB,MAAM,oBAAoB,MAAM;AAAA,EAC1D,gBAAgB,MAAM,UAAU,CAAC,KAAK,MAAM;AAAA,EAC5C,gBAAgB,MAAM,UAAU,CAAC,KAAK,MAAM;AAC9C;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,EAAE,eAAe,gBAAgB,eAAmB,IAAA;AAAA,IACxD;AAAA,IACA;AAAA,EACF;AACA,QAAM,QAAQ,YAAY;AAC1B,QAAM,EAAE,QAAQ,SAAS,QAAA,IAAY,gBAAgB;AAE/C,QAAA,SAAS,UAAU,gBAAgB,WAAW;AAEpD,QAAM,eAAe,MAAM;AAClB,WAAA;AACQ,mBAAA;AAAA,EACjB;AAEA,QAAM,gBAAgB,MAAM;AAClB,YAAA;AACQ,oBAAA;AAAA,EAClB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,YAAQ,cAAc;AACN,oBAAA;AAAA,EAClB;AAEA,QAAM,oBAAoB,MAAM;AAC9B,UAAM,SAAS;AAAA,MACb,gBAAgB,CAAC;AAAA,MACjB,kBAAkB,CAAC;AAAA,MACnB,oBAAoB,CAAC;AAAA,IAAA,CACtB;AAED,0BAAsB,CAAC,aAAa;AAAA,EACtC;AAGE,SAAA,oBAAC,SAAM,UAAqB,GAAG,QAC7B,UAAC,qBAAA,eAAA,EAAc,UAAU,gBAAgB,YACtC,UAAA;AAAA,IAAA,CAAC,YACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,8BAAC,QAAO,CAAA,CAAA;AAAA,MAAA;AAAA,IACV;AAAA,IAED,CAAC,YACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,8BAAC,SAAQ,CAAA,CAAA;AAAA,MAAA;AAAA,IACX;AAAA,IAED,CAAC,eACC,oBAAA,UAAA,EAAS,MAAI,MAAC,OAAO,QAAQ,SAAS,SAAS,eAC9C,UAAA,oBAAC,QAAM,CAAA,GACT;AAAA,IAED,CAAC,mBACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QAER,UAAgB,gBAAA,oBAAC,QAAO,CAAA,CAAA,wBAAM,MAAK,CAAA,CAAA;AAAA,MAAA;AAAA,IACtC;AAAA,IAED;AAAA,EAAA,EAAA,CACH,EACF,CAAA;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { Global } from \"@emotion/react\";\nimport {\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n Connection,\n Edge,\n EdgeChange,\n MarkerType,\n Node,\n NodeChange,\n ReactFlow,\n ReactFlowProps,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowStyles } from \"./base\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\nimport { useFlowInstance } from \"./hooks\";\nimport {\n HvFlowNodeInputGroup,\n HvFlowNodeMetaRegistry,\n HvFlowNodeOutputGroup,\n HvFlowNodeTypes,\n} from \"./types\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeType extends string | undefined = string | undefined,\n NodeData = any,\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n /** Flow content: background, controls, and minimap. */\n children?: React.ReactNode;\n /** Flow nodes types. */\n nodeTypes?: HvFlowNodeTypes<NodeData>;\n /** Flow nodes. */\n nodes?: Node<NodeData, NodeType>[];\n /** Flow edges. */\n edges?: Edge[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowClasses;\n /** Callback called when the flow changes. Returns the updated nodes and edges. */\n onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n /**\n * Callback called when a node is dropped in the flow.\n *\n * This callback should be used to override the custom UI Kit drop event.\n * Thus, when defined, the user is responsible for adding nodes to the flow.\n *\n * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n *\n * Returns the event and the node to be added to the flow.\n */\n onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n nodes: Node[],\n edges: Edge[],\n connection: Connection,\n nodeMetaRegistry: HvFlowNodeMetaRegistry,\n) => {\n const {\n source: sourceId,\n sourceHandle,\n target: targetId,\n targetHandle,\n } = connection;\n\n if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;\n\n const sourceNode = getNode(nodes, sourceId);\n const targetNode = getNode(nodes, targetId);\n\n if (!sourceNode || !targetNode) return false;\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType || !targetType) return false;\n\n const inputs = nodeMetaRegistry[targetId]?.inputs || [];\n const outputs = nodeMetaRegistry[sourceId]?.outputs || [];\n\n const source = outputs\n .flatMap((out) => (out as HvFlowNodeOutputGroup).outputs || out)\n .find((out) => out.id === sourceHandle);\n const target = inputs\n .flatMap((inp) => (inp as HvFlowNodeInputGroup).inputs || inp)\n .find((inp) => inp.id === targetHandle);\n\n const sourceProvides = source?.provides || \"\";\n const targetAccepts = target?.accepts || [];\n const sourceMaxConnections = source?.maxConnections;\n const targetMaxConnections = target?.maxConnections;\n\n let isValid =\n targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n if (isValid && targetMaxConnections != null) {\n const targetConnections = edges.filter(\n (edg) => edg.target === targetId && edg.targetHandle === targetHandle,\n ).length;\n\n isValid = targetConnections < targetMaxConnections;\n }\n\n if (isValid && sourceMaxConnections != null) {\n const sourceConnections = edges.filter(\n (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle,\n ).length;\n\n isValid = sourceConnections < sourceMaxConnections;\n }\n\n return isValid;\n};\n\nexport const HvDroppableFlow = ({\n id,\n className,\n children,\n onFlowChange,\n onDndDrop,\n classes: classesProp,\n nodes: initialNodes = [],\n edges: initialEdges = [],\n onConnect: onConnectProp,\n onNodesChange: onNodesChangeProp,\n onEdgesChange: onEdgesChangeProp,\n defaultEdgeOptions: defaultEdgeOptionsProp,\n nodeTypes,\n ...others\n}: HvDroppableFlowProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const reactFlowInstance = useFlowInstance();\n\n const [nodes, setNodes] = useState(initialNodes);\n const [edges, setEdges] = useState(initialEdges);\n // Keeping track of nodes and edges for onFlowChange since useState is async\n const nodesRef = useRef(initialNodes);\n const edgesRef = useRef(initialEdges);\n\n const updateNodes = (nds: Node[]) => {\n setNodes(nds);\n nodesRef.current = nds;\n };\n\n const updateEdges = (eds: Edge[]) => {\n setEdges(eds);\n edgesRef.current = eds;\n };\n\n const { setNodeRef } = useDroppable({\n id: elementId,\n });\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n if (event.over?.id !== elementId) return;\n\n const hvFlow = event.active.data.current?.hvFlow;\n const type = hvFlow?.type;\n\n // Only known node types can be dropped in the canvas\n if (!type || !nodeTypes?.[type]) {\n if (import.meta.env.DEV) {\n // eslint-disable-next-line no-console\n console.error(\n `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`,\n );\n }\n return;\n }\n\n // Position node in the flow\n const position = reactFlowInstance.screenToFlowPosition({\n x: hvFlow?.x || 0,\n y: hvFlow?.y || 0,\n });\n\n // Node data\n const data = {\n nodeLabel: hvFlow?.label,\n ...hvFlow?.data,\n };\n\n // Node to add\n const newNode: Node = {\n id: uid(),\n position,\n data,\n type,\n };\n\n // Drop override\n if (onDndDrop) {\n onDndDrop(event, newNode);\n return;\n }\n\n updateNodes(nodes.concat(newNode));\n },\n [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance],\n );\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n });\n\n const handleFlowChange = useCallback(\n (nds: Node[], eds: Edge[]) => {\n // The new flow is returned if the user is not dragging nodes\n // This avoids triggering this handler too many times\n const isDragging = nds.find((node) => node.dragging);\n if (!isDragging) {\n onFlowChange?.(nds, eds);\n }\n },\n [onFlowChange],\n );\n\n const handleConnect = useCallback(\n (connection: Connection) => {\n const eds = addEdge(connection, edgesRef.current);\n updateEdges(eds);\n\n handleFlowChange(nodesRef.current, eds);\n onConnectProp?.(connection);\n },\n [handleFlowChange, onConnectProp],\n );\n\n const handleNodesChange = useCallback(\n (changes: NodeChange[]) => {\n const nds = applyNodeChanges(changes, nodesRef.current);\n updateNodes(nds);\n\n handleFlowChange(nds, edgesRef.current);\n onNodesChangeProp?.(changes);\n },\n [handleFlowChange, onNodesChangeProp],\n );\n\n const handleEdgesChange = useCallback(\n (changes: EdgeChange[]) => {\n const eds = applyEdgeChanges(changes, edgesRef.current);\n updateEdges(eds);\n\n handleFlowChange(nodesRef.current, eds);\n onEdgesChangeProp?.(changes);\n },\n [handleFlowChange, onEdgesChangeProp],\n );\n\n const { registry } = useNodeMetaRegistry();\n\n const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n validateEdge(nodes, edges, connection, registry);\n\n const defaultEdgeOptions = {\n markerEnd: {\n type: MarkerType.ArrowClosed,\n height: 20,\n width: 20,\n },\n type: \"smoothstep\",\n pathOptions: {\n borderRadius: 40,\n },\n ...defaultEdgeOptionsProp,\n };\n\n return (\n <>\n <Global styles={flowStyles} />\n <div\n id={elementId}\n ref={setNodeRef}\n className={cx(classes.root, className)}\n >\n <ReactFlow\n nodes={nodes}\n edges={edges}\n nodeTypes={nodeTypes}\n onNodesChange={handleNodesChange}\n onEdgesChange={handleEdgesChange}\n onConnect={handleConnect}\n isValidConnection={isValidConnection}\n defaultEdgeOptions={defaultEdgeOptions}\n snapGrid={[1, 1]}\n snapToGrid\n onError={(code, message) => {\n if (import.meta.env.DEV) {\n // eslint-disable-next-line no-console\n console.error(message);\n }\n }}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n </>\n );\n};\n"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Empty.js","sources":["../../../../src/Flow/Empty/Empty.tsx"],"sourcesContent":["import { useNodes } from \"reactflow\";\nimport {\n HvEmptyState,\n HvEmptyStateProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useClasses } from \"./Empty.styles\";\n\nexport interface HvFlowEmptyProps extends HvEmptyStateProps {}\n\nexport const HvFlowEmpty = ({ className, ...others }: HvFlowEmptyProps) => {\n const { classes, cx } = useClasses();\n const nodes = useNodes();\n return (\n !nodes ||\n (nodes.length === 0 ? (\n <HvEmptyState className={cx(classes.root, className)} {...others} />\n ) : null)\n );\n};\n"],"names":[],"mappings":";;;;AAUO,MAAM,cAAc,CAAC,EAAE,WAAW,GAAG,aAA+B;AACzE,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW;AACnC,QAAM,QAAQ,SAAS;AACvB,SACE,CAAC,UACA,MAAM,WAAW,IACf,oBAAA,cAAA,EAAa,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAAQ,IAChE;AAER;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Empty.styles.js","sources":["../../../../src/Flow/Empty/Empty.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowEmpty\", {\n root: {\n width: \"100%\",\n height: \"100%\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: theme.colors.backgroundColor,\n position: \"absolute\",\n zIndex: theme.zIndices.popover,\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,QAAQ,MAAM,SAAS;AAAA,EAAA;AAE3B,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Flow.js","sources":["../../../src/Flow/Flow.tsx"],"sourcesContent":["import {\n DndContext,\n DndContextProps,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvFlowNodeAction, HvFlowNodeGroups } from \"./types\";\n\nexport interface HvFlowProps<\n NodeGroups extends keyof any = string,\n NodeType extends string | undefined = string | undefined,\n NodeData = any,\n> extends HvDroppableFlowProps<NodeType, NodeData> {\n /** Flow nodes groups. */\n nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n /** Flow sidebar. */\n sidebar?: React.ReactNode;\n /** Flow default actions. */\n defaultActions?: HvFlowNodeAction[];\n /**\n * Dnd Kit context props. This should be used for accessibility purposes.\n *\n * More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n */\n dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/**\n * Flow component to build interactive node-based UIs.\n *\n * This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n *\n * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/lab-flow-usage--docs) to learn more about this component.\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n nodeGroups,\n sidebar,\n defaultActions,\n dndContextProps,\n ...others\n}: HvFlowProps) => {\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor),\n );\n\n // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n // HvFlowContext is our custom internal context.\n return (\n <ReactFlowProvider>\n <HvFlowProvider nodeGroups={nodeGroups} defaultActions={defaultActions}>\n <DndContext\n sensors={sensors}\n modifiers={[restrictToWindowEdges]}\n {...dndContextProps}\n >\n <HvDroppableFlow {...others} />\n {sidebar}\n </DndContext>\n </HvFlowProvider>\n </ReactFlowProvider>\n );\n};\n"],"names":[],"mappings":";;;;;;AA4CO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,UAAU;AAAA,IACd,UAAU,aAAa;AAAA,IACvB,UAAU,cAAc;AAAA,EAC1B;AAIA,SACG,oBAAA,mBAAA,EACC,UAAC,oBAAA,gBAAA,EAAe,YAAwB,gBACtC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,CAAC,qBAAqB;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,iBAAA,EAAiB,GAAG,QAAQ;AAAA,QAC5B;AAAA,MAAA;AAAA,IAAA;AAAA,KAEL,EACF,CAAA;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Flow.styles.js","sources":["../../../src/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowBaseNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n root: {\n height: \"100%\",\n [`& .selected > .${flowBaseNodeClasses.root}`]: {\n border: `1px solid ${theme.colors.secondary_60}`,\n borderRadius: theme.radii.round,\n boxSizing: \"border-box\",\n },\n },\n});\n"],"names":["flowBaseNodeClasses"],"mappings":";;;;;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,CAAC,kBAAkBA,gBAAoB,IAAI,EAAE,GAAG;AAAA,MAC9C,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,cAAc,MAAM,MAAM;AAAA,MAC1B,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"FlowContext.js","sources":["../../../../src/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n createContext,\n Dispatch,\n SetStateAction,\n useMemo,\n useState,\n} from \"react\";\n\nimport { HvFlowNodeAction, HvFlowNodeGroups } from \"../types\";\nimport { HvFlowNodeMetaProvider } from \"./NodeMetaContext\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n /** Flow nodes groups. */\n nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n /** Flow nodes groups expanded on sidebar. */\n expandedNodeGroups?: string[];\n /** Flow default actions. */\n defaultActions?: HvFlowNodeAction[];\n /** Function to set `expandedNodeGroups`. */\n setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n /** Flow nodes groups. */\n nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n /** Flow default actions. */\n defaultActions?: HvFlowNodeAction[];\n /** Children. */\n children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n nodeGroups,\n defaultActions,\n children,\n}: HvFlowProviderProps) => {\n const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n const value = useMemo(\n () => ({\n nodeGroups,\n defaultActions,\n expandedNodeGroups,\n setExpandedNodeGroups,\n }),\n [nodeGroups, defaultActions, expandedNodeGroups],\n );\n\n return (\n <HvFlowNodeMetaProvider>\n <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n </HvFlowNodeMetaProvider>\n );\n};\n"],"names":[],"mappings":";;;AAsBa,MAAA,gBAAgB,cAAkC,CAAE,CAAA;AAW1D,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAmB,CAAA,CAAE;AAEzE,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY,gBAAgB,kBAAkB;AAAA,EACjD;AAGE,SAAA,oBAAC,0BACC,UAAC,oBAAA,cAAc,UAAd,EAAuB,OAAe,UAAS,EAClD,CAAA;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"NodeMetaContext.js","sources":["../../../../src/Flow/FlowContext/NodeMetaContext.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useMemo, useRef } from \"react\";\n\nimport { HvFlowNodeMeta } from \"../types\";\n\ninterface HvFlowNodeMetaContextType {\n registerNode: (id: string, nodeInfo: HvFlowNodeMeta) => void;\n unregisterNode: (id: string) => void;\n getRegistry: () => Record<string, HvFlowNodeMeta>;\n}\n\nconst HvFlowNodeMetaContext = createContext<\n HvFlowNodeMetaContextType | undefined\n>(undefined);\n\nexport const HvFlowNodeMetaProvider = ({\n children,\n}: {\n children: React.ReactNode;\n}) => {\n const registryRef = useRef<Record<string, HvFlowNodeMeta>>({});\n\n const registerNode = useCallback((id: string, nodeInfo: HvFlowNodeMeta) => {\n registryRef.current[id] = nodeInfo;\n }, []);\n\n const unregisterNode = useCallback((id: string) => {\n delete registryRef.current[id];\n }, []);\n\n const getRegistry = useCallback(() => {\n return registryRef.current;\n }, []);\n\n const value = useMemo<HvFlowNodeMetaContextType>(\n () => ({\n registerNode,\n unregisterNode,\n getRegistry,\n }),\n [registerNode, unregisterNode, getRegistry],\n );\n\n return (\n <HvFlowNodeMetaContext.Provider value={value}>\n {children}\n </HvFlowNodeMetaContext.Provider>\n );\n};\n\nexport function useNodeMetaRegistry() {\n const context = useContext(HvFlowNodeMetaContext);\n\n if (context === undefined) {\n throw new Error(\n \"useNodeRegistry must be used within a HvFlowNodeMetaProvider\",\n );\n }\n\n return {\n registerNode: context.registerNode,\n unregisterNode: context.unregisterNode,\n registry: context.getRegistry(),\n };\n}\n"],"names":[],"mappings":";;AAUA,MAAM,wBAAwB,cAE5B,MAAS;AAEJ,MAAM,yBAAyB,CAAC;AAAA,EACrC;AACF,MAEM;AACE,QAAA,cAAc,OAAuC,EAAE;AAE7D,QAAM,eAAe,YAAY,CAAC,IAAY,aAA6B;AAC7D,gBAAA,QAAQ,EAAE,IAAI;AAAA,EAC5B,GAAG,EAAE;AAEC,QAAA,iBAAiB,YAAY,CAAC,OAAe;AAC1C,WAAA,YAAY,QAAQ,EAAE;AAAA,EAC/B,GAAG,EAAE;AAEC,QAAA,cAAc,YAAY,MAAM;AACpC,WAAO,YAAY;AAAA,EACrB,GAAG,EAAE;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,cAAc,gBAAgB,WAAW;AAAA,EAC5C;AAEA,SACG,oBAAA,sBAAsB,UAAtB,EAA+B,OAC7B,SACH,CAAA;AAEJ;AAEO,SAAS,sBAAsB;AAC9B,QAAA,UAAU,WAAW,qBAAqB;AAEhD,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EAAA;AAGK,SAAA;AAAA,IACL,cAAc,QAAQ;AAAA,IACtB,gBAAgB,QAAQ;AAAA,IACxB,UAAU,QAAQ,YAAY;AAAA,EAChC;AACF;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Minimap.js","sources":["../../../../src/Flow/Minimap/Minimap.tsx"],"sourcesContent":["import { GetMiniMapNodeAttribute, MiniMap, MiniMapProps } from \"reactflow\";\nimport { ExtractNames } from \"@hitachivantara/uikit-react-core\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { staticClasses, useClasses } from \"./Minimap.styles\";\n\nexport { staticClasses as flowMinimapClasses };\n\nexport type HvFlowMinimapClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowMinimapProps<NodeData = any>\n extends Omit<\n MiniMapProps<NodeData>,\n \"nodeColor\" | \"nodeStrokeColor\" | \"maskColor\" | \"maskStrokeColor\"\n > {\n /** Node color. Defaults to `atmo4`. */\n nodeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;\n /** Node stroke color. Defaults to `atmo4`. */\n nodeStrokeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;\n /** Mask color. Defaults to `atmo3`. */\n maskColor?: HvColorAny;\n /** Mask stroke color. Defaults to `atmo3`. */\n maskStrokeColor?: HvColorAny;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowMinimapClasses;\n}\n\nexport const HvFlowMinimap = ({\n nodeColor = \"atmo4\",\n maskColor = \"atmo3\",\n maskStrokeColor = \"atmo3\",\n nodeStrokeColor = \"atmo4\",\n classes: classesProp,\n className,\n ...others\n}: HvFlowMinimapProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <MiniMap\n className={cx(classes.root, className)}\n nodeColor={\n typeof nodeColor === \"string\" ? getColor(nodeColor, \"atmo4\") : nodeColor\n }\n nodeStrokeColor={\n typeof nodeStrokeColor === \"string\"\n ? getColor(nodeStrokeColor, \"atmo4\")\n : nodeStrokeColor\n }\n maskColor={getColor(maskColor, \"atmo3\")}\n maskStrokeColor={getColor(maskStrokeColor, \"atmo3\")}\n {...others}\n />\n );\n};\n"],"names":[],"mappings":";;;;;AA2BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,WACE,OAAO,cAAc,WAAW,SAAS,WAAW,OAAO,IAAI;AAAA,MAEjE,iBACE,OAAO,oBAAoB,WACvB,SAAS,iBAAiB,OAAO,IACjC;AAAA,MAEN,WAAW,SAAS,WAAW,OAAO;AAAA,MACtC,iBAAiB,SAAS,iBAAiB,OAAO;AAAA,MACjD,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Minimap.styles.js","sources":["../../../../src/Flow/Minimap/Minimap.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowMinimap\", {\n root: {\n \"&.react-flow__minimap\": { backgroundColor: theme.colors.atmo2 },\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,yBAAyB,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EAAA;AAEnE,CAAC;"}
@@ -1 +0,0 @@
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":"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"}
@@ -1 +0,0 @@
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 +0,0 @@
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":"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"}
@@ -1 +0,0 @@
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,EAAE,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 +0,0 @@
1
- {"version":3,"file":"ParamRenderer.js","sources":["../../../../../src/Flow/Node/Parameters/ParamRenderer.tsx"],"sourcesContent":["import { HvFlowNodeParam } from \"../../types\";\nimport Select from \"./Select\";\nimport Slider from \"./Slider\";\nimport Text from \"./Text\";\n\nexport type ParamRendererProps = {\n params: HvFlowNodeParam[];\n data: any;\n};\n\nconst renderers = {\n text: Text,\n select: Select,\n slider: Slider,\n};\n\nexport const ParamRenderer = ({ params, data }: ParamRendererProps) => {\n return (\n <>\n {params.map((param, idx) => {\n const Renderer = renderers[param.type];\n if (!Renderer) return null;\n\n return <Renderer key={idx} param={param} data={data} />;\n })}\n </>\n );\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,YAAY;AAAA,EAChB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AACV;AAEO,MAAM,gBAAgB,CAAC,EAAE,QAAQ,WAA+B;AACrE,SAEK,oBAAA,UAAA,EAAA,UAAA,OAAO,IAAI,CAAC,OAAO,QAAQ;AACpB,UAAA,WAAW,UAAU,MAAM,IAAI;AACjC,QAAA,CAAC,SAAiB,QAAA;AAEtB,WAAQ,oBAAA,UAAA,EAAmB,OAAc,KAAA,GAAnB,GAA+B;AAAA,EACtD,CAAA,GACH;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Select.js","sources":["../../../../../src/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\n\nimport { useFlowNodeUtils } from \"../../hooks\";\nimport { HvFlowNodeSelectParam } from \"../../types\";\n\ninterface SelectProps {\n param: Omit<HvFlowNodeSelectParam, \"type\">;\n data: any;\n}\n\nconst Select = ({ param, data }: SelectProps) => {\n const { id, label, multiple = false, options } = param;\n const { setNodeData } = useFlowNodeUtils();\n\n const [opts, setOpts] = useState<string[] | undefined>(\n data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined,\n );\n\n const handleChange: HvDropdownProps[\"onChange\"] = (item) => {\n const newOpts = Array.isArray(item)\n ? item.map((x) => x.id as string)\n : ((item?.id as string) ?? undefined);\n\n setNodeData((prev) => ({ ...prev, [id]: newOpts }));\n setOpts(\n newOpts ? (Array.isArray(newOpts) ? newOpts : [newOpts]) : undefined,\n );\n };\n\n return (\n <HvDropdown\n className=\"nodrag\" // Prevents dragging within the select field\n disablePortal\n label={label}\n values={options?.map((option) => {\n const optionId = typeof option === \"string\" ? option : option.id;\n const optionLabel = typeof option === \"string\" ? option : option.label;\n\n return {\n id: optionId,\n label: optionLabel,\n selected: !!opts?.find((opt) => opt === optionId),\n };\n })}\n onChange={handleChange}\n maxHeight={100}\n multiSelect={multiple}\n />\n );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;AAWA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AAC/C,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,YAAY;AAC3C,QAAA,EAAE,YAAY,IAAI,iBAAiB;AAEnC,QAAA,CAAC,MAAM,OAAO,IAAI;AAAA,IACtB,KAAK,EAAE,IAAK,MAAM,QAAQ,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAK;AAAA,EACjE;AAEM,QAAA,eAA4C,CAAC,SAAS;AAC1D,UAAM,UAAU,MAAM,QAAQ,IAAI,IAC9B,KAAK,IAAI,CAAC,MAAM,EAAE,EAAY,IAC5B,MAAM,MAAiB;AAEjB,gBAAA,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,QAAA,EAAU;AAClD;AAAA,MACE,UAAW,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,IAAK;AAAA,IAC7D;AAAA,EACF;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQ,SAAS,IAAI,CAAC,WAAW;AAC/B,cAAM,WAAW,OAAO,WAAW,WAAW,SAAS,OAAO;AAC9D,cAAM,cAAc,OAAO,WAAW,WAAW,SAAS,OAAO;AAE1D,eAAA;AAAA,UACL,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,QAAQ,QAAQ,QAAQ;AAAA,QAClD;AAAA,MAAA,CACD;AAAA,MACD,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Slider.js","sources":["../../../../../src/Flow/Node/Parameters/Slider.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { HvSlider } from \"@hitachivantara/uikit-react-core\";\n\nimport { useFlowNodeUtils } from \"../../hooks\";\nimport { HvFlowNodeSliderParam } from \"../../types\";\n\ninterface SliderProps {\n param: Omit<HvFlowNodeSliderParam, \"type\">;\n data: any;\n}\n\nconst classes = {\n labelContainer: css({\n marginRight: 0,\n marginLeft: 0,\n }),\n sliderBase: css({\n padding: 0,\n }),\n};\n\nconst Slider = ({ param, data }: SliderProps) => {\n const { id } = param;\n const { setNodeData } = useFlowNodeUtils();\n\n return (\n <HvSlider\n className=\"nodrag\" // Prevents dragging within the input field\n defaultValues={data[id]}\n onChange={(val) => setNodeData((prev) => ({ ...prev, [id]: val }))}\n classes={{\n labelContainer: classes.labelContainer,\n sliderBase: classes.sliderBase,\n }}\n {...param}\n />\n );\n};\n\nexport default Slider;\n"],"names":[],"mappings":";;;;AAWA,MAAM,UAAU;AAAA,EACd,gBAAgB,IAAI;AAAA,IAClB,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,CACb;AAAA,EACD,YAAY,IAAI;AAAA,IACd,SAAS;AAAA,EACV,CAAA;AACH;AAEA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AACzC,QAAA,EAAE,OAAO;AACT,QAAA,EAAE,YAAY,IAAI,iBAAiB;AAGvC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAe,KAAK,EAAE;AAAA,MACtB,UAAU,CAAC,QAAQ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM;AAAA,MACjE,SAAS;AAAA,QACP,gBAAgB,QAAQ;AAAA,QACxB,YAAY,QAAQ;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Text.js","sources":["../../../../../src/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { HvInput } from \"@hitachivantara/uikit-react-core\";\n\nimport { useFlowNodeUtils } from \"../../hooks\";\nimport { HvFlowNodeTextParam } from \"../../types\";\n\ninterface TextProps {\n param: Omit<HvFlowNodeTextParam, \"type\">;\n data: any;\n}\n\nconst Text = ({ param, data }: TextProps) => {\n const { id, label } = param;\n const { setNodeData } = useFlowNodeUtils();\n\n return (\n <HvInput\n className=\"nodrag\" // Prevents dragging within the input field\n label={label}\n defaultValue={data[id]}\n onChange={(evt, val) => setNodeData((prev) => ({ ...prev, [id]: val }))}\n />\n );\n};\n\nexport default Text;\n"],"names":[],"mappings":";;;AAUA,MAAM,OAAO,CAAC,EAAE,OAAO,WAAsB;AACrC,QAAA,EAAE,IAAI,MAAA,IAAU;AAChB,QAAA,EAAE,YAAY,IAAI,iBAAiB;AAGvC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,cAAc,KAAK,EAAE;AAAA,MACrB,UAAU,CAAC,KAAK,QAAQ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM;AAAA,IAAA;AAAA,EACxE;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.js","sources":["../../../../src/Flow/Node/utils.ts"],"sourcesContent":["import { isValidElement } from \"react\";\nimport { Edge } from \"reactflow\";\nimport { HvActionGeneric } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvFlowNodeInput,\n HvFlowNodeInputGroup,\n HvFlowNodeOutput,\n HvFlowNodeOutputGroup,\n} from \"../types\";\n\nexport const isInputGroup = (\n input: HvFlowNodeInput | HvFlowNodeInputGroup,\n): input is HvFlowNodeInputGroup => {\n return \"inputs\" in input;\n};\n\nexport const isOutputGroup = (\n output: HvFlowNodeOutput | HvFlowNodeOutputGroup,\n): output is HvFlowNodeOutputGroup => {\n return \"outputs\" in output;\n};\n\nexport const isConnected = (\n id: string,\n type: \"target\" | \"source\",\n handleId: string,\n edges: Edge[],\n) => {\n if (type === \"target\") {\n return edges.some((e) => e.target === id && e.targetHandle === handleId);\n }\n if (type === \"source\") {\n return edges.some((e) => e.source === id && e.sourceHandle === handleId);\n }\n\n return false;\n};\n\nexport const renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const identifyHandles = (\n handles?:\n | (HvFlowNodeInput | HvFlowNodeInputGroup)[]\n | (HvFlowNodeOutput | HvFlowNodeOutputGroup)[],\n) => {\n let idx = 0;\n\n return handles?.map(\n (\n handle:\n | HvFlowNodeOutput\n | HvFlowNodeOutputGroup\n | HvFlowNodeInput\n | HvFlowNodeInputGroup,\n ) => {\n if (isInputGroup(handle)) {\n return {\n ...handle,\n inputs: handle.inputs.map((x) => {\n const identifiedHandle =\n x.id != null ? x : { ...x, id: String(idx) };\n idx += 1;\n return identifiedHandle;\n }),\n } satisfies HvFlowNodeInputGroup;\n }\n\n if (isOutputGroup(handle)) {\n return {\n ...handle,\n outputs: handle.outputs.map((x) => {\n const identifiedHandle =\n x.id != null ? x : { ...x, id: String(idx) };\n idx += 1;\n return identifiedHandle;\n }),\n } satisfies HvFlowNodeOutputGroup;\n }\n\n const identifiedHandle =\n handle.id != null ? handle : { ...handle, id: String(idx) };\n idx += 1;\n return identifiedHandle;\n },\n );\n};\n"],"names":["identifiedHandle"],"mappings":";AAWa,MAAA,eAAe,CAC1B,UACkC;AAClC,SAAO,YAAY;AACrB;AAEa,MAAA,gBAAgB,CAC3B,WACoC;AACpC,SAAO,aAAa;AACtB;AAEO,MAAM,cAAc,CACzB,IACA,MACA,UACA,UACG;AACH,MAAI,SAAS,UAAU;AACd,WAAA,MAAM,KAAK,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE,iBAAiB,QAAQ;AAAA,EAAA;AAEzE,MAAI,SAAS,UAAU;AACd,WAAA,MAAM,KAAK,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE,iBAAiB,QAAQ;AAAA,EAAA;AAGlE,SAAA;AACT;AAEO,MAAM,eAAe,CAAC,eAC3B,eAAe,UAAU,IAAI,aAAc,aAA0B;AAE1D,MAAA,kBAAkB,CAC7B,YAGG;AACH,MAAI,MAAM;AAEV,SAAO,SAAS;AAAA,IACd,CACE,WAKG;AACC,UAAA,aAAa,MAAM,GAAG;AACjB,eAAA;AAAA,UACL,GAAG;AAAA,UACH,QAAQ,OAAO,OAAO,IAAI,CAAC,MAAM;AACzBA,kBAAAA,oBACJ,EAAE,MAAM,OAAO,IAAI,EAAE,GAAG,GAAG,IAAI,OAAO,GAAG,EAAE;AACtC,mBAAA;AACAA,mBAAAA;AAAAA,UACR,CAAA;AAAA,QACH;AAAA,MAAA;AAGE,UAAA,cAAc,MAAM,GAAG;AAClB,eAAA;AAAA,UACL,GAAG;AAAA,UACH,SAAS,OAAO,QAAQ,IAAI,CAAC,MAAM;AAC3BA,kBAAAA,oBACJ,EAAE,MAAM,OAAO,IAAI,EAAE,GAAG,GAAG,IAAI,OAAO,GAAG,EAAE;AACtC,mBAAA;AACAA,mBAAAA;AAAAA,UACR,CAAA;AAAA,QACH;AAAA,MAAA;AAGI,YAAA,mBACJ,OAAO,MAAM,OAAO,SAAS,EAAE,GAAG,QAAQ,IAAI,OAAO,GAAG,EAAE;AACrD,aAAA;AACA,aAAA;AAAA,IAAA;AAAA,EAEX;AACF;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Sidebar.js","sources":["../../../../src/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport {\n DndContextProps,\n DragOverlay,\n DragOverlayProps,\n useDndMonitor,\n useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport {\n ExtractNames,\n HvDrawer,\n HvDrawerProps,\n HvInput,\n HvTypography,\n useLabels,\n useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext } from \"../hooks\";\nimport { HvFlowNodeGroups } from \"../types\";\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport {\n HvFlowDraggableSidebarGroupItem,\n HvFlowSidebarGroupItem,\n} from \"./SidebarGroup/SidebarGroupItem\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n /** Sidebar title. */\n title?: string;\n /** Sidebar description. */\n description?: string;\n /** Flatten sidebar items */\n flatten?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowSidebarClasses;\n /** Labels used on the sidebar. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /**\n * Dnd Kit drag overlay props for customization.\n *\n * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).\n */\n dragOverlayProps?: DragOverlayProps;\n}\n\nconst DEFAULT_LABELS = {\n itemAriaRoleDescription: \"Draggable\",\n expandGroupButtonAriaLabel: \"Expand group\",\n searchPlaceholder: \"Search node...\",\n searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n id,\n title,\n description,\n anchor = \"right\",\n buttonTitle = \"Close\",\n flatten = false,\n classes: classesProp,\n labels: labelsProps,\n dragOverlayProps,\n ...others\n}: HvFlowSidebarProps) => {\n const { classes } = useClasses(classesProp);\n\n const { nodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n const [filterValue, setFilterValue] = useState(\"\");\n const [draggingLabel, setDraggingLabel] = useState<string>();\n\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n const drawerElementId = useUniqueId(id);\n const groupsElementId = useUniqueId();\n\n // The sidebar is droppable to distinguish between the canvas and the sidebar\n // Otherwise items dropped inside the sidebar will be added to the canvas\n const { setNodeRef } = useDroppable({ id: drawerElementId });\n\n const handleDragStart: DndContextProps[\"onDragStart\"] = (event) => {\n if (event.active.data.current?.hvFlow) {\n setDraggingLabel(event.active.data.current.hvFlow?.label);\n }\n };\n\n const handleDragEnd: DndContextProps[\"onDragEnd\"] = () => {\n setDraggingLabel(undefined);\n };\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n onDragStart: handleDragStart,\n });\n\n const filteredGroups = useMemo(() => {\n if (!filterValue || !nodeGroups) return nodeGroups || {};\n\n return filterValue\n ? Object.entries(nodeGroups).reduce<HvFlowNodeGroups>(\n (acc, [groupId, group]) => {\n // Filter items by search\n const filteredItems = (group.items || []).filter((item) =>\n item.label.toLowerCase().includes(filterValue.toLowerCase()),\n );\n const itemsCount = Object.keys(filteredItems).length;\n\n // Only show groups with nodes\n if (itemsCount > 0) {\n acc[groupId] = {\n ...group,\n items: filteredItems,\n };\n }\n\n return acc;\n },\n {},\n )\n : nodeGroups;\n }, [filterValue, nodeGroups]);\n\n useEffect(() => {\n setExpandedNodeGroups?.(filterValue ? Object.keys(filteredGroups) : []);\n }, [filterValue, filteredGroups, setExpandedNodeGroups]);\n\n return (\n <HvDrawer\n BackdropComponent={undefined}\n variant=\"persistent\"\n classes={{\n paper: classes.drawerPaper,\n }}\n showBackdrop={false}\n anchor={anchor}\n buttonTitle={buttonTitle}\n {...others}\n >\n <div id={drawerElementId} ref={setNodeRef}>\n <div className={classes.titleContainer}>\n <Add />\n <HvTypography component=\"p\" variant=\"title3\">\n {title}\n </HvTypography>\n </div>\n <div className={classes.contentContainer}>\n <HvTypography className={classes.description}>\n {description}\n </HvTypography>\n <HvInput\n className={classes.searchRoot}\n type=\"search\"\n placeholder={labels?.searchPlaceholder}\n aria-label={labels?.searchAriaLabel}\n aria-controls={groupsElementId}\n aria-owns={groupsElementId}\n onChange={(evt, val) => setFilterValue(val.trim())}\n inputProps={{ autoComplete: \"off\" }}\n />\n <ul id={groupsElementId} className={classes.groupsContainer}>\n {Object.entries(filteredGroups).map(([groupId, group]) => {\n if (flatten) {\n return (group.items || []).map((item, i) => (\n <HvFlowDraggableSidebarGroupItem\n key={`${item.nodeType}-${i}`}\n aria-roledescription={labels?.itemAriaRoleDescription}\n {...item}\n />\n ));\n }\n\n return (\n <HvFlowSidebarGroup\n key={groupId}\n id={groupId}\n expandButtonProps={{\n \"aria-label\": labels?.expandGroupButtonAriaLabel,\n }}\n itemProps={{\n \"aria-roledescription\": labels?.itemAriaRoleDescription,\n }}\n {...group}\n />\n );\n })}\n </ul>\n </div>\n </div>\n <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n {draggingLabel ? (\n <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n ) : null}\n </DragOverlay>\n </HvDrawer>\n );\n};\n"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Sidebar.styles.js","sources":["../../../../src/Flow/Sidebar/Sidebar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowSidebar\", {\n drawerPaper: { width: \"360px\" },\n titleContainer: {\n display: \"flex\",\n padding: theme.spacing(\"sm\", \"lg\", \"xs\", \"sm\"),\n },\n contentContainer: { padding: theme.spacing(0, \"lg\", \"sm\", \"lg\") },\n description: { color: theme.colors.secondary_80 },\n searchRoot: {\n paddingTop: theme.space.sm,\n paddingBottom: theme.space.sm,\n },\n groupsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.sm,\n listStyleType: \"none\",\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,aAAa,EAAE,OAAO,QAAQ;AAAA,EAC9B,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACA,kBAAkB,EAAE,SAAS,MAAM,QAAQ,GAAG,MAAM,MAAM,IAAI,EAAE;AAAA,EAChE,aAAa,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EAChD,YAAY;AAAA,IACV,YAAY,MAAM,MAAM;AAAA,IACxB,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,eAAe;AAAA,EAAA;AAEnB,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidebarGroup.js","sources":["../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n ExtractNames,\n HvButton,\n HvButtonProps,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { useFlowContext } from \"../../hooks\";\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n HvFlowDraggableSidebarGroupItem,\n HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n /** Group id. */\n id: string;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowSidebarGroupClasses;\n /** Expand button props. */\n expandButtonProps?: HvButtonProps;\n /** Item group props. */\n itemProps?: Partial<HvFlowDraggableSidebarGroupItemProps>;\n}\n\nexport const HvFlowSidebarGroup = ({\n id,\n label,\n items = [],\n color,\n description,\n icon,\n expandButtonProps,\n classes: classesProp,\n itemProps,\n}: HvFlowSidebarGroupProps) => {\n const { classes, cx, css } = useClasses(classesProp);\n\n const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n const opened = useMemo(\n () => !!expandedNodeGroups?.find((group) => group === id),\n [expandedNodeGroups, id],\n );\n\n const handleClick = useCallback(() => {\n setExpandedNodeGroups?.((prev) =>\n opened ? prev.filter((group) => id !== group) : [...prev, id],\n );\n }, [id, opened, setExpandedNodeGroups]);\n\n return (\n <li className={cx(css({ borderColor: getColor(color) }), classes.root)}>\n <div className={classes.titleContainer}>\n <div className={classes.labelContainer}>\n <div className={classes.icon} role=\"presentation\">\n {icon}\n </div>\n <HvTypography component=\"p\" variant=\"title4\">\n {Object.keys(items).length > 1\n ? `${label} (${Object.keys(items).length})`\n : label}\n </HvTypography>\n </div>\n <HvButton\n icon\n onClick={handleClick}\n aria-expanded={opened}\n {...expandButtonProps}\n >\n <DropDownXS rotate={opened} />\n </HvButton>\n </div>\n {description && (\n <div className={classes.descriptionContainer}>\n <HvTypography>{description}</HvTypography>\n </div>\n )}\n {opened && (\n <div className={classes.itemsContainer}>\n {Object.entries(items).map(([itemId, item]) => (\n <HvFlowDraggableSidebarGroupItem\n key={itemId}\n {...itemProps}\n {...item}\n />\n ))}\n </div>\n )}\n </li>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAiCO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,MAA+B;AAC7B,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,oBAAoB,sBAAsB,IAAI,eAAe;AAErE,QAAM,SAAS;AAAA,IACb,MAAM,CAAC,CAAC,oBAAoB,KAAK,CAAC,UAAU,UAAU,EAAE;AAAA,IACxD,CAAC,oBAAoB,EAAE;AAAA,EACzB;AAEM,QAAA,cAAc,YAAY,MAAM;AACpC;AAAA,MAAwB,CAAC,SACvB,SAAS,KAAK,OAAO,CAAC,UAAU,OAAO,KAAK,IAAI,CAAC,GAAG,MAAM,EAAE;AAAA,IAC9D;AAAA,EACC,GAAA,CAAC,IAAI,QAAQ,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAW,GAAG,IAAI,EAAE,aAAa,SAAS,KAAK,EAAE,CAAC,GAAG,QAAQ,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAW,QAAQ,MAAM,MAAK,gBAChC,UACH,MAAA;AAAA,QACA,oBAAC,gBAAa,WAAU,KAAI,SAAQ,UACjC,UAAA,OAAO,KAAK,KAAK,EAAE,SAAS,IACzB,GAAG,KAAK,KAAK,OAAO,KAAK,KAAK,EAAE,MAAM,MACtC,MACN,CAAA;AAAA,MAAA,GACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,SAAS;AAAA,UACT,iBAAe;AAAA,UACd,GAAG;AAAA,UAEJ,UAAA,oBAAC,YAAW,EAAA,QAAQ,OAAQ,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9B,GACF;AAAA,IACC,mCACE,OAAI,EAAA,WAAW,QAAQ,sBACtB,UAAA,oBAAC,cAAc,EAAA,UAAA,YAAA,CAAY,EAC7B,CAAA;AAAA,IAED,UACC,oBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA,OAAO,QAAQ,KAAK,EAAE,IAAI,CAAC,CAAC,QAAQ,IAAI,MACvC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEE,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,MAFC;AAAA,IAAA,CAIR,EACH,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidebarGroup.styles.js","sources":["../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvFlowSidebarGroup\",\n {\n root: {\n padding: theme.space.sm,\n borderRadius: theme.radii.round,\n borderWidth: \"1px\",\n borderTopWidth: \"3px\",\n },\n titleContainer: {\n display: \"flex\",\n justifyContent: \"space-between\",\n },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n },\n icon: { paddingRight: theme.space.xs },\n descriptionContainer: {\n padding: `${theme.space.xs} 0 ${theme.space.sm} calc(32px + ${theme.space.xs})`,\n },\n itemsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n paddingLeft: theme.space.sm,\n },\n },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS,MAAM,MAAM;AAAA,MACrB,cAAc,MAAM,MAAM;AAAA,MAC1B,aAAa;AAAA,MACb,gBAAgB;AAAA,IAClB;AAAA,IACA,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,gBAAgB;AAAA,IAClB;AAAA,IACA,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IACA,MAAM,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,IACrC,sBAAsB;AAAA,MACpB,SAAS,GAAG,MAAM,MAAM,EAAE,MAAM,MAAM,MAAM,EAAE,gBAAgB,MAAM,MAAM,EAAE;AAAA,IAC9E;AAAA,IACA,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,MAAM,MAAM;AAAA,MACjB,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,EAC3B;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { useDraggable } from \"@dnd-kit/core\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowGroupItem } from \"../../../types\";\nimport {\n HvFlowSidebarGroupItem,\n HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n extends HvFlowSidebarGroupItemProps,\n HvFlowGroupItem {}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n id: idProp,\n label,\n nodeType,\n data,\n ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n const itemRef = useRef<HTMLElement>(null);\n const id = useUniqueId(idProp);\n\n const { attributes, listeners, setNodeRef, isDragging, transform } =\n useDraggable({\n id,\n data: {\n hvFlow: {\n // Needed to know which item is being dragged and dropped\n type: nodeType,\n // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow\n label,\n // Item position: used to position the item when dropped\n x: itemRef.current?.getBoundingClientRect().x,\n y: itemRef.current?.getBoundingClientRect().y,\n // Data\n data,\n },\n },\n });\n\n const forkedRef = useForkRef(itemRef, setNodeRef);\n\n const style = transform\n ? {\n transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n }\n : undefined;\n\n return (\n <HvFlowSidebarGroupItem\n ref={forkedRef}\n style={style}\n label={label}\n isDragging={isDragging}\n {...listeners}\n {...attributes}\n {...others}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,kCAAkC,CAAC;AAAA,EAC9C,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4C;AACpC,QAAA,UAAU,OAAoB,IAAI;AAClC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,EAAE,YAAY,WAAW,YAAY,YAAY,cACrD,aAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,QAAQ;AAAA;AAAA,QAEN,MAAM;AAAA;AAAA,QAEN;AAAA;AAAA,QAEA,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA,QAC5C,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA;AAAA,QAE5C;AAAA,MAAA;AAAA,IACF;AAAA,EACF,CACD;AAEG,QAAA,YAAY,WAAW,SAAS,UAAU;AAEhD,QAAM,QAAQ,YACV;AAAA,IACE,WAAW,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,EAAA,IAEzD;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Drag } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./SidebarGroupItem.styles\";\n\nexport { staticClasses as flowSidebarGroupItemClasses };\n\nexport type HvFlowSidebarGroupItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarGroupItemProps extends HvBaseProps {\n /** Item label. */\n label: string;\n /** Whether the item is being dragged. */\n isDragging?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowSidebarGroupItemClasses;\n}\n\nexport const HvFlowSidebarGroupItem = forwardRef<\n HTMLDivElement,\n HvFlowSidebarGroupItemProps\n>(function HvFlowSidebarGroupItem(props, ref) {\n const {\n label,\n isDragging,\n classes: classesProp,\n className,\n ...others\n } = props;\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <div\n ref={ref}\n className={cx(\n classes.root,\n { [classes.dragging]: isDragging },\n className,\n )}\n {...others}\n >\n <HvTypography>{label}</HvTypography>\n <Drag />\n </div>\n );\n});\n"],"names":["HvFlowSidebarGroupItem"],"mappings":";;;;;;AAuBO,MAAM,yBAAyB,WAGpC,SAASA,wBAAuB,OAAO,KAAK;AACtC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,gBAAc,UAAM,MAAA,CAAA;AAAA,4BACpB,MAAK,CAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACR;AAEJ,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"SidebarGroupItem.styles.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.tsx"],"sourcesContent":["import {\n createClasses,\n outlineStyles,\n theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvFlowSidebarGroupItem\",\n {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n border: `1px solid ${theme.colors.atmo4}`,\n padding: theme.spacing(0, 0, 0, \"sm\"),\n cursor: \"pointer\",\n boxShadow: `0 1px 0 ${theme.colors.shad1}`,\n\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n dragging: { borderColor: theme.colors.primary_80 },\n },\n);\n"],"names":[],"mappings":";AAMa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,MACvC,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,IAAI;AAAA,MACpC,QAAQ;AAAA,MACR,WAAW,WAAW,MAAM,OAAO,KAAK;AAAA,MAExC,mBAAmB;AAAA,QACjB,GAAG;AAAA,MAAA;AAAA,IAEP;AAAA,IACA,UAAU,EAAE,aAAa,MAAM,OAAO,WAAW;AAAA,EAAA;AAErD;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"base.js","sources":["../../../src/Flow/base.ts"],"sourcesContent":["import { css } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const flowStyles = css`\n /* this gets exported as style.css and can be used for the default theming */\n /* these are the necessary styles for React Flow, they get used by base.css and style.css */\n .react-flow__container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n .react-flow__pane {\n z-index: 1;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__pane.selection {\n cursor: pointer;\n }\n .react-flow__pane.dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .react-flow__viewport {\n transform-origin: 0 0;\n z-index: 2;\n pointer-events: none;\n }\n .react-flow__renderer {\n z-index: 4;\n }\n .react-flow__selection {\n z-index: 6;\n }\n .react-flow__nodesselection-rect:focus,\n .react-flow__nodesselection-rect:focus-visible {\n outline: none;\n }\n .react-flow .react-flow__edges {\n pointer-events: none;\n overflow: visible;\n }\n .react-flow__edge-path,\n .react-flow__connection-path {\n stroke: ${theme.colors.secondary};\n stroke-width: 1;\n fill: none;\n }\n .react-flow__edge {\n pointer-events: visibleStroke;\n cursor: pointer;\n }\n .react-flow__edge.animated path {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n .react-flow__edge.animated path.react-flow__edge-interaction {\n stroke-dasharray: none;\n -webkit-animation: none;\n animation: none;\n }\n .react-flow__edge.inactive {\n pointer-events: none;\n }\n .react-flow__edge.selected,\n .react-flow__edge:focus,\n .react-flow__edge:focus-visible {\n outline: none;\n }\n .react-flow__edge.selected .react-flow__edge-path,\n .react-flow__edge:focus .react-flow__edge-path,\n .react-flow__edge:focus-visible .react-flow__edge-path {\n stroke: #555;\n }\n .react-flow__edge-textwrapper {\n pointer-events: all;\n }\n .react-flow__edge-textbg {\n fill: white;\n }\n .react-flow__edge .react-flow__edge-text {\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .react-flow__connection {\n pointer-events: none;\n }\n .react-flow__connection .animated {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n .react-flow__connectionline {\n z-index: 1001;\n }\n .react-flow__nodes {\n pointer-events: none;\n transform-origin: 0 0;\n }\n .react-flow__node {\n position: absolute;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n box-sizing: border-box;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__node.dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .react-flow__nodesselection {\n z-index: 3;\n transform-origin: left top;\n pointer-events: none;\n }\n .react-flow__nodesselection-rect {\n position: absolute;\n pointer-events: all;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__handle {\n position: absolute;\n pointer-events: none;\n min-width: 5px;\n min-height: 5px;\n width: 6px;\n height: 6px;\n background: #1a192b;\n border: 1px solid white;\n border-radius: 100%;\n }\n .react-flow__handle.connectionindicator {\n pointer-events: all;\n cursor: crosshair;\n }\n .react-flow__handle-bottom {\n top: auto;\n left: 50%;\n bottom: -4px;\n transform: translate(-50%, 0);\n }\n .react-flow__handle-top {\n left: 50%;\n top: -4px;\n transform: translate(-50%, 0);\n }\n .react-flow__handle-left {\n top: 50%;\n left: -4px;\n transform: translate(0, -50%);\n }\n .react-flow__handle-right {\n right: -4px;\n top: 50%;\n transform: translate(0, -50%);\n }\n .react-flow__edgeupdater {\n cursor: move;\n pointer-events: all;\n }\n .react-flow__panel {\n position: absolute;\n z-index: 5;\n margin: 15px;\n }\n .react-flow__panel.top {\n top: 0;\n }\n .react-flow__panel.bottom {\n bottom: 0;\n }\n .react-flow__panel.left {\n left: 0;\n }\n .react-flow__panel.right {\n right: 0;\n }\n .react-flow__panel.center {\n left: 50%;\n transform: translateX(-50%);\n }\n .react-flow__attribution {\n font-size: 10px;\n background: rgba(255, 255, 255, 0.5);\n padding: 2px 3px;\n margin: 0;\n }\n .react-flow__attribution a {\n text-decoration: none;\n color: #999;\n }\n @-webkit-keyframes dashdraw {\n from {\n stroke-dashoffset: 10;\n }\n }\n @keyframes dashdraw {\n from {\n stroke-dashoffset: 10;\n }\n }\n .react-flow__edgelabel-renderer {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .react-flow__edge.updating .react-flow__edge-path {\n stroke: #777;\n }\n .react-flow__edge-text {\n font-size: 10px;\n }\n .react-flow__node.selectable:focus,\n .react-flow__node.selectable:focus-visible {\n outline: none;\n }\n .react-flow__node-default,\n .react-flow__node-input,\n .react-flow__node-output {\n padding: ${theme.space.sm};\n border-radius: ${theme.radii.round};\n width: 150px;\n color: ${theme.colors.secondary};\n text-align: center;\n border: 1px solid ${theme.colors.negative};\n background-color: ${theme.colors.negative_20};\n }\n .react-flow__node-group {\n color: ${theme.colors.secondary};\n text-align: center;\n }\n .react-flow__node-default::before {\n content: \"Unknown node type\";\n display: block;\n }\n .react-flow__node-default.selectable:hover,\n .react-flow__node-input.selectable:hover,\n .react-flow__node-output.selectable:hover,\n .react-flow__node-group.selectable:hover {\n }\n .react-flow__node-default.selectable.selected,\n .react-flow__node-default.selectable:focus,\n .react-flow__node-default.selectable:focus-visible,\n .react-flow__node-input.selectable.selected,\n .react-flow__node-input.selectable:focus,\n .react-flow__node-input.selectable:focus-visible,\n .react-flow__node-output.selectable.selected,\n .react-flow__node-output.selectable:focus,\n .react-flow__node-output.selectable:focus-visible,\n .react-flow__node-group.selectable.selected,\n .react-flow__node-group.selectable:focus,\n .react-flow__node-group.selectable:focus-visible {\n }\n .react-flow__node-group {\n background-color: rgba(240, 240, 240, 0.25);\n }\n .react-flow__nodesselection-rect,\n .react-flow__selection {\n background: rgba(0, 89, 220, 0.08);\n }\n .react-flow__nodesselection-rect:focus,\n .react-flow__nodesselection-rect:focus-visible,\n .react-flow__selection:focus,\n .react-flow__selection:focus-visible {\n outline: none;\n }\n .react-flow__controls {\n box-shadow: ${theme.colors.shadow};\n }\n .react-flow__controls-button {\n border: none;\n background: #fefefe;\n border-bottom: 1px solid #eee;\n box-sizing: content-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 16px;\n height: 16px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n padding: 5px;\n }\n .react-flow__controls-button:hover {\n background: #f4f4f4;\n }\n .react-flow__controls-button svg {\n width: 100%;\n max-width: 12px;\n max-height: 12px;\n }\n .react-flow__controls-button:disabled {\n pointer-events: none;\n }\n .react-flow__controls-button:disabled svg {\n fill-opacity: 0.4;\n }\n .react-flow__minimap {\n background-color: #fff;\n }\n .react-flow__resize-control {\n position: absolute;\n }\n .react-flow__resize-control.left,\n .react-flow__resize-control.right {\n cursor: ew-resize;\n }\n .react-flow__resize-control.top,\n .react-flow__resize-control.bottom {\n cursor: ns-resize;\n }\n .react-flow__resize-control.top.left,\n .react-flow__resize-control.bottom.right {\n cursor: nwse-resize;\n }\n .react-flow__resize-control.bottom.left,\n .react-flow__resize-control.top.right {\n cursor: nesw-resize;\n }\n /* handle styles */\n .react-flow__resize-control.handle {\n width: 4px;\n height: 4px;\n border: 1px solid #fff;\n border-radius: 1px;\n background-color: ${theme.colors.primary};\n transform: translate(-50%, -50%);\n }\n .react-flow__resize-control.handle.left {\n left: 0;\n top: 50%;\n }\n .react-flow__resize-control.handle.right {\n left: 100%;\n top: 50%;\n }\n .react-flow__resize-control.handle.top {\n left: 50%;\n top: 0;\n }\n .react-flow__resize-control.handle.bottom {\n left: 50%;\n top: 100%;\n }\n .react-flow__resize-control.handle.top.left {\n left: 0;\n }\n .react-flow__resize-control.handle.bottom.left {\n left: 0;\n }\n .react-flow__resize-control.handle.top.right {\n left: 100%;\n }\n .react-flow__resize-control.handle.bottom.right {\n left: 100%;\n }\n /* line styles */\n .react-flow__resize-control.line {\n border-color: ${theme.colors.primary_80};\n border-width: 0;\n border-style: dashed;\n }\n .react-flow__resize-control.line.left,\n .react-flow__resize-control.line.right {\n width: 1px;\n transform: translate(-50%, 0);\n top: 0;\n height: 100%;\n }\n .react-flow__resize-control.line.left {\n left: 0;\n border-left-width: 1px;\n }\n .react-flow__resize-control.line.right {\n left: 100%;\n border-right-width: 1px;\n }\n .react-flow__resize-control.line.top,\n .react-flow__resize-control.line.bottom {\n height: 1px;\n transform: translate(0, -50%);\n left: 0;\n width: 100%;\n }\n .react-flow__resize-control.line.top {\n top: 0;\n border-top-width: 1px;\n }\n .react-flow__resize-control.line.bottom {\n border-bottom-width: 1px;\n top: 100%;\n }\n`;\n"],"names":[],"mappings":";;AAGO,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cA2CZ,MAAM,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eA2LrB,MAAM,MAAM,EAAE;AAAA,qBACR,MAAM,MAAM,KAAK;AAAA;AAAA,aAEzB,MAAM,OAAO,SAAS;AAAA;AAAA,wBAEX,MAAM,OAAO,QAAQ;AAAA,wBACrB,MAAM,OAAO,WAAW;AAAA;AAAA;AAAA,aAGnC,MAAM,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAuCjB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA4Db,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAiCxB,MAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"useFlowContext.js","sources":["../../../../src/Flow/hooks/useFlowContext.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvFlowContext } from \"../FlowContext\";\n\nexport const useFlowContext = () => useContext(HvFlowContext);\n"],"names":[],"mappings":";;AAIa,MAAA,iBAAiB,MAAM,WAAW,aAAa;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"useFlowInstance.js","sources":["../../../../src/Flow/hooks/useFlowInstance.ts"],"sourcesContent":["import { useReactFlow } from \"reactflow\";\n\nimport { HvFlowInstance } from \"../types\";\n\n/** Retrieves the React Flow instance */\nexport function useFlowInstance<\n NodeData = any,\n EdgeData = any,\n>(): HvFlowInstance<NodeData, EdgeData> {\n return useReactFlow<NodeData, EdgeData>();\n}\n"],"names":[],"mappings":";AAKO,SAAS,kBAGwB;AACtC,SAAO,aAAiC;AAC1C;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"useFlowNode.js","sources":["../../../../src/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n CoordinateExtent,\n Edge,\n Node,\n ReactFlowState,\n useEdges,\n useNodes,\n useStore,\n XYPosition,\n} from \"reactflow\";\nimport { shallow } from \"zustand/shallow\";\n\nimport { useFlowInstance } from \"./useFlowInstance\";\nimport { useNodeId } from \"./useNodeId\";\n\n/** Uses coordinates to create the relative position vector */\nfunction relativePosition(positionA?: XYPosition, positionB?: XYPosition) {\n if (positionA && positionB)\n return {\n x: positionB.x - positionA.x,\n y: positionB.y - positionA.y,\n };\n return { x: 0, y: 0 };\n}\n\n/** Retrieves the node instance */\nexport function useFlowNode<T extends Node = Node>(id?: string) {\n const nodeId = useNodeId(id);\n\n const nodeSelector = useCallback(\n (state: ReactFlowState) =>\n state.getNodes().find((n: Node): n is T => n.id === nodeId),\n [nodeId],\n );\n return useStore<T | undefined>(nodeSelector, shallow);\n}\n\n/** Provides the input edges connected to the node */\nexport function useFlowNodeInputEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const inputEdgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter((e: Edge) => e.target === nodeId),\n [nodeId],\n );\n return useStore(inputEdgesSelector, shallow);\n}\n\n/** Gives the output edges connected from the node */\nexport function useFlowNodeOutputEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const outputEdgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter((e: Edge) => e.source === nodeId),\n [nodeId],\n );\n return useStore(outputEdgesSelector, shallow);\n}\n\n/** Offers both input and output edges of the node */\nexport function useFlowNodeEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const edgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter(\n (e: Edge) => e.source === nodeId || e.target === nodeId,\n ),\n [nodeId],\n );\n return useStore(edgesSelector, shallow);\n}\n\n/** Gets the parent nodes of a specified node (nodes that have an output connected to one of the inputs of the node) */\nexport function useFlowNodeParents(id?: string) {\n const inputEdges = useFlowNodeInputEdges(id);\n const parentNodesSelector = useCallback(\n (state: ReactFlowState) => {\n return inputEdges\n .map((e) => state.getNodes().find((n: Node) => n.id === e.source))\n .filter((n): n is Node => n !== null);\n },\n [inputEdges],\n );\n return useStore(parentNodesSelector, shallow);\n}\n\n/** Retrieves the nodes connected to the inputs of the node */\nexport function useFlowInputNodes<T = any>(id?: string) {\n const nodeId = useNodeId(id);\n const nodes = useNodes();\n const edges = useEdges();\n\n return useMemo(() => {\n return edges\n .filter((e) => e.target === nodeId)\n .map((e) => nodes.find((n) => n.id === e.source))\n .filter((n): n is Node<T> => n !== null);\n }, [edges, nodeId, nodes]);\n}\n\n/** Retrieves the nodes connected to the outputs of the node */\nexport function useFlowOutputNodes<T = any>(id?: string) {\n const nodeId = useNodeId(id);\n const nodes = useNodes();\n const edges = useEdges();\n\n return useMemo(() => {\n return edges\n .filter((e) => e.source === nodeId)\n .map((e) => nodes.find((n) => n.id === e.target))\n .filter((n): n is Node<T> => n !== null);\n }, [edges, nodeId, nodes]);\n}\n\n/** Utilities to manipulate a node in the flow */\nexport function useFlowNodeUtils<NodeData = any>(id?: string) {\n const nodeId = useNodeId(id);\n const reactFlowInstance = useFlowInstance<NodeData>();\n\n /** Mutate the node's `.data` object */\n const setNodeData = useCallback(\n (setNewData: (newData?: NodeData) => NodeData) => {\n if (!nodeId) return;\n\n reactFlowInstance.setNodes((nodes) => {\n return nodes.map((n) => {\n if (n.id === nodeId) {\n return { ...n, data: setNewData(n.data) };\n }\n return n;\n });\n });\n },\n [nodeId, reactFlowInstance],\n );\n\n const setNodeParent = useCallback(\n (node?: Node<any>, extent?: \"parent\" | CoordinateExtent) => {\n if (!nodeId) return;\n\n reactFlowInstance.setNodes((nodes) => {\n return nodes.map((n) => {\n if (n.id === nodeId) {\n return {\n ...n,\n parentId: node ? node.id : undefined,\n extent,\n position: node\n ? relativePosition(node.position, n.position)\n : (n.positionAbsolute ?? n.position),\n };\n }\n return n;\n });\n });\n },\n [nodeId, reactFlowInstance],\n );\n\n return useMemo(\n () => ({\n setNodeData,\n setNodeParent,\n }),\n [setNodeData, setNodeParent],\n );\n}\n\nexport function useFlowNodeIntersections<NodeData = any>(id?: string) {\n const nodeId = useNodeId(id);\n const node = useFlowNode(nodeId ?? \"\");\n const reactFlowInstance = useFlowInstance<NodeData>();\n\n return node ? reactFlowInstance.getIntersectingNodes(node, false) : [];\n}\n"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"useFlowNodeMeta.js","sources":["../../../../src/Flow/hooks/useFlowNodeMeta.ts"],"sourcesContent":["import { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { useNodeId } from \"./useNodeId\";\n\nexport function useFlowNodeMeta(id?: string) {\n const nodeId = useNodeId(id);\n const { registry } = useNodeMetaRegistry();\n\n return registry[nodeId!];\n}\n"],"names":[],"mappings":";;AAGO,SAAS,gBAAgB,IAAa;AACrC,QAAA,SAAS,UAAU,EAAE;AACrB,QAAA,EAAE,SAAS,IAAI,oBAAoB;AAEzC,SAAO,SAAS,MAAO;AACzB;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"useNode.js","sources":["../../../../src/Flow/hooks/useNode.tsx"],"sourcesContent":["import {\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { NodeToolbarProps } from \"reactflow\";\nimport { uid } from \"uid\";\nimport { useLabels } from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { identifyHandles } from \"../Node/utils\";\nimport {\n HvFlowNodeAction,\n HvFlowNodeInput,\n HvFlowNodeInputGroup,\n HvFlowNodeOutput,\n HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { useFlowContext } from \"./useFlowContext\";\nimport { useFlowInstance } from \"./useFlowInstance\";\nimport {\n useFlowNode,\n useFlowNodeInputEdges,\n useFlowNodeIntersections,\n useFlowNodeOutputEdges,\n useFlowNodeUtils,\n} from \"./useFlowNode\";\n\nconst DEFAULT_LABELS = {\n deleteActionLabel: \"Delete\",\n duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvUseNodeParams {\n id: string;\n /** Node group ID */\n groupId?: string;\n\n title?: string;\n\n subtitle?: string;\n\n icon?: React.ReactNode;\n\n color?: HvColorAny;\n /** Node inputs */\n inputs?: (HvFlowNodeInput | HvFlowNodeInputGroup)[];\n /** Node outputs */\n outputs?: (HvFlowNodeOutput | HvFlowNodeOutputGroup)[];\n /** Node actions */\n nodeActions?: HvFlowNodeAction[];\n /** Labels used on the default actions. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** Props for the NodeToolbar Component */\n nodeToolbarProps?: NodeToolbarProps;\n}\n\nexport function useHvNode(props: HvUseNodeParams) {\n const {\n id,\n title: titleProp,\n icon: iconProp,\n color: colorProp,\n subtitle: subtitleProp,\n nodeActions: nodeActionsProp,\n inputs: inputsProp,\n outputs: outputsProp,\n groupId,\n labels: labelsProps,\n nodeToolbarProps,\n } = props;\n\n const { registerNode, unregisterNode } = useNodeMetaRegistry();\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);\n const inputEdges = useFlowNodeInputEdges();\n const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);\n const outputEdges = useFlowNodeOutputEdges();\n const { nodeGroups } = useFlowContext();\n const intersections = useFlowNodeIntersections();\n const { setNodeParent, setNodeData } = useFlowNodeUtils();\n\n const node = useFlowNode();\n\n const reactFlowInstance = useFlowInstance();\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 = getColor(colorProp || nodeGroup?.color);\n const iconColor = isValidElement(icon)\n ? getColor(icon.props.color || \"base_dark\")\n : getColor(\"base_dark\");\n const subtitle = subtitleProp || node?.data.nodeLabel;\n\n const [showActions, setShowActions] = useState(false);\n\n const toggleShowActions = useCallback(() => {\n setShowActions(!showActions);\n }, [showActions]);\n\n const getNodeToolbarProps = useCallback(\n () => ({\n offset: 0,\n isVisible: showActions,\n ...nodeToolbarProps,\n }),\n [nodeToolbarProps, showActions],\n );\n\n const nodeActions = useMemo<HvFlowNodeAction[]>(\n () =>\n nodeActionsProp || [\n { id: \"delete\", label: labels?.deleteActionLabel, icon: <Delete /> },\n {\n id: \"duplicate\",\n label: labels?.duplicateActionLabel,\n icon: <Duplicate />,\n },\n ],\n [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp],\n );\n\n useEffect(() => {\n registerNode(id, {\n label: title || \"\",\n inputs,\n outputs,\n });\n return () => unregisterNode(id);\n }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n const handleDefaultAction = useCallback(\n (action: HvFlowNodeAction) => {\n if (!node) return;\n\n if (action.callback) {\n action.callback(node);\n return;\n }\n\n // built-in actions\n switch (action.id) {\n case \"delete\":\n reactFlowInstance.deleteElements({ nodes: [node] });\n break;\n case \"duplicate\":\n reactFlowInstance.addNodes([\n {\n ...node,\n id: uid(),\n position: {\n x: node.position.x,\n y: node.position.y + (node.height || 0) + 20,\n },\n selected: false,\n zIndex: Number(theme.zIndices.overlay),\n },\n ]);\n break;\n default:\n break;\n }\n },\n [node, reactFlowInstance],\n );\n\n return useMemo(\n () => ({\n // state\n id,\n title,\n icon,\n color,\n iconColor,\n subtitle,\n inputs,\n inputEdges,\n outputs,\n outputEdges,\n node,\n nodeActions,\n showActions,\n intersections,\n // prop getters\n getNodeToolbarProps,\n // actions\n toggleShowActions,\n handleDefaultAction,\n setNodeData,\n setNodeParent,\n }),\n [\n id,\n title,\n icon,\n color,\n iconColor,\n subtitle,\n inputs,\n inputEdges,\n outputs,\n outputEdges,\n node,\n nodeActions,\n showActions,\n intersections,\n getNodeToolbarProps,\n toggleShowActions,\n handleDefaultAction,\n setNodeData,\n setNodeParent,\n ],\n );\n}\n"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"useNodeId.js","sources":["../../../../src/Flow/hooks/useNodeId.ts"],"sourcesContent":["import { useNodeId as useReactNodeId } from \"reactflow\";\n\n/** Retrieves the node id. INTERNAL USE ONLY */\nexport function useNodeId(id?: string) {\n const currentNodeId = useReactNodeId();\n return id ?? currentNodeId;\n}\n"],"names":["useReactNodeId"],"mappings":";AAGO,SAAS,UAAU,IAAa;AACrC,QAAM,gBAAgBA,YAAe;AACrC,SAAO,MAAM;AACf;"}
@@ -1 +0,0 @@
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,EAAA,IACD;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,gBAAA;AAAA,cACnB,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,aACX,CAAA;AAAA,cAAA,EACF,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"DashboardNode.styles.js","sources":["../../../../src/Flow/nodes/DashboardNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses as nodeClasses } from \"../Node/Node.styles\";\n\nconst baseClasses = Object.fromEntries(\n Object.keys(nodeClasses).map((key) => [key, {}]),\n) as Record<keyof typeof nodeClasses, {}>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDashboardNode\", {\n empty: {\n padding: theme.spacing(\"sm\", 0, 0, 0),\n },\n // Spread here to know if we are overriding classes from parents\n ...baseClasses,\n});\n"],"names":["nodeClasses"],"mappings":";;AAIA,MAAM,cAAc,OAAO;AAAA,EACzB,OAAO,KAAKA,eAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;AACjD;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,MAAM,GAAG,GAAG,CAAC;AAAA,EACtC;AAAA;AAAA,EAEA,GAAG;AACL,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"DefaultNavigation.js","sources":["../../../../src/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n HvBaseProps,\n HvTheme,\n HvTypographyVariants,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStep, HvStepProps } from \"./Step\";\nimport { getColor, stepSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n stepsWidth: number;\n navWidth: number;\n separatorValues: {\n minWidth: number;\n maxWidth: number;\n getColor: (state: HvStepProps[\"state\"], activeTheme: HvTheme) => any;\n height: number;\n };\n stepValues: {\n minSize: number;\n maxSize: number;\n StepComponent: React.ComponentType<HvStepProps>;\n };\n};\n\nexport interface HvDefaultNavigationProps\n extends Omit<HvBaseProps, \"children\"> {\n /** Number of steps to show on the component. */\n numSteps: number;\n /** Sets one of the standard sizes of the steps. */\n stepSize: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Returns a `ReactNode` of the titles container. */\n getTitles: (\n getTitleProps?: (params: {\n state: HvStepProps[\"state\"];\n rawTitle: string;\n number: number;\n }) => {\n variant?: HvTypographyVariants;\n title?: string;\n titleWidth?: number;\n titleDisabled?: boolean;\n },\n ) => ReactNode;\n /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n getDynamicValues: (stepsWidth: number) => {\n width: number;\n titleWidth: number;\n separatorWidth: number;\n };\n /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvDefaultNavigation = ({\n numSteps,\n stepSize,\n getTitles,\n getDynamicValues,\n className,\n children,\n ...other\n}: HvDefaultNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // step values\n const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n const StepComponent = HvStep;\n //\n\n const stepsWidth = maxSize + minSize * (numSteps - 1);\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n const minWidth = Math.max(\n titleWidth - (maxSize + minSize) * 0.5,\n separatorWidth,\n );\n //\n\n const Steps = children;\n\n const titles = getTitles(({ state }) => ({\n variant: \"label\",\n titleWidth,\n titleDisabled: state === \"Disabled\",\n }));\n\n return (\n <div {...other}>\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0,\n },\n stepValues: {\n minSize,\n maxSize,\n StepComponent,\n },\n }}\n />\n {titles}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAwDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AACxB,QAAA,EAAE,YAAY,IAAI,SAAS;AAGjC,QAAM,EAAE,WAAW,SAAS,QAAQ,QAAQ,IAAI,UAAU,QAAQ;AAClE,QAAM,gBAAgB;AAGhB,QAAA,aAAa,UAAU,WAAW,WAAW;AACnD,QAAM,EAAE,OAAO,YAAY,eAAe,IAAI,iBAAiB,UAAU;AAGzE,QAAM,WAAW,KAAK,IAAI,aAAa,SAAS,cAAc;AAC9D,QAAM,WAAW,KAAK;AAAA,IACpB,cAAc,UAAU,WAAW;AAAA,IACnC;AAAA,EACF;AAGA,QAAM,QAAQ;AAEd,QAAM,SAAS,UAAU,CAAC,EAAE,aAAa;AAAA,IACvC,SAAS;AAAA,IACT;AAAA,IACA,eAAe,UAAU;AAAA,EAAA,EACzB;AAGA,SAAA,qBAAC,OAAK,EAAA,GAAG,OACP,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,iBAAiB;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAQ,aAAa,eAAe,0BAA0B;AAAA,UAChE;AAAA,UACA,YAAY;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}
@@ -1 +0,0 @@
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 +0,0 @@
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 +0,0 @@
1
- {"version":3,"file":"utils.js","sources":["../../../../src/StepNavigation/DefaultNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { HvStepProps } from \"./Step\";\n\nexport const getColor = (state: HvStepProps[\"state\"]) =>\n ({\n Pending: theme.colors.warning ?? \"warning\",\n Failed: theme.colors.negative ?? \"negative\",\n Completed: theme.colors.positive ?? \"positive\",\n Current: theme.colors.secondary ?? \"secondary\",\n Disabled: theme.colors.secondary_60 ?? \"secondary_60\",\n Enabled: theme.colors.secondary ?? \"secondary\",\n })[state];\n\nexport const getSemantic = (state: HvStepProps[\"state\"]) =>\n ({\n Pending: \"warning\",\n Failed: \"negative\",\n Completed: \"positive\",\n Current: \"secondary\",\n Disabled: \"secondary_60\",\n Enabled: \"secondary\",\n })[state];\n\nconst EXTRA_SMALL = { container: 32, avatar: 24 };\nconst SMALL = { container: 40, avatar: 32 };\nconst MEDIUM = { container: 48, avatar: 40 };\nconst LARGE = { container: 60, avatar: 52 };\nconst EXTRA_LARGE = { container: 96, avatar: 88 };\n\nexport const stepSizes = {\n xs: EXTRA_SMALL,\n sm: SMALL,\n md: MEDIUM,\n lg: LARGE,\n xl: EXTRA_LARGE,\n};\n"],"names":[],"mappings":";AAIa,MAAA,WAAW,CAAC,WACtB;AAAA,EACC,SAAS,MAAM,OAAO,WAAW;AAAA,EACjC,QAAQ,MAAM,OAAO,YAAY;AAAA,EACjC,WAAW,MAAM,OAAO,YAAY;AAAA,EACpC,SAAS,MAAM,OAAO,aAAa;AAAA,EACnC,UAAU,MAAM,OAAO,gBAAgB;AAAA,EACvC,SAAS,MAAM,OAAO,aAAa;AACrC,GAAG,KAAK;AAEG,MAAA,cAAc,CAAC,WACzB;AAAA,EACC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX,GAAG,KAAK;AAEV,MAAM,cAAc,EAAE,WAAW,IAAI,QAAQ,GAAG;AAChD,MAAM,QAAQ,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC1C,MAAM,SAAS,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC3C,MAAM,QAAQ,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC1C,MAAM,cAAc,EAAE,WAAW,IAAI,QAAQ,GAAG;AAEzC,MAAM,YAAY;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;"}
@@ -1 +0,0 @@
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 +0,0 @@
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;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"SimpleNavigation.js","sources":["../../../../src/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n HvBaseProps,\n HvTheme,\n HvTypographyVariants,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvDot, HvDotProps } from \"./Dot\";\nimport { dotSizes, getColor } from \"./utils\";\n\nexport type ComponentChildProps = {\n stepsWidth: number;\n navWidth: number;\n separatorValues: {\n minWidth: number;\n maxWidth: number;\n getColor: (state: HvDotProps[\"state\"], activeTheme: HvTheme) => any;\n height: number;\n };\n stepValues: {\n minSize: number;\n maxSize: number;\n StepComponent: React.ComponentType<HvDotProps>;\n };\n};\n\nexport interface HvSimpleNavigationProps extends Omit<HvBaseProps, \"children\"> {\n /** Sets one of the standard sizes of the steps. */\n stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Number of steps to show on the component. */\n numSteps: number;\n /** Returns a `ReactNode` of the titles container. */\n getTitles: (\n getTitleProps?: (params: {\n state: HvDotProps[\"state\"];\n rawTitle: string;\n number: number;\n }) => {\n variant?: HvTypographyVariants;\n title?: string;\n titleWidth?: number;\n titleDisabled?: boolean;\n },\n ) => ReactNode;\n /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n getDynamicValues: (stepsWidth: number) => {\n width: number;\n titleWidth: number;\n separatorWidth: number;\n };\n /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvSimpleNavigation = ({\n numSteps,\n stepSize = \"sm\",\n getTitles,\n getDynamicValues,\n children,\n ...others\n}: HvSimpleNavigationProps) => {\n const { activeTheme } = useTheme();\n\n // step values\n const dotSize = dotSizes[stepSize];\n const StepComponent = HvDot;\n //\n\n const stepsWidth = (numSteps + 0.5) * dotSize;\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n //\n\n const Steps = children;\n\n const titles = getTitles(({ rawTitle, number }) => ({\n variant: \"label\",\n title: `${number}. ${rawTitle}`,\n titleWidth,\n }));\n\n return (\n <div {...others}>\n {titles}\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0,\n },\n stepValues: {\n minSize: dotSize,\n maxSize: 1.5 * dotSize,\n StepComponent,\n },\n }}\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAuDO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AACvB,QAAA,EAAE,YAAY,IAAI,SAAS;AAG3B,QAAA,UAAU,SAAS,QAAQ;AACjC,QAAM,gBAAgB;AAGhB,QAAA,cAAc,WAAW,OAAO;AACtC,QAAM,EAAE,OAAO,YAAY,eAAe,IAAI,iBAAiB,UAAU;AAGzE,QAAM,WAAW,KAAK,IAAI,aAAa,SAAS,cAAc;AAC9D,QAAM,WAAW,KAAK,IAAI,aAAa,UAAU,MAAM,cAAc;AAGrE,QAAM,QAAQ;AAEd,QAAM,SAAS,UAAU,CAAC,EAAE,UAAU,cAAc;AAAA,IAClD,SAAS;AAAA,IACT,OAAO,GAAG,MAAM,KAAK,QAAQ;AAAA,IAC7B;AAAA,EAAA,EACA;AAGA,SAAA,qBAAC,OAAK,EAAA,GAAG,QACN,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,iBAAiB;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAQ,aAAa,eAAe,yBAAyB;AAAA,UAC/D;AAAA,UACA,YAAY;AAAA,YACV,SAAS;AAAA,YACT,SAAS,MAAM;AAAA,YACf;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.js","sources":["../../../../src/StepNavigation/SimpleNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvStepProps } from \"../DefaultNavigation\";\n\nexport const dotSizes = {\n xs: 8,\n sm: 10,\n md: 12,\n lg: 14,\n xl: 16,\n};\n\nexport const getColor = (state: HvStepProps[\"state\"]) =>\n state === \"Disabled\" ? theme.colors.secondary_60 : theme.colors.secondary;\n"],"names":[],"mappings":";AAIO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEa,MAAA,WAAW,CAAC,UACvB,UAAU,aAAa,MAAM,OAAO,eAAe,MAAM,OAAO;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"StepNavigation.js","sources":["../../../src/StepNavigation/StepNavigation.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvBreakpoints,\n HvTooltip,\n HvTypography,\n useTheme,\n useWidth,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n HvDefaultNavigation,\n HvDefaultNavigationProps,\n HvStepProps,\n} from \"./DefaultNavigation\";\nimport {\n HvSimpleNavigation,\n HvSimpleNavigationProps,\n} from \"./SimpleNavigation\";\nimport { staticClasses, useClasses } from \"./StepNavigation.styles\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\n\nexport { staticClasses as stepNavigationClasses };\n\nexport type HvStepNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepNavigationProps extends HvBaseProps {\n /** Type of step navigation. */\n type?: \"Simple\" | \"Default\";\n /** Steps to show on the component. */\n steps: Array<\n Pick<\n HvStepProps,\n \"state\" | \"title\" | \"onClick\" | \"className\" | \"disabled\"\n > & {\n /** Class names to override styles on the separator component after the step. */\n separatorClassName?: string;\n /** Class names to override styles on the title component above the step. */\n titleClassName?: string;\n }\n >;\n /** Sets one of the standard sizes of the steps. @default useWidth() */\n stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * Width of the component element on each breakpoint screen resolution.\n * If undefined and the step component has no title, the width of the separator element will be 100px.\n * */\n width?: { [breakpoint in HvBreakpoints]?: number };\n /** Defines either show a title or only a tooltip on each step component. */\n showTitles?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n classes?: HvStepNavigationClasses;\n}\n\n/**\n * Navigation page with steps.\n *\n * You need to define the `steps` displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a `state` - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a `title` to be shown as a tooltip or a text above of the step. You can also defined `className`, `separatorClassName`, and `titleClassName` to override the default styles.\n *\n * If the step component has titles, each one will have 215px of width by default.\n */\nexport const HvStepNavigation = ({\n className,\n classes: classesProp,\n width,\n steps,\n stepSize,\n showTitles,\n type = \"Default\",\n \"aria-label\": ariaLabel,\n ...others\n}: HvStepNavigationProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { activeTheme } = useTheme();\n\n // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n const breakpoint = useWidth();\n // step configurations\n const stepSizeKey =\n stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"sm\" : \"md\");\n const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n const styledLi = (containerSize: any) =>\n styled(\"li\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledDiv = (containerSize: any) =>\n styled(\"div\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledSeparatorElement = (\n title: string,\n separatorClassName: string | undefined,\n separatorHeight: any,\n separatorWidth: any,\n backgroundColor: any,\n ) => {\n const widthValue =\n separatorWidth -\n 2 *\n Number(\n (activeTheme?.stepNavigation.separatorMargin || \"0px\").replace(\n \"px\",\n \"\",\n ),\n );\n\n return (\n <li\n aria-hidden\n key={`separator-${title}`}\n className={cx(\n css({\n height: separatorHeight,\n width: widthValue,\n backgroundColor,\n margin: `0 ${theme.stepNavigation.separatorMargin}`,\n }),\n classes.separator,\n )}\n >\n <div className={separatorClassName} />\n </li>\n );\n };\n\n const drawItems = ({\n separatorValues: { minWidth, maxWidth, getColor, height },\n stepValues: { minSize, maxSize, StepComponent },\n }: any) => {\n const items = steps.reduce<React.ReactNode[]>(\n (acc, { state, title, separatorClassName, ...props }, index): any => {\n const containerSize = state === \"Current\" ? maxSize : minSize;\n const StepContainer = styledLi(containerSize);\n const Step = styledDiv(Math.max(containerSize, 30));\n const stepProps = {\n size: stepSizeKey,\n state,\n title,\n number: index + 1,\n ...props,\n };\n const stepElement = (\n <StepContainer key={`step-${title}`} className={classes.li}>\n {hasTitles ? (\n <StepComponent\n key={`step-${title}`}\n aria-label={`${title}`}\n {...stepProps}\n />\n ) : (\n <HvTooltip\n placement=\"bottom\"\n title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n >\n <div>\n <Step className={classes.li}>\n <StepComponent aria-label={`${title}`} {...stepProps} />\n </Step>\n </div>\n </HvTooltip>\n )}\n </StepContainer>\n );\n if (index < steps.length - 1) {\n const separatorElement = styledSeparatorElement(\n title,\n separatorClassName,\n height,\n [steps[index + 1].state, state].includes(\"Current\")\n ? minWidth\n : maxWidth,\n getColor(\n steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state,\n theme,\n ),\n );\n\n acc.push(stepElement, separatorElement);\n return acc;\n }\n acc.push(stepElement);\n return acc;\n },\n [],\n );\n\n return <ol className={classes.ol}>{items}</ol>;\n };\n\n const getDynamicValues: HvDefaultNavigationProps[\"getDynamicValues\"] = (\n stepsWidth,\n ) => {\n const themeBreakpoints = activeTheme?.breakpoints.values || {};\n const maxWidth =\n width?.[breakpoint] ??\n Math.max(\n Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -\n TITLE_MARGIN,\n SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth,\n );\n const next = Object.keys(themeBreakpoints).find((_, index, self) =>\n index - 1 >= 0 ? self[index - 1] === breakpoint : false,\n );\n const navWidth = Math.min(\n maxWidth,\n next ? (themeBreakpoints as any)[next] : maxWidth,\n );\n const titleWidth =\n Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n const separatorWidth =\n Number(!hasTitles) *\n Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n return { width: navWidth, titleWidth, separatorWidth };\n };\n\n const getTitles: HvSimpleNavigationProps[\"getTitles\"] = (\n getTitleProps,\n ): React.ReactNode =>\n hasTitles ? (\n <div className={classes.titles}>\n {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n const {\n variant = \"label\",\n title = rawTitle,\n titleWidth = 0,\n titleDisabled = false,\n } = getTitleProps?.({\n state,\n rawTitle,\n number: index + 1,\n }) ?? {};\n\n return (\n <HvTypography\n variant={variant}\n className={cx(\n css({\n textAlign: \"center\",\n width: titleWidth - TITLE_MARGIN,\n marginRight: TITLE_MARGIN,\n }),\n titleClassName,\n )}\n disabled={titleDisabled}\n key={title}\n >\n {title}\n </HvTypography>\n );\n })}\n </div>\n ) : null;\n\n const StepNavigation = {\n Default: HvDefaultNavigation,\n Simple: HvSimpleNavigation,\n }[type];\n\n return (\n <StepNavigation\n numSteps={steps.length}\n stepSize={stepSizeKey}\n getTitles={getTitles}\n getDynamicValues={getDynamicValues}\n className={cx(classes.root, className)}\n {...others}\n >\n {({ stepsWidth, navWidth, ...itemsProps }) => (\n <nav\n style={{\n width: `${navWidth}px`,\n margin: 0,\n }}\n aria-label={ariaLabel}\n >\n {drawItems(itemsProps)}\n </nav>\n )}\n </StepNavigation>\n );\n};\n"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"StepNavigation.styles.js","sources":["../../../src/StepNavigation/StepNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvStepNavigation\", {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n },\n titles: {\n marginTop: 8,\n display: \"flex\",\n },\n ol: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n flexWrap: \"wrap\",\n padding: 0,\n listStyle: \"none\",\n },\n li: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n separator: {\n userSelect: \"none\",\n \"& > div\": {\n display: \"flex\",\n },\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,IAAI;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,IAAI;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,WAAW;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.js","sources":["../../../src/StepNavigation/utils.ts"],"sourcesContent":["const TITLE_MARGIN = 20;\nconst TITLE_WIDTH = 215;\nconst STEP_MARGIN = 20;\nconst SEPARATOR_WIDTH = 100;\n\nexport { STEP_MARGIN, TITLE_MARGIN, TITLE_WIDTH, SEPARATOR_WIDTH };\n"],"names":[],"mappings":"AAAA,MAAM,eAAe;AACrB,MAAM,cAAc;AAEpB,MAAM,kBAAkB;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Wizard.js","sources":["../../../src/Wizard/Wizard.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialogProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepNavigationProps } from \"../StepNavigation\";\nimport { staticClasses, useClasses } from \"./Wizard.styles\";\nimport { HvWizardActions, HvWizardActionsProps } from \"./WizardActions\";\nimport { HvWizardContainer } from \"./WizardContainer\";\nimport { HvWizardContent } from \"./WizardContent\";\nimport { HvWizardContext, HvWizardTabs } from \"./WizardContext\";\nimport { HvWizardTitle, HvWizardTitleProps } from \"./WizardTitle\";\n\nexport { staticClasses as wizardClasses };\n\nexport type HvWizardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardProps\n extends HvBaseProps,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n onClose: (\n event: React.MouseEvent<HTMLButtonElement> | {},\n reason?: \"escapeKeyDown\" | \"backdropClick\",\n ) => void;\n /** Function executed on submit. */\n handleSubmit: (context: HvWizardTabs) => void;\n /** Title for the wizard. */\n title?: string;\n /** An object containing all the labels for the wizard. */\n labels?: HvWizardActionsProps[\"labels\"] & HvWizardTitleProps[\"labels\"];\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** Enables the skip button. */\n skippable?: boolean;\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardClasses;\n}\n\nexport const HvWizard = ({\n className,\n children,\n onClose,\n handleSubmit,\n title,\n open,\n skippable = true,\n loading = false,\n hasSummary = false,\n summaryContent,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n summary: \"Summary\",\n },\n fixedHeight = false,\n customStep,\n classes: classesProp,\n ...others\n}: HvWizardProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const [context, setContext] = useState<HvWizardTabs>({});\n const [summary, setSummary] = useState(false);\n const [tab, setTab] = useState(0);\n\n const handleClose = useCallback(\n (\n evt: React.MouseEvent<HTMLButtonElement> | {},\n reason?: \"backdropClick\" | \"escapeKeyDown\",\n ) => {\n if (reason !== \"backdropClick\") {\n onClose?.(evt, reason);\n }\n },\n [onClose],\n );\n\n // on unmount\n useEffect(() => {\n return () => {\n if (!open) {\n setContext((c) =>\n Object.entries(c).reduce<HvWizardTabs>((acc, [key, child]) => {\n acc[+key] = {\n ...child,\n touched: false,\n };\n return acc;\n }, {}),\n );\n setTab(0);\n }\n };\n }, [open]);\n\n const value = useMemo(\n () => ({ context, setContext, summary, setSummary, tab, setTab }),\n [context, setContext, summary, setSummary, tab, setTab],\n );\n\n return (\n <HvWizardContext.Provider value={value}>\n <HvWizardContainer\n className={cx(classes.root, className)}\n handleClose={handleClose}\n open={open}\n {...others}\n >\n <HvWizardTitle\n title={title}\n hasSummary={hasSummary}\n labels={labels}\n customStep={customStep}\n />\n <HvWizardContent\n loading={loading}\n fixedHeight={fixedHeight}\n summaryContent={summaryContent}\n >\n {children}\n </HvWizardContent>\n <HvWizardActions\n loading={loading}\n skippable={skippable}\n labels={labels}\n handleClose={handleClose}\n handleSubmit={handleSubmit}\n />\n </HvWizardContainer>\n </HvWizardContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAmDO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,MAAqB;AACnB,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAA,CAAE;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,QAAM,cAAc;AAAA,IAClB,CACE,KACA,WACG;AACH,UAAI,WAAW,iBAAiB;AAC9B,kBAAU,KAAK,MAAM;AAAA,MAAA;AAAA,IAEzB;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAGA,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,CAAC,MAAM;AACT;AAAA,UAAW,CAAC,MACV,OAAO,QAAQ,CAAC,EAAE,OAAqB,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AACxD,gBAAA,CAAC,GAAG,IAAI;AAAA,cACV,GAAG;AAAA,cACH,SAAS;AAAA,YACX;AACO,mBAAA;AAAA,UAAA,GACN,CAAE,CAAA;AAAA,QACP;AACA,eAAO,CAAC;AAAA,MAAA;AAAA,IAEZ;AAAA,EAAA,GACC,CAAC,IAAI,CAAC;AAET,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,SAAS,YAAY,SAAS,YAAY,KAAK;IACxD,CAAC,SAAS,YAAY,SAAS,YAAY,KAAK,MAAM;AAAA,EACxD;AAEA,SACG,oBAAA,gBAAgB,UAAhB,EAAyB,OACxB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA,UAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Wizard.styles.js","sources":["../../../src/Wizard/Wizard.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizard\", {\n root: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM,CAAA;AACR,CAAC;"}
@@ -1 +0,0 @@
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: (event: React.MouseEvent<HTMLButtonElement>) => 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<HvWizardTabs>((acc, [key, child]) => {\n acc[+key] = {\n ...child,\n valid: child?.valid !== false,\n };\n return acc;\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":";;;;;;;AA8CO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,SAAS,YAAY,KAAK,OAAO,IAAI,WAAW,eAAe;AACvE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACR,UAAA,iBAAiB,OAAO,QAAQ,OAAO;AAC7C,QAAI,eAAe,QAAQ;AACzB,eAAS,eAAe,MAAM;AAE9B,YAAM,cAAc,OAAO,QAAQ,OAAO,EAAE;AAAA,QAC1C,CAAC,CAAG,EAAA,KAAK,MAAM,OAAO;AAAA,MACxB;AACA,UAAI,gBAAgB,WAAW;AAC7B,qBAAa,WAAW;AAAA,MAAA;AAAA,IAC1B;AAAA,KAED,CAAC,SAAS,WAAW,cAAc,QAAQ,CAAC;AAE/C,QAAM,WAAW,QAAQ;AACzB,QAAM,aAAa,OAAO;AAEpB,QAAA,aAAa,YAAY,MAAM;AACnC;AAAA,MAAW,CAAC,MACV,OAAO,QAAQ,CAAC,EAAE,OAAqB,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AACxD,YAAA,CAAC,GAAG,IAAI;AAAA,UACV,GAAG;AAAA,UACH,OAAO,OAAO,UAAU;AAAA,QAC1B;AACO,eAAA;AAAA,MAAA,GACN,CAAE,CAAA;AAAA,IACP;AACA,WAAO,QAAQ;AAAA,EACd,GAAA,CAAC,QAAQ,UAAU,UAAU,CAAC;AAEjC,QAAM,uBAAuB;AAAA,IAC3B,MAAM,aAAa,OAAO;AAAA,IAC1B,CAAC,cAAc,OAAO;AAAA,EACxB;AAEM,QAAA,eAAe,QAAQ,MAAM;AACjC,QAAI,QAAgB,QAAA;AAEpB,WAAO,CAAC,aAAa,CAAC,UAAU,GAAG,GAAG;AAAA,KACrC,CAAC,SAAS,SAAS,WAAW,GAAG,CAAC;AAErC,SACG,qBAAA,iBAAA,EAAgB,WAAW,QAAQ,kBAClC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAW,QAAQ;AAAA,QAElB,iBAAO,UAAU;AAAA,MAAA;AAAA,IACpB;AAAA,IACC,aACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,UAAU;AAAA,QACV,WAAW,QAAQ;AAAA,QACnB,SAAS;AAAA,QAER,iBAAO,QAAQ;AAAA,MAAA;AAAA,IAClB;AAAA,IAEF,oBAAC,OAAI,EAAA,eAAW,MAAC,WAAW,IAAI,EAAE,MAAM,EAAG,CAAA,GAAG,UAE9C,IAAA,CAAA;AAAA,IACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,kBACtB,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAW,QAAQ;AAAA,UACnB,UAAU,OAAO;AAAA,UACjB,SAAS,MAAM;AACb,gBAAI,sBAAsB;AACH,mCAAA;AAAA,YAAA,OAChB;AACE,qBAAA,CAAC,MAAM,IAAI,CAAC;AAAA,YAAA;AAAA,UAEvB;AAAA,UACA,+BAAY,WAAU,EAAA;AAAA,UAErB,iBAAO,YAAY;AAAA,QAAA;AAAA,MACtB;AAAA,MACC,aACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAW,QAAQ;AAAA,UACnB,UAAU,WAAW,CAAC;AAAA,UACtB,SAAS;AAAA,UAER,iBAAO,UAAU;AAAA,QAAA;AAAA,MAAA,IAGpB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAW,GAAG,QAAQ,aAAa,QAAQ,aAAa;AAAA,UACxD,SAAS,MAAM;AACb,gBAAI,kBAAkB;AACH,+BAAA;AAAA,YAAA,OACZ;AACE,qBAAA,CAAC,MAAM,IAAI,CAAC;AAAA,YAAA;AAAA,UAEvB;AAAA,UACA,UAAU;AAAA,UACV,6BAAU,UAAS,EAAA;AAAA,UAElB,iBAAO,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAClB,EAEJ,CAAA;AAAA,EAAA,GACF;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"WizardActions.styles.js","sources":["../../../../src/Wizard/WizardActions/WizardActions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardActions\", {\n actionsContainer: {},\n buttonWidth: {\n width: 120,\n \"& span\": {\n whiteSpace: \"normal\",\n lineHeight: theme.lineHeights.sm,\n },\n },\n buttonsContainer: {\n display: \"flex\",\n alignItems: \"center\",\n gap: theme.space.xs,\n },\n buttonSpacing: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,kBAAkB,CAAC;AAAA,EACnB,aAAa;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,MACR,YAAY;AAAA,MACZ,YAAY,MAAM,YAAY;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,eAAe,CAAA;AACjB,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"WizardContainer.js","sources":["../../../../src/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import {\n ExtractNames,\n HvBaseProps,\n HvDialog,\n HvDialogProps,\n useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./WizardContainer.styles\";\n\nexport { staticClasses as wizardContainerClasses };\n\nexport type HvWizardContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContainerProps\n extends Omit<HvBaseProps, \"onClose\">,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n handleClose: HvDialogProps[\"onClose\"];\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = (props: HvWizardContainerProps) => {\n const {\n classes: classesProp,\n children,\n handleClose,\n ...others\n } = useDefaultProps(\"HvWizardContainer\", props);\n const { classes } = useClasses(classesProp);\n\n return (\n <HvDialog\n classes={{\n root: classes.root,\n closeButton: classes.closeButton,\n paper: classes.paper,\n }}\n onClose={handleClose}\n fullWidth\n maxWidth=\"lg\"\n {...others}\n >\n {children}\n </HvDialog>\n );\n};\n"],"names":[],"mappings":";;;;AAyBa,MAAA,oBAAoB,CAAC,UAAkC;AAC5D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAC9C,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,aAAa,QAAQ;AAAA,QACrB,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,MACT,WAAS;AAAA,MACT,UAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"WizardContainer.styles.js","sources":["../../../../src/Wizard/WizardContainer/WizardContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvWizardContainer\",\n {\n root: {},\n paper: {},\n closeButton: {\n display: \"none\",\n },\n },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM,CAAC;AAAA,IACP,OAAO,CAAC;AAAA,IACR,aAAa;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"WizardContent.js","sources":["../../../../src/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useElementSize } from \"usehooks-ts\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialogContent,\n HvLoadingContainer,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardContent.styles\";\n\nexport { staticClasses as wizardContentClasses };\n\nexport type HvWizardContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContentProps extends HvBaseProps {\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n classes: classesProp,\n fixedHeight = false,\n loading = false,\n children,\n summaryContent,\n}: HvWizardContentProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n const arrayChildren = Children.toArray(children) as ChildElement[];\n\n const summaryRef = useRef<HTMLElement | undefined>(undefined);\n const resizedRef = useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = useState(0);\n const [summaryWidth, setSummaryWidth] = useState(0);\n const [summaryLeft, setSummaryLeft] = useState(0);\n\n const updateSummaryMeasures = useCallback(({ height = 0, width = 0 }) => {\n const drawerWidth = width * DRAWER_PERCENTAGE;\n setSummaryHeight(height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(width - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height,\n width,\n };\n }, []);\n\n useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n useEffect(() => {\n const initialContext = arrayChildren.reduce<HvWizardTabs>(\n (acc, child, index) => {\n const invalid =\n \"mustValidate\" in child.props && child.props.mustValidate === true\n ? false\n : null;\n const valid = invalid ?? (index === 0 || null);\n acc[index] = { ...child.props, form: {}, valid, touched: index === 0 };\n return acc;\n },\n {},\n );\n\n setContext(initialContext);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n setContext((oldContext) =>\n Object.entries(oldContext).reduce<HvWizardTabs>(\n (acc, [key, childState]) => {\n acc[Number(key)] =\n +key <= tab\n ? {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n }\n : childState;\n return acc;\n },\n {},\n ),\n );\n }\n }, [tab, context, setContext]);\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <div\n className={classes.summaryRef}\n ref={(el) => {\n containerRef(el);\n if (el) {\n summaryRef.current = el;\n }\n }}\n >\n {summary !== null && (\n <div className={classes.summarySticky}>\n <div\n className={classes.summaryContainer}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvLoadingContainer hidden={!loading}>\n <HvDialogContent\n className={cx(classes.contentContainer, {\n [classes.fixedHeight]: fixedHeight,\n })}\n indentContent\n >\n {Children.map(arrayChildren, (child, index) => {\n if (index !== tab) return null;\n return cloneElement(child as React.ReactElement, { tab });\n })}\n </HvDialogContent>\n </HvLoadingContainer>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"WizardContent.styles.js","sources":["../../../../src/Wizard/WizardContent/WizardContent.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardContent\", {\n contentContainer: {\n position: \"relative\",\n padding: 20,\n marginLeft: 0,\n minHeight: 400,\n overflowX: \"hidden\",\n },\n fixedHeight: {\n minHeight: \"calc(100vh - 387px)\",\n },\n summaryRef: {\n flex: 1,\n overflowY: \"auto\",\n overflowX: \"hidden\",\n },\n summarySticky: {\n position: \"sticky\",\n top: 0,\n zIndex: 1,\n },\n summaryContainer: {\n position: \"absolute\",\n top: 0,\n minWidth: 280,\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n transition: \"transform 0.3s\",\n transitionTimingFunction: \"ease-in-out\",\n overflowY: \"scroll\",\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,eAAe;AAAA,IACb,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU;AAAA,IACV,WAAW,MAAM,OAAO;AAAA,IACxB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY;AAAA,IACZ,0BAA0B;AAAA,IAC1B,WAAW;AAAA,EAAA;AAEf,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"WizardContext.js","sources":["../../../../src/Wizard/WizardContext/WizardContext.tsx"],"sourcesContent":["import { createContext, Dispatch, SetStateAction } from \"react\";\n\nexport type HvWizardTab = {\n name?: string;\n valid?: boolean | null;\n mustValidate?: boolean;\n touched?: boolean;\n form?: any;\n children?: React.ReactNode;\n disabled?: boolean;\n loading?: boolean;\n [other: string]: any;\n};\n\nexport type HvWizardTabs = {\n [tab in number]?: HvWizardTab;\n};\n\ntype HvWizardContextProp = {\n context: HvWizardTabs;\n setContext: React.Dispatch<React.SetStateAction<HvWizardTabs>>;\n summary: boolean;\n setSummary: React.Dispatch<React.SetStateAction<boolean>>;\n tab: number;\n setTab: Dispatch<SetStateAction<number>>;\n};\n\nconst HvWizardContext = createContext<HvWizardContextProp>({\n context: {},\n setContext: () => {},\n summary: false,\n setSummary: () => {},\n tab: 0,\n setTab: () => {},\n});\n\nexport default HvWizardContext;\n"],"names":[],"mappings":";AA2BA,MAAM,kBAAkB,cAAmC;AAAA,EACzD,SAAS,CAAC;AAAA,EACV,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,SAAS;AAAA,EACT,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,KAAK;AAAA,EACL,QAAQ,MAAM;AAAA,EAAA;AAChB,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"WizardTitle.js","sources":["../../../../src/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvDialogTitle,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext, HvWizardTab } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardTitle.styles\";\n\nexport { staticClasses as wizardTitleClasses };\n\nexport type HvWizardTitleClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n /** Title for the wizard. */\n title?: string;\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** An object containing all the labels for the wizard header. */\n labels?: {\n /** Summary button label. */\n summary?: string;\n };\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (\n state: HvWizardTab | undefined,\n currentTab: number,\n index: number,\n) => {\n if (state?.loading) return \"Pending\";\n if (index === currentTab) return \"Current\";\n if (state?.valid) return \"Completed\";\n if (state?.disabled) return \"Disabled\";\n if (state?.valid === null) return \"Enabled\";\n if (state?.touched && state?.valid === false) return \"Failed\";\n return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n classes: classesProp,\n customStep = {},\n}: HvWizardTitleProps) => {\n const { context, setSummary, tab, setTab } = useContext(HvWizardContext);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n useEffect(() => {\n return () => {\n setSummary(false);\n };\n }, [setSummary]);\n\n const toggleSummary = () => {\n setSummary((prevValue) => !prevValue);\n };\n\n useEffect(() => {\n const contextArray = Object.entries(context);\n\n if (!contextArray.length) return;\n\n const updatedSteps = contextArray.map<HvStepProps>(\n ([, childState], index) => ({\n title: childState?.[\"data-title\"] ?? childState?.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => setTab(index),\n }),\n );\n\n setSteps(updatedSteps);\n }, [context, tab, setTab]);\n\n return (\n <HvDialogTitle\n className={cx(\n classes.root,\n classes.headerContainer,\n classes.messageContainer,\n classes.titleContainer,\n )}\n >\n {title && (\n <HvTypography variant=\"title3\" component=\"div\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={classes.stepContainer}\n steps={steps}\n type=\"Default\"\n stepSize=\"xs\"\n width={{\n xs: 200,\n sm: 350,\n md: 600,\n lg: 800,\n xl: 1000,\n }}\n {...customStep}\n />\n )}\n {hasSummary && (\n <HvButton\n variant=\"secondarySubtle\"\n className={cx(\n classes.summaryButton,\n classes.buttonWidth,\n classes.rootSummaryButton,\n )}\n onClick={toggleSummary}\n startIcon={<Report />}\n >\n {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvDialogTitle>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAmCA,MAAM,iBAAiB,CACrB,OACA,YACA,UACG;AACC,MAAA,OAAO,QAAgB,QAAA;AACvB,MAAA,UAAU,WAAmB,QAAA;AAC7B,MAAA,OAAO,MAAc,QAAA;AACrB,MAAA,OAAO,SAAiB,QAAA;AACxB,MAAA,OAAO,UAAU,KAAa,QAAA;AAClC,MAAI,OAAO,WAAW,OAAO,UAAU,MAAc,QAAA;AAC9C,SAAA;AACT;AAEO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,aAAa;AAAA,EACb,SAAS,CAAC;AAAA,EACV,SAAS;AAAA,EACT,aAAa,CAAA;AACf,MAA0B;AACxB,QAAM,EAAE,SAAS,YAAY,KAAK,OAAO,IAAI,WAAW,eAAe;AAEvE,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,CAAA,CAAE;AAEpD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,iBAAW,KAAK;AAAA,IAClB;AAAA,EAAA,GACC,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAgB,MAAM;AACf,eAAA,CAAC,cAAc,CAAC,SAAS;AAAA,EACtC;AAEA,YAAU,MAAM;AACR,UAAA,eAAe,OAAO,QAAQ,OAAO;AAEvC,QAAA,CAAC,aAAa,OAAQ;AAE1B,UAAM,eAAe,aAAa;AAAA,MAChC,CAAC,CAAG,EAAA,UAAU,GAAG,WAAW;AAAA,QAC1B,OAAO,aAAa,YAAY,KAAK,YAAY,QAAQ,GAAG,QAAQ,CAAC;AAAA,QACrE,OAAO,eAAe,YAAY,KAAK,KAAK;AAAA,QAC5C,SAAS,MAAM,OAAO,KAAK;AAAA,MAC7B;AAAA,IACF;AAEA,aAAS,YAAY;AAAA,EACpB,GAAA,CAAC,SAAS,KAAK,MAAM,CAAC;AAGvB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MAEC,UAAA;AAAA,QAAA,6BACE,cAAa,EAAA,SAAQ,UAAS,WAAU,OACtC,UACH,OAAA;AAAA,QAED,CAAC,CAAC,MAAM,UACP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB;AAAA,YACA,MAAK;AAAA,YACL,UAAS;AAAA,YACT,OAAO;AAAA,cACL,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,YACN;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAED,cACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAW;AAAA,cACT,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR,QAAQ;AAAA,YACV;AAAA,YACA,SAAS;AAAA,YACT,+BAAY,QAAO,EAAA;AAAA,YAElB,UAAA,GAAG,OAAO,WAAW,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACjC;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"WizardTitle.styles.js","sources":["../../../../src/Wizard/WizardTitle/WizardTitle.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardTitle\", {\n root: {\n backgroundColor: theme.colors.atmo2,\n justifyContent: \"space-between\",\n paddingRight: theme.space.sm,\n },\n /** @deprecated use `classes.root` */\n headerContainer: {},\n /** @deprecated use `classes.root` */\n messageContainer: {},\n /** @deprecated use `classes.root` */\n titleContainer: {},\n summaryButton: {\n width: 120,\n paddingRight: 18,\n },\n /** @deprecated use `classes.summaryButton` */\n buttonWidth: {},\n /** @deprecated use `classes.summaryButton` */\n rootSummaryButton: {},\n stepContainer: {\n margin: \"auto\",\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,gBAAgB;AAAA,IAChB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA;AAAA,EAEA,iBAAiB,CAAC;AAAA;AAAA,EAElB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,gBAAgB,CAAC;AAAA,EACjB,eAAe;AAAA,IACb,OAAO;AAAA,IACP,cAAc;AAAA,EAChB;AAAA;AAAA,EAEA,aAAa,CAAC;AAAA;AAAA,EAEd,mBAAmB,CAAC;AAAA,EACpB,eAAe;AAAA,IACb,QAAQ;AAAA,EAAA;AAEZ,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}