@hitachivantara/uikit-react-lab 5.35.12 → 5.36.0

package/dist/esm/Canvas/CanvasPanel/CanvasPanel.js

@@ -0,0 +1,93 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import { useDefaultProps, useLabels, useTheme, useControlled } from "@hitachivantara/uikit-react-core";
+import { Start, End } from "@hitachivantara/uikit-react-icons";
+import { useClasses } from "./CanvasPanel.styles.js";
+import { staticClasses } from "./CanvasPanel.styles.js";
+import { HvCanvasTabs } from "../CanvasTabs/CanvasTabs.js";
+const DEFAULT_LABELS = {
+  open: "Open",
+  close: "Close"
+};
+const HvCanvasPanel = (props) => {
+  const {
+    open: openProp,
+    defaultOpened = false,
+    tabs,
+    onToggle,
+    onTabChange,
+    labels: labelsProp,
+    className,
+    children,
+    classes: classesProp,
+    ...others
+  } = useDefaultProps("HvCanvasPanel", props);
+  const { classes, cx } = useClasses(classesProp);
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
+  const { rootId, activeTheme } = useTheme();
+  const [open, setOpen] = useControlled(openProp, Boolean(defaultOpened));
+  const setPanelWidth = useCallback(() => {
+    if (rootId) {
+      document.getElementById(rootId)?.style.setProperty(
+        "--canvas-panel-width",
+        !open ? "0px" : `${320 + (activeTheme ? parseInt(activeTheme.space.md, 10) : 24)}px`
+      );
+    }
+  }, [activeTheme, open, rootId]);
+  useEffect(() => {
+    setPanelWidth();
+  }, [open, setPanelWidth]);
+  const handleTogglePanel = (event) => {
+    setOpen((prev) => !prev);
+    onToggle?.(event, !open);
+  };
+  const handleTabChange = (event, tabId) => {
+    onTabChange?.(event, tabId);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(classes.root, className, {
+          [classes.open]: open,
+          [classes.close]: !open
+        }),
+        ...others,
+        children: [
+          tabs && /* @__PURE__ */ jsx(
+            HvCanvasTabs,
+            {
+              className: classes.tabs,
+              tabs,
+              onChange: handleTabChange
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: classes.content, children })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(classes.handle, {
+          [classes.handleOpen]: open,
+          [classes.handleClose]: !open
+        }),
+        onClick: handleTogglePanel,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            handleTogglePanel(e);
+          }
+        },
+        "aria-label": open ? labels.close : labels.open,
+        children: /* @__PURE__ */ jsx("div", { className: classes.handleButton, children: open ? /* @__PURE__ */ jsx(Start, { color: ["primary"] }) : /* @__PURE__ */ jsx(End, { color: ["primary"] }) })
+      }
+    )
+  ] });
+};
+export {
+  HvCanvasPanel,
+  staticClasses as canvasPanelClasses
+};

