@wandelbots/wandelbots-js-react-components 2.12.0 → 2.13.0

package/package.json

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

package/src/components/safetyBar/ControllerTypeIndicator.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material"
+import { useTheme, type PopoverOrigin } from "@mui/material"
 import { observer } from "mobx-react-lite"
 import { Trans, useTranslation } from "react-i18next"
 import ControllerTypePhysicalIcon from "./icons/controller-type-physical.svg"
@@ -8,10 +8,17 @@ import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
 interface ControllerTypeIndicatorProps {
   isVirtual: boolean
   motionGroupId: string
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
 }
 
 export const ControllerTypeIndicator = observer(
-  ({ isVirtual, motionGroupId }: ControllerTypeIndicatorProps) => {
+  ({
+    isVirtual,
+    motionGroupId,
+    anchorOrigin,
+    transformOrigin,
+  }: ControllerTypeIndicatorProps) => {
     const theme = useTheme()
     const { t } = useTranslation()
 
@@ -34,6 +41,8 @@ export const ControllerTypeIndicator = observer(
               without special safety precautions.
             </Trans>
           }
+          anchorOrigin={anchorOrigin}
+          transformOrigin={transformOrigin}
         />
       )
     }
@@ -53,6 +62,8 @@ export const ControllerTypeIndicator = observer(
             components={{ code: <code />, strong: <strong /> }}
           />
         }
+        anchorOrigin={anchorOrigin}
+        transformOrigin={transformOrigin}
       />
     )
   },

package/src/components/safetyBar/IndicatorWithExplanation.tsx

@@ -3,6 +3,7 @@ import {
   Stack,
   SvgIcon,
   Typography,
+  type PopoverOrigin,
   type TypographyProps,
 } from "@mui/material"
 import { observer, useLocalObservable } from "mobx-react-lite"
@@ -16,6 +17,8 @@ export type IndicatorWithExplanationProps = {
   name: ReactNode
   explanation: ReactNode
   literalValue?: string
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
 }
 
 export const IndicatorWithExplanation = observer(
@@ -27,6 +30,8 @@ export const IndicatorWithExplanation = observer(
     name,
     explanation,
     literalValue,
+    anchorOrigin,
+    transformOrigin,
   }: IndicatorWithExplanationProps) => {
     const state = useLocalObservable(() => ({
       anchorEl: null as HTMLElement | null,
@@ -69,14 +74,18 @@ export const IndicatorWithExplanation = observer(
           }}
           open={state.isPopoverOpen}
           anchorEl={state.anchorEl}
-          anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "left",
-          }}
-          transformOrigin={{
-            vertical: "top",
-            horizontal: "left",
-          }}
+          anchorOrigin={
+            anchorOrigin ?? {
+              vertical: "bottom",
+              horizontal: "left",
+            }
+          }
+          transformOrigin={
+            transformOrigin ?? {
+              vertical: "top",
+              horizontal: "left",
+            }
+          }
           onClose={state.closePopover}
           disableRestoreFocus
         >

package/src/components/safetyBar/OperationModeIndicator.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material"
+import { useTheme, type PopoverOrigin } from "@mui/material"
 import type { RobotControllerStateOperationModeEnum } from "@wandelbots/wandelbots-js"
 import { observer } from "mobx-react-lite"
 import { Trans, useTranslation } from "react-i18next"
@@ -9,10 +9,16 @@ import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
 
 interface OperationModeIndicatorProps {
   operationMode: RobotControllerStateOperationModeEnum
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
 }
 
 export const OperationModeIndicator = observer(
-  ({ operationMode }: OperationModeIndicatorProps) => {
+  ({
+    operationMode,
+    anchorOrigin,
+    transformOrigin,
+  }: OperationModeIndicatorProps) => {
     const { t } = useTranslation()
     const theme = useTheme()
 
@@ -31,6 +37,8 @@ export const OperationModeIndicator = observer(
                 movement without manual confirmation is possible in this mode.
               </Trans>
             }
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
       case "OPERATION_MODE_MANUAL":
@@ -51,6 +59,8 @@ export const OperationModeIndicator = observer(
               </Trans>
             }
             literalValue={operationMode}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
       }
@@ -69,6 +79,8 @@ export const OperationModeIndicator = observer(
               </Trans>
             }
             literalValue={operationMode}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
     }

package/src/components/safetyBar/SafetyBar.tsx

@@ -1,4 +1,4 @@
-import { Divider, Stack } from "@mui/material"
+import { Divider, Stack, type PopoverOrigin } from "@mui/material"
 import type {
   RobotControllerStateOperationModeEnum,
   RobotControllerStateSafetyStateEnum,
@@ -14,6 +14,8 @@ export interface SafetyBarProps {
   motionGroupId: string
   operationMode: RobotControllerStateOperationModeEnum
   safetyState: RobotControllerStateSafetyStateEnum
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
 }
 
 export const SafetyBar = externalizeComponent(
@@ -25,17 +27,27 @@ export const SafetyBar = externalizeComponent(
         alignItems="center"
         sx={{ height: "24px" }}
       >
-        <SafetyStateIndicator safetyState={props.safetyState} />
+        <SafetyStateIndicator
+          safetyState={props.safetyState}
+          anchorOrigin={props.anchorOrigin}
+          transformOrigin={props.transformOrigin}
+        />
 
         <Divider orientation="vertical" flexItem />
 
-        <OperationModeIndicator operationMode={props.operationMode} />
+        <OperationModeIndicator
+          operationMode={props.operationMode}
+          anchorOrigin={props.anchorOrigin}
+          transformOrigin={props.transformOrigin}
+        />
 
         <Divider orientation="vertical" flexItem />
 
         <ControllerTypeIndicator
           isVirtual={props.isVirtual}
           motionGroupId={props.motionGroupId}
+          anchorOrigin={props.anchorOrigin}
+          transformOrigin={props.transformOrigin}
         />
       </Stack>
     )

package/src/components/safetyBar/SafetyStateIndicator.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material"
+import { useTheme, type PopoverOrigin } from "@mui/material"
 import type { RobotControllerStateSafetyStateEnum } from "@wandelbots/wandelbots-js"
 import { observer } from "mobx-react-lite"
 import { Trans, useTranslation } from "react-i18next"
@@ -12,10 +12,16 @@ import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
 
 interface SafetyStateIndicatorProps {
   safetyState: RobotControllerStateSafetyStateEnum
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
 }
 
 export const SafetyStateIndicator = observer(
-  ({ safetyState }: SafetyStateIndicatorProps) => {
+  ({
+    safetyState,
+    anchorOrigin,
+    transformOrigin,
+  }: SafetyStateIndicatorProps) => {
     const { t } = useTranslation()
     const theme = useTheme()
 
@@ -35,6 +41,8 @@ export const SafetyStateIndicator = observer(
                 not prevented by this state.
               </Trans>
             }
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
 
@@ -56,6 +64,8 @@ export const SafetyStateIndicator = observer(
               </Trans>
             }
             literalValue={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
 
@@ -79,6 +89,8 @@ export const SafetyStateIndicator = observer(
               </Trans>
             }
             literalValue={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
 
@@ -103,6 +115,8 @@ export const SafetyStateIndicator = observer(
               </Trans>
             }
             literalValue={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
 
@@ -122,6 +136,8 @@ export const SafetyStateIndicator = observer(
               </Trans>
             }
             literalValue={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
           />
         )
       default: