@hitachivantara/uikit-react-lab 5.22.2 → 5.24.0

package/dist/cjs/Blade/Blade.cjs

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const Blade_styles = require("./Blade.styles.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const React__default = /* @__PURE__ */ _interopDefault(React);
+const HvBlade = (props) => {
+  const {
+    id: idProp,
+    className,
+    classes: classesProp,
+    expanded,
+    defaultExpanded = false,
+    label,
+    labelVariant = "label",
+    headingLevel,
+    onChange,
+    disabled = false,
+    children,
+    fullWidth,
+    buttonProps,
+    containerProps,
+    ...others
+  } = uikitReactCore.useDefaultProps("HvBlade", props);
+  const { classes, cx } = Blade_styles.useClasses(classesProp);
+  const [isExpanded, setIsExpanded] = uikitReactCore.useControlled(
+    expanded,
+    Boolean(defaultExpanded)
+  );
+  const handleAction = React.useCallback(
+    (event) => {
+      if (!disabled) {
+        onChange?.(event, !isExpanded);
+        setIsExpanded(!isExpanded);
+        return true;
+      }
+      return false;
+    },
+    [disabled, onChange, isExpanded, setIsExpanded]
+  );
+  const handleClick = React.useCallback(
+    (event) => {
+      handleAction(event);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [handleAction]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      let isEventHandled = false;
+      const { key } = event;
+      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
+        return;
+      }
+      switch (key) {
+        case "Enter":
+        case " ":
+          isEventHandled = handleAction(event);
+          break;
+        default:
+          return;
+      }
+      if (isEventHandled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [handleAction]
+  );
+  const id = uikitReactCore.useUniqueId(idProp, "hvblade");
+  const bladeHeaderId = uikitReactCore.setId(id, "button");
+  const bladeContainerId = uikitReactCore.setId(id, "container");
+  const bladeHeader = React.useMemo(() => {
+    const buttonLabel = typeof label === "function" ? label(isExpanded) : label;
+    const bladeButton = /* @__PURE__ */ jsxRuntime.jsx(
+      uikitReactCore.HvTypography,
+      {
+        id: bladeHeaderId,
+        component: "div",
+        role: "button",
+        className: cx(classes.button, {
+          [classes.disabled]: disabled,
+          [classes.textOnlyLabel]: typeof buttonLabel === "string"
+        }),
+        style: { flexShrink: headingLevel === void 0 ? 0 : void 0 },
+        disabled,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        onClick: handleClick,
+        variant: labelVariant,
+        "aria-expanded": isExpanded,
+        "aria-controls": bladeContainerId,
+        ...buttonProps,
+        children: buttonLabel
+      }
+    );
+    return headingLevel === void 0 ? bladeButton : /* @__PURE__ */ jsxRuntime.jsx(
+      uikitReactCore.HvTypography,
+      {
+        component: `h${headingLevel}`,
+        variant: labelVariant,
+        className: classes.heading,
+        style: { flexShrink: 0 },
+        children: bladeButton
+      }
+    );
+  }, [
+    bladeContainerId,
+    bladeHeaderId,
+    buttonProps,
+    classes.button,
+    classes.disabled,
+    classes.heading,
+    classes.textOnlyLabel,
+    cx,
+    disabled,
+    handleClick,
+    handleKeyDown,
+    headingLevel,
+    isExpanded,
+    label,
+    labelVariant
+  ]);
+  const bladeRef = React__default.default.useRef(null);
+  const maxWidthRef = React__default.default.useRef(0);
+  React.useEffect(() => {
+    if (bladeRef.current) {
+      maxWidthRef.current = bladeRef.current.parentElement?.clientWidth || 0;
+    }
+  }, []);
+  const { style: containerStyle, ...otherContainerProps } = containerProps || {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: bladeRef,
+      id: idProp,
+      className: cx(classes.root, className, {
+        [classes.fullWidth]: fullWidth,
+        [classes.expanded]: isExpanded
+      }),
+      ...others,
+      children: [
+        bladeHeader,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: bladeContainerId,
+            role: "region",
+            "aria-labelledby": bladeHeaderId,
+            className: classes.container,
+            hidden: !isExpanded,
+            style: {
+              ...containerStyle,
+              maxWidth: isExpanded ? maxWidthRef.current : 0
+            },
+            ...otherContainerProps,
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+exports.bladeClasses = Blade_styles.staticClasses;
+exports.HvBlade = HvBlade;
+//# sourceMappingURL=Blade.cjs.map

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

@@ -0,0 +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} 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 = React.useRef<HTMLDivElement>(null);\n  const maxWidthRef = React.useRef<number>(0);\n  useEffect(() => {\n    if (bladeRef.current) {\n      maxWidthRef.current = bladeRef.current.parentElement?.clientWidth || 0;\n    }\n  }, []);\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 ? maxWidthRef.current : 0,\n        }}\n        {...otherContainerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useControlled","useCallback","useUniqueId","setId","useMemo","jsx","HvTypography","React","useEffect","jsxs"],"mappings":";;;;;;;;AA4Ga,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,eAAgB,gBAAA,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,GAAG,IAAIC,wBAAW,WAAW;AAExC,QAAA,CAAC,YAAY,aAAa,IAAIC,eAAA;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,eAAeC,MAAA;AAAA,IACnB,CAAC,UAA0B;AACzB,UAAI,CAAC,UAAU;AACF,mBAAA,OAAO,CAAC,UAAU;AAG7B,sBAAc,CAAC,UAAU;AAElB,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,YAAY,aAAa;AAAA,EAAA;AAGhD,QAAM,cAAcA,MAAA;AAAA,IAClB,CAAC,UAA0B;AACzB,mBAAa,KAAK;AAClB,YAAM,eAAe;AACrB,YAAM,gBAAgB;AAAA,IACxB;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGf,QAAM,gBAAgBA,MAAA;AAAA,IACpB,CAAC,UAA+C;AAC9C,UAAI,iBAAiB;AACf,YAAA,EAAE,IAAQ,IAAA;AAGd,UAAA,MAAM,UACN,MAAM,WACN,MAAM,WACN,MAAM,kBAAkB,MAAM,QAC9B;AACA;AAAA,MACF;AACA,cAAQ,KAAK;AAAA,QACX,KAAK;AAAA,QACL,KAAK;AACH,2BAAiB,aAAa,KAAK;AACnC;AAAA,QACF;AACE;AAAA,MACJ;AAEA,UAAI,gBAAgB;AAClB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGT,QAAA,KAAKC,eAAAA,YAAY,QAAQ,SAAS;AAClC,QAAA,gBAAgBC,eAAAA,MAAM,IAAI,QAAQ;AAClC,QAAA,mBAAmBA,eAAAA,MAAM,IAAI,WAAW;AACxC,QAAA,cAAcC,MAAAA,QAAQ,MAAM;AAChC,UAAM,cAAc,OAAO,UAAU,aAAa,MAAM,UAAU,IAAI;AAEtE,UAAM,cACJC,2BAAA;AAAA,MAACC,eAAA;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAK;AAAA,QACL,WAAW,GAAG,QAAQ,QAAQ;AAAA,UAC5B,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,aAAa,GAAG,OAAO,gBAAgB;AAAA,QAAA,CACjD;AAAA,QACD,OAAO,EAAE,YAAY,iBAAiB,SAAY,IAAI,OAAU;AAAA,QAChE;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,iBAAe;AAAA,QACd,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAGE,WAAA,iBAAiB,SACtB,cAEAD,2BAAA;AAAA,MAACC,eAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAI,YAAY;AAAA,QAC3B,SAAS;AAAA,QACT,WAAW,QAAQ;AAAA,QACnB,OAAO,EAAE,YAAY,EAAE;AAAA,QAEtB,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEK,QAAA,WAAWC,eAAAA,QAAM,OAAuB,IAAI;AAC5C,QAAA,cAAcA,eAAAA,QAAM,OAAe,CAAC;AAC1CC,QAAAA,UAAU,MAAM;AACd,QAAI,SAAS,SAAS;AACpB,kBAAY,UAAU,SAAS,QAAQ,eAAe,eAAe;AAAA,IACvE;AAAA,EACF,GAAG,CAAE,CAAA;AAEL,QAAM,EAAE,OAAO,gBAAgB,GAAG,oBAAoB,IACpD,kBAAkB;AAGlB,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,SAAS,GAAG;AAAA,QACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,MAAA,CACrB;AAAA,MACA,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACDJ,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,MAAK;AAAA,YACL,mBAAiB;AAAA,YACjB,WAAW,QAAQ;AAAA,YACnB,QAAQ,CAAC;AAAA,YACT,OAAO;AAAA,cACL,GAAG;AAAA,cACH,UAAU,aAAa,YAAY,UAAU;AAAA,YAC/C;AAAA,YACC,GAAG;AAAA,YAEH;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;;"}

package/dist/cjs/Blade/Blade.styles.cjs

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvBlade", {
+  root: {
+    position: "relative",
+    display: "flex",
+    minWidth: 72,
+    "& + $root": {
+      marginLeft: uikitStyles.theme.spacing("sm")
+    },
+    transition: "flex-grow 600ms linear",
+    zIndex: 0,
+    color: uikitStyles.theme.colors.secondary,
+    backgroundColor: uikitStyles.theme.colors.atmo1,
+    borderRadius: uikitStyles.theme.radii.round,
+    border: `1px solid ${uikitStyles.theme.colors.atmo4}`
+  },
+  expanded: {},
+  fullWidth: {
+    flexGrow: 0,
+    "&$expanded": {
+      flexGrow: 1
+    }
+  },
+  heading: {},
+  button: {
+    height: "100%",
+    minWidth: 70,
+    "&[disabled], &:active": {
+      outline: "none"
+    },
+    "&:focus": {
+      outline: "none",
+      background: uikitStyles.theme.colors.containerBackgroundHover
+    },
+    "&:hover": {
+      background: uikitStyles.theme.colors.containerBackgroundHover
+    },
+    "&:focus-visible": {
+      ...uikitReactCore.outlineStyles,
+      zIndex: 1
+    },
+    cursor: "pointer"
+  },
+  textOnlyLabel: {
+    padding: uikitStyles.theme.spacing("xs", "sm")
+  },
+  container: {
+    display: "inline-block",
+    height: "100%",
+    width: "100%",
+    minWidth: 0,
+    overflowX: "hidden",
+    maxWidth: 0,
+    transition: "max-width 600ms linear"
+  },
+  disabled: {
+    cursor: "not-allowed",
+    color: uikitStyles.theme.colors.secondary_60,
+    "&:focus": {
+      background: "none"
+    },
+    "&:hover": {
+      background: "none"
+    }
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=Blade.styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Blade.styles.cjs","sources":["../../../src/Blade/Blade.styles.tsx"],"sourcesContent":["import { createClasses, outlineStyles } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBlade\", {\n  root: {\n    position: \"relative\",\n\n    display: \"flex\",\n    minWidth: 72,\n\n    \"& + $root\": {\n      marginLeft: theme.spacing(\"sm\"),\n    },\n\n    transition: \"flex-grow 600ms linear\",\n\n    zIndex: 0,\n\n    color: theme.colors.secondary,\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: theme.radii.round,\n    border: `1px solid ${theme.colors.atmo4}`,\n  },\n  expanded: {},\n\n  fullWidth: {\n    flexGrow: 0,\n\n    \"&$expanded\": {\n      flexGrow: 1,\n    },\n  },\n\n  heading: {},\n\n  button: {\n    height: \"100%\",\n    minWidth: 70,\n\n    \"&[disabled], &:active\": {\n      outline: \"none\",\n    },\n\n    \"&:focus\": {\n      outline: \"none\",\n      background: theme.colors.containerBackgroundHover,\n    },\n\n    \"&:hover\": {\n      background: theme.colors.containerBackgroundHover,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      zIndex: 1,\n    },\n\n    cursor: \"pointer\",\n  },\n  textOnlyLabel: {\n    padding: theme.spacing(\"xs\", \"sm\"),\n  },\n\n  container: {\n    display: \"inline-block\",\n    height: \"100%\",\n    width: \"100%\",\n\n    minWidth: 0,\n\n    overflowX: \"hidden\",\n\n    maxWidth: 0,\n    transition: \"max-width 600ms linear\",\n  },\n\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n\n    \"&:focus\": {\n      background: \"none\",\n    },\n\n    \"&:hover\": {\n      background: \"none\",\n    },\n  },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":";;;;AAGO,MAAM,EAAE,eAAe,eAAeA,eAAAA,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,UAAU;AAAA,IAEV,SAAS;AAAA,IACT,UAAU;AAAA,IAEV,aAAa;AAAA,MACX,YAAYC,YAAAA,MAAM,QAAQ,IAAI;AAAA,IAChC;AAAA,IAEA,YAAY;AAAA,IAEZ,QAAQ;AAAA,IAER,OAAOA,YAAAA,MAAM,OAAO;AAAA,IACpB,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,EACzC;AAAA,EACA,UAAU,CAAC;AAAA,EAEX,WAAW;AAAA,IACT,UAAU;AAAA,IAEV,cAAc;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EAEA,SAAS,CAAC;AAAA,EAEV,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IAEV,yBAAyB;AAAA,MACvB,SAAS;AAAA,IACX;AAAA,IAEA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,YAAYA,YAAAA,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,WAAW;AAAA,MACT,YAAYA,YAAAA,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAGC,eAAA;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,IAEA,QAAQ;AAAA,EACV;AAAA,EACA,eAAe;AAAA,IACb,SAASD,YAAA,MAAM,QAAQ,MAAM,IAAI;AAAA,EACnC;AAAA,EAEA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IAEP,UAAU;AAAA,IAEV,WAAW;AAAA,IAEX,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAOA,YAAAA,MAAM,OAAO;AAAA,IAEpB,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IAEA,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/Blades/Blades.cjs

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const Blades_styles = require("./Blades.styles.cjs");
+function getExpandedBlades(defaultExpanded, children, atMostOneExpanded, atLeastOneExpanded) {
+  const childrenArray = React.Children.toArray(children);
+  const expandedBlades = defaultExpanded ?? childrenArray.map((child, i) => {
+    const childIsControlled = child?.props?.expanded !== void 0;
+    const childIsExpanded = childIsControlled ? child?.props?.expanded : child?.props?.defaultExpanded;
+    return childIsExpanded ? i : void 0;
+  }).filter((v) => v !== void 0);
+  const numberOfExpandedBlades = expandedBlades.length;
+  if (atLeastOneExpanded && numberOfExpandedBlades === 0 && childrenArray.length > 0) {
+    return [0];
+  }
+  if (atMostOneExpanded && numberOfExpandedBlades > 1) {
+    return [expandedBlades[0]];
+  }
+  return expandedBlades;
+}
+const HvBlades = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    children,
+    expanded: expandedProp,
+    defaultExpanded,
+    atMostOneExpanded = false,
+    atLeastOneExpanded = false,
+    fullWidthBlades = false,
+    onChange,
+    ...others
+  } = uikitReactCore.useDefaultProps("HvBlades", props);
+  const { classes, cx } = Blades_styles.useClasses(classesProp);
+  const [expanded, setExpanded] = uikitReactCore.useControlled(
+    expandedProp,
+    () => getExpandedBlades(
+      defaultExpanded,
+      children,
+      atMostOneExpanded,
+      atLeastOneExpanded
+    )
+  );
+  const onChildChangeInterceptor = React.useCallback(
+    (index, childOnChange, event, isExpanded) => {
+      const newValue = [];
+      if (atMostOneExpanded) {
+        if (isExpanded) {
+          newValue.push(index);
+        }
+      } else {
+        newValue.push(...expanded);
+        if (isExpanded) {
+          newValue.push(index);
+        } else {
+          newValue.splice(newValue.indexOf(index), 1);
+        }
+      }
+      if (atLeastOneExpanded && newValue.length === 0) {
+        newValue.push(index);
+      }
+      childOnChange?.(event, isExpanded);
+      onChange?.(event, newValue);
+      setExpanded(newValue);
+    },
+    [onChange, expanded, setExpanded, atMostOneExpanded, atLeastOneExpanded]
+  );
+  const modifiedChildren = React.useMemo(() => {
+    return React.Children.map(children, (child, i) => {
+      const childIsExpanded = expanded.includes(i);
+      return React.cloneElement(child, {
+        expanded: childIsExpanded,
+        fullWidth: child?.props?.fullWidth ?? fullWidthBlades,
+        buttonProps: {
+          ...child?.props?.buttonProps,
+          "aria-disabled": (
+            // If the accordion panel associated with an accordion header is visible,
+            // and if the accordion does not permit the panel to be collapsed, the header
+            // button element has aria-disabled set to true.
+            child?.props?.disabled || childIsExpanded && atMostOneExpanded && expanded.length === 1 ? true : void 0
+          )
+        },
+        onChange: (event, isExpanded) => onChildChangeInterceptor(
+          i,
+          child?.props?.onChange,
+          event,
+          isExpanded
+        )
+      });
+    });
+  }, [
+    children,
+    expanded,
+    fullWidthBlades,
+    atMostOneExpanded,
+    onChildChangeInterceptor
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: cx(classes.root, className), ...others, children: modifiedChildren });
+};
+exports.bladesClasses = Blades_styles.staticClasses;
+exports.HvBlades = HvBlades;
+//# sourceMappingURL=Blades.cjs.map

package/dist/cjs/Blades/Blades.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Blades.cjs","sources":["../../../src/Blades/Blades.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  Children,\n  cloneElement,\n} from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  useDefaultProps,\n  useControlled,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blades.styles\";\n\nexport { staticClasses as bladesClasses };\n\nexport type HvBladesClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladesProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * Array of indices representing the expanded state of each blade.\n   *\n   * When defined, the expanded state of the blades becomes controlled.\n   */\n  expanded?: number[];\n  /**\n   * Initial expanded state of the blades when in an uncontrolled state.\n   *\n   * It's an array of indices representing the blades that should be initially expanded.\n   */\n  defaultExpanded?: number[];\n\n  /**\n   * If true, ensures that only one blade can be expanded at a time.\n   */\n  atMostOneExpanded?: boolean;\n  /**\n   * If true, ensures that at least one blade is always expanded.\n   */\n  atLeastOneExpanded?: boolean;\n\n  /**\n   * If true, the blades will take up the full width of the container by default.\n   */\n  fullWidthBlades?: boolean;\n\n  /**\n   * Callback function triggered when the expanded state of any blade changes.\n   * It receives the event and the new array of expanded indices as arguments.\n   *\n   * If uncontrolled, this new state will be effective.\n   * If controlled, it is up to the parent component to manage this state.\n   *\n   * @param {SyntheticEvent} event The event source of the callback.\n   * @param {number[]} value Array of indices of the blades that are expanded.\n   */\n  onChange?: (event: SyntheticEvent, value: number[]) => void;\n\n  /**\n   * The blades to be rendered within the group.\n   * Must be instances of `HvBlade`, otherwise the behavior is undefined and will most likely break.\n   */\n  children: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBladesClasses;\n}\n\nfunction getExpandedBlades(\n  defaultExpanded: number[] | undefined,\n  children: React.ReactNode,\n  atMostOneExpanded: boolean,\n  atLeastOneExpanded: boolean\n) {\n  const childrenArray = Children.toArray(children);\n  const expandedBlades =\n    defaultExpanded ??\n    childrenArray\n      .map((child: any, i: number) => {\n        const childIsControlled = child?.props?.expanded !== undefined;\n        const childIsExpanded = childIsControlled\n          ? child?.props?.expanded\n          : child?.props?.defaultExpanded;\n\n        return childIsExpanded ? i : undefined;\n      })\n      .filter((v) => v !== undefined);\n\n  const numberOfExpandedBlades = expandedBlades.length;\n  if (\n    atLeastOneExpanded &&\n    numberOfExpandedBlades === 0 &&\n    childrenArray.length > 0\n  ) {\n    return [0];\n  }\n  if (atMostOneExpanded && numberOfExpandedBlades > 1) {\n    return [expandedBlades[0]];\n  }\n\n  return expandedBlades;\n}\n\n/**\n * `HvBlades` is a component that groups multiple `HvBlade` components.\n *\n * It allows for better control over the expanded state of blades, suitable for both\n * controlled and uncontrolled scenarios.\n */\nexport const HvBlades = (props: HvBladesProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    children,\n    expanded: expandedProp,\n    defaultExpanded,\n    atMostOneExpanded = false,\n    atLeastOneExpanded = false,\n    fullWidthBlades = false,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvBlades\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [expanded, setExpanded] = useControlled(expandedProp, () =>\n    getExpandedBlades(\n      defaultExpanded,\n      children,\n      atMostOneExpanded,\n      atLeastOneExpanded\n    )\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnChange: (event: SyntheticEvent, isExpanded: boolean) => void,\n      event: SyntheticEvent,\n      isExpanded: boolean\n    ) => {\n      const newValue: number[] = [];\n      if (atMostOneExpanded) {\n        if (isExpanded) {\n          newValue.push(index);\n        }\n      } else {\n        newValue.push(...expanded);\n        if (isExpanded) {\n          newValue.push(index);\n        } else {\n          newValue.splice(newValue.indexOf(index), 1);\n        }\n      }\n\n      if (atLeastOneExpanded && newValue.length === 0) {\n        newValue.push(index);\n      }\n\n      childOnChange?.(event, isExpanded);\n\n      onChange?.(event, newValue);\n\n      // This will only run if uncontrolled\n      setExpanded(newValue);\n    },\n    [onChange, expanded, setExpanded, atMostOneExpanded, atLeastOneExpanded]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsExpanded = expanded.includes(i);\n\n      return cloneElement(child, {\n        expanded: childIsExpanded,\n        fullWidth: child?.props?.fullWidth ?? fullWidthBlades,\n        buttonProps: {\n          ...child?.props?.buttonProps,\n          \"aria-disabled\":\n            // If the accordion panel associated with an accordion header is visible,\n            // and if the accordion does not permit the panel to be collapsed, the header\n            // button element has aria-disabled set to true.\n            child?.props?.disabled ||\n            (childIsExpanded && atMostOneExpanded && expanded.length === 1)\n              ? true\n              : undefined,\n        },\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isExpanded: boolean\n        ) =>\n          onChildChangeInterceptor(\n            i,\n            child?.props?.onChange,\n            event,\n            isExpanded\n          ),\n      });\n    });\n  }, [\n    children,\n    expanded,\n    fullWidthBlades,\n    atMostOneExpanded,\n    onChildChangeInterceptor,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {modifiedChildren}\n    </div>\n  );\n};\n"],"names":["Children","useDefaultProps","useClasses","useControlled","useCallback","useMemo","cloneElement","jsx"],"mappings":";;;;;;AAyEA,SAAS,kBACP,iBACA,UACA,mBACA,oBACA;AACM,QAAA,gBAAgBA,MAAAA,SAAS,QAAQ,QAAQ;AAC/C,QAAM,iBACJ,mBACA,cACG,IAAI,CAAC,OAAY,MAAc;AACxB,UAAA,oBAAoB,OAAO,OAAO,aAAa;AACrD,UAAM,kBAAkB,oBACpB,OAAO,OAAO,WACd,OAAO,OAAO;AAElB,WAAO,kBAAkB,IAAI;AAAA,EAAA,CAC9B,EACA,OAAO,CAAC,MAAM,MAAM,MAAS;AAElC,QAAM,yBAAyB,eAAe;AAC9C,MACE,sBACA,2BAA2B,KAC3B,cAAc,SAAS,GACvB;AACA,WAAO,CAAC,CAAC;AAAA,EACX;AACI,MAAA,qBAAqB,yBAAyB,GAAG;AAC5C,WAAA,CAAC,eAAe,CAAC,CAAC;AAAA,EAC3B;AAEO,SAAA;AACT;AAQa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,eAAgB,gBAAA,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAIC,yBAAW,WAAW;AAExC,QAAA,CAAC,UAAU,WAAW,IAAIC,eAAA;AAAA,IAAc;AAAA,IAAc,MAC1D;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,2BAA2BC,MAAA;AAAA,IAC/B,CACE,OACA,eACA,OACA,eACG;AACH,YAAM,WAAqB,CAAA;AAC3B,UAAI,mBAAmB;AACrB,YAAI,YAAY;AACd,mBAAS,KAAK,KAAK;AAAA,QACrB;AAAA,MAAA,OACK;AACI,iBAAA,KAAK,GAAG,QAAQ;AACzB,YAAI,YAAY;AACd,mBAAS,KAAK,KAAK;AAAA,QAAA,OACd;AACL,mBAAS,OAAO,SAAS,QAAQ,KAAK,GAAG,CAAC;AAAA,QAC5C;AAAA,MACF;AAEI,UAAA,sBAAsB,SAAS,WAAW,GAAG;AAC/C,iBAAS,KAAK,KAAK;AAAA,MACrB;AAEA,sBAAgB,OAAO,UAAU;AAEjC,iBAAW,OAAO,QAAQ;AAG1B,kBAAY,QAAQ;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,UAAU,aAAa,mBAAmB,kBAAkB;AAAA,EAAA;AAGnE,QAAA,mBAAmBC,MAAAA,QAAQ,MAAM;AACrC,WAAOL,MAAS,SAAA,IAAI,UAAU,CAAC,OAAY,MAAc;AACjD,YAAA,kBAAkB,SAAS,SAAS,CAAC;AAE3C,aAAOM,MAAAA,aAAa,OAAO;AAAA,QACzB,UAAU;AAAA,QACV,WAAW,OAAO,OAAO,aAAa;AAAA,QACtC,aAAa;AAAA,UACX,GAAG,OAAO,OAAO;AAAA,UACjB;AAAA;AAAA;AAAA;AAAA,YAIE,OAAO,OAAO,YACb,mBAAmB,qBAAqB,SAAS,WAAW,IACzD,OACA;AAAA;AAAA,QACR;AAAA,QACA,UAAU,CACR,OACA,eAEA;AAAA,UACE;AAAA,UACA,OAAO,OAAO;AAAA,UACd;AAAA,UACA;AAAA,QACF;AAAA,MAAA,CACH;AAAA,IAAA,CACF;AAAA,EAAA,GACA;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAAC,2BAAA,IAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UACH,iBAAA,CAAA;AAEJ;;;"}