package/dist/esm/Canvas/CanvasPanel/CanvasPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasPanel.js","sources":["../../../../src/Canvas/CanvasPanel/CanvasPanel.tsx"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  useControlled,\n  useDefaultProps,\n  useLabels,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End, Start } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasTab, HvCanvasTabs } from \"../CanvasTabs\";\nimport { staticClasses, useClasses } from \"./CanvasPanel.styles\";\n\nexport { staticClasses as canvasPanelClasses };\n\nexport type HvCanvasPanelClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  open: \"Open\",\n  close: \"Close\",\n};\n\nexport interface HvCanvasPanelProps extends HvBaseProps<HTMLDivElement> {\n  /** Whether the panel is open or not. If this property is defined the panel must be fully controlled. */\n  open?: boolean;\n  /** When uncontrolled, defines the initial state of the panel. */\n  defaultOpened?: boolean;\n  /** The tabs that should be visible on the canvas panel */\n  tabs?: HvCanvasTab[];\n  /** The function that will be executed whenever the panel toggles. It will receive the state of the accordion. */\n  onToggle?: (\n    event: React.MouseEvent | React.KeyboardEvent,\n    open: boolean,\n  ) => void;\n  /** The function that will be executed when a tab changes.It will receive the id of the selected tab. */\n  onTabChange?: (event: React.SyntheticEvent, tabId: string) => void;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /* The content that will be rendered within canvas panel. */\n  children?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasPanelClasses;\n}\n\n/**\n * A panel component to use in a canvas context.\n */\nexport const HvCanvasPanel = (props: HvCanvasPanelProps) => {\n  const {\n    open: openProp,\n    defaultOpened = false,\n    tabs,\n    onToggle,\n    onTabChange,\n    labels: labelsProp,\n    className,\n    children,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasPanel\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const { rootId, activeTheme } = useTheme();\n\n  const [open, setOpen] = useControlled(openProp, Boolean(defaultOpened));\n\n  const setPanelWidth = useCallback(() => {\n    if (rootId) {\n      document\n        .getElementById(rootId)\n        ?.style.setProperty(\n          \"--canvas-panel-width\",\n          !open\n            ? \"0px\"\n            : `${320 + (activeTheme ? parseInt(activeTheme.space.md, 10) : 24)}px`,\n        );\n    }\n  }, [activeTheme, open, rootId]);\n\n  useEffect(() => {\n    setPanelWidth();\n  }, [open, setPanelWidth]);\n\n  const handleTogglePanel = (event) => {\n    setOpen((prev) => !prev);\n    onToggle?.(event, !open);\n  };\n\n  const handleTabChange = (event, tabId) => {\n    onTabChange?.(event, tabId);\n  };\n\n  return (\n    <>\n      <div\n        className={cx(classes.root, className, {\n          [classes.open]: open,\n          [classes.close]: !open,\n        })}\n        {...others}\n      >\n        {tabs && (\n          <HvCanvasTabs\n            className={classes.tabs}\n            tabs={tabs}\n            onChange={handleTabChange}\n          />\n        )}\n        <div className={classes.content}>{children}</div>\n      </div>\n      <div\n        className={cx(classes.handle, {\n          [classes.handleOpen]: open,\n          [classes.handleClose]: !open,\n        })}\n        onClick={handleTogglePanel}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            handleTogglePanel(e);\n          }\n        }}\n        aria-label={open ? labels.close : labels.open}\n      >\n        <div className={classes.handleButton}>\n          {open ? <Start color={[\"primary\"]} /> : <End color={[\"primary\"]} />}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAkBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AACT;AA2Ba,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AACnD,QAAM,EAAE,QAAQ,YAAY,IAAI,SAAS;AAEnC,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,aAAa,CAAC;AAEhE,QAAA,gBAAgB,YAAY,MAAM;AACtC,QAAI,QAAQ;AAEP,eAAA,eAAe,MAAM,GACpB,MAAM;AAAA,QACN;AAAA,QACA,CAAC,OACG,QACA,GAAG,OAAO,cAAc,SAAS,YAAY,MAAM,IAAI,EAAE,IAAI,GAAG;AAAA,MAAA;AAAA,IAE1E;AAAA,EACC,GAAA,CAAC,aAAa,MAAM,MAAM,CAAC;AAE9B,YAAU,MAAM;AACA;EAAA,GACb,CAAC,MAAM,aAAa,CAAC;AAElB,QAAA,oBAAoB,CAAC,UAAU;AAC3B,YAAA,CAAC,SAAS,CAAC,IAAI;AACZ,eAAA,OAAO,CAAC,IAAI;AAAA,EAAA;AAGnB,QAAA,kBAAkB,CAAC,OAAO,UAAU;AACxC,kBAAc,OAAO,KAAK;AAAA,EAAA;AAG5B,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,KAAK,GAAG,CAAC;AAAA,QAAA,CACnB;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UACC,QAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UAED,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7C;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,QAAQ;AAAA,UAC5B,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,QAAA,CACzB;AAAA,QACD,SAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,8BAAkB,CAAC;AAAA,UACrB;AAAA,QACF;AAAA,QACA,cAAY,OAAO,OAAO,QAAQ,OAAO;AAAA,QAEzC,8BAAC,OAAI,EAAA,WAAW,QAAQ,cACrB,UAAA,2BAAQ,OAAM,EAAA,OAAO,CAAC,SAAS,GAAG,IAAM,oBAAA,KAAA,EAAI,OAAO,CAAC,SAAS,EAAG,CAAA,GACnE;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/Canvas/CanvasPanel/CanvasPanel.styles.js

