@splunk/dashboard-toolbar 29.5.2 → 29.7.0

package/groups/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/groups/index.ts
 var groups_exports = {};
@@ -252,16 +203,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)
@@ -343,37 +290,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,
     {
@@ -387,7 +322,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;
 
@@ -395,13 +330,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;
 });
@@ -410,7 +345,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
     }
   })
 )`
@@ -487,11 +422,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",
@@ -560,11 +495,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
@@ -615,13 +550,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
@@ -675,8 +610,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: {
@@ -685,10 +620,10 @@ var EmptyVisualization = ({ dashboardApi }) => {
         }
       }
     });
-    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+    dashboardApi?.openPanel({
       activePanel: "config"
     });
-  }), [dashboardApi]);
+  }, [dashboardApi]);
   return /* @__PURE__ */ react_default.createElement(
     IconButton_default,
     {
@@ -728,7 +663,7 @@ var useToolbarButtonClick = (event, onClick) => {
           })
         );
       }
-      onClick == null ? void 0 : onClick(...args);
+      onClick?.(...args);
     },
     [dispatch, event, onClick]
   );
@@ -740,9 +675,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,
@@ -779,10 +714,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,
@@ -853,8 +787,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: {
@@ -863,11 +797,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(
@@ -929,8 +863,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: {
@@ -938,10 +872,10 @@ var Image = ({ dashboardApi }) => {
         }
       }
     });
-    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+    dashboardApi?.openPanel({
       activePanel: "config"
     });
-  }), [dashboardApi]);
+  }, [dashboardApi]);
   return /* @__PURE__ */ react_default.createElement(
     IconButton_default,
     {
@@ -1031,13 +965,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);
@@ -1052,7 +989,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 = {},
@@ -1134,7 +1071,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: {
@@ -1142,7 +1079,7 @@ var Markdown = ({ dashboardApi }) => {
         }
       }
     });
-    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+    dashboardApi?.openPanel({
       activePanel: "config"
     });
   }, [dashboardApi]);
@@ -1165,7 +1102,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,
@@ -1197,17 +1134,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({
@@ -1312,11 +1245,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]
@@ -1438,11 +1371,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
@@ -1479,17 +1412,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({
@@ -1545,27 +1474,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
@@ -1704,7 +1633,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) => {
@@ -1720,6 +1650,7 @@ var ZoomNumber = ({
   return /* @__PURE__ */ react_default.createElement(
     StyledNumber,
     {
+      ...rest,
       value: currentScale,
       onChange: handleChange,
       onKeyDown: handleKeyPress,
@@ -1750,6 +1681,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",
@@ -1779,10 +1737,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)(
@@ -1793,7 +1750,7 @@ var Zoom = ({
     (scale) => () => {
       setCurrentScale(scale);
       setScaleType(null);
-      dashboardApi == null ? void 0 : dashboardApi.setScale({ scale: scale / 100 });
+      dashboardApi?.setScale({ scale: scale / 100 });
     },
     [dashboardApi]
   );
@@ -1804,18 +1761,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
@@ -1825,7 +1776,7 @@ var Zoom = ({
 };
 
 // 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
@@ -1841,30 +1792,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
@@ -1888,7 +1833,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