@hitachivantara/uikit-react-pentaho 0.8.1 → 0.8.3

package/dist/cjs/Canvas/BottomPanel/BottomPanel.cjs

@@ -8,7 +8,7 @@ const CanvasContext = require("../CanvasContext.cjs");
 const BottomPanel_styles = require("./BottomPanel.styles.cjs");
 const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
 const PanelTab = require("../PanelTab/PanelTab.cjs");
-const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
+const HvCanvasBottomPanel = react.forwardRef(function HvCanvasBottomPanel2(props, ref) {
   const {
     id: idProp,
     className,

package/dist/cjs/Canvas/PanelTab/PanelTab.cjs

@@ -5,7 +5,7 @@ const react = require("react");
 const Tab = require("@mui/base/Tab");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const PanelTab_styles = require("./PanelTab.styles.cjs");
-const HvCanvasPanelTab = react.forwardRef((props, ref) => {
+const HvCanvasPanelTab = react.forwardRef(function HvCanvasPanelTab2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/Canvas/PanelTabs/PanelTabs.cjs

@@ -6,7 +6,7 @@ const Tabs = require("@mui/base/Tabs");
 const TabsList = require("@mui/base/TabsList");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const PanelTabs_styles = require("./PanelTabs.styles.cjs");
-const HvCanvasPanelTabs = react.forwardRef((props, ref) => {
+const HvCanvasPanelTabs = react.forwardRef(function HvCanvasPanelTabs2(props, ref) {
   const {
     selectionFollowsFocus = true,
     children,

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

@@ -13,7 +13,7 @@ const DEFAULT_LABELS = {
   open: "Open",
   close: "Close"
 };
-const HvCanvasSidePanel = react.forwardRef((props, ref) => {
+const HvCanvasSidePanel = react.forwardRef(function HvCanvasSidePanel2(props, ref) {
   const {
     id: idProp,
     tab: tabProp,
@@ -44,9 +44,12 @@ const HvCanvasSidePanel = react.forwardRef((props, ref) => {
     tabProp,
     tabs?.[0]?.id ?? "none"
   );
+  react.useEffect(() => {
+    handleSidePanelOpen?.(open);
+  }, [handleSidePanelOpen, open]);
   react.useEffect(() => {
     handleSidePanelWidth?.(initialWidth);
-  }, [initialWidth]);
+  }, [handleSidePanelWidth, initialWidth]);
   const updateWidth = (width2) => {
     handleSidePanelWidth?.(width2);
     onResize?.(width2);

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

@@ -11,7 +11,7 @@ const DEFAULT_LABELS = {
   back: "Back"
 };
 const HvCanvasToolbar = react.forwardRef(
-  (props, ref) => {
+  function HvCanvasToolbar2(props, ref) {
     const {
       title: titleProp,
       backButton,

package/dist/cjs/Canvas/ToolbarTabs/ToolbarTabs.cjs

@@ -15,7 +15,7 @@ const DEFAULT_LABELS = {
   undefined: "Undefined",
   dropdownMenu: "Dropdown menu"
 };
-const HvCanvasToolbarTabs = react.forwardRef((props, ref) => {
+const HvCanvasToolbarTabs = react.forwardRef(function HvCanvasToolbarTabs2(props, ref) {
   const {
     children,
     className,

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

@@ -7,7 +7,7 @@ import { useClasses } from "./BottomPanel.styles.js";
 import { staticClasses } from "./BottomPanel.styles.js";
 import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
 import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
-const HvCanvasBottomPanel = forwardRef((props, ref) => {
+const HvCanvasBottomPanel = forwardRef(function HvCanvasBottomPanel2(props, ref) {
   const {
     id: idProp,
     className,

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

@@ -1 +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  theme,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\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 | ((overflowing: boolean) => React.ReactNode);\n  }[];\n  /** Id of the selected tab if it needs to be controlled. */\n  selectedTabId?: 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  /**\n   * Actions to be rendered in the left side of a tab.\n   * If more than one action is provided, a dropdown menu will be used.\n   * These actions are not shown when the tab content is overflowing.\n   */\n  leftActions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * Actions to be rendered in the right side of a tab.\n   * If more than two actions are provided, a dropdown menu will be used to display the remaining actions.\n   * These actions are not shown when the tab content is overflowing.\n   */\n  rightActions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * Actions to be rendered in the right side of a tab when the tab content is overflowing.\n   * These actions will replace both `leftActions` and `rightActions`.\n   */\n  overflowActions?: HvActionsGenericProps[\"actions\"];\n  /** Callback triggered when an 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    overflowActions,\n    selectedTabId: selectedTabIdProp,\n    classes: classesProp,\n    onTabChange,\n    onAction,\n    ...others\n  } = useDefaultProps(\"HvCanvasBottomPanel\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const canvasContext = useCanvasContext();\n  const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;\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 availableWidth =\n      tabWidth -\n      (leftActions ? leftActionWidth : 0) -\n      (rightActions ? rightActionWidth : 0);\n\n    return availableWidth < 60;\n  }, [leftActionWidth, leftActions, rightActionWidth, rightActions, tabWidth]);\n\n  const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n    selectedTabIdProp,\n    tabs[0].id,\n  );\n\n  const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    tabId,\n  ) => {\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      style={{\n        width: `calc(100% - ${sidePanelWidth}px - 2 * ${theme.space.sm})`,\n        right: theme.space.sm,\n      }}\n      {...others}\n    >\n      <div className={classes.tabsRoot}>\n        <HvCanvasPanelTabs\n          style={{\n            // @ts-ignore\n            \"--left-actions-width\":\n              overflowing || !leftActions\n                ? theme.space.sm\n                : `calc(${leftActionWidth}px + ${theme.space.xs})`,\n            \"--right-actions-width\":\n              !rightActions || (overflowing && !overflowActions)\n                ? theme.space.sm\n                : `calc(${overflowing ? 32 : rightActionWidth}px + ${theme.space.xs})`,\n          }}\n          onChange={handleTabChange}\n          value={selectedTab}\n        >\n          {tabs.map((tab, index) => (\n            <HvCanvasPanelTab\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}>\n                {typeof tab.title === \"function\"\n                  ? tab.title(overflowing)\n                  : tab.title}\n              </div>\n            </HvCanvasPanelTab>\n          ))}\n        </HvCanvasPanelTabs>\n        {/* For accessibility purposes, these buttons cannot be children of a tablist so they are rendered as HvCanvasTabs sibling. */}\n        {leftActions || rightActions || overflowActions\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 && !overflowing && (\n                    <div\n                      ref={leftActionRef}\n                      className={cx(classes.leftActions, {\n                        [classes.actionsDisabled]: btnsDisabled,\n                      })}\n                    >\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 && !overflowing && (\n                    <div\n                      ref={rightActionRef}\n                      className={cx(classes.rightActions, {\n                        [classes.actionsDisabled]: btnsDisabled,\n                      })}\n                    >\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                  {overflowActions && overflowing && (\n                    <div\n                      className={cx(classes.rightActions, {\n                        [classes.actionsDisabled]: btnsDisabled,\n                      })}\n                    >\n                      <HvActionsGeneric\n                        maxVisibleActions={0}\n                        actions={overflowActions}\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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"}
+{"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  theme,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\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 | ((overflowing: boolean) => React.ReactNode);\n  }[];\n  /** Id of the selected tab if it needs to be controlled. */\n  selectedTabId?: 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  /**\n   * Actions to be rendered in the left side of a tab.\n   * If more than one action is provided, a dropdown menu will be used.\n   * These actions are not shown when the tab content is overflowing.\n   */\n  leftActions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * Actions to be rendered in the right side of a tab.\n   * If more than two actions are provided, a dropdown menu will be used to display the remaining actions.\n   * These actions are not shown when the tab content is overflowing.\n   */\n  rightActions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * Actions to be rendered in the right side of a tab when the tab content is overflowing.\n   * These actions will replace both `leftActions` and `rightActions`.\n   */\n  overflowActions?: HvActionsGenericProps[\"actions\"];\n  /** Callback triggered when an 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>(function HvCanvasBottomPanel(props, ref) {\n  const {\n    id: idProp,\n    className,\n    children,\n    open,\n    tabs,\n    minimize,\n    leftActions,\n    rightActions,\n    overflowActions,\n    selectedTabId: selectedTabIdProp,\n    classes: classesProp,\n    onTabChange,\n    onAction,\n    ...others\n  } = useDefaultProps(\"HvCanvasBottomPanel\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const canvasContext = useCanvasContext();\n  const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;\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 availableWidth =\n      tabWidth -\n      (leftActions ? leftActionWidth : 0) -\n      (rightActions ? rightActionWidth : 0);\n\n    return availableWidth < 60;\n  }, [leftActionWidth, leftActions, rightActionWidth, rightActions, tabWidth]);\n\n  const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n    selectedTabIdProp,\n    tabs[0].id,\n  );\n\n  const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    tabId,\n  ) => {\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      style={{\n        width: `calc(100% - ${sidePanelWidth}px - 2 * ${theme.space.sm})`,\n        right: theme.space.sm,\n      }}\n      {...others}\n    >\n      <div className={classes.tabsRoot}>\n        <HvCanvasPanelTabs\n          style={{\n            // @ts-ignore\n            \"--left-actions-width\":\n              overflowing || !leftActions\n                ? theme.space.sm\n                : `calc(${leftActionWidth}px + ${theme.space.xs})`,\n            \"--right-actions-width\":\n              !rightActions || (overflowing && !overflowActions)\n                ? theme.space.sm\n                : `calc(${overflowing ? 32 : rightActionWidth}px + ${theme.space.xs})`,\n          }}\n          onChange={handleTabChange}\n          value={selectedTab}\n        >\n          {tabs.map((tab, index) => (\n            <HvCanvasPanelTab\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}>\n                {typeof tab.title === \"function\"\n                  ? tab.title(overflowing)\n                  : tab.title}\n              </div>\n            </HvCanvasPanelTab>\n          ))}\n        </HvCanvasPanelTabs>\n        {/* For accessibility purposes, these buttons cannot be children of a tablist so they are rendered as HvCanvasTabs sibling. */}\n        {leftActions || rightActions || overflowActions\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 && !overflowing && (\n                    <div\n                      ref={leftActionRef}\n                      className={cx(classes.leftActions, {\n                        [classes.actionsDisabled]: btnsDisabled,\n                      })}\n                    >\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 && !overflowing && (\n                    <div\n                      ref={rightActionRef}\n                      className={cx(classes.rightActions, {\n                        [classes.actionsDisabled]: btnsDisabled,\n                      })}\n                    >\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                  {overflowActions && overflowing && (\n                    <div\n                      className={cx(classes.rightActions, {\n                        [classes.actionsDisabled]: btnsDisabled,\n                      })}\n                    >\n                      <HvActionsGeneric\n                        maxVisibleActions={0}\n                        actions={overflowActions}\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":["HvCanvasBottomPanel"],"mappings":"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"}

package/dist/esm/Canvas/PanelTab/PanelTab.js

@@ -4,7 +4,7 @@ import { Tab } from "@mui/base/Tab";
 import { useDefaultProps } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./PanelTab.styles.js";
 import { staticClasses } from "./PanelTab.styles.js";
-const HvCanvasPanelTab = forwardRef((props, ref) => {
+const HvCanvasPanelTab = forwardRef(function HvCanvasPanelTab2(props, ref) {
   const {
     classes: classesProp,
     className,

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

@@ -1 +1 @@
-{"version":3,"file":"PanelTab.js","sources":["../../../../src/Canvas/PanelTab/PanelTab.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 \"./PanelTab.styles\";\n\nexport { staticClasses as canvasPanelTabClasses };\n\nexport type HvCanvasPanelTabClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasPanelTabProps extends TabProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasPanelTabClasses;\n}\n\n/**\n * The tab component to use inside `HvCanvasPanelTabs`.\n */\nexport const HvCanvasPanelTab = forwardRef<\n  HTMLButtonElement,\n  HvCanvasPanelTabProps\n>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvCanvasPanelTab\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return <Tab ref={ref} className={cx(classes.root, className)} {...others} />;\n});\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,mBAAmB,WAG9B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAEvC,SAAA,oBAAC,KAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,OAAQ,CAAA;AAC5E,CAAC;"}
+{"version":3,"file":"PanelTab.js","sources":["../../../../src/Canvas/PanelTab/PanelTab.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 \"./PanelTab.styles\";\n\nexport { staticClasses as canvasPanelTabClasses };\n\nexport type HvCanvasPanelTabClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasPanelTabProps extends TabProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasPanelTabClasses;\n}\n\n/**\n * The tab component to use inside `HvCanvasPanelTabs`.\n */\nexport const HvCanvasPanelTab = forwardRef<\n  HTMLButtonElement,\n  HvCanvasPanelTabProps\n>(function HvCanvasPanelTab(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvCanvasPanelTab\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return <Tab ref={ref} className={cx(classes.root, className)} {...others} />;\n});\n"],"names":["HvCanvasPanelTab"],"mappings":";;;;;;AAqBO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAEvC,SAAA,oBAAC,KAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,OAAQ,CAAA;AAC5E,CAAC;"}

package/dist/esm/Canvas/PanelTabs/PanelTabs.js

@@ -5,7 +5,7 @@ import { TabsList } from "@mui/base/TabsList";
 import { useDefaultProps } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./PanelTabs.styles.js";
 import { staticClasses } from "./PanelTabs.styles.js";
-const HvCanvasPanelTabs = forwardRef((props, ref) => {
+const HvCanvasPanelTabs = forwardRef(function HvCanvasPanelTabs2(props, ref) {
   const {
     selectionFollowsFocus = true,
     children,

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

@@ -1 +1 @@
-{"version":3,"file":"PanelTabs.js","sources":["../../../../src/Canvas/PanelTabs/PanelTabs.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 \"./PanelTabs.styles\";\n\nexport { staticClasses as canvasPanelTabsClasses };\n\nexport type HvCanvasPanelTabsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasPanelTabsProps extends TabsProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasPanelTabsClasses;\n}\n\n/**\n * A tabs component to use in a canvas context.\n */\nexport const HvCanvasPanelTabs = forwardRef<\n  HTMLDivElement,\n  HvCanvasPanelTabsProps\n>((props, ref) => {\n  const {\n    selectionFollowsFocus = true,\n    children,\n    className,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasPanelTabs\", 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"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAE9C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,UAAA,EAAS,WAAW,QAAQ,MAAO,SAAS,CAAA;AAAA,IAAA;AAAA,EAC/C;AAEJ,CAAC;"}
+{"version":3,"file":"PanelTabs.js","sources":["../../../../src/Canvas/PanelTabs/PanelTabs.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 \"./PanelTabs.styles\";\n\nexport { staticClasses as canvasPanelTabsClasses };\n\nexport type HvCanvasPanelTabsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasPanelTabsProps extends TabsProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasPanelTabsClasses;\n}\n\n/**\n * A tabs component to use in a canvas context.\n */\nexport const HvCanvasPanelTabs = forwardRef<\n  HTMLDivElement,\n  HvCanvasPanelTabsProps\n>(function HvCanvasPanelTabs(props, ref) {\n  const {\n    selectionFollowsFocus = true,\n    children,\n    className,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasPanelTabs\", 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"],"names":["HvCanvasPanelTabs"],"mappings":";;;;;;;AAsBO,MAAM,oBAAoB,WAG/B,SAASA,mBAAkB,OAAO,KAAK;AACjC,QAAA;AAAA,IACJ,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAE9C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,UAAA,EAAS,WAAW,QAAQ,MAAO,SAAS,CAAA;AAAA,IAAA;AAAA,EAC/C;AAEJ,CAAC;"}

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

@@ -12,7 +12,7 @@ const DEFAULT_LABELS = {
   open: "Open",
   close: "Close"
 };
-const HvCanvasSidePanel = forwardRef((props, ref) => {
+const HvCanvasSidePanel = forwardRef(function HvCanvasSidePanel2(props, ref) {
   const {
     id: idProp,
     tab: tabProp,
@@ -43,9 +43,12 @@ const HvCanvasSidePanel = forwardRef((props, ref) => {
     tabProp,
     tabs?.[0]?.id ?? "none"
   );
+  useEffect(() => {
+    handleSidePanelOpen?.(open);
+  }, [handleSidePanelOpen, open]);
   useEffect(() => {
     handleSidePanelWidth?.(initialWidth);
-  }, [initialWidth]);
+  }, [handleSidePanelWidth, initialWidth]);
   const updateWidth = (width2) => {
     handleSidePanelWidth?.(width2);
     onResize?.(width2);

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

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvPanel,\n  useControlled,\n  useDefaultProps,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./SidePanel.styles\";\nimport { useResizable } from \"./useResizable\";\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\n  extends HvBaseProps<HTMLDivElement, \"onToggle\" | \"onResize\"> {\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 minimum width of the side panel. */\n  minWidth?: number;\n  /** The maximum width of the side panel. */\n  maxWidth?: number;\n  /** The initial width of the side panel. */\n  initialWidth?: number;\n  /** Callback triggered when the panel width changes. */\n  onResize?: (width: number) => void;\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    minWidth = 100,\n    maxWidth = 500,\n    initialWidth = 320,\n    onResize,\n    className,\n    children,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasSidePanel\", props);\n\n  const id = useUniqueId(idProp);\n\n  const canvasContext = useCanvasContext();\n  const handleSidePanelWidth = canvasContext?.handleSidePanelWidth;\n  const sidePanelOpen = canvasContext?.sidePanelOpen;\n  const handleSidePanelOpen = canvasContext?.handleSidePanelOpen;\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  useEffect(() => {\n    handleSidePanelWidth?.(initialWidth);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialWidth]);\n\n  const updateWidth = (width: number) => {\n    handleSidePanelWidth?.(width);\n    onResize?.(width);\n  };\n\n  const { width, isDragging, getContainerProps, getSeparatorProps } =\n    useResizable({\n      ref,\n      initialWidth,\n      minWidth,\n      maxWidth,\n      onResize: updateWidth,\n    });\n\n  const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n    setOpen((prev) => !prev);\n    handleSidePanelOpen?.(!sidePanelOpen);\n    onToggle?.(event, !open);\n  };\n\n  const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    tabId,\n  ) => {\n    setSelectedTab(tabId);\n    onTabChange?.(event, tabId);\n  };\n\n  return (\n    <>\n      <div\n        id={id}\n        className={cx(classes.root, className, {\n          [classes.open]: open,\n          [classes.close]: !open,\n        })}\n        {...getContainerProps({ style: { ...(!open && { width: 0 }) } })}\n        {...others}\n      >\n        {tabs && (\n          <HvCanvasPanelTabs\n            className={classes.tabs}\n            value={selectedTab}\n            onChange={handleTabChange}\n          >\n            {tabs.map((tab) => (\n              <HvCanvasPanelTab\n                key={tab.id}\n                id={`${id}-${tab.id}`}\n                value={tab.id}\n              >\n                {tab.content}\n              </HvCanvasPanelTab>\n            ))}\n          </HvCanvasPanelTabs>\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 {...getSeparatorProps()} />\n      <HvIconButton\n        variant=\"primaryGhost\"\n        title={open ? labels.close : labels.open}\n        onClick={handleTogglePanel}\n        className={cx(classes.handle, {\n          [classes.handleOpen]: open,\n          [classes.handleClose]: !open,\n        })}\n        style={{\n          left: open ? width : 0,\n          transition: isDragging ? \"none\" : undefined,\n        }}\n      >\n        <End rotate={open} />\n      </HvIconButton>\n    </>\n  );\n});\n"],"names":["width"],"mappings":"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"}
+{"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvPanel,\n  useControlled,\n  useDefaultProps,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./SidePanel.styles\";\nimport { useResizable } from \"./useResizable\";\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\n  extends HvBaseProps<HTMLDivElement, \"onToggle\" | \"onResize\"> {\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 minimum width of the side panel. */\n  minWidth?: number;\n  /** The maximum width of the side panel. */\n  maxWidth?: number;\n  /** The initial width of the side panel. */\n  initialWidth?: number;\n  /** Callback triggered when the panel width changes. */\n  onResize?: (width: number) => void;\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>(function HvCanvasSidePanel(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    minWidth = 100,\n    maxWidth = 500,\n    initialWidth = 320,\n    onResize,\n    className,\n    children,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasSidePanel\", props);\n\n  const id = useUniqueId(idProp);\n\n  const canvasContext = useCanvasContext();\n  const handleSidePanelWidth = canvasContext?.handleSidePanelWidth;\n  const sidePanelOpen = canvasContext?.sidePanelOpen;\n  const handleSidePanelOpen = canvasContext?.handleSidePanelOpen;\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  useEffect(() => {\n    handleSidePanelOpen?.(open);\n  }, [handleSidePanelOpen, open]);\n\n  useEffect(() => {\n    handleSidePanelWidth?.(initialWidth);\n  }, [handleSidePanelWidth, initialWidth]);\n\n  const updateWidth = (width: number) => {\n    handleSidePanelWidth?.(width);\n    onResize?.(width);\n  };\n\n  const { width, isDragging, getContainerProps, getSeparatorProps } =\n    useResizable({\n      ref,\n      initialWidth,\n      minWidth,\n      maxWidth,\n      onResize: updateWidth,\n    });\n\n  const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n    setOpen((prev) => !prev);\n    handleSidePanelOpen?.(!sidePanelOpen);\n    onToggle?.(event, !open);\n  };\n\n  const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    tabId,\n  ) => {\n    setSelectedTab(tabId);\n    onTabChange?.(event, tabId);\n  };\n\n  return (\n    <>\n      <div\n        id={id}\n        className={cx(classes.root, className, {\n          [classes.open]: open,\n          [classes.close]: !open,\n        })}\n        {...getContainerProps({ style: { ...(!open && { width: 0 }) } })}\n        {...others}\n      >\n        {tabs && (\n          <HvCanvasPanelTabs\n            className={classes.tabs}\n            value={selectedTab}\n            onChange={handleTabChange}\n          >\n            {tabs.map((tab) => (\n              <HvCanvasPanelTab\n                key={tab.id}\n                id={`${id}-${tab.id}`}\n                value={tab.id}\n              >\n                {tab.content}\n              </HvCanvasPanelTab>\n            ))}\n          </HvCanvasPanelTabs>\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 {...getSeparatorProps()} />\n      <HvIconButton\n        variant=\"primaryGhost\"\n        title={open ? labels.close : labels.open}\n        onClick={handleTogglePanel}\n        className={cx(classes.handle, {\n          [classes.handleOpen]: open,\n          [classes.handleClose]: !open,\n        })}\n        style={{\n          left: open ? width : 0,\n          transition: isDragging ? \"none\" : undefined,\n        }}\n      >\n        <End rotate={open} />\n      </HvIconButton>\n    </>\n  );\n});\n"],"names":["HvCanvasSidePanel","width"],"mappings":";;;;;;;;;;AAuBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AACT;AA4CO,MAAM,oBAAoB,WAG/B,SAASA,mBAAkB,OAAO,KAAK;AACjC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAExC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,uBAAuB,eAAe;AAC5C,QAAM,gBAAgB,eAAe;AACrC,QAAM,sBAAsB,eAAe;AAE3C,QAAM,EAAE,SAAS,OAAO,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,EACnB;AAEA,YAAU,MAAM;AACd,0BAAsB,IAAI;AAAA,EAAA,GACzB,CAAC,qBAAqB,IAAI,CAAC;AAE9B,YAAU,MAAM;AACd,2BAAuB,YAAY;AAAA,EAAA,GAClC,CAAC,sBAAsB,YAAY,CAAC;AAEjC,QAAA,cAAc,CAACC,WAAkB;AACrC,2BAAuBA,MAAK;AAC5B,eAAWA,MAAK;AAAA,EAClB;AAEA,QAAM,EAAE,OAAO,YAAY,mBAAmB,kBAAA,IAC5C,aAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EAAA,CACX;AAEG,QAAA,oBAAoB,CAAC,UAAkD;AACnE,YAAA,CAAC,SAAS,CAAC,IAAI;AACvB,0BAAsB,CAAC,aAAa;AACzB,eAAA,OAAO,CAAC,IAAI;AAAA,EACzB;AAEM,QAAA,kBAAsD,CAC1D,OACA,UACG;AACH,mBAAe,KAAK;AACpB,kBAAc,OAAO,KAAK;AAAA,EAC5B;AAEA,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;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,kBAAkB,EAAE,OAAO,EAAE,GAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAA,GAAM;AAAA,QAC9D,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,kBAEV,UAAI,IAAA;AAAA,gBAAA;AAAA,gBAJA,IAAI;AAAA,cAMZ,CAAA;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,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,IACC,oBAAA,OAAA,EAAK,GAAG,kBAAqB,EAAA,CAAA;AAAA,IAC9B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAO,OAAO,OAAO,QAAQ,OAAO;AAAA,QACpC,SAAS;AAAA,QACT,WAAW,GAAG,QAAQ,QAAQ;AAAA,UAC5B,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,QAAA,CACzB;AAAA,QACD,OAAO;AAAA,UACL,MAAM,OAAO,QAAQ;AAAA,UACrB,YAAY,aAAa,SAAS;AAAA,QACpC;AAAA,QAEA,UAAA,oBAAC,KAAI,EAAA,QAAQ,KAAM,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACrB,GACF;AAEJ,CAAC;"}

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

@@ -10,7 +10,7 @@ const DEFAULT_LABELS = {
   back: "Back"
 };
 const HvCanvasToolbar = forwardRef(
-  (props, ref) => {
+  function HvCanvasToolbar2(props, ref) {
     const {
       title: titleProp,
       backButton,

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

@@ -1 +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\";\nimport { mergeStyles } from \"@hitachivantara/uikit-react-utils\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\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      style,\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 canvasContext = useCanvasContext();\n    const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;\n\n    const title =\n      typeof titleProp === \"string\" ? (\n        <HvTypography variant=\"title4\">{titleProp}</HvTypography>\n      ) : (\n        titleProp\n      );\n\n    return (\n      <div\n        ref={ref}\n        className={cx(classes.root, className)}\n        style={mergeStyles(style, {\n          \"--sidepanel-width\": `${sidePanelWidth}px`,\n        })}\n        {...others}\n      >\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":";;;;;;;;AAoBA,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;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,UAAM,gBAAgB,iBAAiB;AACjC,UAAA,iBAAiB,eAAe,kBAAkB;AAElD,UAAA,QACJ,OAAO,cAAc,+BAClB,cAAa,EAAA,SAAQ,UAAU,UAAA,UAAA,CAAU,IAE1C;AAIF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,OAAO,YAAY,OAAO;AAAA,UACxB,qBAAqB,GAAG,cAAc;AAAA,QAAA,CACvC;AAAA,QACA,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MACrB,UACC,cAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO,OAAO;AAAA,cACd,SAAQ;AAAA,cACP,GAAG;AAAA,cAEJ,8BAAC,UAAS,CAAA,CAAA;AAAA,YAAA;AAAA,UAAA,GAGhB;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,UACrC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,SAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1D;AAAA,EAAA;AAGN;"}
+{"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\";\nimport { mergeStyles } from \"@hitachivantara/uikit-react-utils\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\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  function HvCanvasToolbar(props, ref) {\n    const {\n      title: titleProp,\n      backButton,\n      labels: labelsProp,\n      className,\n      style,\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 canvasContext = useCanvasContext();\n    const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;\n\n    const title =\n      typeof titleProp === \"string\" ? (\n        <HvTypography variant=\"title4\">{titleProp}</HvTypography>\n      ) : (\n        titleProp\n      );\n\n    return (\n      <div\n        ref={ref}\n        className={cx(classes.root, className)}\n        style={mergeStyles(style, {\n          \"--sidepanel-width\": `${sidePanelWidth}px`,\n        })}\n        {...others}\n      >\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":["HvCanvasToolbar"],"mappings":";;;;;;;;AAoBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AACR;AAqBO,MAAM,kBAAkB;AAAA,EAC7B,SAASA,iBAAgB,OAAO,KAAK;AAC7B,UAAA;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,UAAM,gBAAgB,iBAAiB;AACjC,UAAA,iBAAiB,eAAe,kBAAkB;AAElD,UAAA,QACJ,OAAO,cAAc,+BAClB,cAAa,EAAA,SAAQ,UAAU,UAAA,UAAA,CAAU,IAE1C;AAIF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,OAAO,YAAY,OAAO;AAAA,UACxB,qBAAqB,GAAG,cAAc;AAAA,QAAA,CACvC;AAAA,QACA,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MACrB,UACC,cAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO,OAAO;AAAA,cACd,SAAQ;AAAA,cACP,GAAG;AAAA,cAEJ,8BAAC,UAAS,CAAA,CAAA;AAAA,YAAA;AAAA,UAAA,GAGhB;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,UACrC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,SAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1D;AAAA,EAAA;AAGN;"}

package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.js

@@ -14,7 +14,7 @@ const DEFAULT_LABELS = {
   undefined: "Undefined",
   dropdownMenu: "Dropdown menu"
 };
-const HvCanvasToolbarTabs = forwardRef((props, ref) => {
+const HvCanvasToolbarTabs = forwardRef(function HvCanvasToolbarTabs2(props, ref) {
   const {
     children,
     className,

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTabs.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.tsx"],"sourcesContent":["import { forwardRef, useMemo, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvOverflowTooltip,\n  isKey,\n  uniqueId,\n  useControlled,\n  useDefaultProps,\n  useForkRef,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  AddAlt,\n  CloseXS,\n  MoreOptionsHorizontal,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { clamp } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { ToolbarTabEditor } from \"./ToolbarTabEditor\";\nimport {\n  DROPDOWN_MENU_WIDTH,\n  MAX_TAB_WIDTH,\n  MIN_TAB_WIDTH,\n  staticClasses,\n  useClasses,\n} from \"./ToolbarTabs.styles\";\n\nexport { staticClasses as canvasToolbarTabsClasses };\n\nexport type HvCanvasToolbarTabsClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  create: \"Create new\",\n  undefined: \"Undefined\",\n  dropdownMenu: \"Dropdown menu\",\n};\n\ninterface ToolbarTabsTab {\n  id: string;\n  label: string;\n  icon?: React.ReactNode;\n  /** Whether the tab is fixed and can't be removed. Defaults to `false`, i.e., all tabs are removable by default. */\n  fixed?: boolean;\n}\n\nexport interface HvCanvasToolbarTabsProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /** When controlled, defines the tabs. */\n  tabs?: ToolbarTabsTab[];\n  /** When uncontrolled, defines the initial tabs. */\n  defaultTabs?: ToolbarTabsTab[];\n  /** Id of the selected tab if it needs to be controlled. */\n  selectedTabId?: string;\n  /** Defines the icon to be placed before the label when a new tab is created through the \"Create new\" button. If not defined, no icon is used. */\n  icon?: React.ReactNode;\n  /** Whether the tabs are editable or not. Default to `false`. */\n  disableTabEdit?: boolean;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | null,\n  ) => void;\n  /** Callback triggered when the tabs change: new tab added, tab removed, tab reorder, and label updated. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n    tabs: ToolbarTabsTab[],\n  ) => void;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasToolbarTabsClasses;\n  /** Whether the \"Create new\" button, which enables to create new tabs, is hidden. Defaults to `false`. */\n  hideCreateNew?: boolean;\n}\n\n/**\n * A toolbar tabs component to use in a canvas context.\n */\nexport const HvCanvasToolbarTabs = forwardRef<\n  HTMLDivElement,\n  HvCanvasToolbarTabsProps\n>((props, ref) => {\n  const {\n    children,\n    className,\n    selectedTabId: selectedTabIdProp,\n    icon: iconProp,\n    disableTabEdit = false,\n    hideCreateNew = false,\n    tabs: tabsProp,\n    defaultTabs: defaultTabsProp = [],\n    labels: labelsProp,\n    classes: classesProp,\n    onTabChange: onTabChangeProp,\n    onChange: onChangeProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasToolbarTabs\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  // Actions resize detector: to know when to use the dropdown menu\n  const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  // Root resize detector: to know when to use the dropdown menu\n  const { width: rootWidth = 0, ref: rootRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  const [tabs, setTabs] = useControlled(tabsProp, defaultTabsProp);\n  const [selectedTab, setSelectedTab] = useControlled<string | null>(\n    selectedTabIdProp,\n    tabs?.[0]?.id ?? \"none\",\n  );\n  const [isEditing, setIsEditing] = useState(false);\n\n  const rootForkedRef = useForkRef(ref, rootRef);\n\n  const handleChangeTabs = (\n    event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n    newTabs: ToolbarTabsTab[],\n  ) => {\n    setTabs(newTabs);\n    onChangeProp?.(event, newTabs);\n  };\n\n  const handleChangeSelectedTab: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    value,\n  ) => {\n    setSelectedTab(String(value));\n    onTabChangeProp?.(event, String(value));\n  };\n\n  const handleCreateNew: HvButtonProps[\"onClick\"] = (event) => {\n    const newTabs: ToolbarTabsTab[] = [...tabs];\n    const newTab: ToolbarTabsTab = {\n      id: uniqueId(),\n      label: `${labels.undefined} ${newTabs.length + 1}`,\n      icon: iconProp,\n    };\n    newTabs.push(newTab);\n    handleChangeSelectedTab(event, newTab.id);\n    handleChangeTabs?.(event, newTabs);\n  };\n\n  const handleEdit = (\n    event: React.FormEvent<Element>,\n    value: string,\n    tabId: string,\n  ) =>\n    handleChangeTabs(\n      event,\n      tabs.map((tab) => (tab.id === tabId ? { ...tab, label: value } : tab)),\n    );\n\n  const handleDeleteTab = (event: any, tabId: string) => {\n    const newTabs = tabs.filter((tab) => tab.id !== tabId);\n\n    if (tabId === selectedTab) {\n      const currentIndex = tabs.findIndex((tab) => tab.id === tabId);\n      const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;\n      handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? \"none\");\n    }\n\n    handleChangeTabs(event, newTabs);\n  };\n\n  const handleKeyDownTab = (\n    event: React.KeyboardEvent,\n    tabId: string,\n    removable: boolean,\n  ) => {\n    if (removable && (isKey(event, \"Delete\") || isKey(event, \"Backspace\"))) {\n      handleDeleteTab(event, tabId);\n\n      // We don't want the click to also select the tab\n      event.stopPropagation();\n    } else if (isKey(event, \"Enter\")) {\n      // Activate edit label mode\n      setIsEditing(true);\n    }\n  };\n\n  const { tabWidth, hiddenTabs, visibleTabs } = useMemo(() => {\n    let availableWidth = rootWidth - actionsWidth;\n    let calculatedTabWidth = availableWidth / tabs.length;\n    let clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);\n\n    // Overflowing\n    if (calculatedTabWidth < MIN_TAB_WIDTH) {\n      availableWidth -= DROPDOWN_MENU_WIDTH;\n      const visibleCount = Math.floor(availableWidth / MIN_TAB_WIDTH);\n      calculatedTabWidth = availableWidth / visibleCount;\n      clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);\n\n      const temporaryHiddenTabs = tabs.slice(visibleCount);\n      const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(\n        (tab) => tab.id === selectedTab,\n      );\n      const excludedTabIndex = visibleCount - 1;\n      const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;\n\n      if (shouldShuffle) {\n        return {\n          tabWidth: clamped,\n          visibleTabs: [\n            ...tabs.slice(0, excludedTabIndex),\n            temporaryHiddenTabs[selectedTabHiddenIndex],\n          ].filter((tab) => tab),\n          hiddenTabs: [\n            tabs[excludedTabIndex],\n            ...temporaryHiddenTabs.filter(\n              (tab, i) => i !== selectedTabHiddenIndex,\n            ),\n          ].filter((tab) => tab),\n        };\n      }\n\n      return {\n        tabWidth: clamped,\n        visibleTabs: tabs.slice(0, visibleCount),\n        hiddenTabs: temporaryHiddenTabs,\n      };\n    }\n\n    return {\n      tabWidth: clamped,\n      visibleTabs: tabs,\n      hiddenTabs: [],\n    };\n  }, [actionsWidth, rootWidth, selectedTab, tabs]);\n\n  return (\n    <div\n      ref={rootForkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <div className={classes.tabsContainer}>\n        {visibleTabs.length > 0 && (\n          <HvCanvasPanelTabs\n            classes={{ list: classes.tabsList }}\n            value={selectedTab}\n            onChange={handleChangeSelectedTab}\n          >\n            {visibleTabs.map((tab, index) => {\n              const btnSelected = selectedTab === tab.id;\n              const removable = !tab.fixed;\n              return (\n                <HvCanvasPanelTab\n                  style={{\n                    width: tabWidth,\n                  }}\n                  key={tab.id}\n                  id={String(tab.id)}\n                  className={classes.tab}\n                  value={tab.id}\n                  onKeyDown={(event) =>\n                    handleKeyDownTab(event, tab.id, removable)\n                  }\n                >\n                  <div className={classes.tabContent}>\n                    {tab.icon && (\n                      <div className={classes.tabIconContainer}>{tab.icon}</div>\n                    )}\n                    {!btnSelected || disableTabEdit ? (\n                      <HvOverflowTooltip\n                        classes={{\n                          tooltipAnchor: classes.tabLabel,\n                        }}\n                        data={tab.label}\n                      />\n                    ) : (\n                      <ToolbarTabEditor\n                        classes={{\n                          label: cx(classes.tabLabel, classes.tabLabelEditor),\n                        }}\n                        value={tab.label}\n                        edit={isEditing}\n                        onEditChange={setIsEditing}\n                        onChange={(event, value) =>\n                          handleEdit(event, value, tab.id)\n                        }\n                        onBlur={(event, value) =>\n                          handleEdit(event, value, tab.id)\n                        }\n                        // We don't want the arrow keys to trigger the tab navigation\n                        onKeyDown={(e) => e.stopPropagation()}\n                      />\n                    )}\n                    {removable && (\n                      <div className={classes.closeIconContainer}>\n                        <CloseXS\n                          aria-hidden\n                          size=\"xs\"\n                          onClick={(event) => {\n                            handleDeleteTab(event, tab.id);\n\n                            // We don't want the click to also select the tab\n                            event.stopPropagation();\n                          }}\n                        />\n                      </div>\n                    )}\n                    {selectedTab !== tab.id &&\n                      visibleTabs[index + 1]?.id !== selectedTab && (\n                        <div className={classes.tabDivider} />\n                      )}\n                  </div>\n                </HvCanvasPanelTab>\n              );\n            })}\n          </HvCanvasPanelTabs>\n        )}\n        {hiddenTabs.length > 0 && (\n          <HvDropDownMenu\n            classes={{\n              container: classes.dropdownMenuContainer,\n              menuListRoot: classes.dropdownMenuListRoot,\n            }}\n            dataList={hiddenTabs}\n            icon={<MoreOptionsHorizontal />}\n            labels={{ dropdownMenu: labels.dropdownMenu }}\n            onClick={(event, value) =>\n              handleChangeSelectedTab(event, value.id ?? \"none\")\n            }\n          />\n        )}\n      </div>\n      <div ref={actionsRef} className={classes.actionsContainer}>\n        {children}\n        {!hideCreateNew && (\n          <HvButton\n            variant=\"primaryGhost\"\n            startIcon={<AddAlt />}\n            onClick={handleCreateNew}\n          >\n            {labels.create}\n          </HvButton>\n        )}\n      </div>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ToolbarTabs.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.tsx"],"sourcesContent":["import { forwardRef, useMemo, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvOverflowTooltip,\n  isKey,\n  uniqueId,\n  useControlled,\n  useDefaultProps,\n  useForkRef,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  AddAlt,\n  CloseXS,\n  MoreOptionsHorizontal,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { clamp } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { ToolbarTabEditor } from \"./ToolbarTabEditor\";\nimport {\n  DROPDOWN_MENU_WIDTH,\n  MAX_TAB_WIDTH,\n  MIN_TAB_WIDTH,\n  staticClasses,\n  useClasses,\n} from \"./ToolbarTabs.styles\";\n\nexport { staticClasses as canvasToolbarTabsClasses };\n\nexport type HvCanvasToolbarTabsClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  create: \"Create new\",\n  undefined: \"Undefined\",\n  dropdownMenu: \"Dropdown menu\",\n};\n\ninterface ToolbarTabsTab {\n  id: string;\n  label: string;\n  icon?: React.ReactNode;\n  /** Whether the tab is fixed and can't be removed. Defaults to `false`, i.e., all tabs are removable by default. */\n  fixed?: boolean;\n}\n\nexport interface HvCanvasToolbarTabsProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /** When controlled, defines the tabs. */\n  tabs?: ToolbarTabsTab[];\n  /** When uncontrolled, defines the initial tabs. */\n  defaultTabs?: ToolbarTabsTab[];\n  /** Id of the selected tab if it needs to be controlled. */\n  selectedTabId?: string;\n  /** Defines the icon to be placed before the label when a new tab is created through the \"Create new\" button. If not defined, no icon is used. */\n  icon?: React.ReactNode;\n  /** Whether the tabs are editable or not. Default to `false`. */\n  disableTabEdit?: boolean;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | null,\n  ) => void;\n  /** Callback triggered when the tabs change: new tab added, tab removed, tab reorder, and label updated. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n    tabs: ToolbarTabsTab[],\n  ) => void;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasToolbarTabsClasses;\n  /** Whether the \"Create new\" button, which enables to create new tabs, is hidden. Defaults to `false`. */\n  hideCreateNew?: boolean;\n}\n\n/**\n * A toolbar tabs component to use in a canvas context.\n */\nexport const HvCanvasToolbarTabs = forwardRef<\n  HTMLDivElement,\n  HvCanvasToolbarTabsProps\n>(function HvCanvasToolbarTabs(props, ref) {\n  const {\n    children,\n    className,\n    selectedTabId: selectedTabIdProp,\n    icon: iconProp,\n    disableTabEdit = false,\n    hideCreateNew = false,\n    tabs: tabsProp,\n    defaultTabs: defaultTabsProp = [],\n    labels: labelsProp,\n    classes: classesProp,\n    onTabChange: onTabChangeProp,\n    onChange: onChangeProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasToolbarTabs\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  // Actions resize detector: to know when to use the dropdown menu\n  const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  // Root resize detector: to know when to use the dropdown menu\n  const { width: rootWidth = 0, ref: rootRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  const [tabs, setTabs] = useControlled(tabsProp, defaultTabsProp);\n  const [selectedTab, setSelectedTab] = useControlled<string | null>(\n    selectedTabIdProp,\n    tabs?.[0]?.id ?? \"none\",\n  );\n  const [isEditing, setIsEditing] = useState(false);\n\n  const rootForkedRef = useForkRef(ref, rootRef);\n\n  const handleChangeTabs = (\n    event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n    newTabs: ToolbarTabsTab[],\n  ) => {\n    setTabs(newTabs);\n    onChangeProp?.(event, newTabs);\n  };\n\n  const handleChangeSelectedTab: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    value,\n  ) => {\n    setSelectedTab(String(value));\n    onTabChangeProp?.(event, String(value));\n  };\n\n  const handleCreateNew: HvButtonProps[\"onClick\"] = (event) => {\n    const newTabs: ToolbarTabsTab[] = [...tabs];\n    const newTab: ToolbarTabsTab = {\n      id: uniqueId(),\n      label: `${labels.undefined} ${newTabs.length + 1}`,\n      icon: iconProp,\n    };\n    newTabs.push(newTab);\n    handleChangeSelectedTab(event, newTab.id);\n    handleChangeTabs?.(event, newTabs);\n  };\n\n  const handleEdit = (\n    event: React.FormEvent<Element>,\n    value: string,\n    tabId: string,\n  ) =>\n    handleChangeTabs(\n      event,\n      tabs.map((tab) => (tab.id === tabId ? { ...tab, label: value } : tab)),\n    );\n\n  const handleDeleteTab = (event: any, tabId: string) => {\n    const newTabs = tabs.filter((tab) => tab.id !== tabId);\n\n    if (tabId === selectedTab) {\n      const currentIndex = tabs.findIndex((tab) => tab.id === tabId);\n      const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;\n      handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? \"none\");\n    }\n\n    handleChangeTabs(event, newTabs);\n  };\n\n  const handleKeyDownTab = (\n    event: React.KeyboardEvent,\n    tabId: string,\n    removable: boolean,\n  ) => {\n    if (removable && (isKey(event, \"Delete\") || isKey(event, \"Backspace\"))) {\n      handleDeleteTab(event, tabId);\n\n      // We don't want the click to also select the tab\n      event.stopPropagation();\n    } else if (isKey(event, \"Enter\")) {\n      // Activate edit label mode\n      setIsEditing(true);\n    }\n  };\n\n  const { tabWidth, hiddenTabs, visibleTabs } = useMemo(() => {\n    let availableWidth = rootWidth - actionsWidth;\n    let calculatedTabWidth = availableWidth / tabs.length;\n    let clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);\n\n    // Overflowing\n    if (calculatedTabWidth < MIN_TAB_WIDTH) {\n      availableWidth -= DROPDOWN_MENU_WIDTH;\n      const visibleCount = Math.floor(availableWidth / MIN_TAB_WIDTH);\n      calculatedTabWidth = availableWidth / visibleCount;\n      clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);\n\n      const temporaryHiddenTabs = tabs.slice(visibleCount);\n      const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(\n        (tab) => tab.id === selectedTab,\n      );\n      const excludedTabIndex = visibleCount - 1;\n      const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;\n\n      if (shouldShuffle) {\n        return {\n          tabWidth: clamped,\n          visibleTabs: [\n            ...tabs.slice(0, excludedTabIndex),\n            temporaryHiddenTabs[selectedTabHiddenIndex],\n          ].filter((tab) => tab),\n          hiddenTabs: [\n            tabs[excludedTabIndex],\n            ...temporaryHiddenTabs.filter(\n              (tab, i) => i !== selectedTabHiddenIndex,\n            ),\n          ].filter((tab) => tab),\n        };\n      }\n\n      return {\n        tabWidth: clamped,\n        visibleTabs: tabs.slice(0, visibleCount),\n        hiddenTabs: temporaryHiddenTabs,\n      };\n    }\n\n    return {\n      tabWidth: clamped,\n      visibleTabs: tabs,\n      hiddenTabs: [],\n    };\n  }, [actionsWidth, rootWidth, selectedTab, tabs]);\n\n  return (\n    <div\n      ref={rootForkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <div className={classes.tabsContainer}>\n        {visibleTabs.length > 0 && (\n          <HvCanvasPanelTabs\n            classes={{ list: classes.tabsList }}\n            value={selectedTab}\n            onChange={handleChangeSelectedTab}\n          >\n            {visibleTabs.map((tab, index) => {\n              const btnSelected = selectedTab === tab.id;\n              const removable = !tab.fixed;\n              return (\n                <HvCanvasPanelTab\n                  style={{\n                    width: tabWidth,\n                  }}\n                  key={tab.id}\n                  id={String(tab.id)}\n                  className={classes.tab}\n                  value={tab.id}\n                  onKeyDown={(event) =>\n                    handleKeyDownTab(event, tab.id, removable)\n                  }\n                >\n                  <div className={classes.tabContent}>\n                    {tab.icon && (\n                      <div className={classes.tabIconContainer}>{tab.icon}</div>\n                    )}\n                    {!btnSelected || disableTabEdit ? (\n                      <HvOverflowTooltip\n                        classes={{\n                          tooltipAnchor: classes.tabLabel,\n                        }}\n                        data={tab.label}\n                      />\n                    ) : (\n                      <ToolbarTabEditor\n                        classes={{\n                          label: cx(classes.tabLabel, classes.tabLabelEditor),\n                        }}\n                        value={tab.label}\n                        edit={isEditing}\n                        onEditChange={setIsEditing}\n                        onChange={(event, value) =>\n                          handleEdit(event, value, tab.id)\n                        }\n                        onBlur={(event, value) =>\n                          handleEdit(event, value, tab.id)\n                        }\n                        // We don't want the arrow keys to trigger the tab navigation\n                        onKeyDown={(e) => e.stopPropagation()}\n                      />\n                    )}\n                    {removable && (\n                      <div className={classes.closeIconContainer}>\n                        <CloseXS\n                          aria-hidden\n                          size=\"xs\"\n                          onClick={(event) => {\n                            handleDeleteTab(event, tab.id);\n\n                            // We don't want the click to also select the tab\n                            event.stopPropagation();\n                          }}\n                        />\n                      </div>\n                    )}\n                    {selectedTab !== tab.id &&\n                      visibleTabs[index + 1]?.id !== selectedTab && (\n                        <div className={classes.tabDivider} />\n                      )}\n                  </div>\n                </HvCanvasPanelTab>\n              );\n            })}\n          </HvCanvasPanelTabs>\n        )}\n        {hiddenTabs.length > 0 && (\n          <HvDropDownMenu\n            classes={{\n              container: classes.dropdownMenuContainer,\n              menuListRoot: classes.dropdownMenuListRoot,\n            }}\n            dataList={hiddenTabs}\n            icon={<MoreOptionsHorizontal />}\n            labels={{ dropdownMenu: labels.dropdownMenu }}\n            onClick={(event, value) =>\n              handleChangeSelectedTab(event, value.id ?? \"none\")\n            }\n          />\n        )}\n      </div>\n      <div ref={actionsRef} className={classes.actionsContainer}>\n        {children}\n        {!hideCreateNew && (\n          <HvButton\n            variant=\"primaryGhost\"\n            startIcon={<AddAlt />}\n            onClick={handleCreateNew}\n          >\n            {labels.create}\n          </HvButton>\n        )}\n      </div>\n    </div>\n  );\n});\n"],"names":["HvCanvasToolbarTabs"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-pentaho",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Pentaho+ React components.",
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.82.2",
-    "@hitachivantara/uikit-react-icons": "^5.13.0",
-    "@hitachivantara/uikit-react-utils": "^0.2.17",
+    "@hitachivantara/uikit-react-core": "^5.82.4",
+    "@hitachivantara/uikit-react-icons": "^5.13.1",
+    "@hitachivantara/uikit-react-utils": "^0.2.18",
     "@mui/base": "^5.0.0-beta.40",
     "react-resize-detector": "^8.1.0"
   },
@@ -43,7 +43,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "f1db991219c602f6970de5b2ca3bec1b0a395694",
+  "gitHead": "6a098fbf98283ef8dc3d57e8cf167e0499af837c",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",