@splunk/dashboard-toolbar 29.1.0 → 29.3.0

package/index.js

@@ -25,7 +25,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -84,6 +83,7 @@ var __async = (__this, __arguments, generator) => {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  AIAssistant: () => AIAssistant,
   ActionsGroup: () => ActionsGroup_default,
   Charts: () => Charts_default,
   CollapsibleToolbar: () => CollapsibleToolbar_default,
@@ -91,6 +91,7 @@ __export(src_exports, {
   ContentExport: () => ContentExport_default,
   ControlGroup: () => ControlGroup_default,
   Data: () => Data_default,
+  Display: () => Display,
   EditingGroup: () => EditingGroup_default,
   EditorGroup: () => EditorGroup_default,
   EditorsControlGroup: () => EditorsControlGroup_default,
@@ -240,7 +241,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
 `;
 var iconSize = 24;
 var menuIconSize = 20;
-var prepareIcon = /* @__PURE__ */ __name((_a) => {
+var prepareIcon = (_a) => {
   var _b = _a, {
     Icon,
     screenReaderContent,
@@ -252,8 +253,8 @@ var prepareIcon = /* @__PURE__ */ __name((_a) => {
   ]);
   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));
-}, "prepareIcon");
-var IconButton = /* @__PURE__ */ __name((_a) => {
+};
+var IconButton = (_a) => {
   var _b = _a, {
     icon: icon9,
     buttonRef,
@@ -282,7 +283,7 @@ var IconButton = /* @__PURE__ */ __name((_a) => {
       "data-clickable": true
     }
   ));
-}, "IconButton");
+};
 var IconButton_default = IconButton;
 
 // src/CollapsibleToolbar.tsx
@@ -317,16 +318,10 @@ var transition = styled_components_exports.css`
 var ExpandButton = styled_components_default(Button_default)`
     // To get specific enough to override the default Button styling
     && {
-        // We shrink the button a bit when the toolbar is expanded since it
-        // switches to a circle button and needs a bit more space to breath
         height: ${({ expanded }) => expanded ? `${TOOLBAR_HEIGHT - 4}px` : `${TOOLBAR_HEIGHT}px`};
         width: ${({ expanded }) => expanded ? `${TOOLBAR_HEIGHT - 4}px` : `${TOOLBAR_HEIGHT}px`};
         margin: ${({ expanded }) => expanded ? "0 4px 0 4px" : "0"};
-        padding: 0;
-        border: none;
-        box-shadow: none;
-        background-color: ${themes_exports.variables.backgroundColorNavigation};
-        border-radius: ${(props) => props.expanded ? "40px" : "0 0 0 20px"};
+        border-radius: ${(props) => props.expanded ? "" : "0 0 0 20px"};
         transition-property: border-radius, height, width, margin-right;
         ${transition}
     }
@@ -334,7 +329,7 @@ var ExpandButton = styled_components_default(Button_default)`
 var expandedIcon = /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(ChevronRight_default, { width: iconSize, height: iconSize }), /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, null, (0, i18n_exports._)("Expanded")));
 var collapsedIcon = /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(ChevronLeft_default, { width: iconSize, height: iconSize }), /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, null, (0, i18n_exports._)("Collapsed")));
 var DEFAULT_PRESET_MAP = Object.freeze({});
