@wandelbots/wandelbots-js-react-components 3.3.1 → 3.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/jogging/JoggingJointTab.tsx

@@ -37,7 +37,6 @@ export const JoggingJointTab = observer(
           justifyContent="center"
           alignItems="stretch"
           sx={{ flexGrow: "1" }}
-          id="JointControls"
         >
           <Stack alignItems="center" gap="24px">
             {store.jogger.motionStream.joints.map((joint) => {

package/src/components/jogging/JoggingOptions.tsx

@@ -1,5 +1,6 @@
 import { Box, MenuItem } from "@mui/material"
 import { observer } from "mobx-react-lite"
+import { useId } from "react"
 import { useTranslation } from "react-i18next"
 import AdornedSelect from "../experimental/utils/AdornedSelect"
 import {
@@ -11,6 +12,7 @@ import {
 
 export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
   const { t } = useTranslation()
+  const componentId = useId()
   const joggingOptions: React.ReactElement[] = []
 
   function translateOrientation(orientation: OrientationId): string {
@@ -28,7 +30,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
     joggingOptions.push(
       <AdornedSelect
         key="coord"
-        labelId="jogging-coord-select"
+        labelId={`jogging-coord-select-${componentId}`}
         labelValue={t("Jogging.CoordinateSystem.hlb")}
         value={store.selectedCoordSystemId}
         size="small"
@@ -54,7 +56,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
     joggingOptions.push(
       <AdornedSelect
         key="tcp"
-        labelId="jogging-tcp-select"
+        labelId={`jogging-tcp-select-${componentId}`}
         labelValue="TCP"
         value={store.selectedTcpId}
         size="small"
@@ -78,8 +80,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
       <AdornedSelect
         key="orientation"
         labelValue={t("Jogging.Cartesian.Orientation.lb")}
-        id="orientation-select"
-        labelId="orientation-select"
+        labelId={`orientation-select-${componentId}`}
         value={store.selectedOrientation}
         onChange={(event) =>
           store.setSelectedOrientation(event.target.value as OrientationId)
@@ -100,7 +101,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
       <AdornedSelect
         key="increment"
         labelValue={t("Jogging.Increment.hlb")}
-        labelId="jogging-increment-select"
+        labelId={`jogging-increment-select-${componentId}`}
         size="small"
         variant="filled"
         value={store.activeDiscreteIncrement?.id || "continuous"}

package/src/components/safetyBar/ControllerTypeIndicator.tsx

@@ -1,5 +1,6 @@
 import { useTheme, type PopoverOrigin } from "@mui/material"
 import { observer } from "mobx-react-lite"
+import { useId } from "react"
 import { Trans, useTranslation } from "react-i18next"
 import ControllerTypePhysicalIcon from "./icons/controller-type-physical.svg"
 import ControllerTypeVirtualIcon from "./icons/controller-type-virtual.svg"
@@ -22,12 +23,13 @@ export const ControllerTypeIndicator = observer(
     compact,
   }: ControllerTypeIndicatorProps) => {
     const theme = useTheme()
+    const componentId = useId()
     const { t } = useTranslation()
 
     if (isVirtual) {
       return (
         <IndicatorWithExplanation
-          id="motion-group-virtual"
+          id={`motion-group-virtual-${componentId}`}
           icon={ControllerTypeVirtualIcon}
           color={theme.palette.tertiary.main}
           name={t("SafetyBar.ControllerType.Virtual.lb")}
@@ -52,7 +54,7 @@ export const ControllerTypeIndicator = observer(
 
     return (
       <IndicatorWithExplanation
-        id="motion-group-physical"
+        id={`motion-group-physical-${componentId}`}
         icon={ControllerTypePhysicalIcon}
         color={theme.palette.primary.main}
         name={t("SafetyBar.ControllerType.Physical.lb")}

package/src/components/safetyBar/OperationModeIndicator.tsx

@@ -1,6 +1,7 @@
 import { useTheme, type PopoverOrigin } from "@mui/material"
 import type { OperationMode } from "@wandelbots/nova-js/v2"
 import { observer } from "mobx-react-lite"
+import { useId } from "react"
 import { Trans, useTranslation } from "react-i18next"
 import OperationModeAutomaticIcon from "./icons/operation-mode-automatic.svg"
 import OperationModeErrorIcon from "./icons/operation-mode-error.svg"
@@ -23,12 +24,13 @@ export const OperationModeIndicator = observer(
   }: OperationModeIndicatorProps) => {
     const { t } = useTranslation()
     const theme = useTheme()
+    const componentId = useId()
 
     switch (operationMode) {
       case "OPERATION_MODE_AUTO":
         return (
           <IndicatorWithExplanation
-            id="operation-mode-auto"
+            id={`operation-mode-auto-${componentId}`}
             icon={OperationModeAutomaticIcon}
             title={t("SafetyBar.OperationMode.ti")}
             name={t("SafetyBar.OperationMode.Automatic.ti")}
@@ -49,7 +51,7 @@ export const OperationModeIndicator = observer(
       case "OPERATION_MODE_MANUAL_T2": {
         return (
           <IndicatorWithExplanation
-            id="operation-mode-manual"
+            id={`operation-mode-manual-${componentId}`}
             icon={OperationModeManualIcon}
             color={theme.palette.warning.main}
             title={t("SafetyBar.OperationMode.ti")}
@@ -71,7 +73,7 @@ export const OperationModeIndicator = observer(
       default:
         return (
           <IndicatorWithExplanation
-            id="operation-mode-error"
+            id={`operation-mode-error-${componentId}`}
             icon={OperationModeErrorIcon}
             color={theme.palette.warning.main}
             title={t("SafetyBar.OperationMode.ti")}

package/src/components/safetyBar/SafetyStateIndicator.tsx

@@ -1,6 +1,7 @@
 import { useTheme, type PopoverOrigin } from "@mui/material"
 import type { SafetyStateType } from "@wandelbots/nova-js/v2"
 import { observer } from "mobx-react-lite"
+import { useId } from "react"
 import { Trans, useTranslation } from "react-i18next"
 import { assertUnreachable } from "../utils/errorHandling"
 import SafetyStateErrorIcon from "./icons/safety-state-error.svg"
@@ -26,13 +27,14 @@ export const SafetyStateIndicator = observer(
   }: SafetyStateIndicatorProps) => {
     const { t } = useTranslation()
     const theme = useTheme()
+    const componentId = useId()
 
     switch (safetyState) {
       // Normal state, robot can move
       case "SAFETY_STATE_NORMAL":
         return (
           <IndicatorWithExplanation
-            id="safety-state-normal"
+            id={`safety-state-normal-${componentId}`}
             title={t("SafetyBar.SafetyState.ti")}
             name={t("SafetyBar.SafetyState.Normal.lb")}
             label={compact ? null : t("SafetyBar.SafetyState.Normal.lb")}
@@ -54,7 +56,7 @@ export const SafetyStateIndicator = observer(
       case "SAFETY_STATE_ROBOT_EMERGENCY_STOP":
         return (
           <IndicatorWithExplanation
-            id="safety-state-estop"
+            id={`safety-state-estop-${componentId}`}
             title={t("SafetyBar.SafetyState.ti")}
             name={t("SafetyBar.SafetyState.Estop.lb")}
             label={compact ? null : t("SafetyBar.SafetyState.Estop.lb")}
@@ -81,7 +83,7 @@ export const SafetyStateIndicator = observer(
       case "SAFETY_STATE_STOP":
         return (
           <IndicatorWithExplanation
-            id="safety-state-stop"
+            id={`safety-state-stop-${componentId}`}
             icon={SafetyStateStopIcon}
             title={t("SafetyBar.SafetyState.ti")}
             name={t("SafetyBar.SafetyState.Stop.lb")}
@@ -108,7 +110,7 @@ export const SafetyStateIndicator = observer(
       case "SAFETY_STATE_VIOLATION":
         return (
           <IndicatorWithExplanation
-            id="safety-state-manual-action-required"
+            id={`safety-state-manual-action-required-${componentId}`}
             icon={SafetyStateManualActionRequiredIcon}
             color={theme.palette.warning.main}
             title={t("SafetyBar.SafetyState.ti")}
@@ -135,7 +137,7 @@ export const SafetyStateIndicator = observer(
       case "SAFETY_STATE_FAULT":
         return (
           <IndicatorWithExplanation
-            id="safety-state-error"
+            id={`safety-state-error-${componentId}`}
             icon={SafetyStateErrorIcon}
             color={theme.palette.error.main}
             title={t("SafetyBar.SafetyState.ti")}