package/dist/cjs/Blades/Blades.styles.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvBlades", {
+  root: {
+    position: "relative",
+    display: "flex"
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=Blades.styles.cjs.map

package/dist/cjs/Blades/Blades.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Blades.styles.cjs","sources":["../../../src/Blades/Blades.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBlades\", {\n  root: {\n    position: \"relative\",\n\n    display: \"flex\",\n  },\n});\n"],"names":["createClasses"],"mappings":";;;AAEO,MAAM,EAAE,eAAe,eAAeA,eAAAA,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IAEV,SAAS;AAAA,EACX;AACF,CAAC;;;"}

package/dist/cjs/Flow/Node/Node.cjs

@@ -100,7 +100,7 @@ const HvFlowNode = ({
           ] }) })
         ] }),
         children,
-        showParams && params && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsxRuntime.jsx(ParamRenderer.default, { nodeId: id, params, data: node?.data }) })
+        showParams && params && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsxRuntime.jsx(ParamRenderer.default, { params, data: node?.data }) })
       ]
     }
   );

package/dist/cjs/Flow/Node/Node.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Node.cjs","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { isValidElement, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeInput, HvFlowNodeOutput, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\nimport {\n  HvFlowBaseNode,\n  HvFlowBaseNodeProps,\n  HvFlowBaseNodeClasses,\n} from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport interface HvFlowNodeClasses\n  extends ExtractNames<typeof useClasses>,\n    HvFlowBaseNodeClasses {}\n\nexport type HvFlowNodeDefaults = {\n  title?: string;\n  subTitle?: string;\n  color?: string;\n  icon?: React.ReactNode;\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n  /** Node description */\n  description?: string;\n  /** Node actions */\n  actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n  /** Node action callback */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** Node maximum number of actions visible */\n  maxVisibleActions?: number;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** A set of node default values for when there are no groups to fetch this data from. */\n  nodeDefaults?: HvFlowNodeDefaults;\n  /** Props to be passed to the expand parameters button. */\n  expandParamsButtonProps?: HvButtonProps;\n  /** Node outputs. */\n  outputs?: HvFlowNodeOutput[];\n  /** Node inputs. */\n  inputs?: HvFlowNodeInput[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\n}\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  description,\n  actions,\n  outputs,\n  inputs,\n  actionCallback,\n  maxVisibleActions = 1,\n  expanded = false,\n  params,\n  nodeDefaults,\n  classes: classesProp,\n  children,\n  expandParamsButtonProps,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp as HvFlowNodeClasses);\n\n  const [showParams, setShowParams] = useState(expanded);\n\n  const node = useFlowNode(id);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n  const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n  const groupId = nodeTypes?.[type].meta?.groupId;\n\n  const group = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n  const groupLabel = group?.label || nodeDefaults?.title;\n  const icon = group?.icon || nodeDefaults?.icon;\n  const color = group?.color || nodeDefaults?.color;\n\n  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const hasParams = !!(params && params.length > 0);\n\n  return (\n    <HvFlowBaseNode\n      id={id}\n      type={type}\n      title={groupLabel}\n      icon={icon}\n      color={color}\n      inputs={inputs}\n      outputs={outputs}\n      nodeActions={defaultActions}\n      classes={classesProp as HvFlowBaseNodeClasses}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={description}>\n              <div>\n                <Info color=\"base_dark\" />\n              </div>\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton\n              icon\n              overrideIconColors={false}\n              onClick={() => setShowParams((p) => !p)}\n              aria-label={showParams ? \"Collapse\" : \"Expand\"}\n              {...expandParamsButtonProps}\n            >\n              {showParams ? (\n                <Up role=\"none\" color=\"base_dark\" />\n              ) : (\n                <Down role=\"none\" color=\"base_dark\" />\n              )}\n            </HvButton>\n          )}\n        </>\n      }\n      {...props}\n    >\n      {(subtitle || actsVisible?.length || actsDropdown?.length) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle && (\n            <div>\n              <HvTypography>{subtitle}</HvTypography>\n            </div>\n          )}\n          <div className={classes.actions}>\n            {actions?.length && actions?.length > 0 && (\n              <>\n                {actsVisible?.map((action) => (\n                  <HvTooltip key={action.id} title={action.label}>\n                    <HvButton\n                      icon\n                      onClick={(event) => {\n                        actionCallback?.(event, id, action);\n                      }}\n                      aria-label={action.label}\n                    >\n                      {renderedIcon(action.icon)}\n                    </HvButton>\n                  </HvTooltip>\n                ))}\n\n                {actsDropdown && actsDropdown.length > 0 && (\n                  <HvDropDownMenu\n                    keepOpened={false}\n                    dataList={actsDropdown?.map((action) => ({\n                      id: action.id,\n                      label: action.label,\n                    }))}\n                    onClick={(event, action) => {\n                      actionCallback?.(event, id, action as HvActionGeneric);\n                    }}\n                  />\n                )}\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer nodeId={id} params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":["isValidElement","useClasses","useState","useFlowNode","useFlowContext","jsxs","HvFlowBaseNode","Fragment","jsx","HvTooltip","Info","HvButton","Up","Down","HvTypography","HvDropDownMenu","ParamRenderer"],"mappings":"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"}
+{"version":3,"file":"Node.cjs","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { isValidElement, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeInput, HvFlowNodeOutput, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\nimport {\n  HvFlowBaseNode,\n  HvFlowBaseNodeProps,\n  HvFlowBaseNodeClasses,\n} from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport interface HvFlowNodeClasses\n  extends ExtractNames<typeof useClasses>,\n    HvFlowBaseNodeClasses {}\n\nexport type HvFlowNodeDefaults = {\n  title?: string;\n  subTitle?: string;\n  color?: string;\n  icon?: React.ReactNode;\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n  /** Node description */\n  description?: string;\n  /** Node actions */\n  actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n  /** Node action callback */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** Node maximum number of actions visible */\n  maxVisibleActions?: number;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** A set of node default values for when there are no groups to fetch this data from. */\n  nodeDefaults?: HvFlowNodeDefaults;\n  /** Props to be passed to the expand parameters button. */\n  expandParamsButtonProps?: HvButtonProps;\n  /** Node outputs. */\n  outputs?: HvFlowNodeOutput[];\n  /** Node inputs. */\n  inputs?: HvFlowNodeInput[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\n}\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  description,\n  actions,\n  outputs,\n  inputs,\n  actionCallback,\n  maxVisibleActions = 1,\n  expanded = false,\n  params,\n  nodeDefaults,\n  classes: classesProp,\n  children,\n  expandParamsButtonProps,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp as HvFlowNodeClasses);\n\n  const [showParams, setShowParams] = useState(expanded);\n\n  const node = useFlowNode(id);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n  const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n  const groupId = nodeTypes?.[type].meta?.groupId;\n\n  const group = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n  const groupLabel = group?.label || nodeDefaults?.title;\n  const icon = group?.icon || nodeDefaults?.icon;\n  const color = group?.color || nodeDefaults?.color;\n\n  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const hasParams = !!(params && params.length > 0);\n\n  return (\n    <HvFlowBaseNode\n      id={id}\n      type={type}\n      title={groupLabel}\n      icon={icon}\n      color={color}\n      inputs={inputs}\n      outputs={outputs}\n      nodeActions={defaultActions}\n      classes={classesProp as HvFlowBaseNodeClasses}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={description}>\n              <div>\n                <Info color=\"base_dark\" />\n              </div>\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton\n              icon\n              overrideIconColors={false}\n              onClick={() => setShowParams((p) => !p)}\n              aria-label={showParams ? \"Collapse\" : \"Expand\"}\n              {...expandParamsButtonProps}\n            >\n              {showParams ? (\n                <Up role=\"none\" color=\"base_dark\" />\n              ) : (\n                <Down role=\"none\" color=\"base_dark\" />\n              )}\n            </HvButton>\n          )}\n        </>\n      }\n      {...props}\n    >\n      {(subtitle || actsVisible?.length || actsDropdown?.length) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle && (\n            <div>\n              <HvTypography>{subtitle}</HvTypography>\n            </div>\n          )}\n          <div className={classes.actions}>\n            {actions?.length && actions?.length > 0 && (\n              <>\n                {actsVisible?.map((action) => (\n                  <HvTooltip key={action.id} title={action.label}>\n                    <HvButton\n                      icon\n                      onClick={(event) => {\n                        actionCallback?.(event, id, action);\n                      }}\n                      aria-label={action.label}\n                    >\n                      {renderedIcon(action.icon)}\n                    </HvButton>\n                  </HvTooltip>\n                ))}\n\n                {actsDropdown && actsDropdown.length > 0 && (\n                  <HvDropDownMenu\n                    keepOpened={false}\n                    dataList={actsDropdown?.map((action) => ({\n                      id: action.id,\n                      label: action.label,\n                    }))}\n                    onClick={(event, action) => {\n                      actionCallback?.(event, id, action as HvActionGeneric);\n                    }}\n                  />\n                )}\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":["isValidElement","useClasses","useState","useFlowNode","useFlowContext","jsxs","HvFlowBaseNode","Fragment","jsx","HvTooltip","Info","HvButton","Up","Down","HvTypography","HvDropDownMenu","ParamRenderer"],"mappings":"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"}

package/dist/cjs/Flow/Node/Parameters/ParamRenderer.cjs

@@ -9,12 +9,12 @@ const renderers = {
   select: Select.default,
   slider: Slider.default
 };
-const ParamRenderer = ({ nodeId, params, data }) => {
+const ParamRenderer = ({ params, data }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: params.map((param, idx) => {
     const Renderer = renderers[param.type];
     if (!Renderer)
       return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { nodeId, param, data }, idx);
+    return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { param, data }, idx);
   }) });
 };
 const ParamRenderer$1 = ParamRenderer;

