@hitachivantara/uikit-react-pentaho 6.0.13 → 6.0.14

package/dist/Canvas/ToolbarTabs/ToolbarTabs.js

@@ -1,232 +1,178 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useMemo } from "react";
+import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
+import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
+import { ToolbarTabEditor } from "./ToolbarTabEditor.js";
+import { useClasses } from "./ToolbarTabs.styles.js";
+import { forwardRef, useMemo, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { useDefaultProps, useLabels, useControlled, useForkRef, HvOverflowTooltip, HvDropDownMenu, HvButton, isKey, uniqueId } from "@hitachivantara/uikit-react-core";
-import { CloseXS, MoreOptionsHorizontal, AddAlt } from "@hitachivantara/uikit-react-icons";
+import { HvButton, HvDropDownMenu, HvOverflowTooltip, isKey, uniqueId, useControlled, useDefaultProps, useForkRef, useLabels } from "@hitachivantara/uikit-react-core";
 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",
-  dropdownMenu: "Dropdown menu"
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AddAlt, CloseXS, MoreOptionsHorizontal } from "@hitachivantara/uikit-react-icons";
+//#region src/Canvas/ToolbarTabs/ToolbarTabs.tsx
+var DEFAULT_LABELS = {
+	create: "Create new",
+	undefined: "Undefined",
+	dropdownMenu: "Dropdown menu"
 };
