@wandelbots/wandelbots-js-react-components 2.35.0-pr.feature-replace-forwardref.376.d3a302b → 2.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.35.0-pr.feature-replace-forwardref.376.d3a302b",
+  "version": "2.35.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -59,8 +59,8 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/react-vite": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
     "@storybook/test-runner": "^0.23.0",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -72,7 +72,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@wandelbots/nova-js": "^2.1.0",
     "add": "^2.0.6",
-    "eslint-plugin-storybook": "^9.1.3",
+    "eslint-plugin-storybook": "^9.1.2",
     "glob": "^11.0.1",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -95,7 +95,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.2.3",
-    "storybook": "^9.1.3",
+    "storybook": "^9.1.2",
     "storybook-preset-inline-svg": "^1.0.1",
     "three": "^0.174.0",
     "three-stdlib": "^2.35.14",

package/src/components/CopyableText.tsx

@@ -1,84 +1,87 @@
 import { Stack, Tooltip, Typography, useTheme } from "@mui/material"
-import { useEffect, useState } from "react"
+import { forwardRef, useEffect, useState } from "react"
 
-export const CopyableText = (props: {
-  label?: string
-  value: string
-  ref?: React.Ref<HTMLDivElement>
-}) => {
-  const { value, ref } = props
-  // Note: label prop is available but not currently used in the component
-  const theme = useTheme()
-  const [tooltipOpen, setTooltipOpen] = useState(false)
+export const CopyableText = forwardRef(
+  (
+    {
+      label,
+      value,
+    }: {
+      label?: string
+      value: string
+    },
+    ref: React.ForwardedRef<HTMLDivElement>,
+  ) => {
+    const theme = useTheme()
+    const [tooltipOpen, setTooltipOpen] = useState(false)
 
-  async function onCopyText(): Promise<boolean> {
-    if (!ref || !("current" in ref)) {
-      console.warn("No copy target found")
-      return false
-    }
-    try {
-      await navigator.clipboard.writeText(value)
-      console.log("Copied!")
-      setTooltipOpen(true)
-      return true
-    } catch (err) {
-      // Direct clipboard copy is not available in non-secure contexts
-      console.error(err)
+    async function onCopyText(): Promise<boolean> {
+      if (!ref || !("current" in ref)) {
+        console.warn("No copy target found")
+        return false
+      }
+      try {
+        await navigator.clipboard.writeText(value)
+        console.log("Copied!")
+        setTooltipOpen(true)
+        return true
+      } catch (err) {
+        // Direct clipboard copy is not available in non-secure contexts
+        console.error(err)
 
-      // Let's fall back to selecting the text so the user can manually copy easily
-      const selection = window.getSelection()
-      if (selection && ref && "current" in ref && ref.current) {
+        // Let's fall back to selecting the text so the user can manually copy easily
+        const selection = window.getSelection()!
         const range = document.createRange()
-        range.selectNodeContents(ref.current)
+        range.selectNodeContents(ref.current as any)
         selection.removeAllRanges()
         selection.addRange(range)
       }
+      return false
     }
-    return false
-  }
 
-  useEffect(() => {
-    if (!tooltipOpen) {
-      return
-    }
-    const timeoutId = setTimeout(() => setTooltipOpen(false), 3000)
-    return () => {
-      timeoutId ? clearTimeout(timeoutId) : {}
-    }
-  }, [tooltipOpen])
+    useEffect(() => {
+      if (!tooltipOpen) {
+        return
+      }
+      const timeoutId = setTimeout(() => setTooltipOpen(false), 3000)
+      return () => {
+        timeoutId ? clearTimeout(timeoutId) : {}
+      }
+    }, [tooltipOpen])
 
-  return (
-    <Tooltip open={tooltipOpen} title="Copied!">
-      <Stack
-        justifyContent="center"
-        sx={{
-          height: "100%",
-          boxSizing: "border-box",
-          padding: "6px 12px",
-          background: theme.palette.backgroundPaperElevation?.[8],
-          borderRadius: "10px",
-          minWidth: "0",
-          cursor: "pointer",
-        }}
-        onClick={() => onCopyText()}
-      >
-        <Typography
-          ref={ref}
-          align="center"
+    return (
+      <Tooltip open={tooltipOpen} title="Copied!">
+        <Stack
+          justifyContent="center"
           sx={{
-            pointerEvents: "none",
-            fontSize: "12px",
-            color: theme.palette.text.primary,
-            whiteSpace: "nowrap",
-            minWidth: 0,
-            textOverflow: "ellipsis",
-            width: "100%",
-            overflow: "hidden",
+            height: "100%",
+            boxSizing: "border-box",
+            padding: "6px 12px",
+            background: theme.palette.backgroundPaperElevation?.[8],
+            borderRadius: "10px",
+            minWidth: "0",
+            cursor: "pointer",
           }}
+          onClick={() => onCopyText()}
         >
-          {value}
-        </Typography>
-      </Stack>
-    </Tooltip>
-  )
-}
+          <Typography
+            ref={ref}
+            align="center"
+            sx={{
+              pointerEvents: "none",
+              fontSize: "12px",
+              color: theme.palette.text.primary,
+              whiteSpace: "nowrap",
+              minWidth: 0,
+              textOverflow: "ellipsis",
+              width: "100%",
+              overflow: "hidden",
+            }}
+          >
+            {value}
+          </Typography>
+        </Stack>
+      </Tooltip>
+    )
+  },
+)

package/src/components/LogViewer.tsx

@@ -45,7 +45,7 @@ export const createLogMessage = (
   level: LogLevel,
   id?: string,
 ): LogMessage => ({
-  id: id || `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+  id: id || `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
   timestamp: new Date(),
   message,
   level,

package/src/components/SelectableFab.tsx

@@ -1,4 +1,5 @@
-import { Fab, type FabProps, styled } from "@mui/material"
+import { Fab, styled, type FabProps } from "@mui/material"
+import { forwardRef, type Ref } from "react"
 
 const StyledSelectableFab = styled(Fab, {
   shouldForwardProp: (prop) => prop !== "selected",
@@ -33,18 +34,18 @@ const StyledSelectableFab = styled(Fab, {
 
 type CodeFabProps = {
   selected?: boolean
-  ref?: React.Ref<HTMLButtonElement>
 } & Omit<FabProps, "variant" | "color">
 
-export const SelectableFab = (props: CodeFabProps) => {
-  const { ref, ...otherProps } = props
-  return (
-    <StyledSelectableFab
-      ref={ref}
-      selected={props.selected}
-      {...otherProps}
-      color={"secondary"}
-      variant="circular"
-    />
-  )
-}
+export const SelectableFab = forwardRef(
+  (props: CodeFabProps, ref: Ref<HTMLButtonElement>) => {
+    return (
+      <StyledSelectableFab
+        ref={ref}
+        selected={props.selected}
+        {...props}
+        color={"secondary"}
+        variant="circular"
+      />
+    )
+  },
+)

package/src/components/TabBar.tsx

@@ -24,8 +24,6 @@ export interface TabBarProps {
   onTabChange?: (index: number) => void
   /** Additional styling */
   sx?: SxProps
-  /** Ref to the root container element */
-  ref?: React.Ref<HTMLDivElement>
 }
 
 interface TabPanelProps {
@@ -57,7 +55,7 @@ function TabPanel(props: TabPanelProps) {
  */
 export const TabBar = externalizeComponent(
   observer((props: TabBarProps) => {
-    const { items, defaultActiveTab = 0, onTabChange, sx, ref } = props
+    const { items, defaultActiveTab = 0, onTabChange, sx } = props
     const [activeTab, setActiveTab] = useState(defaultActiveTab)
 
     const handleTabChange = (
@@ -70,7 +68,6 @@ export const TabBar = externalizeComponent(
 
     return (
       <Box
-        ref={ref}
         sx={{ height: "100%", display: "flex", flexDirection: "column", ...sx }}
       >
         {/* Tabs */}