package/dist/cjs/Flow/Node/Parameters/ParamRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ParamRenderer.cjs","sources":["../../../../../src/Flow/Node/Parameters/ParamRenderer.tsx"],"sourcesContent":["import { HvFlowNodeParam } from \"../../types\";\nimport Text from \"./Text\";\nimport Select from \"./Select\";\nimport Slider from \"./Slider\";\n\nexport type ParamRendererProps = {\n  nodeId: string;\n  params: HvFlowNodeParam[];\n  data: any;\n};\n\nconst renderers = {\n  text: Text,\n  select: Select,\n  slider: Slider,\n};\n\nconst ParamRenderer = ({ nodeId, params, data }: ParamRendererProps) => {\n  return (\n    <>\n      {params.map((param, idx) => {\n        const Renderer = renderers[param.type];\n        if (!Renderer) return null;\n\n        return <Renderer key={idx} nodeId={nodeId} param={param} data={data} />;\n      })}\n    </>\n  );\n};\n\nexport default ParamRenderer;\n"],"names":["Text","Select","Slider","jsx","Fragment"],"mappings":";;;;;;AAWA,MAAM,YAAY;AAAA,EAChB,MAAMA,KAAA;AAAA,EACN,QAAQC,OAAA;AAAA,EACR,QAAQC,OAAA;AACV;AAEA,MAAM,gBAAgB,CAAC,EAAE,QAAQ,QAAQ,WAA+B;AACtE,SAEKC,2BAAA,IAAAC,WAAA,UAAA,EAAA,UAAA,OAAO,IAAI,CAAC,OAAO,QAAQ;AACpB,UAAA,WAAW,UAAU,MAAM,IAAI;AACrC,QAAI,CAAC;AAAiB,aAAA;AAEtB,WAAQD,2BAAAA,IAAA,UAAA,EAAmB,QAAgB,OAAc,QAAnC,GAA+C;AAAA,EACtE,CAAA,EACH,CAAA;AAEJ;AAEA,MAAA,kBAAe;;"}
+{"version":3,"file":"ParamRenderer.cjs","sources":["../../../../../src/Flow/Node/Parameters/ParamRenderer.tsx"],"sourcesContent":["import { HvFlowNodeParam } from \"../../types\";\nimport Text from \"./Text\";\nimport Select from \"./Select\";\nimport Slider from \"./Slider\";\n\nexport type ParamRendererProps = {\n  params: HvFlowNodeParam[];\n  data: any;\n};\n\nconst renderers = {\n  text: Text,\n  select: Select,\n  slider: Slider,\n};\n\nconst ParamRenderer = ({ params, data }: ParamRendererProps) => {\n  return (\n    <>\n      {params.map((param, idx) => {\n        const Renderer = renderers[param.type];\n        if (!Renderer) return null;\n\n        return <Renderer key={idx} param={param} data={data} />;\n      })}\n    </>\n  );\n};\n\nexport default ParamRenderer;\n"],"names":["Text","Select","Slider","jsx","Fragment"],"mappings":";;;;;;AAUA,MAAM,YAAY;AAAA,EAChB,MAAMA,KAAA;AAAA,EACN,QAAQC,OAAA;AAAA,EACR,QAAQC,OAAA;AACV;AAEA,MAAM,gBAAgB,CAAC,EAAE,QAAQ,WAA+B;AAC9D,SAEKC,2BAAA,IAAAC,WAAA,UAAA,EAAA,UAAA,OAAO,IAAI,CAAC,OAAO,QAAQ;AACpB,UAAA,WAAW,UAAU,MAAM,IAAI;AACrC,QAAI,CAAC;AAAiB,aAAA;AAEtB,WAAQD,2BAAAA,IAAA,UAAA,EAAmB,OAAc,KAAA,GAAnB,GAA+B;AAAA,EACtD,CAAA,EACH,CAAA;AAEJ;AAEA,MAAA,kBAAe;;"}

