@hitachivantara/uikit-react-pentaho 0.1.1 → 0.1.2

package/dist/cjs/Canvas/{FloatingPanel/FloatingPanel.cjs → BottomPanel/BottomPanel.cjs}

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const reactResizeDetector = require("react-resize-detector");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const FloatingPanel_styles = require("./FloatingPanel.styles.cjs");
+const BottomPanel_styles = require("./BottomPanel.styles.cjs");
 const Tabs = require("../Tabs/Tabs.cjs");
 const Tab = require("../Tab/Tab.cjs");
-const HvCanvasFloatingPanel = react.forwardRef((props, ref) => {
+const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
   const {
     id: idProp,
     className,
@@ -22,8 +22,8 @@ const HvCanvasFloatingPanel = react.forwardRef((props, ref) => {
     onTabChange,
     onAction,
     ...others
-  } = uikitReactCore.useDefaultProps("HvCanvasFloatingPanel", props);
-  const { classes, cx } = FloatingPanel_styles.useClasses(classesProp);
+  } = uikitReactCore.useDefaultProps("HvCanvasBottomPanel", props);
+  const { classes, cx } = BottomPanel_styles.useClasses(classesProp);
   const id = uikitReactCore.useUniqueId(idProp);
   const { width: tabWidth = 0, ref: tabRef } = reactResizeDetector.useResizeDetector({
     handleHeight: false
@@ -158,5 +158,5 @@ const HvCanvasFloatingPanel = react.forwardRef((props, ref) => {
     }
   );
 });
-exports.floatingPanelClasses = FloatingPanel_styles.staticClasses;
-exports.HvCanvasFloatingPanel = HvCanvasFloatingPanel;
+exports.canvasBottomPanelClasses = BottomPanel_styles.staticClasses;
+exports.HvCanvasBottomPanel = HvCanvasBottomPanel;

package/dist/cjs/Canvas/{FloatingPanel/FloatingPanel.styles.cjs → BottomPanel/BottomPanel.styles.cjs}

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const { staticClasses, useClasses } = uikitReactCore.createClasses(
-  "HvCanvasFloatingPanel",
+  "HvCanvasBottomPanel",
   {
     root: {
       position: "absolute",

package/dist/cjs/Canvas/SidePanel/SidePanel.cjs

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const SidePanel_styles = require("./SidePanel.styles.cjs");
+const Tabs = require("../Tabs/Tabs.cjs");
+const Tab = require("../Tab/Tab.cjs");
+const DEFAULT_LABELS = {
+  open: "Open",
+  close: "Close"
+};
+const HvCanvasSidePanel = react.forwardRef((props, ref) => {
+  const {
+    id: idProp,
+    tab: tabProp,
+    open: openProp,
+    defaultOpen = false,
+    tabs,
+    onToggle,
+    onTabChange,
+    labels: labelsProp,
+    className,
+    children,
+    classes: classesProp,
+    ...others
+  } = uikitReactCore.useDefaultProps("HvCanvasSidePanel", props);
+  const id = uikitReactCore.useUniqueId(idProp);
+  const { classes, cx } = SidePanel_styles.useClasses(classesProp);
+  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
+  const [open, setOpen] = uikitReactCore.useControlled(openProp, Boolean(defaultOpen));
+  const [selectedTab, setSelectedTab] = uikitReactCore.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        id,
+        className: cx(classes.root, className, {
+          [classes.open]: open,
+          [classes.close]: !open
+        }),
+        ...others,
+        children: [
+          tabs && /* @__PURE__ */ jsxRuntime.jsx(
+            Tabs.HvCanvasTabs,
+            {
+              className: classes.tabs,
+              value: selectedTab,
+              onChange: handleTabChange,
+              children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+                Tab.HvCanvasTab,
+                {
+                  id: `${id}-${tab.id}`,
+                  value: tab.id,
+                  tabIndex: 0,
+                  children: tab.content
+                },
+                tab.id
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            uikitReactCore.HvPanel,
+            {
+              role: tabs ? "tabpanel" : void 0,
+              "aria-labelledby": tabs ? `${id}-${selectedTab}` : void 0,
+              className: classes.content,
+              children
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: classes.handleButton, children: open ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Start, { color: ["primary"] }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { color: ["primary"] }) })
+      }
+    )
+  ] });
+});
+exports.canvasSidePanelClasses = SidePanel_styles.staticClasses;
+exports.HvCanvasSidePanel = HvCanvasSidePanel;

package/dist/cjs/Canvas/SidePanel/SidePanel.styles.cjs

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses(
+  "HvCanvasSidePanel",
+  {
+    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: uikitReactCore.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": {
+        ...uikitReactCore.outlineStyles
+      }
+    },
+    handleButton: {
+      top: "calc(50% - 16px)",
+      position: "absolute"
+    },
+    open: {},
+    close: {},
+    handleOpen: {},
+    handleClose: {}
+  }
+);
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Canvas/Tab/Tab.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Tab = require("@mui/base/Tab");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");

