@wandelbots/wandelbots-js-react-components 3.3.1-pr.fix-no-ids.417.c2620b0 → 3.3.1

package/package.json

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

package/src/components/jogging/JoggingJointTab.tsx

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

package/src/components/safetyBar/ControllerTypeIndicator.tsx

@@ -1,6 +1,5 @@
 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"
@@ -23,13 +22,12 @@ export const ControllerTypeIndicator = observer(
     compact,
   }: ControllerTypeIndicatorProps) => {
     const theme = useTheme()
-    const componentId = useId()
     const { t } = useTranslation()
 
     if (isVirtual) {
       return (
         <IndicatorWithExplanation
-          id={`motion-group-virtual-${componentId}`}
+          id="motion-group-virtual"
           icon={ControllerTypeVirtualIcon}
           color={theme.palette.tertiary.main}
           name={t("SafetyBar.ControllerType.Virtual.lb")}
@@ -54,7 +52,7 @@ export const ControllerTypeIndicator = observer(
 
     return (
       <IndicatorWithExplanation
-        id={`motion-group-physical-${componentId}`}
+        id="motion-group-physical"
         icon={ControllerTypePhysicalIcon}
         color={theme.palette.primary.main}
         name={t("SafetyBar.ControllerType.Physical.lb")}

package/src/components/safetyBar/OperationModeIndicator.tsx

@@ -1,7 +1,6 @@
 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"
@@ -24,13 +23,12 @@ 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-${componentId}`}
+            id="operation-mode-auto"
             icon={OperationModeAutomaticIcon}
             title={t("SafetyBar.OperationMode.ti")}
             name={t("SafetyBar.OperationMode.Automatic.ti")}
@@ -51,7 +49,7 @@ export const OperationModeIndicator = observer(
       case "OPERATION_MODE_MANUAL_T2": {
         return (
           <IndicatorWithExplanation
-            id={`operation-mode-manual-${componentId}`}
+            id="operation-mode-manual"
             icon={OperationModeManualIcon}
             color={theme.palette.warning.main}
             title={t("SafetyBar.OperationMode.ti")}
@@ -73,7 +71,7 @@ export const OperationModeIndicator = observer(
       default:
         return (
           <IndicatorWithExplanation
-            id={`operation-mode-error-${componentId}`}
+            id="operation-mode-error"
             icon={OperationModeErrorIcon}
             color={theme.palette.warning.main}
             title={t("SafetyBar.OperationMode.ti")}

package/src/components/safetyBar/SafetyStateIndicator.tsx

@@ -1,7 +1,6 @@
 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"
@@ -27,14 +26,13 @@ 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-${componentId}`}
+            id="safety-state-normal"
             title={t("SafetyBar.SafetyState.ti")}
             name={t("SafetyBar.SafetyState.Normal.lb")}
             label={compact ? null : t("SafetyBar.SafetyState.Normal.lb")}
@@ -56,7 +54,7 @@ export const SafetyStateIndicator = observer(
       case "SAFETY_STATE_ROBOT_EMERGENCY_STOP":
         return (
           <IndicatorWithExplanation
-            id={`safety-state-estop-${componentId}`}
+            id="safety-state-estop"
             title={t("SafetyBar.SafetyState.ti")}
             name={t("SafetyBar.SafetyState.Estop.lb")}
             label={compact ? null : t("SafetyBar.SafetyState.Estop.lb")}
@@ -83,7 +81,7 @@ export const SafetyStateIndicator = observer(
       case "SAFETY_STATE_STOP":
         return (
           <IndicatorWithExplanation
-            id={`safety-state-stop-${componentId}`}
+            id="safety-state-stop"
             icon={SafetyStateStopIcon}
             title={t("SafetyBar.SafetyState.ti")}
             name={t("SafetyBar.SafetyState.Stop.lb")}
@@ -110,7 +108,7 @@ export const SafetyStateIndicator = observer(
       case "SAFETY_STATE_VIOLATION":
         return (
           <IndicatorWithExplanation
-            id={`safety-state-manual-action-required-${componentId}`}
+            id="safety-state-manual-action-required"
             icon={SafetyStateManualActionRequiredIcon}
             color={theme.palette.warning.main}
             title={t("SafetyBar.SafetyState.ti")}
@@ -137,7 +135,7 @@ export const SafetyStateIndicator = observer(
       case "SAFETY_STATE_FAULT":
         return (
           <IndicatorWithExplanation
-            id={`safety-state-error-${componentId}`}
+            id="safety-state-error"
             icon={SafetyStateErrorIcon}
             color={theme.palette.error.main}
             title={t("SafetyBar.SafetyState.ti")}