package/dist/cjs/Flow/Node/Parameters/Select.cjs

@@ -3,26 +3,16 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const ReactFlow = require("reactflow");
-const Select = ({ nodeId, param, data }) => {
+const useFlowNode = require("../../hooks/useFlowNode.cjs");
+const Select = ({ param, data }) => {
   const { id, label, multiple = false, options } = param;
-  const reactFlowInstance = ReactFlow.useReactFlow();
+  const { setNodeData } = useFlowNode.useFlowNodeUtils();
   const [opts, setOpts] = React.useState(
     data[id] ? Array.isArray(data[id]) ? data[id] : [data[id]] : void 0
   );
   const onSelectChange = (item) => {
     const newOpts = Array.isArray(item) ? item.map((x) => x.label) : item?.label ?? void 0;
-    reactFlowInstance.setNodes(
-      (nodes) => nodes.map((node) => {
-        if (node.id === nodeId) {
-          node.data = {
-            ...node.data,
-            [id]: newOpts
-          };
-        }
-        return node;
-      })
-    );
+    setNodeData((prev) => ({ ...prev, [id]: newOpts }));
     setOpts(
       newOpts ? Array.isArray(newOpts) ? newOpts : [newOpts] : void 0
     );

package/dist/cjs/Flow/Node/Parameters/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../../src/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvFlowNodeSelectParam } from \"../../types\";\n\ninterface SelectProps {\n  nodeId: string;\n  param: Omit<HvFlowNodeSelectParam, \"type\">;\n  data: any;\n}\n\nconst Select = ({ nodeId, param, data }: SelectProps) => {\n  const { id, label, multiple = false, options } = param;\n\n  const reactFlowInstance = useReactFlow();\n\n  const [opts, setOpts] = useState<string[] | undefined>(\n    data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined\n  );\n\n  const onSelectChange: HvDropdownProps[\"onChange\"] = (item) => {\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.label as string)\n      : (item?.label as string) ?? undefined;\n\n    reactFlowInstance.setNodes((nodes) =>\n      nodes.map((node) => {\n        if (node.id === nodeId) {\n          node.data = {\n            ...node.data,\n            [id]: newOpts,\n          };\n        }\n        return node;\n      })\n    );\n    setOpts(\n      newOpts ? (Array.isArray(newOpts) ? newOpts : [newOpts]) : undefined\n    );\n  };\n\n  return (\n    <HvDropdown\n      className=\"nodrag\" // Prevents dragging within the select field\n      disablePortal\n      label={label}\n      values={options?.map((o) => {\n        return { id: o, label: o, selected: !!opts?.find((opt) => opt === o) };\n      })}\n      onChange={onSelectChange}\n      maxHeight={100}\n      multiSelect={multiple}\n    />\n  );\n};\n\nexport default Select;\n"],"names":["useReactFlow","useState","jsx","HvDropdown"],"mappings":";;;;;;AAYA,MAAM,SAAS,CAAC,EAAE,QAAQ,OAAO,WAAwB;AACvD,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,QAAY,IAAA;AAEjD,QAAM,oBAAoBA,UAAAA;AAEpB,QAAA,CAAC,MAAM,OAAO,IAAIC,MAAA;AAAA,IACtB,KAAK,EAAE,IAAK,MAAM,QAAQ,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAK;AAAA,EAAA;AAG3D,QAAA,iBAA8C,CAAC,SAAS;AAC5D,UAAM,UAAU,MAAM,QAAQ,IAAI,IAC9B,KAAK,IAAI,CAAC,MAAM,EAAE,KAAe,IAChC,MAAM,SAAoB;AAEb,sBAAA;AAAA,MAAS,CAAC,UAC1B,MAAM,IAAI,CAAC,SAAS;AACd,YAAA,KAAK,OAAO,QAAQ;AACtB,eAAK,OAAO;AAAA,YACV,GAAG,KAAK;AAAA,YACR,CAAC,EAAE,GAAG;AAAA,UAAA;AAAA,QAEV;AACO,eAAA;AAAA,MAAA,CACR;AAAA,IAAA;AAEH;AAAA,MACE,UAAW,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,IAAK;AAAA,IAAA;AAAA,EAC7D;AAIA,SAAAC,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQ,SAAS,IAAI,CAAC,MAAM;AAC1B,eAAO,EAAE,IAAI,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,QAAQ,QAAQ,CAAC,EAAE;AAAA,MAAA,CACtE;AAAA,MACD,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EAAA;AAGnB;AAEA,MAAA,WAAe;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../../../src/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeSelectParam } from \"../../types\";\nimport { useFlowNodeUtils } from \"../../hooks\";\n\ninterface SelectProps {\n  param: Omit<HvFlowNodeSelectParam, \"type\">;\n  data: any;\n}\n\nconst Select = ({ param, data }: SelectProps) => {\n  const { id, label, multiple = false, options } = param;\n  const { setNodeData } = useFlowNodeUtils();\n\n  const [opts, setOpts] = useState<string[] | undefined>(\n    data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined\n  );\n\n  const onSelectChange: HvDropdownProps[\"onChange\"] = (item) => {\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.label as string)\n      : (item?.label as string) ?? undefined;\n\n    setNodeData((prev) => ({ ...prev, [id]: newOpts }));\n    setOpts(\n      newOpts ? (Array.isArray(newOpts) ? newOpts : [newOpts]) : undefined\n    );\n  };\n\n  return (\n    <HvDropdown\n      className=\"nodrag\" // Prevents dragging within the select field\n      disablePortal\n      label={label}\n      values={options?.map((o) => {\n        return { id: o, label: o, selected: !!opts?.find((opt) => opt === o) };\n      })}\n      onChange={onSelectChange}\n      maxHeight={100}\n      multiSelect={multiple}\n    />\n  );\n};\n\nexport default Select;\n"],"names":["useFlowNodeUtils","useState","jsx","HvDropdown"],"mappings":";;;;;;AAWA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AAC/C,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,QAAY,IAAA;AAC3C,QAAA,EAAE,gBAAgBA,YAAAA;AAElB,QAAA,CAAC,MAAM,OAAO,IAAIC,MAAA;AAAA,IACtB,KAAK,EAAE,IAAK,MAAM,QAAQ,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAK;AAAA,EAAA;AAG3D,QAAA,iBAA8C,CAAC,SAAS;AAC5D,UAAM,UAAU,MAAM,QAAQ,IAAI,IAC9B,KAAK,IAAI,CAAC,MAAM,EAAE,KAAe,IAChC,MAAM,SAAoB;AAEnB,gBAAA,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,QAAU,EAAA;AAClD;AAAA,MACE,UAAW,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,IAAK;AAAA,IAAA;AAAA,EAC7D;AAIA,SAAAC,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQ,SAAS,IAAI,CAAC,MAAM;AAC1B,eAAO,EAAE,IAAI,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,QAAQ,QAAQ,CAAC,EAAE;AAAA,MAAA,CACtE;AAAA,MACD,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EAAA;AAGnB;AAEA,MAAA,WAAe;;"}

