@hitachivantara/uikit-react-pentaho 0.1.1

package/dist/esm/Canvas/FloatingPanel/FloatingPanel.js

@@ -0,0 +1,163 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { useDefaultProps, useUniqueId, useControlled, HvActionsGeneric, HvPanel } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./FloatingPanel.styles.js";
+import { staticClasses } from "./FloatingPanel.styles.js";
+import { HvCanvasTabs } from "../Tabs/Tabs.js";
+import { HvCanvasTab } from "../Tab/Tab.js";
+const HvCanvasFloatingPanel = forwardRef((props, ref) => {
+  const {
+    id: idProp,
+    className,
+    children,
+    open,
+    tabs,
+    minimize,
+    leftActions,
+    rightActions,
+    tab: tabProp,
+    classes: classesProp,
+    onTabChange,
+    onAction,
+    ...others
+  } = useDefaultProps("HvCanvasFloatingPanel", props);
+  const { classes, cx } = useClasses(classesProp);
+  const id = useUniqueId(idProp);
+  const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({
+    handleHeight: false
+  });
+  const { width: panelWidth = 0, ref: panelRef } = useResizeDetector({
+    handleHeight: false
+  });
+  const { width: leftActionWidth = 32, ref: leftActionRef } = useResizeDetector(
+    {
+      handleHeight: false,
+      refreshMode: "debounce",
+      refreshOptions: {
+        trailing: true
+      }
+    }
+  );
+  const { width: rightActionWidth = 32, ref: rightActionRef } = useResizeDetector({
+    handleHeight: false,
+    refreshMode: "debounce",
+    refreshOptions: {
+      trailing: true
+    }
+  });
+  const overflowing = useMemo(() => {
+    const scrollWidth = tabRef.current?.scrollWidth ?? 0;
+    return scrollWidth - tabWidth >= 1;
+  }, [tabRef, tabWidth]);
+  const [selectedTab, setSelectedTab] = useControlled(
+    tabProp,
+    tabs[0].id
+  );
+  const handleTabChange = (event, tabId) => {
+    setSelectedTab(tabId);
+    onTabChange?.(event, tabId);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      ref,
+      className: cx(
+        classes.root,
+        {
+          [classes.closed]: !open,
+          [classes.minimized]: minimize,
+          [classes.multipleTabs]: tabs.length > 1,
+          [classes.overflowing]: overflowing
+        },
+        className
+      ),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: classes.tabsRoot, children: [
+          /* @__PURE__ */ jsx(
+            HvCanvasTabs,
+            {
+              style: {
+                // @ts-ignore
+                "--left-actions-width": `${leftActionWidth}px`,
+                "--right-actions-width": `${rightActionWidth}px`
+              },
+              onChange: handleTabChange,
+              value: selectedTab,
+              children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
+                HvCanvasTab,
+                {
+                  ref: index === 0 ? tabRef : void 0,
+                  id: `${id}-${tab.id}`,
+                  value: tab.id,
+                  className: classes.tab,
+                  children: /* @__PURE__ */ jsx("div", { className: classes.tabTitle, children: tab.title })
+                },
+                tab.id
+              ))
+            }
+          ),
+          (leftActions || rightActions) && !overflowing ? tabs.map((tab, index) => {
+            const btnsDisabled = selectedTab !== tab.id && !minimize;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  // @ts-ignore
+                  "--tab-width": `${tabWidth}px`,
+                  "--right": `calc((${index} + 1) * var(--tab-width))`,
+                  "--left": `calc(${index} * var(--tab-width))`
+                },
+                children: [
+                  leftActions && /* @__PURE__ */ jsx("div", { ref: leftActionRef, className: classes.leftActions, children: /* @__PURE__ */ jsx(
+                    HvActionsGeneric,
+                    {
+                      maxVisibleActions: 1,
+                      actions: leftActions,
+                      disabled: btnsDisabled,
+                      onAction: (event, action) => onAction?.(event, action, tab.id),
+                      variant: "secondaryGhost",
+                      iconOnly: true
+                    }
+                  ) }),
+                  rightActions && /* @__PURE__ */ jsx("div", { ref: rightActionRef, className: classes.rightActions, children: /* @__PURE__ */ jsx(
+                    HvActionsGeneric,
+                    {
+                      maxVisibleActions: 2,
+                      actions: rightActions,
+                      disabled: btnsDisabled,
+                      onAction: (event, action) => onAction?.(event, action, tab.id),
+                      variant: "secondaryGhost",
+                      iconOnly: true
+                    }
+                  ) })
+                ]
+              },
+              tab.id
+            );
+          }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          HvPanel,
+          {
+            ref: panelRef,
+            role: "tabpanel",
+            "aria-labelledby": `${id}-${selectedTab}`,
+            className: classes.content,
+            style: {
+              // @ts-ignore
+              "--right-border-radius": tabWidth * tabs.length >= panelWidth ? "0px" : "16px"
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  HvCanvasFloatingPanel,
+  staticClasses as floatingPanelClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.js","sources":["../../../../src/Canvas/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n  HvBaseProps,\n  HvPanel,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvCanvasTab } from \"../Tab\";\nimport { HvCanvasTabs, HvCanvasTabsProps } from \"../Tabs\";\nimport { staticClasses, useClasses } from \"./FloatingPanel.styles\";\n\nexport { staticClasses as floatingPanelClasses };\n\nexport type HvCanvasFloatingPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasFloatingPanelProps extends HvBaseProps {\n  /** Open state of the floating panel. */\n  open?: boolean;\n  /** Minimize state of the floating panel tabs'. */\n  minimize?: boolean;\n  /** List of tabs visible on the panel. */\n  tabs: {\n    id: string | number;\n    title: React.ReactNode;\n  }[];\n  /** Id of the selected tab if it needs to be controlled. */\n  tab?: string | number;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | number | null,\n  ) => void;\n  /** Actions to be rendered in the left side of a tab. If more than one action is provided, a dropdown menu will be used. */\n  leftActions?: HvActionsGenericProps[\"actions\"];\n  /** Actions to be rendered in the right side of a tab.If more than two actions are provided, a dropdown menu will be used to add the remaining actions. */\n  rightActions?: HvActionsGenericProps[\"actions\"];\n  /** Callback triggered when a right or left action is clicked. */\n  onAction?: (\n    event: React.SyntheticEvent,\n    action: HvActionGeneric,\n    tabId: string | number,\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasFloatingPanelClasses;\n}\n\n/**\n * A floating panel component to use in a canvas context.\n */\nexport const HvCanvasFloatingPanel = forwardRef<\n  HTMLDivElement,\n  HvCanvasFloatingPanelProps\n>((props, ref) => {\n  const {\n    id: idProp,\n    className,\n    children,\n    open,\n    tabs,\n    minimize,\n    leftActions,\n    rightActions,\n    tab: tabProp,\n    classes: classesProp,\n    onTabChange,\n    onAction,\n    ...others\n  } = useDefaultProps(\"HvCanvasFloatingPanel\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const id = useUniqueId(idProp);\n\n  // Tab resize detector: to position tab actions and set the panel top right border radius\n  const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({\n    handleHeight: false,\n  });\n  // Tab panel resize detector: to set the panel top right border radius\n  const { width: panelWidth = 0, ref: panelRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  // Left actions resize detector: to position tab title according with actions\n  const { width: leftActionWidth = 32, ref: leftActionRef } = useResizeDetector(\n    {\n      handleHeight: false,\n      refreshMode: \"debounce\",\n      refreshOptions: {\n        trailing: true,\n      },\n    },\n  );\n  // Right actions resize detector: to position tab title according with actions\n  const { width: rightActionWidth = 32, ref: rightActionRef } =\n    useResizeDetector({\n      handleHeight: false,\n      refreshMode: \"debounce\",\n      refreshOptions: {\n        trailing: true,\n      },\n    });\n\n  const overflowing = useMemo(() => {\n    const scrollWidth = tabRef.current?.scrollWidth ?? 0;\n    return scrollWidth - tabWidth >= 1;\n  }, [tabRef, tabWidth]);\n\n  const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n    tabProp,\n    tabs[0].id,\n  );\n\n  const handleTabChange: HvCanvasTabsProps[\"onChange\"] = (event, tabId) => {\n    setSelectedTab(tabId);\n    onTabChange?.(event, tabId);\n  };\n\n  return (\n    <div\n      id={id}\n      ref={ref}\n      className={cx(\n        classes.root,\n        {\n          [classes.closed]: !open,\n          [classes.minimized]: minimize,\n          [classes.multipleTabs]: tabs.length > 1,\n          [classes.overflowing]: overflowing,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.tabsRoot}>\n        <HvCanvasTabs\n          style={{\n            // @ts-ignore\n            \"--left-actions-width\": `${leftActionWidth}px`,\n            \"--right-actions-width\": `${rightActionWidth}px`,\n          }}\n          onChange={handleTabChange}\n          value={selectedTab}\n        >\n          {tabs.map((tab, index) => (\n            <HvCanvasTab\n              ref={index === 0 ? tabRef : undefined}\n              key={tab.id}\n              id={`${id}-${tab.id}`}\n              value={tab.id}\n              className={classes.tab}\n            >\n              <div className={classes.tabTitle}>{tab.title}</div>\n            </HvCanvasTab>\n          ))}\n        </HvCanvasTabs>\n        {/* For accessibility purposes, these buttons cannot be children of a tablist so they are rendered as HvCanvasTabs sibling. */}\n        {(leftActions || rightActions) && !overflowing\n          ? tabs.map((tab, index) => {\n              const btnsDisabled = selectedTab !== tab.id && !minimize;\n              return (\n                <div\n                  key={tab.id}\n                  style={{\n                    // @ts-ignore\n                    \"--tab-width\": `${tabWidth}px`,\n                    \"--right\": `calc((${index} + 1) * var(--tab-width))`,\n                    \"--left\": `calc(${index} * var(--tab-width))`,\n                  }}\n                >\n                  {leftActions && (\n                    <div ref={leftActionRef} className={classes.leftActions}>\n                      <HvActionsGeneric\n                        maxVisibleActions={1}\n                        actions={leftActions}\n                        disabled={btnsDisabled}\n                        onAction={(event, action) =>\n                          onAction?.(event, action, tab.id)\n                        }\n                        variant=\"secondaryGhost\"\n                        iconOnly\n                      />\n                    </div>\n                  )}\n                  {rightActions && (\n                    <div ref={rightActionRef} className={classes.rightActions}>\n                      <HvActionsGeneric\n                        maxVisibleActions={2}\n                        actions={rightActions}\n                        disabled={btnsDisabled}\n                        onAction={(event, action) =>\n                          onAction?.(event, action, tab.id)\n                        }\n                        variant=\"secondaryGhost\"\n                        iconOnly\n                      />\n                    </div>\n                  )}\n                </div>\n              );\n            })\n          : null}\n      </div>\n      <HvPanel\n        ref={panelRef}\n        role=\"tabpanel\"\n        aria-labelledby={`${id}-${selectedTab}`}\n        className={classes.content}\n        style={{\n          // @ts-ignore\n          \"--right-border-radius\":\n            tabWidth * tabs.length >= panelWidth ? \"0px\" : \"16px\",\n        }}\n      >\n        {children}\n      </HvPanel>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,73 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const { staticClasses, useClasses } = createClasses(
+  "HvCanvasFloatingPanel",
+  {
+    root: {
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      right: 0,
+      bottom: 0,
+      width: "100%",
+      maxHeight: "500px",
+      visibility: "visible",
+      transition: "visibility 0.3s ease, max-height 0.3s ease, width 0.3s ease"
+    },
+    closed: {
+      maxHeight: 0,
+      visibility: "hidden"
+    },
+    minimized: {
+      "& $content": {
+        display: "none"
+      },
+      "& $tab": {
+        backgroundColor: theme.colors.atmo1,
+        ...theme.typography.label
+      }
+    },
+    multipleTabs: {
+      "& $tab": { maxWidth: "288px" },
+      "& $rightActions": {
+        right: `calc(100% - var(--right) + ${theme.space.xs})`
+      }
+    },
+    overflowing: {
+      "& $tabTitle": {
+        paddingLeft: theme.space.sm,
+        paddingRight: theme.space.sm
+      }
+    },
+    tab: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      width: "100%"
+    },
+    tabTitle: {
+      display: "flex",
+      width: "100%",
+      padding: theme.space.sm,
+      paddingLeft: `calc(var(--left-actions-width) + ${theme.space.xs})`,
+      paddingRight: `calc(var(--right-actions-width) + ${theme.space.xs})`
+    },
+    tabsRoot: {
+      position: "relative"
+    },
+    leftActions: {
+      position: "absolute",
+      left: `calc(var(--left) + ${theme.space.xs})`,
+      top: 8
+    },
+    rightActions: {
+      position: "absolute",
+      right: theme.space.xs,
+      top: 8
+    },
+    content: { borderTopRightRadius: "var(--right-border-radius)" }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.styles.js","sources":["../../../../src/Canvas/FloatingPanel/FloatingPanel.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasFloatingPanel\",\n  {\n    root: {\n      position: \"absolute\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      right: 0,\n      bottom: 0,\n      width: \"100%\",\n      maxHeight: \"500px\",\n      visibility: \"visible\",\n      transition: \"visibility 0.3s ease, max-height 0.3s ease, width 0.3s ease\",\n    },\n    closed: {\n      maxHeight: 0,\n      visibility: \"hidden\",\n    },\n    minimized: {\n      \"& $content\": {\n        display: \"none\",\n      },\n      \"& $tab\": {\n        backgroundColor: theme.colors.atmo1,\n        ...theme.typography.label,\n      },\n    },\n    multipleTabs: {\n      \"& $tab\": { maxWidth: \"288px\" },\n      \"& $rightActions\": {\n        right: `calc(100% - var(--right) + ${theme.space.xs})`,\n      },\n    },\n    overflowing: {\n      \"& $tabTitle\": {\n        paddingLeft: theme.space.sm,\n        paddingRight: theme.space.sm,\n      },\n    },\n    tab: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"flex-start\",\n      width: \"100%\",\n    },\n    tabTitle: {\n      display: \"flex\",\n      width: \"100%\",\n      padding: theme.space.sm,\n      paddingLeft: `calc(var(--left-actions-width) + ${theme.space.xs})`,\n      paddingRight: `calc(var(--right-actions-width) + ${theme.space.xs})`,\n    },\n    tabsRoot: {\n      position: \"relative\",\n    },\n    leftActions: {\n      position: \"absolute\",\n      left: `calc(var(--left) + ${theme.space.xs})`,\n      top: 8,\n    },\n    rightActions: {\n      position: \"absolute\",\n      right: theme.space.xs,\n      top: 8,\n    },\n    content: { borderTopRightRadius: \"var(--right-border-radius)\" },\n  },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,eAAe;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,MACT,cAAc;AAAA,QACZ,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,QACR,iBAAiB,MAAM,OAAO;AAAA,QAC9B,GAAG,MAAM,WAAW;AAAA,MACtB;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,UAAU,EAAE,UAAU,QAAQ;AAAA,MAC9B,mBAAmB;AAAA,QACjB,OAAO,8BAA8B,MAAM,MAAM,EAAE;AAAA,MACrD;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,eAAe;AAAA,QACb,aAAa,MAAM,MAAM;AAAA,QACzB,cAAc,MAAM,MAAM;AAAA,MAC5B;AAAA,IACF;AAAA,IACA,KAAK;AAAA,MACH,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS,MAAM,MAAM;AAAA,MACrB,aAAa,oCAAoC,MAAM,MAAM,EAAE;AAAA,MAC/D,cAAc,qCAAqC,MAAM,MAAM,EAAE;AAAA,IACnE;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,aAAa;AAAA,MACX,UAAU;AAAA,MACV,MAAM,sBAAsB,MAAM,MAAM,EAAE;AAAA,MAC1C,KAAK;AAAA,IACP;AAAA,IACA,cAAc;AAAA,MACZ,UAAU;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,MACnB,KAAK;AAAA,IACP;AAAA,IACA,SAAS,EAAE,sBAAsB,6BAA6B;AAAA,EAChE;AACF;"}

