@splunk/dashboard-toolbar 29.5.2 → 29.7.0

package/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/index.ts
 var src_exports = {};
@@ -250,37 +201,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,
     {
@@ -294,7 +233,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;
 
@@ -440,16 +379,12 @@ var Group = styled_components_default.div.attrs({
     flex-direction: row;
     gap: ${(props) => props.gap};
 `;
-var ItemGroup = (_a) => {
-  var _b = _a, {
-    children,
-    borders = true,
-    gap
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "borders",
-    "gap"
-  ]);
+var ItemGroup = ({
+  children,
+  borders = true,
+  gap,
+  ...rest
+}) => {
   const items = react_default.Children.map(
     children,
     (child) => child && react_default.cloneElement(child, rest)
@@ -538,19 +473,13 @@ var Toolbar = ({
   );
   const leftAlignItems = (0, react_exports.useMemo)(() => {
     const items = toolbarItems.filter(
-      (item) => {
-        var _a;
-        return ((_a = item.props) == null ? void 0 : _a.align) !== "right";
-      }
+      (item) => item.props?.align !== "right"
     );
     return injectDashboardProps(items);
   }, [toolbarItems, injectDashboardProps]);
   const rightAlignItems = (0, react_exports.useMemo)(() => {
     const items = toolbarItems.filter(
-      (item) => {
-        var _a;
-        return ((_a = item.props) == null ? void 0 : _a.align) === "right";
-      }
+      (item) => item.props?.align === "right"
     );
     return injectDashboardProps(items);
   }, [toolbarItems, injectDashboardProps]);
@@ -562,12 +491,11 @@ var Toolbar = ({
       return void 0;
     }
     observerRef.current = new MutationObserver(() => {
-      var _a, _b;
-      const firstFocusableButton = (_a = toolbarRef.current) == null ? void 0 : _a.querySelector(
+      const firstFocusableButton = toolbarRef.current?.querySelector(
         'button:not([disabled]):not([aria-disabled="true"]):not([tabindex="-1"])'
       );
-      firstFocusableButton == null ? void 0 : firstFocusableButton.focus();
-      (_b = observerRef.current) == null ? void 0 : _b.disconnect();
+      firstFocusableButton?.focus();
+      observerRef.current?.disconnect();
     });
     if (toolbarRef.current) {
       observerRef.current.observe(toolbarRef.current, {
@@ -576,8 +504,7 @@ var Toolbar = ({
       });
     }
     return () => {
-      var _a;
-      (_a = observerRef.current) == null ? void 0 : _a.disconnect();
+      observerRef.current?.disconnect();
     };
   }, [mode]);
   if (!toolbarItems.length) {
@@ -608,9 +535,8 @@ var dashboard_ui_default = "default" in defaultImport16 ? defaultImport16.defaul
 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) => {
@@ -716,13 +642,13 @@ var useDropdown_default = useDropdown;
 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;
 });
@@ -731,7 +657,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
     }
   })
 )`
@@ -808,11 +734,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",
@@ -881,11 +807,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
@@ -947,13 +873,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
@@ -997,11 +923,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);
@@ -1012,18 +940,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 buttonToggle2 = (0, react_exports.useMemo)(
     () => /* @__PURE__ */ react_default.createElement(
       Button_default,
@@ -1083,7 +1029,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(
@@ -1101,7 +1047,8 @@ var Display = ({
         focusMode: "normal",
         "aria-label": (0, i18n_exports._)("Display options")
       },
-      dropdownMenuChildren
+      dropdownMenuChildren,
+      children
     )
   ));
 };
@@ -1120,8 +1067,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: {
@@ -1130,10 +1077,10 @@ var EmptyVisualization = ({ dashboardApi }) => {
         }
       }
     });
-    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+    dashboardApi?.openPanel({
       activePanel: "config"
     });
-  }), [dashboardApi]);
+  }, [dashboardApi]);
   return /* @__PURE__ */ react_default.createElement(
     IconButton_default,
     {
@@ -1209,7 +1156,7 @@ var useToolbarButtonClick = (event, onClick) => {
           })
         );
       }
-      onClick == null ? void 0 : onClick(...args);
+      onClick?.(...args);
     },
     [dispatch, event, onClick]
   );
@@ -1221,9 +1168,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,
@@ -1260,10 +1207,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,
@@ -1334,8 +1280,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: {
@@ -1344,11 +1290,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(
@@ -1457,8 +1403,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: {
@@ -1466,10 +1412,10 @@ var Image = ({ dashboardApi }) => {
         }
       }
     });
-    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+    dashboardApi?.openPanel({
       activePanel: "config"
     });
-  }), [dashboardApi]);
+  }, [dashboardApi]);
   return /* @__PURE__ */ react_default.createElement(
     IconButton_default,
     {
@@ -1513,8 +1459,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: {
@@ -1523,11 +1469,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(
@@ -1607,13 +1553,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);
@@ -1628,7 +1577,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 = {},
@@ -1710,7 +1659,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: {
@@ -1718,7 +1667,7 @@ var Markdown = ({ dashboardApi }) => {
         }
       }
     });
-    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+    dashboardApi?.openPanel({
       activePanel: "config"
     });
   }, [dashboardApi]);