@@ -0,0 +1,61 @@
+import { createClasses } from "@hitachivantara/uikit-react-core";
+import { theme } from "@hitachivantara/uikit-styles";
+const { staticClasses, useClasses } = createClasses("HvCanvasPanel", {
+  root: {
+    height: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    boxShadow: `4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)`,
+    zIndex: theme.zIndices.overlay,
+    backgroundColor: "transparent",
+    transition: "width 0.3s ease",
+    overflow: "hidden",
+    "&$open": {
+      width: 320
+    },
+    "&$close": {
+      width: 0
+    }
+  },
+  tabs: {},
+  content: {
+    backgroundColor: theme.colors.atmo1,
+    height: "100%",
+    padding: theme.space.md
+  },
+  handle: {
+    height: 172,
+    width: 35,
+    display: "flex",
+    justifyContent: "center",
+    zIndex: theme.zIndices.overlay,
+    boxShadow: `4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)`,
+    backgroundColor: theme.colors.atmo1,
+    borderRadius: `0 ${theme.radii.round} ${theme.radii.round} 0 `,
+    position: "absolute",
+    transition: "left 0.3s ease",
+    top: `calc(50% - 86px)`,
+    "&$handleOpen": {
+      left: 320
+    },
+    "&$handleClose": {
+      left: 0
+    },
+    "&:hover": {
+      cursor: "pointer"
+    }
+  },
+  handleButton: {
+    top: `calc(50% - 16px)`,
+    position: "absolute"
+  },
+  open: {},
+  close: {},
+  handleOpen: {},
+  handleClose: {}
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Canvas/CanvasPanel/CanvasPanel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasPanel.styles.js","sources":["../../../../src/Canvas/CanvasPanel/CanvasPanel.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasPanel\", {\n  root: {\n    height: \"100%\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    boxShadow: `4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)`,\n    zIndex: theme.zIndices.overlay,\n    backgroundColor: \"transparent\",\n    transition: \"width 0.3s ease\",\n    overflow: \"hidden\",\n    \"&$open\": {\n      width: 320,\n    },\n    \"&$close\": {\n      width: 0,\n    },\n  },\n  tabs: {},\n  content: {\n    backgroundColor: theme.colors.atmo1,\n    height: \"100%\",\n    padding: theme.space.md,\n  },\n  handle: {\n    height: 172,\n    width: 35,\n    display: \"flex\",\n    justifyContent: \"center\",\n    zIndex: theme.zIndices.overlay,\n    boxShadow: `4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)`,\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: `0 ${theme.radii.round} ${theme.radii.round} 0 `,\n    position: \"absolute\",\n    transition: \"left 0.3s ease\",\n    top: `calc(50% - 86px)`,\n    \"&$handleOpen\": {\n      left: 320,\n    },\n    \"&$handleClose\": {\n      left: 0,\n    },\n    \"&:hover\": {\n      cursor: \"pointer\",\n    },\n  },\n  handleButton: {\n    top: `calc(50% - 16px)`,\n    position: \"absolute\",\n  },\n  open: {},\n  close: {},\n  handleOpen: {},\n  handleClose: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ,MAAM,SAAS;AAAA,IACvB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,MACR,OAAO;AAAA,IACT;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,QAAQ,MAAM,SAAS;AAAA,IACvB,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc,KAAK,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,IACzD,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,gBAAgB;AAAA,MACd,MAAM;AAAA,IACR;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,KAAK;AAAA,IACL,UAAU;AAAA,EACZ;AAAA,EACA,MAAM,CAAC;AAAA,EACP,OAAO,CAAC;AAAA,EACR,YAAY,CAAC;AAAA,EACb,aAAa,CAAC;AAChB,CAAC;"}

package/dist/esm/Canvas/CanvasTabs/CanvasTabs.js

@@ -0,0 +1,52 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useState } from "react";
+import { Tab } from "@mui/base/Tab";
+import { Tabs } from "@mui/base/Tabs";
+import { TabsList } from "@mui/base/TabsList";
+import { useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./CanvasTabs.styles.js";
+import { staticClasses } from "./CanvasTabs.styles.js";
+const HvCanvasTabs = (props) => {
+  const {
+    tabs,
+    onChange,
+    className,
+    classes: classesProp,
+    ...others
+  } = useDefaultProps("HvCanvasTabs", props);
+  const { classes, cx } = useClasses(classesProp);
+  const [selectedTab, setSelectedTab] = useState(
+    tabs?.[0]?.id || "none"
+  );
+  const handleTabChange = (event, value) => {
+    onChange?.(event, value);
+    setSelectedTab(value);
+  };
+  return /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      value: selectedTab,
+      onChange: handleTabChange,
+      className: cx(classes.root, className),
+      selectionFollowsFocus: true,
+      ...others,
+      children: /* @__PURE__ */ jsx(TabsList, { className: classes.list, children: tabs?.map((tab) => /* @__PURE__ */ jsx(
+        Tab,
+        {
+          value: tab.id,
+          className: cx(classes.tab, {
+            [classes.selected]: tab.id === selectedTab
+          }),
+          onChange: handleTabChange,
+          tabIndex: 0,
+          children: tab.content
+        },
+        tab.id
+      )) })
+    }
+  );
+};
+export {
+  HvCanvasTabs,
+  staticClasses as canvasTabsClasses
+};

