@wandelbots/wandelbots-js-react-components 2.35.0 → 2.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.35.0",
+  "version": "2.36.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.2",
-    "@storybook/react-vite": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/react-vite": "^9.1.3",
     "@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.2",
+    "eslint-plugin-storybook": "^9.1.3",
     "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.2",
+    "storybook": "^9.1.3",
     "storybook-preset-inline-svg": "^1.0.1",
     "three": "^0.174.0",
     "three-stdlib": "^2.35.14",

package/src/components/CopyableText.tsx

@@ -1,87 +1,84 @@
 import { Stack, Tooltip, Typography, useTheme } from "@mui/material"
-import { forwardRef, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 
-export const CopyableText = forwardRef(
-  (
-    {
-      label,
-      value,
-    }: {
-      label?: string
-      value: string
-    },
-    ref: React.ForwardedRef<HTMLDivElement>,
-  ) => {
-    const theme = useTheme()
-    const [tooltipOpen, setTooltipOpen] = useState(false)
+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)
 
-    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()!
+      // 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) {
         const range = document.createRange()
-        range.selectNodeContents(ref.current as any)
+        range.selectNodeContents(ref.current)
         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"
+  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"
           sx={{
-            height: "100%",
-            boxSizing: "border-box",
-            padding: "6px 12px",
-            background: theme.palette.backgroundPaperElevation?.[8],
-            borderRadius: "10px",
-            minWidth: "0",
-            cursor: "pointer",
+            pointerEvents: "none",
+            fontSize: "12px",
+            color: theme.palette.text.primary,
+            whiteSpace: "nowrap",
+            minWidth: 0,
+            textOverflow: "ellipsis",
+            width: "100%",
+            overflow: "hidden",
           }}
-          onClick={() => onCopyText()}
         >
-          <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>
-    )
-  },
-)
+          {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).substr(2, 9)}`,
+  id: id || `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
   timestamp: new Date(),
   message,
   level,

package/src/components/SelectableFab.tsx

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

package/src/components/TabBar.tsx

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