-const HvCanvasToolbarTabs = forwardRef(function HvCanvasToolbarTabs2(props, ref) {
-  const {
-    children,
-    className,
-    selectedTabId: selectedTabIdProp,
-    icon: iconProp,
-    disableTabEdit = false,
-    hideCreateNew = false,
-    tabs: tabsProp,
-    defaultTabs: defaultTabsProp = [],
-    labels: labelsProp,
-    classes: classesProp,
-    onTabChange: onTabChangeProp,
-    onChange: onChangeProp,
-    ...others
-  } = useDefaultProps("HvCanvasToolbarTabs", props);
-  const { classes, cx } = useClasses(classesProp);
-  const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({
-    handleHeight: false
-  });
-  const { width: rootWidth = 0, ref: rootRef } = useResizeDetector({
-    handleHeight: false
-  });
-  const [tabs, setTabs] = useControlled(tabsProp, defaultTabsProp);
-  const [selectedTab, setSelectedTab] = useControlled(
-    selectedTabIdProp,
-    tabs?.[0]?.id ?? "none"
-  );
-  const [isEditing, setIsEditing] = useState(false);
-  const rootForkedRef = useForkRef(ref, rootRef);
-  const handleChangeTabs = (event, newTabs) => {
-    setTabs(newTabs);
-    onChangeProp?.(event, newTabs);
-  };
-  const handleChangeSelectedTab = (event, value) => {
-    setSelectedTab(String(value));
-    onTabChangeProp?.(event, String(value));
-  };
-  const handleCreateNew = (event) => {
-    const newTabs = [...tabs];
-    const newTab = {
-      id: uniqueId(),
-      label: `${labels.undefined} ${newTabs.length + 1}`,
-      icon: iconProp
-    };
-    newTabs.push(newTab);
-    handleChangeSelectedTab(event, newTab.id);
-    handleChangeTabs?.(event, newTabs);
-  };
-  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");
-    }
-    handleChangeTabs(event, newTabs);
-  };
-  const handleKeyDownTab = (event, tabId, removable) => {
-    if (removable && (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(Boolean),
-          hiddenTabs: [
-            tabs[excludedTabIndex],
-            ...temporaryHiddenTabs.filter(
-              (tab, i) => i !== selectedTabHiddenIndex
-            )
-          ].filter(Boolean)
-        };
-      }
-      return {
-        tabWidth: clamped,
-        visibleTabs: tabs.slice(0, visibleCount),
-        hiddenTabs: temporaryHiddenTabs
-      };
-    }
-    return {
-      tabWidth: clamped,
-      visibleTabs: tabs,
-      hiddenTabs: []
-    };
-  }, [actionsWidth, rootWidth, selectedTab, tabs]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: rootForkedRef,
-      className: cx(classes.root, className),
-      ...others,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: classes.tabsContainer, children: [
-          visibleTabs.length > 0 && /* @__PURE__ */ jsx(
-            HvCanvasPanelTabs,
-            {
-              classes: { list: classes.tabsList },
-              value: selectedTab,
-              onChange: handleChangeSelectedTab,
-              children: visibleTabs.map((tab, index) => {
-                const btnSelected = selectedTab === tab.id;
-                const removable = !tab.fixed;
-                return /* @__PURE__ */ jsxs(
-                  HvCanvasPanelTab,
-                  {
-                    style: {
-                      width: tabWidth
-                    },
-                    id: String(tab.id),
-                    classes: { root: classes.tab, tab: classes.tabContent },
-                    value: tab.id,
-                    onKeyDown: (event) => handleKeyDownTab(event, tab.id, removable),
-                    children: [
-                      tab.icon && /* @__PURE__ */ jsx("div", { className: classes.tabIconContainer, children: tab.icon }),
-                      !btnSelected || disableTabEdit ? /* @__PURE__ */ jsx(
-                        HvOverflowTooltip,
-                        {
-                          classes: {
-                            tooltipAnchor: classes.tabLabel
-                          },
-                          data: tab.label
-                        }
-                      ) : /* @__PURE__ */ jsx(
-                        ToolbarTabEditor,
-                        {
-                          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()
-                        }
-                      ),
-                      removable && /* @__PURE__ */ jsx("div", { className: classes.closeIconContainer, children: /* @__PURE__ */ jsx(
-                        CloseXS,
-                        {
-                          "aria-hidden": true,
-                          size: "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
-                );
-              })
-            }
-          ),
-          hiddenTabs.length > 0 && /* @__PURE__ */ jsx("div", { className: classes.dropdownMenuContainer, children: /* @__PURE__ */ jsx(
-            HvDropDownMenu,
-            {
-              classes: {
-                menuListRoot: classes.dropdownMenuListRoot
-              },
-              dataList: hiddenTabs,
-              icon: /* @__PURE__ */ jsx(MoreOptionsHorizontal, {}),
-              labels: { dropdownMenu: labels.dropdownMenu },
-              onClick: (event, value) => handleChangeSelectedTab(event, value.id ?? "none")
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { ref: actionsRef, className: classes.actionsContainer, children: [
-          children,
-          !hideCreateNew && /* @__PURE__ */ jsx(
-            HvButton,
-            {
-              variant: "primaryGhost",
-              startIcon: /* @__PURE__ */ jsx(AddAlt, {}),
-              onClick: handleCreateNew,
-              children: labels.create
-            }
-          )
-        ] })
-      ]
-    }
-  );
+/**
+* A toolbar tabs component to use in a canvas context.
+*/
+var HvCanvasToolbarTabs = forwardRef(function HvCanvasToolbarTabs(props, ref) {
+	const { children, className, selectedTabId: selectedTabIdProp, icon: iconProp, disableTabEdit = false, hideCreateNew = false, tabs: tabsProp, defaultTabs: defaultTabsProp = [], labels: labelsProp, classes: classesProp, onTabChange: onTabChangeProp, onChange: onChangeProp, ...others } = useDefaultProps("HvCanvasToolbarTabs", props);
+	const { classes, cx } = useClasses(classesProp);
+	const labels = useLabels(DEFAULT_LABELS, labelsProp);
+	const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({ handleHeight: false });
+	const { width: rootWidth = 0, ref: rootRef } = useResizeDetector({ handleHeight: false });
+	const [tabs, setTabs] = useControlled(tabsProp, defaultTabsProp);
+	const [selectedTab, setSelectedTab] = useControlled(selectedTabIdProp, tabs?.[0]?.id ?? "none");
+	const [isEditing, setIsEditing] = useState(false);
+	const rootForkedRef = useForkRef(ref, rootRef);
+	const handleChangeTabs = (event, newTabs) => {
+		setTabs(newTabs);
+		onChangeProp?.(event, newTabs);
+	};
+	const handleChangeSelectedTab = (event, value) => {
+		setSelectedTab(String(value));
+		onTabChangeProp?.(event, String(value));
+	};
+	const handleCreateNew = (event) => {
+		const newTabs = [...tabs];
+		const newTab = {
+			id: uniqueId(),
+			label: `${labels.undefined} ${newTabs.length + 1}`,
+			icon: iconProp
+		};
+		newTabs.push(newTab);
+		handleChangeSelectedTab(event, newTab.id);
+		handleChangeTabs?.(event, newTabs);
+	};
+	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);
+			handleChangeSelectedTab(event, newTabs[currentIndex - 1 < 0 ? 0 : currentIndex - 1]?.id ?? "none");
+		}
+		handleChangeTabs(event, newTabs);
+	};
+	const handleKeyDownTab = (event, tabId, removable) => {
+		if (removable && (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, 220, 120);
+		if (calculatedTabWidth < 120) {
+			availableWidth -= 64;
+			const visibleCount = Math.floor(availableWidth / 120);
+			calculatedTabWidth = availableWidth / visibleCount;
+			clamped = clamp(calculatedTabWidth, 220, 120);
+			const temporaryHiddenTabs = tabs.slice(visibleCount);
+			const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex((tab) => tab.id === selectedTab);
+			const excludedTabIndex = visibleCount - 1;
+			if (selectedTabHiddenIndex !== -1 && visibleCount > 0) return {
+				tabWidth: clamped,
+				visibleTabs: [...tabs.slice(0, excludedTabIndex), temporaryHiddenTabs[selectedTabHiddenIndex]].filter(Boolean),
+				hiddenTabs: [tabs[excludedTabIndex], ...temporaryHiddenTabs.filter((tab, i) => i !== selectedTabHiddenIndex)].filter(Boolean)
+			};
+			return {
+				tabWidth: clamped,
+				visibleTabs: tabs.slice(0, visibleCount),
+				hiddenTabs: temporaryHiddenTabs
+			};
+		}
+		return {
+			tabWidth: clamped,
+			visibleTabs: tabs,
+			hiddenTabs: []
+		};
+	}, [
+		actionsWidth,
+		rootWidth,
+		selectedTab,
+		tabs
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootForkedRef,
+		className: cx(classes.root, className),
+		...others,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classes.tabsContainer,
+			children: [visibleTabs.length > 0 && /* @__PURE__ */ jsx(HvCanvasPanelTabs, {
+				classes: { list: classes.tabsList },
+				value: selectedTab,
+				onChange: handleChangeSelectedTab,
+				children: visibleTabs.map((tab, index) => {
+					const btnSelected = selectedTab === tab.id;
+					const removable = !tab.fixed;
+					return /* @__PURE__ */ jsxs(HvCanvasPanelTab, {
+						style: { width: tabWidth },
+						id: String(tab.id),
+						classes: {
+							root: classes.tab,
+							tab: classes.tabContent
+						},
+						value: tab.id,
+						onKeyDown: (event) => handleKeyDownTab(event, tab.id, removable),
+						children: [
+							tab.icon && /* @__PURE__ */ jsx("div", {
+								className: classes.tabIconContainer,
+								children: tab.icon
+							}),
+							!btnSelected || disableTabEdit ? /* @__PURE__ */ jsx(HvOverflowTooltip, {
+								classes: { tooltipAnchor: classes.tabLabel },
+								data: tab.label
+							}) : /* @__PURE__ */ jsx(ToolbarTabEditor, {
+								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()
+							}),
+							removable && /* @__PURE__ */ jsx("div", {
+								className: classes.closeIconContainer,
+								children: /* @__PURE__ */ jsx(CloseXS, {
+									"aria-hidden": true,
+									size: "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);
+				})
+			}), hiddenTabs.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: classes.dropdownMenuContainer,
+				children: /* @__PURE__ */ jsx(HvDropDownMenu, {
+					classes: { menuListRoot: classes.dropdownMenuListRoot },
+					dataList: hiddenTabs,
+					icon: /* @__PURE__ */ jsx(MoreOptionsHorizontal, {}),
+					labels: { dropdownMenu: labels.dropdownMenu },
+					onClick: (event, value) => handleChangeSelectedTab(event, value.id ?? "none")
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: actionsRef,
+			className: classes.actionsContainer,
+			children: [children, !hideCreateNew && /* @__PURE__ */ jsx(HvButton, {
+				variant: "primaryGhost",
+				startIcon: /* @__PURE__ */ jsx(AddAlt, {}),
+				onClick: handleCreateNew,
+				children: labels.create
+			})]
+		})]
+	});
 });
-export {
-  HvCanvasToolbarTabs,
-  staticClasses as canvasToolbarTabsClasses
-};
+//#endregion
+export { HvCanvasToolbarTabs };

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

@@ -1,130 +1,99 @@
-import { tabClasses } from "@mui/base";
+import { staticClasses as staticClasses$1 } from "./ToolbarTabEditor.js";
 import { createClasses, theme } 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 CLOSE_ICON_SIZE = 32;
-const TAB_ICON_SIZE = 16;
-const TAB_COLOR = theme.mix("primaryDimmed", 0.5, "dimmer");
-const { staticClasses, useClasses } = createClasses(
-  "HvCanvasToolbarTabs",
-  {
-    root: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      width: "100%",
-      backgroundColor: theme.colors.bgContainer,
-      boxShadow: theme.colors.shadow,
-      borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,
-      transition: "width 0.3s ease",
-      height: TAB_HEIGHT
-    },
-    tabsContainer: {
-      display: "flex"
-    },
-    tabsList: {
-      height: TAB_HEIGHT,
-      backgroundColor: theme.colors.bgContainer,
-      borderEndStartRadius: theme.radii.base
-    },
-    tab: {
-      boxSizing: "border-box",
-      border: `1px solid transparent`,
-      borderBottom: "none",
-      borderRadius: "10px 10px 0 0",
-      boxShadow: "none",
-      backgroundColor: "inherit",
-      "&:first-of-type": { borderEndStartRadius: theme.radii.base },
-      [`:has(.${tabClasses.selected})`]: {
-        color: theme.colors.primary,
-        backgroundColor: TAB_COLOR,
-        borderColor: theme.colors.border
-      },
-      [`:not(:has(.${tabClasses.selected}))`]: {
-        "&:hover,&:focus": {
-          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: "flex-start",
-      alignItems: "center",
-      width: "100%",
-      padding: theme.space.xs,
-      [`&.${tabClasses.selected}`]: {
-        color: theme.colors.primary
-      }
-    },
-    tabIconContainer: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      width: TAB_ICON_SIZE
-    },
-    closeIconContainer: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      marginLeft: "auto",
-      marginRight: theme.spacing(-1),
-      width: CLOSE_ICON_SIZE,
-      "&:hover": {
-        backgroundColor: theme.colors.bgHover,
-        borderRadius: theme.radii.full
-      }
-    },
-    tabDivider: {
-      position: "absolute",
-      height: 18,
-      width: 1,
-      backgroundColor: theme.colors.bgPageSecondary,
-      right: 0
-    },
-    actionsContainer: {
-      display: "flex",
-      justifyContent: "flex-end",
-      alignItems: "center",
-      gap: theme.space.sm
-    },
-    dropdownMenuContainer: {
-      width: DROPDOWN_MENU_WIDTH,
-      display: "flex",
-      justifyContent: "center"
-    },
-    dropdownMenuListRoot: {
-      maxHeight: 220
-    }
-  }
-);
-export {
-  DROPDOWN_MENU_WIDTH,
-  MAX_TAB_WIDTH,
-  MIN_TAB_WIDTH,
-  staticClasses,
-  useClasses
-};
+import { tabClasses } from "@mui/base";
+var TAB_HEIGHT = 32;
+var CLOSE_ICON_SIZE = 32;
+var TAB_ICON_SIZE = 16;
+var TAB_COLOR = theme.mix("primaryDimmed", .5, "dimmer");
+var { staticClasses, useClasses } = createClasses("HvCanvasToolbarTabs", {
+	root: {
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center",
+		width: "100%",
+		backgroundColor: theme.colors.bgContainer,
+		boxShadow: theme.colors.shadow,
+		borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,
+		transition: "width 0.3s ease",
+		height: TAB_HEIGHT
+	},
+	tabsContainer: { display: "flex" },
+	tabsList: {
+		height: TAB_HEIGHT,
+		backgroundColor: theme.colors.bgContainer,
+		borderEndStartRadius: theme.radii.base
+	},
+	tab: {
+		boxSizing: "border-box",
+		border: `1px solid transparent`,
+		borderBottom: "none",
+		borderRadius: "10px 10px 0 0",
+		boxShadow: "none",
+		backgroundColor: "inherit",
+		"&:first-of-type": { borderEndStartRadius: theme.radii.base },
+		[`:has(.${tabClasses.selected})`]: {
+			color: theme.colors.primary,
+			backgroundColor: TAB_COLOR,
+			borderColor: theme.colors.border
+		},
+		[`:not(:has(.${tabClasses.selected}))`]: { "&:hover,&:focus": {
+			borderRadius: 0,
+			backgroundColor: TAB_COLOR,
+			borderColor: TAB_COLOR,
+			"&:first-of-type": { borderEndStartRadius: theme.radii.base }
+		} },
+		[`&:has($tabLabelEditor:hover) $tabIconContainer, &:has(.${staticClasses$1.edit}) $tabIconContainer`]: { display: "none" },
+		[`&: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: "flex-start",
+		alignItems: "center",
+		width: "100%",
+		padding: theme.space.xs,
+		[`&.${tabClasses.selected}`]: { color: theme.colors.primary }
+	},
+	tabIconContainer: {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		width: TAB_ICON_SIZE
+	},
+	closeIconContainer: {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		marginLeft: "auto",
+		marginRight: theme.spacing(-1),
+		width: CLOSE_ICON_SIZE,
+		"&:hover": {
+			backgroundColor: theme.colors.bgHover,
+			borderRadius: theme.radii.full
+		}
+	},
+	tabDivider: {
+		position: "absolute",
+		height: 18,
+		width: 1,
+		backgroundColor: theme.colors.bgPageSecondary,
+		right: 0
+	},
+	actionsContainer: {
+		display: "flex",
+		justifyContent: "flex-end",
+		alignItems: "center",
+		gap: theme.space.sm
+	},
+	dropdownMenuContainer: {
+		width: 64,
+		display: "flex",
+		justifyContent: "center"
+	},
+	dropdownMenuListRoot: { maxHeight: 220 }
+});
+//#endregion
+export { staticClasses, useClasses };