package/dist/esm/Canvas/CanvasTabs/CanvasTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasTabs.js","sources":["../../../../src/Canvas/CanvasTabs/CanvasTabs.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Tab } from \"@mui/base/Tab\";\nimport { Tabs, TabsProps } from \"@mui/base/Tabs\";\nimport { TabsList } from \"@mui/base/TabsList\";\nimport {\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./CanvasTabs.styles\";\n\nexport { staticClasses as canvasTabsClasses };\n\nexport type HvCanvasTabsClasses = ExtractNames<typeof useClasses>;\n\nexport type HvCanvasTab = {\n  id: string;\n  content: React.ReactNode;\n};\n\nexport interface HvCanvasTabsProps extends Omit<TabsProps, \"onChange\"> {\n  /** The list of tabs. */\n  tabs: HvCanvasTab[];\n  /** Event handler to run when a tab is clicked. */\n  onChange?: (event: React.SyntheticEvent, tabId: string) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasTabsClasses;\n}\n\n/**\n *\n */\nexport const HvCanvasTabs = (props: HvCanvasTabsProps) => {\n  const {\n    tabs,\n    onChange,\n    className,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasTabs\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [selectedTab, setSelectedTab] = useState<string>(\n    tabs?.[0]?.id || \"none\",\n  );\n\n  const handleTabChange = (event, value) => {\n    onChange?.(event, value);\n    setSelectedTab(value);\n  };\n\n  return (\n    <Tabs\n      value={selectedTab}\n      onChange={handleTabChange}\n      className={cx(classes.root, className)}\n      selectionFollowsFocus\n      {...others}\n    >\n      <TabsList className={classes.list}>\n        {tabs?.map((tab) => (\n          <Tab\n            key={tab.id}\n            value={tab.id}\n            className={cx(classes.tab, {\n              [classes.selected]: tab.id === selectedTab,\n            })}\n            onChange={handleTabChange}\n            tabIndex={0}\n          >\n            {tab.content}\n          </Tab>\n        ))}\n      </TabsList>\n    </Tabs>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAgCa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,OAAO,CAAC,GAAG,MAAM;AAAA,EAAA;AAGb,QAAA,kBAAkB,CAAC,OAAO,UAAU;AACxC,eAAW,OAAO,KAAK;AACvB,mBAAe,KAAK;AAAA,EAAA;AAIpB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,uBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAA,oBAAC,YAAS,WAAW,QAAQ,MAC1B,UAAM,MAAA,IAAI,CAAC,QACV;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,OAAO,IAAI;AAAA,UACX,WAAW,GAAG,QAAQ,KAAK;AAAA,YACzB,CAAC,QAAQ,QAAQ,GAAG,IAAI,OAAO;AAAA,UAAA,CAChC;AAAA,UACD,UAAU;AAAA,UACV,UAAU;AAAA,UAET,UAAI,IAAA;AAAA,QAAA;AAAA,QARA,IAAI;AAAA,MAUZ,CAAA,GACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Canvas/CanvasTabs/CanvasTabs.styles.js

@@ -0,0 +1,41 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const { staticClasses, useClasses } = createClasses("HvCanvasTabs", {
+  root: {
+    height: 48,
+    display: "flex"
+  },
+  list: {
+    display: "flex",
+    width: "100%"
+  },
+  tab: {
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    borderRadius: `16px 16px 0 0 `,
+    backgroundColor: theme.colors.atmo2,
+    color: theme.colors.secondary_60,
+    overflow: "hidden",
+    width: "100%",
+    "& svg .color0": {
+      fill: "currentcolor"
+    },
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "&:focus": {
+      backgroundColor: theme.colors.atmo1
+    },
+    "&$selected": {
+      backgroundColor: theme.colors.atmo1,
+      ...theme.typography.label
+    }
+  },
+  selected: {}
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Canvas/CanvasTabs/CanvasTabs.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasTabs.styles.js","sources":["../../../../src/Canvas/CanvasTabs/CanvasTabs.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasTabs\", {\n  root: {\n    height: 48,\n    display: \"flex\",\n  },\n  list: {\n    display: \"flex\",\n    width: \"100%\",\n  },\n  tab: {\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flex: 1,\n    borderRadius: `16px 16px 0 0 `,\n    backgroundColor: theme.colors.atmo2,\n    color: theme.colors.secondary_60,\n    overflow: \"hidden\",\n    width: \"100%\",\n    \"& svg .color0\": {\n      fill: \"currentcolor\",\n    },\n    \"&:hover\": {\n      cursor: \"pointer\",\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n    \"&$selected\": {\n      backgroundColor: theme.colors.atmo1,\n      ...theme.typography.label,\n    },\n  },\n  selected: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,KAAK;AAAA,IACH,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZ,iBAAiB,MAAM,OAAO;AAAA,MAC9B,GAAG,MAAM,WAAW;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,CAAC;AACb,CAAC;"}

package/dist/esm/Canvas/CanvasToolbar/CanvasToolbar.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps, useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
+import { Previous } from "@hitachivantara/uikit-react-icons";
+import { useClasses } from "./CanvasToolbar.styles.js";
+import { staticClasses } from "./CanvasToolbar.styles.js";
+const DEFAULT_LABELS = {
+  back: "Back"
+};
+const HvCanvasToolbar = (props) => {
+  const {
+    title: titleProp,
+    backButton,
+    labels: labelsProp,
+    className,
+    children,
+    classes: classesProp,
+    ...others
+  } = useDefaultProps("HvCanvasToolbar", props);
+  const { classes, cx } = useClasses(classesProp);
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
+  const title = typeof titleProp === "string" ? /* @__PURE__ */ jsx(HvTypography, { variant: "title4", children: titleProp }) : titleProp;
+  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), ...others, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsx(HvIconButton, { title: labels.back, variant: "primaryGhost", children: /* @__PURE__ */ jsx(Previous, {}) }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.title, children: title }),
+    children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
+  ] });
+};
+export {
+  HvCanvasToolbar,
+  staticClasses as canvasToolbarClasses
+};