@@ -1741,7 +1690,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,
@@ -1773,17 +1722,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({
@@ -1868,11 +1813,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]
@@ -1994,11 +1939,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
@@ -2035,17 +1980,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({
@@ -2101,27 +2042,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
@@ -2260,7 +2201,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) => {
@@ -2276,6 +2218,7 @@ var ZoomNumber = ({
   return /* @__PURE__ */ react_default.createElement(
     StyledNumber,
     {
+      ...rest,
       value: currentScale,
       onChange: handleChange,
       onKeyDown: handleKeyPress,
@@ -2306,6 +2249,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",
@@ -2335,10 +2305,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)(
@@ -2349,7 +2318,7 @@ var Zoom = ({
     (scale) => () => {
       setCurrentScale(scale);
       setScaleType(null);
-      dashboardApi == null ? void 0 : dashboardApi.setScale({ scale: scale / 100 });
+      dashboardApi?.setScale({ scale: scale / 100 });
     },
     [dashboardApi]
   );
@@ -2360,18 +2329,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
@@ -2412,7 +2375,7 @@ var ActionsGroup = ({ children }) => {
 var ActionsGroup_default = ActionsGroup;
 
 // src/groups/ControlGroup.tsx
-var ControlGroup = (props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), /* @__PURE__ */ react_default.createElement(Fullscreen_default, null));
+var ControlGroup = (props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, { ...props }, /* @__PURE__ */ react_default.createElement(Fullscreen_default, null));
 var ControlGroup_default = ControlGroup;
 
 // src/groups/EditingGroup.tsx
@@ -2428,30 +2391,24 @@ var EditingGroup = (props) => {
   const zoomControl = (0, react_exports.useMemo)(() => {
     return layoutType === "absolute" ? [/* @__PURE__ */ react_default.createElement(Zoom, { key: "zoom", showSeparator: borders })] : null;
   }, [layoutType, borders]);
-  return /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadProps(__spreadValues({}, props), { borders: false, gap: spacingSmall }), /* @__PURE__ */ react_default.createElement(GridLineSwitch_default, { showSeparator: enableModeSwitch && borders }), zoomControl, modeSwitch);
+  return /* @__PURE__ */ react_default.createElement(ItemGroup_default, { ...props, borders: false, gap: spacingSmall }, /* @__PURE__ */ react_default.createElement(GridLineSwitch_default, { showSeparator: enableModeSwitch && borders }), zoomControl, modeSwitch);
 };
 var EditingGroup_default = EditingGroup;
 
 // src/groups/EditorGroup.tsx
-var EditorGroup = (props) => {
-  var _a;
-  return /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({ borders: false }, props), /* @__PURE__ */ react_default.createElement(Source_default, { onClick: (_a = props.sourceButtonOnClick) != null ? _a : dashboard_utils_exports.noop }));
-};
+var EditorGroup = (props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, { borders: false, ...props }, /* @__PURE__ */ react_default.createElement(Source_default, { onClick: props.sourceButtonOnClick ?? dashboard_utils_exports.noop }));
 var EditorGroup_default = EditorGroup;
 
 // src/groups/EditorsControlGroup.tsx
-var EditorsControlGroup = (props) => {
-  var _a;
-  return /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({ borders: false }, props), /* @__PURE__ */ react_default.createElement(Config_default, null), /* @__PURE__ */ react_default.createElement(Data_default, null), /* @__PURE__ */ react_default.createElement(TokenManager, null), /* @__PURE__ */ react_default.createElement(Source_default, { onClick: (_a = props.sourceButtonOnClick) != null ? _a : dashboard_utils_exports.noop }));
-};
+var EditorsControlGroup = (props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, { borders: false, ...props }, /* @__PURE__ */ react_default.createElement(Config_default, null), /* @__PURE__ */ react_default.createElement(Data_default, null), /* @__PURE__ */ react_default.createElement(TokenManager, null), /* @__PURE__ */ react_default.createElement(Source_default, { onClick: props.sourceButtonOnClick ?? dashboard_utils_exports.noop }));
 var EditorsControlGroup_default = EditorsControlGroup;
 
 // src/groups/HistoryGroup.tsx
-var HistoryGroup = (props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), /* @__PURE__ */ react_default.createElement(Undo_default, null), /* @__PURE__ */ react_default.createElement(Redo_default, null));
+var HistoryGroup = (props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, { ...props }, /* @__PURE__ */ react_default.createElement(Undo_default, null), /* @__PURE__ */ react_default.createElement(Redo_default, null));
 var HistoryGroup_default = HistoryGroup;
 
 // src/groups/SidebarControlGroup.tsx
-var SidebarControlGroup = (props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), /* @__PURE__ */ react_default.createElement(Config_default, null), /* @__PURE__ */ react_default.createElement(Data_default, null), /* @__PURE__ */ react_default.createElement(TokenManager, null));
+var SidebarControlGroup = (props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, { ...props }, /* @__PURE__ */ react_default.createElement(Config_default, null), /* @__PURE__ */ react_default.createElement(Data_default, null), /* @__PURE__ */ react_default.createElement(TokenManager, null));
 var SidebarControlGroup_default = SidebarControlGroup;
 
 // src/groups/VisualizationGroup.tsx
@@ -2475,7 +2432,7 @@ var VisualizationGroup = (props) => {
       /* @__PURE__ */ react_default.createElement(Markdown_default2, { key: "markdown" })
     ];
   }, [props.layoutType]);
-  return /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), buttons);
+  return /* @__PURE__ */ react_default.createElement(ItemGroup_default, { ...props }, buttons);
 };
 var VisualizationGroup_default = VisualizationGroup;
 //# sourceMappingURL=index.js.map