@wandelbots/wandelbots-js-react-components 2.40.0-pr.feature-seperate-timer.383.0494cf4 → 2.41.0-pr.feature-seperate-timer.383.cd7e408

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.40.0-pr.feature-seperate-timer.383.0494cf4",
+  "version": "2.41.0-pr.feature-seperate-timer.383.cd7e408",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/TabBar.tsx

@@ -1,7 +1,7 @@
 import type { SxProps } from "@mui/material"
 import { Box, Tab, Tabs } from "@mui/material"
 import { observer } from "mobx-react-lite"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { externalizeComponent } from "../externalizeComponent"
 
 export interface TabItem {
@@ -18,6 +18,8 @@ export interface TabItem {
 export interface TabBarProps {
   /** Array of tab items to display */
   items: TabItem[]
+  /** Controlled active tab index */
+  activeTab?: number
   /** Default active tab index */
   defaultActiveTab?: number
   /** Callback when tab changes */
@@ -57,14 +59,39 @@ function TabPanel(props: TabPanelProps) {
  */
 export const TabBar = externalizeComponent(
   observer((props: TabBarProps) => {
-    const { items, defaultActiveTab = 0, onTabChange, sx, ref } = props
-    const [activeTab, setActiveTab] = useState(defaultActiveTab)
+    const {
+      items,
+      activeTab,
+      defaultActiveTab = 0,
+      onTabChange,
+      sx,
+      ref,
+    } = props
+    const isControlled = activeTab !== undefined
+    const [uncontrolledActiveTab, setUncontrolledActiveTab] =
+      useState(defaultActiveTab)
+
+    // Keep uncontrolled state in range when items change
+    useEffect(() => {
+      if (isControlled) return
+      if (items.length === 0) return
+      if (
+        uncontrolledActiveTab < 0 ||
+        uncontrolledActiveTab > items.length - 1
+      ) {
+        setUncontrolledActiveTab(0)
+      }
+    }, [items.length, isControlled, uncontrolledActiveTab])
+
+    const currentValue = isControlled ? activeTab! : uncontrolledActiveTab
 
     const handleTabChange = (
       _event: React.SyntheticEvent,
       newValue: number,
     ) => {
-      setActiveTab(newValue)
+      if (!isControlled) {
+        setUncontrolledActiveTab(newValue)
+      }
       onTabChange?.(newValue)
     }
 
@@ -76,7 +103,7 @@ export const TabBar = externalizeComponent(
         {/* Tabs */}
         <Box sx={{ px: 0, py: 0 }}>
           <Tabs
-            value={activeTab}
+            value={currentValue}
             onChange={handleTabChange}
             sx={{
               minHeight: "32px",
@@ -104,11 +131,11 @@ export const TabBar = externalizeComponent(
                   backgroundColor: (theme) =>
                     theme.palette.backgroundPaperElevation?.[11] || "#32344B",
                   color: "text.primary",
-                  opacity: activeTab === index ? 1 : 0.38,
+                  opacity: currentValue === index ? 1 : 0.38,
                   fontSize: "13px",
                   transition: "all 0.2s ease-in-out",
                   "&:hover": {
-                    opacity: activeTab === index ? 1 : 0.6,
+                    opacity: currentValue === index ? 1 : 0.6,
                   },
                   "&.Mui-selected": {
                     opacity: 1,
@@ -134,7 +161,7 @@ export const TabBar = externalizeComponent(
         {/* Tab Content */}
         <Box sx={{ flex: 1, overflow: "auto" }}>
           {items.map((item, index) => (
-            <TabPanel key={item.id} value={activeTab} index={index}>
+            <TabPanel key={item.id} value={currentValue} index={index}>
               {item.content}
             </TabPanel>
           ))}

package/src/components/jogging/PoseCartesianValues.tsx

@@ -7,6 +7,7 @@ import type {
 } from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
 import { useRef, useState } from "react"
+import { externalizeComponent } from "../../externalizeComponent"
 import { CopyableText } from "../CopyableText"
 import { useAnimationFrame } from "../utils/hooks"
 
@@ -39,81 +40,83 @@ export type PoseCartesianValuesProps = {
   showCopyButton?: boolean
 }
 
-export const PoseCartesianValues = observer(
-  ({
-    motionStream,
-    connectedMotionGroup,
-    showCopyButton = false,
-  }: PoseCartesianValuesProps) => {
-    const poseHolderRef = useRef<HTMLDivElement>(null)
-    const [copyMessage, setCopyMessage] = useState("")
-
-    const activeMotionStream = createMotionStateProvider(
+export const PoseCartesianValues = externalizeComponent(
+  observer(
+    ({
       motionStream,
       connectedMotionGroup,
-    )
+      showCopyButton = false,
+    }: PoseCartesianValuesProps) => {
+      const poseHolderRef = useRef<HTMLDivElement>(null)
+      const [copyMessage, setCopyMessage] = useState("")
 
-    if (!activeMotionStream) {
-      throw new Error(
-        "PoseCartesianValues requires either motionStream or connectedMotionGroup prop",
+      const activeMotionStream = createMotionStateProvider(
+        motionStream,
+        connectedMotionGroup,
       )
-    }
-
-    function getCurrentPoseString() {
-      if (!activeMotionStream) return ""
-      const tcpPose = activeMotionStream.rapidlyChangingMotionState.tcp_pose
-      if (!tcpPose) return ""
-      return poseToWandelscriptString(tcpPose)
-    }
 
-    const handleCopy = async () => {
-      try {
-        await navigator.clipboard.writeText(getCurrentPoseString())
-        setCopyMessage("Copied!")
-        setTimeout(() => setCopyMessage(""), 2000)
-      } catch {
-        setCopyMessage("Copy failed")
-        setTimeout(() => setCopyMessage(""), 2000)
+      if (!activeMotionStream) {
+        throw new Error(
+          "PoseCartesianValues requires either motionStream or connectedMotionGroup prop",
+        )
       }
-    }
 
-    useAnimationFrame(() => {
-      if (!poseHolderRef.current) {
-        return
+      function getCurrentPoseString() {
+        if (!activeMotionStream) return ""
+        const tcpPose = activeMotionStream.rapidlyChangingMotionState.tcp_pose
+        if (!tcpPose) return ""
+        return poseToWandelscriptString(tcpPose)
       }
-      const newPoseContent = getCurrentPoseString()
-      if (poseHolderRef.current.textContent === newPoseContent) {
-        return
+
+      const handleCopy = async () => {
+        try {
+          await navigator.clipboard.writeText(getCurrentPoseString())
+          setCopyMessage("Copied!")
+          setTimeout(() => setCopyMessage(""), 2000)
+        } catch {
+          setCopyMessage("Copy failed")
+          setTimeout(() => setCopyMessage(""), 2000)
+        }
       }
 
-      poseHolderRef.current.textContent = newPoseContent
-    })
+      useAnimationFrame(() => {
+        if (!poseHolderRef.current) {
+          return
+        }
+        const newPoseContent = getCurrentPoseString()
+        if (poseHolderRef.current.textContent === newPoseContent) {
+          return
+        }
 
-    return (
-      <Stack
-        direction="row"
-        alignItems="center"
-        spacing={1}
-        sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
-      >
-        <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
-        {showCopyButton && (
-          <Button
-            variant="contained"
-            color="secondary"
-            size="small"
-            onClick={handleCopy}
-            sx={{ flexShrink: 0 }}
-          >
-            Copy
-          </Button>
-        )}
-        {copyMessage && (
-          <Typography variant="caption" color="success.main">
-            {copyMessage}
-          </Typography>
-        )}
-      </Stack>
-    )
-  },
+        poseHolderRef.current.textContent = newPoseContent
+      })
+
+      return (
+        <Stack
+          direction="row"
+          alignItems="center"
+          spacing={1}
+          sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
+        >
+          <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
+          {showCopyButton && (
+            <Button
+              variant="contained"
+              color="secondary"
+              size="small"
+              onClick={handleCopy}
+              sx={{ flexShrink: 0 }}
+            >
+              Copy
+            </Button>
+          )}
+          {copyMessage && (
+            <Typography variant="caption" color="success.main">
+              {copyMessage}
+            </Typography>
+          )}
+        </Stack>
+      )
+    },
+  ),
 )

package/src/components/jogging/PoseJointValues.tsx

@@ -6,6 +6,7 @@ import type {
 } from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
 import { useRef, useState } from "react"
+import { externalizeComponent } from "../../externalizeComponent"
 import { CopyableText } from "../CopyableText"
 import { useAnimationFrame } from "../utils/hooks"
 
@@ -38,81 +39,83 @@ export type PoseJointValuesProps = {
   showCopyButton?: boolean
 }
 
-export const PoseJointValues = observer(
-  ({
-    motionStream,
-    connectedMotionGroup,
-    showCopyButton = false,
-  }: PoseJointValuesProps) => {
-    const poseHolderRef = useRef<HTMLDivElement>(null)
-    const [copyMessage, setCopyMessage] = useState("")
-
-    const activeMotionStream = createMotionStateProvider(
+export const PoseJointValues = externalizeComponent(
+  observer(
+    ({
       motionStream,
       connectedMotionGroup,
-    )
+      showCopyButton = false,
+    }: PoseJointValuesProps) => {
+      const poseHolderRef = useRef<HTMLDivElement>(null)
+      const [copyMessage, setCopyMessage] = useState("")
 
-    if (!activeMotionStream) {
-      throw new Error(
-        "PoseJointValues requires either motionStream or connectedMotionGroup prop",
+      const activeMotionStream = createMotionStateProvider(
+        motionStream,
+        connectedMotionGroup,
       )
-    }
-
-    function getCurrentPoseString() {
-      if (!activeMotionStream) return ""
-      const { joints } =
-        activeMotionStream.rapidlyChangingMotionState.state.joint_position
-      return `[${joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
-    }
 
-    const handleCopy = async () => {
-      try {
-        await navigator.clipboard.writeText(getCurrentPoseString())
-        setCopyMessage("Copied!")
-        setTimeout(() => setCopyMessage(""), 2000)
-      } catch {
-        setCopyMessage("Copy failed")
-        setTimeout(() => setCopyMessage(""), 2000)
+      if (!activeMotionStream) {
+        throw new Error(
+          "PoseJointValues requires either motionStream or connectedMotionGroup prop",
+        )
       }
-    }
 
-    useAnimationFrame(() => {
-      if (!poseHolderRef.current) {
-        return
+      function getCurrentPoseString() {
+        if (!activeMotionStream) return ""
+        const { joints } =
+          activeMotionStream.rapidlyChangingMotionState.state.joint_position
+        return `[${joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
       }
 
-      const newPoseContent = getCurrentPoseString()
-      if (poseHolderRef.current.textContent === newPoseContent) {
-        return
+      const handleCopy = async () => {
+        try {
+          await navigator.clipboard.writeText(getCurrentPoseString())
+          setCopyMessage("Copied!")
+          setTimeout(() => setCopyMessage(""), 2000)
+        } catch {
+          setCopyMessage("Copy failed")
+          setTimeout(() => setCopyMessage(""), 2000)
+        }
       }
-      poseHolderRef.current.textContent = newPoseContent
-    })
 
-    return (
-      <Stack
-        direction="row"
-        alignItems="center"
-        spacing={1}
-        sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
-      >
-        <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
-        {showCopyButton && (
-          <Button
-            variant="contained"
-            color="secondary"
-            size="small"
-            onClick={handleCopy}
-            sx={{ flexShrink: 0 }}
-          >
-            Copy
-          </Button>
-        )}
-        {copyMessage && (
-          <Typography variant="caption" color="success.main">
-            {copyMessage}
-          </Typography>
-        )}
-      </Stack>
-    )
-  },
+      useAnimationFrame(() => {
+        if (!poseHolderRef.current) {
+          return
+        }
+
+        const newPoseContent = getCurrentPoseString()
+        if (poseHolderRef.current.textContent === newPoseContent) {
+          return
+        }
+        poseHolderRef.current.textContent = newPoseContent
+      })
+
+      return (
+        <Stack
+          direction="row"
+          alignItems="center"
+          spacing={1}
+          sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
+        >
+          <CopyableText value={getCurrentPoseString()} ref={poseHolderRef} />
+          {showCopyButton && (
+            <Button
+              variant="contained"
+              color="secondary"
+              size="small"
+              onClick={handleCopy}
+              sx={{ flexShrink: 0 }}
+            >
+              Copy
+            </Button>
+          )}
+          {copyMessage && (
+            <Typography variant="caption" color="success.main">
+              {copyMessage}
+            </Typography>
+          )}
+        </Stack>
+      )
+    },
+  ),
 )