@wandelbots/wandelbots-js-react-components 1.33.1 → 1.33.2

package/package.json

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

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -1,7 +1,7 @@
 import { IconButton, Typography, useTheme } from "@mui/material"
 import Stack from "@mui/material/Stack"
 import { observer } from "mobx-react-lite"
-import React, { useRef, useState, type ReactNode } from "react"
+import React, { useEffect, useRef, useState, type ReactNode } from "react"
 import { externalizeComponent } from "../../externalizeComponent"
 import JogMinus from "../../icons/jog-minus.svg"
 import JogPlus from "../../icons/jog-plus.svg"
@@ -45,6 +45,14 @@ export const JoggingCartesianAxisControl = externalizeComponent(
       const [localActiveJoggingDirection, setLocalActiveJoggingDirection] =
         useState<JoggingDirection | null>(null)
 
+      // Trigger pointer "release" events because e.g. firefox does not trigger pointer events as soon as a component is disabled
+      useEffect(() => {
+        if (!disabled) {
+          return
+        }
+        onPointerUpOrOut()
+      }, [disabled])
+
       // Handle both controlled and uncontrolled states
       const showJoggingDirection =
         activeJoggingDirection || localActiveJoggingDirection
@@ -83,10 +91,10 @@ export const JoggingCartesianAxisControl = externalizeComponent(
       const sxAxisControlButtonDefault = {
         ...sxAxisControlButtonBase,
         backgroundColor: colors.buttonBackgroundColor?.default,
-        "&:hover": {
+        ":hover": {
           backgroundColor: colors.buttonBackgroundColor?.hovered,
         },
-        "&:active": {
+        ":active": {
           backgroundColor: colors.buttonBackgroundColor?.pressed,
           color: colors.backgroundColor,
           path: { fill: colors.backgroundColor },

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -250,6 +250,11 @@ export const JoggingCartesianTab = observer(
                     key={axis.id}
                     colors={axis.colors}
                     disabled={store.isLocked}
+                    activeJoggingDirection={
+                      store.incrementJogInProgress?.axis === axis.id
+                        ? store.incrementJogInProgress.direction
+                        : undefined
+                    }
                     label={
                       <>
                         <RotationIcon />