@hitachivantara/uikit-react-lab 5.30.2 → 5.30.3

package/dist/cjs/Blade/Blade.cjs

@@ -68,7 +68,7 @@ const HvBlade = (props) => {
     },
     [handleAction]
   );
-  const id = uikitReactCore.useUniqueId(idProp, "hvblade");
+  const id = uikitReactCore.useUniqueId(idProp);
   const bladeHeaderId = uikitReactCore.setId(id, "button");
   const bladeContainerId = uikitReactCore.setId(id, "container");
   const bladeHeader = React.useMemo(() => {

package/dist/cjs/Blade/Blade.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Blade.cjs","sources":["../../../src/Blade/Blade.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n  HvTypographyVariants,\n  setId,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blade.styles\";\n\nexport { staticClasses as bladeClasses };\n\nexport type HvBladeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * The content that will be rendered within the blade.\n   */\n  children: React.ReactNode;\n\n  /**\n   * The content of the blade's button.\n   *\n   * If a render function is provided, it will be called with the expanded state as an argument.\n   */\n  label?: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n  /**\n   * Typography variant for the blade's button label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * Heading Level to apply to blade button.\n   *\n   * If 'undefined', the button will not have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Indicates whether the blade is expanded or not.\n   *\n   * When defined the expanded state becomes controlled.\n   *\n   * @default undefined\n   */\n  expanded?: boolean;\n  /**\n   * Specifies the initial expanded state of the blade when it is uncontrolled.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback function triggered when the blade's button is pressed.\n   * It receives the event and the new expanded state as arguments.\n   *\n   * If the blade is uncontrolled, this new state will be effective.\n   * If the blade is controlled, it is up to the parent component to manage this state.\n   *\n   * @param {SyntheticEvent} event The event source of the callback.\n   * @param {boolean} value The new value.\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n\n  /**\n   * Specifies whether the blade is disabled. If true, the blade cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If true, the blade will take up the maximum width of the container when expanded.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Props to be passed to the button that toggles the blade's expanded state.\n   * This can be used to further customize the appearance or behavior of the blade's button,\n   * e.g. to set the aria-label attribute.\n   */\n  buttonProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Props to be passed to the container div that holds the blade's children.\n   * This can be used to further customize the appearance or behavior of the blade's content area.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBladeClasses;\n}\n\n/**\n * A blade is a design element that expands horizontally to reveal information, similar to an accordion.\n *\n * It is usually stacked horizontally with other blades and works best when used within a flex container.\n * The `HvBlades` component is recommended for this purpose, as it also provides better management of the\n * blades' expanded state.\n */\nexport const HvBlade = (props: HvBladeProps) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    expanded,\n    defaultExpanded = false,\n    label,\n    labelVariant = \"label\",\n    headingLevel,\n    onChange,\n    disabled = false,\n    children,\n    fullWidth,\n    buttonProps,\n    containerProps,\n    ...others\n  } = useDefaultProps(\"HvBlade\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isExpanded, setIsExpanded] = useControlled(\n    expanded,\n    Boolean(defaultExpanded)\n  );\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, !isExpanded);\n\n        // This will only run if uncontrolled\n        setIsExpanded(!isExpanded);\n\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isExpanded, setIsExpanded]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const id = useUniqueId(idProp, \"hvblade\");\n  const bladeHeaderId = setId(id, \"button\");\n  const bladeContainerId = setId(id, \"container\");\n  const bladeHeader = useMemo(() => {\n    const buttonLabel = typeof label === \"function\" ? label(isExpanded) : label;\n\n    const bladeButton = (\n      <HvTypography\n        id={bladeHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.button, {\n          [classes.disabled]: disabled,\n          [classes.textOnlyLabel]: typeof buttonLabel === \"string\",\n        })}\n        style={{ flexShrink: headingLevel === undefined ? 0 : undefined }}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isExpanded}\n        aria-controls={bladeContainerId}\n        {...buttonProps}\n      >\n        {buttonLabel}\n      </HvTypography>\n    );\n    return headingLevel === undefined ? (\n      bladeButton\n    ) : (\n      <HvTypography\n        component={`h${headingLevel}`}\n        variant={labelVariant}\n        className={classes.heading}\n        style={{ flexShrink: 0 }}\n      >\n        {bladeButton}\n      </HvTypography>\n    );\n  }, [\n    bladeContainerId,\n    bladeHeaderId,\n    buttonProps,\n    classes.button,\n    classes.disabled,\n    classes.heading,\n    classes.textOnlyLabel,\n    cx,\n    disabled,\n    handleClick,\n    handleKeyDown,\n    headingLevel,\n    isExpanded,\n    label,\n    labelVariant,\n  ]);\n\n  const bladeRef = useRef<HTMLDivElement>(null);\n  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n  useEffect(() => {\n    if (bladeRef.current) {\n      const resizeObserver = new ResizeObserver((entries) => {\n        setMaxWidth(entries[0].target.clientWidth);\n      });\n      resizeObserver.observe(\n        // using the blade's container as reference max-width is more stable\n        bladeRef.current.parentElement ?? bladeRef.current\n      );\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n  }, [isExpanded]);\n\n  const { style: containerStyle, ...otherContainerProps } =\n    containerProps || {};\n\n  return (\n    <div\n      ref={bladeRef}\n      id={idProp}\n      className={cx(classes.root, className, {\n        [classes.fullWidth]: fullWidth,\n        [classes.expanded]: isExpanded,\n      })}\n      {...others}\n    >\n      {bladeHeader}\n      <div\n        id={bladeContainerId}\n        role=\"region\"\n        aria-labelledby={bladeHeaderId}\n        className={classes.container}\n        hidden={!isExpanded}\n        style={{\n          ...containerStyle,\n          maxWidth: isExpanded ? maxWidth : 0,\n        }}\n        {...otherContainerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useControlled","useCallback","useUniqueId","setId","useMemo","jsx","HvTypography","useRef","useState","useEffect","jsxs"],"mappings":"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"}
+{"version":3,"file":"Blade.cjs","sources":["../../../src/Blade/Blade.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n  HvTypographyVariants,\n  setId,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blade.styles\";\n\nexport { staticClasses as bladeClasses };\n\nexport type HvBladeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * The content that will be rendered within the blade.\n   */\n  children: React.ReactNode;\n\n  /**\n   * The content of the blade's button.\n   *\n   * If a render function is provided, it will be called with the expanded state as an argument.\n   */\n  label?: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n  /**\n   * Typography variant for the blade's button label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * Heading Level to apply to blade button.\n   *\n   * If 'undefined', the button will not have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Indicates whether the blade is expanded or not.\n   *\n   * When defined the expanded state becomes controlled.\n   *\n   * @default undefined\n   */\n  expanded?: boolean;\n  /**\n   * Specifies the initial expanded state of the blade when it is uncontrolled.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback function triggered when the blade's button is pressed.\n   * It receives the event and the new expanded state as arguments.\n   *\n   * If the blade is uncontrolled, this new state will be effective.\n   * If the blade is controlled, it is up to the parent component to manage this state.\n   *\n   * @param {SyntheticEvent} event The event source of the callback.\n   * @param {boolean} value The new value.\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n\n  /**\n   * Specifies whether the blade is disabled. If true, the blade cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If true, the blade will take up the maximum width of the container when expanded.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Props to be passed to the button that toggles the blade's expanded state.\n   * This can be used to further customize the appearance or behavior of the blade's button,\n   * e.g. to set the aria-label attribute.\n   */\n  buttonProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Props to be passed to the container div that holds the blade's children.\n   * This can be used to further customize the appearance or behavior of the blade's content area.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBladeClasses;\n}\n\n/**\n * A blade is a design element that expands horizontally to reveal information, similar to an accordion.\n *\n * It is usually stacked horizontally with other blades and works best when used within a flex container.\n * The `HvBlades` component is recommended for this purpose, as it also provides better management of the\n * blades' expanded state.\n */\nexport const HvBlade = (props: HvBladeProps) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    expanded,\n    defaultExpanded = false,\n    label,\n    labelVariant = \"label\",\n    headingLevel,\n    onChange,\n    disabled = false,\n    children,\n    fullWidth,\n    buttonProps,\n    containerProps,\n    ...others\n  } = useDefaultProps(\"HvBlade\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isExpanded, setIsExpanded] = useControlled(\n    expanded,\n    Boolean(defaultExpanded)\n  );\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, !isExpanded);\n\n        // This will only run if uncontrolled\n        setIsExpanded(!isExpanded);\n\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isExpanded, setIsExpanded]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const id = useUniqueId(idProp);\n  const bladeHeaderId = setId(id, \"button\");\n  const bladeContainerId = setId(id, \"container\");\n  const bladeHeader = useMemo(() => {\n    const buttonLabel = typeof label === \"function\" ? label(isExpanded) : label;\n\n    const bladeButton = (\n      <HvTypography\n        id={bladeHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.button, {\n          [classes.disabled]: disabled,\n          [classes.textOnlyLabel]: typeof buttonLabel === \"string\",\n        })}\n        style={{ flexShrink: headingLevel === undefined ? 0 : undefined }}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isExpanded}\n        aria-controls={bladeContainerId}\n        {...buttonProps}\n      >\n        {buttonLabel}\n      </HvTypography>\n    );\n    return headingLevel === undefined ? (\n      bladeButton\n    ) : (\n      <HvTypography\n        component={`h${headingLevel}`}\n        variant={labelVariant}\n        className={classes.heading}\n        style={{ flexShrink: 0 }}\n      >\n        {bladeButton}\n      </HvTypography>\n    );\n  }, [\n    bladeContainerId,\n    bladeHeaderId,\n    buttonProps,\n    classes.button,\n    classes.disabled,\n    classes.heading,\n    classes.textOnlyLabel,\n    cx,\n    disabled,\n    handleClick,\n    handleKeyDown,\n    headingLevel,\n    isExpanded,\n    label,\n    labelVariant,\n  ]);\n\n  const bladeRef = useRef<HTMLDivElement>(null);\n  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n  useEffect(() => {\n    if (bladeRef.current) {\n      const resizeObserver = new ResizeObserver((entries) => {\n        setMaxWidth(entries[0].target.clientWidth);\n      });\n      resizeObserver.observe(\n        // using the blade's container as reference max-width is more stable\n        bladeRef.current.parentElement ?? bladeRef.current\n      );\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n  }, [isExpanded]);\n\n  const { style: containerStyle, ...otherContainerProps } =\n    containerProps || {};\n\n  return (\n    <div\n      ref={bladeRef}\n      id={idProp}\n      className={cx(classes.root, className, {\n        [classes.fullWidth]: fullWidth,\n        [classes.expanded]: isExpanded,\n      })}\n      {...others}\n    >\n      {bladeHeader}\n      <div\n        id={bladeContainerId}\n        role=\"region\"\n        aria-labelledby={bladeHeaderId}\n        className={classes.container}\n        hidden={!isExpanded}\n        style={{\n          ...containerStyle,\n          maxWidth: isExpanded ? maxWidth : 0,\n        }}\n        {...otherContainerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useControlled","useCallback","useUniqueId","setId","useMemo","jsx","HvTypography","useRef","useState","useEffect","jsxs"],"mappings":"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"}

package/dist/cjs/Flow/DroppableFlow.cjs

@@ -73,7 +73,7 @@ const HvDroppableFlow = ({
   ...others
 }) => {
   const { classes, cx } = Flow_styles.useClasses(classesProp);
-  const elementId = uikitReactCore.useUniqueId(id, "hvFlow");
+  const elementId = uikitReactCore.useUniqueId(id);
   const reactFlowInstance = useFlowInstance.useFlowInstance();
   const { nodeTypes } = useFlowContext.useFlowContext();
   const [nodes, setNodes] = React.useState(initialNodes);

package/dist/cjs/Flow/DroppableFlow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DroppableFlow.cjs","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\nimport { Global } from \"@emotion/react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvFlowNodeInputGroup,\n  HvFlowNodeMetaRegistry,\n  HvFlowNodeOutputGroup,\n} from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext, useFlowInstance } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edges: Edge[],\n  connection: Connection,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n  const {\n    source: sourceId,\n    sourceHandle,\n    target: targetId,\n    targetHandle,\n  } = connection;\n\n  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;\n\n  const sourceNode = getNode(nodes, sourceId);\n  const targetNode = getNode(nodes, targetId);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeMetaRegistry[targetId]?.inputs || [];\n  const outputs = nodeMetaRegistry[sourceId]?.outputs || [];\n\n  const source = outputs\n    .map((out) => (out as HvFlowNodeOutputGroup).outputs || out)\n    .flat()\n    .find((out) => out.id === sourceHandle);\n  const target = inputs\n    .map((inp) => (inp as HvFlowNodeInputGroup).inputs || inp)\n    .flat()\n    .find((inp) => inp.id === targetHandle);\n\n  const sourceProvides = source?.provides || \"\";\n  const targetAccepts = target?.accepts || [];\n  const sourceMaxConnections = source?.maxConnections;\n  const targetMaxConnections = target?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) => edg.target === targetId && edg.targetHandle === targetHandle\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle\n    ).length;\n\n    isValid = sourceConnections < sourceMaxConnections;\n  }\n\n  return isValid;\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvFlow\");\n\n  const reactFlowInstance = useFlowInstance();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n  // Keeping track of nodes and edges for onFlowChange since useState is async\n  const nodesRef = useRef(initialNodes);\n  const edgesRef = useRef(initialEdges);\n\n  const updateNodes = (nds: Node[]) => {\n    setNodes(nds);\n    nodesRef.current = nds;\n  };\n\n  const updateEdges = (eds: Edge[]) => {\n    setEdges(eds);\n    edgesRef.current = eds;\n  };\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n        return;\n      }\n\n      // Position node in the flow\n      const position = reactFlowInstance.screenToFlowPosition({\n        x: hvFlow?.x || 0,\n        y: hvFlow?.y || 0,\n      });\n\n      // Node data\n      const data = hvFlow?.data || {};\n\n      // Node to add\n      const newNode: Node = {\n        id: uid(),\n        position,\n        data,\n        type,\n      };\n\n      // Drop override\n      if (onDndDrop) {\n        onDndDrop(event, newNode);\n        return;\n      }\n\n      updateNodes(nodes.concat(newNode));\n    },\n    [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (nds: Node[], eds: Edge[]) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onConnectProp?.(connection);\n    },\n    [handleFlowChange, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodesRef.current);\n      updateNodes(nds);\n\n      handleFlowChange(nds, edgesRef.current);\n      onNodesChangeProp?.(changes);\n    },\n    [handleFlowChange, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [handleFlowChange, onEdgesChangeProp]\n  );\n\n  const { registry } = useNodeMetaRegistry();\n\n  const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":["useClasses","useUniqueId","useFlowInstance","useFlowContext","useState","useRef","useDroppable","useCallback","uid","useDndMonitor","addEdge","applyNodeChanges","applyEdgeChanges","useNodeMetaRegistry","MarkerType","jsxs","Fragment","jsx","Global","flowStyles","ReactFlow"],"mappings":"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"}
+{"version":3,"file":"DroppableFlow.cjs","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\nimport { Global } from \"@emotion/react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvFlowNodeInputGroup,\n  HvFlowNodeMetaRegistry,\n  HvFlowNodeOutputGroup,\n} from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext, useFlowInstance } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edges: Edge[],\n  connection: Connection,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n  const {\n    source: sourceId,\n    sourceHandle,\n    target: targetId,\n    targetHandle,\n  } = connection;\n\n  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;\n\n  const sourceNode = getNode(nodes, sourceId);\n  const targetNode = getNode(nodes, targetId);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeMetaRegistry[targetId]?.inputs || [];\n  const outputs = nodeMetaRegistry[sourceId]?.outputs || [];\n\n  const source = outputs\n    .map((out) => (out as HvFlowNodeOutputGroup).outputs || out)\n    .flat()\n    .find((out) => out.id === sourceHandle);\n  const target = inputs\n    .map((inp) => (inp as HvFlowNodeInputGroup).inputs || inp)\n    .flat()\n    .find((inp) => inp.id === targetHandle);\n\n  const sourceProvides = source?.provides || \"\";\n  const targetAccepts = target?.accepts || [];\n  const sourceMaxConnections = source?.maxConnections;\n  const targetMaxConnections = target?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) => edg.target === targetId && edg.targetHandle === targetHandle\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle\n    ).length;\n\n    isValid = sourceConnections < sourceMaxConnections;\n  }\n\n  return isValid;\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const reactFlowInstance = useFlowInstance();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n  // Keeping track of nodes and edges for onFlowChange since useState is async\n  const nodesRef = useRef(initialNodes);\n  const edgesRef = useRef(initialEdges);\n\n  const updateNodes = (nds: Node[]) => {\n    setNodes(nds);\n    nodesRef.current = nds;\n  };\n\n  const updateEdges = (eds: Edge[]) => {\n    setEdges(eds);\n    edgesRef.current = eds;\n  };\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n        return;\n      }\n\n      // Position node in the flow\n      const position = reactFlowInstance.screenToFlowPosition({\n        x: hvFlow?.x || 0,\n        y: hvFlow?.y || 0,\n      });\n\n      // Node data\n      const data = hvFlow?.data || {};\n\n      // Node to add\n      const newNode: Node = {\n        id: uid(),\n        position,\n        data,\n        type,\n      };\n\n      // Drop override\n      if (onDndDrop) {\n        onDndDrop(event, newNode);\n        return;\n      }\n\n      updateNodes(nodes.concat(newNode));\n    },\n    [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (nds: Node[], eds: Edge[]) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onConnectProp?.(connection);\n    },\n    [handleFlowChange, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodesRef.current);\n      updateNodes(nds);\n\n      handleFlowChange(nds, edgesRef.current);\n      onNodesChangeProp?.(changes);\n    },\n    [handleFlowChange, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [handleFlowChange, onEdgesChangeProp]\n  );\n\n  const { registry } = useNodeMetaRegistry();\n\n  const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":["useClasses","useUniqueId","useFlowInstance","useFlowContext","useState","useRef","useDroppable","useCallback","uid","useDndMonitor","addEdge","applyNodeChanges","applyEdgeChanges","useNodeMetaRegistry","MarkerType","jsxs","Fragment","jsx","Global","flowStyles","ReactFlow"],"mappings":"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"}

package/dist/cjs/Flow/Sidebar/Sidebar.cjs

@@ -44,8 +44,8 @@ const HvFlowSidebar = ({
     setGroups(unfilteredGroups);
   }, [unfilteredGroups]);
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
-  const drawerElementId = uikitReactCore.useUniqueId(id, "hvFlowSidebarDrawer");
-  const groupsElementId = uikitReactCore.useUniqueId(id, "hvFlowSidebarGroups");
+  const drawerElementId = uikitReactCore.useUniqueId(id);
+  const groupsElementId = uikitReactCore.useUniqueId(id);
   const { setNodeRef } = core.useDroppable({
     id: drawerElementId
   });

package/dist/cjs/Flow/Sidebar/Sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { useDebounceCallback } from \"usehooks-ts\";\nimport {\n  DndContextProps,\n  DragOverlay,\n  DragOverlayProps,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  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 {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowSidebarGroupItem,\n} from \"./SidebarGroup/SidebarGroupItem\";\nimport { HvFlowNodeGroup } from \"../types\";\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?: Partial<typeof DEFAULT_LABELS>;\n  /**\n   * Dnd Kit drag overlay props for customization.\n   *\n   * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).\n   */\n  dragOverlayProps?: DragOverlayProps;\n  /** Props to be applied to the default nodes group. */\n  defaultGroupProps?: HvFlowNodeGroup;\n}\n\nconst DEFAULT_LABELS = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  dragOverlayProps,\n  defaultGroupProps,\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, defaultGroupProps),\n    [nodeGroups, nodeTypes, defaultGroupProps]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n  const [ndTypes, setNdTypes] = useState(nodeTypes);\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    if (nodeGroups) {\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    } else if (nodeTypes) {\n      const filteredNodeTypes = {};\n      for (const [key, node] of Object.entries(nodeTypes)) {\n        if (\n          node.meta?.label\n            .toLocaleLowerCase()\n            .includes(value.toLocaleLowerCase())\n        ) {\n          filteredNodeTypes[key] = node;\n        }\n      }\n      setNdTypes(value ? filteredNodeTypes : nodeTypes);\n    }\n  };\n\n  const handleDebouncedSearch = useDebounceCallback(handleSearch, 500);\n\n  return (\n    <HvDrawer\n      BackdropComponent={undefined}\n      variant=\"persistent\"\n      classes={{\n        paper: classes.drawerPaper,\n      }}\n      showBackdrop={false}\n      anchor={anchor}\n      buttonTitle={buttonTitle}\n      {...others}\n    >\n      <div id={drawerElementId} ref={setNodeRef}>\n        <div className={classes.titleContainer}>\n          <Add role=\"none\" />\n          <HvTypography component=\"p\" variant=\"title3\">\n            {title}\n          </HvTypography>\n        </div>\n        <div className={classes.contentContainer}>\n          <HvTypography className={classes.description}>\n            {description}\n          </HvTypography>\n          <HvInput\n            className={classes.searchRoot}\n            type=\"search\"\n            placeholder={labels?.searchPlaceholder}\n            aria-label={labels?.searchAriaLabel}\n            aria-controls={groupsElementId}\n            aria-owns={groupsElementId}\n            onChange={handleDebouncedSearch}\n            inputProps={{ autoComplete: \"off\" }}\n          />\n          {nodeGroups ? (\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          ) : (\n            ndTypes &&\n            Object.entries(ndTypes).map((obj) => {\n              return (\n                <HvFlowDraggableSidebarGroupItem\n                  key={obj[0]}\n                  id={obj[0]}\n                  type={obj[0]}\n                  label={obj[1]?.meta?.label || \"\"}\n                  data={obj[1]?.meta?.data}\n                  aria-roledescription={labels?.itemAriaRoleDescription}\n                  className={classes.nodeType}\n                />\n              );\n            })\n          )}\n        </div>\n      </div>\n      <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </HvDrawer>\n  );\n};\n"],"names":["useClasses","useFlowContext","useMemo","buildGroups","useState","useEffect","useLabels","useUniqueId","useDroppable","useDndMonitor","useDebounceCallback","jsxs","HvDrawer","jsx","Add","HvTypography","HvInput","HvFlowSidebarGroup","HvFlowDraggableSidebarGroupItem","DragOverlay","restrictToWindowEdges","HvFlowSidebarGroupItem"],"mappings":"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"}
+{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { useDebounceCallback } from \"usehooks-ts\";\nimport {\n  DndContextProps,\n  DragOverlay,\n  DragOverlayProps,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  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 {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowSidebarGroupItem,\n} from \"./SidebarGroup/SidebarGroupItem\";\nimport { HvFlowNodeGroup } from \"../types\";\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?: Partial<typeof DEFAULT_LABELS>;\n  /**\n   * Dnd Kit drag overlay props for customization.\n   *\n   * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).\n   */\n  dragOverlayProps?: DragOverlayProps;\n  /** Props to be applied to the default nodes group. */\n  defaultGroupProps?: HvFlowNodeGroup;\n}\n\nconst DEFAULT_LABELS = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  dragOverlayProps,\n  defaultGroupProps,\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, defaultGroupProps),\n    [nodeGroups, nodeTypes, defaultGroupProps]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n  const [ndTypes, setNdTypes] = useState(nodeTypes);\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);\n  const groupsElementId = useUniqueId(id);\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    if (nodeGroups) {\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    } else if (nodeTypes) {\n      const filteredNodeTypes = {};\n      for (const [key, node] of Object.entries(nodeTypes)) {\n        if (\n          node.meta?.label\n            .toLocaleLowerCase()\n            .includes(value.toLocaleLowerCase())\n        ) {\n          filteredNodeTypes[key] = node;\n        }\n      }\n      setNdTypes(value ? filteredNodeTypes : nodeTypes);\n    }\n  };\n\n  const handleDebouncedSearch = useDebounceCallback(handleSearch, 500);\n\n  return (\n    <HvDrawer\n      BackdropComponent={undefined}\n      variant=\"persistent\"\n      classes={{\n        paper: classes.drawerPaper,\n      }}\n      showBackdrop={false}\n      anchor={anchor}\n      buttonTitle={buttonTitle}\n      {...others}\n    >\n      <div id={drawerElementId} ref={setNodeRef}>\n        <div className={classes.titleContainer}>\n          <Add role=\"none\" />\n          <HvTypography component=\"p\" variant=\"title3\">\n            {title}\n          </HvTypography>\n        </div>\n        <div className={classes.contentContainer}>\n          <HvTypography className={classes.description}>\n            {description}\n          </HvTypography>\n          <HvInput\n            className={classes.searchRoot}\n            type=\"search\"\n            placeholder={labels?.searchPlaceholder}\n            aria-label={labels?.searchAriaLabel}\n            aria-controls={groupsElementId}\n            aria-owns={groupsElementId}\n            onChange={handleDebouncedSearch}\n            inputProps={{ autoComplete: \"off\" }}\n          />\n          {nodeGroups ? (\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          ) : (\n            ndTypes &&\n            Object.entries(ndTypes).map((obj) => {\n              return (\n                <HvFlowDraggableSidebarGroupItem\n                  key={obj[0]}\n                  id={obj[0]}\n                  type={obj[0]}\n                  label={obj[1]?.meta?.label || \"\"}\n                  data={obj[1]?.meta?.data}\n                  aria-roledescription={labels?.itemAriaRoleDescription}\n                  className={classes.nodeType}\n                />\n              );\n            })\n          )}\n        </div>\n      </div>\n      <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </HvDrawer>\n  );\n};\n"],"names":["useClasses","useFlowContext","useMemo","buildGroups","useState","useEffect","useLabels","useUniqueId","useDroppable","useDndMonitor","useDebounceCallback","jsxs","HvDrawer","jsx","Add","HvTypography","HvInput","HvFlowSidebarGroup","HvFlowDraggableSidebarGroupItem","DragOverlay","restrictToWindowEdges","HvFlowSidebarGroupItem"],"mappings":"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"}

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs

@@ -14,7 +14,7 @@ const HvFlowDraggableSidebarGroupItem = ({
   ...others
 }) => {
   const itemRef = React.useRef(null);
-  const elementId = uikitReactCore.useUniqueId(id, `hvFlowDraggableItem-${type}`);
+  const elementId = uikitReactCore.useUniqueId(id);
   const { attributes, listeners, setNodeRef, isDragging, transform } = core.useDraggable({
     id: elementId,
     data: {

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableSidebarGroupItem.cjs","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\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":["useRef","useUniqueId","useDraggable","useForkRef","jsx","HvFlowSidebarGroupItem"],"mappings":";;;;;;;;AAqBO,MAAM,kCAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4C;AACpC,QAAA,UAAUA,aAAoB,IAAI;AAExC,QAAM,YAAYC,eAAAA,YAAY,IAAI,uBAAuB,IAAI,EAAE;AAE/D,QAAM,EAAE,YAAY,WAAW,YAAY,YAAY,cACrDC,kBAAa;AAAA,IACX,IAAI;AAAA,IACJ,MAAM;AAAA,MACJ,QAAQ;AAAA;AAAA,QAEN;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA,QAC5C,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA;AAAA,QAE5C;AAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AAEG,QAAA,YAAYC,MAAAA,WAAW,SAAS,UAAU;AAEhD,QAAM,QAAQ,YACV;AAAA,IACE,WAAW,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,EAEzD,IAAA;AAGF,SAAAC,2BAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;"}
+{"version":3,"file":"DraggableSidebarGroupItem.cjs","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\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  const elementId = useUniqueId(id);\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":["useRef","useUniqueId","useDraggable","useForkRef","jsx","HvFlowSidebarGroupItem"],"mappings":";;;;;;;;AAqBO,MAAM,kCAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4C;AACpC,QAAA,UAAUA,aAAoB,IAAI;AAClC,QAAA,YAAYC,2BAAY,EAAE;AAEhC,QAAM,EAAE,YAAY,WAAW,YAAY,YAAY,cACrDC,kBAAa;AAAA,IACX,IAAI;AAAA,IACJ,MAAM;AAAA,MACJ,QAAQ;AAAA;AAAA,QAEN;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA,QAC5C,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA;AAAA,QAE5C;AAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AAEG,QAAA,YAAYC,MAAAA,WAAW,SAAS,UAAU;AAEhD,QAAM,QAAQ,YACV;AAAA,IACE,WAAW,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,EAEzD,IAAA;AAGF,SAAAC,2BAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;"}

package/dist/esm/Blade/Blade.js

@@ -67,7 +67,7 @@ const HvBlade = (props) => {
     },
     [handleAction]
   );
-  const id = useUniqueId(idProp, "hvblade");
+  const id = useUniqueId(idProp);
   const bladeHeaderId = setId(id, "button");
   const bladeContainerId = setId(id, "container");
   const bladeHeader = useMemo(() => {

package/dist/esm/Blade/Blade.js.map

@@ -1 +1 @@
-{"version":3,"file":"Blade.js","sources":["../../../src/Blade/Blade.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n  HvTypographyVariants,\n  setId,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blade.styles\";\n\nexport { staticClasses as bladeClasses };\n\nexport type HvBladeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * The content that will be rendered within the blade.\n   */\n  children: React.ReactNode;\n\n  /**\n   * The content of the blade's button.\n   *\n   * If a render function is provided, it will be called with the expanded state as an argument.\n   */\n  label?: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n  /**\n   * Typography variant for the blade's button label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * Heading Level to apply to blade button.\n   *\n   * If 'undefined', the button will not have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Indicates whether the blade is expanded or not.\n   *\n   * When defined the expanded state becomes controlled.\n   *\n   * @default undefined\n   */\n  expanded?: boolean;\n  /**\n   * Specifies the initial expanded state of the blade when it is uncontrolled.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback function triggered when the blade's button is pressed.\n   * It receives the event and the new expanded state as arguments.\n   *\n   * If the blade is uncontrolled, this new state will be effective.\n   * If the blade is controlled, it is up to the parent component to manage this state.\n   *\n   * @param {SyntheticEvent} event The event source of the callback.\n   * @param {boolean} value The new value.\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n\n  /**\n   * Specifies whether the blade is disabled. If true, the blade cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If true, the blade will take up the maximum width of the container when expanded.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Props to be passed to the button that toggles the blade's expanded state.\n   * This can be used to further customize the appearance or behavior of the blade's button,\n   * e.g. to set the aria-label attribute.\n   */\n  buttonProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Props to be passed to the container div that holds the blade's children.\n   * This can be used to further customize the appearance or behavior of the blade's content area.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBladeClasses;\n}\n\n/**\n * A blade is a design element that expands horizontally to reveal information, similar to an accordion.\n *\n * It is usually stacked horizontally with other blades and works best when used within a flex container.\n * The `HvBlades` component is recommended for this purpose, as it also provides better management of the\n * blades' expanded state.\n */\nexport const HvBlade = (props: HvBladeProps) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    expanded,\n    defaultExpanded = false,\n    label,\n    labelVariant = \"label\",\n    headingLevel,\n    onChange,\n    disabled = false,\n    children,\n    fullWidth,\n    buttonProps,\n    containerProps,\n    ...others\n  } = useDefaultProps(\"HvBlade\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isExpanded, setIsExpanded] = useControlled(\n    expanded,\n    Boolean(defaultExpanded)\n  );\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, !isExpanded);\n\n        // This will only run if uncontrolled\n        setIsExpanded(!isExpanded);\n\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isExpanded, setIsExpanded]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const id = useUniqueId(idProp, \"hvblade\");\n  const bladeHeaderId = setId(id, \"button\");\n  const bladeContainerId = setId(id, \"container\");\n  const bladeHeader = useMemo(() => {\n    const buttonLabel = typeof label === \"function\" ? label(isExpanded) : label;\n\n    const bladeButton = (\n      <HvTypography\n        id={bladeHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.button, {\n          [classes.disabled]: disabled,\n          [classes.textOnlyLabel]: typeof buttonLabel === \"string\",\n        })}\n        style={{ flexShrink: headingLevel === undefined ? 0 : undefined }}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isExpanded}\n        aria-controls={bladeContainerId}\n        {...buttonProps}\n      >\n        {buttonLabel}\n      </HvTypography>\n    );\n    return headingLevel === undefined ? (\n      bladeButton\n    ) : (\n      <HvTypography\n        component={`h${headingLevel}`}\n        variant={labelVariant}\n        className={classes.heading}\n        style={{ flexShrink: 0 }}\n      >\n        {bladeButton}\n      </HvTypography>\n    );\n  }, [\n    bladeContainerId,\n    bladeHeaderId,\n    buttonProps,\n    classes.button,\n    classes.disabled,\n    classes.heading,\n    classes.textOnlyLabel,\n    cx,\n    disabled,\n    handleClick,\n    handleKeyDown,\n    headingLevel,\n    isExpanded,\n    label,\n    labelVariant,\n  ]);\n\n  const bladeRef = useRef<HTMLDivElement>(null);\n  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n  useEffect(() => {\n    if (bladeRef.current) {\n      const resizeObserver = new ResizeObserver((entries) => {\n        setMaxWidth(entries[0].target.clientWidth);\n      });\n      resizeObserver.observe(\n        // using the blade's container as reference max-width is more stable\n        bladeRef.current.parentElement ?? bladeRef.current\n      );\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n  }, [isExpanded]);\n\n  const { style: containerStyle, ...otherContainerProps } =\n    containerProps || {};\n\n  return (\n    <div\n      ref={bladeRef}\n      id={idProp}\n      className={cx(classes.root, className, {\n        [classes.fullWidth]: fullWidth,\n        [classes.expanded]: isExpanded,\n      })}\n      {...others}\n    >\n      {bladeHeader}\n      <div\n        id={bladeContainerId}\n        role=\"region\"\n        aria-labelledby={bladeHeaderId}\n        className={classes.container}\n        hidden={!isExpanded}\n        style={{\n          ...containerStyle,\n          maxWidth: isExpanded ? maxWidth : 0,\n        }}\n        {...otherContainerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Blade.js","sources":["../../../src/Blade/Blade.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n  HvTypographyVariants,\n  setId,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blade.styles\";\n\nexport { staticClasses as bladeClasses };\n\nexport type HvBladeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * The content that will be rendered within the blade.\n   */\n  children: React.ReactNode;\n\n  /**\n   * The content of the blade's button.\n   *\n   * If a render function is provided, it will be called with the expanded state as an argument.\n   */\n  label?: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n  /**\n   * Typography variant for the blade's button label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * Heading Level to apply to blade button.\n   *\n   * If 'undefined', the button will not have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Indicates whether the blade is expanded or not.\n   *\n   * When defined the expanded state becomes controlled.\n   *\n   * @default undefined\n   */\n  expanded?: boolean;\n  /**\n   * Specifies the initial expanded state of the blade when it is uncontrolled.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback function triggered when the blade's button is pressed.\n   * It receives the event and the new expanded state as arguments.\n   *\n   * If the blade is uncontrolled, this new state will be effective.\n   * If the blade is controlled, it is up to the parent component to manage this state.\n   *\n   * @param {SyntheticEvent} event The event source of the callback.\n   * @param {boolean} value The new value.\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n\n  /**\n   * Specifies whether the blade is disabled. If true, the blade cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If true, the blade will take up the maximum width of the container when expanded.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Props to be passed to the button that toggles the blade's expanded state.\n   * This can be used to further customize the appearance or behavior of the blade's button,\n   * e.g. to set the aria-label attribute.\n   */\n  buttonProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Props to be passed to the container div that holds the blade's children.\n   * This can be used to further customize the appearance or behavior of the blade's content area.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBladeClasses;\n}\n\n/**\n * A blade is a design element that expands horizontally to reveal information, similar to an accordion.\n *\n * It is usually stacked horizontally with other blades and works best when used within a flex container.\n * The `HvBlades` component is recommended for this purpose, as it also provides better management of the\n * blades' expanded state.\n */\nexport const HvBlade = (props: HvBladeProps) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    expanded,\n    defaultExpanded = false,\n    label,\n    labelVariant = \"label\",\n    headingLevel,\n    onChange,\n    disabled = false,\n    children,\n    fullWidth,\n    buttonProps,\n    containerProps,\n    ...others\n  } = useDefaultProps(\"HvBlade\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isExpanded, setIsExpanded] = useControlled(\n    expanded,\n    Boolean(defaultExpanded)\n  );\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, !isExpanded);\n\n        // This will only run if uncontrolled\n        setIsExpanded(!isExpanded);\n\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isExpanded, setIsExpanded]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const id = useUniqueId(idProp);\n  const bladeHeaderId = setId(id, \"button\");\n  const bladeContainerId = setId(id, \"container\");\n  const bladeHeader = useMemo(() => {\n    const buttonLabel = typeof label === \"function\" ? label(isExpanded) : label;\n\n    const bladeButton = (\n      <HvTypography\n        id={bladeHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.button, {\n          [classes.disabled]: disabled,\n          [classes.textOnlyLabel]: typeof buttonLabel === \"string\",\n        })}\n        style={{ flexShrink: headingLevel === undefined ? 0 : undefined }}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isExpanded}\n        aria-controls={bladeContainerId}\n        {...buttonProps}\n      >\n        {buttonLabel}\n      </HvTypography>\n    );\n    return headingLevel === undefined ? (\n      bladeButton\n    ) : (\n      <HvTypography\n        component={`h${headingLevel}`}\n        variant={labelVariant}\n        className={classes.heading}\n        style={{ flexShrink: 0 }}\n      >\n        {bladeButton}\n      </HvTypography>\n    );\n  }, [\n    bladeContainerId,\n    bladeHeaderId,\n    buttonProps,\n    classes.button,\n    classes.disabled,\n    classes.heading,\n    classes.textOnlyLabel,\n    cx,\n    disabled,\n    handleClick,\n    handleKeyDown,\n    headingLevel,\n    isExpanded,\n    label,\n    labelVariant,\n  ]);\n\n  const bladeRef = useRef<HTMLDivElement>(null);\n  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n  useEffect(() => {\n    if (bladeRef.current) {\n      const resizeObserver = new ResizeObserver((entries) => {\n        setMaxWidth(entries[0].target.clientWidth);\n      });\n      resizeObserver.observe(\n        // using the blade's container as reference max-width is more stable\n        bladeRef.current.parentElement ?? bladeRef.current\n      );\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n  }, [isExpanded]);\n\n  const { style: containerStyle, ...otherContainerProps } =\n    containerProps || {};\n\n  return (\n    <div\n      ref={bladeRef}\n      id={idProp}\n      className={cx(classes.root, className, {\n        [classes.fullWidth]: fullWidth,\n        [classes.expanded]: isExpanded,\n      })}\n      {...others}\n    >\n      {bladeHeader}\n      <div\n        id={bladeContainerId}\n        role=\"region\"\n        aria-labelledby={bladeHeaderId}\n        className={classes.container}\n        hidden={!isExpanded}\n        style={{\n          ...containerStyle,\n          maxWidth: isExpanded ? maxWidth : 0,\n        }}\n        {...otherContainerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Flow/DroppableFlow.js

@@ -70,7 +70,7 @@ const HvDroppableFlow = ({
   ...others
 }) => {
   const { classes, cx } = useClasses(classesProp);
-  const elementId = useUniqueId(id, "hvFlow");
+  const elementId = useUniqueId(id);
   const reactFlowInstance = useFlowInstance();
   const { nodeTypes } = useFlowContext();
   const [nodes, setNodes] = useState(initialNodes);

package/dist/esm/Flow/DroppableFlow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\nimport { Global } from \"@emotion/react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvFlowNodeInputGroup,\n  HvFlowNodeMetaRegistry,\n  HvFlowNodeOutputGroup,\n} from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext, useFlowInstance } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edges: Edge[],\n  connection: Connection,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n  const {\n    source: sourceId,\n    sourceHandle,\n    target: targetId,\n    targetHandle,\n  } = connection;\n\n  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;\n\n  const sourceNode = getNode(nodes, sourceId);\n  const targetNode = getNode(nodes, targetId);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeMetaRegistry[targetId]?.inputs || [];\n  const outputs = nodeMetaRegistry[sourceId]?.outputs || [];\n\n  const source = outputs\n    .map((out) => (out as HvFlowNodeOutputGroup).outputs || out)\n    .flat()\n    .find((out) => out.id === sourceHandle);\n  const target = inputs\n    .map((inp) => (inp as HvFlowNodeInputGroup).inputs || inp)\n    .flat()\n    .find((inp) => inp.id === targetHandle);\n\n  const sourceProvides = source?.provides || \"\";\n  const targetAccepts = target?.accepts || [];\n  const sourceMaxConnections = source?.maxConnections;\n  const targetMaxConnections = target?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) => edg.target === targetId && edg.targetHandle === targetHandle\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle\n    ).length;\n\n    isValid = sourceConnections < sourceMaxConnections;\n  }\n\n  return isValid;\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvFlow\");\n\n  const reactFlowInstance = useFlowInstance();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n  // Keeping track of nodes and edges for onFlowChange since useState is async\n  const nodesRef = useRef(initialNodes);\n  const edgesRef = useRef(initialEdges);\n\n  const updateNodes = (nds: Node[]) => {\n    setNodes(nds);\n    nodesRef.current = nds;\n  };\n\n  const updateEdges = (eds: Edge[]) => {\n    setEdges(eds);\n    edgesRef.current = eds;\n  };\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n        return;\n      }\n\n      // Position node in the flow\n      const position = reactFlowInstance.screenToFlowPosition({\n        x: hvFlow?.x || 0,\n        y: hvFlow?.y || 0,\n      });\n\n      // Node data\n      const data = hvFlow?.data || {};\n\n      // Node to add\n      const newNode: Node = {\n        id: uid(),\n        position,\n        data,\n        type,\n      };\n\n      // Drop override\n      if (onDndDrop) {\n        onDndDrop(event, newNode);\n        return;\n      }\n\n      updateNodes(nodes.concat(newNode));\n    },\n    [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (nds: Node[], eds: Edge[]) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onConnectProp?.(connection);\n    },\n    [handleFlowChange, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodesRef.current);\n      updateNodes(nds);\n\n      handleFlowChange(nds, edgesRef.current);\n      onNodesChangeProp?.(changes);\n    },\n    [handleFlowChange, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [handleFlowChange, onEdgesChangeProp]\n  );\n\n  const { registry } = useNodeMetaRegistry();\n\n  const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\nimport { Global } from \"@emotion/react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvFlowNodeInputGroup,\n  HvFlowNodeMetaRegistry,\n  HvFlowNodeOutputGroup,\n} from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext, useFlowInstance } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edges: Edge[],\n  connection: Connection,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n  const {\n    source: sourceId,\n    sourceHandle,\n    target: targetId,\n    targetHandle,\n  } = connection;\n\n  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;\n\n  const sourceNode = getNode(nodes, sourceId);\n  const targetNode = getNode(nodes, targetId);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeMetaRegistry[targetId]?.inputs || [];\n  const outputs = nodeMetaRegistry[sourceId]?.outputs || [];\n\n  const source = outputs\n    .map((out) => (out as HvFlowNodeOutputGroup).outputs || out)\n    .flat()\n    .find((out) => out.id === sourceHandle);\n  const target = inputs\n    .map((inp) => (inp as HvFlowNodeInputGroup).inputs || inp)\n    .flat()\n    .find((inp) => inp.id === targetHandle);\n\n  const sourceProvides = source?.provides || \"\";\n  const targetAccepts = target?.accepts || [];\n  const sourceMaxConnections = source?.maxConnections;\n  const targetMaxConnections = target?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) => edg.target === targetId && edg.targetHandle === targetHandle\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle\n    ).length;\n\n    isValid = sourceConnections < sourceMaxConnections;\n  }\n\n  return isValid;\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const reactFlowInstance = useFlowInstance();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n  // Keeping track of nodes and edges for onFlowChange since useState is async\n  const nodesRef = useRef(initialNodes);\n  const edgesRef = useRef(initialEdges);\n\n  const updateNodes = (nds: Node[]) => {\n    setNodes(nds);\n    nodesRef.current = nds;\n  };\n\n  const updateEdges = (eds: Edge[]) => {\n    setEdges(eds);\n    edgesRef.current = eds;\n  };\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n        return;\n      }\n\n      // Position node in the flow\n      const position = reactFlowInstance.screenToFlowPosition({\n        x: hvFlow?.x || 0,\n        y: hvFlow?.y || 0,\n      });\n\n      // Node data\n      const data = hvFlow?.data || {};\n\n      // Node to add\n      const newNode: Node = {\n        id: uid(),\n        position,\n        data,\n        type,\n      };\n\n      // Drop override\n      if (onDndDrop) {\n        onDndDrop(event, newNode);\n        return;\n      }\n\n      updateNodes(nodes.concat(newNode));\n    },\n    [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (nds: Node[], eds: Edge[]) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onConnectProp?.(connection);\n    },\n    [handleFlowChange, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodesRef.current);\n      updateNodes(nds);\n\n      handleFlowChange(nds, edgesRef.current);\n      onNodesChangeProp?.(changes);\n    },\n    [handleFlowChange, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [handleFlowChange, onEdgesChangeProp]\n  );\n\n  const { registry } = useNodeMetaRegistry();\n\n  const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -43,8 +43,8 @@ const HvFlowSidebar = ({
     setGroups(unfilteredGroups);
   }, [unfilteredGroups]);
   const labels = useLabels(DEFAULT_LABELS, labelsProps);
-  const drawerElementId = useUniqueId(id, "hvFlowSidebarDrawer");
-  const groupsElementId = useUniqueId(id, "hvFlowSidebarGroups");
+  const drawerElementId = useUniqueId(id);
+  const groupsElementId = useUniqueId(id);
   const { setNodeRef } = useDroppable({
     id: drawerElementId
   });

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../src/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { useDebounceCallback } from \"usehooks-ts\";\nimport {\n  DndContextProps,\n  DragOverlay,\n  DragOverlayProps,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  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 {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowSidebarGroupItem,\n} from \"./SidebarGroup/SidebarGroupItem\";\nimport { HvFlowNodeGroup } from \"../types\";\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?: Partial<typeof DEFAULT_LABELS>;\n  /**\n   * Dnd Kit drag overlay props for customization.\n   *\n   * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).\n   */\n  dragOverlayProps?: DragOverlayProps;\n  /** Props to be applied to the default nodes group. */\n  defaultGroupProps?: HvFlowNodeGroup;\n}\n\nconst DEFAULT_LABELS = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  dragOverlayProps,\n  defaultGroupProps,\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, defaultGroupProps),\n    [nodeGroups, nodeTypes, defaultGroupProps]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n  const [ndTypes, setNdTypes] = useState(nodeTypes);\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    if (nodeGroups) {\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    } else if (nodeTypes) {\n      const filteredNodeTypes = {};\n      for (const [key, node] of Object.entries(nodeTypes)) {\n        if (\n          node.meta?.label\n            .toLocaleLowerCase()\n            .includes(value.toLocaleLowerCase())\n        ) {\n          filteredNodeTypes[key] = node;\n        }\n      }\n      setNdTypes(value ? filteredNodeTypes : nodeTypes);\n    }\n  };\n\n  const handleDebouncedSearch = useDebounceCallback(handleSearch, 500);\n\n  return (\n    <HvDrawer\n      BackdropComponent={undefined}\n      variant=\"persistent\"\n      classes={{\n        paper: classes.drawerPaper,\n      }}\n      showBackdrop={false}\n      anchor={anchor}\n      buttonTitle={buttonTitle}\n      {...others}\n    >\n      <div id={drawerElementId} ref={setNodeRef}>\n        <div className={classes.titleContainer}>\n          <Add role=\"none\" />\n          <HvTypography component=\"p\" variant=\"title3\">\n            {title}\n          </HvTypography>\n        </div>\n        <div className={classes.contentContainer}>\n          <HvTypography className={classes.description}>\n            {description}\n          </HvTypography>\n          <HvInput\n            className={classes.searchRoot}\n            type=\"search\"\n            placeholder={labels?.searchPlaceholder}\n            aria-label={labels?.searchAriaLabel}\n            aria-controls={groupsElementId}\n            aria-owns={groupsElementId}\n            onChange={handleDebouncedSearch}\n            inputProps={{ autoComplete: \"off\" }}\n          />\n          {nodeGroups ? (\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          ) : (\n            ndTypes &&\n            Object.entries(ndTypes).map((obj) => {\n              return (\n                <HvFlowDraggableSidebarGroupItem\n                  key={obj[0]}\n                  id={obj[0]}\n                  type={obj[0]}\n                  label={obj[1]?.meta?.label || \"\"}\n                  data={obj[1]?.meta?.data}\n                  aria-roledescription={labels?.itemAriaRoleDescription}\n                  className={classes.nodeType}\n                />\n              );\n            })\n          )}\n        </div>\n      </div>\n      <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </HvDrawer>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { useDebounceCallback } from \"usehooks-ts\";\nimport {\n  DndContextProps,\n  DragOverlay,\n  DragOverlayProps,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  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 {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowSidebarGroupItem,\n} from \"./SidebarGroup/SidebarGroupItem\";\nimport { HvFlowNodeGroup } from \"../types\";\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?: Partial<typeof DEFAULT_LABELS>;\n  /**\n   * Dnd Kit drag overlay props for customization.\n   *\n   * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).\n   */\n  dragOverlayProps?: DragOverlayProps;\n  /** Props to be applied to the default nodes group. */\n  defaultGroupProps?: HvFlowNodeGroup;\n}\n\nconst DEFAULT_LABELS = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  dragOverlayProps,\n  defaultGroupProps,\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, defaultGroupProps),\n    [nodeGroups, nodeTypes, defaultGroupProps]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n  const [ndTypes, setNdTypes] = useState(nodeTypes);\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);\n  const groupsElementId = useUniqueId(id);\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    if (nodeGroups) {\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    } else if (nodeTypes) {\n      const filteredNodeTypes = {};\n      for (const [key, node] of Object.entries(nodeTypes)) {\n        if (\n          node.meta?.label\n            .toLocaleLowerCase()\n            .includes(value.toLocaleLowerCase())\n        ) {\n          filteredNodeTypes[key] = node;\n        }\n      }\n      setNdTypes(value ? filteredNodeTypes : nodeTypes);\n    }\n  };\n\n  const handleDebouncedSearch = useDebounceCallback(handleSearch, 500);\n\n  return (\n    <HvDrawer\n      BackdropComponent={undefined}\n      variant=\"persistent\"\n      classes={{\n        paper: classes.drawerPaper,\n      }}\n      showBackdrop={false}\n      anchor={anchor}\n      buttonTitle={buttonTitle}\n      {...others}\n    >\n      <div id={drawerElementId} ref={setNodeRef}>\n        <div className={classes.titleContainer}>\n          <Add role=\"none\" />\n          <HvTypography component=\"p\" variant=\"title3\">\n            {title}\n          </HvTypography>\n        </div>\n        <div className={classes.contentContainer}>\n          <HvTypography className={classes.description}>\n            {description}\n          </HvTypography>\n          <HvInput\n            className={classes.searchRoot}\n            type=\"search\"\n            placeholder={labels?.searchPlaceholder}\n            aria-label={labels?.searchAriaLabel}\n            aria-controls={groupsElementId}\n            aria-owns={groupsElementId}\n            onChange={handleDebouncedSearch}\n            inputProps={{ autoComplete: \"off\" }}\n          />\n          {nodeGroups ? (\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          ) : (\n            ndTypes &&\n            Object.entries(ndTypes).map((obj) => {\n              return (\n                <HvFlowDraggableSidebarGroupItem\n                  key={obj[0]}\n                  id={obj[0]}\n                  type={obj[0]}\n                  label={obj[1]?.meta?.label || \"\"}\n                  data={obj[1]?.meta?.data}\n                  aria-roledescription={labels?.itemAriaRoleDescription}\n                  className={classes.nodeType}\n                />\n              );\n            })\n          )}\n        </div>\n      </div>\n      <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </HvDrawer>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -12,7 +12,7 @@ const HvFlowDraggableSidebarGroupItem = ({
   ...others
 }) => {
   const itemRef = useRef(null);
-  const elementId = useUniqueId(id, `hvFlowDraggableItem-${type}`);
+  const elementId = useUniqueId(id);
   const { attributes, listeners, setNodeRef, isDragging, transform } = useDraggable({
     id: elementId,
     data: {

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

@@ -1 +1 @@
-{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\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":[],"mappings":";;;;;;AAqBO,MAAM,kCAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4C;AACpC,QAAA,UAAU,OAAoB,IAAI;AAExC,QAAM,YAAY,YAAY,IAAI,uBAAuB,IAAI,EAAE;AAE/D,QAAM,EAAE,YAAY,WAAW,YAAY,YAAY,cACrD,aAAa;AAAA,IACX,IAAI;AAAA,IACJ,MAAM;AAAA,MACJ,QAAQ;AAAA;AAAA,QAEN;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA,QAC5C,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA;AAAA,QAE5C;AAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AAEG,QAAA,YAAY,WAAW,SAAS,UAAU;AAEhD,QAAM,QAAQ,YACV;AAAA,IACE,WAAW,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,EAEzD,IAAA;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\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  const elementId = useUniqueId(id);\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":[],"mappings":";;;;;;AAqBO,MAAM,kCAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4C;AACpC,QAAA,UAAU,OAAoB,IAAI;AAClC,QAAA,YAAY,YAAY,EAAE;AAEhC,QAAM,EAAE,YAAY,WAAW,YAAY,YAAY,cACrD,aAAa;AAAA,IACX,IAAI;AAAA,IACJ,MAAM;AAAA,MACJ,QAAQ;AAAA;AAAA,QAEN;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA,QAC5C,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA;AAAA,QAE5C;AAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AAEG,QAAA,YAAY,WAAW,SAAS,UAAU;AAEhD,QAAM,QAAQ,YACV;AAAA,IACE,WAAW,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,EAEzD,IAAA;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.30.2",
+  "version": "5.30.3",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -32,7 +32,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.58.1",
+    "@hitachivantara/uikit-react-core": "^5.58.2",
     "@hitachivantara/uikit-react-icons": "^5.9.0",
     "@hitachivantara/uikit-styles": "^5.23.0",
     "@types/react-grid-layout": "^1.3.5",
@@ -49,7 +49,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "8730994c50c5d4554af1d56170a8cfa624a56dcf",
+  "gitHead": "95f420943b3e408ac56bb5f929f466ef99bf78b0",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {