@hitachivantara/uikit-react-lab 5.43.3 → 5.43.4

package/dist/cjs/Blade/Blade.cjs

@@ -125,18 +125,17 @@ const HvBlade = (props) => {
   const bladeRef = react.useRef(null);
   const [maxWidth, setMaxWidth] = react.useState(void 0);
   react.useEffect(() => {
-    if (bladeRef.current) {
-      const resizeObserver = new ResizeObserver((entries) => {
-        setMaxWidth(entries[0].target.clientWidth);
-      });
-      resizeObserver.observe(
-        // using the blade's container as reference max-width is more stable
-        bladeRef.current.parentElement ?? bladeRef.current
-      );
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
+    if (!bladeRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      setMaxWidth(entries[0].target.clientWidth);
+    });
+    resizeObserver.observe(
+      // using the blade's container as reference max-width is more stable
+      bladeRef.current.parentElement ?? bladeRef.current
+    );
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, [isExpanded]);
   const { style: containerStyle, ...otherContainerProps } = containerProps || {};
   return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/cjs/Flow/hooks/useFlowNodeMeta.cjs

@@ -5,8 +5,6 @@ const useNodeId = require("./useNodeId.cjs");
 function useFlowNodeMeta(id) {
   const nodeId = useNodeId.useNodeId(id);
   const { registry } = NodeMetaContext.useNodeMetaRegistry();
-  if (nodeId) {
-    return registry[nodeId];
-  }
+  return registry[nodeId];
 }
 exports.useFlowNodeMeta = useFlowNodeMeta;

package/dist/cjs/StepNavigation/StepNavigation.cjs

@@ -6,8 +6,8 @@ const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const StepNavigation_styles = require("./StepNavigation.styles.cjs");
 const utils = require("./utils.cjs");
-const DefaultNavigation = require("./DefaultNavigation/DefaultNavigation.cjs");
 const SimpleNavigation = require("./SimpleNavigation/SimpleNavigation.cjs");
+const DefaultNavigation = require("./DefaultNavigation/DefaultNavigation.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const HvStepNavigation = ({

package/dist/esm/Blade/Blade.js

@@ -124,18 +124,17 @@ const HvBlade = (props) => {
   const bladeRef = useRef(null);
   const [maxWidth, setMaxWidth] = useState(void 0);
   useEffect(() => {
-    if (bladeRef.current) {
-      const resizeObserver = new ResizeObserver((entries) => {
-        setMaxWidth(entries[0].target.clientWidth);
-      });
-      resizeObserver.observe(
-        // using the blade's container as reference max-width is more stable
-        bladeRef.current.parentElement ?? bladeRef.current
-      );
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
+    if (!bladeRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      setMaxWidth(entries[0].target.clientWidth);
+    });
+    resizeObserver.observe(
+      // using the blade's container as reference max-width is more stable
+      bladeRef.current.parentElement ?? bladeRef.current
+    );
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, [isExpanded]);
   const { style: containerStyle, ...otherContainerProps } = containerProps || {};
   return /* @__PURE__ */ jsxs(

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

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

package/dist/esm/Flow/FlowContext/NodeMetaContext.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useRef, useCallback, useMemo } from "react";
+import { useContext, createContext, useRef, useCallback, useMemo } from "react";
 const HvFlowNodeMetaContext = createContext(void 0);
 const HvFlowNodeMetaProvider = ({
   children

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

@@ -1,6 +1,6 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { useLabels, theme, HvTooltip, HvButton, HvTypography, HvInlineEditor, HvActionsGeneric } from "@hitachivantara/uikit-react-core";
+import { useLabels, theme, HvTypography, HvInlineEditor, HvActionsGeneric, HvTooltip, HvButton } from "@hitachivantara/uikit-react-core";
 import { Info, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { HvFlowBaseNode } from "./BaseNode.js";
 import { useClasses } from "./Node.styles.js";

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\";\nimport { useDraggable } from \"@dnd-kit/core\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowGroupItem } from \"../../../types\";\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps,\n    HvFlowGroupItem {}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  id: idProp,\n  label,\n  nodeType,\n  data,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n  const id = useUniqueId(idProp);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id,\n      data: {\n        hvFlow: {\n          // Needed to know which item is being dragged and dropped\n          type: nodeType,\n          // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow\n          label,\n          // Item position: used to position the item when dropped\n          x: itemRef.current?.getBoundingClientRect().x,\n          y: itemRef.current?.getBoundingClientRect().y,\n          // Data\n          data,\n        },\n      },\n    });\n\n  const forkedRef = useForkRef(itemRef, setNodeRef);\n\n  const style = transform\n    ? {\n        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n      }\n    : undefined;\n\n  return (\n    <HvFlowSidebarGroupItem\n      ref={forkedRef}\n      style={style}\n      label={label}\n      isDragging={isDragging}\n      {...listeners}\n      {...attributes}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,kCAAkC,CAAC;AAAA,EAC9C,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4C;AACpC,QAAA,UAAU,OAAoB,IAAI;AAClC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,EAAE,YAAY,WAAW,YAAY,YAAY,cACrD,aAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,QAAQ;AAAA;AAAA,QAEN,MAAM;AAAA;AAAA,QAEN;AAAA;AAAA,QAEA,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA,QAC5C,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA;AAAA,QAE5C;AAAA,MAAA;AAAA,IACF;AAAA,EACF,CACD;AAEG,QAAA,YAAY,WAAW,SAAS,UAAU;AAEhD,QAAM,QAAQ,YACV;AAAA,IACE,WAAW,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,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,EACN;AAEJ;"}
+{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { useDraggable } from \"@dnd-kit/core\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowGroupItem } from \"../../../types\";\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps,\n    HvFlowGroupItem {}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  id: idProp,\n  label,\n  nodeType,\n  data,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n  const id = useUniqueId(idProp);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id,\n      data: {\n        hvFlow: {\n          // Needed to know which item is being dragged and dropped\n          type: nodeType,\n          // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow\n          label,\n          // Item position: used to position the item when dropped\n          x: itemRef.current?.getBoundingClientRect().x,\n          y: itemRef.current?.getBoundingClientRect().y,\n          // Data\n          data,\n        },\n      },\n    });\n\n  const forkedRef = useForkRef(itemRef, setNodeRef);\n\n  const style = transform\n    ? {\n        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n      }\n    : undefined;\n\n  return (\n    <HvFlowSidebarGroupItem\n      ref={forkedRef}\n      style={style}\n      label={label}\n      isDragging={isDragging}\n      {...listeners}\n      {...attributes}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,kCAAkC,CAAC;AAAA,EAC9C,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4C;AACpC,QAAA,UAAU,OAAoB,IAAI;AAClC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,EAAE,YAAY,WAAW,YAAY,YAAY,cACrD,aAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,QAAQ;AAAA;AAAA,QAEN,MAAM;AAAA;AAAA,QAEN;AAAA;AAAA,QAEA,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA,QAC5C,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA;AAAA,QAE5C;AAAA,MAAA;AAAA,IACF;AAAA,EACF,CACD;AAEG,QAAA,YAAY,WAAW,SAAS,UAAU;AAEhD,QAAM,QAAQ,YACV;AAAA,IACE,WAAW,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,EAAA,IAEzD;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/dist/esm/Flow/hooks/useFlowNodeMeta.js

@@ -3,9 +3,7 @@ import { useNodeId } from "./useNodeId.js";
 function useFlowNodeMeta(id) {
   const nodeId = useNodeId(id);
   const { registry } = useNodeMetaRegistry();
-  if (nodeId) {
-    return registry[nodeId];
-  }
+  return registry[nodeId];
 }
 export {
   useFlowNodeMeta

package/dist/esm/Flow/hooks/useFlowNodeMeta.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFlowNodeMeta.js","sources":["../../../../src/Flow/hooks/useFlowNodeMeta.ts"],"sourcesContent":["import { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { useNodeId } from \"./useNodeId\";\n\nexport function useFlowNodeMeta(id?: string) {\n  const nodeId = useNodeId(id);\n  const { registry } = useNodeMetaRegistry();\n\n  if (nodeId) {\n    return registry[nodeId];\n  }\n}\n"],"names":[],"mappings":";;AAGO,SAAS,gBAAgB,IAAa;AACrC,QAAA,SAAS,UAAU,EAAE;AACrB,QAAA,EAAE,SAAS,IAAI,oBAAoB;AAEzC,MAAI,QAAQ;AACV,WAAO,SAAS,MAAM;AAAA,EAAA;AAE1B;"}
+{"version":3,"file":"useFlowNodeMeta.js","sources":["../../../../src/Flow/hooks/useFlowNodeMeta.ts"],"sourcesContent":["import { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { useNodeId } from \"./useNodeId\";\n\nexport function useFlowNodeMeta(id?: string) {\n  const nodeId = useNodeId(id);\n  const { registry } = useNodeMetaRegistry();\n\n  return registry[nodeId!];\n}\n"],"names":[],"mappings":";;AAGO,SAAS,gBAAgB,IAAa;AACrC,QAAA,SAAS,UAAU,EAAE;AACrB,QAAA,EAAE,SAAS,IAAI,oBAAoB;AAEzC,SAAO,SAAS,MAAO;AACzB;"}

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useTheme } from "@hitachivantara/uikit-react-core";
-import { getColor, stepSizes } from "./utils.js";
+import { stepSizes, getColor } from "./utils.js";
 import { HvStep } from "./Step/Step.js";
 const HvDefaultNavigation = ({
   numSteps,

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { HvButton, HvAvatar } from "@hitachivantara/uikit-react-core";
-import { HourGlass, Level3Bad, Level0Good } from "@hitachivantara/uikit-react-icons";
+import { Level0Good, Level3Bad, HourGlass } from "@hitachivantara/uikit-react-icons";
 import { getColor, getSemantic } from "../utils.js";
 import { useClasses } from "./Step.styles.js";
 const iconSizeObject = {

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useTheme } from "@hitachivantara/uikit-react-core";
-import { getColor, dotSizes } from "./utils.js";
+import { dotSizes, getColor } from "./utils.js";
 import { HvDot } from "./Dot/Dot.js";
 const HvSimpleNavigation = ({
   numSteps,

package/dist/esm/StepNavigation/StepNavigation.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import styled from "@emotion/styled";
-import { useTheme, useWidth, HvTooltip, HvTypography } from "@hitachivantara/uikit-react-core";
+import { useTheme, useWidth, HvTypography, HvTooltip } from "@hitachivantara/uikit-react-core";
 import { theme } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./StepNavigation.styles.js";
 import { staticClasses } from "./StepNavigation.styles.js";
 import { TITLE_WIDTH, TITLE_MARGIN, SEPARATOR_WIDTH } from "./utils.js";
-import { HvDefaultNavigation } from "./DefaultNavigation/DefaultNavigation.js";
 import { HvSimpleNavigation } from "./SimpleNavigation/SimpleNavigation.js";
+import { HvDefaultNavigation } from "./DefaultNavigation/DefaultNavigation.js";
 const HvStepNavigation = ({
   className,
   classes: classesProp,

package/dist/types/index.d.ts

@@ -28,11 +28,12 @@ import { HvColorAny } from '@hitachivantara/uikit-styles';
 import { HvDialogProps } from '@hitachivantara/uikit-react-core';
 import { HvDrawerProps } from '@hitachivantara/uikit-react-core';
 import { HvEmptyStateProps } from '@hitachivantara/uikit-react-core';
+import { HvFlowContextValue } from '../FlowContext';
+import { HvFlowNodeMeta as HvFlowNodeMeta_2 } from '..';
 import { HvSize } from '@hitachivantara/uikit-react-core';
 import { HvSliderProps } from '@hitachivantara/uikit-react-core';
 import { HvTypographyVariants } from '@hitachivantara/uikit-react-core';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
-import { JSXElementConstructor } from 'react';
 import { KeyboardEventHandler } from 'react';
 import { MiniMapProps } from 'reactflow';
 import { MouseEventHandler } from 'react';
@@ -42,7 +43,6 @@ import { NodeToolbarProps } from 'reactflow';
 import { PanelPosition } from 'reactflow';
 import { PointerEventHandler } from 'react';
 import { Position } from 'reactflow';
-import { ReactElement } from 'react';
 import { ReactEventHandler } from 'react';
 import { ReactFlowInstance } from 'reactflow';
 import { ReactFlowProps } from 'reactflow';
@@ -148,8 +148,8 @@ export declare const flowNodeClasses: {
     titleContainer: string;
     mandatory: string;
     footerContainer: string;
-    handle: string;
     inputContainer: string;
+    handle: string;
     headerContainer: string;
     inputsTitleContainer: string;
     outputsTitleContainer: string;
@@ -337,11 +337,10 @@ export declare const hvDashboardNodeClasses: {
     title: string;
     titleContainer: string;
     mandatory: string;
-    subtitle: string;
     actions: string;
     footerContainer: string;
-    handle: string;
     inputContainer: string;
+    handle: string;
     headerContainer: string;
     inputsTitleContainer: string;
     outputsTitleContainer: string;
@@ -352,6 +351,7 @@ export declare const hvDashboardNodeClasses: {
     outputGroupContainer: string;
     outputContainer: string;
     handleConnected: string;
+    subtitle: string;
     subtitleContainer: string;
     inlineEditRoot: string;
     inlineEditButton: string;
@@ -456,17 +456,6 @@ export declare type HvFlowBuiltInActions = Omit<HvFlowNodeAction, "id" | "callba
 
 export declare type HvFlowClasses = ExtractNames<typeof useClasses_4>;
 
-declare interface HvFlowContextValue<NodeGroups extends keyof any = string> {
-    /** Flow nodes groups. */
-    nodeGroups?: HvFlowNodeGroups<NodeGroups>;
-    /** Flow nodes groups expanded on sidebar. */
-    expandedNodeGroups?: string[];
-    /** Flow default actions. */
-    defaultActions?: HvFlowNodeAction[];
-    /** Function to set `expandedNodeGroups`. */
-    setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;
-}
-
 export declare const HvFlowControls: ({ onZoomIn: onZoomInProp, onZoomOut: onZoomOutProp, onFitView: onFitViewProp, labels: labelsProps, hideInteractive, hideFitView, hideZoom, position, orientation, onInteractiveChange, fitViewOptions, children, ...others }: HvFlowControlsProps) => JSX_2.Element;
 
 export declare type HvFlowControlsPosition = PanelPosition;
@@ -1044,7 +1033,7 @@ declare const useClasses_6: (classesProp?: Partial<Record<"titleContainer" | "de
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_7: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "footerContainer" | "handle" | "inputContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected", string>>, addStatic?: boolean) => {
+declare const useClasses_7: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "footerContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         headerContainer: string;
@@ -1068,15 +1057,15 @@ declare const useClasses_7: (classesProp?: Partial<Record<"root" | "title" | "ti
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "subtitle" | "actions" | "footerContainer" | "handle" | "inputContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "actions" | "footerContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitle" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         title: string;
         titleContainer: string;
         mandatory: string;
         footerContainer: string;
-        handle: string;
         inputContainer: string;
+        handle: string;
         headerContainer: string;
         inputsTitleContainer: string;
         outputsTitleContainer: string;
@@ -1099,17 +1088,16 @@ declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "ti
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_9: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "subtitle" | "actions" | "empty" | "footerContainer" | "handle" | "inputContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_9: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "empty" | "actions" | "footerContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitle" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         title: string;
         titleContainer: string;
         mandatory: string;
-        subtitle: string;
         actions: string;
         footerContainer: string;
-        handle: string;
         inputContainer: string;
+        handle: string;
         headerContainer: string;
         inputsTitleContainer: string;
         outputsTitleContainer: string;
@@ -1120,6 +1108,7 @@ declare const useClasses_9: (classesProp?: Partial<Record<"root" | "title" | "ti
         outputGroupContainer: string;
         outputContainer: string;
         handleConnected: string;
+        subtitle: string;
         subtitleContainer: string;
         inlineEditRoot: string;
         inlineEditButton: string;
@@ -1150,7 +1139,7 @@ export declare function useFlowNodeInputEdges(id?: string): Edge[];
 
 export declare function useFlowNodeIntersections<NodeData = any>(id?: string): Node_2<NodeData>[];
 
-export declare function useFlowNodeMeta(id?: string): HvFlowNodeMeta | undefined;
+export declare function useFlowNodeMeta(id?: string): HvFlowNodeMeta_2;
 
 /** Gives the output edges connected from the node */
 export declare function useFlowNodeOutputEdges(id?: string): Edge[];
@@ -1170,24 +1159,24 @@ export declare function useFlowOutputNodes<T = any>(id?: string): Node_2<T>[];
 export declare function useHvNode(props: HvUseNodeParams): {
     id: string;
     title: string | undefined;
-    icon: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined;
+    icon: ReactNode;
     color: string | undefined;
     iconColor: string | undefined;
     subtitle: any;
     inputs: (HvFlowNodeInput | HvFlowNodeOutput | {
         inputs: HvFlowNodeInput[];
-        label: ReactNode;
+        label: React.ReactNode;
     } | {
         outputs: HvFlowNodeOutput[];
-        label: ReactNode;
+        label: React.ReactNode;
     })[] | undefined;
     inputEdges: Edge[];
     outputs: (HvFlowNodeInput | HvFlowNodeOutput | {
         inputs: HvFlowNodeInput[];
-        label: ReactNode;
+        label: React.ReactNode;
     } | {
         outputs: HvFlowNodeOutput[];
-        label: ReactNode;
+        label: React.ReactNode;
     })[] | undefined;
     outputEdges: Edge[];
     node: Node_2 | undefined;
@@ -1200,14 +1189,14 @@ export declare function useHvNode(props: HvUseNodeParams): {
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
-        autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
-        contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
-        enterKeyHint?: "next" | "search" | "enter" | "done" | "go" | "previous" | "send" | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -1217,7 +1206,7 @@ export declare function useHvNode(props: HvUseNodeParams): {
         style?: CSSProperties | undefined;
         tabIndex?: number | undefined;
         title?: string | undefined;
-        translate?: "no" | "yes" | undefined;
+        translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: AriaRole | undefined;
         about?: string | undefined;
@@ -1241,33 +1230,33 @@ export declare function useHvNode(props: HvUseNodeParams): {
         itemRef?: string | undefined;
         results?: number | undefined;
         security?: string | undefined;
-        unselectable?: "off" | "on" | undefined;
-        inputMode?: "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
-        children?: ReactNode;
+        children?: ReactNode | Iterable<ReactNode>;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
-        "aria-autocomplete"?: "none" | "list" | "both" | "inline" | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "false" | "true") | undefined;
-        "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "page" | "step" | "false" | "true" | "time" | "date" | "location" | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "false" | "true") | undefined;
-        "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "popup" | "execute" | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "false" | "true") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-        "aria-haspopup"?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
         "aria-hidden"?: (boolean | "false" | "true") | undefined;
         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
@@ -1278,13 +1267,13 @@ export declare function useHvNode(props: HvUseNodeParams): {
         "aria-modal"?: (boolean | "false" | "true") | undefined;
         "aria-multiline"?: (boolean | "false" | "true") | undefined;
         "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
-        "aria-orientation"?: "vertical" | "horizontal" | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
         "aria-owns"?: string | undefined;
         "aria-placeholder"?: string | undefined;
         "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-readonly"?: (boolean | "false" | "true") | undefined;
-        "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
         "aria-required"?: (boolean | "false" | "true") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;
@@ -1461,16 +1450,16 @@ export declare function useHvNode(props: HvUseNodeParams): {
         onAnimationIterationCapture?: AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: TransitionEventHandler<HTMLDivElement> | undefined;
-        nodeId?: string | string[] | undefined;
+        nodeId?: string | string[];
         isVisible: boolean;
-        position?: Position | undefined;
+        position?: Position;
         offset: number;
-        align?: Align | undefined;
+        align?: Align;
     };
     toggleShowActions: () => void;
     handleDefaultAction: (action: HvFlowNodeAction) => void;
     setNodeData: (setNewData: (newData?: any) => any) => void;
-    setNodeParent: (node?: Node_2<any> | undefined, extent?: CoordinateExtent | "parent" | undefined) => void;
+    setNodeParent: (node?: Node_2<any>, extent?: "parent" | CoordinateExtent) => void;
 };
 
 export declare function useNodeMetaRegistry(): {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.43.3",
+  "version": "5.43.4",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -33,11 +33,11 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.87.3",
-    "@hitachivantara/uikit-react-icons": "^5.13.7",
-    "@hitachivantara/uikit-react-utils": "^0.2.24",
-    "@hitachivantara/uikit-styles": "^5.41.2",
-    "@mui/base": "^5.0.0-beta.40",
+    "@hitachivantara/uikit-react-core": "^5.88.0",
+    "@hitachivantara/uikit-react-icons": "^5.13.8",
+    "@hitachivantara/uikit-react-utils": "^0.2.25",
+    "@hitachivantara/uikit-styles": "^5.41.3",
+    "@mui/base": "5.0.0-beta.68",
     "@types/react-grid-layout": "^1.3.5",
     "react-grid-layout": "^1.4.4",
     "reactflow": "^11.10.1",
@@ -52,7 +52,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "377a575378d89280711a5d5c27d45511d4276ebe",
+  "gitHead": "16c8c47610601f54711ae92dc4e0db946e3caac4",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",