@wandelbots/wandelbots-js-react-components 2.54.2 → 2.54.3-pr.fix-dom-leak.403.8043b0b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.54.2",
+  "version": "2.54.3-pr.fix-dom-leak.403.8043b0b",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/TabBar.tsx

@@ -70,6 +70,34 @@ function TabPanel(props: TabPanelProps) {
   )
 }
 
+/**
+ * Wrapper component that filters out MUI Tabs internal props
+ * to prevent them from being passed to DOM elements
+ */
+interface TabWrapperProps {
+  children: React.ReactNode
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any
+}
+
+function TabWrapper({ children, ...props }: TabWrapperProps) {
+  // Filter out MUI Tabs internal props that shouldn't reach the DOM
+  const {
+    fullWidth,
+    indicator,
+    onChange,
+    orientation,
+    scrollButtons,
+    selectionFollowsFocus,
+    textColor,
+    value,
+    variant,
+    ...cleanProps
+  } = props
+
+  return <Box {...cleanProps}>{children}</Box>
+}
+
 /**
  * A styled tab bar component with configurable tabs and content.
  * Features the same styling as the Wandelbots design system with rounded tabs
@@ -194,6 +222,7 @@ export const TabBar = externalizeComponent(
 
               const tab = (
                 <Tab
+                  key={item.id}
                   label={item.label}
                   icon={item.icon}
                   iconPosition="start"
@@ -233,34 +262,35 @@ export const TabBar = externalizeComponent(
               )
 
               if (!showBadge) {
-                return (
-                  <Box key={item.id} sx={{ display: "inline-flex" }}>
-                    {tab}
-                  </Box>
-                )
+                return tab
               }
 
               return (
-                <Badge
+                <TabWrapper
                   key={item.id}
-                  badgeContent={badgeContent}
-                  color={item.badge?.color || "error"}
-                  max={item.badge?.max}
-                  showZero={item.badge?.showZero}
-                  anchorOrigin={{
-                    vertical: "top",
-                    horizontal: "right",
-                  }}
-                  overlap="rectangular"
-                  sx={{
-                    "& .MuiBadge-badge": {
-                      // Ensure badge doesn't inherit tab opacity
-                      opacity: "1 !important",
-                    },
-                  }}
+                  component="span"
+                  sx={{ display: "inline-flex" }}
                 >
-                  {tab}
-                </Badge>
+                  <Badge
+                    badgeContent={badgeContent}
+                    color={item.badge?.color || "error"}
+                    max={item.badge?.max}
+                    showZero={item.badge?.showZero}
+                    anchorOrigin={{
+                      vertical: "top",
+                      horizontal: "right",
+                    }}
+                    overlap="rectangular"
+                    sx={{
+                      "& .MuiBadge-badge": {
+                        // Ensure badge doesn't inherit tab opacity
+                        opacity: "1 !important",
+                      },
+                    }}
+                  >
+                    {tab}
+                  </Badge>
+                </TabWrapper>
               )
             })}
           </Tabs>