@hitachivantara/uikit-react-pentaho 0.4.3 → 0.4.4

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

@@ -1,26 +1,26 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useCallback, useMemo } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useMemo } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { useDefaultProps, useLabels, useControlled, useForkRef, theme, HvOverflowTooltip, HvInlineEditor, HvIconButton, HvDropDownMenu, HvButton, uniqueId } from "@hitachivantara/uikit-react-core";
-import { Close, CloseXS, MoreOptionsHorizontal, AddAlt } from "@hitachivantara/uikit-react-icons";
-import { useClasses, ICON_WIDTH, MIN_TAB_WIDTH } from "./ToolbarTabs.styles.js";
+import { useDefaultProps, useLabels, useControlled, useForkRef, HvOverflowTooltip, HvDropDownMenu, HvButton, uniqueId, isKey } from "@hitachivantara/uikit-react-core";
+import { CloseXS, MoreOptionsHorizontal, AddAlt } from "@hitachivantara/uikit-react-icons";
+import { clamp } from "@hitachivantara/uikit-react-utils";
+import { ToolbarTabEditor } from "./ToolbarTabEditor.js";
+import { useClasses, MAX_TAB_WIDTH, MIN_TAB_WIDTH, DROPDOWN_MENU_WIDTH } from "./ToolbarTabs.styles.js";
 import { staticClasses } from "./ToolbarTabs.styles.js";
 import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
 import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
 const DEFAULT_LABELS = {
   create: "Create new",
   undefined: "Undefined",
-  close: "Close",
   dropdownMenu: "Dropdown menu"
 };
