@splunk/dashboard-toolbar 29.5.2 → 29.7.0

package/buttons/index.js

@@ -4,39 +4,10 @@ in part without a valid written license from Splunk Inc. is PROHIBITED. */
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -59,26 +30,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // src/buttons/index.ts
 var buttons_exports = {};
@@ -188,9 +139,8 @@ var Item_default = styled_components_default.div``;
 var aiButtonStyle = { height: "100%" };
 var EmptyComponent = () => null;
 var AIAssistant = () => {
-  var _a;
   const { allowDashboardAIAssistant } = (0, dashboard_context_exports.useFeatureFlags)();
-  const { AIButton } = (_a = (0, dashboard_context_exports.useMicrofrontendContext)().microfrontendProxy) != null ? _a : {};
+  const { AIButton } = (0, dashboard_context_exports.useMicrofrontendContext)().microfrontendProxy ?? {};
   const dashboardApi = (0, dashboard_context_exports.useDashboardApi)();
   const { colorScheme, density, family } = (0, themes_exports.useSplunkTheme)();
   const handleError = (0, react_exports.useCallback)((error) => {
@@ -334,37 +284,25 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
 `;
 var iconSize = 24;
 var menuIconSize = 20;
-var prepareIcon = (_a) => {
-  var _b = _a, {
-    Icon,
-    screenReaderContent,
-    isMenu = false
-  } = _b, props = __objRest(_b, [
-    "Icon",
-    "screenReaderContent",
-    "isMenu"
-  ]);
+var prepareIcon = ({
+  Icon,
+  screenReaderContent,
+  isMenu = false,
+  ...props
+}) => {
   const size = isMenu ? menuIconSize : iconSize;
-  return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(Icon, __spreadValues({ width: size, height: size }, props)), isMenu && /* @__PURE__ */ react_default.createElement(StyledDropdownIcon, { variant: "filled", width: 9, height: size }), screenReaderContent && /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, null, screenReaderContent));
+  return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(Icon, { width: size, height: size, ...props }), isMenu && /* @__PURE__ */ react_default.createElement(StyledDropdownIcon, { variant: "filled", width: 9, height: size }), screenReaderContent && /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, null, screenReaderContent));
 };
-var IconButton = (_a) => {
-  var _b = _a, {
-    icon: icon9,
-    buttonRef,
-    disabled = false,
-    onClick,
-    label,
-    tooltipContent,
-    testLabel
-  } = _b, rest = __objRest(_b, [
-    "icon",
-    "buttonRef",
-    "disabled",
-    "onClick",
-    "label",
-    "tooltipContent",
-    "testLabel"
-  ]);
+var IconButton = ({
+  icon: icon9,
+  buttonRef,
+  disabled = false,
+  onClick,
+  label,
+  tooltipContent,
+  testLabel,
+  ...rest
+}) => {
   const button = /* @__PURE__ */ react_default.createElement(
     Button_default,
     {
@@ -378,7 +316,7 @@ var IconButton = (_a) => {
       "data-clickable": true
     }
   );
-  return /* @__PURE__ */ react_default.createElement(Item_default, __spreadValues({}, rest), tooltipContent ? /* @__PURE__ */ react_default.createElement(Tooltip_default, { contentRelationship: "label", content: tooltipContent }, button) : button);
+  return /* @__PURE__ */ react_default.createElement(Item_default, { ...rest }, tooltipContent ? /* @__PURE__ */ react_default.createElement(Tooltip_default, { contentRelationship: "label", content: tooltipContent }, button) : button);
 };
 var IconButton_default = IconButton;
 
@@ -386,13 +324,13 @@ var IconButton_default = IconButton;
 var BaseDropdownButton = styled_components_default(Button_default)`
     max-width: '50px';
 `;
-var StyledDropdownButton = react_default.forwardRef((_a, ref) => {
-  var _b = _a, { tooltipContent } = _b, props = __objRest(_b, ["tooltipContent"]);
+var StyledDropdownButton = react_default.forwardRef(({ tooltipContent, ...props }, ref) => {
   const button = /* @__PURE__ */ react_default.createElement(
     BaseDropdownButton,
-    __spreadProps(__spreadValues({}, props), {
+    {
+      ...props,
       elementRef: ref
-    })
+    }
   );
   return tooltipContent ? /* @__PURE__ */ react_default.createElement(Tooltip_default, { contentRelationship: "label", content: tooltipContent }, button) : button;
 });
@@ -401,7 +339,7 @@ var StyledDropdownButton = react_default.forwardRef((_a, ref) => {
 var ScrollableMenu = styled_components_default(Menu_default).attrs(
   ({ maxHeight }) => ({
     style: {
-      maxHeight: maxHeight != null ? maxHeight : void 0
+      maxHeight: maxHeight ?? void 0
     }
   })
 )`
@@ -478,11 +416,11 @@ var Charts = ({ dashboardApi, preset }) => {
       options
     }) => () => {
       (0, dashboard_state_exports.batch)(() => {
-        dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+        dashboardApi?.createVisualization({
           visualizationDefinition: { type, options }
         });
         if (showNewDataForViz) {
-          dashboardApi == null ? void 0 : dashboardApi.openPanel({
+          dashboardApi?.openPanel({
             activePanel: "connectData",
             panelProps: {
               bindingType: "primary",
@@ -551,11 +489,11 @@ var configurationIcon = prepareIcon({
 var Config = ({ dashboardApi }) => {
   const configButtonRef = (0, dashboard_context_exports.useToolbarRef)("config");
   const handleClick = (0, react_exports.useCallback)(() => {
-    const isOpen = (dashboardApi == null ? void 0 : dashboardApi.getOpenedPanel()) === "config";
+    const isOpen = dashboardApi?.getOpenedPanel() === "config";
     if (isOpen) {
-      dashboardApi == null ? void 0 : dashboardApi.closePanel();
+      dashboardApi?.closePanel();
     } else {
-      dashboardApi == null ? void 0 : dashboardApi.openPanel({
+      dashboardApi?.openPanel({
         activePanel: "config",
         panelProps: {
           focusOnOpen: true
@@ -617,13 +555,13 @@ var dataInputIcon = prepareIcon({
 var Data = ({ dashboardApi }) => {
   const dataButtonRef = (0, dashboard_context_exports.useToolbarRef)("dataOverview");
   const handleClick = (0, react_exports.useCallback)(() => {
-    const isOpen = (dashboardApi == null ? void 0 : dashboardApi.getOpenedPanel()) === "dataOverview";
+    const isOpen = dashboardApi?.getOpenedPanel() === "dataOverview";
     if (isOpen) {
       dashboardApi.closePanel();
     } else {
       (0, dashboard_state_exports.batch)(() => {
-        dashboardApi == null ? void 0 : dashboardApi.selectVisualization([]);
-        dashboardApi == null ? void 0 : dashboardApi.openPanel({
+        dashboardApi?.selectVisualization([]);
+        dashboardApi?.openPanel({
           activePanel: "dataOverview",
           panelProps: {
             focusOnOpen: true
@@ -667,11 +605,13 @@ var CheckmarkPlaceholder = styled_components_default.span`
 `;
 var Display = ({
   appearance = "default",
-  dashboardApi
+  dashboardApi,
+  children,
+  onRequestOpen,
+  onRequestClose
 }) => {
-  var _a;
   const globalInputs = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectGlobalInputs);
-  const hasGlobalInputs = ((_a = globalInputs == null ? void 0 : globalInputs.length) != null ? _a : 0) > 0;
+  const hasGlobalInputs = (globalInputs?.length ?? 0) > 0;
   const areInputsCollapsed = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectAreGlobalItemsCollapsed);
   const showInputs = !areInputsCollapsed;
   const description = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectDescription);
@@ -682,18 +622,36 @@ var Display = ({
   const isDescriptionCollapsed = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectIsDescriptionCollapsed);
   const showDescription = !isDescriptionCollapsed;
   const handleInputsToggle = (0, react_exports.useCallback)(() => {
-    dashboardApi == null ? void 0 : dashboardApi.setAreGlobalInputsCollapsed({
+    dashboardApi?.setAreGlobalInputsCollapsed({
       collapsed: !areInputsCollapsed
     });
   }, [dashboardApi, areInputsCollapsed]);
   const handleDescriptionToggle = (0, react_exports.useCallback)(() => {
-    dashboardApi == null ? void 0 : dashboardApi.setIsDescriptionCollapsed({
+    dashboardApi?.setIsDescriptionCollapsed({
       collapsed: !isDescriptionCollapsed
     });
   }, [dashboardApi, isDescriptionCollapsed]);
-  const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
+  const {
+    handleRequestClose: baseHandleRequestClose,
+    handleRequestOpen: baseHandleRequestOpen,
+    isOpen
+  } = useDropdown_default({
     isContentClickClose: true
   });
+  const handleRequestOpen = (0, react_exports.useCallback)(
+    (event, data) => {
+      onRequestOpen?.(event, data);
+      baseHandleRequestOpen();
+    },
+    [onRequestOpen, baseHandleRequestOpen]
+  );
+  const handleRequestClose = (0, react_exports.useCallback)(
+    (data) => {
+      onRequestClose?.(data);
+      baseHandleRequestClose(data);
+    },
+    [onRequestClose, baseHandleRequestClose]
+  );
   const buttonToggle = (0, react_exports.useMemo)(
     () => /* @__PURE__ */ react_default.createElement(
       Button_default,
@@ -753,7 +711,7 @@ var Display = ({
     descriptionCheckmarkIcon,
     inputsCheckmarkIcon
   ]);
-  if (dropdownMenuChildren.length === 0) {
+  if (dropdownMenuChildren.length === 0 && react_default.Children.toArray(children).length === 0) {
     return null;
   }
   return /* @__PURE__ */ react_default.createElement(Tooltip_default, { contentRelationship: "label", content: (0, i18n_exports._)("Display") }, /* @__PURE__ */ react_default.createElement(
@@ -771,7 +729,8 @@ var Display = ({
         focusMode: "normal",
         "aria-label": (0, i18n_exports._)("Display options")
       },
-      dropdownMenuChildren
+      dropdownMenuChildren,
+      children
     )
   ));
 };
@@ -790,8 +749,8 @@ var icon2 = prepareIcon({
   Icon: Square_default
 });
 var EmptyVisualization = ({ dashboardApi }) => {
-  const handleClick = (0, react_exports.useCallback)(() => __async(null, null, function* () {
-    dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+  const handleClick = (0, react_exports.useCallback)(async () => {
+    dashboardApi?.createVisualization({
       visualizationDefinition: {
         type: "splunk.rectangle",
         options: {
@@ -800,10 +759,10 @@ var EmptyVisualization = ({ dashboardApi }) => {
         }
       }
     });
-    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+    dashboardApi?.openPanel({
       activePanel: "config"
     });
-  }), [dashboardApi]);
+  }, [dashboardApi]);
   return /* @__PURE__ */ react_default.createElement(
     IconButton_default,
     {
@@ -879,7 +838,7 @@ var useToolbarButtonClick = (event, onClick) => {
           })
         );
       }
-      onClick == null ? void 0 : onClick(...args);
+      onClick?.(...args);
     },
     [dispatch, event, onClick]
   );
@@ -891,9 +850,9 @@ var icon3 = prepareIcon({
 });
 var FullScreen = ({ dashboardApi }) => {
   const isFullscreen = !!(0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectFullscreenElement);
-  const enterFullscreen = (0, react_exports.useCallback)(() => __async(null, null, function* () {
-    yield dashboardApi == null ? void 0 : dashboardApi.enterFullscreen();
-  }), [dashboardApi]);
+  const enterFullscreen = (0, react_exports.useCallback)(async () => {
+    await dashboardApi?.enterFullscreen();
+  }, [dashboardApi]);
   const handleClick = useToolbarButtonClick("fullscreen", enterFullscreen);
   return /* @__PURE__ */ react_default.createElement(
     IconButton_default,
@@ -940,10 +899,9 @@ var GridLineSwitch = ({
   showSeparator,
   layoutType
 }) => {
-  var _a;
-  const showGrid = (_a = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectAreGridLinesEnabled)) != null ? _a : false;
+  const showGrid = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectAreGridLinesEnabled) ?? false;
   const handleClick = (0, react_exports.useCallback)(() => {
-    dashboardApi == null ? void 0 : dashboardApi.toggleGridLines(!showGrid);
+    dashboardApi?.toggleGridLines(!showGrid);
   }, [dashboardApi, showGrid]);
   const separator = (0, react_exports.useMemo)(
     () => showSeparator ? /* @__PURE__ */ react_default.createElement(ItemSeparator_default, { key: "item-separator" }) : null,
@@ -1014,8 +972,8 @@ var IconGallery = ({ dashboardApi }) => {
     []
   );
   const handlePanelClick = (0, react_exports.useCallback)(
-    (iconURL) => __async(null, null, function* () {
-      dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+    async (iconURL) => {
+      dashboardApi?.createVisualization({
         visualizationDefinition: {
           type: "splunk.singlevalueicon",
           options: {
@@ -1024,11 +982,11 @@ var IconGallery = ({ dashboardApi }) => {
           }
         }
       });
-      dashboardApi == null ? void 0 : dashboardApi.openPanel({
+      dashboardApi?.openPanel({
         activePanel: "config"
       });
       handleForceClose();
-    }),
+    },
     [dashboardApi, handleForceClose]
   );
   return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
@@ -1137,8 +1095,8 @@ var icon4 = prepareIcon({
   Icon: Picture_default
 });
 var Image = ({ dashboardApi }) => {
-  const handleClick = (0, react_exports.useCallback)(() => __async(null, null, function* () {
-    dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+  const handleClick = (0, react_exports.useCallback)(async () => {
+    dashboardApi?.createVisualization({
       visualizationDefinition: {
         type: "splunk.image",
         options: {
@@ -1146,10 +1104,10 @@ var Image = ({ dashboardApi }) => {
         }
       }
     });
-    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+    dashboardApi?.openPanel({
       activePanel: "config"
     });
-  }), [dashboardApi]);
+  }, [dashboardApi]);
   return /* @__PURE__ */ react_default.createElement(
     IconButton_default,
     {
@@ -1193,8 +1151,8 @@ var ImageGallery = ({ dashboardApi }) => {
     isContentClickClose: false
   });
   const handlePanelClick = (0, react_exports.useCallback)(
-    (imageUrl) => __async(null, null, function* () {
-      dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+    async (imageUrl) => {
+      dashboardApi?.createVisualization({
         visualizationDefinition: {
           type: "splunk.image",
           options: {
@@ -1203,11 +1161,11 @@ var ImageGallery = ({ dashboardApi }) => {
           }
         }
       });
-      dashboardApi == null ? void 0 : dashboardApi.openPanel({
+      dashboardApi?.openPanel({
         activePanel: "config"
       });
       handleForceClose();
-    }),
+    },
     [dashboardApi, handleForceClose]
   );
   return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
@@ -1287,13 +1245,16 @@ var onCreateInputClickFactory = ({
   if (!dashboardApi) {
     return;
   }
-  const newConfig = __spreadProps(__spreadValues({}, defaultConfig), {
+  const newConfig = {
+    ...defaultConfig,
     type,
-    options: __spreadValues({}, defaultConfig.options)
-  });
+    options: {
+      ...defaultConfig.options
+    }
+  };
   if (showToken) {
     newConfig.options.token = dashboard_definition_exports.DashboardDefinition.fromJSON(
-      dashboardApi == null ? void 0 : dashboardApi.getDefinition()
+      dashboardApi?.getDefinition()
     ).nextTokenId(tokenPrefix);
   }
   dashboardApi.addInput(newConfig);
@@ -1308,7 +1269,7 @@ var Inputs = ({
   });
   const InputTypeButtons = (0, react_exports.useMemo)(() => {
     const buttons = [];
-    const inputs = preset == null ? void 0 : preset.inputs;
+    const inputs = preset?.inputs;
     (0, lodash_exports.each)(inputs, (InputImpl, type) => {
       const {
         baseShape = {},
@@ -1390,7 +1351,7 @@ var icon5 = prepareIcon({
 });
 var Markdown = ({ dashboardApi }) => {
   const handleClick = (0, react_exports.useCallback)(() => {
-    dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+    dashboardApi?.createVisualization({
       visualizationDefinition: {
         type: "splunk.markdown",
         options: {
@@ -1398,7 +1359,7 @@ var Markdown = ({ dashboardApi }) => {
         }
       }
     });
-    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+    dashboardApi?.openPanel({
       activePanel: "config"
     });
   }, [dashboardApi]);
@@ -1421,7 +1382,7 @@ var ModeSwitch = () => {
   const appearance = mode === "edit" ? "secondary" : "primary";
   const label = mode === "edit" ? (0, i18n_exports._)("View") : (0, i18n_exports._)("Edit");
   const handleClick = (0, react_exports.useCallback)(() => {
-    dashboardApi == null ? void 0 : dashboardApi.switchMode(mode === "edit" ? "view" : "edit");
+    dashboardApi?.switchMode(mode === "edit" ? "view" : "edit");
   }, [mode, dashboardApi]);
   return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
     Button_default,
@@ -1453,17 +1414,13 @@ var icon6 = prepareIcon({
 });
 var Redo = ({ dashboardApi }) => {
   const [canRedo, setCanRedo] = (0, react_exports.useState)(
-    () => {
-      var _a;
-      return (_a = dashboardApi == null ? void 0 : dashboardApi.canRedo()) != null ? _a : false;
-    }
+    () => dashboardApi?.canRedo() ?? false
   );
   const onDefinitionChange = (0, react_exports.useCallback)(() => {
-    var _a;
-    setCanRedo((_a = dashboardApi == null ? void 0 : dashboardApi.canRedo()) != null ? _a : false);
+    setCanRedo(dashboardApi?.canRedo() ?? false);
   }, [dashboardApi]);
   (0, react_exports.useEffect)(() => {
-    if (!(dashboardApi == null ? void 0 : dashboardApi.historyManager)) {
+    if (!dashboardApi?.historyManager) {
       return () => void 0;
     }
     return dashboardApi.historyManager.subscribe({
@@ -1568,11 +1525,11 @@ var Shapes = ({ dashboardApi, layoutType }) => {
   const handleCreateVizButtonClick = (0, react_exports.useCallback)(
     (vizToCreate, layoutItemType) => {
       return () => {
-        dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+        dashboardApi?.createVisualization({
           visualizationDefinition: vizToCreate,
           layoutItemType
         });
-        dashboardApi == null ? void 0 : dashboardApi.openPanel({ activePanel: "config" });
+        dashboardApi?.openPanel({ activePanel: "config" });
       };
     },
     [dashboardApi]
@@ -1694,11 +1651,11 @@ var tokenManagerIcon = prepareIcon({
 var TokenManager = ({ dashboardApi }) => {
   const { showTokenManager } = (0, dashboard_context_exports.useFeatureFlags)();
   const handleClick = (0, react_exports.useCallback)(() => {
-    const isOpen = (dashboardApi == null ? void 0 : dashboardApi.getOpenedPanel()) === "tokenManager";
+    const isOpen = dashboardApi?.getOpenedPanel() === "tokenManager";
     if (isOpen) {
-      dashboardApi == null ? void 0 : dashboardApi.closePanel();
+      dashboardApi?.closePanel();
     } else {
-      dashboardApi == null ? void 0 : dashboardApi.openPanel({
+      dashboardApi?.openPanel({
         activePanel: "tokenManager",
         panelProps: {
           focusOnOpen: true
@@ -1735,17 +1692,13 @@ var icon8 = prepareIcon({
 });
 var Undo = ({ dashboardApi }) => {
   const [canUndo, setCanUndo] = (0, react_exports.useState)(
-    () => {
-      var _a;
-      return (_a = dashboardApi == null ? void 0 : dashboardApi.canUndo()) != null ? _a : false;
-    }
+    () => dashboardApi?.canUndo() ?? false
   );
   const onDefinitionChange = (0, react_exports.useCallback)(() => {
-    var _a;
-    setCanUndo((_a = dashboardApi == null ? void 0 : dashboardApi.canUndo()) != null ? _a : false);
+    setCanUndo(dashboardApi?.canUndo() ?? false);
   }, [dashboardApi]);
   (0, react_exports.useEffect)(() => {
-    if (!(dashboardApi == null ? void 0 : dashboardApi.historyManager)) {
+    if (!dashboardApi?.historyManager) {
       return () => void 0;
     }
     return dashboardApi.historyManager.subscribe({
@@ -1801,27 +1754,27 @@ var ZoomMenu = ({
 }) => {
   const handleZoomOutClick = (0, react_exports.useCallback)(() => {
     setScaleType(null);
-    dashboardApi == null ? void 0 : dashboardApi.zoomOut();
+    dashboardApi?.zoomOut();
   }, [setScaleType, dashboardApi]);
   const handleZoomInClick = (0, react_exports.useCallback)(() => {
     setScaleType(null);
-    dashboardApi == null ? void 0 : dashboardApi.zoomIn();
+    dashboardApi?.zoomIn();
   }, [setScaleType, dashboardApi]);
   const handleScaleChange = (0, react_exports.useCallback)(
     (scale) => () => {
       setCurrentScale(scale);
       setScaleType(null);
-      dashboardApi == null ? void 0 : dashboardApi.setScale({ scale: scale / 100 });
+      dashboardApi?.setScale({ scale: scale / 100 });
     },
     [setScaleType, setCurrentScale, dashboardApi]
   );
   const handleFitToWidthClick = (0, react_exports.useCallback)(() => {
     setScaleType("fit");
-    dashboardApi == null ? void 0 : dashboardApi.fitToWidth();
+    dashboardApi?.fitToWidth();
   }, [setScaleType, dashboardApi]);
   const handleAutoClick = (0, react_exports.useCallback)(() => {
     setScaleType("auto");
-    dashboardApi == null ? void 0 : dashboardApi.fitToWidth({ maxScale: 1 });
+    dashboardApi?.fitToWidth({ maxScale: 1 });
   }, [setScaleType, dashboardApi]);
   const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
     isContentClickClose: true
@@ -1960,7 +1913,8 @@ var StyledEndAdornment = styled_components_default.span`
 var percentAdornment = /* @__PURE__ */ react_default.createElement(StyledEndAdornment, null, "%");
 var ZoomNumber = ({
   currentScale,
-  onScaleChange
+  onScaleChange,
+  ...rest
 }) => {
   const onValueChange = (0, react_exports.useCallback)(
     (_e, value = 100) => {
@@ -1976,6 +1930,7 @@ var ZoomNumber = ({
   return /* @__PURE__ */ react_default.createElement(
     StyledNumber,
     {
+      ...rest,
       value: currentScale,
       onChange: handleChange,
       onKeyDown: handleKeyPress,
@@ -2006,6 +1961,33 @@ var StyledTooltip = styled_components_default(Tooltip_default)`
         display: flex;
     }
 `;
+var ZoomTooltipChildren = ({
+  currentScale,
+  onScaleChange,
+  dashboardApi,
+  appearance,
+  setCurrentScale,
+  scaleType,
+  setScaleType,
+  ...tooltipProps
+}) => /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(
+  ZoomNumber,
+  {
+    currentScale,
+    onScaleChange,
+    ...tooltipProps
+  }
+), /* @__PURE__ */ react_default.createElement(
+  ZoomMenu,
+  {
+    dashboardApi,
+    appearance,
+    currentScale,
+    setCurrentScale,
+    scaleType,
+    setScaleType
+  }
+));
 var Zoom = ({
   showSeparator = true,
   appearance = "default",
@@ -2035,10 +2017,9 @@ var Zoom = ({
   }, [currentScale, scaleType, mode, debouncedDispatch]);
   const activeTabId = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectActiveTab);
   (0, react_exports.useEffect)(() => {
-    var _a;
-    const subscription = (_a = dashboardApi == null ? void 0 : dashboardApi.getZoomLevel()) == null ? void 0 : _a.subscribe({ next: handleZoom });
+    const subscription = dashboardApi?.getZoomLevel()?.subscribe({ next: handleZoom });
     return () => {
-      subscription == null ? void 0 : subscription.unsubscribe();
+      subscription?.unsubscribe();
     };
   }, [dashboardApi, activeTabId, handleZoom]);
   const separator = (0, react_exports.useMemo)(
@@ -2049,7 +2030,7 @@ var Zoom = ({
     (scale) => () => {
       setCurrentScale(scale);
       setScaleType(null);
-      dashboardApi == null ? void 0 : dashboardApi.setScale({ scale: scale / 100 });
+      dashboardApi?.setScale({ scale: scale / 100 });
     },
     [dashboardApi]
   );
@@ -2060,18 +2041,12 @@ var Zoom = ({
       content: (0, i18n_exports._)("Zoom level")
     },
     /* @__PURE__ */ react_default.createElement(
-      ZoomNumber,
+      ZoomTooltipChildren,
       {
         currentScale,
-        onScaleChange: handleScaleChange
-      }
-    ),
-    /* @__PURE__ */ react_default.createElement(
-      ZoomMenu,
-      {
+        onScaleChange: handleScaleChange,
         dashboardApi,
         appearance,
-        currentScale,
         setCurrentScale,
         scaleType,
         setScaleType