package/dist/esm/Canvas/CanvasToolbar/CanvasToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasToolbar.js","sources":["../../../../src/Canvas/CanvasToolbar/CanvasToolbar.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  HvGlobalActionsProps,\n  HvIconButton,\n  HvTypography,\n  useDefaultProps,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Previous } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./CanvasToolbar.styles\";\n\nexport { staticClasses as canvasToolbarClasses };\n\nexport type HvCanvasToolbarClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  back: \"Back\",\n};\n\nexport interface HvCanvasToolbarProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title: HvGlobalActionsProps[\"title\"];\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: HvGlobalActionsProps[\"backButton\"];\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /* The content that will be rendered within the toolbar. */\n  children: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasToolbarClasses;\n}\n\n/**\n * A toolbar component to use in a canvas context.\n */\nexport const HvCanvasToolbar = (props: HvCanvasToolbarProps) => {\n  const {\n    title: titleProp,\n    backButton,\n    labels: labelsProp,\n    className,\n    children,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasToolbar\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const title =\n    typeof titleProp === \"string\" ? (\n      <HvTypography variant=\"title4\">{titleProp}</HvTypography>\n    ) : (\n      titleProp\n    );\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div className={classes.back}>\n        {backButton ?? (\n          <HvIconButton title={labels.back} variant=\"primaryGhost\">\n            <Previous />\n          </HvIconButton>\n        )}\n      </div>\n      <div className={classes.title}>{title}</div>\n      {children && <div className={classes.actions}>{children}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AACR;AAmBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,QACJ,OAAO,cAAc,+BAClB,cAAa,EAAA,SAAQ,UAAU,UAAA,UAAU,CAAA,IAE1C;AAIF,SAAA,qBAAC,SAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MACrB,wBACE,oBAAA,cAAA,EAAa,OAAO,OAAO,MAAM,SAAQ,gBACxC,UAAC,oBAAA,UAAA,CAAA,CAAS,EACZ,CAAA,GAEJ;AAAA,IACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,IACrC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAS;AAAA,EAC1D,EAAA,CAAA;AAEJ;"}

package/dist/esm/Canvas/CanvasToolbar/CanvasToolbar.styles.js