package/dist/esm/Canvas/Panel/Panel.js

@@ -0,0 +1,112 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps, useUniqueId, useLabels, useControlled, HvPanel } from "@hitachivantara/uikit-react-core";
+import { Start, End } from "@hitachivantara/uikit-react-icons";
+import { useClasses } from "./Panel.styles.js";
+import { staticClasses } from "./Panel.styles.js";
+import { HvCanvasTabs } from "../Tabs/Tabs.js";
+import { HvCanvasTab } from "../Tab/Tab.js";
+const DEFAULT_LABELS = {
+  open: "Open",
+  close: "Close"
+};
+const HvCanvasPanel = forwardRef(
+  (props, ref) => {
+    const {
+      id: idProp,
+      tab: tabProp,
+      open: openProp,
+      defaultOpen = false,
+      tabs,
+      onToggle,
+      onTabChange,
+      labels: labelsProp,
+      className,
+      children,
+      classes: classesProp,
+      ...others
+    } = useDefaultProps("HvCanvasPanel", props);
+    const id = useUniqueId(idProp);
+    const { classes, cx } = useClasses(classesProp);
+    const labels = useLabels(DEFAULT_LABELS, labelsProp);
+    const [open, setOpen] = useControlled(openProp, Boolean(defaultOpen));
+    const [selectedTab, setSelectedTab] = useControlled(
+      tabProp,
+      tabs?.[0]?.id ?? "none"
+    );
+    const handleTogglePanel = (event) => {
+      setOpen((prev) => !prev);
+      onToggle?.(event, !open);
+    };
+    const handleTabChange = (event, tabId) => {
+      setSelectedTab(tabId);
+      onTabChange?.(event, tabId);
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          id,
+          className: cx(classes.root, className, {
+            [classes.open]: open,
+            [classes.close]: !open
+          }),
+          ...others,
+          children: [
+            tabs && /* @__PURE__ */ jsx(
+              HvCanvasTabs,
+              {
+                className: classes.tabs,
+                value: selectedTab,
+                onChange: handleTabChange,
+                children: tabs.map((tab) => /* @__PURE__ */ jsx(
+                  HvCanvasTab,
+                  {
+                    id: `${id}-${tab.id}`,
+                    value: tab.id,
+                    tabIndex: 0,
+                    children: tab.content
+                  },
+                  tab.id
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              HvPanel,
+              {
+                role: tabs ? "tabpanel" : void 0,
+                "aria-labelledby": tabs ? `${id}-${selectedTab}` : void 0,
+                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/Panel/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../../../../src/Canvas/Panel/Panel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvPanel,\n  useControlled,\n  useDefaultProps,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End, Start } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasTab } from \"../Tab\";\nimport { HvCanvasTabs, HvCanvasTabsProps } from \"../Tabs\";\nimport { staticClasses, useClasses } from \"./Panel.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  /** When controlled, defines id the panel is open or not. */\n  open?: boolean;\n  /** When uncontrolled, defines the initial state of the panel. */\n  defaultOpen?: boolean;\n  /** List of tabs visible on the panel. */\n  tabs?: {\n    id: string | number;\n    content: React.ReactNode;\n  }[];\n  /** Id of the selected tab if it needs to be controlled. */\n  tab?: string | number;\n  /** Callback triggered whenever the panel toggles. */\n  onToggle?: (\n    event: React.MouseEvent | React.KeyboardEvent,\n    open: boolean,\n  ) => void;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | number | null,\n  ) => void;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** The content that will be rendered within the 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 = forwardRef<HTMLDivElement, HvCanvasPanelProps>(\n  (props, ref) => {\n    const {\n      id: idProp,\n      tab: tabProp,\n      open: openProp,\n      defaultOpen = 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 id = useUniqueId(idProp);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const [open, setOpen] = useControlled(openProp, Boolean(defaultOpen));\n    const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n      tabProp,\n      tabs?.[0]?.id ?? \"none\",\n    );\n\n    const handleTogglePanel = (\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => {\n      setOpen((prev) => !prev);\n      onToggle?.(event, !open);\n    };\n\n    const handleTabChange: HvCanvasTabsProps[\"onChange\"] = (event, tabId) => {\n      setSelectedTab(tabId);\n      onTabChange?.(event, tabId);\n    };\n\n    return (\n      <>\n        <div\n          ref={ref}\n          id={id}\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              value={selectedTab}\n              onChange={handleTabChange}\n            >\n              {tabs.map((tab) => (\n                <HvCanvasTab\n                  key={tab.id}\n                  id={`${id}-${tab.id}`}\n                  value={tab.id}\n                  tabIndex={0}\n                >\n                  {tab.content}\n                </HvCanvasTab>\n              ))}\n            </HvCanvasTabs>\n          )}\n          <HvPanel\n            role={tabs ? \"tabpanel\" : undefined}\n            aria-labelledby={tabs ? `${id}-${selectedTab}` : undefined}\n            className={classes.content}\n          >\n            {children}\n          </HvPanel>\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);\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AACT;AAmCO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAEpC,UAAA,KAAK,YAAY,MAAM;AAE7B,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,UAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,WAAW,CAAC;AAC9D,UAAA,CAAC,aAAa,cAAc,IAAI;AAAA,MACpC;AAAA,MACA,OAAO,CAAC,GAAG,MAAM;AAAA,IAAA;AAGb,UAAA,oBAAoB,CACxB,UACG;AACK,cAAA,CAAC,SAAS,CAAC,IAAI;AACZ,iBAAA,OAAO,CAAC,IAAI;AAAA,IAAA;AAGnB,UAAA,kBAAiD,CAAC,OAAO,UAAU;AACvE,qBAAe,KAAK;AACpB,oBAAc,OAAO,KAAK;AAAA,IAAA;AAG5B,WAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,YACrC,CAAC,QAAQ,IAAI,GAAG;AAAA,YAChB,CAAC,QAAQ,KAAK,GAAG,CAAC;AAAA,UAAA,CACnB;AAAA,UACA,GAAG;AAAA,UAEH,UAAA;AAAA,YACC,QAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,QAAQ;AAAA,gBACnB,OAAO;AAAA,gBACP,UAAU;AAAA,gBAET,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBAEC,IAAI,GAAG,EAAE,IAAI,IAAI,EAAE;AAAA,oBACnB,OAAO,IAAI;AAAA,oBACX,UAAU;AAAA,oBAET,UAAI,IAAA;AAAA,kBAAA;AAAA,kBALA,IAAI;AAAA,gBAAA,CAOZ;AAAA,cAAA;AAAA,YACH;AAAA,YAEF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM,OAAO,aAAa;AAAA,gBAC1B,mBAAiB,OAAO,GAAG,EAAE,IAAI,WAAW,KAAK;AAAA,gBACjD,WAAW,QAAQ;AAAA,gBAElB;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,QAAQ;AAAA,YAC5B,CAAC,QAAQ,UAAU,GAAG;AAAA,YACtB,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,UAAA,CACzB;AAAA,UACD,SAAS;AAAA,UACT,MAAK;AAAA,UACL,UAAU;AAAA,UACV,WAAW,CAAC,MAAM;AAChB,gBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,gCAAkB,CAAC;AAAA,YACrB;AAAA,UACF;AAAA,UACA,cAAY,OAAO,OAAO,QAAQ,OAAO;AAAA,UAEzC,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,QAAA;AAAA,MACF;AAAA,IACF,EAAA,CAAA;AAAA,EAEJ;AACF;"}

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

@@ -0,0 +1,61 @@
+import { createClasses, theme, outlineStyles } from "@hitachivantara/uikit-react-core";
+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)",
+    backgroundColor: "transparent",
+    transition: "visibility 0.3s ease, width 0.3s ease",
+    overflow: "hidden",
+    "&$open": {
+      width: 320,
+      visibility: "visible"
+    },
+    "&$close": {
+      width: 0,
+      visibility: "hidden"
+    }
+  },
+  tabs: {},
+  content: {
+    height: "100%"
+  },
+  handle: {
+    height: "172px",
+    width: "35px",
+    display: "flex",
+    justifyContent: "center",
+    boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
+    backgroundColor: theme.colors.atmo1,
+    borderRadius: "0px 16px 16px 0px",
+    position: "absolute",
+    transition: "left 0.3s ease",
+    top: "calc(50% - 86px)",
+    "&$handleOpen": {
+      left: 320
+    },
+    "&$handleClose": {
+      left: 0
+    },
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "&:focus-visible": {
+      ...outlineStyles
+    }
+  },
+  handleButton: {
+    top: "calc(50% - 16px)",
+    position: "absolute"
+  },
+  open: {},
+  close: {},
+  handleOpen: {},
+  handleClose: {}
+});
+export {
+  staticClasses,
+  useClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.styles.js","sources":["../../../../src/Canvas/Panel/Panel.styles.tsx"],"sourcesContent":["import {\n  createClasses,\n  outlineStyles,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\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    backgroundColor: \"transparent\",\n    transition: \"visibility 0.3s ease, width 0.3s ease\",\n    overflow: \"hidden\",\n    \"&$open\": {\n      width: 320,\n      visibility: \"visible\",\n    },\n    \"&$close\": {\n      width: 0,\n      visibility: \"hidden\",\n    },\n  },\n  tabs: {},\n  content: {\n    height: \"100%\",\n  },\n  handle: {\n    height: \"172px\",\n    width: \"35px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    boxShadow: \"4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)\",\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: \"0px 16px 16px 0px\",\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    \"&:focus-visible\": {\n      ...outlineStyles,\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":";AAMO,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,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,MACR,OAAO;AAAA,MACP,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc;AAAA,IACd,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,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;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/Tab/Tab.js

@@ -0,0 +1,21 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { Tab } from "@mui/base/Tab";
+import { useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./Tab.styles.js";
+import { staticClasses } from "./Tab.styles.js";
+const HvCanvasTab = forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      className,
+      ...others
+    } = useDefaultProps("HvCanvasTab", props);
+    const { classes, cx } = useClasses(classesProp);
+    return /* @__PURE__ */ jsx(Tab, { ref, className: cx(classes.root, className), ...others });
+  }
+);
+export {
+  HvCanvasTab,
+  staticClasses as canvasTabClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sources":["../../../../src/Canvas/Tab/Tab.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Tab, TabProps } from \"@mui/base/Tab\";\nimport {\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Tab.styles\";\n\nexport { staticClasses as canvasTabClasses };\n\nexport type HvCanvasTabClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasTabProps extends TabProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasTabClasses;\n}\n\n/**\n * The tab component to use inside `HvCanvasTabs`.\n */\nexport const HvCanvasTab = forwardRef<HTMLButtonElement, HvCanvasTabProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      ...others\n    } = useDefaultProps(\"HvCanvasTab\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <Tab ref={ref} className={cx(classes.root, className)} {...others} />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA,oBAAC,KAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,OAAQ,CAAA;AAAA,EAEvE;AACF;"}

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

@@ -0,0 +1,39 @@
+import { tabClasses } from "@mui/base/Tab";
+import { createClasses, theme, outlineStyles } from "@hitachivantara/uikit-react-core";
+const { staticClasses, useClasses } = createClasses("HvCanvasTab", {
+  root: {
+    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%",
+    boxShadow: "0px -2px 8px 0px #4141410F",
+    paddingInlineEnd: 0,
+    paddingInlineStart: 0,
+    "& svg .color0": {
+      fill: "currentcolor"
+    },
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "&:focus": {
+      backgroundColor: theme.colors.atmo1
+    },
+    [`&.${tabClasses.selected}`]: {
+      backgroundColor: theme.colors.atmo1,
+      ...theme.typography.label
+    },
+    "&:focus-visible": {
+      ...outlineStyles
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.styles.js","sources":["../../../../src/Canvas/Tab/Tab.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport {\n  createClasses,\n  outlineStyles,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasTab\", {\n  root: {\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    boxShadow: \"0px -2px 8px 0px #4141410F\",\n    paddingInlineEnd: 0,\n    paddingInlineStart: 0,\n    \"& svg .color0\": {\n      fill: \"currentcolor\",\n    },\n    \"&:hover\": {\n      cursor: \"pointer\",\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n    [`&.${tabClasses.selected}`]: {\n      backgroundColor: theme.colors.atmo1,\n      ...theme.typography.label,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAOO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,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,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,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,KAAK,WAAW,QAAQ,EAAE,GAAG;AAAA,MAC5B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,GAAG,MAAM,WAAW;AAAA,IACtB;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Canvas/Tabs/Tabs.js

@@ -0,0 +1,33 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { Tabs } from "@mui/base/Tabs";
+import { TabsList } from "@mui/base/TabsList";
+import { useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./Tabs.styles.js";
+import { staticClasses } from "./Tabs.styles.js";
+const HvCanvasTabs = forwardRef(
+  (props, ref) => {
+    const {
+      selectionFollowsFocus = true,
+      children,
+      className,
+      classes: classesProp,
+      ...others
+    } = useDefaultProps("HvCanvasTabs", props);
+    const { classes, cx } = useClasses(classesProp);
+    return /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        ref,
+        className: cx(classes.root, className),
+        selectionFollowsFocus,
+        ...others,
+        children: /* @__PURE__ */ jsx(TabsList, { className: classes.list, children })
+      }
+    );
+  }
+);
+export {
+  HvCanvasTabs,
+  staticClasses as canvasTabsClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../../src/Canvas/Tabs/Tabs.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\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 \"./Tabs.styles\";\n\nexport { staticClasses as canvasTabsClasses };\n\nexport type HvCanvasTabsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasTabsProps extends TabsProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasTabsClasses;\n}\n\n/**\n * A tabs component to use in a canvas context.\n */\nexport const HvCanvasTabs = forwardRef<HTMLDivElement, HvCanvasTabsProps>(\n  (props, ref) => {\n    const {\n      selectionFollowsFocus = true,\n      children,\n      className,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvCanvasTabs\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <Tabs\n        ref={ref}\n        className={cx(classes.root, className)}\n        selectionFollowsFocus={selectionFollowsFocus}\n        {...others}\n      >\n        <TabsList className={classes.list}>{children}</TabsList>\n      </Tabs>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,wBAAwB;AAAA,MACxB;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC;AAAA,QACC,GAAG;AAAA,QAEJ,UAAC,oBAAA,UAAA,EAAS,WAAW,QAAQ,MAAO,UAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGnD;AACF;"}

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

@@ -0,0 +1,13 @@
+import { createClasses } from "@hitachivantara/uikit-react-core";
+const { staticClasses, useClasses } = createClasses("HvCanvasTabs", {
+  root: {},
+  list: {
+    display: "flex",
+    width: "100%",
+    height: 48
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styles.js","sources":["../../../../src/Canvas/Tabs/Tabs.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasTabs\", {\n  root: {},\n  list: {\n    display: \"flex\",\n    width: \"100%\",\n    height: 48,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM,CAAC;AAAA,EACP,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF,CAAC;"}

package/dist/esm/Canvas/Toolbar/Toolbar.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps, useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
+import { Previous } from "@hitachivantara/uikit-react-icons";
+import { useClasses } from "./Toolbar.styles.js";
+import { staticClasses } from "./Toolbar.styles.js";
+const DEFAULT_LABELS = {
+  back: "Back"
+};
+const HvCanvasToolbar = forwardRef(
+  (props, ref) => {
+    const {
+      title: titleProp,
+      backButton,
+      labels: labelsProp,
+      className,
+      children,
+      backButtonProps,
+      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", { ref, className: cx(classes.root, className), ...others, children: [
+      /* @__PURE__ */ jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsx(
+        HvIconButton,
+        {
+          title: labels.back,
+          variant: "primaryGhost",
+          ...backButtonProps,
+          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/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sources":["../../../../src/Canvas/Toolbar/Toolbar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvIconButtonProps,\n  HvTypography,\n  useDefaultProps,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Previous } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Toolbar.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: React.ReactNode;\n  /** Fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\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  /** Props for the default back button. */\n  backButtonProps?: Partial<HvIconButtonProps>;\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 = forwardRef<HTMLDivElement, HvCanvasToolbarProps>(\n  (props, ref) => {\n    const {\n      title: titleProp,\n      backButton,\n      labels: labelsProp,\n      className,\n      children,\n      backButtonProps,\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 ref={ref} className={cx(classes.root, className)} {...others}>\n        <div className={classes.back}>\n          {backButton ?? (\n            <HvIconButton\n              title={labels.back}\n              variant=\"primaryGhost\"\n              {...backButtonProps}\n            >\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);\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AACR;AAqBO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,UAAA,QACJ,OAAO,cAAc,+BAClB,cAAa,EAAA,SAAQ,UAAU,UAAA,UAAU,CAAA,IAE1C;AAIF,WAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACzD,UAAA;AAAA,MAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MACrB,UACC,cAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,OAAO;AAAA,UACd,SAAQ;AAAA,UACP,GAAG;AAAA,UAEJ,8BAAC,UAAS,EAAA;AAAA,QAAA;AAAA,MAAA,GAGhB;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,MACrC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAS;AAAA,IAC1D,EAAA,CAAA;AAAA,EAEJ;AACF;"}