@hitachivantara/uikit-react-lab 5.11.1 → 5.12.0

package/dist/esm/components/Flow/Node/Node.js.map

@@ -1 +1 @@
-{"version":3,"file":"Node.js","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\n\nimport {\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n  useStore,\n} from \"reactflow\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvBaseProps,\n  HvButton,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useFlowContext } from \"../hooks\";\nimport { HvFlowDefaultAction, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowNodeProps extends Omit<HvBaseProps, \"id\">, NodeProps {\n  /** Node description */\n  description: string;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** Node actions */\n  actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n  /** Node action callback */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** Node maximum number of actions visible */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\n}\n\nconst isInputConnected = (id, type, idx, edges) => {\n  if (type === \"target\") {\n    return edges.some(\n      (e) => e.target === id && e.targetHandle === idx.toString()\n    );\n  }\n  if (type === \"source\") {\n    return edges.some(\n      (e) => e.source === id && e.sourceHandle === idx.toString()\n    );\n  }\n};\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  description,\n  expanded = false,\n  params,\n  actions,\n  actionCallback,\n  maxVisibleActions = 1,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowNodeProps) => {\n  const [showParams, setShowParams] = useState(expanded);\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n  const edges = useStore((s) => s.edges);\n  const nodes = useStore((s) => s.getNodes());\n\n  const node = nodes.find((n) => n.id === id);\n\n  const groupId = nodeTypes?.[type].meta?.groupId;\n  const title = nodeTypes?.[type].meta?.label;\n  const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;\n\n  const inputs = nodeTypes?.[type]?.meta?.inputs;\n  const outputs = nodeTypes?.[type]?.meta?.outputs;\n  const icon = groupId && nodeGroups && nodeGroups[groupId].icon;\n  const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;\n  const color = getColor(colorProp);\n\n  useEffect(() => {\n    const newNodes = nodes.map((n) => {\n      if (n.id === id) {\n        if (Object.keys(n.data).length === 0) {\n          params?.forEach((param) => {\n            n.data[param.id] = param.value;\n          });\n        }\n      }\n      return n;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowDefaultAction) => {\n      if (!node) return;\n\n      switch (action) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: `${reactFlowInstance.getNodes().length + 1}`,\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  const hasParams = !!(params && params.length > 0);\n\n  if (!node) return null;\n\n  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n    isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\n  return (\n    <div\n      className={cx(\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {defaultActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action.id)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div className={classes.groupContainer}>\n          {icon}\n          <HvTypography variant=\"title4\" className={classes.group}>\n            {groupLabel}\n          </HvTypography>\n        </div>\n        <div style={{ display: \"flex\" }}>\n          <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n            <div>\n              <Info />\n            </div>\n          </HvTooltip>\n          <HvButton\n            icon\n            disabled={!hasParams}\n            onClick={() => setShowParams((p) => !p)}\n          >\n            {showParams ? <Up /> : <Down />}\n          </HvButton>\n        </div>\n      </div>\n      <div className={classes.titleContainer}>\n        <div>\n          <HvTypography>{title}</HvTypography>\n        </div>\n        <div className={classes.actions}>\n          {actions?.length && actions?.length > 0 && (\n            <>\n              {actsVisible?.map((action) => (\n                <HvTooltip\n                  key={action.id}\n                  title={<HvTypography>{action.label}</HvTypography>}\n                >\n                  <div>\n                    <HvButton\n                      icon\n                      onClick={(event) => {\n                        actionCallback?.(event, node.id, action);\n                      }}\n                      aria-label={action.label}\n                    >\n                      {renderedIcon(action.icon)}\n                    </HvButton>\n                  </div>\n                </HvTooltip>\n              ))}\n\n              {actsDropdown && actsDropdown.length > 0 && (\n                <HvDropDownMenu\n                  keepOpened={false}\n                  dataList={actsDropdown?.map((action) => ({\n                    id: action.id,\n                    label: action.label,\n                  }))}\n                  onClick={(event, action) => {\n                    actionCallback?.(event, node.id, action as HvActionGeneric);\n                  }}\n                />\n              )}\n            </>\n          )}\n        </div>\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer nodeId={id} params={params} data={node?.data} />\n        </div>\n      )}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => (\n              <div className={classes.inputContainer} key={idx}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={`${idx}`}\n                  position={Position.Left}\n                  style={{\n                    top: \"auto\",\n                    bottom:\n                      (outputs?.length ? 80 : 18) +\n                      (outputs?.length || 0) * 29 +\n                      29 * idx,\n                  }}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => (\n              <div className={classes.outputContainer} key={idx}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={`${idx}`}\n                  position={Position.Right}\n                  style={{\n                    bottom: -10 + 29 * (outputs.length - idx),\n                    top: \"auto\",\n                  }}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","HvFlowNode","description","expanded","params","actions","actionCallback","maxVisibleActions","classes","classesProp","className","children","showParams","setShowParams","useState","showActions","setShowActions","reactFlowInstance","useReactFlow","cx","css","useClasses","nodeGroups","nodeTypes","defaultActions","useFlowContext","useStore","s","nodes","getNodes","node","find","n","groupId","meta","title","label","groupLabel","inputs","outputs","icon","colorProp","color","getColor","useEffect","newNodes","map","Object","keys","data","length","forEach","param","value","setNodes","handleDefaultAction","useCallback","action","deleteElements","addNodes","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","hasParams","actsVisible","slice","actsDropdown","renderedIcon","actionIcon","isValidElement","border","root","backgroundColor","headerContainer","groupContainer","group","display","p","titleContainer","event","contentContainer","paramsContainer","inputsTitleContainer","inputsContainer","input","inputContainer","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}
+{"version":3,"file":"Node.js","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\n\nimport {\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n  useStore,\n} from \"reactflow\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvBaseProps,\n  HvButton,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useFlowContext } from \"../hooks\";\nimport { HvFlowDefaultAction, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowNodeProps extends Omit<HvBaseProps, \"id\">, NodeProps {\n  /** Node description */\n  description: string;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** Node actions */\n  actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n  /** Node action callback */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** Node maximum number of actions visible */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\n}\n\nconst isInputConnected = (id, type, idx, edges) => {\n  if (type === \"target\") {\n    return edges.some(\n      (e) => e.target === id && e.targetHandle === idx.toString()\n    );\n  }\n  if (type === \"source\") {\n    return edges.some(\n      (e) => e.source === id && e.sourceHandle === idx.toString()\n    );\n  }\n};\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  description,\n  expanded = false,\n  params,\n  actions,\n  actionCallback,\n  maxVisibleActions = 1,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowNodeProps) => {\n  const [showParams, setShowParams] = useState(expanded);\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n  const edges = useStore((s) => s.edges);\n  const nodes = useStore((s) => s.getNodes());\n\n  const node = nodes.find((n) => n.id === id);\n\n  const groupId = nodeTypes?.[type].meta?.groupId;\n  const title = nodeTypes?.[type].meta?.label;\n  const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;\n\n  const inputs = nodeTypes?.[type]?.meta?.inputs;\n  const outputs = nodeTypes?.[type]?.meta?.outputs;\n  const icon = groupId && nodeGroups && nodeGroups[groupId].icon;\n  const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;\n  const color = getColor(colorProp);\n\n  useEffect(() => {\n    const newNodes = nodes.map((n) => {\n      if (n.id === id) {\n        if (Object.keys(n.data).length === 0) {\n          params?.forEach((param) => {\n            n.data[param.id] = param.value;\n          });\n        }\n      }\n      return n;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowDefaultAction) => {\n      if (!node) return;\n\n      switch (action) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: `${reactFlowInstance.getNodes().length + 1}`,\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  const hasParams = !!(params && params.length > 0);\n\n  if (!node) return null;\n\n  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n    isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\n  return (\n    <div\n      className={cx(\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {defaultActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action.id)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div className={classes.groupContainer}>\n          {icon}\n          <HvTypography variant=\"title4\" className={classes.group}>\n            {groupLabel}\n          </HvTypography>\n        </div>\n        <div style={{ display: \"flex\" }}>\n          <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n            <div>\n              <Info />\n            </div>\n          </HvTooltip>\n          <HvButton\n            icon\n            disabled={!hasParams}\n            onClick={() => setShowParams((p) => !p)}\n          >\n            {showParams ? <Up /> : <Down />}\n          </HvButton>\n        </div>\n      </div>\n      <div className={classes.titleContainer}>\n        <div>\n          <HvTypography>{title}</HvTypography>\n        </div>\n        <div className={classes.actions}>\n          {actions?.length && actions?.length > 0 && (\n            <>\n              {actsVisible?.map((action) => (\n                <HvTooltip\n                  key={action.id}\n                  title={<HvTypography>{action.label}</HvTypography>}\n                >\n                  <div>\n                    <HvButton\n                      icon\n                      onClick={(event) => {\n                        actionCallback?.(event, node.id, action);\n                      }}\n                      aria-label={action.label}\n                    >\n                      {renderedIcon(action.icon)}\n                    </HvButton>\n                  </div>\n                </HvTooltip>\n              ))}\n\n              {actsDropdown && actsDropdown.length > 0 && (\n                <HvDropDownMenu\n                  keepOpened={false}\n                  dataList={actsDropdown?.map((action) => ({\n                    id: action.id,\n                    label: action.label,\n                  }))}\n                  onClick={(event, action) => {\n                    actionCallback?.(event, node.id, action as HvActionGeneric);\n                  }}\n                />\n              )}\n            </>\n          )}\n        </div>\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer nodeId={id} params={params} data={node?.data} />\n        </div>\n      )}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => (\n              <div className={classes.inputContainer} key={idx}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={`${idx}`}\n                  position={Position.Left}\n                  style={{\n                    top: \"auto\",\n                    bottom:\n                      (outputs?.length ? 80 : 18) +\n                      (outputs?.length || 0) * 29 +\n                      29 * idx,\n                  }}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => (\n              <div className={classes.outputContainer} key={idx}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={`${idx}`}\n                  position={Position.Right}\n                  style={{\n                    bottom: -10 + 29 * (outputs.length - idx),\n                    top: \"auto\",\n                  }}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","HvFlowNode","description","expanded","params","actions","actionCallback","maxVisibleActions","classes","classesProp","className","children","showParams","setShowParams","useState","showActions","setShowActions","reactFlowInstance","useReactFlow","cx","css","useClasses","nodeGroups","nodeTypes","defaultActions","useFlowContext","useStore","s","nodes","getNodes","node","find","n","groupId","meta","title","label","groupLabel","inputs","outputs","icon","colorProp","color","getColor","useEffect","newNodes","map","Object","keys","data","length","forEach","param","value","setNodes","handleDefaultAction","useCallback","action","deleteElements","addNodes","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","hasParams","actsVisible","slice","actsDropdown","renderedIcon","actionIcon","isValidElement","border","root","backgroundColor","headerContainer","groupContainer","group","display","p","titleContainer","event","contentContainer","paramsContainer","inputsTitleContainer","inputsContainer","input","inputContainer","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}

package/dist/esm/components/Flow/Node/Node.styles.js

@@ -14,7 +14,9 @@ const {
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center"
+    alignItems: "center",
+    borderTopLeftRadius: theme.radii.round,
+    borderTopRightRadius: theme.radii.round
   },
   groupContainer: {
     display: "flex",

package/dist/esm/components/Flow/Node/Node.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Node.styles.js","sources":["../../../../../src/components/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n  root: {\n    borderRadius: theme.radii.round,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    minWidth: \"250px\",\n  },\n  headerContainer: {\n    padding: theme.spacing(0.5, 1),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  groupContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  group: {\n    color: theme.colors.base_dark,\n  },\n  titleContainer: {\n    minHeight: 48,\n    padding: theme.spacing(\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.sm\n    ),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\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.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\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.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  contentContainer: {\n    padding: theme.space.sm,\n  },\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  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  inputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  outputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  mandatory: {\n    width: 10,\n    height: 10,\n    margin: theme.spacing(0, theme.space.xs),\n    borderRadius: theme.radii.circle,\n    backgroundColor: theme.colors.negative_20,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","borderRadius","theme","radii","round","backgroundColor","colors","atmo1","boxShadow","shadow","minWidth","headerContainer","padding","spacing","display","flexDirection","justifyContent","alignItems","groupContainer","group","color","base_dark","titleContainer","minHeight","space","xs","sm","actions","inputsTitleContainer","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","contentContainer","inputsContainer","gap","outputsContainer","paramsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":"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"}
+{"version":3,"file":"Node.styles.js","sources":["../../../../../src/components/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n  root: {\n    borderRadius: theme.radii.round,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    minWidth: \"250px\",\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: theme.radii.round,\n    borderTopRightRadius: theme.radii.round,\n  },\n  groupContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  group: {\n    color: theme.colors.base_dark,\n  },\n  titleContainer: {\n    minHeight: 48,\n    padding: theme.spacing(\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.sm\n    ),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\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.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\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.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  contentContainer: {\n    padding: theme.space.sm,\n  },\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  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  inputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  outputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  mandatory: {\n    width: 10,\n    height: 10,\n    margin: theme.spacing(0, theme.space.xs),\n    borderRadius: theme.radii.circle,\n    backgroundColor: theme.colors.negative_20,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","borderRadius","theme","radii","round","backgroundColor","colors","atmo1","boxShadow","shadow","minWidth","headerContainer","padding","spacing","display","flexDirection","justifyContent","alignItems","borderTopLeftRadius","borderTopRightRadius","groupContainer","group","color","base_dark","titleContainer","minHeight","space","xs","sm","actions","inputsTitleContainer","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","contentContainer","inputsContainer","gap","outputsContainer","paramsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":"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"}

package/dist/esm/components/Flow/Node/Parameters/Select.js

@@ -1,13 +1,12 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { HvDropdown } from "@hitachivantara/uikit-react-core";
 import { useState } from "react";
+import { HvDropdown } from "@hitachivantara/uikit-react-core";
 import { useReactFlow } from "reactflow";
 const Select = ({
   nodeId,
   param,
   data
 }) => {
-  var _a;
   const reactFlowInstance = useReactFlow();
   const [option, setOption] = useState(data[param.id]);
   const onSelectChange = (item) => {
@@ -24,7 +23,7 @@ const Select = ({
     reactFlowInstance.setNodes(newNodes);
     setOption(item.label);
   };
-  return /* @__PURE__ */ jsx(HvDropdown, { label: param.label, values: (_a = param.options) == null ? void 0 : _a.map((o) => {
+  return /* @__PURE__ */ jsx(HvDropdown, { disablePortal: true, label: param.label, values: param.options?.map((o) => {
     return {
       id: o,
       label: o,

package/dist/esm/components/Flow/Node/Parameters/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../../../src/components/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { HvDropdown } from \"@hitachivantara/uikit-react-core\";\nimport { useState } from \"react\";\nimport { useReactFlow } from \"reactflow\";\n\nconst Select = ({ nodeId, param, data }) => {\n  const reactFlowInstance = useReactFlow();\n  const [option, setOption] = useState(data[param.id]);\n\n  const onSelectChange = (item) => {\n    const nodes = reactFlowInstance.getNodes();\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [param.id]: item.label };\n      }\n      return node;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    setOption(item.label);\n  };\n\n  return (\n    <HvDropdown\n      label={param.label}\n      values={param.options?.map((o) => {\n        return { id: o, label: o, selected: o === option };\n      })}\n      onChange={(item) => onSelectChange(item)}\n    />\n  );\n};\n\nexport default Select;\n"],"names":["Select","nodeId","param","data","reactFlowInstance","useReactFlow","option","setOption","useState","id","onSelectChange","item","nodes","getNodes","newNodes","map","node","label","setNodes","options","o","selected"],"mappings":";;;;AAIA,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;;AAC1C,QAAMC,oBAAoBC;AACpB,QAAA,CAACC,QAAQC,SAAS,IAAIC,SAASL,KAAKD,MAAMO,EAAE,CAAC;AAEnD,QAAMC,iBAAkBC,CAAS,SAAA;AACzBC,UAAAA,QAAQR,kBAAkBS;AAC1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKP,OAAOR,QAAQ;AACtBe,aAAKb,OAAO;AAAA,UAAE,GAAGa,KAAKb;AAAAA,UAAM,CAACD,MAAMO,EAAE,GAAGE,KAAKM;AAAAA,QAAAA;AAAAA,MAC/C;AACOD,aAAAA;AAAAA,IAAAA,CACR;AACDZ,sBAAkBc,SAASJ,QAAQ;AACnCP,cAAUI,KAAKM,KAAK;AAAA,EAAA;AAIpB,SAAA,oBAAC,cACC,OAAOf,MAAMe,OACb,SAAQf,WAAMiB,YAANjB,mBAAea,IAAKK,CAAM,MAAA;AACzB,WAAA;AAAA,MAAEX,IAAIW;AAAAA,MAAGH,OAAOG;AAAAA,MAAGC,UAAUD,MAAMd;AAAAA,IAAAA;AAAAA,EAAO,IAEnD,UAAWK,CAASD,SAAAA,eAAeC,IAAI,EACvC,CAAA;AAEN;AAEA,MAAA,WAAeX;"}
+{"version":3,"file":"Select.js","sources":["../../../../../../src/components/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nconst Select = ({ nodeId, param, data }) => {\n  const reactFlowInstance = useReactFlow();\n  const [option, setOption] = useState(data[param.id]);\n\n  const onSelectChange = (item) => {\n    const nodes = reactFlowInstance.getNodes();\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [param.id]: item.label };\n      }\n      return node;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    setOption(item.label);\n  };\n\n  return (\n    <HvDropdown\n      disablePortal\n      label={param.label}\n      values={param.options?.map((o) => {\n        return { id: o, label: o, selected: o === option };\n      })}\n      onChange={(item) => onSelectChange(item)}\n    />\n  );\n};\n\nexport default Select;\n"],"names":["Select","nodeId","param","data","reactFlowInstance","useReactFlow","option","setOption","useState","id","onSelectChange","item","nodes","getNodes","newNodes","map","node","label","setNodes","options","o","selected"],"mappings":";;;;AAIA,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;AAC1C,QAAMC,oBAAoBC;AACpB,QAAA,CAACC,QAAQC,SAAS,IAAIC,SAASL,KAAKD,MAAMO,EAAE,CAAC;AAEnD,QAAMC,iBAAkBC,CAAS,SAAA;AACzBC,UAAAA,QAAQR,kBAAkBS;AAC1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKP,OAAOR,QAAQ;AACtBe,aAAKb,OAAO;AAAA,UAAE,GAAGa,KAAKb;AAAAA,UAAM,CAACD,MAAMO,EAAE,GAAGE,KAAKM;AAAAA,QAAAA;AAAAA,MAC/C;AACOD,aAAAA;AAAAA,IAAAA,CACR;AACDZ,sBAAkBc,SAASJ,QAAQ;AACnCP,cAAUI,KAAKM,KAAK;AAAA,EAAA;AAIpB,SAAA,oBAAC,YACC,EAAA,eAAa,MACb,OAAOf,MAAMe,OACb,QAAQf,MAAMiB,SAASJ,IAAKK,CAAM,MAAA;AACzB,WAAA;AAAA,MAAEX,IAAIW;AAAAA,MAAGH,OAAOG;AAAAA,MAAGC,UAAUD,MAAMd;AAAAA,IAAAA;AAAAA,EAAO,CAClD,GACD,UAAWK,CAASD,SAAAA,eAAeC,IAAI,EACvC,CAAA;AAEN;AAEA,MAAA,WAAeX;"}

package/dist/esm/components/Flow/Node/Parameters/Text.js

@@ -1,6 +1,6 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { HvInput } from "@hitachivantara/uikit-react-core";
 import { useState } from "react";
+import { HvInput } from "@hitachivantara/uikit-react-core";
 import { useReactFlow } from "reactflow";
 const Text = ({
   nodeId,

package/dist/esm/components/Flow/Node/Parameters/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../../../../src/components/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { HvInput } from \"@hitachivantara/uikit-react-core\";\nimport { useState } from \"react\";\nimport { useReactFlow } from \"reactflow\";\n\nconst Text = ({ nodeId, param, data }) => {\n  const reactFlowInstance = useReactFlow();\n  const [text, setText] = useState(data[param.id]);\n\n  const onTextChange = (val) => {\n    const nodes = reactFlowInstance.getNodes();\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [param.id]: val };\n      }\n      return node;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    setText(val);\n  };\n\n  return (\n    <HvInput\n      label={param.label}\n      value={text}\n      onChange={(evt, val) => onTextChange(val)}\n    />\n  );\n};\n\nexport default Text;\n"],"names":["Text","nodeId","param","data","reactFlowInstance","useReactFlow","text","setText","useState","id","onTextChange","val","nodes","getNodes","newNodes","map","node","setNodes","label","evt"],"mappings":";;;;AAIA,MAAMA,OAAOA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;AACxC,QAAMC,oBAAoBC;AACpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,SAASL,KAAKD,MAAMO,EAAE,CAAC;AAE/C,QAAMC,eAAgBC,CAAQ,QAAA;AACtBC,UAAAA,QAAQR,kBAAkBS;AAC1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKP,OAAOR,QAAQ;AACtBe,aAAKb,OAAO;AAAA,UAAE,GAAGa,KAAKb;AAAAA,UAAM,CAACD,MAAMO,EAAE,GAAGE;AAAAA,QAAAA;AAAAA,MAC1C;AACOK,aAAAA;AAAAA,IAAAA,CACR;AACDZ,sBAAkBa,SAASH,QAAQ;AACnCP,YAAQI,GAAG;AAAA,EAAA;AAGb,SACG,oBAAA,SAAA,EACC,OAAOT,MAAMgB,OACb,OAAOZ,MACP,UAAU,CAACa,KAAKR,QAAQD,aAAaC,GAAG,EACxC,CAAA;AAEN;AAEA,MAAA,SAAeX;"}
+{"version":3,"file":"Text.js","sources":["../../../../../../src/components/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvInput } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nconst Text = ({ nodeId, param, data }) => {\n  const reactFlowInstance = useReactFlow();\n  const [text, setText] = useState(data[param.id]);\n\n  const onTextChange = (val) => {\n    const nodes = reactFlowInstance.getNodes();\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [param.id]: val };\n      }\n      return node;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    setText(val);\n  };\n\n  return (\n    <HvInput\n      label={param.label}\n      value={text}\n      onChange={(evt, val) => onTextChange(val)}\n    />\n  );\n};\n\nexport default Text;\n"],"names":["Text","nodeId","param","data","reactFlowInstance","useReactFlow","text","setText","useState","id","onTextChange","val","nodes","getNodes","newNodes","map","node","setNodes","label","evt"],"mappings":";;;;AAIA,MAAMA,OAAOA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;AACxC,QAAMC,oBAAoBC;AACpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,SAASL,KAAKD,MAAMO,EAAE,CAAC;AAE/C,QAAMC,eAAgBC,CAAQ,QAAA;AACtBC,UAAAA,QAAQR,kBAAkBS;AAC1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKP,OAAOR,QAAQ;AACtBe,aAAKb,OAAO;AAAA,UAAE,GAAGa,KAAKb;AAAAA,UAAM,CAACD,MAAMO,EAAE,GAAGE;AAAAA,QAAAA;AAAAA,MAC1C;AACOK,aAAAA;AAAAA,IAAAA,CACR;AACDZ,sBAAkBa,SAASH,QAAQ;AACnCP,YAAQI,GAAG;AAAA,EAAA;AAGb,SACG,oBAAA,SAAA,EACC,OAAOT,MAAMgB,OACb,OAAOZ,MACP,UAAU,CAACa,KAAKR,QAAQD,aAAaC,GAAG,EACxC,CAAA;AAEN;AAEA,MAAA,SAAeX;"}

package/dist/esm/components/Flow/Sidebar/Sidebar.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import debounce from "lodash/debounce";
 import { useDroppable, useDndMonitor, DragOverlay } from "@dnd-kit/core";
 import { restrictToWindowEdges } from "@dnd-kit/modifiers";
@@ -38,6 +38,9 @@ const HvFlowSidebar = ({
   const unfilteredGroups = useMemo(() => buildGroups(nodeGroups, nodeTypes), [nodeGroups, nodeTypes]);
   const [groups, setGroups] = useState(unfilteredGroups);
   const [draggingLabel, setDraggingLabel] = useState(void 0);
+  useEffect(() => {
+    setGroups(unfilteredGroups);
+  }, [unfilteredGroups]);
   const labels = useLabels(DEFAULT_LABELS, labelsProps);
   const drawerElementId = useUniqueId(id, "hvFlowSidebarDrawer");
   const groupsElementId = useUniqueId(id, "hvFlowSidebarGroups");
@@ -47,9 +50,8 @@ const HvFlowSidebar = ({
     id: drawerElementId
   });
   const handleDragStart = (event) => {
-    var _a, _b;
-    if ((_a = event.active.data.current) == null ? void 0 : _a.hvFlow) {
-      setDraggingLabel((_b = event.active.data.current.hvFlow) == null ? void 0 : _b.label);
+    if (event.active.data.current?.hvFlow) {
+      setDraggingLabel(event.active.data.current.hvFlow?.label);
     }
   };
   const handleDragEnd = () => {
@@ -72,7 +74,7 @@ const HvFlowSidebar = ({
       return acc;
     }, {}) : unfilteredGroups;
     setGroups(gps);
-    setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups(value ? Object.keys(gps) : []);
+    setExpandedNodeGroups?.(value ? Object.keys(gps) : []);
   };
   const handleDebouncedSearch = debounce(handleSearch, 500);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -85,14 +87,16 @@ const HvFlowSidebar = ({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: classes.contentContainer, children: [
         /* @__PURE__ */ jsx(HvTypography, { className: classes.description, children: description }),
-        /* @__PURE__ */ jsx(HvInput, { className: classes.searchRoot, type: "search", placeholder: labels == null ? void 0 : labels.searchPlaceholder, "aria-label": labels == null ? void 0 : labels.searchAriaLabel, "aria-controls": groupsElementId, "aria-owns": groupsElementId, onChange: handleDebouncedSearch, inputProps: {
+        /* @__PURE__ */ jsx(HvInput, { className: classes.searchRoot, type: "search", placeholder: labels?.searchPlaceholder, "aria-label": labels?.searchAriaLabel, "aria-controls": groupsElementId, "aria-owns": groupsElementId, onChange: handleDebouncedSearch, inputProps: {
           autoComplete: "off"
         } }),
-        /* @__PURE__ */ jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => /* @__PURE__ */ jsx(HvFlowSidebarGroup, { id: obj[0], expandButtonProps: {
-          "aria-label": labels == null ? void 0 : labels.expandGroupButtonAriaLabel
-        }, itemProps: {
-          "aria-roledescription": labels == null ? void 0 : labels.itemAriaRoleDescription
-        }, ...obj[1] }, obj[0])) })
+        /* @__PURE__ */ jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => {
+          return /* @__PURE__ */ jsx(HvFlowSidebarGroup, { id: obj[0], expandButtonProps: {
+            "aria-label": labels?.expandGroupButtonAriaLabel
+          }, itemProps: {
+            "aria-roledescription": labels?.itemAriaRoleDescription
+          }, ...obj[1] }, obj[0]);
+        }) })
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToWindowEdges], children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })

package/dist/esm/components/Flow/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nimport debounce from \"lodash/debounce\";\n\nimport {\n  DndContextProps,\n  DragOverlay,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  HvInputProps,\n  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport { useFlowContext } from \"../hooks\";\nimport { buildGroups } from \"./utils\";\nimport { HvFlowSidebarGroupItem } 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  /** 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?: {\n    itemAriaRoleDescription?: string;\n    expandGroupButtonAriaLabel?: string;\n    searchPlaceholder?: string;\n    searchAriaLabel?: string;\n  };\n}\n\nconst DEFAULT_LABELS: HvFlowSidebarProps[\"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  classes: classesProp,\n  labels: labelsProps,\n  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n  const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id, \"hvFlowSidebarDrawer\");\n  const groupsElementId = useUniqueId(id, \"hvFlowSidebarGroups\");\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({\n    id: drawerElementId,\n  });\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 handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n    const gps = value\n      ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n          // Filter nodes by search\n          const filteredNodes = curr[1].nodes.filter((obj) =>\n            obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())\n          );\n          const nodesCount = filteredNodes.length;\n\n          // Only show groups with nodes\n          if (nodesCount > 0) {\n            acc[curr[0]] = {\n              ...curr[1],\n              nodes: filteredNodes,\n            };\n          }\n\n          return acc;\n        }, {})\n      : unfilteredGroups;\n\n    setGroups(gps);\n    setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <>\n      <HvDrawer\n        BackdropComponent={undefined}\n        variant=\"persistent\"\n        classes={{\n          paper: classes.drawerPaper,\n        }}\n        anchor={anchor}\n        buttonTitle={buttonTitle}\n        {...others}\n      >\n        <div id={drawerElementId} ref={setNodeRef}>\n          <div className={classes.titleContainer}>\n            <Add role=\"none\" />\n            <HvTypography variant=\"title3\">{title}</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={handleDebouncedSearch}\n              inputProps={{ autoComplete: \"off\" }}\n            />\n            <ul id={groupsElementId} className={classes.groupsContainer}>\n              {Object.entries(groups).map((obj) => (\n                <HvFlowSidebarGroup\n                  key={obj[0]}\n                  id={obj[0]}\n                  expandButtonProps={{\n                    \"aria-label\": labels?.expandGroupButtonAriaLabel,\n                  }}\n                  itemProps={{\n                    \"aria-roledescription\": labels?.itemAriaRoleDescription,\n                  }}\n                  {...obj[1]}\n                />\n              ))}\n            </ul>\n          </div>\n        </div>\n      </HvDrawer>\n      <DragOverlay modifiers={[restrictToWindowEdges]}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","draggingLabel","setDraggingLabel","undefined","useLabels","drawerElementId","useUniqueId","groupsElementId","setNodeRef","useDroppable","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","onDragEnd","onDragStart","handleSearch","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","toLocaleLowerCase","includes","nodesCount","length","keys","handleDebouncedSearch","debounce","paper","drawerPaper","titleContainer","contentContainer","searchRoot","autoComplete","groupsContainer","map","restrictToWindowEdges"],"mappings":";;;;;;;;;;;;;AAmDA,MAAMA,iBAA+C;AAAA,EACnDC,yBAAyB;AAAA,EACzBC,4BAA4B;AAAA,EAC5BC,mBAAmB;AAAA,EACnBC,iBAAiB;AACnB;AAEO,MAAMC,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,cAAc;AAAA,EACdC,SAASC;AAAAA,EACTC,QAAQC;AAAAA,EACR,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEJ;AAAAA,EAAAA,IAAYK,WAAWJ,WAAW;AAEpC,QAAA;AAAA,IAAEK;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,MAA0BC,eAAe;AAElEC,QAAAA,mBAAmBC,QACvB,MAAMC,YAAYN,YAAYC,SAAS,GACvC,CAACD,YAAYC,SAAS,CACxB;AAEA,QAAM,CAACM,QAAQC,SAAS,IAAIC,SAASL,gBAAgB;AACrD,QAAM,CAACM,eAAeC,gBAAgB,IAAIF,SAASG,MAAS;AAEtDhB,QAAAA,SAASiB,UAAU9B,gBAAgBc,WAAW;AAE9CiB,QAAAA,kBAAkBC,YAAY1B,IAAI,qBAAqB;AACvD2B,QAAAA,kBAAkBD,YAAY1B,IAAI,qBAAqB;AAIvD,QAAA;AAAA,IAAE4B;AAAAA,MAAeC,aAAa;AAAA,IAClC7B,IAAIyB;AAAAA,EAAAA,CACL;AAED,QAAMK,kBAAmDC,CAAU,UAAA;;AACjE,SAAIA,WAAMC,OAAOC,KAAKC,YAAlBH,mBAA2BI,QAAQ;AACrCb,wBAAiBS,WAAMC,OAAOC,KAAKC,QAAQC,WAA1BJ,mBAAkCK,KAAK;AAAA,IAC1D;AAAA,EAAA;AAGF,QAAMC,gBAA8CA,MAAM;AACxDf,qBAAiBC,MAAS;AAAA,EAAA;AAGd,gBAAA;AAAA,IACZe,WAAWD;AAAAA,IACXE,aAAaT;AAAAA,EAAAA,CACd;AAEKU,QAAAA,eAAyCA,CAACT,OAAOU,UAAU;AACzDC,UAAAA,MAAMD,QACRE,OAAOC,QAAQ7B,gBAAgB,EAAE8B,OAAO,CAACC,KAAKC,SAAS;AAErD,YAAMC,gBAAgBD,KAAK,CAAC,EAAEE,MAAMC,OAAQC,CAAAA,QAC1CA,IAAIf,MAAMgB,oBAAoBC,SAASZ,MAAMW,kBAAmB,CAAA,CAClE;AACA,YAAME,aAAaN,cAAcO;AAGjC,UAAID,aAAa,GAAG;AACdP,YAAAA,KAAK,CAAC,CAAC,IAAI;AAAA,UACb,GAAGA,KAAK,CAAC;AAAA,UACTE,OAAOD;AAAAA,QAAAA;AAAAA,MAEX;AAEOF,aAAAA;AAAAA,IAAAA,GACN,CAAA,CAAE,IACL/B;AAEJI,cAAUuB,GAAG;AACb7B,mEAAwB4B,QAAQE,OAAOa,KAAKd,GAAG,IAAI,CAAA;AAAA,EAAE;AAGjDe,QAAAA,wBAAwBC,SAASlB,cAAc,GAAG;AAExD,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,UACC,EAAA,mBAAmBjB,QACnB,SAAQ,cACR,SAAS;AAAA,MACPoC,OAAOtD,QAAQuD;AAAAA,IACjB,GACA,QACA,aACA,GAAInD,QAEJ,+BAAC,OAAI,EAAA,IAAIgB,iBAAiB,KAAKG,YAC7B,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAWvB,QAAQwD,gBACtB,UAAA;AAAA,QAAC,oBAAA,KAAA,EAAI,MAAK,OAAM,CAAA;AAAA,QACf,oBAAA,cAAA,EAAa,SAAQ,UAAU5D,UAAM,OAAA;AAAA,MAAA,GACxC;AAAA,MACC,qBAAA,OAAA,EAAI,WAAWI,QAAQyD,kBACtB,UAAA;AAAA,QAAA,oBAAC,cAAa,EAAA,WAAWzD,QAAQH,aAC9BA,UACH,aAAA;AAAA,4BACC,SACC,EAAA,WAAWG,QAAQ0D,YACnB,MAAK,UACL,aAAaxD,iCAAQV,mBACrB,cAAYU,iCAAQT,iBACpB,iBAAe6B,iBACf,aAAWA,iBACX,UAAU8B,uBACV,YAAY;AAAA,UAAEO,cAAc;AAAA,QAAA,GAAQ;AAAA,4BAErC,MAAG,EAAA,IAAIrC,iBAAiB,WAAWtB,QAAQ4D,iBACzCtB,UAAOC,OAAAA,QAAQ1B,MAAM,EAAEgD,IAAKf,SAC1B,oBAAA,oBAAA,EAEC,IAAIA,IAAI,CAAC,GACT,mBAAmB;AAAA,UACjB,cAAc5C,iCAAQX;AAAAA,WAExB,WAAW;AAAA,UACT,wBAAwBW,iCAAQZ;AAAAA,QAAAA,GAE9BwD,GAAAA,IAAI,CAAC,KARJA,IAAI,CAAC,CAQC,CAEd,GACH;AAAA,MAAA,GACF;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,IACC,oBAAA,aAAA,EAAY,WAAW,CAACgB,qBAAqB,GAC3C9C,UAAAA,gBACE,oBAAA,wBAAA,EAAuB,OAAOA,eAAe,YAAU,KAAA,CAAA,IACtD,MACN;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\n\nimport debounce from \"lodash/debounce\";\n\nimport {\n  DndContextProps,\n  DragOverlay,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  HvInputProps,\n  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport { useFlowContext } from \"../hooks\";\nimport { buildGroups } from \"./utils\";\nimport { HvFlowSidebarGroupItem } 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  /** 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?: {\n    itemAriaRoleDescription?: string;\n    expandGroupButtonAriaLabel?: string;\n    searchPlaceholder?: string;\n    searchAriaLabel?: string;\n  };\n}\n\nconst DEFAULT_LABELS: HvFlowSidebarProps[\"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  classes: classesProp,\n  labels: labelsProps,\n  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n  const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n  useEffect(() => {\n    setGroups(unfilteredGroups);\n  }, [unfilteredGroups]);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id, \"hvFlowSidebarDrawer\");\n  const groupsElementId = useUniqueId(id, \"hvFlowSidebarGroups\");\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({\n    id: drawerElementId,\n  });\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 handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n    const gps = value\n      ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n          // Filter nodes by search\n          const filteredNodes = curr[1].nodes.filter((obj) =>\n            obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())\n          );\n          const nodesCount = filteredNodes.length;\n\n          // Only show groups with nodes\n          if (nodesCount > 0) {\n            acc[curr[0]] = {\n              ...curr[1],\n              nodes: filteredNodes,\n            };\n          }\n\n          return acc;\n        }, {})\n      : unfilteredGroups;\n\n    setGroups(gps);\n    setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <>\n      <HvDrawer\n        BackdropComponent={undefined}\n        variant=\"persistent\"\n        classes={{\n          paper: classes.drawerPaper,\n        }}\n        anchor={anchor}\n        buttonTitle={buttonTitle}\n        {...others}\n      >\n        <div id={drawerElementId} ref={setNodeRef}>\n          <div className={classes.titleContainer}>\n            <Add role=\"none\" />\n            <HvTypography variant=\"title3\">{title}</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={handleDebouncedSearch}\n              inputProps={{ autoComplete: \"off\" }}\n            />\n            <ul id={groupsElementId} className={classes.groupsContainer}>\n              {Object.entries(groups).map((obj) => {\n                return (\n                  <HvFlowSidebarGroup\n                    key={obj[0]}\n                    id={obj[0]}\n                    expandButtonProps={{\n                      \"aria-label\": labels?.expandGroupButtonAriaLabel,\n                    }}\n                    itemProps={{\n                      \"aria-roledescription\": labels?.itemAriaRoleDescription,\n                    }}\n                    {...obj[1]}\n                  />\n                );\n              })}\n            </ul>\n          </div>\n        </div>\n      </HvDrawer>\n      <DragOverlay modifiers={[restrictToWindowEdges]}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","draggingLabel","setDraggingLabel","undefined","useEffect","useLabels","drawerElementId","useUniqueId","groupsElementId","setNodeRef","useDroppable","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","onDragEnd","onDragStart","handleSearch","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","toLocaleLowerCase","includes","nodesCount","length","keys","handleDebouncedSearch","debounce","paper","drawerPaper","titleContainer","contentContainer","searchRoot","autoComplete","groupsContainer","map","restrictToWindowEdges"],"mappings":"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"}

package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroup.js

@@ -27,9 +27,9 @@ const HvFlowSidebarGroup = ({
     expandedNodeGroups,
     setExpandedNodeGroups
   } = useFlowContext();
-  const opened = useMemo(() => !!(expandedNodeGroups == null ? void 0 : expandedNodeGroups.find((groupId) => groupId === id)), [expandedNodeGroups, id]);
+  const opened = useMemo(() => !!expandedNodeGroups?.find((groupId) => groupId === id), [expandedNodeGroups, id]);
   const handleClick = useCallback(() => {
-    setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups((prev) => opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]);
+    setExpandedNodeGroups?.((prev) => opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]);
   }, [id, opened, setExpandedNodeGroups]);
   return /* @__PURE__ */ jsxs("li", { className: cx(css({
     borderColor: getColor(color)

package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.js","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\nimport { useFlowContext } from \"../../hooks\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNodes = {\n  type: string;\n  label: string;\n  data?: unknown;\n}[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n  /** Group id. */\n  id: string;\n  /** Group nodes. */\n  nodes: HvFlowSidebarGroupNodes;\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  nodes,\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((groupId) => groupId === id),\n    [expandedNodeGroups, id]\n  );\n\n  const handleClick = useCallback(() => {\n    setExpandedNodeGroups?.((prev) =>\n      opened ? prev.filter((groupId) => id !== groupId) : [...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=\"none\">\n            {icon}\n          </div>\n          <HvTypography variant=\"title4\">\n            {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n          </HvTypography>\n        </div>\n        <HvButton\n          icon\n          onClick={handleClick}\n          aria-expanded={opened}\n          {...expandButtonProps}\n        >\n          {opened ? <Up role=\"none\" /> : <Down role=\"none\" />}\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          {nodes.map((obj) => (\n            <HvFlowDraggableSidebarGroupItem\n              key={obj.type}\n              {...itemProps}\n              {...obj}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":["HvFlowSidebarGroup","id","label","nodes","color","description","icon","expandButtonProps","classes","classesProp","itemProps","cx","css","useClasses","expandedNodeGroups","setExpandedNodeGroups","useFlowContext","opened","useMemo","find","groupId","handleClick","useCallback","prev","filter","borderColor","getColor","root","titleContainer","labelContainer","length","descriptionContainer","itemsContainer","map","obj","type"],"mappings":";;;;;;;;;AA0CO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AACuB,MAAM;AACvB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,eAAe;AAErE,QAAMC,SAASC,QACb,MAAM,CAAC,EAACJ,yDAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,MAC1D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,YAAY,MAAM;AACpCP,mEAAyBQ,CACvBN,SAAAA,SAASM,KAAKC,OAAQJ,CAAYnB,YAAAA,OAAOmB,OAAO,IAAI,CAAC,GAAGG,MAAMtB,EAAE;AAAA,EAEjE,GAAA,CAACA,IAAIgB,QAAQF,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAWJ,GAAGC,IAAI;AAAA,IAAEa,aAAaC,SAAStB,KAAK;AAAA,EAAG,CAAA,GAAGI,QAAQmB,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWnB,QAAQoB,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAWpB,QAAQqB,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAWrB,QAAQF,MAAM,MAAK,QAChCA,UACH,MAAA;AAAA,QACC,oBAAA,cAAA,EAAa,SAAQ,UACnBH,UAAM2B,MAAAA,SAAS,IAAK,GAAE5B,KAAM,KAAIC,MAAM2B,MAAO,MAAK5B,OACrD;AAAA,MAAA,GACF;AAAA,MACA,oBAAC,YACC,MAAI,MACJ,SAASmB,aACT,iBAAeJ,QACf,GAAIV,mBAEHU,mBAAU,oBAAA,IAAA,EAAG,MAAK,QAAM,wBAAO,MAAK,EAAA,MAAK,QAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACCZ,mCACE,OAAI,EAAA,WAAWG,QAAQuB,sBACtB,UAAA,oBAAC,cAAc1B,EAAAA,UAAAA,YAAAA,CAAY,EAC7B,CAAA;AAAA,IAEDY,UACE,oBAAA,OAAA,EAAI,WAAWT,QAAQwB,gBACrB7B,gBAAM8B,IAAKC,CAAAA,QACT,oBAAA,iCAAA,EAEKxB,GAAAA,WACAwB,GAAAA,OAFCA,IAAIC,IAED,CAEX,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"SidebarGroup.js","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\nimport { useFlowContext } from \"../../hooks\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNodes = {\n  type: string;\n  label: string;\n  data?: unknown;\n}[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n  /** Group id. */\n  id: string;\n  /** Group nodes. */\n  nodes: HvFlowSidebarGroupNodes;\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  nodes,\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((groupId) => groupId === id),\n    [expandedNodeGroups, id]\n  );\n\n  const handleClick = useCallback(() => {\n    setExpandedNodeGroups?.((prev) =>\n      opened ? prev.filter((groupId) => id !== groupId) : [...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=\"none\">\n            {icon}\n          </div>\n          <HvTypography variant=\"title4\">\n            {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n          </HvTypography>\n        </div>\n        <HvButton\n          icon\n          onClick={handleClick}\n          aria-expanded={opened}\n          {...expandButtonProps}\n        >\n          {opened ? <Up role=\"none\" /> : <Down role=\"none\" />}\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          {nodes.map((obj) => (\n            <HvFlowDraggableSidebarGroupItem\n              key={obj.type}\n              {...itemProps}\n              {...obj}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":["HvFlowSidebarGroup","id","label","nodes","color","description","icon","expandButtonProps","classes","classesProp","itemProps","cx","css","useClasses","expandedNodeGroups","setExpandedNodeGroups","useFlowContext","opened","useMemo","find","groupId","handleClick","useCallback","prev","filter","borderColor","getColor","root","titleContainer","labelContainer","length","descriptionContainer","itemsContainer","map","obj","type"],"mappings":";;;;;;;;;AA0CO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AACuB,MAAM;AACvB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,eAAe;AAErE,QAAMC,SAASC,QACb,MAAM,CAAC,CAACJ,oBAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,EAAE,GAC5D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,YAAY,MAAM;AACpCP,4BAAyBQ,CACvBN,SAAAA,SAASM,KAAKC,OAAQJ,CAAYnB,YAAAA,OAAOmB,OAAO,IAAI,CAAC,GAAGG,MAAMtB,EAAE,CAClE;AAAA,EACC,GAAA,CAACA,IAAIgB,QAAQF,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAWJ,GAAGC,IAAI;AAAA,IAAEa,aAAaC,SAAStB,KAAK;AAAA,EAAG,CAAA,GAAGI,QAAQmB,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWnB,QAAQoB,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAWpB,QAAQqB,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAWrB,QAAQF,MAAM,MAAK,QAChCA,UACH,MAAA;AAAA,QACC,oBAAA,cAAA,EAAa,SAAQ,UACnBH,UAAM2B,MAAAA,SAAS,IAAK,GAAE5B,KAAM,KAAIC,MAAM2B,MAAO,MAAK5B,OACrD;AAAA,MAAA,GACF;AAAA,MACA,oBAAC,YACC,MAAI,MACJ,SAASmB,aACT,iBAAeJ,QACf,GAAIV,mBAEHU,mBAAU,oBAAA,IAAA,EAAG,MAAK,QAAM,wBAAO,MAAK,EAAA,MAAK,QAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACCZ,mCACE,OAAI,EAAA,WAAWG,QAAQuB,sBACtB,UAAA,oBAAC,cAAc1B,EAAAA,UAAAA,YAAAA,CAAY,EAC7B,CAAA;AAAA,IAEDY,UACE,oBAAA,OAAA,EAAI,WAAWT,QAAQwB,gBACrB7B,gBAAM8B,IAAKC,CAAAA,QACT,oBAAA,iCAAA,EAEKxB,GAAAA,WACAwB,GAAAA,OAFCA,IAAIC,IAED,CAEX,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js

@@ -11,7 +11,6 @@ const HvFlowDraggableSidebarGroupItem = ({
   data,
   ...others
 }) => {
-  var _a, _b;
   const itemRef = useRef(null);
   const elementId = useUniqueId(id, `hvFlowDraggableItem-${type}`);
   const {
@@ -29,8 +28,8 @@ const HvFlowDraggableSidebarGroupItem = ({
         // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow
         label,
         // Item position: used to position the item when dropped
-        x: (_a = itemRef.current) == null ? void 0 : _a.getBoundingClientRect().x,
-        y: (_b = itemRef.current) == null ? void 0 : _b.getBoundingClientRect().y,
+        x: itemRef.current?.getBoundingClientRect().x,
+        y: itemRef.current?.getBoundingClientRect().y,
         // Data
         data
       }

package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport { useDraggable } from \"@dnd-kit/core\";\n\nimport { useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps {\n  /** Item type. */\n  type: string;\n  /** Item data. */\n  data?: unknown;\n}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  id,\n  label,\n  type,\n  data,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n\n  const elementId = useUniqueId(id, `hvFlowDraggableItem-${type}`);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id: elementId,\n      data: {\n        hvFlow: {\n          // Needed to know which item is being dragged and dropped\n          type,\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":["HvFlowDraggableSidebarGroupItem","id","label","type","data","others","itemRef","useRef","elementId","useUniqueId","attributes","listeners","setNodeRef","isDragging","transform","useDraggable","hvFlow","x","current","getBoundingClientRect","y","forkedRef","useForkRef","style","undefined"],"mappings":";;;;;;AAqBO,MAAMA,kCAAkCA,CAAC;AAAA,EAC9CC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiC,MAAM;;AACpCC,QAAAA,UAAUC,OAAoB,IAAI;AAExC,QAAMC,YAAYC,YAAYR,IAAK,uBAAsBE,IAAK,EAAC;AAEzD,QAAA;AAAA,IAAEO;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,aAAa;AAAA,IACXd,IAAIO;AAAAA,IACJJ,MAAM;AAAA,MACJY,QAAQ;AAAA;AAAA,QAENb;AAAAA;AAAAA,QAEAD;AAAAA;AAAAA,QAEAe,IAAGX,aAAQY,YAARZ,mBAAiBa,wBAAwBF;AAAAA,QAC5CG,IAAGd,aAAQY,YAARZ,mBAAiBa,wBAAwBC;AAAAA;AAAAA,QAE5ChB;AAAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AAEGiB,QAAAA,YAAYC,WAAWhB,SAASM,UAAU;AAEhD,QAAMW,QAAQT,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUG,CAAE,OAAMH,UAAUM,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,SACG,oBAAA,wBAAA,EACC,KAAKH,WACL,OACA,OACA,YACIV,GAAAA,cACAD,YACAL,GAAAA,OACJ,CAAA;AAEN;"}
+{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport { useDraggable } from \"@dnd-kit/core\";\n\nimport { useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps {\n  /** Item type. */\n  type: string;\n  /** Item data. */\n  data?: unknown;\n}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  id,\n  label,\n  type,\n  data,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n\n  const elementId = useUniqueId(id, `hvFlowDraggableItem-${type}`);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id: elementId,\n      data: {\n        hvFlow: {\n          // Needed to know which item is being dragged and dropped\n          type,\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":["HvFlowDraggableSidebarGroupItem","id","label","type","data","others","itemRef","useRef","elementId","useUniqueId","attributes","listeners","setNodeRef","isDragging","transform","useDraggable","hvFlow","x","current","getBoundingClientRect","y","forkedRef","useForkRef","style","undefined"],"mappings":";;;;;;AAqBO,MAAMA,kCAAkCA,CAAC;AAAA,EAC9CC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiC,MAAM;AACpCC,QAAAA,UAAUC,OAAoB,IAAI;AAExC,QAAMC,YAAYC,YAAYR,IAAK,uBAAsBE,IAAK,EAAC;AAEzD,QAAA;AAAA,IAAEO;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,aAAa;AAAA,IACXd,IAAIO;AAAAA,IACJJ,MAAM;AAAA,MACJY,QAAQ;AAAA;AAAA,QAENb;AAAAA;AAAAA,QAEAD;AAAAA;AAAAA,QAEAe,GAAGX,QAAQY,SAASC,sBAAwBF,EAAAA;AAAAA,QAC5CG,GAAGd,QAAQY,SAASC,sBAAwBC,EAAAA;AAAAA;AAAAA,QAE5ChB;AAAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AAEGiB,QAAAA,YAAYC,WAAWhB,SAASM,UAAU;AAEhD,QAAMW,QAAQT,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUG,CAAE,OAAMH,UAAUM,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,SACG,oBAAA,wBAAA,EACC,KAAKH,WACL,OACA,OACA,YACIV,GAAAA,cACAD,YACAL,GAAAA,OACJ,CAAA;AAEN;"}

package/dist/esm/components/Flow/Sidebar/utils.js

@@ -2,12 +2,11 @@ const buildGroups = (nodeGroups, nodeTypes) => {
   if (nodeGroups) {
     const groups = Object.entries(nodeGroups).reduce((acc, curr) => {
       const nodes = nodeTypes ? Object.entries(nodeTypes).reduce((accN, currN) => {
-        var _a, _b, _c;
-        if (((_a = currN[1].meta) == null ? void 0 : _a.groupId) === curr[0]) {
+        if (currN[1].meta?.groupId === curr[0]) {
           accN.push({
             type: currN[0],
-            label: (_b = currN[1].meta) == null ? void 0 : _b.label,
-            data: (_c = currN[1].meta) == null ? void 0 : _c.data
+            label: currN[1].meta?.label,
+            data: currN[1].meta?.data
           });
         }
         return accN;

package/dist/esm/components/Flow/Sidebar/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../src/components/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport { HvFlowSidebarGroupNodes } from \"./SidebarGroup\";\n\nexport const buildGroups = (\n  nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n  nodeTypes: HvFlowContextValue[\"nodeTypes\"]\n): {\n  [key: string]: HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n} => {\n  if (nodeGroups) {\n    const groups = Object.entries(nodeGroups).reduce((acc, curr) => {\n      const nodes = nodeTypes\n        ? Object.entries(nodeTypes).reduce(\n            (accN: HvFlowSidebarGroupNodes, currN) => {\n              if (currN[1].meta?.groupId === curr[0]) {\n                accN.push({\n                  type: currN[0],\n                  label: currN[1].meta?.label,\n                  data: currN[1].meta?.data,\n                });\n              }\n              return accN;\n            },\n            []\n          )\n        : [];\n\n      acc[curr[0]] = {\n        ...curr[1],\n        nodes,\n      };\n\n      return acc;\n    }, {});\n\n    return groups;\n  }\n\n  return {};\n};\n"],"names":["buildGroups","nodeGroups","nodeTypes","groups","Object","entries","reduce","acc","curr","nodes","accN","currN","meta","groupId","push","type","label","data"],"mappings":"AAIaA,MAAAA,cAAcA,CACzBC,YACAC,cAGG;AACH,MAAID,YAAY;AACRE,UAAAA,SAASC,OAAOC,QAAQJ,UAAU,EAAEK,OAAO,CAACC,KAAKC,SAAS;AACxDC,YAAAA,QAAQP,YACVE,OAAOC,QAAQH,SAAS,EAAEI,OACxB,CAACI,MAA+BC,UAAU;AAVzCX;AAWC,cAAIW,WAAM,CAAC,EAAEC,SAATD,mBAAeE,aAAYL,KAAK,CAAC,GAAG;AACtCE,eAAKI,KAAK;AAAA,YACRC,MAAMJ,MAAM,CAAC;AAAA,YACbK,QAAOL,WAAM,CAAC,EAAEC,SAATD,mBAAeK;AAAAA,YACtBC,OAAMN,WAAM,CAAC,EAAEC,SAATD,mBAAeM;AAAAA,UAAAA,CACtB;AAAA,QACH;AACOP,eAAAA;AAAAA,MAAAA,GAET,CAAA,CACF,IACA;AAEAF,UAAAA,KAAK,CAAC,CAAC,IAAI;AAAA,QACb,GAAGA,KAAK,CAAC;AAAA,QACTC;AAAAA,MAAAA;AAGKF,aAAAA;AAAAA,IACT,GAAG,CAAE,CAAA;AAEEJ,WAAAA;AAAAA,EACT;AAEA,SAAO;AACT;"}
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport { HvFlowSidebarGroupNodes } from \"./SidebarGroup\";\n\nexport const buildGroups = (\n  nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n  nodeTypes: HvFlowContextValue[\"nodeTypes\"]\n): {\n  [key: string]: HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n} => {\n  if (nodeGroups) {\n    const groups = Object.entries(nodeGroups).reduce((acc, curr) => {\n      const nodes = nodeTypes\n        ? Object.entries(nodeTypes).reduce(\n            (accN: HvFlowSidebarGroupNodes, currN) => {\n              if (currN[1].meta?.groupId === curr[0]) {\n                accN.push({\n                  type: currN[0],\n                  label: currN[1].meta?.label,\n                  data: currN[1].meta?.data,\n                });\n              }\n              return accN;\n            },\n            []\n          )\n        : [];\n\n      acc[curr[0]] = {\n        ...curr[1],\n        nodes,\n      };\n\n      return acc;\n    }, {});\n\n    return groups;\n  }\n\n  return {};\n};\n"],"names":["buildGroups","nodeGroups","nodeTypes","groups","Object","entries","reduce","acc","curr","nodes","accN","currN","meta","groupId","push","type","label","data"],"mappings":"AAIaA,MAAAA,cAAcA,CACzBC,YACAC,cAGG;AACH,MAAID,YAAY;AACRE,UAAAA,SAASC,OAAOC,QAAQJ,UAAU,EAAEK,OAAO,CAACC,KAAKC,SAAS;AACxDC,YAAAA,QAAQP,YACVE,OAAOC,QAAQH,SAAS,EAAEI,OACxB,CAACI,MAA+BC,UAAU;AACxC,YAAIA,MAAM,CAAC,EAAEC,MAAMC,YAAYL,KAAK,CAAC,GAAG;AACtCE,eAAKI,KAAK;AAAA,YACRC,MAAMJ,MAAM,CAAC;AAAA,YACbK,OAAOL,MAAM,CAAC,EAAEC,MAAMI;AAAAA,YACtBC,MAAMN,MAAM,CAAC,EAAEC,MAAMK;AAAAA,UAAAA,CACtB;AAAA,QACH;AACOP,eAAAA;AAAAA,MAAAA,GAET,CAAA,CACF,IACA;AAEAF,UAAAA,KAAK,CAAC,CAAC,IAAI;AAAA,QACb,GAAGA,KAAK,CAAC;AAAA,QACTC;AAAAA,MAAAA;AAGKF,aAAAA;AAAAA,IACT,GAAG,CAAE,CAAA;AAEEJ,WAAAA;AAAAA,EACT;AAEA,SAAO;AACT;"}

package/dist/esm/components/StepNavigation/DefaultNavigation/DefaultNavigation.js

@@ -43,7 +43,7 @@ const HvDefaultNavigation = ({
         minWidth,
         maxWidth,
         getColor,
-        height: (activeTheme == null ? void 0 : activeTheme.stepNavigation.defaultSeparatorHeight) || 0
+        height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0
       },
       stepValues: {
         minSize,

package/dist/esm/components/StepNavigation/DefaultNavigation/DefaultNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultNavigation.js","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n  HvBaseProps,\n  HvTheme,\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    }) => { variant?: string; title?: string }\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":["HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","className","children","other","activeTheme","useTheme","container","maxSize","avatar","minSize","stepSizes","StepComponent","HvStep","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","state","variant","titleDisabled","navWidth","separatorValues","getColor","height","stepNavigation","defaultSeparatorHeight","stepValues"],"mappings":";;;;AAkDO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACqB,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAG3B,QAAA;AAAA,IAAEC,WAAWC;AAAAA,IAASC,QAAQC;AAAAA,EAAAA,IAAYC,UAAUZ,QAAQ;AAClE,QAAMa,gBAAgBC;AAGhBC,QAAAA,aAAaN,UAAUE,WAAWZ,WAAW;AAC7C,QAAA;AAAA,IAAEiB;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBhB,iBAAiBa,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IACpBJ,cAAcR,UAAUE,WAAW,KACnCO,cACF;AAGA,QAAMK,QAAQnB;AAERoB,QAAAA,SAASvB,UAAU,CAAC;AAAA,IAAEwB;AAAAA,EAAAA,OAAa;AAAA,IACvCC,SAAS;AAAA,IACTT;AAAAA,IACAU,eAAeF,UAAU;AAAA,EACzB,EAAA;AAGA,SAAA,qBAAC,OAAI,EAAA,GAAIpB,OACP,UAAA;AAAA,IAAA,oBAAC,SACK,GAAA;AAAA,MACFU;AAAAA,MACAa,UAAUZ;AAAAA,MACVa,iBAAiB;AAAA,QACfP;AAAAA,QACAH;AAAAA,QACAW;AAAAA,QACAC,SAAQzB,2CAAa0B,eAAeC,2BAA0B;AAAA,MAChE;AAAA,MACAC,YAAY;AAAA,QACVvB;AAAAA,QACAF;AAAAA,QACAI;AAAAA,MACF;AAAA,IAAA,GACA;AAAA,IAEHW;AAAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"DefaultNavigation.js","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n  HvBaseProps,\n  HvTheme,\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    }) => { variant?: string; title?: string }\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":["HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","className","children","other","activeTheme","useTheme","container","maxSize","avatar","minSize","stepSizes","StepComponent","HvStep","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","state","variant","titleDisabled","navWidth","separatorValues","getColor","height","stepNavigation","defaultSeparatorHeight","stepValues"],"mappings":";;;;AAkDO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACqB,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAG3B,QAAA;AAAA,IAAEC,WAAWC;AAAAA,IAASC,QAAQC;AAAAA,EAAAA,IAAYC,UAAUZ,QAAQ;AAClE,QAAMa,gBAAgBC;AAGhBC,QAAAA,aAAaN,UAAUE,WAAWZ,WAAW;AAC7C,QAAA;AAAA,IAAEiB;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBhB,iBAAiBa,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IACpBJ,cAAcR,UAAUE,WAAW,KACnCO,cACF;AAGA,QAAMK,QAAQnB;AAERoB,QAAAA,SAASvB,UAAU,CAAC;AAAA,IAAEwB;AAAAA,EAAAA,OAAa;AAAA,IACvCC,SAAS;AAAA,IACTT;AAAAA,IACAU,eAAeF,UAAU;AAAA,EACzB,EAAA;AAGA,SAAA,qBAAC,OAAI,EAAA,GAAIpB,OACP,UAAA;AAAA,IAAA,oBAAC,SACK,GAAA;AAAA,MACFU;AAAAA,MACAa,UAAUZ;AAAAA,MACVa,iBAAiB;AAAA,QACfP;AAAAA,QACAH;AAAAA,QACAW;AAAAA,QACAC,QAAQzB,aAAa0B,eAAeC,0BAA0B;AAAA,MAChE;AAAA,MACAC,YAAY;AAAA,QACVvB;AAAAA,QACAF;AAAAA,QACAI;AAAAA,MACF;AAAA,IAAA,GACA;AAAA,IAEHW;AAAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/StepNavigation/DefaultNavigation/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\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":["getColor","state","Pending","theme","colors","warning","Failed","negative","Completed","positive","Current","secondary","Disabled","secondary_60","Enabled","getSemantic","EXTRA_SMALL","container","avatar","SMALL","MEDIUM","LARGE","EXTRA_LARGE","stepSizes","xs","sm","md","lg","xl"],"mappings":";AAGaA,MAAAA,WAAWA,CAACC,WACtB;AAAA,EACCC,SAASC,MAAMC,OAAOC,WAAW;AAAA,EACjCC,QAAQH,MAAMC,OAAOG,YAAY;AAAA,EACjCC,WAAWL,MAAMC,OAAOK,YAAY;AAAA,EACpCC,SAASP,MAAMC,OAAOO,aAAa;AAAA,EACnCC,UAAUT,MAAMC,OAAOS,gBAAgB;AAAA,EACvCC,SAASX,MAAMC,OAAOO,aAAa;AACrC,GAAEV,KAAK;AAEIc,MAAAA,cAAcA,CAACd,WACzB;AAAA,EACCC,SAAS;AAAA,EACTI,QAAQ;AAAA,EACRE,WAAW;AAAA,EACXE,SAAS;AAAA,EACTE,UAAU;AAAA,EACVE,SAAS;AACX,GAAEb,KAAK;AAET,MAAMe,cAAc;AAAA,EAAEC,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAChD,MAAMC,QAAQ;AAAA,EAAEF,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAC1C,MAAME,SAAS;AAAA,EAAEH,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAC3C,MAAMG,QAAQ;AAAA,EAAEJ,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAC1C,MAAMI,cAAc;AAAA,EAAEL,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAEzC,MAAMK,YAAY;AAAA,EACvBC,IAAIR;AAAAA,EACJS,IAAIN;AAAAA,EACJO,IAAIN;AAAAA,EACJO,IAAIN;AAAAA,EACJO,IAAIN;AACN;"}
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/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":["getColor","state","Pending","theme","colors","warning","Failed","negative","Completed","positive","Current","secondary","Disabled","secondary_60","Enabled","getSemantic","EXTRA_SMALL","container","avatar","SMALL","MEDIUM","LARGE","EXTRA_LARGE","stepSizes","xs","sm","md","lg","xl"],"mappings":";AAIaA,MAAAA,WAAWA,CAACC,WACtB;AAAA,EACCC,SAASC,MAAMC,OAAOC,WAAW;AAAA,EACjCC,QAAQH,MAAMC,OAAOG,YAAY;AAAA,EACjCC,WAAWL,MAAMC,OAAOK,YAAY;AAAA,EACpCC,SAASP,MAAMC,OAAOO,aAAa;AAAA,EACnCC,UAAUT,MAAMC,OAAOS,gBAAgB;AAAA,EACvCC,SAASX,MAAMC,OAAOO,aAAa;AACrC,GAAEV,KAAK;AAEIc,MAAAA,cAAcA,CAACd,WACzB;AAAA,EACCC,SAAS;AAAA,EACTI,QAAQ;AAAA,EACRE,WAAW;AAAA,EACXE,SAAS;AAAA,EACTE,UAAU;AAAA,EACVE,SAAS;AACX,GAAEb,KAAK;AAET,MAAMe,cAAc;AAAA,EAAEC,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAChD,MAAMC,QAAQ;AAAA,EAAEF,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAC1C,MAAME,SAAS;AAAA,EAAEH,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAC3C,MAAMG,QAAQ;AAAA,EAAEJ,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAC1C,MAAMI,cAAc;AAAA,EAAEL,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAEzC,MAAMK,YAAY;AAAA,EACvBC,IAAIR;AAAAA,EACJS,IAAIN;AAAAA,EACJO,IAAIN;AAAAA,EACJO,IAAIN;AAAAA,EACJO,IAAIN;AACN;"}

package/dist/esm/components/StepNavigation/SimpleNavigation/SimpleNavigation.js

@@ -41,7 +41,7 @@ const HvSimpleNavigation = ({
         minWidth,
         maxWidth,
         getColor,
-        height: (activeTheme == null ? void 0 : activeTheme.stepNavigation.simpleSeparatorHeight) || 0
+        height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0
       },
       stepValues: {
         minSize: dotSize,

package/dist/esm/components/StepNavigation/SimpleNavigation/SimpleNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleNavigation.js","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n  HvBaseProps,\n  HvTheme,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvDot, HvDotProps } from \"./Dot\";\nimport { getColor, dotSizes } 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    }) => { variant: string; title: string }\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":["HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","others","activeTheme","useTheme","dotSize","dotSizes","StepComponent","HvDot","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","variant","title","navWidth","separatorValues","getColor","height","stepNavigation","simpleSeparatorHeight","stepValues","minSize","maxSize"],"mappings":";;;;AAiDO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAG3BC,QAAAA,UAAUC,SAASR,QAAQ;AACjC,QAAMS,gBAAgBC;AAGhBC,QAAAA,cAAcZ,WAAW,OAAOQ;AAChC,QAAA;AAAA,IAAEK;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBZ,iBAAiBS,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IAAIJ,aAAaN,UAAU,MAAMO,cAAc;AAGrE,QAAMK,QAAQhB;AAERiB,QAAAA,SAASnB,UAAU,CAAC;AAAA,IAAEoB;AAAAA,IAAUC;AAAAA,EAAAA,OAAc;AAAA,IAClDC,SAAS;AAAA,IACTC,OAAQ,GAAEF,MAAO,KAAID,QAAS;AAAA,IAC9BR;AAAAA,EACA,EAAA;AAGA,SAAA,qBAAC,OAAI,EAAA,GAAIT,QACNgB,UAAAA;AAAAA,IAAAA;AAAAA,IACD,oBAAC,SACK,GAAA;AAAA,MACFT;AAAAA,MACAc,UAAUb;AAAAA,MACVc,iBAAiB;AAAA,QACfR;AAAAA,QACAH;AAAAA,QACAY;AAAAA,QACAC,SAAQvB,2CAAawB,eAAeC,0BAAyB;AAAA,MAC/D;AAAA,MACAC,YAAY;AAAA,QACVC,SAASzB;AAAAA,QACT0B,SAAS,MAAM1B;AAAAA,QACfE;AAAAA,MACF;AAAA,IAAA,GACA;AAAA,EAEN,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"SimpleNavigation.js","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n  HvBaseProps,\n  HvTheme,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvDot, HvDotProps } from \"./Dot\";\nimport { getColor, dotSizes } 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    }) => { variant: string; title: string }\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":["HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","others","activeTheme","useTheme","dotSize","dotSizes","StepComponent","HvDot","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","variant","title","navWidth","separatorValues","getColor","height","stepNavigation","simpleSeparatorHeight","stepValues","minSize","maxSize"],"mappings":";;;;AAiDO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAG3BC,QAAAA,UAAUC,SAASR,QAAQ;AACjC,QAAMS,gBAAgBC;AAGhBC,QAAAA,cAAcZ,WAAW,OAAOQ;AAChC,QAAA;AAAA,IAAEK;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBZ,iBAAiBS,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IAAIJ,aAAaN,UAAU,MAAMO,cAAc;AAGrE,QAAMK,QAAQhB;AAERiB,QAAAA,SAASnB,UAAU,CAAC;AAAA,IAAEoB;AAAAA,IAAUC;AAAAA,EAAAA,OAAc;AAAA,IAClDC,SAAS;AAAA,IACTC,OAAQ,GAAEF,MAAO,KAAID,QAAS;AAAA,IAC9BR;AAAAA,EACA,EAAA;AAGA,SAAA,qBAAC,OAAI,EAAA,GAAIT,QACNgB,UAAAA;AAAAA,IAAAA;AAAAA,IACD,oBAAC,SACK,GAAA;AAAA,MACFT;AAAAA,MACAc,UAAUb;AAAAA,MACVc,iBAAiB;AAAA,QACfR;AAAAA,QACAH;AAAAA,QACAY;AAAAA,QACAC,QAAQvB,aAAawB,eAAeC,yBAAyB;AAAA,MAC/D;AAAA,MACAC,YAAY;AAAA,QACVC,SAASzB;AAAAA,QACT0B,SAAS,MAAM1B;AAAAA,QACfE;AAAAA,MACF;AAAA,IAAA,GACA;AAAA,EAEN,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/StepNavigation/SimpleNavigation/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\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":["dotSizes","xs","sm","md","lg","xl","getColor","state","theme","colors","secondary_60","secondary"],"mappings":";AAGO,MAAMA,WAAW;AAAA,EACtBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEaC,MAAAA,WAAWA,CAACC,UACvBA,UAAU,aAAaC,MAAMC,OAAOC,eAAeF,MAAMC,OAAOE;"}
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/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":["dotSizes","xs","sm","md","lg","xl","getColor","state","theme","colors","secondary_60","secondary"],"mappings":";AAIO,MAAMA,WAAW;AAAA,EACtBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEaC,MAAAA,WAAWA,CAACC,UACvBA,UAAU,aAAaC,MAAMC,OAAOC,eAAeF,MAAMC,OAAOE;"}

package/dist/esm/components/StepNavigation/StepNavigation.js

@@ -48,7 +48,7 @@ const HvStepNavigation = ({
     height: containerSize
   }, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9TdGVwTmF2aWdhdGlvbi9TdGVwTmF2aWdhdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUdJIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9TdGVwTmF2aWdhdGlvbi9TdGVwTmF2aWdhdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQge1xuICBIdkJhc2VQcm9wcyxcbiAgSHZCcmVha3BvaW50cyxcbiAgdXNlVGhlbWUsXG4gIHVzZVdpZHRoLFxuICBIdkJveCxcbiAgSHZUb29sdGlwLFxuICBIdlR5cG9ncmFwaHksXG4gIEV4dHJhY3ROYW1lcyxcbn0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1jb3JlXCI7XG5cbmltcG9ydCB7XG4gIEh2RGVmYXVsdE5hdmlnYXRpb24sXG4gIEh2RGVmYXVsdE5hdmlnYXRpb25Qcm9wcyxcbiAgSHZTdGVwUHJvcHMsXG59IGZyb20gXCIuL0RlZmF1bHROYXZpZ2F0aW9uXCI7XG5pbXBvcnQgeyBIdlNpbXBsZU5hdmlnYXRpb24gfSBmcm9tIFwiLi9TaW1wbGVOYXZpZ2F0aW9uXCI7XG5pbXBvcnQgeyBTRVBBUkFUT1JfV0lEVEgsIFRJVExFX01BUkdJTiwgVElUTEVfV0lEVEggfSBmcm9tIFwiLi91dGlsc1wiO1xuaW1wb3J0IHsgc3RhdGljQ2xhc3NlcywgdXNlQ2xhc3NlcyB9IGZyb20gXCIuL1N0ZXBOYXZpZ2F0aW9uLnN0eWxlc1wiO1xuXG5leHBvcnQgeyBzdGF0aWNDbGFzc2VzIGFzIHN0ZXBOYXZpZ2F0aW9uQ2xhc3NlcyB9O1xuXG5leHBvcnQgdHlwZSBIdlN0ZXBOYXZpZ2F0aW9uQ2xhc3NlcyA9IEV4dHJhY3ROYW1lczx0eXBlb2YgdXNlQ2xhc3Nlcz47XG5cbmV4cG9ydCBpbnRlcmZhY2UgSHZTdGVwTmF2aWdhdGlvblByb3BzIGV4dGVuZHMgSHZCYXNlUHJvcHMge1xuICAvKiogVHlwZSBvZiBzdGVwIG5hdmlnYXRpb24uIFZhbHVlcyA9IHtcIlNpbXBsZVwiLCBcIkRlZmF1bHRcIn0gKi9cbiAgdHlwZT86IFwiU2ltcGxlXCIgfCBcIkRlZmF1bHRcIjtcbiAgLyoqIFN0ZXBzIHRvIHNob3cgb24gdGhlIGNvbXBvbmVudC4gKi9cbiAgc3RlcHM6IEFycmF5PFxuICAgIFBpY2s8XG4gICAgICBIdlN0ZXBQcm9wcyxcbiAgICAgIFwic3RhdGVcIiB8IFwidGl0bGVcIiB8IFwib25DbGlja1wiIHwgXCJjbGFzc05hbWVcIiB8IFwiZGlzYWJsZWRcIlxuICAgID4gJiB7XG4gICAgICAvKiogQ2xhc3MgbmFtZXMgdG8gb3ZlcnJpZGUgc3R5bGVzIG9uIHRoZSBzZXBhcmF0b3IgY29tcG9uZW50IGFmdGVyIHRoZSBzdGVwLiAqL1xuICAgICAgc2VwYXJhdG9yQ2xhc3NOYW1lPzogc3RyaW5nO1xuICAgICAgLyoqIENsYXNzIG5hbWVzIHRvIG92ZXJyaWRlIHN0eWxlcyBvbiB0aGUgdGl0bGUgY29tcG9uZW50IGFib3ZlIHRoZSBzdGVwLiAqL1xuICAgICAgdGl0bGVDbGFzc05hbWU/OiBzdHJpbmc7XG4gICAgfVxuICA+O1xuICAvKiogU2V0cyBvbmUgb2YgdGhlIHN0YW5kYXJkIHNpemVzIG9mIHRoZSBzdGVwcy4gKi9cbiAgc3RlcFNpemU/OiBcInhzXCIgfCBcInNtXCIgfCBcIm1kXCIgfCBcImxnXCIgfCBcInhsXCI7XG4gIC8qKiBXaWR0aCBvZiB0aGUgY29tcG9uZW50IGVsZW1lbnQgb24gZWFjaCBicmVha3BvaW50IHNjcmVlbiByZXNvbHV0aW9uLiAqL1xuICB3aWR0aD86IHsgW2JyZWFrcG9pbnQgaW4gSHZCcmVha3BvaW50c10/OiBudW1iZXIgfTtcbiAgLyoqIERlZmluZXMgZWl0aGVyIHNob3cgYSB0aXRsZSBvciBvbmx5IGEgdG9vbHRpcCBvbiBlYWNoIHN0ZXAgY29tcG9uZW50LiAqL1xuICBzaG93VGl0bGVzPzogYm9vbGVhbjtcbiAgLyoqIEEgSnNzIE9iamVjdCB1c2VkIHRvIG92ZXJyaWRlIG9yIGV4dGVuZCB0aGUgc3R5bGVzIGFwcGxpZWQgdG8gdGhlIGVtcHR5IHN0YXRlIFN0ZXBOYXZpZ2F0aW9uLiAqL1xuICBjbGFzc2VzPzogSHZTdGVwTmF2aWdhdGlvbkNsYXNzZXM7XG59XG5cbi8qKlxuICogTmF2aWdhdGlvbiBwYWdlIHdpdGggc3RlcHMuXG4gKlxuICogWW91IG5lZWQgdG8gZGVmaW5lIHRoZSA8Yj5zdGVwczxiLz4gZGlzcGxheWVkIG9uIHRoZSBjb21wb25lbnQgc28gdGhhdCBpdHNlbGYgY2FuIGJlIGRyYXduIG9uIHRoZSBVSS5cbiAqIE9uIGVhY2ggc3RlcCwgeW91IG5lZWQgdG8gZGVmaW5lIGEgPGI+c3RhdGU8L2I+IC0gJ1BlbmRpbmcnLCAnRmFpbGVkJywgJ0NvbXBsZXRlZCcsICdDdXJyZW50JywgJ0Rpc2FibGVkJyAtXG4gKiBhbmQgYSA8Yj50aXRsZTwvYj4gdG8gYmUgc2hvd24gYXMgYSB0b29sdGlwIG9yIGEgdGV4dCBhYm92ZSBvZiB0aGUgc3RlcC4gWW91IGNhbiBhbHNvOlxuICogKiBEZWZpbmUgYSA8Yj5jbGFzc05hbWU8L2I+IG9uIGVhY2ggc3RlcCBlbGVtZW50O1xuICogKiBEZWZpbmUgYSA8Yj5zZXBhcmF0b3JDbGFzc05hbWU8L2I+IHRvIHNwZWNpZnkgYSBjbGFzc05hbWUgZm9yIHRoZSBzZXBhcmF0b3IgZWxlbWVudC4gVGhlIGRlZmF1bHQgaGVpZ2h0XG4gKiB2YWx1ZXMgb2YgdGhlIHNlcGFyYXRvciBlbGVtZW50IGFyZSAycHgvM3B4IG9uICdTaW1wbGUnLydEZWZhdWx0JyBsYXlvdXRzIHJlc3BlY3RpdmVseTtcbiAqICogRGVmaW5lIGEgPGI+dGl0bGVDbGFzc05hbWU8L2I+IHRvIHNwZWNpZnkgYSBjbGFzc05hbWUgZm9yIHRoZSB0aXRsZSBhYm92ZSBlYWNoIHN0ZXAgZWxlbWVudC5cbiAqXG4gKiBGb3IgdGhlIHJvb3QgZWxlbWVudCwgeW91IGNhbjpcbiAqICogRGVmaW5lIGEgPGI+Y2xhc3NOYW1lPC9iPjtcbiAqICogQ2hvb3NlIGEgPGI+dHlwZTwvYj4gb2YgbGF5b3V0OiAnU2ltcGxlJyBvciAnRGVmYXVsdCc7XG4gKiAqIENob29zZSB0aGUgPGI+c3RlcFNpemU8L2I+IG9mIHRoZSBzdGVwIGNvbXBvbmVudDogXCJ4c1wiLCBcInNtXCIsIFwibWRcIiwgXCJsZ1wiLCBcInhsXCIuIFRoZSBkZWZhdWx0IHNpemUgd2lsbCBiZVxuICogY29ycmVzcG9uZGVudCB0byB0aGUgY3VycmVudCBtZWRpYSBicmVha3BvaW50O1xuICogKiBDaG9vc2UgZWl0aGVyIHlvdSB3YW50IHRvIDxiPnNob3dUaXRsZXM8L2I+IG5lYXIgdG8gZWFjaCBzdGVwIGNvbXBvbmVudCBvciBhIHRvb2x0aXAgb24gaG92ZXI7XG4gKiAqIERlZmluZSBhIDxiPndpZHRoPC9iPiBvZiB0aGUgY29tcG9uZW50LiBJZiB5b3UgZG9uJ3QgZGVmaW5lIGFueSB2YWx1ZSBhbmQgdGhlIHN0ZXAgY29tcG9uZW50IGhhcyBubyB0aXRsZVxuICogZGlzcGxheWVkIGFib3ZlLCB0aGUgd2lkdGggb2YgdGhlIHNlcGFyYXRvciBlbGVtZW50IHdpbGwgYmUgMTAwcHguXG4gKiBJZiB0aGUgc3RlcCBjb21wb25lbnQgaGFzIHRpdGxlcywgZWFjaCBvbmUgd2lsbCBoYXZlIDIxNXB4IG9mIHdpZHRoIGJ5IGRlZmF1bHQuXG4gKi9cbmV4cG9ydCBjb25zdCBIdlN0ZXBOYXZpZ2F0aW9uID0gKHtcbiAgY2xhc3NOYW1lLFxuICBjbGFzc2VzOiBjbGFzc2VzUHJvcCxcbiAgd2lkdGgsXG4gIHN0ZXBzLFxuICBzdGVwU2l6ZSxcbiAgc2hvd1RpdGxlcyxcbiAgdHlwZSA9IFwiRGVmYXVsdFwiLFxuICBcImFyaWEtbGFiZWxcIjogYXJpYUxhYmVsLFxuICAuLi5vdGhlcnNcbn06IEh2U3RlcE5hdmlnYXRpb25Qcm9wcykgPT4ge1xuICBjb25zdCB7IGNsYXNzZXMsIGNzcywgY3ggfSA9IHVzZUNsYXNzZXMoY2xhc3Nlc1Byb3ApO1xuXG4gIGNvbnN0IHsgYWN0aXZlVGhlbWUgfSA9IHVzZVRoZW1lKCk7XG5cbiAgLy8gY3VycmVudCBicmVha3BvaW50ICd4cycgfCAnc20nIHwgJ21kJyB8ICdsZycgfCAneGwnXG4gIGNvbnN0IGJyZWFrcG9pbnQgPSB1c2VXaWR0aCgpO1xuICAvLyBzdGVwIGNvbmZpZ3VyYXRpb25zXG4gIGNvbnN0IHN0ZXBTaXplS2V5ID1cbiAgICBzdGVwU2l6ZSA/PyAoW1wieHNcIiwgXCJzbVwiXS5pbmNsdWRlcyhicmVha3BvaW50KSA/IFwic21cIiA6IFwibWRcIik7XG4gIGNvbnN0IGhhc1RpdGxlcyA9IHNob3dUaXRsZXMgPz8gIVtcInhzXCIsIFwic21cIl0uaW5jbHVkZXMoYnJlYWtwb2ludCk7XG5cbiAgY29uc3Qgc3R5bGVkTGkgPSAoY29udGFpbmVyU2l6ZSkgPT5cbiAgICBzdHlsZWQoXCJsaVwiKSh7XG4gICAgICB3aWR0aDogY29udGFpbmVyU2l6ZSxcbiAgICAgIGhlaWdodDogY29udGFpbmVyU2l6ZSxcbiAgICB9KTtcblxuICBjb25zdCBzdHlsZWREaXYgPSAoY29udGFpbmVyU2l6ZSkgPT5cbiAgICBzdHlsZWQoXCJkaXZcIikoe1xuICAgICAgd2lkdGg6IGNvbnRhaW5lclNpemUsXG4gICAgICBoZWlnaHQ6IGNvbnRhaW5lclNpemUsXG4gICAgfSk7XG5cbiAgY29uc3Qgc3R5bGVkU2VwYXJhdG9yRWxlbWVudCA9IChcbiAgICB0aXRsZSxcbiAgICBzZXBhcmF0b3JDbGFzc05hbWUsXG4gICAgc2VwYXJhdG9ySGVpZ2h0LFxuICAgIHNlcGFyYXRvcldpZHRoLFxuICAgIGJhY2tncm91bmRDb2xvclxuICApID0+IHtcbiAgICBjb25zdCB3aWR0aFZhbHVlID1cbiAgICAgIHNlcGFyYXRvcldpZHRoIC1cbiAgICAgIDIgKlxuICAgICAgICBOdW1iZXIoXG4gICAgICAgICAgKGFjdGl2ZVRoZW1lPy5zdGVwTmF2aWdhdGlvbi5zZXBhcmF0b3JNYXJnaW4gfHwgXCIwcHhcIikucmVwbGFjZShcbiAgICAgICAgICAgIFwicHhcIixcbiAgICAgICAgICAgIFwiXCJcbiAgICAgICAgICApXG4gICAgICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGxpXG4gICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgIGtleT17YHNlcGFyYXRvci0ke3RpdGxlfWB9XG4gICAgICAgIGNsYXNzTmFtZT17Y3goXG4gICAgICAgICAgY3NzKHtcbiAgICAgICAgICAgIGhlaWdodDogc2VwYXJhdG9ySGVpZ2h0LFxuICAgICAgICAgICAgd2lkdGg6IHdpZHRoVmFsdWUsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3IsXG4gICAgICAgICAgICBtYXJnaW46IGAwICR7dGhlbWUuc3RlcE5hdmlnYXRpb24uc2VwYXJhdG9yTWFyZ2lufWAsXG4gICAgICAgICAgfSksXG4gICAgICAgICAgY2xhc3Nlcy5zZXBhcmF0b3JcbiAgICAgICAgKX1cbiAgICAgID5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e3NlcGFyYXRvckNsYXNzTmFtZX0gLz5cbiAgICAgIDwvbGk+XG4gICAgKTtcbiAgfTtcblxuICBjb25zdCBkcmF3SXRlbXMgPSAoe1xuICAgIHNlcGFyYXRvclZhbHVlczogeyBtaW5XaWR0aCwgbWF4V2lkdGgsIGdldENvbG9yLCBoZWlnaHQgfSxcbiAgICBzdGVwVmFsdWVzOiB7IG1pblNpemUsIG1heFNpemUsIFN0ZXBDb21wb25lbnQgfSxcbiAgfTogYW55KSA9PiB7XG4gICAgY29uc3QgaXRlbXMgPSBzdGVwcy5yZWR1Y2U8UmVhY3ROb2RlW10+KFxuICAgICAgKGFjYywgeyBzdGF0ZSwgdGl0bGUsIHNlcGFyYXRvckNsYXNzTmFtZSwgLi4ucHJvcHMgfSwgaW5kZXgpOiBhbnkgPT4ge1xuICAgICAgICBjb25zdCBjb250YWluZXJTaXplID0gc3RhdGUgPT09IFwiQ3VycmVudFwiID8gbWF4U2l6ZSA6IG1pblNpemU7XG4gICAgICAgIGNvbnN0IFN0ZXBDb250YWluZXIgPSBzdHlsZWRMaShjb250YWluZXJTaXplKTtcbiAgICAgICAgY29uc3QgU3RlcCA9IHN0eWxlZERpdihNYXRoLm1heChjb250YWluZXJTaXplLCAzMCkpO1xuICAgICAgICBjb25zdCBzdGVwUHJvcHMgPSB7XG4gICAgICAgICAgLi4ue1xuICAgICAgICAgICAgc2l6ZTogc3RlcFNpemVLZXksXG4gICAgICAgICAgICBzdGF0ZSxcbiAgICAgICAgICAgIHRpdGxlLFxuICAgICAgICAgICAgbnVtYmVyOiBpbmRleCArIDEsXG4gICAgICAgICAgICAuLi5wcm9wcyxcbiAgICAgICAgICB9LFxuICAgICAgICB9O1xuICAgICAgICBjb25zdCBzdGVwRWxlbWVudCA9IChcbiAgICAgICAgICA8U3RlcENvbnRhaW5lciBrZXk9e2BzdGVwLSR7dGl0bGV9YH0gY2xhc3NOYW1lPXtjbGFzc2VzLmxpfT5cbiAgICAgICAgICAgIHtoYXNUaXRsZXMgPyAoXG4gICAgICAgICAgICAgIDxTdGVwQ29tcG9uZW50XG4gICAgICAgICAgICAgICAga2V5PXtgc3RlcC0ke3RpdGxlfWB9XG4gICAgICAgICAgICAgICAgYXJpYS1sYWJlbD17YCR7dGl0bGV9YH1cbiAgICAgICAgICAgICAgICB7Li4uc3RlcFByb3BzfVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICAgPEh2VG9vbHRpcFxuICAgICAgICAgICAgICAgIHBsYWNlbWVudD1cImJvdHRvbVwiXG4gICAgICAgICAgICAgICAgdGl0bGU9ezxIdlR5cG9ncmFwaHk+e2Ake2luZGV4ICsgMX0uICR7dGl0bGV9YH08L0h2VHlwb2dyYXBoeT59XG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgICAgICAgPFN0ZXAgY2xhc3NOYW1lPXtjbGFzc2VzLmxpfT5cbiAgICAgICAgICAgICAgICAgICAgPFN0ZXBDb21wb25lbnQgYXJpYS1sYWJlbD17YCR7dGl0bGV9YH0gey4uLnN0ZXBQcm9wc30gLz5cbiAgICAgICAgICAgICAgICAgIDwvU3RlcD5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgPC9IdlRvb2x0aXA+XG4gICAgICAgICAgICApfVxuICAgICAgICAgIDwvU3RlcENvbnRhaW5lcj5cbiAgICAgICAgKTtcbiAgICAgICAgaWYgKGluZGV4IDwgc3RlcHMubGVuZ3RoIC0gMSkge1xuICAgICAgICAgIGNvbnN0IHNlcGFyYXRvckVsZW1lbnQgPSBzdHlsZWRTZXBhcmF0b3JFbGVtZW50KFxuICAgICAgICAgICAgdGl0bGUsXG4gICAgICAgICAgICBzZXBhcmF0b3JDbGFzc05hbWUsXG4gICAgICAgICAgICBoZWlnaHQsXG4gICAgICAgICAgICBbc3RlcHNbaW5kZXggKyAxXS5zdGF0ZSwgc3RhdGVdLmluY2x1ZGVzKFwiQ3VycmVudFwiKVxuICAgICAgICAgICAgICA/IG1pbldpZHRoXG4gICAgICAgICAgICAgIDogbWF4V2lkdGgsXG4gICAgICAgICAgICBnZXRDb2xvcihcbiAgICAgICAgICAgICAgc3RlcHNbaW5kZXggKyAxXS5zdGF0ZSA9PT0gXCJEaXNhYmxlZFwiID8gXCJEaXNhYmxlZFwiIDogc3RhdGUsXG4gICAgICAgICAgICAgIHRoZW1lXG4gICAgICAgICAgICApXG4gICAgICAgICAgKTtcbiAgICAgICAgICByZXR1cm4gWy4uLmFjYywgc3RlcEVsZW1lbnQsIHNlcGFyYXRvckVsZW1lbnRdO1xuICAgICAgICB9XG4gICAgICAgIHJldHVybiBbLi4uYWNjLCBzdGVwRWxlbWVudF07XG4gICAgICB9LFxuICAgICAgW11cbiAgICApO1xuXG4gICAgcmV0dXJuIDxvbCBjbGFzc05hbWU9e2NsYXNzZXMub2x9PntpdGVtc308L29sPjtcbiAgfTtcblxuICBjb25zdCBnZXREeW5hbWljVmFsdWVzOiBIdkRlZmF1bHROYXZpZ2F0aW9uUHJvcHNbXCJnZXREeW5hbWljVmFsdWVzXCJdID0gKFxuICAgIHN0ZXBzV2lkdGhcbiAgKSA9PiB7XG4gICAgY29uc3QgdGhlbWVCcmVha3BvaW50cyA9IGFjdGl2ZVRoZW1lPy5icmVha3BvaW50cy52YWx1ZXMgfHwge307XG4gICAgY29uc3QgbWF4V2lkdGggPVxuICAgICAgd2lkdGg/LlticmVha3BvaW50XSA/P1xuICAgICAgTWF0aC5tYXgoXG4gICAgICAgIE51bWJlcihoYXNUaXRsZXMpICogKFRJVExFX1dJRFRIICsgVElUTEVfTUFSR0lOKSAqIHN0ZXBzLmxlbmd0aCAtXG4gICAgICAgICAgVElUTEVfTUFSR0lOLFxuICAgICAgICBTRVBBUkFUT1JfV0lEVEggKiAoc3RlcHMubGVuZ3RoIC0gMSkgKyBzdGVwc1dpZHRoXG4gICAgICApO1xuICAgIGNvbnN0IG5leHQgPSBPYmplY3Qua2V5cyh0aGVtZUJyZWFrcG9pbnRzKS5maW5kKChfLCBpbmRleCwgc2VsZikgPT5cbiAgICAgIGluZGV4IC0gMSA+PSAwID8gc2VsZltpbmRleCAtIDFdID09PSBicmVha3BvaW50IDogZmFsc2VcbiAgICApO1xuICAgIGNvbnN0IG5hdldpZHRoID0gTWF0aC5taW4oXG4gICAgICBtYXhXaWR0aCxcbiAgICAgIG5leHQgPyB0aGVtZUJyZWFrcG9pbnRzW25leHRdIDogbWF4V2lkdGhcbiAgICApO1xuICAgIGNvbnN0IHRpdGxlV2lkdGggPVxuICAgICAgTnVtYmVyKGhhc1RpdGxlcykgKiBNYXRoLmNlaWwoKG5hdldpZHRoICsgVElUTEVfTUFSR0lOKSAvIHN0ZXBzLmxlbmd0aCk7XG4gICAgY29uc3Qgc2VwYXJhdG9yV2lkdGggPVxuICAgICAgTnVtYmVyKCFoYXNUaXRsZXMpICpcbiAgICAgIE1hdGguY2VpbCgobmF2V2lkdGggLSBzdGVwc1dpZHRoKSAvIChzdGVwcy5sZW5ndGggLSAxKSk7XG4gICAgcmV0dXJuIHsgd2lkdGg6IG5hdldpZHRoLCB0aXRsZVdpZHRoLCBzZXBhcmF0b3JXaWR0aCB9O1xuICB9O1xuXG4gIGNvbnN0IGdldFRpdGxlcyA9IChnZXRUaXRsZVByb3BzKSA9PlxuICAgIGhhc1RpdGxlcyA/IChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtjbGFzc2VzLnRpdGxlc30+XG4gICAgICAgIHtzdGVwcy5tYXAoKHsgdGl0bGU6IHJhd1RpdGxlLCBzdGF0ZSwgdGl0bGVDbGFzc05hbWUgfSwgaW5kZXgpID0+IHtcbiAgICAgICAgICBjb25zdCB7XG4gICAgICAgICAgICB2YXJpYW50ID0gXCJsYWJlbFwiLFxuICAgICAgICAgICAgdGl0bGUgPSByYXdUaXRsZSxcbiAgICAgICAgICAgIHRpdGxlV2lkdGggPSAwLFxuICAgICAgICAgICAgdGl0bGVEaXNhYmxlZCA9IGZhbHNlLFxuICAgICAgICAgIH0gPSBnZXRUaXRsZVByb3BzKHtcbiAgICAgICAgICAgIHN0YXRlLFxuICAgICAgICAgICAgcmF3VGl0bGUsXG4gICAgICAgICAgICBudW1iZXI6IGluZGV4ICsgMSxcbiAgICAgICAgICB9KTtcblxuICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8SHZUeXBvZ3JhcGh5XG4gICAgICAgICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT17Y3goXG4gICAgICAgICAgICAgICAgY3NzKHtcbiAgICAgICAgICAgICAgICAgIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgICAgICAgICAgICAgICAgIHdpZHRoOiB0aXRsZVdpZHRoIC0gVElUTEVfTUFSR0lOLFxuICAgICAgICAgICAgICAgICAgbWFyZ2luUmlnaHQ6IFRJVExFX01BUkdJTixcbiAgICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICAgICAgICB0aXRsZUNsYXNzTmFtZVxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICBkaXNhYmxlZD17dGl0bGVEaXNhYmxlZH1cbiAgICAgICAgICAgICAga2V5PXt0aXRsZX1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgICAgPC9IdlR5cG9ncmFwaHk+XG4gICAgICAgICAgKTtcbiAgICAgICAgfSl9XG4gICAgICA8L2Rpdj5cbiAgICApIDogbnVsbDtcblxuICBjb25zdCBTdGVwTmF2aWdhdGlvbiA9IHtcbiAgICBEZWZhdWx0OiBIdkRlZmF1bHROYXZpZ2F0aW9uLFxuICAgIFNpbXBsZTogSHZTaW1wbGVOYXZpZ2F0aW9uLFxuICB9W3R5cGVdO1xuXG4gIHJldHVybiAoXG4gICAgPFN0ZXBOYXZpZ2F0aW9uXG4gICAgICBudW1TdGVwcz17c3RlcHMubGVuZ3RofVxuICAgICAgc3RlcFNpemU9e3N0ZXBTaXplS2V5fVxuICAgICAgZ2V0VGl0bGVzPXtnZXRUaXRsZXN9XG4gICAgICBnZXREeW5hbWljVmFsdWVzPXtnZXREeW5hbWljVmFsdWVzfVxuICAgICAgY2xhc3NOYW1lPXtjeChjbGFzc2VzLnJvb3QsIGNsYXNzTmFtZSl9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgID5cbiAgICAgIHsoeyBzdGVwc1dpZHRoLCBuYXZXaWR0aCwgLi4uaXRlbXNQcm9wcyB9KSA9PiAoXG4gICAgICAgIDxIdkJveFxuICAgICAgICAgIGNvbXBvbmVudD1cIm5hdlwiXG4gICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgIHdpZHRoOiBgJHtuYXZXaWR0aH1weGAsXG4gICAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgfX1cbiAgICAgICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgICAgID5cbiAgICAgICAgICB7ZHJhd0l0ZW1zKGl0ZW1zUHJvcHMpfVxuICAgICAgICA8L0h2Qm94PlxuICAgICAgKX1cbiAgICA8L1N0ZXBOYXZpZ2F0aW9uPlxuICApO1xufTtcbiJdfQ== */");
   const styledSeparatorElement = (title, separatorClassName, separatorHeight, separatorWidth, backgroundColor) => {
-    const widthValue = separatorWidth - 2 * Number(((activeTheme == null ? void 0 : activeTheme.stepNavigation.separatorMargin) || "0px").replace("px", ""));
+    const widthValue = separatorWidth - 2 * Number((activeTheme?.stepNavigation.separatorMargin || "0px").replace("px", ""));
     return /* @__PURE__ */ jsx("li", { "aria-hidden": true, className: cx(css({
       height: separatorHeight,
       width: widthValue,
@@ -97,8 +97,8 @@ const HvStepNavigation = ({
     return /* @__PURE__ */ jsx("ol", { className: classes.ol, children: items });
   };
   const getDynamicValues = (stepsWidth) => {
-    const themeBreakpoints = (activeTheme == null ? void 0 : activeTheme.breakpoints.values) || {};
-    const maxWidth = (width == null ? void 0 : width[breakpoint]) ?? Math.max(Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN, SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth);
+    const themeBreakpoints = activeTheme?.breakpoints.values || {};
+    const maxWidth = width?.[breakpoint] ?? Math.max(Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN, SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth);
     const next = Object.keys(themeBreakpoints).find((_, index, self) => index - 1 >= 0 ? self[index - 1] === breakpoint : false);
     const navWidth = Math.min(maxWidth, next ? themeBreakpoints[next] : maxWidth);
     const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);