-var CollapsibleToolbar = /* @__PURE__ */ __name(({
+var CollapsibleToolbar = ({
   preset = DEFAULT_PRESET_MAP,
   dashboardApi,
   initialExpanded = true,
@@ -366,9 +361,9 @@ var CollapsibleToolbar = /* @__PURE__ */ __name(({
   );
   (0, react_exports.useEffect)(() => {
     const toolbarApiRef = {
-      toggle: /* @__PURE__ */ __name(() => handleExpandToggle(), "toggle"),
-      expand: /* @__PURE__ */ __name(() => setExpanded(true), "expand"),
-      collapse: /* @__PURE__ */ __name(() => setExpanded(false), "collapse")
+      toggle: () => handleExpandToggle(),
+      expand: () => setExpanded(true),
+      collapse: () => setExpanded(false)
     };
     apiRegistry.registerToolbarApi(toolbarApiRef);
     return () => {
@@ -378,6 +373,7 @@ var CollapsibleToolbar = /* @__PURE__ */ __name(({
   return /* @__PURE__ */ react_default.createElement(ToolbarWrapper, { "data-test": "dashboard-toolbar" }, /* @__PURE__ */ react_default.createElement(StyledTransitionOpen, { animation: "slideFromRight", open: expanded }, /* @__PURE__ */ react_default.createElement(ToolbarItemsWrapper, { "data-test": "toolbar-items" }, injectedToolbarItems)), /* @__PURE__ */ react_default.createElement(
     ExpandButton,
     {
+      appearance: "subtle",
       "data-test": "expand-button",
       expanded,
       onClick: handleExpandToggle,
@@ -385,7 +381,7 @@ var CollapsibleToolbar = /* @__PURE__ */ __name(({
       "data-clickable": true
     }
   ));
-}, "CollapsibleToolbar");
+};
 CollapsibleToolbar.displayName = "CollapsibleToolbar";
 var CollapsibleToolbar_default = CollapsibleToolbar;
 
@@ -416,7 +412,7 @@ var Group = styled_components_default.div.attrs({
     flex-direction: row;
     gap: ${(props) => props.gap};
 `;
-var ItemGroup = /* @__PURE__ */ __name((_a) => {
+var ItemGroup = (_a) => {
   var _b = _a, {
     children,
     borders = true,
@@ -432,7 +428,7 @@ var ItemGroup = /* @__PURE__ */ __name((_a) => {
   );
   const separator = borders ? /* @__PURE__ */ react_default.createElement(ItemSeparator_default, null) : null;
   return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(Group, { gap: (0, dashboard_utils_exports.toPx)(gap, 2) }, items), separator);
-}, "ItemGroup");
+};
 var ItemGroup_default = ItemGroup;
 
 // src/PopoverItemButton.tsx
@@ -452,7 +448,7 @@ var StyledLabel = styled_components_default.span`
     overflow: hidden;
     flex: 0 1 auto;
 `;
-var PopoverItemButton = /* @__PURE__ */ __name(({ icon: icon9, label }) => /* @__PURE__ */ react_default.createElement(StyledContentWrapper, null, icon9 && /* @__PURE__ */ react_default.createElement(StyledIcon, null, icon9), label && /* @__PURE__ */ react_default.createElement(StyledLabel, { "data-test": "label-title" }, label)), "PopoverItemButton");
+var PopoverItemButton = ({ icon: icon9, label }) => /* @__PURE__ */ react_default.createElement(StyledContentWrapper, null, icon9 && /* @__PURE__ */ react_default.createElement(StyledIcon, null, icon9), label && /* @__PURE__ */ react_default.createElement(StyledLabel, { "data-test": "label-title" }, label));
 var PopoverItemButton_default = PopoverItemButton;
 
 // esm-externals:@splunk/themes/mixins
@@ -490,7 +486,7 @@ var RightAlignItems = styled_components_default.div`
     gap: ${themes_exports.variables.spacingSmall};
     margin-inline-end: ${themes_exports.variables.spacingSmall};
 `;
-var Toolbar = /* @__PURE__ */ __name(({
+var Toolbar = ({
   activePanel,
   dashboardApi,
   mode,
@@ -567,48 +563,101 @@ var Toolbar = /* @__PURE__ */ __name(({
     },
     rightAlignItems
   ));
-}, "Toolbar");
+};
 Toolbar.displayName = "Toolbar";
 var Toolbar_default = Toolbar;
 
+// esm-externals:@splunk/dashboard-ui
+var dashboard_ui_exports = {};
+__export(dashboard_ui_exports, {
+  default: () => dashboard_ui_default
+});
+var defaultImport15 = __toESM(require("@splunk/dashboard-ui"));
+__reExport(dashboard_ui_exports, require("@splunk/dashboard-ui"));
+var dashboard_ui_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+
+// esm-externals:@splunk/react-ui/Tooltip
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  default: () => Tooltip_default
+});
+var defaultImport16 = __toESM(require("@splunk/react-ui/Tooltip"));
+__reExport(Tooltip_exports, require("@splunk/react-ui/Tooltip"));
+var Tooltip_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+
+// src/buttons/AIAssistant/AIAssistant.tsx
+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 dashboardApi = (0, dashboard_context_exports.useDashboardApi)();
+  const { colorScheme, density, family } = (0, themes_exports.useSplunkTheme)();
+  const handleError = (0, react_exports.useCallback)((error) => {
+    dashboard_utils_exports.console.error((0, i18n_exports._)("Error loading AI Assistant:"), error);
+    return /* @__PURE__ */ react_default.createElement(EmptyComponent, null);
+  }, []);
+  const handleClick = (0, react_exports.useCallback)(() => {
+    dashboardApi.openPanel({
+      activePanel: "config",
+      panelProps: {
+        showAIPanel: true
+      }
+    });
+  }, [dashboardApi]);
+  if (!allowDashboardAIAssistant || !AIButton) {
+    return null;
+  }
+  return /* @__PURE__ */ react_default.createElement(dashboard_ui_exports.ErrorBoundary, { render: handleError }, /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(react_exports.Suspense, { key: "ai-assistant", fallback: null }, /* @__PURE__ */ react_default.createElement(
+    Tooltip_default,
+    {
+      contentRelationship: "label",
+      content: (0, i18n_exports._)("AI Assistant")
+    },
+    /* @__PURE__ */ react_default.createElement(
+      AIButton,
+      {
+        "data-test": "ai-button",
+        onClick: handleClick,
+        colorScheme,
+        style: aiButtonStyle,
+        density,
+        family
+      }
+    )
+  ))));
+};
+
 // esm-externals:@splunk/react-ui/Dropdown
 var Dropdown_exports = {};
 __export(Dropdown_exports, {
   default: () => Dropdown_default
 });
-var defaultImport15 = __toESM(require("@splunk/react-ui/Dropdown"));
+var defaultImport17 = __toESM(require("@splunk/react-ui/Dropdown"));
 __reExport(Dropdown_exports, require("@splunk/react-ui/Dropdown"));
-var Dropdown_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+var Dropdown_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
 
 // esm-externals:@splunk/react-ui/Menu
 var Menu_exports = {};
 __export(Menu_exports, {
   default: () => Menu_default
 });
-var defaultImport16 = __toESM(require("@splunk/react-ui/Menu"));
+var defaultImport18 = __toESM(require("@splunk/react-ui/Menu"));
 __reExport(Menu_exports, require("@splunk/react-ui/Menu"));
-var Menu_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+var Menu_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
 
 // esm-externals:@splunk/react-icons/ChartColumn
 var ChartColumn_exports = {};
 __export(ChartColumn_exports, {
   default: () => ChartColumn_default
 });
-var defaultImport17 = __toESM(require("@splunk/react-icons/ChartColumn"));
+var defaultImport19 = __toESM(require("@splunk/react-icons/ChartColumn"));
 __reExport(ChartColumn_exports, require("@splunk/react-icons/ChartColumn"));
-var ChartColumn_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
-
-// esm-externals:@splunk/dashboard-ui
-var dashboard_ui_exports = {};
-__export(dashboard_ui_exports, {
-  default: () => dashboard_ui_default
-});
-var defaultImport18 = __toESM(require("@splunk/dashboard-ui"));
-__reExport(dashboard_ui_exports, require("@splunk/dashboard-ui"));
-var dashboard_ui_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+var ChartColumn_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
 
 // src/hooks/useDropdown.ts
-var useDropdown = /* @__PURE__ */ __name(({
+var useDropdown = ({
   isContentClickClose = true
 }) => {
   const [isOpen, setIsOpen] = (0, react_exports.useState)(false);
@@ -641,7 +690,7 @@ var useDropdown = /* @__PURE__ */ __name(({
     handleForceClose,
     setHasChildModal
   };
-}, "useDropdown");
+};
 var useDropdown_default = useDropdown;
 
 // src/components/StyledButton.tsx
@@ -677,7 +726,7 @@ var focusToggleReasons = [
   "escapeKey",
   "tabKey"
 ];
-var getVisualizationListFromTaxonomy = /* @__PURE__ */ __name(({
+var getVisualizationListFromTaxonomy = ({
   taxonomy,
   handleCreateVisualization
 }) => taxonomy.reduce(
@@ -713,8 +762,8 @@ var getVisualizationListFromTaxonomy = /* @__PURE__ */ __name(({
     );
   },
   []
-), "getVisualizationListFromTaxonomy");
-var Charts = /* @__PURE__ */ __name(({ dashboardApi, preset }) => {
+);
+var Charts = ({ dashboardApi, preset }) => {
   const { showNewDataForViz = true } = (0, dashboard_context_exports.useFeatureFlags)();
   const { family } = (0, themes_exports.useSplunkTheme)();
   const { handleForceClose, handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
@@ -784,7 +833,7 @@ var Charts = /* @__PURE__ */ __name(({ dashboardApi, preset }) => {
     },
     renderScrollableMenu
   ));
-}, "Charts");
+};
 var Charts_default = Charts;
 
 // esm-externals:@splunk/react-icons/Cog
@@ -792,16 +841,16 @@ var Cog_exports = {};
 __export(Cog_exports, {
   default: () => Cog_default
 });
-var defaultImport19 = __toESM(require("@splunk/react-icons/Cog"));
+var defaultImport20 = __toESM(require("@splunk/react-icons/Cog"));
 __reExport(Cog_exports, require("@splunk/react-icons/Cog"));
-var Cog_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+var Cog_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
 
 // src/buttons/Config.tsx
 var configurationIcon = prepareIcon({
   Icon: Cog_default,
   screenReaderContent: (0, i18n_exports._)("Configuration")
 });
-var Config = /* @__PURE__ */ __name(({ dashboardApi }) => {
+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";
@@ -825,7 +874,7 @@ var Config = /* @__PURE__ */ __name(({ dashboardApi }) => {
       icon: configurationIcon
     }
   );
-}, "Config");
+};
 var Config_default = Config;
 
 // esm-externals:@splunk/react-icons/ArrowBroadUnderbarDown
@@ -833,16 +882,16 @@ var ArrowBroadUnderbarDown_exports = {};
 __export(ArrowBroadUnderbarDown_exports, {
   default: () => ArrowBroadUnderbarDown_default
 });
-var defaultImport20 = __toESM(require("@splunk/react-icons/ArrowBroadUnderbarDown"));
+var defaultImport21 = __toESM(require("@splunk/react-icons/ArrowBroadUnderbarDown"));
 __reExport(ArrowBroadUnderbarDown_exports, require("@splunk/react-icons/ArrowBroadUnderbarDown"));
-var ArrowBroadUnderbarDown_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+var ArrowBroadUnderbarDown_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
 
 // src/buttons/ContentExport.tsx
 var icon = prepareIcon({
   Icon: ArrowBroadUnderbarDown_default,
   screenReaderContent: (0, i18n_exports._)("Export")
 });
-var ContentExport = /* @__PURE__ */ __name(({ disabled, onClick }) => /* @__PURE__ */ react_default.createElement(
+var ContentExport = ({ disabled, onClick }) => /* @__PURE__ */ react_default.createElement(
   IconButton_default,
   {
     testLabel: "content-export-button",
@@ -850,7 +899,7 @@ var ContentExport = /* @__PURE__ */ __name(({ disabled, onClick }) => /* @__PURE
     disabled: !!disabled,
     icon
   }
-), "ContentExport");
+);
 var ContentExport_default = ContentExport;
 
 // esm-externals:@splunk/react-icons/CylinderMulti
@@ -858,16 +907,16 @@ var CylinderMulti_exports = {};
 __export(CylinderMulti_exports, {
   default: () => CylinderMulti_default
 });
-var defaultImport21 = __toESM(require("@splunk/react-icons/CylinderMulti"));
+var defaultImport22 = __toESM(require("@splunk/react-icons/CylinderMulti"));
 __reExport(CylinderMulti_exports, require("@splunk/react-icons/CylinderMulti"));
-var CylinderMulti_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+var CylinderMulti_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // src/buttons/Data.tsx
 var dataInputIcon = prepareIcon({
   Icon: CylinderMulti_default,
   screenReaderContent: (0, i18n_exports._)("Data source overview")
 });
-var Data = /* @__PURE__ */ __name(({ dashboardApi }) => {
+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";
@@ -894,24 +943,116 @@ var Data = /* @__PURE__ */ __name(({ dashboardApi }) => {
       icon: dataInputIcon
     }
   );
-}, "Data");
+};
 var Data_default = Data;
 
+// esm-externals:@splunk/react-icons/Checkmark
+var Checkmark_exports = {};
+__export(Checkmark_exports, {
+  default: () => Checkmark_default
+});
+var defaultImport23 = __toESM(require("@splunk/react-icons/Checkmark"));
+__reExport(Checkmark_exports, require("@splunk/react-icons/Checkmark"));
+var Checkmark_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+
+// src/buttons/Display/Display.tsx
+var menuStyle = {
+  minWidth: "150px"
+};
+var CheckmarkPlaceholder = styled_components_default.span`
+    display: inline-block;
+    width: 16px;
+`;
+var Display = ({
+  appearance = "default",
+  dashboardApi
+}) => {
+  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 areInputsCollapsed = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectAreGlobalItemsCollapsed);
+  const showInputs = !areInputsCollapsed;
+  const handleInputsToggle = (0, react_exports.useCallback)(() => {
+    dashboardApi == null ? void 0 : dashboardApi.setAreGlobalInputsCollapsed({
+      collapsed: !areInputsCollapsed
+    });
+  }, [dashboardApi, areInputsCollapsed]);
+  const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
+    isContentClickClose: true
+  });
+  const buttonToggle2 = (0, react_exports.useMemo)(
+    () => /* @__PURE__ */ react_default.createElement(
+      Button_default,
+      {
+        "data-clickable": true,
+        "data-test": "display-dropdown-button",
+        appearance,
+        isMenu: true,
+        "aria-label": (0, i18n_exports._)("Display options")
+      },
+      (0, i18n_exports._)("Display")
+    ),
+    [appearance]
+  );
+  const checkmarkIcon = (0, react_exports.useMemo)(() => {
+    return showInputs ? /* @__PURE__ */ react_default.createElement(Checkmark_default, null) : /* @__PURE__ */ react_default.createElement(CheckmarkPlaceholder, null);
+  }, [showInputs]);
+  const dropdownMenuChildren = (0, react_exports.useMemo)(() => {
+    const items = [];
+    if (hasGlobalInputs) {
+      items.push(
+        /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            key: "inputs-item",
+            "data-test": "inputs-menu-item",
+            onClick: handleInputsToggle,
+            startAdornment: checkmarkIcon
+          },
+          (0, i18n_exports._)("Inputs")
+        )
+      );
+    }
+    return items;
+  }, [hasGlobalInputs, handleInputsToggle, checkmarkIcon]);
+  if (dropdownMenuChildren.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ react_default.createElement(Tooltip_default, { contentRelationship: "label", content: (0, i18n_exports._)("Display") }, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: buttonToggle2
+    },
+    /* @__PURE__ */ react_default.createElement(
+      Menu_default,
+      {
+        style: menuStyle,
+        focusMode: "normal",
+        "aria-label": (0, i18n_exports._)("Display options")
+      },
+      dropdownMenuChildren
+    )
+  ));
+};
+
 // esm-externals:@splunk/react-icons/Square
 var Square_exports = {};
 __export(Square_exports, {
   default: () => Square_default
 });
-var defaultImport22 = __toESM(require("@splunk/react-icons/Square"));
+var defaultImport24 = __toESM(require("@splunk/react-icons/Square"));
 __reExport(Square_exports, require("@splunk/react-icons/Square"));
-var Square_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var Square_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // src/buttons/EmptyVisualization.tsx
 var icon2 = prepareIcon({
   Icon: Square_default,
   screenReaderContent: (0, i18n_exports._)("Add rectangle")
 });
-var EmptyVisualization = /* @__PURE__ */ __name(({ dashboardApi }) => {
+var EmptyVisualization = ({ dashboardApi }) => {
   const handleClick = (0, react_exports.useCallback)(() => __async(null, null, function* () {
     dashboardApi == null ? void 0 : dashboardApi.createVisualization({
       visualizationDefinition: {
@@ -934,16 +1075,17 @@ var EmptyVisualization = /* @__PURE__ */ __name(({ dashboardApi }) => {
       icon: icon2
     }
   );
-}, "EmptyVisualization");
+};
 var EmptyVisualization_default = EmptyVisualization;
 
 // src/buttons/ExportDashboardButton.tsx
 var downloadIcon = /* @__PURE__ */ react_default.createElement(ArrowBroadUnderbarDown_default, null);
-var ExportDashboardButton = /* @__PURE__ */ __name(({
+var ExportDashboardButton = ({
   appearance = "secondary",
   scale = 1
 }) => {
   const [open, setOpen] = (0, react_exports.useState)(false);
+  const buttonRef = (0, react_exports.useRef)(null);
   const handleOpen = (0, react_exports.useCallback)(() => {
     setOpen(true);
   }, []);
@@ -953,6 +1095,7 @@ var ExportDashboardButton = /* @__PURE__ */ __name(({
   return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(
     Button_default,
     {
+      elementRef: buttonRef,
       icon: downloadIcon,
       key: "export-dashboard-button",
       "data-clickable": true,
@@ -967,10 +1110,10 @@ var ExportDashboardButton = /* @__PURE__ */ __name(({
       open,
       onModalClose: handleClose,
       scale,
-      returnFocus: dashboard_utils_exports.noop
+      returnFocus: buttonRef
     }
   ));
-}, "ExportDashboardButton");
+};
 var ExportDashboardButton_default = ExportDashboardButton;
 
 // esm-externals:@splunk/react-icons/ChevronsOut
@@ -978,16 +1121,16 @@ var ChevronsOut_exports = {};
 __export(ChevronsOut_exports, {
   default: () => ChevronsOut_default
 });
-var defaultImport23 = __toESM(require("@splunk/react-icons/ChevronsOut"));
+var defaultImport25 = __toESM(require("@splunk/react-icons/ChevronsOut"));
 __reExport(ChevronsOut_exports, require("@splunk/react-icons/ChevronsOut"));
-var ChevronsOut_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+var ChevronsOut_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // src/buttons/Fullscreen.tsx
 var icon3 = prepareIcon({
   Icon: ChevronsOut_default,
   screenReaderContent: (0, i18n_exports._)("Fullscreen")
 });
-var FullScreen = /* @__PURE__ */ __name(({ dashboardApi }) => {
+var FullScreen = ({ dashboardApi }) => {
   const isFullscreen = !!(0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectFullscreenElement);
   const handleClick = (0, react_exports.useCallback)(() => {
     dashboardApi == null ? void 0 : dashboardApi.enterFullscreen();
@@ -1001,7 +1144,7 @@ var FullScreen = /* @__PURE__ */ __name(({ dashboardApi }) => {
       icon: icon3
     }
   );
-}, "FullScreen");
+};
 var Fullscreen_default = FullScreen;
 
 // esm-externals:@splunk/react-ui/Switch
@@ -1009,9 +1152,9 @@ var Switch_exports = {};
 __export(Switch_exports, {
   default: () => Switch_default
 });
-var defaultImport24 = __toESM(require("@splunk/react-ui/Switch"));
+var defaultImport26 = __toESM(require("@splunk/react-ui/Switch"));
 __reExport(Switch_exports, require("@splunk/react-ui/Switch"));
-var Switch_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+var Switch_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // src/buttons/GridLineSwitch.tsx
 var SwitchContainer = styled_components_default.div`
@@ -1020,7 +1163,7 @@ var SwitchContainer = styled_components_default.div`
     flex-direction: row;
     gap: ${themes_exports.variables.spacingSmall};
 `;
-var GridLineSwitch = /* @__PURE__ */ __name(({
+var GridLineSwitch = ({
   dashboardApi,
   mode,
   showSeparator,
@@ -1051,7 +1194,7 @@ var GridLineSwitch = /* @__PURE__ */ __name(({
     },
     (0, i18n_exports._)("Gridlines")
   ), separator);
-}, "GridLineSwitch");
+};
 var GridLineSwitch_default = GridLineSwitch;
 
 // esm-externals:@splunk/react-icons/ChartSingleValueIcon
@@ -1059,9 +1202,9 @@ var ChartSingleValueIcon_exports = {};
 __export(ChartSingleValueIcon_exports, {
   default: () => ChartSingleValueIcon_default
 });
-var defaultImport25 = __toESM(require("@splunk/react-icons/ChartSingleValueIcon"));
+var defaultImport27 = __toESM(require("@splunk/react-icons/ChartSingleValueIcon"));
 __reExport(ChartSingleValueIcon_exports, require("@splunk/react-icons/ChartSingleValueIcon"));
-var ChartSingleValueIcon_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+var ChartSingleValueIcon_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // src/buttons/IconGallery.tsx
 var MenusContainer = styled_components_default.div`
@@ -1077,7 +1220,7 @@ var focusToggleReasons2 = [
   "escapeKey",
   "tabKey"
 ];
-var IconGallery = /* @__PURE__ */ __name(({ dashboardApi }) => {
+var IconGallery = ({ dashboardApi }) => {
   const {
     handleForceClose,
     handleRequestClose,
@@ -1134,7 +1277,7 @@ var IconGallery = /* @__PURE__ */ __name(({ dashboardApi }) => {
       }
     ))
   ));
-}, "IconGallery");
+};
 var IconGallery_default = IconGallery;
 
 // esm-externals:@splunk/react-icons/QuestionCircle
@@ -1142,12 +1285,11 @@ var QuestionCircle_exports = {};
 __export(QuestionCircle_exports, {
   default: () => QuestionCircle_default
 });
-var defaultImport26 = __toESM(require("@splunk/react-icons/QuestionCircle"));
+var defaultImport28 = __toESM(require("@splunk/react-icons/QuestionCircle"));
 __reExport(QuestionCircle_exports, require("@splunk/react-icons/QuestionCircle"));
-var QuestionCircle_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+var QuestionCircle_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // src/buttons/HelpButton.tsx
-var focusToggleReasons3 = [];
 var HelpIcon = prepareIcon({
   Icon: QuestionCircle_default,
   screenReaderContent: (0, i18n_exports._)("Help links"),
@@ -1162,7 +1304,7 @@ var ButtonToggle2 = /* @__PURE__ */ react_default.createElement(
     icon: HelpIcon
   }
 );
-var HelpButton = /* @__PURE__ */ __name(({ helpLinks = [] }) => {
+var HelpButton = ({ helpLinks = [] }) => {
   const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
     isContentClickClose: true
   });
@@ -1200,7 +1342,6 @@ var HelpButton = /* @__PURE__ */ __name(({ helpLinks = [] }) => {
   return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
     Dropdown_default,
     {
-      focusToggleReasons: focusToggleReasons3,
       onRequestClose: handleRequestClose,
       onRequestOpen: handleRequestOpen,
       open: isOpen,
@@ -1208,7 +1349,7 @@ var HelpButton = /* @__PURE__ */ __name(({ helpLinks = [] }) => {
     },
     /* @__PURE__ */ react_default.createElement(Menu_default, null, HelpLinks)
   ));
-}, "HelpButton");
+};
 var HelpButton_default = HelpButton;
 
 // esm-externals:@splunk/react-icons/Picture
@@ -1216,16 +1357,16 @@ var Picture_exports = {};
 __export(Picture_exports, {
   default: () => Picture_default
 });
-var defaultImport27 = __toESM(require("@splunk/react-icons/Picture"));
+var defaultImport29 = __toESM(require("@splunk/react-icons/Picture"));
 __reExport(Picture_exports, require("@splunk/react-icons/Picture"));
-var Picture_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var Picture_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // src/buttons/Image.tsx
 var icon4 = prepareIcon({
   Icon: Picture_default,
   screenReaderContent: (0, i18n_exports._)("Add image")
 });
-var Image = /* @__PURE__ */ __name(({ dashboardApi }) => {
+var Image = ({ dashboardApi }) => {
   const handleClick = (0, react_exports.useCallback)(() => __async(null, null, function* () {
     dashboardApi == null ? void 0 : dashboardApi.createVisualization({
       visualizationDefinition: {
@@ -1247,7 +1388,7 @@ var Image = /* @__PURE__ */ __name(({ dashboardApi }) => {
       icon: icon4
     }
   );
-}, "Image");
+};
 var Image_default = Image;
 
 // src/buttons/ImageGallery.tsx
@@ -1269,8 +1410,8 @@ var ButtonToggle3 = /* @__PURE__ */ react_default.createElement(
     icon: imageGalleryDropdown
   }
 );
-var focusToggleReasons4 = [];
-var ImageGallery = /* @__PURE__ */ __name(({ dashboardApi }) => {
+var focusToggleReasons3 = [];
+var ImageGallery = ({ dashboardApi }) => {
   const {
     handleForceClose,
     handleRequestClose,
@@ -1301,7 +1442,7 @@ var ImageGallery = /* @__PURE__ */ __name(({ dashboardApi }) => {
   return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
     Dropdown_default,
     {
-      focusToggleReasons: focusToggleReasons4,
+      focusToggleReasons: focusToggleReasons3,
       onRequestClose: handleRequestClose,
       onRequestOpen: handleRequestOpen,
       open: isOpen,
@@ -1315,7 +1456,7 @@ var ImageGallery = /* @__PURE__ */ __name(({ dashboardApi }) => {
       }
     ))
   ));
-}, "ImageGallery");
+};
 var ImageGallery_default = ImageGallery;
 
 // esm-externals:lodash
@@ -1323,30 +1464,30 @@ var lodash_exports = {};
 __export(lodash_exports, {
   default: () => lodash_default
 });
-var defaultImport28 = __toESM(require("lodash"));
+var defaultImport30 = __toESM(require("lodash"));
 __reExport(lodash_exports, require("lodash"));
-var lodash_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var lodash_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // esm-externals:@splunk/react-icons/SlidersTripleHorizontal
 var SlidersTripleHorizontal_exports = {};
 __export(SlidersTripleHorizontal_exports, {
   default: () => SlidersTripleHorizontal_default
 });
-var defaultImport29 = __toESM(require("@splunk/react-icons/SlidersTripleHorizontal"));
+var defaultImport31 = __toESM(require("@splunk/react-icons/SlidersTripleHorizontal"));
 __reExport(SlidersTripleHorizontal_exports, require("@splunk/react-icons/SlidersTripleHorizontal"));
-var SlidersTripleHorizontal_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var SlidersTripleHorizontal_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // esm-externals:@splunk/dashboard-definition
 var dashboard_definition_exports = {};
 __export(dashboard_definition_exports, {
   default: () => dashboard_definition_default
 });
-var defaultImport30 = __toESM(require("@splunk/dashboard-definition"));
+var defaultImport32 = __toESM(require("@splunk/dashboard-definition"));
 __reExport(dashboard_definition_exports, require("@splunk/dashboard-definition"));
-var dashboard_definition_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var dashboard_definition_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // src/buttons/Inputs.tsx
-var focusToggleReasons5 = [
+var focusToggleReasons4 = [
   "escapeKey",
   "tabKey"
 ];
@@ -1365,7 +1506,7 @@ var ButtonToggle4 = /* @__PURE__ */ react_default.createElement(
     icon: addInputIcon
   }
 );
-var onCreateInputClickFactory = /* @__PURE__ */ __name(({
+var onCreateInputClickFactory = ({
   type,
   defaultConfig,
   tokenPrefix,
@@ -1386,8 +1527,8 @@ var onCreateInputClickFactory = /* @__PURE__ */ __name(({
   }
   dashboardApi.addInput(newConfig);
   dashboardApi.openPanel({ activePanel: "config" });
-}, "onCreateInputClickFactory");
-var Inputs = /* @__PURE__ */ __name(({
+};
+var Inputs = ({
   dashboardApi,
   preset = DEFAULT_PRESET_MAP2
 }) => {
@@ -1452,7 +1593,7 @@ var Inputs = /* @__PURE__ */ __name(({
   return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
     Dropdown_default,
     {
-      focusToggleReasons: focusToggleReasons5,
+      focusToggleReasons: focusToggleReasons4,
       onRequestClose: handleRequestClose,
       onRequestOpen: handleRequestOpen,
       open: isOpen,
@@ -1460,7 +1601,7 @@ var Inputs = /* @__PURE__ */ __name(({
     },
     /* @__PURE__ */ react_default.createElement(Menu_default, null, InputTypeButtons)
   ));
-}, "Inputs");
+};
 var Inputs_default = Inputs;
 
 // esm-externals:@splunk/react-icons/Markdown
@@ -1468,16 +1609,16 @@ var Markdown_exports = {};
 __export(Markdown_exports, {
   default: () => Markdown_default
 });
-var defaultImport31 = __toESM(require("@splunk/react-icons/Markdown"));
+var defaultImport33 = __toESM(require("@splunk/react-icons/Markdown"));
 __reExport(Markdown_exports, require("@splunk/react-icons/Markdown"));
-var Markdown_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var Markdown_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // src/buttons/Markdown.tsx
 var icon5 = prepareIcon({
   Icon: Markdown_default,
   screenReaderContent: (0, i18n_exports._)("Add markdown text")
 });
-var Markdown = /* @__PURE__ */ __name(({ dashboardApi }) => {
+var Markdown = ({ dashboardApi }) => {
   const handleClick = (0, react_exports.useCallback)(() => {
     dashboardApi == null ? void 0 : dashboardApi.createVisualization({
       visualizationDefinition: {
@@ -1499,11 +1640,11 @@ var Markdown = /* @__PURE__ */ __name(({ dashboardApi }) => {
       icon: icon5
     }
   );
-}, "Markdown");
+};
 var Markdown_default2 = Markdown;
 
 // src/buttons/ModeSwitch.tsx
-var ModeSwitch = /* @__PURE__ */ __name(() => {
+var ModeSwitch = () => {
   const mode = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectMode);
   const dashboardApi = (0, dashboard_context_exports.useDashboardApi)();
   const appearance = mode === "edit" ? "secondary" : "primary";
@@ -1523,7 +1664,7 @@ var ModeSwitch = /* @__PURE__ */ __name(() => {
       onClick: handleClick
     }
   ));
-}, "ModeSwitch");
+};
 var ModeSwitch_default = ModeSwitch;
 
 // esm-externals:@splunk/react-icons/ArrowBowRight
@@ -1531,16 +1672,16 @@ var ArrowBowRight_exports = {};
 __export(ArrowBowRight_exports, {
   default: () => ArrowBowRight_default
 });
-var defaultImport32 = __toESM(require("@splunk/react-icons/ArrowBowRight"));
+var defaultImport34 = __toESM(require("@splunk/react-icons/ArrowBowRight"));
 __reExport(ArrowBowRight_exports, require("@splunk/react-icons/ArrowBowRight"));
-var ArrowBowRight_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var ArrowBowRight_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // src/buttons/Redo.tsx
 var icon6 = prepareIcon({
   Icon: ArrowBowRight_default,
   screenReaderContent: (0, i18n_exports._)("Redo")
 });
-var Redo = /* @__PURE__ */ __name(({ dashboardApi }) => {
+var Redo = ({ dashboardApi }) => {
   const [canRedo, setCanRedo] = (0, react_exports.useState)(
     () => {
       var _a;
@@ -1576,7 +1717,7 @@ var Redo = /* @__PURE__ */ __name(({ dashboardApi }) => {
       icon: icon6
     }
   );
-}, "Redo");
+};
 var Redo_default = Redo;
 
 // esm-externals:@splunk/react-icons/Circle
@@ -1584,27 +1725,27 @@ var Circle_exports = {};
 __export(Circle_exports, {
   default: () => Circle_default
 });
-var defaultImport33 = __toESM(require("@splunk/react-icons/Circle"));
+var defaultImport35 = __toESM(require("@splunk/react-icons/Circle"));
 __reExport(Circle_exports, require("@splunk/react-icons/Circle"));
-var Circle_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var Circle_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:@splunk/react-icons/Line
 var Line_exports = {};
 __export(Line_exports, {
   default: () => Line_default
 });
-var defaultImport34 = __toESM(require("@splunk/react-icons/Line"));
+var defaultImport36 = __toESM(require("@splunk/react-icons/Line"));
 __reExport(Line_exports, require("@splunk/react-icons/Line"));
-var Line_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var Line_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // esm-externals:@splunk/react-icons/ShapesVariety
 var ShapesVariety_exports = {};
 __export(ShapesVariety_exports, {
   default: () => ShapesVariety_default
 });
-var defaultImport35 = __toESM(require("@splunk/react-icons/ShapesVariety"));
+var defaultImport37 = __toESM(require("@splunk/react-icons/ShapesVariety"));
 __reExport(ShapesVariety_exports, require("@splunk/react-icons/ShapesVariety"));
-var ShapesVariety_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var ShapesVariety_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // src/buttons/Shapes.tsx
 var shapesDropdown = prepareIcon({
@@ -1621,14 +1762,14 @@ var ButtonToggle5 = /* @__PURE__ */ react_default.createElement(
     icon: shapesDropdown
   }
 );
-var focusToggleReasons6 = [
+var focusToggleReasons5 = [
   "escapeKey",
   "tabKey"
 ];
 var circleIcon = /* @__PURE__ */ react_default.createElement(Circle_default, null);
 var uncheckedBoxIcon = /* @__PURE__ */ react_default.createElement(Square_default, null);
 var lineIcon = /* @__PURE__ */ react_default.createElement(Line_default, null);
-var Shapes = /* @__PURE__ */ __name(({ dashboardApi, layoutType }) => {
+var Shapes = ({ dashboardApi, layoutType }) => {
   const supportLine = layoutType === "absolute";
   const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
     isContentClickClose: true
@@ -1648,7 +1789,7 @@ var Shapes = /* @__PURE__ */ __name(({ dashboardApi, layoutType }) => {
   return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
     Dropdown_default,
     {
-      focusToggleReasons: focusToggleReasons6,
+      focusToggleReasons: focusToggleReasons5,
       onRequestClose: handleRequestClose,
       onRequestOpen: handleRequestOpen,
       open: isOpen,
@@ -1704,7 +1845,7 @@ var Shapes = /* @__PURE__ */ __name(({ dashboardApi, layoutType }) => {
       )
     ))
   ));
-}, "Shapes");
+};
 var Shapes_default = Shapes;
 
 // esm-externals:@splunk/react-icons/WindowChevronsSlash
@@ -1712,24 +1853,38 @@ var WindowChevronsSlash_exports = {};
 __export(WindowChevronsSlash_exports, {
   default: () => WindowChevronsSlash_default
 });
-var defaultImport36 = __toESM(require("@splunk/react-icons/WindowChevronsSlash"));
+var defaultImport38 = __toESM(require("@splunk/react-icons/WindowChevronsSlash"));
 __reExport(WindowChevronsSlash_exports, require("@splunk/react-icons/WindowChevronsSlash"));
-var WindowChevronsSlash_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var WindowChevronsSlash_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // src/buttons/Source.tsx
 var icon7 = prepareIcon({
   Icon: WindowChevronsSlash_default,
   screenReaderContent: (0, i18n_exports._)("Source code")
 });
-var Source = /* @__PURE__ */ __name(({ disabled = false, onClick }) => /* @__PURE__ */ react_default.createElement(
-  IconButton_default,
-  {
-    testLabel: "source-button",
-    onClick,
-    disabled,
-    icon: icon7
-  }
-), "Source");
+var Source = ({ disabled = false, onClick }) => {
+  const sourceButtonRef = (0, dashboard_context_exports.useToolbarRef)("source");
+  const setReturnPoint = (0, dashboard_context_exports.useRestoreFocus)(sourceButtonRef);
+  const onSourceClick = (0, react_exports.useCallback)(
+    (event, data) => {
+      if (onClick) {
+        onClick(event, data);
+        setReturnPoint();
+      }
+    },
+    [onClick, setReturnPoint]
+  );
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      testLabel: "source-button",
+      onClick: onSourceClick,
+      disabled,
+      icon: icon7,
+      buttonRef: sourceButtonRef
+    }
+  );
+};
 var Source_default = Source;
 
 // esm-externals:@splunk/react-icons/ListToken
@@ -1737,25 +1892,16 @@ var ListToken_exports = {};
 __export(ListToken_exports, {
   default: () => ListToken_default
 });
-var defaultImport37 = __toESM(require("@splunk/react-icons/ListToken"));
+var defaultImport39 = __toESM(require("@splunk/react-icons/ListToken"));
 __reExport(ListToken_exports, require("@splunk/react-icons/ListToken"));
-var ListToken_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
-
-// esm-externals:@splunk/react-ui/Tooltip
-var Tooltip_exports = {};
-__export(Tooltip_exports, {
-  default: () => Tooltip_default
-});
-var defaultImport38 = __toESM(require("@splunk/react-ui/Tooltip"));
-__reExport(Tooltip_exports, require("@splunk/react-ui/Tooltip"));
-var Tooltip_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+var ListToken_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // src/buttons/tokenManager/TokenManager.tsx
 var tokenManagerIcon = prepareIcon({
   Icon: ListToken_default,
   screenReaderContent: (0, i18n_exports._)("Token manager")
 });
-var TokenManager = /* @__PURE__ */ __name(({ dashboardApi }) => {
+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";
@@ -1789,23 +1935,23 @@ var TokenManager = /* @__PURE__ */ __name(({ dashboardApi }) => {
       }
     )
   );
-}, "TokenManager");
+};
 
 // esm-externals:@splunk/react-icons/ArrowBowLeft
 var ArrowBowLeft_exports = {};
 __export(ArrowBowLeft_exports, {
   default: () => ArrowBowLeft_default
 });
-var defaultImport39 = __toESM(require("@splunk/react-icons/ArrowBowLeft"));
+var defaultImport40 = __toESM(require("@splunk/react-icons/ArrowBowLeft"));
 __reExport(ArrowBowLeft_exports, require("@splunk/react-icons/ArrowBowLeft"));
-var ArrowBowLeft_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
+var ArrowBowLeft_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // src/buttons/Undo.tsx
 var icon8 = prepareIcon({
   Icon: ArrowBowLeft_default,
   screenReaderContent: (0, i18n_exports._)("Undo")
 });
-var Undo = /* @__PURE__ */ __name(({ dashboardApi }) => {
+var Undo = ({ dashboardApi }) => {
   const [canUndo, setCanUndo] = (0, react_exports.useState)(
     () => {
       var _a;
@@ -1841,18 +1987,9 @@ var Undo = /* @__PURE__ */ __name(({ dashboardApi }) => {
       icon: icon8
     }
   );
-}, "Undo");
+};
 var Undo_default = Undo;
 
-// esm-externals:@splunk/dashboard-telemetry
-var dashboard_telemetry_exports = {};
-__export(dashboard_telemetry_exports, {
-  default: () => dashboard_telemetry_default
-});
-var defaultImport40 = __toESM(require("@splunk/dashboard-telemetry"));
-__reExport(dashboard_telemetry_exports, require("@splunk/dashboard-telemetry"));
-var dashboard_telemetry_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
-
 // esm-externals:@splunk/ui-utils/format
 var format_exports = {};
 __export(format_exports, {
@@ -1868,10 +2005,10 @@ var buttonStyle = {
   borderTopLeftRadius: 0,
   borderBottomLeftRadius: 0
 };
-var menuStyle = {
+var menuStyle2 = {
   width: "200px"
 };
-var ZoomMenu = /* @__PURE__ */ __name(({
+var ZoomMenu = ({
   dashboardApi,
   appearance = "default",
   currentScale,
@@ -2009,14 +2146,14 @@ var ZoomMenu = /* @__PURE__ */ __name(({
     /* @__PURE__ */ react_default.createElement(
       Menu_default,
       {
-        style: menuStyle,
+        style: menuStyle2,
         focusMode: "normal",
         "aria-label": (0, i18n_exports._)("Zoom level")
       },
       dropdownMenuChildren
     )
   );
-}, "ZoomMenu");
+};
 
 // esm-externals:@splunk/react-ui/Number
 var Number_exports = {};
@@ -2037,7 +2174,7 @@ var StyledNumber = styled_components_default(Number_default)`
 var StyledEndAdornment = styled_components_default.span`
     color: ${themes_exports.variables.contentColorActive};
 `;
-var ZoomNumber = /* @__PURE__ */ __name(({
+var ZoomNumber = ({
   currentScale,
   onScaleChange
 }) => {
@@ -2069,7 +2206,7 @@ var ZoomNumber = /* @__PURE__ */ __name(({
       append: true
     }
   );
-}, "ZoomNumber");
+};
 
 // src/buttons/Zoom/Zoom.tsx
 var Container = styled_components_default.div`
@@ -2079,41 +2216,38 @@ var Container = styled_components_default.div`
     gap: ${themes_exports.variables.spacingSmall};
 `;
 var StyledTooltip = styled_components_default(Tooltip_default)`
-    width: 110px;
+    width: 90px;
     & span {
         display: flex;
     }
 `;
-var Zoom = /* @__PURE__ */ __name(({
+var Zoom = ({
   showSeparator = true,
   appearance = "default",
   mode = "view"
 }) => {
   const [currentScale, setCurrentScale] = (0, react_exports.useState)(100);
   const [scaleType, setScaleType] = (0, react_exports.useState)(null);
-  const telemetry = (0, dashboard_telemetry_exports.useTelemetryApi)();
   const dashboardApi = (0, dashboard_context_exports.useDashboardApi)();
+  const dispatch = (0, dashboard_state_exports.useDispatch)();
   const handleZoom = (0, react_exports.useCallback)((level) => {
     if (level) {
       setCurrentScale(Math.round(level * 100));
     }
   }, []);
-  const emitTelemetry = (0, react_exports.useMemo)(
-    () => (0, lodash_exports.debounce)(telemetry.emit.bind(telemetry), 500),
-    [telemetry]
+  const debouncedDispatch = (0, react_exports.useMemo)(
+    () => (0, lodash_exports.debounce)(dispatch, 500),
+    [dispatch]
   );
   (0, react_exports.useEffect)(() => {
-    emitTelemetry({
-      pageAction: "dashboard.zoom",
-      source: "toolbar",
-      event: "dashboard.zoom_level_change",
-      metadata: {
+    debouncedDispatch(
+      (0, dashboard_state_exports.zoomLevelChanged)({
         scale: currentScale,
         scaleType,
         mode
-      }
-    });
-  }, [currentScale, scaleType, emitTelemetry, mode]);
+      })
+    );
+  }, [currentScale, scaleType, mode, debouncedDispatch]);
   const activeTabId = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectActiveTab);
   (0, react_exports.useEffect)(() => {
     var _a;
@@ -2159,10 +2293,10 @@ var Zoom = /* @__PURE__ */ __name(({
       }
     )
   ), separator);
-}, "Zoom");
+};
 
 // src/groups/ActionsGroup.tsx
-var menuStyle2 = {
+var menuStyle3 = {
   width: "180px"
 };
 var buttonToggle = /* @__PURE__ */ react_default.createElement(
@@ -2175,7 +2309,7 @@ var buttonToggle = /* @__PURE__ */ react_default.createElement(
     appearance: "subtle"
   }
 );
-var ActionsGroup = /* @__PURE__ */ __name(({ children }) => {
+var ActionsGroup = ({ children }) => {
   const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
     isContentClickClose: true
   });
@@ -2187,17 +2321,17 @@ var ActionsGroup = /* @__PURE__ */ __name(({ children }) => {
       open: isOpen,
       toggle: buttonToggle
     },
-    /* @__PURE__ */ react_default.createElement(Menu_default, { style: menuStyle2 }, children)
+    /* @__PURE__ */ react_default.createElement(Menu_default, { style: menuStyle3 }, children)
   );
-}, "ActionsGroup");
+};
 var ActionsGroup_default = ActionsGroup;
 
 // src/groups/ControlGroup.tsx
-var ControlGroup = /* @__PURE__ */ __name((props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), /* @__PURE__ */ react_default.createElement(Fullscreen_default, null)), "ControlGroup");
+var ControlGroup = (props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), /* @__PURE__ */ react_default.createElement(Fullscreen_default, null));
 var ControlGroup_default = ControlGroup;
 
 // src/groups/EditingGroup.tsx
-var EditingGroup = /* @__PURE__ */ __name((props) => {
+var EditingGroup = (props) => {
   const { enableModeSwitch = true, borders = true, layoutType } = props;
   const { spacingSmall } = (0, themes_exports.useSplunkTheme)();
   const modeSwitch = (0, react_exports.useMemo)(() => {
@@ -2210,33 +2344,33 @@ var EditingGroup = /* @__PURE__ */ __name((props) => {
     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);
-}, "EditingGroup");
+};
 var EditingGroup_default = EditingGroup;
 
 // src/groups/EditorGroup.tsx
-var EditorGroup = /* @__PURE__ */ __name((props) => {
+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 }));
-}, "EditorGroup");
+};
 var EditorGroup_default = EditorGroup;
 
 // src/groups/EditorsControlGroup.tsx
-var EditorsControlGroup = /* @__PURE__ */ __name((props) => {
+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 }));
-}, "EditorsControlGroup");
+};
 var EditorsControlGroup_default = EditorsControlGroup;
 
 // src/groups/HistoryGroup.tsx
-var HistoryGroup = /* @__PURE__ */ __name((props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), /* @__PURE__ */ react_default.createElement(Undo_default, null), /* @__PURE__ */ react_default.createElement(Redo_default, null)), "HistoryGroup");
+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_default = HistoryGroup;
 
 // src/groups/SidebarControlGroup.tsx
-var SidebarControlGroup = /* @__PURE__ */ __name((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)), "SidebarControlGroup");
+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_default = SidebarControlGroup;
 
 // src/groups/VisualizationGroup.tsx
-var VisualizationGroup = /* @__PURE__ */ __name((props) => {
+var VisualizationGroup = (props) => {
   const buttons = (0, react_exports.useMemo)(() => {
     if (props.layoutType === "grid") {
       return [
@@ -2257,6 +2391,6 @@ var VisualizationGroup = /* @__PURE__ */ __name((props) => {
     ];
   }, [props.layoutType]);
   return /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), buttons);
-}, "VisualizationGroup");
+};
 var VisualizationGroup_default = VisualizationGroup;
 //# sourceMappingURL=index.js.map