@hitachivantara/uikit-react-lab 5.35.11 → 5.36.0

package/dist/esm/Blades/Blades.js.map

@@ -1 +1 @@
-{"version":3,"file":"Blades.js","sources":["../../../src/Blades/Blades.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  useControlled,\n  useDefaultProps,\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":[],"mappings":";;;;;AAwEA,SAAS,kBACP,iBACA,UACA,mBACA,oBACA;AACM,QAAA,gBAAgB,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,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,UAAU,WAAW,IAAI;AAAA,IAAc;AAAA,IAAc,MAC1D;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,2BAA2B;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,mBAAmB,QAAQ,MAAM;AACrC,WAAO,SAAS,IAAI,UAAU,CAAC,OAAY,MAAc;AACjD,YAAA,kBAAkB,SAAS,SAAS,CAAC;AAE3C,aAAO,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,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UACH,iBAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Blades.js","sources":["../../../src/Blades/Blades.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  useControlled,\n  useDefaultProps,\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 as number[]));\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":[],"mappings":";;;;;AAwEA,SAAS,kBACP,iBACA,UACA,mBACA,oBACA;AACM,QAAA,gBAAgB,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,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,UAAU,WAAW,IAAI;AAAA,IAAc;AAAA,IAAc,MAC1D;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,2BAA2B;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,GAAI,QAAqB;AACvC,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,mBAAmB,QAAQ,MAAM;AACrC,WAAO,SAAS,IAAI,UAAU,CAAC,OAAY,MAAc;AACjD,YAAA,kBAAkB,SAAS,SAAS,CAAC;AAE3C,aAAO,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,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UACH,iBAAA,CAAA;AAEJ;"}

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,