@@ -0,0 +1,43 @@
+import { createClasses } from "@hitachivantara/uikit-react-core";
+import { theme } from "@hitachivantara/uikit-styles";
+const { staticClasses, useClasses } = createClasses("HvCanvasToolbar", {
+  root: {
+    width: `calc(100% - var(--canvas-panel-width))`,
+    height: 54,
+    display: "flex",
+    alignItems: "center",
+    borderRadius: theme.radii.full,
+    backgroundColor: theme.colors.atmo1,
+    padding: theme.spacing(0, "md", 0, 0),
+    position: "absolute",
+    right: 0,
+    top: 0,
+    margin: `0 0 0 ${theme.space.md}`,
+    transition: "width 0.3s ease"
+  },
+  back: {
+    borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,
+    minWidth: 68,
+    backgroundColor: theme.colors.containerBackgroundHover,
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  title: {
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(0, "md"),
+    height: "100%",
+    flexGrow: 1
+  },
+  actions: {
+    display: "flex",
+    flexWrap: "nowrap",
+    overflow: "scroll"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Canvas/CanvasToolbar/CanvasToolbar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasToolbar.styles.js","sources":["../../../../src/Canvas/CanvasToolbar/CanvasToolbar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasToolbar\", {\n  root: {\n    width: `calc(100% - var(--canvas-panel-width))`,\n    height: 54,\n    display: \"flex\",\n    alignItems: \"center\",\n    borderRadius: theme.radii.full,\n    backgroundColor: theme.colors.atmo1,\n    padding: theme.spacing(0, \"md\", 0, 0),\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    margin: `0 0 0 ${theme.space.md}`,\n    transition: \"width 0.3s ease\",\n  },\n  back: {\n    borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,\n    minWidth: 68,\n    backgroundColor: theme.colors.containerBackgroundHover,\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  title: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing(0, \"md\"),\n    height: \"100%\",\n    flexGrow: 1,\n  },\n  actions: {\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    overflow: \"scroll\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,QAAQ,GAAG,MAAM,GAAG,CAAC;AAAA,IACpC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ,SAAS,MAAM,MAAM,EAAE;AAAA,IAC/B,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,GAAG,MAAM,MAAM,IAAI,QAAQ,MAAM,MAAM,IAAI;AAAA,IACzD,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AACF,CAAC;"}

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

@@ -1,11 +1,7 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
 import { staticClasses as staticClasses$1 } from "./Node/BaseNode.styles.js";
 import "@emotion/react/jsx-runtime";
-import "react";
 import "reactflow";
-import "uid";
-import "@hitachivantara/uikit-react-icons";
-import "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvFlow", {
   root: {
     height: "100%",

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.styles.js","sources":["../../../src/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowBaseNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n  root: {\n    height: \"100%\",\n    [`& .selected > .${flowBaseNodeClasses.root}`]: {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      borderRadius: theme.radii.round,\n      boxSizing: \"border-box\",\n    },\n  },\n});\n"],"names":["flowBaseNodeClasses"],"mappings":";;;;;;;;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,CAAC,kBAAkBA,gBAAoB,IAAI,EAAE,GAAG;AAAA,MAC9C,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,cAAc,MAAM,MAAM;AAAA,MAC1B,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"Flow.styles.js","sources":["../../../src/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowBaseNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n  root: {\n    height: \"100%\",\n    [`& .selected > .${flowBaseNodeClasses.root}`]: {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      borderRadius: theme.radii.round,\n      boxSizing: \"border-box\",\n    },\n  },\n});\n"],"names":["flowBaseNodeClasses"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,CAAC,kBAAkBA,gBAAoB,IAAI,EAAE,GAAG;AAAA,MAC9C,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,cAAc,MAAM,MAAM;AAAA,MAC1B,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;"}

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

@@ -1,16 +1,10 @@
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
-import { useMemo, useEffect, useState, useCallback, isValidElement } from "react";
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { NodeToolbar, Handle, Position } from "reactflow";
-import { uid } from "uid";
 import { useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
-import { Delete, Duplicate } from "@hitachivantara/uikit-react-icons";
-import { theme, getColor } from "@hitachivantara/uikit-styles";
-import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.js";
-import { useFlowNode, useFlowNodeInputEdges, useFlowNodeOutputEdges } from "../hooks/useFlowNode.js";
 import { useClasses } from "./BaseNode.styles.js";
 import { staticClasses } from "./BaseNode.styles.js";
-import { identifyHandles, renderedIcon, isInputGroup, isOutputGroup, isConnected } from "./utils.js";
-import { useFlowInstance } from "../hooks/useFlowInstance.js";
+import { renderedIcon, isInputGroup, isOutputGroup, isConnected } from "./utils.js";
+import { useHvNode } from "../hooks/useNode.js";
 const DEFAULT_LABELS = {
   outputsTitle: "Outputs",
   inputsTitle: "Inputs",
@@ -19,78 +13,45 @@ const DEFAULT_LABELS = {
 };
 const HvFlowBaseNode = ({
   id,
-  title,
+  title: titleProp,
   headerItems,
-  icon,
+  icon: iconProp,
   color: colorProp,
   inputs: inputsProp,
   outputs: outputsProp,
   nodeActions: nodeActionsProp,
   footer,
   classes: classesProp,
-  labels: labelsProps,
+  labels: labelsProp,
   className,
   children
 }) => {
-  const { registerNode, unregisterNode } = useNodeMetaRegistry();
-  const labels = useLabels(DEFAULT_LABELS, labelsProps);
-  const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);
-  const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);
-  const nodeActions = useMemo(
-    () => nodeActionsProp || [
-      { id: "delete", label: labels?.deleteActionLabel, icon: /* @__PURE__ */ jsx(Delete, {}) },
-      {
-        id: "duplicate",
-        label: labels?.duplicateActionLabel,
-        icon: /* @__PURE__ */ jsx(Duplicate, {})
-      }
-    ],
-    [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp]
-  );
-  useEffect(() => {
-    registerNode(id, {
-      label: title || "",
-      inputs,
-      outputs
-    });
-    return () => unregisterNode(id);
-  }, [id, title, inputs, outputs, registerNode, unregisterNode]);
-  const [showActions, setShowActions] = useState(false);
-  const reactFlowInstance = useFlowInstance();
+  const {
+    toggleShowActions,
+    getNodeToolbarProps,
+    handleDefaultAction,
+    nodeActions,
+    title,
+    icon,
+    color,
+    iconColor,
+    inputEdges,
+    inputs,
+    outputEdges,
+    outputs,
+    node
+  } = useHvNode({
+    id,
+    title: titleProp,
+    inputs: inputsProp,
+    outputs: outputsProp,
+    icon: iconProp,
+    color: colorProp,
+    labels: labelsProp,
+    nodeActions: nodeActionsProp
+  });
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const { classes, cx, css } = useClasses(classesProp);
-  const node = useFlowNode();
-  const inputEdges = useFlowNodeInputEdges();
-  const outputEdges = useFlowNodeOutputEdges();
-  const handleDefaultAction = useCallback(
-    (action) => {
-      if (!node)
-        return;
-      if (action.callback) {
-        action.callback(node);
-        return;
-      }
-      switch (action.id) {
-        case "delete":
-          reactFlowInstance.deleteElements({ nodes: [node] });
-          break;
-        case "duplicate":
-          reactFlowInstance.addNodes([
-            {
-              ...node,
-              id: uid(),
-              position: {
-                x: node.position.x,
-                y: node.position.y + (node.height || 0) + 20
-              },
-              selected: false,
-              zIndex: Number(theme.zIndices.overlay)
-            }
-          ]);
-          break;
-      }
-    },
-    [node, reactFlowInstance]
-  );
   const renderOutput = (output) => {
     const edgeConnected = isConnected(id, "source", output.id, outputEdges);
     return /* @__PURE__ */ jsxs("div", { className: classes.outputContainer, children: [
@@ -131,8 +92,6 @@ const HvFlowBaseNode = ({
   };
   if (!node)
     return null;
-  const color = getColor(colorProp);
-  const iconColor = isValidElement(icon) ? getColor(icon.props.color || "base_dark") : getColor("base_dark");
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -143,10 +102,10 @@ const HvFlowBaseNode = ({
         classes.root,
         className
       ),
-      onMouseEnter: () => setShowActions(true),
-      onMouseLeave: () => setShowActions(false),
+      onMouseEnter: toggleShowActions,
+      onMouseLeave: toggleShowActions,
       children: [
-        /* @__PURE__ */ jsx(NodeToolbar, { isVisible: showActions, offset: 0, children: nodeActions?.map((action) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(NodeToolbar, { ...getNodeToolbarProps(), children: nodeActions?.map((action) => /* @__PURE__ */ jsx(
           HvIconButton,
           {
             title: action.label,

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import React, {\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport { uid } from \"uid\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvTypography,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { useFlowInstance } from \"../hooks\";\nimport {\n  useFlowNode,\n  useFlowNodeInputEdges,\n  useFlowNodeOutputEdges,\n} from \"../hooks/useFlowNode\";\nimport {\n  HvFlowNodeAction,\n  HvFlowNodeInput,\n  HvFlowNodeInputGroup,\n  HvFlowNodeOutput,\n  HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n  identifyHandles,\n  isConnected,\n  isInputGroup,\n  isOutputGroup,\n  renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const DEFAULT_LABELS = {\n  outputsTitle: \"Outputs\",\n  inputsTitle: \"Inputs\",\n  deleteActionLabel: \"Delete\",\n  duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\">,\n    NodeProps<T> {\n  /** Header title */\n  title?: string;\n  /** Header icon */\n  icon?: React.ReactNode;\n  /** Header color */\n  color?: HvColorAny;\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** Node inputs */\n  inputs?: (HvFlowNodeInput | HvFlowNodeInputGroup)[];\n  /** Node outputs */\n  outputs?: (HvFlowNodeOutput | HvFlowNodeOutputGroup)[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** The content of the node footer */\n  footer?: React.ReactNode;\n  /** Labels used on the node. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs: inputsProp,\n  outputs: outputsProp,\n  nodeActions: nodeActionsProp,\n  footer,\n  classes: classesProp,\n  labels: labelsProps,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);\n\n  const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);\n\n  const nodeActions = useMemo(\n    () =>\n      nodeActionsProp || [\n        { id: \"delete\", label: labels?.deleteActionLabel, icon: <Delete /> },\n        {\n          id: \"duplicate\",\n          label: labels?.duplicateActionLabel,\n          icon: <Duplicate />,\n        },\n      ],\n    [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp],\n  );\n\n  useEffect(() => {\n    registerNode(id, {\n      label: title || \"\",\n      inputs,\n      outputs,\n    });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useFlowInstance();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const node = useFlowNode();\n  const inputEdges = useFlowNodeInputEdges();\n  const outputEdges = useFlowNodeOutputEdges();\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: uid(),\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance],\n  );\n\n  const renderOutput = (output: HvFlowNodeOutput) => {\n    const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n    return (\n      <div className={classes.outputContainer} key={output.id}>\n        <Handle\n          type=\"source\"\n          isConnectableEnd={false}\n          id={output.id}\n          position={Position.Right}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        {output.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n        <HvTypography component=\"div\">{output.label}</HvTypography>\n      </div>\n    );\n  };\n\n  const renderInput = (input: HvFlowNodeInput) => {\n    const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n    return (\n      <div className={classes.inputContainer} key={input.id}>\n        <Handle\n          type=\"target\"\n          isConnectableStart={false}\n          id={input.id}\n          position={Position.Left}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        <HvTypography component=\"div\">{input.label}</HvTypography>\n        {input.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n      </div>\n    );\n  };\n\n  if (!node) return null;\n\n  const color = getColor(colorProp);\n  const iconColor = isValidElement(icon)\n    ? getColor(icon.props.color || \"base_dark\")\n    : getColor(\"base_dark\");\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className,\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {nodeActions?.map((action) => (\n          <HvIconButton\n            key={action.id}\n            title={action.label}\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvIconButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } }),\n          )}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>{labels?.inputsTitle}</HvTypography>\n          </div>\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => {\n              if (!isInputGroup(input)) return renderInput(input);\n\n              return (\n                <div\n                  className={classes.inputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {input.label}\n                  </HvTypography>\n                  {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n                    renderInput(inp),\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>{labels?.outputsTitle}</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => {\n              if (!isOutputGroup(output)) {\n                return renderOutput(output);\n              }\n\n              return (\n                <div\n                  className={classes.outputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {output.label}\n                  </HvTypography>\n                  {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n                    return renderOutput(out);\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvTypography,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvUseNodeParams, useHvNode } from \"../hooks\";\nimport {\n  HvFlowNodeInput,\n  HvFlowNodeInputGroup,\n  HvFlowNodeOutput,\n  HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n  isConnected,\n  isInputGroup,\n  isOutputGroup,\n  renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const DEFAULT_LABELS = {\n  outputsTitle: \"Outputs\",\n  inputsTitle: \"Inputs\",\n  deleteActionLabel: \"Delete\",\n  duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\" | \"color\">,\n    Omit<HvUseNodeParams, \"id\">,\n    NodeProps<T> {\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** The content of the node footer */\n  footer?: React.ReactNode;\n  /** Labels used on the node. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n  id,\n  title: titleProp,\n  headerItems,\n  icon: iconProp,\n  color: colorProp,\n  inputs: inputsProp,\n  outputs: outputsProp,\n  nodeActions: nodeActionsProp,\n  footer,\n  classes: classesProp,\n  labels: labelsProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const {\n    toggleShowActions,\n    getNodeToolbarProps,\n    handleDefaultAction,\n    nodeActions,\n    title,\n    icon,\n    color,\n    iconColor,\n    inputEdges,\n    inputs,\n    outputEdges,\n    outputs,\n    node,\n  } = useHvNode({\n    id,\n    title: titleProp,\n    inputs: inputsProp,\n    outputs: outputsProp,\n    icon: iconProp,\n    color: colorProp,\n    labels: labelsProp,\n    nodeActions: nodeActionsProp,\n  });\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const renderOutput = (output: HvFlowNodeOutput) => {\n    const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n    return (\n      <div className={classes.outputContainer} key={output.id}>\n        <Handle\n          type=\"source\"\n          isConnectableEnd={false}\n          id={output.id}\n          position={Position.Right}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        {output.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n        <HvTypography component=\"div\">{output.label}</HvTypography>\n      </div>\n    );\n  };\n\n  const renderInput = (input: HvFlowNodeInput) => {\n    const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n    return (\n      <div className={classes.inputContainer} key={input.id}>\n        <Handle\n          type=\"target\"\n          isConnectableStart={false}\n          id={input.id}\n          position={Position.Left}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        <HvTypography component=\"div\">{input.label}</HvTypography>\n        {input.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n      </div>\n    );\n  };\n\n  if (!node) return null;\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className,\n      )}\n      onMouseEnter={toggleShowActions}\n      onMouseLeave={toggleShowActions}\n    >\n      <NodeToolbar {...getNodeToolbarProps()}>\n        {nodeActions?.map((action) => (\n          <HvIconButton\n            key={action.id}\n            title={action.label}\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvIconButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } }),\n          )}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>{labels?.inputsTitle}</HvTypography>\n          </div>\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => {\n              if (!isInputGroup(input)) return renderInput(input);\n\n              return (\n                <div\n                  className={classes.inputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {input.label}\n                  </HvTypography>\n                  {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n                    renderInput(inp),\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>{labels?.outputsTitle}</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => {\n              if (!isOutputGroup(output)) {\n                return renderOutput(output);\n              }\n\n              return (\n                <div\n                  className={classes.outputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {output.label}\n                  </HvTypography>\n                  {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n                    return renderOutput(out);\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}