carbon-addons-iot-react 5.8.0 → 5.8.2

package/es/components/HotspotEditorModal/HotspotEditorModal.js

@@ -315,6 +315,7 @@ var HotspotEditorModal = function HotspotEditorModal(_ref) {
     switchCurrentType = _useHotspotEditorStat.switchCurrentType,
     updateHotspotDataSource = _useHotspotEditorStat.updateHotspotDataSource,
     updateHotspotTooltip = _useHotspotEditorStat.updateHotspotTooltip,
+    updateHotspotPosition = _useHotspotEditorStat.updateHotspotPosition,
     updateTextHotspotStyle = _useHotspotEditorStat.updateTextHotspotStyle,
     updateTextHotspotContent = _useHotspotEditorStat.updateTextHotspotContent,
     updateDynamicHotspotSourceX = _useHotspotEditorStat.updateDynamicHotspotSourceX,
@@ -380,6 +381,8 @@ var HotspotEditorModal = function HotspotEditorModal(_ref) {
     }
     var hotspotsWithoutExampleValues = filteredHotspots.map(function (hotspot) {
       return update(hotspot, {
+        $unset: ['id'],
+        // Remove the internal id added for drag tracking
         content: {
           $unset: ['values']
         }
@@ -629,6 +632,7 @@ var HotspotEditorModal = function HotspotEditorModal(_ref) {
         hotspotDefaults: hotspotDefaults
       });
     },
+    onUpdateHotspotPosition: updateHotspotPosition,
     onSelectHotspot: setSelectedHotspot,
     selectedHotspots: getSelectedHotspotsList(selectedHotspot, hotspots),
     src: cardConfig.content.src,

package/es/components/HotspotEditorModal/hooks/hotspotStateHook.js

@@ -49,6 +49,7 @@ var hotspotActionTypes = {
   hotspotDataSourceChange: 'HOTSPOT_DATA_SOURCE_CHANGE',
   hotspotDataSourceSettingsChange: 'HOTSPOT_DATA_SOURCE_SETTINGS_CHANGE',
   hotspotTooltipChange: 'HOTSPOT_TOOLTIP_CHANGE',
+  hotspotPositionChange: 'HOTSPOT_POSITION_CHANGE',
   hotspotSelect: 'HOTSPOT_SELECT',
   hotspotsAdd: 'HOTSPOTS_ADD',
   textHotspotStyleChange: 'TEXT_HOTSPOT_STYLE_CHANGE',
@@ -151,10 +152,32 @@ function hotspotEditorReducer(state, _ref2) {
         };
         return getHotspotUpdate(state, _mergeSpec);
       }
+    // HOTSPOT POSITION CHANGE
+    case hotspotActionTypes.hotspotPositionChange:
+      {
+        var isPositionAvailable = !state.hotspots.find(function (hotspot) {
+          return isHotspotMatch(hotspot, payload.position);
+        });
+        if (isPositionAvailable) {
+          // Find the updated hotspot in the new hotspots array to maintain selection
+          var updatedSelectedHotspot = payload.newHotspots.find(function (hotspot) {
+            return isHotspotMatch(hotspot, payload.position);
+          });
+          return update(state, {
+            hotspots: {
+              $set: payload.newHotspots
+            },
+            selectedHotspot: {
+              $set: updatedSelectedHotspot
+            }
+          });
+        }
+        return state;
+      }
     // HOTSPOTS ADD
     case hotspotActionTypes.hotspotsAdd:
       {
-        var isPositionAvailable = !state.hotspots.find(function (hotspot) {
+        var _isPositionAvailable = !state.hotspots.find(function (hotspot) {
           return isHotspotMatch(hotspot, payload.position);
         });
         var defaultContent = state.currentType === hotspotTypes.TEXT ? {
@@ -165,7 +188,7 @@ function hotspotEditorReducer(state, _ref2) {
           content: defaultContent,
           type: createableType
         });
-        return isPositionAvailable ? update(state, {
+        return _isPositionAvailable ? update(state, {
           selectedHotspot: {
             $set: newHotspot
           },
@@ -193,7 +216,7 @@ function hotspotEditorReducer(state, _ref2) {
             $set: hotspot
           },
           currentType: {
-            $set: (_hotspot$type = hotspot.type) !== null && _hotspot$type !== void 0 ? _hotspot$type : defaultTypeWhenMissing
+            $set: (_hotspot$type = hotspot === null || hotspot === void 0 ? void 0 : hotspot.type) !== null && _hotspot$type !== void 0 ? _hotspot$type : defaultTypeWhenMissing
           }
         });
       }
@@ -392,6 +415,12 @@ function useHotspotEditorState() {
       payload: hotspotContent
     });
   };
+  var updateHotspotPosition = function updateHotspotPosition(hotspotPosition) {
+    return dispatch({
+      type: hotspotActionTypes.hotspotPositionChange,
+      payload: hotspotPosition
+    });
+  };
 
   /** Updates the properties of the text hotspot, passes a payload like {color: 'blue'} */
   var updateTextHotspotStyle = function updateTextHotspotStyle(textHotspotStyle) {
@@ -479,6 +508,7 @@ function useHotspotEditorState() {
     switchCurrentType: switchCurrentType,
     updateHotspotDataSource: updateHotspotDataSource,
     updateHotspotTooltip: updateHotspotTooltip,
+    updateHotspotPosition: updateHotspotPosition,
     updateTextHotspotStyle: updateTextHotspotStyle,
     updateTextHotspotContent: updateTextHotspotContent,
     updateDynamicHotspotSourceX: updateDynamicHotspotSourceX,

package/es/components/ImageCard/HotspotContent.js

@@ -174,7 +174,7 @@ var HotspotContent = function HotspotContent(_ref) {
     }, typeof value === 'number' ? formatNumberWithPrecision(value, !isNil(precision) ? precision : Math.abs(value) < 1 ? value === 0 ? 0 : 3 // for small decimals give 3 spots
     : 1,
     // otherwise 1 spot if precision isn't set
-    locale) : value, unit && value !== '--' && /*#__PURE__*/React__default.createElement("span", {
+    locale) : typeof value === 'boolean' ? String(value) : value, unit && value !== '--' && /*#__PURE__*/React__default.createElement("span", {
       className: "".concat(iotPrefix, "--hotspot-content-unit")
     }, unit))));
   }));

package/es/components/ImageCard/ImageHotspots.js

@@ -16,7 +16,7 @@ import 'core-js/modules/es.object.keys.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import React__default, { useState, useMemo, useCallback, useEffect } from 'react';
+import React__default, { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { InlineLoading } from '@carbon/react';
 import warning from 'warning';
@@ -75,6 +75,10 @@ var propTypes = {
    * Emits position obj {x, y} of hotspot to be added.
    */
   onAddHotspotPosition: PropTypes.func,
+  /** Callback when a hotspot is dragged to new position in isEditable mode
+   * Emits new hotspots and updated position obj {x, y} of hotspot.
+   */
+  onUpdateHotspotPosition: PropTypes.func,
   /** Callback when a hotspot is clicked in isEditable mode, emits position obj {x, y} */
   onSelectHotspot: PropTypes.func,
   /**
@@ -115,6 +119,7 @@ var defaultProps = {
   isHotspotDataLoading: false,
   isEditable: false,
   onAddHotspotPosition: function onAddHotspotPosition() {},
+  onUpdateHotspotPosition: function onUpdateHotspotPosition() {},
   onSelectHotspot: function onSelectHotspot() {},
   onHotspotContentChanged: function onHotspotContentChanged() {},
   background: '#eee',
@@ -233,6 +238,7 @@ var calculateHotspotContainerLayout = function calculateHotspotContainerLayout(_
   var width;
   var height;
   var top;
+  var left;
 
   // CONTAIN
   if (objectFit === 'contain') {
@@ -240,32 +246,38 @@ var calculateHotspotContainerLayout = function calculateHotspotContainerLayout(_
       width = imageWidth;
       height = imageWidth / imageRatio;
       top = imageScale > 1 ? imageOffsetY : imageObjectFitOffsetY;
+      left = imageScale > 1 ? 0 : (containerWidth - imageWidth) / 2;
     } else if (imageOrientation === 'portrait') {
       width = imageHeight / imageRatio;
       height = imageHeight;
       top = imageOffsetY;
+      left = (containerWidth - width) / 2;
     }
     // FILL
   } else if (objectFit === 'fill') {
     width = imageScale > 1 ? imageWidth : containerWidth;
     height = imageScale > 1 ? imageHeight : containerHeight;
     top = imageOffsetY;
+    left = 0;
     // NO OBJECT FIT
   } else if (!objectFit) {
     if (imageOrientation === 'landscape') {
       width = imageWidth;
       height = imageWidth / imageRatio;
       top = imageOffsetY;
+      left = 0;
     } else if (imageOrientation === 'portrait') {
       width = imageHeight / imageRatio;
       height = imageHeight;
       top = imageOffsetY;
+      left = (containerWidth - width) / 2;
     }
   }
   return {
     width: width,
     height: height,
-    top: top
+    top: top,
+    left: left
   };
 };
 var calculateObjectFitOffset = function calculateObjectFitOffset(_ref5) {
@@ -510,6 +522,7 @@ var ImageHotspots = function ImageHotspots(_ref9) {
     isEditable = _ref9.isEditable,
     isHotspotDataLoading = _ref9.isHotspotDataLoading,
     onAddHotspotPosition = _ref9.onAddHotspotPosition,
+    onUpdateHotspotPosition = _ref9.onUpdateHotspotPosition,
     onSelectHotspot = _ref9.onSelectHotspot,
     onHotspotContentChanged = _ref9.onHotspotContentChanged,
     zoomMax = _ref9.zoomMax,
@@ -554,9 +567,52 @@ var ImageHotspots = function ImageHotspots(_ref9) {
     _useState12 = _slicedToArray(_useState11, 2),
     options = _useState12[0],
     setOptions = _useState12[1];
+  // Tracks if a hotspot is being dragged and which one.
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    draggingHotspotId = _useState14[0],
+    setDraggingHotspotId = _useState14[1];
+
+  // Ref for outer container
+  var containerRef = useRef(null);
+  var dragStateRef = useRef({
+    // Flag to indicate if a drag is active
+    isDragging: false,
+    // Stores the starting mouse position of a drag
+    dragStartPosition: {
+      x: 0,
+      y: 0
+    },
+    // Tracks the current position during a drag
+    currentDargPosition: null,
+    // Stores layout of image and container
+    layout: {
+      rect: null,
+      hotspotLayout: null
+    },
+    // Tracks Scheduled Animation Frames
+    frame: null
+  });
+
+  // Minimum pixel movement before a drag is initiated
+  var DRAG_THRESHOLD = 5;
   var mergedI18n = useMemo(function () {
     return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
   }, [i18n]);
+  var hotspotsWithId = useMemo(function () {
+    return hotspots.map(function (hotspot, index) {
+      return _objectSpread(_objectSpread({}, hotspot), {}, {
+        id: "".concat(hotspot.x, "-").concat(hotspot.y, "-").concat(index)
+      });
+    });
+  }, [hotspots]);
+  var _useState15 = useState(hotspotsWithId),
+    _useState16 = _slicedToArray(_useState15, 2),
+    editableHotspots = _useState16[0],
+    setEditableHotspots = _useState16[1];
+  useEffect(function () {
+    setEditableHotspots(hotspotsWithId);
+  }, [hotspotsWithId]);
   var handleCtrlKeyUp = useCallback(function (event) {
     // Was the control key unpressed
     if (event.key === keyboardKeys.CONTROL) {
@@ -628,6 +684,11 @@ var ImageHotspots = function ImageHotspots(_ref9) {
     objectFit: displayOption
   };
   var onHotspotClicked = useCallback(function (evt, position) {
+    // prevent click behavior after drag
+    if (dragStateRef.current.isDragging) {
+      return;
+    }
+
     // It is possible to receive two events here, one Mouse event and one Pointer event.
     // When used in the ImageHotspots component the Pointer event can somehow be from a
     // previously clicked hotspot. See https://github.com/carbon-design-system/carbon-addons-iot-react/issues/1803
@@ -636,6 +697,108 @@ var ImageHotspots = function ImageHotspots(_ref9) {
       onSelectHotspot(position);
     }
   }, [onSelectHotspot, isEditable]);
+  var handleMouseDownHotspot = useCallback(function (e, id1) {
+    var hotspot = editableHotspots.find(function (h) {
+      return h.id === id1;
+    });
+    if (!isEditable || (hotspot === null || hotspot === void 0 ? void 0 : hotspot.type) === 'dynamic') {
+      return;
+    }
+    e.stopPropagation();
+    setDraggingHotspotId(id1);
+    dragStateRef.current.isDragging = true;
+    dragStateRef.current.dragStartPosition = {
+      x: e.clientX,
+      y: e.clientY
+    };
+
+    // Calculate layout once at drag start
+    if (containerRef.current) {
+      var rect = containerRef.current.getBoundingClientRect();
+      var hotspotLayout = calculateHotspotContainerLayout(image, container, displayOption);
+      dragStateRef.current.layout = {
+        rect: rect,
+        hotspotLayout: hotspotLayout
+      };
+    }
+  }, [container, displayOption, image, isEditable, editableHotspots]);
+  var handleMouseMoveHotspot = useCallback(function (e) {
+    if (draggingHotspotId !== null && containerRef.current) {
+      var _dragStateRef$current = dragStateRef.current,
+        isDragging = _dragStateRef$current.isDragging,
+        dragStartPosition = _dragStateRef$current.dragStartPosition,
+        layout = _dragStateRef$current.layout;
+      var dx = e.clientX - dragStartPosition.x;
+      var dy = e.clientY - dragStartPosition.y;
+      var distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance > DRAG_THRESHOLD && isDragging) {
+        var rect = layout.rect,
+          hotspotLayout = layout.hotspotLayout;
+        var x = (e.clientX - rect.left - hotspotLayout.left) / hotspotLayout.width * 100;
+        var y = (e.clientY - rect.top - hotspotLayout.top) / hotspotLayout.height * 100;
+        // Clamp within image boundaries
+        x = Math.max(0, Math.min(100, x));
+        y = Math.max(0, Math.min(100, y));
+        dragStateRef.current.currentDargPosition = {
+          x: x,
+          y: y
+        };
+
+        // throttle with requestAnimationFrame
+        if (dragStateRef.current.frame === null) {
+          dragStateRef.current.frame = requestAnimationFrame(function () {
+            setEditableHotspots(function (prev) {
+              return prev.map(function (item) {
+                return item.id === draggingHotspotId ? _objectSpread(_objectSpread({}, item), {}, {
+                  x: dragStateRef.current.currentDargPosition.x,
+                  y: dragStateRef.current.currentDargPosition.y
+                }) : item;
+              });
+            });
+            dragStateRef.current.frame = null;
+          });
+        }
+      }
+    }
+  }, [draggingHotspotId]);
+  var handleMouseUpHotspot = useCallback(function (e) {
+    if (draggingHotspotId !== null && dragStateRef.current.isDragging) {
+      e.stopPropagation();
+      var _ref10 = dragStateRef.current.currentDargPosition || {},
+        x = _ref10.x,
+        y = _ref10.y;
+      onUpdateHotspotPosition({
+        newHotspots: editableHotspots,
+        position: {
+          x: x,
+          y: y
+        }
+      });
+      setDraggingHotspotId(null);
+      dragStateRef.current.currentDargPosition = null;
+      dragStateRef.current.isDragging = false;
+    }
+  }, [editableHotspots, draggingHotspotId, onUpdateHotspotPosition]);
+  useEffect(function () {
+    var dragState = dragStateRef.current;
+    return function () {
+      if (dragState.frame !== null) {
+        cancelAnimationFrame(dragState.frame);
+      }
+    };
+  }, []);
+
+  // Listens to mouse movement for dragging hotspot
+  useEffect(function () {
+    if (!isEditable) return undefined;
+    var containerElement = containerRef.current;
+    containerElement.addEventListener('mousemove', handleMouseMoveHotspot);
+    containerElement.addEventListener('mouseup', handleMouseUpHotspot);
+    return function () {
+      containerElement.removeEventListener('mousemove', handleMouseMoveHotspot);
+      containerElement.removeEventListener('mouseup', handleMouseUpHotspot);
+    };
+  }, [draggingHotspotId, handleMouseMoveHotspot, handleMouseUpHotspot, isEditable]);
   var getIconRenderFunction = useCallback(function () {
     return renderIconByName || (Array.isArray(icons) ? function (name, props) {
       var _icons$find;
@@ -654,7 +817,7 @@ var ImageHotspots = function ImageHotspots(_ref9) {
 
   // Performance improvement
   var cachedHotspots = useMemo(function () {
-    return hotspots.map(function (hotspot, index) {
+    return editableHotspots.map(function (hotspot, index) {
       var _hotspot$content;
       var x = hotspot.x,
         y = hotspot.y;
@@ -664,10 +827,10 @@ var ImageHotspots = function ImageHotspots(_ref9) {
       // Determine whether the icon needs to be dynamically overridden by a threshold
       var matchingAttributeThresholds = [];
       if ((_hotspot$content = hotspot.content) !== null && _hotspot$content !== void 0 && _hotspot$content.attributes) {
-        hotspot.content.attributes.forEach(function (_ref10) {
+        hotspot.content.attributes.forEach(function (_ref11) {
           var _hotspot$content2;
-          var thresholds = _ref10.thresholds,
-            dataSourceId = _ref10.dataSourceId;
+          var thresholds = _ref11.thresholds,
+            dataSourceId = _ref11.dataSourceId;
           if (!isEmpty(thresholds) && !isEmpty((_hotspot$content2 = hotspot.content) === null || _hotspot$content2 === void 0 ? void 0 : _hotspot$content2.values)) {
             var _hotspot$content3;
             var attributeThresholds = findMatchingThresholds(thresholds.map(function (threshold) {
@@ -693,10 +856,13 @@ var ImageHotspots = function ImageHotspots(_ref9) {
         key: "".concat(x, "-").concat(y, "-").concat(index),
         renderIconByName: getIconRenderFunction(),
         isSelected: hotspotIsSelected,
-        onClick: onHotspotClicked
+        onClick: onHotspotClicked,
+        onMouseDown: function onMouseDown(e) {
+          return handleMouseDownHotspot(e, hotspot.id);
+        }
       }));
     });
-  }, [hotspots, selectedHotspots, locale, getIconRenderFunction, isEditable, onHotspotContentChanged, mergedI18n, onHotspotClicked]);
+  }, [editableHotspots, selectedHotspots, locale, getIconRenderFunction, isEditable, onHotspotContentChanged, mergedI18n, onHotspotClicked, handleMouseDownHotspot]);
   var hotspotsStyle = {
     position: 'absolute',
     left: image.offsetX,
@@ -739,7 +905,8 @@ var ImageHotspots = function ImageHotspots(_ref9) {
         // If we leave the container, stop detecting the drag
         stopDrag(cursor, setCursor);
       }
-    }
+    },
+    ref: containerRef
   }, src ? /*#__PURE__*/React__default.createElement("img", {
     id: id,
     className: "".concat(iotPrefix, "--image-card-img"),
@@ -966,6 +1133,17 @@ ImageHotspots.__docgenInfo = {
       },
       "required": false
     },
+    "onUpdateHotspotPosition": {
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      },
+      "description": "Callback when a hotspot is dragged to new position in isEditable mode\nEmits new hotspots and updated position obj {x, y} of hotspot.",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
     "onSelectHotspot": {
       "defaultValue": {
         "value": "() => {}",

package/lib/components/HotspotEditorModal/HotspotEditorModal.js

@@ -332,6 +332,7 @@ var HotspotEditorModal = function HotspotEditorModal(_ref) {
     switchCurrentType = _useHotspotEditorStat.switchCurrentType,
     updateHotspotDataSource = _useHotspotEditorStat.updateHotspotDataSource,
     updateHotspotTooltip = _useHotspotEditorStat.updateHotspotTooltip,
+    updateHotspotPosition = _useHotspotEditorStat.updateHotspotPosition,
     updateTextHotspotStyle = _useHotspotEditorStat.updateTextHotspotStyle,
     updateTextHotspotContent = _useHotspotEditorStat.updateTextHotspotContent,
     updateDynamicHotspotSourceX = _useHotspotEditorStat.updateDynamicHotspotSourceX,
@@ -397,6 +398,8 @@ var HotspotEditorModal = function HotspotEditorModal(_ref) {
     }
     var hotspotsWithoutExampleValues = filteredHotspots.map(function (hotspot) {
       return update__default.default(hotspot, {
+        $unset: ['id'],
+        // Remove the internal id added for drag tracking
         content: {
           $unset: ['values']
         }
@@ -646,6 +649,7 @@ var HotspotEditorModal = function HotspotEditorModal(_ref) {
         hotspotDefaults: hotspotDefaults
       });
     },
+    onUpdateHotspotPosition: updateHotspotPosition,
     onSelectHotspot: setSelectedHotspot,
     selectedHotspots: getSelectedHotspotsList(selectedHotspot, hotspots),
     src: cardConfig.content.src,

package/lib/components/HotspotEditorModal/hooks/hotspotStateHook.js

@@ -77,6 +77,7 @@ var hotspotActionTypes = {
   hotspotDataSourceChange: 'HOTSPOT_DATA_SOURCE_CHANGE',
   hotspotDataSourceSettingsChange: 'HOTSPOT_DATA_SOURCE_SETTINGS_CHANGE',
   hotspotTooltipChange: 'HOTSPOT_TOOLTIP_CHANGE',
+  hotspotPositionChange: 'HOTSPOT_POSITION_CHANGE',
   hotspotSelect: 'HOTSPOT_SELECT',
   hotspotsAdd: 'HOTSPOTS_ADD',
   textHotspotStyleChange: 'TEXT_HOTSPOT_STYLE_CHANGE',
@@ -179,10 +180,32 @@ function hotspotEditorReducer(state, _ref2) {
         };
         return getHotspotUpdate(state, _mergeSpec);
       }
+    // HOTSPOT POSITION CHANGE
+    case hotspotActionTypes.hotspotPositionChange:
+      {
+        var isPositionAvailable = !state.hotspots.find(function (hotspot) {
+          return isHotspotMatch(hotspot, payload.position);
+        });
+        if (isPositionAvailable) {
+          // Find the updated hotspot in the new hotspots array to maintain selection
+          var updatedSelectedHotspot = payload.newHotspots.find(function (hotspot) {
+            return isHotspotMatch(hotspot, payload.position);
+          });
+          return update__default.default(state, {
+            hotspots: {
+              $set: payload.newHotspots
+            },
+            selectedHotspot: {
+              $set: updatedSelectedHotspot
+            }
+          });
+        }
+        return state;
+      }
     // HOTSPOTS ADD
     case hotspotActionTypes.hotspotsAdd:
       {
-        var isPositionAvailable = !state.hotspots.find(function (hotspot) {
+        var _isPositionAvailable = !state.hotspots.find(function (hotspot) {
           return isHotspotMatch(hotspot, payload.position);
         });
         var defaultContent = state.currentType === hotspotTypes.TEXT ? {
@@ -193,7 +216,7 @@ function hotspotEditorReducer(state, _ref2) {
           content: defaultContent,
           type: createableType
         });
-        return isPositionAvailable ? update__default.default(state, {
+        return _isPositionAvailable ? update__default.default(state, {
           selectedHotspot: {
             $set: newHotspot
           },
@@ -221,7 +244,7 @@ function hotspotEditorReducer(state, _ref2) {
             $set: hotspot
           },
           currentType: {
-            $set: (_hotspot$type = hotspot.type) !== null && _hotspot$type !== void 0 ? _hotspot$type : defaultTypeWhenMissing
+            $set: (_hotspot$type = hotspot === null || hotspot === void 0 ? void 0 : hotspot.type) !== null && _hotspot$type !== void 0 ? _hotspot$type : defaultTypeWhenMissing
           }
         });
       }
@@ -420,6 +443,12 @@ function useHotspotEditorState() {
       payload: hotspotContent
     });
   };
+  var updateHotspotPosition = function updateHotspotPosition(hotspotPosition) {
+    return dispatch({
+      type: hotspotActionTypes.hotspotPositionChange,
+      payload: hotspotPosition
+    });
+  };
 
   /** Updates the properties of the text hotspot, passes a payload like {color: 'blue'} */
   var updateTextHotspotStyle = function updateTextHotspotStyle(textHotspotStyle) {
@@ -507,6 +536,7 @@ function useHotspotEditorState() {
     switchCurrentType: switchCurrentType,
     updateHotspotDataSource: updateHotspotDataSource,
     updateHotspotTooltip: updateHotspotTooltip,
+    updateHotspotPosition: updateHotspotPosition,
     updateTextHotspotStyle: updateTextHotspotStyle,
     updateTextHotspotContent: updateTextHotspotContent,
     updateDynamicHotspotSourceX: updateDynamicHotspotSourceX,

package/lib/components/ImageCard/HotspotContent.js

@@ -182,7 +182,7 @@ var HotspotContent = function HotspotContent(_ref) {
     }, typeof value === 'number' ? cardUtilityFunctions.formatNumberWithPrecision(value, !isNil(precision) ? precision : Math.abs(value) < 1 ? value === 0 ? 0 : 3 // for small decimals give 3 spots
     : 1,
     // otherwise 1 spot if precision isn't set
-    locale) : value, unit && value !== '--' && /*#__PURE__*/React__default.default.createElement("span", {
+    locale) : typeof value === 'boolean' ? String(value) : value, unit && value !== '--' && /*#__PURE__*/React__default.default.createElement("span", {
       className: "".concat(iotPrefix, "--hotspot-content-unit")
     }, unit))));
   }));