-const DROPDOWN_MENU_WIDTH = 64;
-const BORDER_WIDTH = 2;
 const HvCanvasToolbarTabs = forwardRef((props, ref) => {
   const {
     children,
     className,
     selectedTabId: selectedTabIdProp,
     icon: iconProp,
+    allowTabEdit = true,
     tabs: tabsProp,
     defaultTabs: defaultTabsProp = [],
     labels: labelsProp,
@@ -31,13 +31,6 @@ const HvCanvasToolbarTabs = forwardRef((props, ref) => {
   } = useDefaultProps("HvCanvasToolbarTabs", props);
   const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({
-    handleHeight: false,
-    refreshMode: "debounce",
-    refreshOptions: {
-      leading: true
-    }
-  });
   const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({
     handleHeight: false
   });
@@ -49,56 +42,7 @@ const HvCanvasToolbarTabs = forwardRef((props, ref) => {
     selectedTabIdProp,
     tabs?.[0]?.id ?? "none"
   );
-  const rootWidthLimitReached = useRef(false);
-  const groupTabs = useCallback(
-    (allTabs) => {
-      let fullTabWidth = MIN_TAB_WIDTH;
-      const rootScrollWidth = rootRef.current?.scrollWidth ?? 0;
-      if (rootScrollWidth - rootWidth >= 1 || rootWidthLimitReached.current) {
-        fullTabWidth = tabWidth + BORDER_WIDTH;
-        rootWidthLimitReached.current = true;
-      }
-      const totalWidth = allTabs.length * fullTabWidth + DROPDOWN_MENU_WIDTH;
-      if (tabWidth > 0 && totalWidth > rootWidth - actionsWidth) {
-        const visibleCount = Math.floor(
-          (rootWidth - actionsWidth - DROPDOWN_MENU_WIDTH) / fullTabWidth
-        );
-        const temporaryHiddenTabs = allTabs.slice(visibleCount);
-        const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(
-          (tab) => tab.id === selectedTab
-        );
-        const excludedTabIndex = visibleCount - 1;
-        const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;
-        if (shouldShuffle) {
-          return {
-            visibleTabs: [
-              ...tabs.slice(0, excludedTabIndex),
-              temporaryHiddenTabs[selectedTabHiddenIndex]
-            ].filter((tab) => tab),
-            hiddenTabs: [
-              tabs[excludedTabIndex],
-              ...temporaryHiddenTabs.filter(
-                (tab, i) => i !== selectedTabHiddenIndex
-              )
-            ].filter((tab) => tab)
-          };
-        }
-        return {
-          visibleTabs: tabs.slice(0, visibleCount),
-          hiddenTabs: temporaryHiddenTabs
-        };
-      }
-      return {
-        visibleTabs: allTabs,
-        hiddenTabs: []
-      };
-    },
-    [actionsWidth, rootRef, rootWidth, selectedTab, tabWidth, tabs]
-  );
-  const { hiddenTabs, visibleTabs } = useMemo(
-    () => groupTabs(tabs),
-    [groupTabs, tabs]
-  );
+  const [isEditing, setIsEditing] = useState(false);
   const rootForkedRef = useForkRef(ref, rootRef);
   const handleChangeTabs = (event, newTabs) => {
     setTabs(newTabs);
@@ -119,20 +63,69 @@ const HvCanvasToolbarTabs = forwardRef((props, ref) => {
     handleChangeSelectedTab(event, newTab.id);
     handleChangeTabs?.(event, newTabs);
   };
-  const handleClose = (event, tabId) => {
+  const handleEdit = (event, value, tabId) => handleChangeTabs(
+    event,
+    tabs.map((tab) => tab.id === tabId ? { ...tab, label: value } : tab)
+  );
+  const handleDeleteTab = (event, tabId) => {
     const newTabs = tabs.filter((tab) => tab.id !== tabId);
     if (tabId === selectedTab) {
       const currentIndex = tabs.findIndex((tab) => tab.id === tabId);
       const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;
       handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? "none");
     }
-    if (hiddenTabs.length === 1) rootWidthLimitReached.current = false;
     handleChangeTabs(event, newTabs);
   };
-  const handleEdit = (event, value, tabId) => handleChangeTabs(
-    event,
-    tabs.map((tab) => tab.id === tabId ? { ...tab, label: value } : tab)
-  );
+  const handleKeyDownTab = (event, tabId) => {
+    if (isKey(event, "Delete") || isKey(event, "Backspace")) {
+      handleDeleteTab(event, tabId);
+      event.stopPropagation();
+    } else if (isKey(event, "Enter")) {
+      setIsEditing(true);
+    }
+  };
+  const { tabWidth, hiddenTabs, visibleTabs } = useMemo(() => {
+    let availableWidth = rootWidth - actionsWidth;
+    let calculatedTabWidth = availableWidth / tabs.length;
+    let clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);
+    if (calculatedTabWidth < MIN_TAB_WIDTH) {
+      availableWidth -= DROPDOWN_MENU_WIDTH;
+      const visibleCount = Math.floor(availableWidth / MIN_TAB_WIDTH);
+      calculatedTabWidth = availableWidth / visibleCount;
+      clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);
+      const temporaryHiddenTabs = tabs.slice(visibleCount);
+      const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(
+        (tab) => tab.id === selectedTab
+      );
+      const excludedTabIndex = visibleCount - 1;
+      const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;
+      if (shouldShuffle) {
+        return {
+          tabWidth: clamped,
+          visibleTabs: [
+            ...tabs.slice(0, excludedTabIndex),
+            temporaryHiddenTabs[selectedTabHiddenIndex]
+          ].filter((tab) => tab),
+          hiddenTabs: [
+            tabs[excludedTabIndex],
+            ...temporaryHiddenTabs.filter(
+              (tab, i) => i !== selectedTabHiddenIndex
+            )
+          ].filter((tab) => tab)
+        };
+      }
+      return {
+        tabWidth: clamped,
+        visibleTabs: tabs.slice(0, visibleCount),
+        hiddenTabs: temporaryHiddenTabs
+      };
+    }
+    return {
+      tabWidth: clamped,
+      visibleTabs: tabs,
+      hiddenTabs: []
+    };
+  }, [actionsWidth, rootWidth, selectedTab, tabs]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -141,99 +134,74 @@ const HvCanvasToolbarTabs = forwardRef((props, ref) => {
       ...others,
       children: [
         /* @__PURE__ */ jsxs("div", { className: classes.tabsContainer, children: [
-          visibleTabs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              HvCanvasPanelTabs,
-              {
-                classes: { list: classes.tabsList },
-                value: selectedTab,
-                onChange: handleChangeSelectedTab,
-                children: visibleTabs.map((tab, index) => /* @__PURE__ */ jsx(
+          visibleTabs.length > 0 && /* @__PURE__ */ jsx(
+            HvCanvasPanelTabs,
+            {
+              classes: { list: classes.tabsList },
+              value: selectedTab,
+              onChange: handleChangeSelectedTab,
+              children: visibleTabs.map((tab, index) => {
+                const btnSelected = selectedTab === tab.id;
+                return /* @__PURE__ */ jsx(
                   HvCanvasPanelTab,
                   {
-                    ref: index === 0 ? tabRef : void 0,
+                    style: {
+                      width: tabWidth
+                    },
                     id: String(tab.id),
                     className: classes.tab,
                     value: tab.id,
-                    tabIndex: 0,
-                    "aria-label": tab.label,
+                    onKeyDown: (event) => handleKeyDownTab(event, tab.id),
                     children: /* @__PURE__ */ jsxs("div", { className: classes.tabContent, children: [
-                      /* @__PURE__ */ jsx(
-                        "div",
+                      tab.icon && /* @__PURE__ */ jsx("div", { className: classes.tabIconContainer, children: tab.icon }),
+                      !btnSelected || !allowTabEdit ? /* @__PURE__ */ jsx(
+                        HvOverflowTooltip,
+                        {
+                          classes: {
+                            tooltipAnchor: classes.tabLabel
+                          },
+                          data: tab.label
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        ToolbarTabEditor,
                         {
-                          className: cx({
-                            [classes.tabIcon]: !!tab.icon
-                          }),
-                          children: tab.icon
+                          classes: {
+                            label: cx(classes.tabLabel, classes.tabLabelEditor)
+                          },
+                          value: tab.label,
+                          edit: isEditing,
+                          onEditChange: setIsEditing,
+                          onChange: (event, value) => handleEdit(event, value, tab.id),
+                          onBlur: (event, value) => handleEdit(event, value, tab.id),
+                          onKeyDown: (e) => e.stopPropagation()
                         }
                       ),
-                      /* @__PURE__ */ jsx("div", { role: "none", children: tab.label }),
-                      /* @__PURE__ */ jsx("div", { role: "none", children: /* @__PURE__ */ jsx(Close, {}) }),
+                      /* @__PURE__ */ jsx("div", { className: classes.closeIconContainer, children: /* @__PURE__ */ jsx(
+                        CloseXS,
+                        {
+                          "aria-hidden": true,
+                          iconSize: "XS",
+                          onClick: (event) => {
+                            handleDeleteTab(event, tab.id);
+                            event.stopPropagation();
+                          }
+                        }
+                      ) }),
                       selectedTab !== tab.id && visibleTabs[index + 1]?.id !== selectedTab && /* @__PURE__ */ jsx("div", { className: classes.tabDivider })
                     ] })
                   },
                   tab.id
-                ))
-              }
-            ),
-            visibleTabs.map((tab, index) => {
-              const btnDisabled = selectedTab !== tab.id;
-              const num = index + 1;
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    // @ts-ignore
-                    "--full-tab-width": `calc(${tabWidth}px + ${BORDER_WIDTH}px)`,
-                    "--right": `calc(${num} * var(--full-tab-width))`,
-                    "--editor-width": `calc(var(--full-tab-width) - ${tab.icon ? 2 : 1} * ${ICON_WIDTH}px - ${theme.space.xs})`
-                  },
-                  children: [
-                    btnDisabled ? /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        className: classes.tabLabel,
-                        onClick: (event) => handleChangeSelectedTab(event, tab.id),
-                        "aria-label": tab.label,
-                        tabIndex: -1,
-                        children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: tab.label })
-                      }
-                    ) : /* @__PURE__ */ jsx(
-                      HvInlineEditor,
-                      {
-                        className: cx(classes.tabLabel, classes.activeTabLabel),
-                        "aria-label": tab.label,
-                        value: tab.label,
-                        buttonProps: { size: "sm" },
-                        onChange: (event, value) => handleEdit(event, value, tab.id)
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      HvIconButton,
-                      {
-                        style: {
-                          // @ts-ignore
-                          "--close-color": btnDisabled ? theme.colors.secondary_60 : theme.colors.primary
-                        },
-                        className: classes.closeButton,
-                        title: labels.close,
-                        variant: "primaryGhost",
-                        onClick: (event) => handleClose(event, tab.id),
-                        children: /* @__PURE__ */ jsx(CloseXS, {})
-                      },
-                      tab.id
-                    )
-                  ]
-                },
-                tab.id
-              );
-            })
-          ] }),
+                );
+              })
+            }
+          ),
           hiddenTabs.length > 0 && /* @__PURE__ */ jsx(
             HvDropDownMenu,
             {
-              className: classes.dropdownMenu,
+              classes: {
+                container: classes.dropdownMenuContainer,
+                menuListRoot: classes.dropdownMenuListRoot
+              },
               dataList: hiddenTabs,
               icon: /* @__PURE__ */ jsx(MoreOptionsHorizontal, {}),
               labels: { dropdownMenu: labels.dropdownMenu },

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTabs.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvIconButton,\n  HvInlineEditor,\n  HvOverflowTooltip,\n  theme,\n  uniqueId,\n  useControlled,\n  useDefaultProps,\n  useForkRef,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  AddAlt,\n  Close,\n  CloseXS,\n  MoreOptionsHorizontal,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport {\n  ICON_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  close: \"Close\",\n  dropdownMenu: \"Dropdown menu\",\n};\n\ninterface ToolbarTabsTab {\n  id: string;\n  label: string;\n  icon?: React.ReactNode;\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. If not defined, no icon is used. */\n  icon?: React.ReactNode;\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}\n\ninterface GroupedTabs {\n  hiddenTabs: ToolbarTabsTab[];\n  visibleTabs: ToolbarTabsTab[];\n}\n\nconst DROPDOWN_MENU_WIDTH = 64;\nconst BORDER_WIDTH = 2;\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    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  // Tab resize detector: to know when to use the dropdown menu\n  const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({\n    handleHeight: false,\n    refreshMode: \"debounce\",\n    refreshOptions: {\n      leading: true,\n    },\n  });\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\n  const rootWidthLimitReached = useRef(false);\n\n  const groupTabs = useCallback(\n    (allTabs: ToolbarTabsTab[]): GroupedTabs => {\n      let fullTabWidth = MIN_TAB_WIDTH;\n\n      const rootScrollWidth = rootRef.current?.scrollWidth ?? 0;\n      if (rootScrollWidth - rootWidth >= 1 || rootWidthLimitReached.current) {\n        fullTabWidth = tabWidth + BORDER_WIDTH;\n        rootWidthLimitReached.current = true;\n      }\n\n      const totalWidth = allTabs.length * fullTabWidth + DROPDOWN_MENU_WIDTH;\n\n      if (tabWidth > 0 && totalWidth > rootWidth - actionsWidth) {\n        const visibleCount = Math.floor(\n          (rootWidth - actionsWidth - DROPDOWN_MENU_WIDTH) / fullTabWidth,\n        );\n        const temporaryHiddenTabs = allTabs.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            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        return {\n          visibleTabs: tabs.slice(0, visibleCount),\n          hiddenTabs: temporaryHiddenTabs,\n        };\n      }\n      return {\n        visibleTabs: allTabs,\n        hiddenTabs: [],\n      };\n    },\n    [actionsWidth, rootRef, rootWidth, selectedTab, tabWidth, tabs],\n  );\n\n  const { hiddenTabs, visibleTabs } = useMemo(\n    () => groupTabs(tabs),\n    [groupTabs, tabs],\n  );\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 handleClose = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    tabId: string,\n  ) => {\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    if (hiddenTabs.length === 1) rootWidthLimitReached.current = false;\n\n    handleChangeTabs(event, newTabs);\n  };\n\n  const handleEdit = (\n    event: React.SyntheticEvent,\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  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          <>\n            <HvCanvasPanelTabs\n              classes={{ list: classes.tabsList }}\n              value={selectedTab}\n              onChange={handleChangeSelectedTab}\n            >\n              {visibleTabs.map((tab, index) => (\n                <HvCanvasPanelTab\n                  key={tab.id}\n                  ref={index === 0 ? tabRef : undefined}\n                  id={String(tab.id)}\n                  className={classes.tab}\n                  value={tab.id}\n                  tabIndex={0}\n                  aria-label={tab.label}\n                >\n                  <div className={classes.tabContent}>\n                    <div\n                      className={cx({\n                        [classes.tabIcon]: !!tab.icon,\n                      })}\n                    >\n                      {tab.icon}\n                    </div>\n\n                    {/* Invisible components added in order for the tab width to go between max/min as some inner components are absolutely positioned */}\n                    <div role=\"none\">{tab.label}</div>\n                    <div role=\"none\">\n                      <Close />\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            </HvCanvasPanelTabs>\n            {/* For accessibility purposes, interactive elements cannot be children of a tablist or tab so they are rendered as HvCanvasTabs sibling. */}\n            {visibleTabs.map((tab, index) => {\n              const btnDisabled = selectedTab !== tab.id;\n              const num = index + 1;\n              return (\n                <div\n                  key={tab.id}\n                  style={{\n                    // @ts-ignore\n                    \"--full-tab-width\": `calc(${tabWidth}px + ${BORDER_WIDTH}px)`,\n                    \"--right\": `calc(${num} * var(--full-tab-width))`,\n                    \"--editor-width\": `calc(var(--full-tab-width) - ${tab.icon ? 2 : 1} * ${ICON_WIDTH}px - ${theme.space.xs})`,\n                  }}\n                >\n                  {btnDisabled ? (\n                    <button\n                      type=\"button\"\n                      className={classes.tabLabel}\n                      onClick={(event) =>\n                        handleChangeSelectedTab(event, tab.id)\n                      }\n                      aria-label={tab.label}\n                      tabIndex={-1}\n                    >\n                      <HvOverflowTooltip data={tab.label} />\n                    </button>\n                  ) : (\n                    <HvInlineEditor\n                      className={cx(classes.tabLabel, classes.activeTabLabel)}\n                      aria-label={tab.label}\n                      value={tab.label}\n                      buttonProps={{ size: \"sm\" }}\n                      onChange={(event, value) =>\n                        handleEdit(event, value, tab.id)\n                      }\n                    />\n                  )}\n                  <HvIconButton\n                    key={tab.id}\n                    style={{\n                      // @ts-ignore\n                      \"--close-color\": btnDisabled\n                        ? theme.colors.secondary_60\n                        : theme.colors.primary,\n                    }}\n                    className={classes.closeButton}\n                    title={labels.close}\n                    variant=\"primaryGhost\"\n                    onClick={(event: React.MouseEvent<HTMLButtonElement>) =>\n                      handleClose(event, tab.id)\n                    }\n                  >\n                    <CloseXS />\n                  </HvIconButton>\n                </div>\n              );\n            })}\n          </>\n        )}\n        {hiddenTabs.length > 0 && (\n          <HvDropDownMenu\n            className={classes.dropdownMenu}\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        <HvButton\n          variant=\"primaryGhost\"\n          startIcon={<AddAlt />}\n          onClick={handleCreateNew}\n        >\n          {labels.create}\n        </HvButton>\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}\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. If not defined, no icon is used. */\n  icon?: React.ReactNode;\n  /** Defines whether or not the tabs are editable. */\n  allowTabEdit?: 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}\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    allowTabEdit = true,\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 = (event: React.KeyboardEvent, tabId: string) => {\n    if (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              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) => handleKeyDownTab(event, tab.id)}\n                >\n                  <div className={classes.tabContent}>\n                    {tab.icon && (\n                      <div className={classes.tabIconContainer}>{tab.icon}</div>\n                    )}\n                    {!btnSelected || !allowTabEdit ? (\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                    <div className={classes.closeIconContainer}>\n                      <CloseXS\n                        aria-hidden\n                        iconSize=\"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                    {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        <HvButton\n          variant=\"primaryGhost\"\n          startIcon={<AddAlt />}\n          onClick={handleCreateNew}\n        >\n          {labels.create}\n        </HvButton>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}

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

@@ -1,10 +1,14 @@
 import { tabClasses } from "@mui/base/Tab";
-import { createClasses, theme, baseInputClasses } from "@hitachivantara/uikit-react-core";
-const ICON_WIDTH = 32;
+import { theme, createClasses } from "@hitachivantara/uikit-react-core";
+import { toolbarTabEditorClasses as staticClasses$1 } from "./ToolbarTabEditor.js";
 const MIN_TAB_WIDTH = 120;
 const MAX_TAB_WIDTH = 220;
+const DROPDOWN_MENU_WIDTH = 64;
 const TAB_HEIGHT = 32;
-const TAB_LABEL_HEIGHT = 24;
+const CLOSE_ICON_SIZE = 32;
+const TAB_ICON_SIZE = 16;
+const TAB_PADDING = theme.space.xs;
+const TAB_COLOR = theme.palette.blue[50];
 const { staticClasses, useClasses } = createClasses(
   "HvCanvasToolbarTabs",
   {
@@ -16,85 +20,77 @@ const { staticClasses, useClasses } = createClasses(
       backgroundColor: theme.colors.atmo1,
       boxShadow: theme.colors.shadow,
       borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,
-      gap: theme.space.sm,
       transition: "width 0.3s ease"
     },
     tabsContainer: {
-      position: "relative",
       display: "flex"
     },
     tabsList: {
       height: TAB_HEIGHT,
-      background: theme.colors.atmo1
+      background: theme.colors.atmo1,
+      borderEndStartRadius: theme.radii.base
     },
     tab: {
-      width: `clamp(${MIN_TAB_WIDTH}px, 100%, ${MAX_TAB_WIDTH}px)`,
+      boxSizing: "border-box",
       border: `1px solid ${theme.colors.atmo1}`,
       borderBottom: "none",
       borderRadius: "10px 10px 0 0",
       boxShadow: "none",
       backgroundColor: theme.colors.atmo1,
+      "&:first-of-type": { borderEndStartRadius: theme.radii.base },
       [`&.${tabClasses.selected}`]: {
         color: theme.colors.primary,
-        backgroundColor: theme.colors.containerBackgroundHover,
+        backgroundColor: TAB_COLOR,
         borderColor: theme.colors.atmo4
+      },
+      [`&:hover:not(.${tabClasses.selected}), &:focus:not(.${tabClasses.selected})`]: {
+        borderRadius: 0,
+        backgroundColor: TAB_COLOR,
+        borderColor: TAB_COLOR,
+        "&:first-of-type": { borderEndStartRadius: theme.radii.base }
+      },
+      // Hide icon when editor is hovered and focused
+      [`&:has($tabLabelEditor:hover) $tabIconContainer, &:has(.${staticClasses$1.edit}) $tabIconContainer`]: {
+        display: "none"
+      },
+      // Hide close when editor is focused
+      [`&:has(.${staticClasses$1.edit}) $closeIconContainer`]: {
+        display: "none"
+      }
+    },
+    tabLabel: {
+      "&:not($tabLabelEditor)": {
+        margin: theme.spacing(0, "xs")
       }
     },
+    tabLabelEditor: {
+      color: theme.colors.primary
+    },
     tabContent: {
+      position: "relative",
       height: TAB_HEIGHT,
       display: "flex",
-      justifyContent: "space-between",
-      position: "relative",
+      justifyContent: "flex-start",
+      alignItems: "center",
       width: "100%",
-      padding: theme.space.xs,
-      "& > div:first-of-type:not($tabIcon)": {
-        visibility: "hidden"
-      },
-      "& > div:nth-of-type(2)": {
-        visibility: "hidden",
-        minWidth: `calc(${MIN_TAB_WIDTH}px - ${theme.space.xs} - 2 * ${ICON_WIDTH}px)`,
-        maxWidth: `calc(${MAX_TAB_WIDTH}px - ${theme.space.xs} - 2 * ${ICON_WIDTH}px)`
-      },
-      "& > div:nth-of-type(3)": {
-        visibility: "hidden",
-        marginRight: `calc(-1 * ${theme.space.xs})`
-      }
+      padding: TAB_PADDING
     },
-    tabIcon: {
+    tabIconContainer: {
       display: "flex",
       justifyContent: "center",
-      alignItems: "center"
-    },
-    closeButton: {
-      position: "absolute",
-      top: 0,
-      right: "calc(100% - var(--right))",
-      color: "var(--close-color)"
-    },
-    tabLabel: {
-      position: "absolute",
-      width: "var(--editor-width)",
-      right: `calc(100% - var(--right) + ${ICON_WIDTH}px)`,
-      height: TAB_LABEL_HEIGHT,
-      top: 4.5,
-      "&:not($activeTabLabel)": {
-        ...theme.typography.body,
-        color: theme.colors.secondary_60,
-        background: "none",
-        cursor: "pointer"
-      }
+      alignItems: "center",
+      width: TAB_ICON_SIZE
     },
-    activeTabLabel: {
-      "& button": {
-        height: TAB_LABEL_HEIGHT,
-        minHeight: TAB_LABEL_HEIGHT,
-        backgroundColor: "transparent",
-        "& p": { ...theme.typography.label, color: theme.colors.primary },
-        "& span": { display: "none" }
-      },
-      [`&& .${baseInputClasses.inputRoot}`]: {
-        height: TAB_LABEL_HEIGHT,
-        minHeight: TAB_LABEL_HEIGHT
+    closeIconContainer: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      marginLeft: "auto",
+      marginRight: theme.spacing(-1),
+      width: CLOSE_ICON_SIZE,
+      "&:hover": {
+        backgroundColor: theme.colors.containerBackgroundHover,
+        borderRadius: theme.radii.circle
       }
     },
     tabDivider: {
@@ -110,13 +106,19 @@ const { staticClasses, useClasses } = createClasses(
       alignItems: "center",
       gap: theme.space.sm
     },
-    dropdownMenu: {
-      margin: theme.spacing(0, "sm")
+    dropdownMenuContainer: {
+      width: DROPDOWN_MENU_WIDTH,
+      display: "flex",
+      justifyContent: "center"
+    },
+    dropdownMenuListRoot: {
+      maxHeight: 220
     }
   }
 );
 export {
-  ICON_WIDTH,
+  DROPDOWN_MENU_WIDTH,
+  MAX_TAB_WIDTH,
   MIN_TAB_WIDTH,
   staticClasses,
   useClasses

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTabs.styles.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport {\n  baseInputClasses,\n  createClasses,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const ICON_WIDTH = 32;\nexport const MIN_TAB_WIDTH = 120;\nconst MAX_TAB_WIDTH = 220;\nconst TAB_HEIGHT = 32;\nconst TAB_LABEL_HEIGHT = 24;\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasToolbarTabs\",\n  {\n    root: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n      width: \"100%\",\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n      gap: theme.space.sm,\n      transition: \"width 0.3s ease\",\n    },\n    tabsContainer: {\n      position: \"relative\",\n      display: \"flex\",\n    },\n    tabsList: {\n      height: TAB_HEIGHT,\n      background: theme.colors.atmo1,\n    },\n    tab: {\n      width: `clamp(${MIN_TAB_WIDTH}px, 100%, ${MAX_TAB_WIDTH}px)`,\n      border: `1px solid ${theme.colors.atmo1}`,\n      borderBottom: \"none\",\n      borderRadius: \"10px 10px 0 0\",\n      boxShadow: \"none\",\n      backgroundColor: theme.colors.atmo1,\n      [`&.${tabClasses.selected}`]: {\n        color: theme.colors.primary,\n        backgroundColor: theme.colors.containerBackgroundHover,\n        borderColor: theme.colors.atmo4,\n      },\n    },\n    tabContent: {\n      height: TAB_HEIGHT,\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      position: \"relative\",\n      width: \"100%\",\n      padding: theme.space.xs,\n      \"& > div:first-of-type:not($tabIcon)\": {\n        visibility: \"hidden\",\n      },\n      \"& > div:nth-of-type(2)\": {\n        visibility: \"hidden\",\n        minWidth: `calc(${MIN_TAB_WIDTH}px - ${theme.space.xs} - 2 * ${ICON_WIDTH}px)`,\n        maxWidth: `calc(${MAX_TAB_WIDTH}px - ${theme.space.xs} - 2 * ${ICON_WIDTH}px)`,\n      },\n      \"& > div:nth-of-type(3)\": {\n        visibility: \"hidden\",\n        marginRight: `calc(-1 * ${theme.space.xs})`,\n      },\n    },\n    tabIcon: {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n    },\n    closeButton: {\n      position: \"absolute\",\n      top: 0,\n      right: \"calc(100% - var(--right))\",\n      color: \"var(--close-color)\",\n    },\n    tabLabel: {\n      position: \"absolute\",\n      width: \"var(--editor-width)\",\n      right: `calc(100% - var(--right) + ${ICON_WIDTH}px)`,\n      height: TAB_LABEL_HEIGHT,\n      top: 4.5,\n      \"&:not($activeTabLabel)\": {\n        ...theme.typography.body,\n        color: theme.colors.secondary_60,\n        background: \"none\",\n        cursor: \"pointer\",\n      },\n    },\n    activeTabLabel: {\n      \"& button\": {\n        height: TAB_LABEL_HEIGHT,\n        minHeight: TAB_LABEL_HEIGHT,\n        backgroundColor: \"transparent\",\n        \"& p\": { ...theme.typography.label, color: theme.colors.primary },\n        \"& span\": { display: \"none\" },\n      },\n      [`&& .${baseInputClasses.inputRoot}`]: {\n        height: TAB_LABEL_HEIGHT,\n        minHeight: TAB_LABEL_HEIGHT,\n      },\n    },\n    tabDivider: {\n      position: \"absolute\",\n      height: 18,\n      width: 1,\n      backgroundColor: theme.colors.atmo3,\n      right: 0,\n    },\n    actionsContainer: {\n      display: \"flex\",\n      justifyContent: \"flex-end\",\n      alignItems: \"center\",\n      gap: theme.space.sm,\n    },\n    dropdownMenu: {\n      margin: theme.spacing(0, \"sm\"),\n    },\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ToolbarTabs.styles.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { toolbarTabEditorClasses } from \"./ToolbarTabEditor\";\n\nexport const MIN_TAB_WIDTH = 120;\nexport const MAX_TAB_WIDTH = 220;\nexport const DROPDOWN_MENU_WIDTH = 64;\nconst TAB_HEIGHT = 32;\nconst CLOSE_ICON_SIZE = 32;\nconst TAB_ICON_SIZE = 16;\nconst TAB_PADDING = theme.space.xs;\nconst TAB_COLOR = theme.palette.blue[50]; // TODO - dark theme color\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasToolbarTabs\",\n  {\n    root: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n      width: \"100%\",\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n      transition: \"width 0.3s ease\",\n    },\n    tabsContainer: {\n      display: \"flex\",\n    },\n    tabsList: {\n      height: TAB_HEIGHT,\n      background: theme.colors.atmo1,\n      borderEndStartRadius: theme.radii.base,\n    },\n    tab: {\n      boxSizing: \"border-box\",\n      border: `1px solid ${theme.colors.atmo1}`,\n      borderBottom: \"none\",\n      borderRadius: \"10px 10px 0 0\",\n      boxShadow: \"none\",\n      backgroundColor: theme.colors.atmo1,\n      \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n      [`&.${tabClasses.selected}`]: {\n        color: theme.colors.primary,\n        backgroundColor: TAB_COLOR,\n        borderColor: theme.colors.atmo4,\n      },\n      [`&:hover:not(.${tabClasses.selected}), &:focus:not(.${tabClasses.selected})`]:\n        {\n          borderRadius: 0,\n          backgroundColor: TAB_COLOR,\n          borderColor: TAB_COLOR,\n          \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n        },\n\n      // Hide icon when editor is hovered and focused\n      [`&:has($tabLabelEditor:hover) $tabIconContainer, &:has(.${toolbarTabEditorClasses.edit}) $tabIconContainer`]:\n        {\n          display: \"none\",\n        },\n      // Hide close when editor is focused\n      [`&:has(.${toolbarTabEditorClasses.edit}) $closeIconContainer`]: {\n        display: \"none\",\n      },\n    },\n    tabLabel: {\n      \"&:not($tabLabelEditor)\": {\n        margin: theme.spacing(0, \"xs\"),\n      },\n    },\n    tabLabelEditor: {\n      color: theme.colors.primary,\n    },\n    tabContent: {\n      position: \"relative\",\n      height: TAB_HEIGHT,\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n      width: \"100%\",\n      padding: TAB_PADDING,\n    },\n    tabIconContainer: {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      width: TAB_ICON_SIZE,\n    },\n    closeIconContainer: {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      marginLeft: \"auto\",\n      marginRight: theme.spacing(-1),\n      width: CLOSE_ICON_SIZE,\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n        borderRadius: theme.radii.circle,\n      },\n    },\n    tabDivider: {\n      position: \"absolute\",\n      height: 18,\n      width: 1,\n      backgroundColor: theme.colors.atmo3,\n      right: 0,\n    },\n    actionsContainer: {\n      display: \"flex\",\n      justifyContent: \"flex-end\",\n      alignItems: \"center\",\n      gap: theme.space.sm,\n    },\n    dropdownMenuContainer: {\n      width: DROPDOWN_MENU_WIDTH,\n      display: \"flex\",\n      justifyContent: \"center\",\n    },\n    dropdownMenuListRoot: {\n      maxHeight: 220,\n    },\n  },\n);\n"],"names":["toolbarTabEditorClasses"],"mappings":"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"}