package/dist/cjs/Flow/Node/Parameters/Slider.cjs

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
 const css = require("@emotion/css");
-const ReactFlow = require("reactflow");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const useFlowNode = require("../../hooks/useFlowNode.cjs");
 const classes = {
   labelContainer: css.css({
     marginRight: 0,
@@ -14,27 +13,15 @@ const classes = {
     padding: 0
   })
 };
-const Slider = ({ nodeId, param, data }) => {
+const Slider = ({ param, data }) => {
   const { id } = param;
-  const reactFlowInstance = ReactFlow.useReactFlow();
-  const [value, setValue] = React.useState(data[id]);
-  const onSliderChange = (val) => {
-    reactFlowInstance.setNodes(
-      (nodes) => nodes.map((node) => {
-        if (node.id === nodeId) {
-          node.data = { ...node.data, [id]: val };
-        }
-        return node;
-      })
-    );
-    setValue(val);
-  };
+  const { setNodeData } = useFlowNode.useFlowNodeUtils();
   return /* @__PURE__ */ jsxRuntime.jsx(
     uikitReactCore.HvSlider,
     {
       className: "nodrag",
-      defaultValues: value,
-      onChange: onSliderChange,
+      defaultValues: data[id],
+      onChange: (val) => setNodeData((prev) => ({ ...prev, [id]: val })),
       classes: {
         labelContainer: classes.labelContainer,
         sliderBase: classes.sliderBase

package/dist/cjs/Flow/Node/Parameters/Slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.cjs","sources":["../../../../../src/Flow/Node/Parameters/Slider.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { css } from \"@emotion/css\";\n\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvSlider, HvSliderProps } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeSliderParam } from \"../../types\";\n\ninterface SliderProps {\n  nodeId: string;\n  param: Omit<HvFlowNodeSliderParam, \"type\">;\n  data: any;\n}\n\nconst classes = {\n  labelContainer: css({\n    marginRight: 0,\n    marginLeft: 0,\n  }),\n  sliderBase: css({\n    padding: 0,\n  }),\n};\n\nconst Slider = ({ nodeId, param, data }: SliderProps) => {\n  const { id } = param;\n\n  const reactFlowInstance = useReactFlow();\n\n  const [value, setValue] = useState(data[id]);\n\n  const onSliderChange: HvSliderProps[\"onChange\"] = (val) => {\n    reactFlowInstance.setNodes((nodes) =>\n      nodes.map((node) => {\n        if (node.id === nodeId) {\n          node.data = { ...node.data, [id]: val };\n        }\n        return node;\n      })\n    );\n    setValue(val);\n  };\n\n  return (\n    <HvSlider\n      className=\"nodrag\" // Prevents dragging within the input field\n      defaultValues={value}\n      onChange={onSliderChange}\n      classes={{\n        labelContainer: classes.labelContainer,\n        sliderBase: classes.sliderBase,\n      }}\n      {...param}\n    />\n  );\n};\n\nexport default Slider;\n"],"names":["css","useReactFlow","useState","jsx","HvSlider"],"mappings":";;;;;;;AAgBA,MAAM,UAAU;AAAA,EACd,gBAAgBA,IAAAA,IAAI;AAAA,IAClB,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,CACb;AAAA,EACD,YAAYA,IAAAA,IAAI;AAAA,IACd,SAAS;AAAA,EAAA,CACV;AACH;AAEA,MAAM,SAAS,CAAC,EAAE,QAAQ,OAAO,WAAwB;AACjD,QAAA,EAAE,GAAO,IAAA;AAEf,QAAM,oBAAoBC,UAAAA;AAE1B,QAAM,CAAC,OAAO,QAAQ,IAAIC,MAAS,SAAA,KAAK,EAAE,CAAC;AAErC,QAAA,iBAA4C,CAAC,QAAQ;AACvC,sBAAA;AAAA,MAAS,CAAC,UAC1B,MAAM,IAAI,CAAC,SAAS;AACd,YAAA,KAAK,OAAO,QAAQ;AACjB,eAAA,OAAO,EAAE,GAAG,KAAK,MAAM,CAAC,EAAE,GAAG;QACpC;AACO,eAAA;AAAA,MAAA,CACR;AAAA,IAAA;AAEH,aAAS,GAAG;AAAA,EAAA;AAIZ,SAAAC,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAe;AAAA,MACf,UAAU;AAAA,MACV,SAAS;AAAA,QACP,gBAAgB,QAAQ;AAAA,QACxB,YAAY,QAAQ;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAA,WAAe;;"}
+{"version":3,"file":"Slider.cjs","sources":["../../../../../src/Flow/Node/Parameters/Slider.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { HvSlider } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeSliderParam } from \"../../types\";\nimport { useFlowNodeUtils } from \"../../hooks\";\n\ninterface SliderProps {\n  param: Omit<HvFlowNodeSliderParam, \"type\">;\n  data: any;\n}\n\nconst classes = {\n  labelContainer: css({\n    marginRight: 0,\n    marginLeft: 0,\n  }),\n  sliderBase: css({\n    padding: 0,\n  }),\n};\n\nconst Slider = ({ param, data }: SliderProps) => {\n  const { id } = param;\n  const { setNodeData } = useFlowNodeUtils();\n\n  return (\n    <HvSlider\n      className=\"nodrag\" // Prevents dragging within the input field\n      defaultValues={data[id]}\n      onChange={(val) => setNodeData((prev) => ({ ...prev, [id]: val }))}\n      classes={{\n        labelContainer: classes.labelContainer,\n        sliderBase: classes.sliderBase,\n      }}\n      {...param}\n    />\n  );\n};\n\nexport default Slider;\n"],"names":["css","useFlowNodeUtils","jsx","HvSlider"],"mappings":";;;;;;AAWA,MAAM,UAAU;AAAA,EACd,gBAAgBA,IAAAA,IAAI;AAAA,IAClB,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,CACb;AAAA,EACD,YAAYA,IAAAA,IAAI;AAAA,IACd,SAAS;AAAA,EAAA,CACV;AACH;AAEA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AACzC,QAAA,EAAE,GAAO,IAAA;AACT,QAAA,EAAE,gBAAgBC,YAAAA;AAGtB,SAAAC,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAe,KAAK,EAAE;AAAA,MACtB,UAAU,CAAC,QAAQ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM;AAAA,MACjE,SAAS;AAAA,QACP,gBAAgB,QAAQ;AAAA,QACxB,YAAY,QAAQ;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAA,WAAe;;"}