package/dist/cjs/Canvas/Tabs/Tabs.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Tabs = require("@mui/base/Tabs");
 const TabsList = require("@mui/base/TabsList");

package/dist/cjs/Canvas/Toolbar/Toolbar.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");

package/dist/cjs/index.cjs

@@ -2,21 +2,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Toolbar_styles = require("./Canvas/Toolbar/Toolbar.styles.cjs");
 const Toolbar = require("./Canvas/Toolbar/Toolbar.cjs");
-const Panel_styles = require("./Canvas/Panel/Panel.styles.cjs");
-const Panel = require("./Canvas/Panel/Panel.cjs");
+const SidePanel_styles = require("./Canvas/SidePanel/SidePanel.styles.cjs");
+const SidePanel = require("./Canvas/SidePanel/SidePanel.cjs");
 const Tabs_styles = require("./Canvas/Tabs/Tabs.styles.cjs");
 const Tabs = require("./Canvas/Tabs/Tabs.cjs");
-const FloatingPanel_styles = require("./Canvas/FloatingPanel/FloatingPanel.styles.cjs");
-const FloatingPanel = require("./Canvas/FloatingPanel/FloatingPanel.cjs");
+const BottomPanel_styles = require("./Canvas/BottomPanel/BottomPanel.styles.cjs");
+const BottomPanel = require("./Canvas/BottomPanel/BottomPanel.cjs");
 const Tab_styles = require("./Canvas/Tab/Tab.styles.cjs");
 const Tab = require("./Canvas/Tab/Tab.cjs");
 exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
 exports.HvCanvasToolbar = Toolbar.HvCanvasToolbar;
-exports.canvasPanelClasses = Panel_styles.staticClasses;
-exports.HvCanvasPanel = Panel.HvCanvasPanel;
+exports.canvasSidePanelClasses = SidePanel_styles.staticClasses;
+exports.HvCanvasSidePanel = SidePanel.HvCanvasSidePanel;
 exports.canvasTabsClasses = Tabs_styles.staticClasses;
 exports.HvCanvasTabs = Tabs.HvCanvasTabs;
-exports.floatingPanelClasses = FloatingPanel_styles.staticClasses;
-exports.HvCanvasFloatingPanel = FloatingPanel.HvCanvasFloatingPanel;
+exports.canvasBottomPanelClasses = BottomPanel_styles.staticClasses;
+exports.HvCanvasBottomPanel = BottomPanel.HvCanvasBottomPanel;
 exports.canvasTabClasses = Tab_styles.staticClasses;
 exports.HvCanvasTab = Tab.HvCanvasTab;

package/dist/esm/Canvas/{FloatingPanel/FloatingPanel.js → BottomPanel/BottomPanel.js}

@@ -1,12 +1,12 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "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 { useClasses } from "./BottomPanel.styles.js";
+import { staticClasses } from "./BottomPanel.styles.js";
 import { HvCanvasTabs } from "../Tabs/Tabs.js";
 import { HvCanvasTab } from "../Tab/Tab.js";
-const HvCanvasFloatingPanel = forwardRef((props, ref) => {
+const HvCanvasBottomPanel = forwardRef((props, ref) => {
   const {
     id: idProp,
     className,
@@ -21,7 +21,7 @@ const HvCanvasFloatingPanel = forwardRef((props, ref) => {
     onTabChange,
     onAction,
     ...others
-  } = useDefaultProps("HvCanvasFloatingPanel", props);
+  } = useDefaultProps("HvCanvasBottomPanel", props);
   const { classes, cx } = useClasses(classesProp);
   const id = useUniqueId(idProp);
   const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({
@@ -158,6 +158,6 @@ const HvCanvasFloatingPanel = forwardRef((props, ref) => {
   );
 });
 export {
-  HvCanvasFloatingPanel,
-  staticClasses as floatingPanelClasses
+  HvCanvasBottomPanel,
+  staticClasses as canvasBottomPanelClasses
 };

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomPanel.js","sources":["../../../../src/Canvas/BottomPanel/BottomPanel.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 \"./BottomPanel.styles\";\n\nexport { staticClasses as canvasBottomPanelClasses };\n\nexport type HvCanvasBottomPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasBottomPanelProps extends HvBaseProps {\n  /** Open state of the bottom panel. */\n  open?: boolean;\n  /** Minimize state of the bottom 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?: HvCanvasBottomPanelClasses;\n}\n\n/**\n * A bottom panel component to use in a canvas context.\n */\nexport const HvCanvasBottomPanel = forwardRef<\n  HTMLDivElement,\n  HvCanvasBottomPanelProps\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(\"HvCanvasBottomPanel\", 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 → BottomPanel/BottomPanel.styles.js}

@@ -1,6 +1,6 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
 const { staticClasses, useClasses } = createClasses(
-  "HvCanvasFloatingPanel",
+  "HvCanvasBottomPanel",
   {
     root: {
       position: "absolute",

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomPanel.styles.js","sources":["../../../../src/Canvas/BottomPanel/BottomPanel.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasBottomPanel\",\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/SidePanel/SidePanel.js

@@ -0,0 +1,110 @@
+import { jsxs, Fragment, jsx } from "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 "./SidePanel.styles.js";
+import { staticClasses } from "./SidePanel.styles.js";
+import { HvCanvasTabs } from "../Tabs/Tabs.js";
+import { HvCanvasTab } from "../Tab/Tab.js";
+const DEFAULT_LABELS = {
+  open: "Open",
+  close: "Close"
+};
+const HvCanvasSidePanel = forwardRef((props, ref) => {
+  const {
+    id: idProp,
+    tab: tabProp,
+    open: openProp,
+    defaultOpen = false,
+    tabs,
+    onToggle,
+    onTabChange,
+    labels: labelsProp,
+    className,
+    children,
+    classes: classesProp,
+    ...others
+  } = useDefaultProps("HvCanvasSidePanel", 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 {
+  HvCanvasSidePanel,
+  staticClasses as canvasSidePanelClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.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 \"./SidePanel.styles\";\n\nexport { staticClasses as canvasSidePanelClasses };\n\nexport type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  open: \"Open\",\n  close: \"Close\",\n};\n\nexport interface HvCanvasSidePanelProps 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?: HvCanvasSidePanelClasses;\n}\n\n/**\n * A side panel component to use in a canvas context.\n */\nexport const HvCanvasSidePanel = forwardRef<\n  HTMLDivElement,\n  HvCanvasSidePanelProps\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(\"HvCanvasSidePanel\", 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 = (event: React.MouseEvent | React.KeyboardEvent) => {\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"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AACT;AAmCO,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAExC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,WAAW,CAAC;AAC9D,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA,OAAO,CAAC,GAAG,MAAM;AAAA,EAAA;AAGb,QAAA,oBAAoB,CAAC,UAAkD;AACnE,YAAA,CAAC,SAAS,CAAC,IAAI;AACZ,eAAA,OAAO,CAAC,IAAI;AAAA,EAAA;AAGnB,QAAA,kBAAiD,CAAC,OAAO,UAAU;AACvE,mBAAe,KAAK;AACpB,kBAAc,OAAO,KAAK;AAAA,EAAA;AAG5B,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,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,OAAO;AAAA,cACP,UAAU;AAAA,cAET,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,IAAI,GAAG,EAAE,IAAI,IAAI,EAAE;AAAA,kBACnB,OAAO,IAAI;AAAA,kBACX,UAAU;AAAA,kBAET,UAAI,IAAA;AAAA,gBAAA;AAAA,gBALA,IAAI;AAAA,cAAA,CAOZ;AAAA,YAAA;AAAA,UACH;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,OAAO,aAAa;AAAA,cAC1B,mBAAiB,OAAO,GAAG,EAAE,IAAI,WAAW,KAAK;AAAA,cACjD,WAAW,QAAQ;AAAA,cAElB;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;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,CAAC;"}

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

@@ -0,0 +1,64 @@
+import { createClasses, theme, outlineStyles } from "@hitachivantara/uikit-react-core";
+const { staticClasses, useClasses } = createClasses(
+  "HvCanvasSidePanel",
+  {
+    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/SidePanel/SidePanel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.styles.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.styles.tsx"],"sourcesContent":["import {\n  createClasses,\n  outlineStyles,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasSidePanel\",\n  {\n    root: {\n      height: \"100%\",\n      position: \"absolute\",\n      top: 0,\n      left: 0,\n      boxShadow:\n        \"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:\n        \"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);\n"],"names":[],"mappings":";AAMa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WACE;AAAA,MACF,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MACA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,MAAM,CAAC;AAAA,IACP,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WACE;AAAA,MACF,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,gBAAgB;AAAA,QACd,MAAM;AAAA,MACR;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,mBAAmB;AAAA,QACjB,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO,CAAC;AAAA,IACR,YAAY,CAAC;AAAA,IACb,aAAa,CAAC;AAAA,EAChB;AACF;"}

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

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Tab } from "@mui/base/Tab";
 import { useDefaultProps } from "@hitachivantara/uikit-react-core";

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

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Tabs } from "@mui/base/Tabs";
 import { TabsList } from "@mui/base/TabsList";

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDefaultProps, useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
 import { Previous } from "@hitachivantara/uikit-react-icons";

package/dist/esm/index.js

@@ -1,22 +1,22 @@
 import { staticClasses } from "./Canvas/Toolbar/Toolbar.styles.js";
 import { HvCanvasToolbar } from "./Canvas/Toolbar/Toolbar.js";
-import { staticClasses as staticClasses2 } from "./Canvas/Panel/Panel.styles.js";
-import { HvCanvasPanel } from "./Canvas/Panel/Panel.js";
+import { staticClasses as staticClasses2 } from "./Canvas/SidePanel/SidePanel.styles.js";
+import { HvCanvasSidePanel } from "./Canvas/SidePanel/SidePanel.js";
 import { staticClasses as staticClasses3 } from "./Canvas/Tabs/Tabs.styles.js";
 import { HvCanvasTabs } from "./Canvas/Tabs/Tabs.js";
-import { staticClasses as staticClasses4 } from "./Canvas/FloatingPanel/FloatingPanel.styles.js";
-import { HvCanvasFloatingPanel } from "./Canvas/FloatingPanel/FloatingPanel.js";
+import { staticClasses as staticClasses4 } from "./Canvas/BottomPanel/BottomPanel.styles.js";
+import { HvCanvasBottomPanel } from "./Canvas/BottomPanel/BottomPanel.js";
 import { staticClasses as staticClasses5 } from "./Canvas/Tab/Tab.styles.js";
 import { HvCanvasTab } from "./Canvas/Tab/Tab.js";
 export {
-  HvCanvasFloatingPanel,
-  HvCanvasPanel,
+  HvCanvasBottomPanel,
+  HvCanvasSidePanel,
   HvCanvasTab,
   HvCanvasTabs,
   HvCanvasToolbar,
-  staticClasses2 as canvasPanelClasses,
+  staticClasses4 as canvasBottomPanelClasses,
+  staticClasses2 as canvasSidePanelClasses,
   staticClasses5 as canvasTabClasses,
   staticClasses3 as canvasTabsClasses,
-  staticClasses as canvasToolbarClasses,
-  staticClasses4 as floatingPanelClasses
+  staticClasses as canvasToolbarClasses
 };

package/dist/types/index.d.ts

@@ -9,16 +9,30 @@ import { RefAttributes } from 'react';
 import { TabProps } from '@mui/base/Tab';
 import { TabsProps } from '@mui/base/Tabs';
 
-export declare const canvasPanelClasses: {
-    content: "HvCanvasPanel-content";
-    root: "HvCanvasPanel-root";
-    open: "HvCanvasPanel-open";
-    close: "HvCanvasPanel-close";
-    handle: "HvCanvasPanel-handle";
-    tabs: "HvCanvasPanel-tabs";
-    handleButton: "HvCanvasPanel-handleButton";
-    handleOpen: "HvCanvasPanel-handleOpen";
-    handleClose: "HvCanvasPanel-handleClose";
+export declare const canvasBottomPanelClasses: {
+    content: "HvCanvasBottomPanel-content";
+    root: "HvCanvasBottomPanel-root";
+    tab: "HvCanvasBottomPanel-tab";
+    closed: "HvCanvasBottomPanel-closed";
+    minimized: "HvCanvasBottomPanel-minimized";
+    multipleTabs: "HvCanvasBottomPanel-multipleTabs";
+    overflowing: "HvCanvasBottomPanel-overflowing";
+    tabTitle: "HvCanvasBottomPanel-tabTitle";
+    tabsRoot: "HvCanvasBottomPanel-tabsRoot";
+    leftActions: "HvCanvasBottomPanel-leftActions";
+    rightActions: "HvCanvasBottomPanel-rightActions";
+};
+
+export declare const canvasSidePanelClasses: {
+    content: "HvCanvasSidePanel-content";
+    root: "HvCanvasSidePanel-root";
+    open: "HvCanvasSidePanel-open";
+    close: "HvCanvasSidePanel-close";
+    handle: "HvCanvasSidePanel-handle";
+    tabs: "HvCanvasSidePanel-tabs";
+    handleButton: "HvCanvasSidePanel-handleButton";
+    handleOpen: "HvCanvasSidePanel-handleOpen";
+    handleClose: "HvCanvasSidePanel-handleClose";
 };
 
 export declare const canvasTabClasses: {
@@ -46,31 +60,17 @@ declare const DEFAULT_LABELS_2: {
     close: string;
 };
 
-export declare const floatingPanelClasses: {
-    content: "HvCanvasFloatingPanel-content";
-    root: "HvCanvasFloatingPanel-root";
-    tab: "HvCanvasFloatingPanel-tab";
-    closed: "HvCanvasFloatingPanel-closed";
-    minimized: "HvCanvasFloatingPanel-minimized";
-    multipleTabs: "HvCanvasFloatingPanel-multipleTabs";
-    overflowing: "HvCanvasFloatingPanel-overflowing";
-    tabTitle: "HvCanvasFloatingPanel-tabTitle";
-    tabsRoot: "HvCanvasFloatingPanel-tabsRoot";
-    leftActions: "HvCanvasFloatingPanel-leftActions";
-    rightActions: "HvCanvasFloatingPanel-rightActions";
-};
-
 /**
- * A floating panel component to use in a canvas context.
+ * A bottom panel component to use in a canvas context.
  */
-export declare const HvCanvasFloatingPanel: ForwardRefExoticComponent<HvCanvasFloatingPanelProps & RefAttributes<HTMLDivElement>>;
+export declare const HvCanvasBottomPanel: ForwardRefExoticComponent<HvCanvasBottomPanelProps & RefAttributes<HTMLDivElement>>;
 
-export declare type HvCanvasFloatingPanelClasses = ExtractNames<typeof useClasses_4>;
+export declare type HvCanvasBottomPanelClasses = ExtractNames<typeof useClasses_4>;
 
-export declare interface HvCanvasFloatingPanelProps extends HvBaseProps {
-    /** Open state of the floating panel. */
+export declare interface HvCanvasBottomPanelProps extends HvBaseProps {
+    /** Open state of the bottom panel. */
     open?: boolean;
-    /** Minimize state of the floating panel tabs'. */
+    /** Minimize state of the bottom panel tabs'. */
     minimize?: boolean;
     /** List of tabs visible on the panel. */
     tabs: {
@@ -88,17 +88,17 @@ export declare interface HvCanvasFloatingPanelProps extends HvBaseProps {
     /** Callback triggered when a right or left action is clicked. */
     onAction?: (event: React.SyntheticEvent, action: HvActionGeneric, tabId: string | number) => void;
     /** A Jss Object used to override or extend the styles applied. */
-    classes?: HvCanvasFloatingPanelClasses;
+    classes?: HvCanvasBottomPanelClasses;
 }
 
 /**
- * A panel component to use in a canvas context.
+ * A side panel component to use in a canvas context.
  */
-export declare const HvCanvasPanel: ForwardRefExoticComponent<HvCanvasPanelProps & RefAttributes<HTMLDivElement>>;
+export declare const HvCanvasSidePanel: ForwardRefExoticComponent<HvCanvasSidePanelProps & RefAttributes<HTMLDivElement>>;
 
-export declare type HvCanvasPanelClasses = ExtractNames<typeof useClasses_2>;
+export declare type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses_2>;
 
-export declare interface HvCanvasPanelProps extends HvBaseProps<HTMLDivElement> {
+export declare interface HvCanvasSidePanelProps extends HvBaseProps<HTMLDivElement> {
     /** When controlled, defines id the panel is open or not. */
     open?: boolean;
     /** When uncontrolled, defines the initial state of the panel. */
@@ -119,7 +119,7 @@ export declare interface HvCanvasPanelProps extends HvBaseProps<HTMLDivElement>
     /** The content that will be rendered within the canvas panel. */
     children?: React.ReactNode;
     /** A Jss Object used to override or extend the styles applied. */
-    classes?: HvCanvasPanelClasses;
+    classes?: HvCanvasSidePanelClasses;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-pentaho",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Pentaho+ React components.",
@@ -30,8 +30,8 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.66.10",
-    "@hitachivantara/uikit-react-icons": "^5.10.2",
+    "@hitachivantara/uikit-react-core": "^5.66.11",
+    "@hitachivantara/uikit-react-icons": "^5.10.3",
     "@mui/base": "^5.0.0-beta.40",
     "react-resize-detector": "^8.1.0"
   },
@@ -42,7 +42,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "fd75cf61e59e75d65a015d0e148ec71ecd88da4b",
+  "gitHead": "3786c516514ce5870060b8ebb14199906aa85e58",
   "exports": {
     ".": {
       "require": "./dist/cjs/index.cjs",

package/dist/cjs/Canvas/Panel/Panel.cjs

@@ -1,111 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const Panel_styles = require("./Panel.styles.cjs");
-const Tabs = require("../Tabs/Tabs.cjs");
-const Tab = require("../Tab/Tab.cjs");
-const DEFAULT_LABELS = {
-  open: "Open",
-  close: "Close"
-};
-const HvCanvasPanel = react.forwardRef(
-  (props, ref) => {
-    const {
-      id: idProp,
-      tab: tabProp,
-      open: openProp,
-      defaultOpen = false,
-      tabs,
-      onToggle,
-      onTabChange,
-      labels: labelsProp,
-      className,
-      children,
-      classes: classesProp,
-      ...others
-    } = uikitReactCore.useDefaultProps("HvCanvasPanel", props);
-    const id = uikitReactCore.useUniqueId(idProp);
-    const { classes, cx } = Panel_styles.useClasses(classesProp);
-    const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
-    const [open, setOpen] = uikitReactCore.useControlled(openProp, Boolean(defaultOpen));
-    const [selectedTab, setSelectedTab] = uikitReactCore.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref,
-          id,
-          className: cx(classes.root, className, {
-            [classes.open]: open,
-            [classes.close]: !open
-          }),
-          ...others,
-          children: [
-            tabs && /* @__PURE__ */ jsxRuntime.jsx(
-              Tabs.HvCanvasTabs,
-              {
-                className: classes.tabs,
-                value: selectedTab,
-                onChange: handleTabChange,
-                children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
-                  Tab.HvCanvasTab,
-                  {
-                    id: `${id}-${tab.id}`,
-                    value: tab.id,
-                    tabIndex: 0,
-                    children: tab.content
-                  },
-                  tab.id
-                ))
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              uikitReactCore.HvPanel,
-              {
-                role: tabs ? "tabpanel" : void 0,
-                "aria-labelledby": tabs ? `${id}-${selectedTab}` : void 0,
-                className: classes.content,
-                children
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: classes.handleButton, children: open ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Start, { color: ["primary"] }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { color: ["primary"] }) })
-        }
-      )
-    ] });
-  }
-);
-exports.canvasPanelClasses = Panel_styles.staticClasses;
-exports.HvCanvasPanel = HvCanvasPanel;

package/dist/cjs/Canvas/Panel/Panel.styles.cjs

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.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: uikitReactCore.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": {
-      ...uikitReactCore.outlineStyles
-    }
-  },
-  handleButton: {
-    top: "calc(50% - 16px)",
-    position: "absolute"
-  },
-  open: {},
-  close: {},
-  handleOpen: {},
-  handleClose: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

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

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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

@@ -1,112 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,61 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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;"}