@splunk/dashboard-toolbar 29.0.0

package/groups/VisualizationGroup.js

@@ -0,0 +1,1218 @@
+/* Copyright © 2020 Splunk Inc.
+SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
+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 });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  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/VisualizationGroup.tsx
+var VisualizationGroup_exports = {};
+__export(VisualizationGroup_exports, {
+  default: () => VisualizationGroup_default
+});
+module.exports = __toCommonJS(VisualizationGroup_exports);
+
+// esm-externals:react
+var react_exports = {};
+__export(react_exports, {
+  default: () => react_default
+});
+var defaultImport = __toESM(require("react"));
+__reExport(react_exports, require("react"));
+var react_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+// esm-externals:styled-components
+var styled_components_exports = {};
+__export(styled_components_exports, {
+  default: () => styled_components_default
+});
+var defaultImport2 = __toESM(require("styled-components"));
+__reExport(styled_components_exports, require("styled-components"));
+var styled_components_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:@splunk/dashboard-utils
+var dashboard_utils_exports = {};
+__export(dashboard_utils_exports, {
+  default: () => dashboard_utils_default
+});
+var defaultImport3 = __toESM(require("@splunk/dashboard-utils"));
+__reExport(dashboard_utils_exports, require("@splunk/dashboard-utils"));
+var dashboard_utils_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport4 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// src/components/ItemSeparator.tsx
+var ItemSeparator = styled_components_default.div`
+    border-left-width: 1px;
+    border-left-style: solid;
+    border-left-color: ${themes_exports.variables.interactiveColorBorder};
+    width: 0px;
+    height: ${themes_exports.variables.inputHeight};
+`;
+var ItemSeparator_default = ItemSeparator;
+
+// src/ItemGroup.tsx
+var Group = styled_components_default.div.attrs({
+  "data-test": "toolbar-item-group"
+})`
+    display: flex;
+    flex-direction: row;
+    gap: ${(props) => props.gap};
+`;
+var ItemGroup = (_a) => {
+  var _b = _a, {
+    children,
+    borders = true,
+    gap
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "borders",
+    "gap"
+  ]);
+  const items = react_default.Children.map(
+    children,
+    (child) => child && react_default.cloneElement(child, rest)
+  );
+  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);
+};
+var ItemGroup_default = ItemGroup;
+
+// esm-externals:@splunk/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
+});
+var defaultImport5 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:@splunk/react-ui/Dropdown
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  default: () => Dropdown_default
+});
+var defaultImport6 = __toESM(require("@splunk/react-ui/Dropdown"));
+__reExport(Dropdown_exports, require("@splunk/react-ui/Dropdown"));
+var Dropdown_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// esm-externals:@splunk/react-ui/Menu
+var Menu_exports = {};
+__export(Menu_exports, {
+  default: () => Menu_default
+});
+var defaultImport7 = __toESM(require("@splunk/react-ui/Menu"));
+__reExport(Menu_exports, require("@splunk/react-ui/Menu"));
+var Menu_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// esm-externals:@splunk/react-icons/ChartColumn
+var ChartColumn_exports = {};
+__export(ChartColumn_exports, {
+  default: () => ChartColumn_default
+});
+var defaultImport8 = __toESM(require("@splunk/react-icons/ChartColumn"));
+__reExport(ChartColumn_exports, require("@splunk/react-icons/ChartColumn"));
+var ChartColumn_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// esm-externals:@splunk/dashboard-ui
+var dashboard_ui_exports = {};
+__export(dashboard_ui_exports, {
+  default: () => dashboard_ui_default
+});
+var defaultImport9 = __toESM(require("@splunk/dashboard-ui"));
+__reExport(dashboard_ui_exports, require("@splunk/dashboard-ui"));
+var dashboard_ui_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// esm-externals:@splunk/dashboard-context
+var dashboard_context_exports = {};
+__export(dashboard_context_exports, {
+  default: () => dashboard_context_default
+});
+var defaultImport10 = __toESM(require("@splunk/dashboard-context"));
+__reExport(dashboard_context_exports, require("@splunk/dashboard-context"));
+var dashboard_context_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+
+// esm-externals:@splunk/dashboard-state
+var dashboard_state_exports = {};
+__export(dashboard_state_exports, {
+  default: () => dashboard_state_default
+});
+var defaultImport11 = __toESM(require("@splunk/dashboard-state"));
+__reExport(dashboard_state_exports, require("@splunk/dashboard-state"));
+var dashboard_state_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+
+// src/Item.tsx
+var Item_default = styled_components_default.div``;
+
+// src/hooks/useDropdown.ts
+var useDropdown = ({
+  isContentClickClose = true
+}) => {
+  const [isOpen, setIsOpen] = (0, react_exports.useState)(false);
+  const hasChildModal = (0, react_exports.useRef)(false);
+  const handleRequestClose = (0, react_exports.useCallback)(
+    ({ reason }) => {
+      if (reason === "contentClick" && !isContentClickClose) {
+        return;
+      }
+      if (reason === "escapeKey" && hasChildModal.current) {
+        return;
+      }
+      setIsOpen(false);
+    },
+    [isContentClickClose]
+  );
+  const handleRequestOpen = (0, react_exports.useCallback)(() => {
+    setIsOpen(true);
+  }, []);
+  const handleForceClose = (0, react_exports.useCallback)(() => {
+    setIsOpen(false);
+  }, []);
+  const setHasChildModal = (0, react_exports.useCallback)((value) => {
+    hasChildModal.current = value;
+  }, []);
+  return {
+    isOpen,
+    handleRequestOpen,
+    handleRequestClose,
+    handleForceClose,
+    setHasChildModal
+  };
+};
+var useDropdown_default = useDropdown;
+
+// esm-externals:@splunk/react-icons/CaretDown
+var CaretDown_exports = {};
+__export(CaretDown_exports, {
+  default: () => CaretDown_default
+});
+var defaultImport12 = __toESM(require("@splunk/react-icons/CaretDown"));
+__reExport(CaretDown_exports, require("@splunk/react-icons/CaretDown"));
+var CaretDown_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+
+// esm-externals:@splunk/react-ui/ScreenReaderContent
+var ScreenReaderContent_exports = {};
+__export(ScreenReaderContent_exports, {
+  default: () => ScreenReaderContent_default
+});
+var defaultImport13 = __toESM(require("@splunk/react-ui/ScreenReaderContent"));
+__reExport(ScreenReaderContent_exports, require("@splunk/react-ui/ScreenReaderContent"));
+var ScreenReaderContent_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+
+// esm-externals:@splunk/react-ui/Button
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+var defaultImport14 = __toESM(require("@splunk/react-ui/Button"));
+__reExport(Button_exports, require("@splunk/react-ui/Button"));
+var Button_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+
+// src/IconButton.tsx
+var StyledDropdownIcon = styled_components_default(CaretDown_default)`
+    margin-left: -5px;
+`;
+var iconSize = 24;
+var menuIconSize = 20;
+var prepareIcon = (_a) => {
+  var _b = _a, {
+    Icon,
+    screenReaderContent,
+    isMenu = false
+  } = _b, props = __objRest(_b, [
+    "Icon",
+    "screenReaderContent",
+    "isMenu"
+  ]);
+  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));
+};
+var IconButton = (_a) => {
+  var _b = _a, {
+    icon: icon9,
+    buttonRef,
+    disabled = false,
+    onClick,
+    label,
+    testLabel
+  } = _b, rest = __objRest(_b, [
+    "icon",
+    "buttonRef",
+    "disabled",
+    "onClick",
+    "label",
+    "testLabel"
+  ]);
+  return /* @__PURE__ */ react_default.createElement(Item_default, __spreadValues({}, rest), /* @__PURE__ */ react_default.createElement(
+    Button_default,
+    {
+      elementRef: buttonRef,
+      onClick,
+      disabled,
+      appearance: "subtle",
+      icon: icon9,
+      label,
+      "data-test": testLabel,
+      "data-clickable": true
+    }
+  ));
+};
+var IconButton_default = IconButton;
+
+// src/components/StyledButton.tsx
+var StyledDropdownButton = styled_components_default(Button_default)`
+    max-width: '50px';
+`;
+
+// src/buttons/Charts.tsx
+var ScrollableMenu = styled_components_default(Menu_default).attrs(
+  ({ maxHeight }) => ({
+    style: {
+      maxHeight: maxHeight != null ? maxHeight : void 0
+    }
+  })
+)`
+    overflow-y: auto;
+`;
+var chartsDropdown = prepareIcon({
+  Icon: ChartColumn_default,
+  isMenu: true,
+  screenReaderContent: (0, i18n_exports._)("Add chart")
+});
+var ButtonToggle = /* @__PURE__ */ react_default.createElement(
+  StyledDropdownButton,
+  {
+    "data-test": "charts-button",
+    "data-clickable": true,
+    appearance: "subtle",
+    icon: chartsDropdown
+  }
+);
+var focusToggleReasons = [];
+var getVisualizationListFromTaxonomy = ({
+  taxonomy,
+  handleCreateVisualization
+}) => taxonomy.reduce(
+  (list, { visualizations, category }) => {
+    const availableVisualizations = visualizations.filter((props) => props.includeInToolbar);
+    if (availableVisualizations.length === 0) {
+      return list;
+    }
+    list.push(/* @__PURE__ */ react_default.createElement(Menu_default.Divider, { key: `menu-divider-${category}` }));
+    return list.concat(
+      availableVisualizations.map((vizProps) => {
+        const { label, type, initialOptions } = vizProps;
+        const Icon = vizProps.icon;
+        if (!type) {
+          return null;
+        }
+        const onClick = handleCreateVisualization({
+          type,
+          options: initialOptions
+        });
+        return /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            "data-test": `add-${type}-button`,
+            "data-test-clickable": true,
+            onClick,
+            startAdornment: !!Icon && /* @__PURE__ */ react_default.createElement(Icon, { size: "18px" }),
+            key: `add-${type}-button`
+          },
+          label
+        );
+      })
+    );
+  },
+  []
+);
+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({
+    isContentClickClose: false
+  });
+  const taxonomy = (0, react_exports.useMemo)(
+    () => new dashboard_ui_exports.VisualizationFilter(preset).taxonomy,
+    [preset]
+  );
+  const handleCreateVisualization = (0, react_exports.useCallback)(
+    ({
+      type,
+      options
+    }) => () => {
+      (0, dashboard_state_exports.batch)(() => {
+        dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+          visualizationDefinition: { type, options }
+        });
+        if (showNewDataForViz) {
+          dashboardApi == null ? void 0 : dashboardApi.openPanel({
+            activePanel: "connectData",
+            panelProps: {
+              bindingType: "primary",
+              from: {
+                activePanel: "config"
+              }
+            }
+          });
+        }
+      });
+      handleForceClose();
+    },
+    [dashboardApi, showNewDataForViz, handleForceClose]
+  );
+  const visualizationList = (0, react_exports.useMemo)(
+    () => getVisualizationListFromTaxonomy({
+      taxonomy,
+      handleCreateVisualization
+    }),
+    [taxonomy, handleCreateVisualization]
+  );
+  const renderScrollableMenu = (0, react_exports.useCallback)(
+    ({ maxHeight }) => /* @__PURE__ */ react_default.createElement(
+      themes_exports.SplunkThemeProvider,
+      {
+        density: family === "enterprise" ? "comfortable" : "compact"
+      },
+      /* @__PURE__ */ react_default.createElement(
+        ScrollableMenu,
+        {
+          maxHeight,
+          "data-test": "add-chart-menu"
+        },
+        visualizationList
+      )
+    ),
+    [family, visualizationList]
+  );
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle
+    },
+    renderScrollableMenu
+  ));
+};
+var Charts_default = Charts;
+
+// esm-externals:@splunk/react-icons/Cog
+var Cog_exports = {};
+__export(Cog_exports, {
+  default: () => Cog_default
+});
+var defaultImport15 = __toESM(require("@splunk/react-icons/Cog"));
+__reExport(Cog_exports, require("@splunk/react-icons/Cog"));
+var Cog_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+
+// src/buttons/Config.tsx
+var configurationIcon = prepareIcon({
+  Icon: Cog_default,
+  screenReaderContent: (0, i18n_exports._)("Configuration")
+});
+
+// esm-externals:@splunk/react-icons/ArrowBroadUnderbarDown
+var ArrowBroadUnderbarDown_exports = {};
+__export(ArrowBroadUnderbarDown_exports, {
+  default: () => ArrowBroadUnderbarDown_default
+});
+var defaultImport16 = __toESM(require("@splunk/react-icons/ArrowBroadUnderbarDown"));
+__reExport(ArrowBroadUnderbarDown_exports, require("@splunk/react-icons/ArrowBroadUnderbarDown"));
+var ArrowBroadUnderbarDown_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+
+// src/buttons/ContentExport.tsx
+var icon = prepareIcon({
+  Icon: ArrowBroadUnderbarDown_default,
+  screenReaderContent: (0, i18n_exports._)("Export")
+});
+
+// esm-externals:@splunk/react-icons/CylinderMulti
+var CylinderMulti_exports = {};
+__export(CylinderMulti_exports, {
+  default: () => CylinderMulti_default
+});
+var defaultImport17 = __toESM(require("@splunk/react-icons/CylinderMulti"));
+__reExport(CylinderMulti_exports, require("@splunk/react-icons/CylinderMulti"));
+var CylinderMulti_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+
+// src/buttons/Data.tsx
+var dataInputIcon = prepareIcon({
+  Icon: CylinderMulti_default,
+  screenReaderContent: (0, i18n_exports._)("Data source overview")
+});
+
+// esm-externals:@splunk/react-icons/Square
+var Square_exports = {};
+__export(Square_exports, {
+  default: () => Square_default
+});
+var defaultImport18 = __toESM(require("@splunk/react-icons/Square"));
+__reExport(Square_exports, require("@splunk/react-icons/Square"));
+var Square_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+
+// src/buttons/EmptyVisualization.tsx
+var icon2 = prepareIcon({
+  Icon: Square_default,
+  screenReaderContent: (0, i18n_exports._)("Add rectangle")
+});
+var EmptyVisualization = ({ dashboardApi }) => {
+  const handleClick = (0, react_exports.useCallback)(() => __async(void 0, null, function* () {
+    dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+      visualizationDefinition: {
+        type: "splunk.rectangle",
+        options: {
+          fillColor: "transparent",
+          strokeColor: "transparent"
+        }
+      }
+    });
+    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+      activePanel: "config"
+    });
+  }), [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      testLabel: "empty-viz-button",
+      onClick: handleClick,
+      icon: icon2
+    }
+  );
+};
+var EmptyVisualization_default = EmptyVisualization;
+
+// esm-externals:@splunk/react-icons/ChevronsOut
+var ChevronsOut_exports = {};
+__export(ChevronsOut_exports, {
+  default: () => ChevronsOut_default
+});
+var defaultImport19 = __toESM(require("@splunk/react-icons/ChevronsOut"));
+__reExport(ChevronsOut_exports, require("@splunk/react-icons/ChevronsOut"));
+var ChevronsOut_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+
+// src/buttons/Fullscreen.tsx
+var icon3 = prepareIcon({
+  Icon: ChevronsOut_default,
+  screenReaderContent: (0, i18n_exports._)("Fullscreen")
+});
+
+// esm-externals:@splunk/react-ui/Switch
+var Switch_exports = {};
+__export(Switch_exports, {
+  default: () => Switch_default
+});
+var defaultImport20 = __toESM(require("@splunk/react-ui/Switch"));
+__reExport(Switch_exports, require("@splunk/react-ui/Switch"));
+var Switch_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+
+// src/buttons/GridLineSwitch.tsx
+var SwitchContainer = styled_components_default.div`
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: ${themes_exports.variables.spacingSmall};
+`;
+
+// esm-externals:@splunk/react-icons/ChartSingleValueIcon
+var ChartSingleValueIcon_exports = {};
+__export(ChartSingleValueIcon_exports, {
+  default: () => ChartSingleValueIcon_default
+});
+var defaultImport21 = __toESM(require("@splunk/react-icons/ChartSingleValueIcon"));
+__reExport(ChartSingleValueIcon_exports, require("@splunk/react-icons/ChartSingleValueIcon"));
+var ChartSingleValueIcon_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+
+// src/buttons/IconGallery.tsx
+var MenusContainer = styled_components_default.div`
+    display: flex;
+    padding: 5px;
+`;
+var iconGalleryDropdown = prepareIcon({
+  Icon: ChartSingleValueIcon_default,
+  screenReaderContent: (0, i18n_exports._)("Add icon"),
+  isMenu: true
+});
+var focusToggleReasons2 = [];
+var IconGallery = ({ dashboardApi }) => {
+  const {
+    handleForceClose,
+    handleRequestClose,
+    handleRequestOpen,
+    setHasChildModal,
+    isOpen
+  } = useDropdown_default({
+    isContentClickClose: false
+  });
+  const ButtonToggle4 = (0, react_exports.useMemo)(
+    () => /* @__PURE__ */ react_default.createElement(
+      StyledDropdownButton,
+      {
+        "data-test": "icon-gallery-button",
+        "data-clickable": true,
+        appearance: "subtle",
+        icon: iconGalleryDropdown
+      }
+    ),
+    []
+  );
+  const handlePanelClick = (0, react_exports.useCallback)(
+    (iconURL) => __async(void 0, null, function* () {
+      dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+        visualizationDefinition: {
+          type: "splunk.singlevalueicon",
+          options: {
+            showValue: false,
+            icon: iconURL
+          }
+        }
+      });
+      dashboardApi == null ? void 0 : dashboardApi.openPanel({
+        activePanel: "config"
+      });
+      handleForceClose();
+    }),
+    [dashboardApi, handleForceClose]
+  );
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons: focusToggleReasons2,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle4
+    },
+    /* @__PURE__ */ react_default.createElement(MenusContainer, { "data-test": "icon-menu", "data-open": isOpen }, /* @__PURE__ */ react_default.createElement(
+      dashboard_ui_exports.IconGallery,
+      {
+        onClick: handlePanelClick,
+        setHasChildModal
+      }
+    ))
+  ));
+};
+var IconGallery_default = IconGallery;
+
+// esm-externals:@splunk/react-icons/QuestionCircle
+var QuestionCircle_exports = {};
+__export(QuestionCircle_exports, {
+  default: () => QuestionCircle_default
+});
+var defaultImport22 = __toESM(require("@splunk/react-icons/QuestionCircle"));
+__reExport(QuestionCircle_exports, require("@splunk/react-icons/QuestionCircle"));
+var QuestionCircle_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+
+// src/buttons/HelpButton.tsx
+var HelpIcon = prepareIcon({
+  Icon: QuestionCircle_default,
+  screenReaderContent: (0, i18n_exports._)("Help links"),
+  isMenu: true
+});
+
+// esm-externals:@splunk/react-icons/Picture
+var Picture_exports = {};
+__export(Picture_exports, {
+  default: () => Picture_default
+});
+var defaultImport23 = __toESM(require("@splunk/react-icons/Picture"));
+__reExport(Picture_exports, require("@splunk/react-icons/Picture"));
+var Picture_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+
+// src/buttons/Image.tsx
+var icon4 = prepareIcon({
+  Icon: Picture_default,
+  screenReaderContent: (0, i18n_exports._)("Add image")
+});
+var Image = ({ dashboardApi }) => {
+  const handleClick = (0, react_exports.useCallback)(() => __async(void 0, null, function* () {
+    dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+      visualizationDefinition: {
+        type: "splunk.image",
+        options: {
+          preserveAspectRatio: true
+        }
+      }
+    });
+    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+      activePanel: "config"
+    });
+  }), [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      testLabel: "image-button",
+      onClick: handleClick,
+      icon: icon4
+    }
+  );
+};
+var Image_default = Image;
+
+// src/buttons/ImageGallery.tsx
+var MenusContainer2 = styled_components_default.div`
+    display: flex;
+    padding: 5px;
+`;
+var imageGalleryDropdown = prepareIcon({
+  Icon: Picture_default,
+  screenReaderContent: (0, i18n_exports._)("Add image"),
+  isMenu: true
+});
+
+// esm-externals:lodash
+var lodash_exports = {};
+__export(lodash_exports, {
+  default: () => lodash_default
+});
+var defaultImport24 = __toESM(require("lodash"));
+__reExport(lodash_exports, require("lodash"));
+var lodash_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+
+// esm-externals:@splunk/react-icons/SlidersTripleHorizontal
+var SlidersTripleHorizontal_exports = {};
+__export(SlidersTripleHorizontal_exports, {
+  default: () => SlidersTripleHorizontal_default
+});
+var defaultImport25 = __toESM(require("@splunk/react-icons/SlidersTripleHorizontal"));
+__reExport(SlidersTripleHorizontal_exports, require("@splunk/react-icons/SlidersTripleHorizontal"));
+var SlidersTripleHorizontal_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+
+// esm-externals:@splunk/dashboard-definition
+var dashboard_definition_exports = {};
+__export(dashboard_definition_exports, {
+  default: () => dashboard_definition_default
+});
+var defaultImport26 = __toESM(require("@splunk/dashboard-definition"));
+__reExport(dashboard_definition_exports, require("@splunk/dashboard-definition"));
+var dashboard_definition_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+
+// src/buttons/Inputs.tsx
+var focusToggleReasons3 = [];
+var DEFAULT_PRESET_MAP = Object.freeze({});
+var addInputIcon = prepareIcon({
+  Icon: SlidersTripleHorizontal_default,
+  screenReaderContent: (0, i18n_exports._)("Add input"),
+  isMenu: true
+});
+var ButtonToggle2 = /* @__PURE__ */ react_default.createElement(
+  StyledDropdownButton,
+  {
+    appearance: "subtle",
+    "data-clickable": true,
+    "data-test": "inputs-button",
+    icon: addInputIcon
+  }
+);
+var onCreateInputClickFactory = ({
+  type,
+  defaultConfig,
+  tokenPrefix,
+  showToken,
+  dashboardApi
+}) => () => {
+  if (!dashboardApi) {
+    return;
+  }
+  const newConfig = __spreadProps(__spreadValues({}, defaultConfig), {
+    type,
+    options: __spreadValues({}, defaultConfig.options)
+  });
+  if (showToken) {
+    newConfig.options.token = dashboard_definition_exports.DashboardDefinition.fromJSON(
+      dashboardApi == null ? void 0 : dashboardApi.getDefinition()
+    ).nextTokenId(tokenPrefix);
+  }
+  dashboardApi.addInput(newConfig);
+  dashboardApi.openPanel({ activePanel: "config" });
+};
+var Inputs = ({
+  dashboardApi,
+  preset = DEFAULT_PRESET_MAP
+}) => {
+  const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
+    isContentClickClose: true
+  });
+  const InputTypeButtons = (0, react_exports.useMemo)(() => {
+    const buttons = [];
+    const inputs = preset == null ? void 0 : preset.inputs;
+    (0, lodash_exports.each)(inputs, (InputImpl, type) => {
+      const {
+        baseShape = {},
+        label = (0, i18n_exports._)(`${type} Input`),
+        description = "",
+        tokenPrefix = "token",
+        includeInToolbar = true,
+        icon: Icon = SlidersTripleHorizontal_default,
+        // showToken flags whether or not the input has a token assigned on creation
+        showToken = true
+      } = InputImpl.config || {};
+      if (!includeInToolbar) {
+        return;
+      }
+      const handleClick = onCreateInputClickFactory({
+        type,
+        defaultConfig: baseShape,
+        tokenPrefix,
+        showToken,
+        dashboardApi
+      });
+      const inputIcon = /* @__PURE__ */ react_default.createElement(Icon, { width: "24px", height: "24px" });
+      buttons.push(
+        /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            "data-test": `add-${type}-button`,
+            "data-test-clickable": true,
+            onClick: handleClick,
+            startAdornment: inputIcon,
+            description,
+            key: `add-${type}-button`
+          },
+          label
+        )
+      );
+    });
+    if (buttons.length === 0) {
+      buttons.push(
+        /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            "data-test": "no-inputs-in-preset",
+            key: "no-inputs-in-preset",
+            disabled: true
+          },
+          (0, i18n_exports._)("No Inputs")
+        )
+      );
+    }
+    return buttons;
+  }, [preset, dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons: focusToggleReasons3,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle2
+    },
+    /* @__PURE__ */ react_default.createElement(Menu_default, null, InputTypeButtons)
+  ));
+};
+var Inputs_default = Inputs;
+
+// esm-externals:@splunk/react-icons/Markdown
+var Markdown_exports = {};
+__export(Markdown_exports, {
+  default: () => Markdown_default
+});
+var defaultImport27 = __toESM(require("@splunk/react-icons/Markdown"));
+__reExport(Markdown_exports, require("@splunk/react-icons/Markdown"));
+var Markdown_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+
+// src/buttons/Markdown.tsx
+var icon5 = prepareIcon({
+  Icon: Markdown_default,
+  screenReaderContent: (0, i18n_exports._)("Add markdown text")
+});
+var Markdown = ({ dashboardApi }) => {
+  const handleClick = (0, react_exports.useCallback)(() => {
+    dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+      visualizationDefinition: {
+        type: "splunk.markdown",
+        options: {
+          markdown: ""
+        }
+      }
+    });
+    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+      activePanel: "config"
+    });
+  }, [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      testLabel: "markdown-button",
+      onClick: handleClick,
+      icon: icon5
+    }
+  );
+};
+var Markdown_default2 = Markdown;
+
+// esm-externals:@splunk/react-icons/ArrowBowRight
+var ArrowBowRight_exports = {};
+__export(ArrowBowRight_exports, {
+  default: () => ArrowBowRight_default
+});
+var defaultImport28 = __toESM(require("@splunk/react-icons/ArrowBowRight"));
+__reExport(ArrowBowRight_exports, require("@splunk/react-icons/ArrowBowRight"));
+var ArrowBowRight_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+
+// src/buttons/Redo.tsx
+var icon6 = prepareIcon({
+  Icon: ArrowBowRight_default,
+  screenReaderContent: (0, i18n_exports._)("Redo")
+});
+
+// esm-externals:@splunk/react-icons/Circle
+var Circle_exports = {};
+__export(Circle_exports, {
+  default: () => Circle_default
+});
+var defaultImport29 = __toESM(require("@splunk/react-icons/Circle"));
+__reExport(Circle_exports, require("@splunk/react-icons/Circle"));
+var Circle_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+
+// esm-externals:@splunk/react-icons/Line
+var Line_exports = {};
+__export(Line_exports, {
+  default: () => Line_default
+});
+var defaultImport30 = __toESM(require("@splunk/react-icons/Line"));
+__reExport(Line_exports, require("@splunk/react-icons/Line"));
+var Line_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+
+// esm-externals:@splunk/react-icons/ShapesVariety
+var ShapesVariety_exports = {};
+__export(ShapesVariety_exports, {
+  default: () => ShapesVariety_default
+});
+var defaultImport31 = __toESM(require("@splunk/react-icons/ShapesVariety"));
+__reExport(ShapesVariety_exports, require("@splunk/react-icons/ShapesVariety"));
+var ShapesVariety_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+
+// src/PopoverItemButton.tsx
+var StyledContentWrapper = styled_components_default.span`
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: center;
+    max-width: 100%;
+`;
+var StyledIcon = styled_components_default.span`
+    display: inline-block;
+    padding-right: 8px;
+`;
+var StyledLabel = styled_components_default.span`
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex: 0 1 auto;
+`;
+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;
+
+// src/buttons/Shapes.tsx
+var shapesDropdown = prepareIcon({
+  Icon: ShapesVariety_default,
+  screenReaderContent: (0, i18n_exports._)("Add shape"),
+  isMenu: true
+});
+var ButtonToggle3 = /* @__PURE__ */ react_default.createElement(
+  StyledDropdownButton,
+  {
+    appearance: "subtle",
+    "data-clickable": true,
+    "data-test": "shapes-button",
+    icon: shapesDropdown
+  }
+);
+var focusToggleReasons4 = [];
+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 = ({ dashboardApi, layoutType }) => {
+  const supportLine = layoutType === "absolute";
+  const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
+    isContentClickClose: true
+  });
+  const handleCreateVizButtonClick = (0, react_exports.useCallback)(
+    (vizToCreate, layoutItemType) => {
+      return () => {
+        dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+          visualizationDefinition: vizToCreate,
+          layoutItemType
+        });
+        dashboardApi == null ? void 0 : dashboardApi.openPanel({ activePanel: "config" });
+      };
+    },
+    [dashboardApi]
+  );
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons: focusToggleReasons4,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle3
+    },
+    /* @__PURE__ */ react_default.createElement(Menu_default, { "data-test": "shapes-dropdown-children-container" }, /* @__PURE__ */ react_default.createElement(
+      Menu_default.Item,
+      {
+        "data-test": "ellipse-button",
+        onClick: handleCreateVizButtonClick({
+          type: "splunk.ellipse"
+        })
+      },
+      /* @__PURE__ */ react_default.createElement(
+        PopoverItemButton_default,
+        {
+          icon: circleIcon,
+          label: (0, i18n_exports._)("Ellipse")
+        }
+      )
+    ), /* @__PURE__ */ react_default.createElement(
+      Menu_default.Item,
+      {
+        "data-test": "rectangle-button",
+        onClick: handleCreateVizButtonClick({
+          type: "splunk.rectangle"
+        })
+      },
+      /* @__PURE__ */ react_default.createElement(
+        PopoverItemButton_default,
+        {
+          icon: uncheckedBoxIcon,
+          label: (0, i18n_exports._)("Rectangle")
+        }
+      )
+    ), supportLine && /* @__PURE__ */ react_default.createElement(
+      Menu_default.Item,
+      {
+        "data-test": "line-button",
+        onClick: handleCreateVizButtonClick(
+          {
+            type: "abslayout.line"
+          },
+          "line"
+        )
+      },
+      /* @__PURE__ */ react_default.createElement(
+        PopoverItemButton_default,
+        {
+          icon: lineIcon,
+          label: (0, i18n_exports._)("Line")
+        }
+      )
+    ))
+  ));
+};
+var Shapes_default = Shapes;
+
+// esm-externals:@splunk/react-icons/WindowChevronsSlash
+var WindowChevronsSlash_exports = {};
+__export(WindowChevronsSlash_exports, {
+  default: () => WindowChevronsSlash_default
+});
+var defaultImport32 = __toESM(require("@splunk/react-icons/WindowChevronsSlash"));
+__reExport(WindowChevronsSlash_exports, require("@splunk/react-icons/WindowChevronsSlash"));
+var WindowChevronsSlash_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+
+// src/buttons/Source.tsx
+var icon7 = prepareIcon({
+  Icon: WindowChevronsSlash_default,
+  screenReaderContent: (0, i18n_exports._)("Source code")
+});
+
+// esm-externals:@splunk/react-icons/ListToken
+var ListToken_exports = {};
+__export(ListToken_exports, {
+  default: () => ListToken_default
+});
+var defaultImport33 = __toESM(require("@splunk/react-icons/ListToken"));
+__reExport(ListToken_exports, require("@splunk/react-icons/ListToken"));
+var ListToken_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+
+// esm-externals:@splunk/react-ui/Tooltip
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  default: () => Tooltip_default
+});
+var defaultImport34 = __toESM(require("@splunk/react-ui/Tooltip"));
+__reExport(Tooltip_exports, require("@splunk/react-ui/Tooltip"));
+var Tooltip_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+
+// src/buttons/tokenManager/TokenManager.tsx
+var tokenManagerIcon = prepareIcon({
+  Icon: ListToken_default,
+  screenReaderContent: (0, i18n_exports._)("Token manager")
+});
+
+// esm-externals:@splunk/react-icons/ArrowBowLeft
+var ArrowBowLeft_exports = {};
+__export(ArrowBowLeft_exports, {
+  default: () => ArrowBowLeft_default
+});
+var defaultImport35 = __toESM(require("@splunk/react-icons/ArrowBowLeft"));
+__reExport(ArrowBowLeft_exports, require("@splunk/react-icons/ArrowBowLeft"));
+var ArrowBowLeft_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+
+// src/buttons/Undo.tsx
+var icon8 = prepareIcon({
+  Icon: ArrowBowLeft_default,
+  screenReaderContent: (0, i18n_exports._)("Undo")
+});
+
+// esm-externals:@splunk/dashboard-telemetry
+var dashboard_telemetry_exports = {};
+__export(dashboard_telemetry_exports, {
+  default: () => dashboard_telemetry_default
+});
+var defaultImport36 = __toESM(require("@splunk/dashboard-telemetry"));
+__reExport(dashboard_telemetry_exports, require("@splunk/dashboard-telemetry"));
+var dashboard_telemetry_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+
+// esm-externals:@splunk/ui-utils/format
+var format_exports = {};
+__export(format_exports, {
+  default: () => format_default
+});
+var defaultImport37 = __toESM(require("@splunk/ui-utils/format"));
+__reExport(format_exports, require("@splunk/ui-utils/format"));
+var format_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+
+// esm-externals:@splunk/react-ui/Number
+var Number_exports = {};
+__export(Number_exports, {
+  default: () => Number_default
+});
+var defaultImport38 = __toESM(require("@splunk/react-ui/Number"));
+__reExport(Number_exports, require("@splunk/react-ui/Number"));
+var Number_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+
+// src/buttons/Zoom/ZoomNumber.tsx
+var StyledNumber = styled_components_default(Number_default)`
+    padding-right: ${themes_exports.variables.spacingSmall};
+    & > input {
+        text-align: right;
+    }
+`;
+var StyledEndAdornment = styled_components_default.span`
+    color: ${themes_exports.variables.contentColorActive};
+`;
+
+// src/buttons/Zoom/Zoom.tsx
+var Container = styled_components_default.div`
+    margin-inline-end: 0;
+    display: flex;
+    min-width: 96px;
+    gap: ${themes_exports.variables.spacingSmall};
+`;
+var StyledTooltip = styled_components_default(Tooltip_default)`
+    width: 110px;
+    & span {
+        display: flex;
+    }
+`;
+
+// src/groups/VisualizationGroup.tsx
+var VisualizationGroup = (props) => {
+  const buttons = (0, react_exports.useMemo)(() => {
+    if (props.layoutType === "grid") {
+      return [
+        /* @__PURE__ */ react_default.createElement(Charts_default, { key: "charts" }),
+        /* @__PURE__ */ react_default.createElement(Inputs_default, { key: "inputs" }),
+        /* @__PURE__ */ react_default.createElement(EmptyVisualization_default, { key: "empty-viz" }),
+        /* @__PURE__ */ react_default.createElement(Image_default, { key: "images" }),
+        /* @__PURE__ */ react_default.createElement(Markdown_default2, { key: "markdown" })
+      ];
+    }
+    return [
+      /* @__PURE__ */ react_default.createElement(Charts_default, { key: "charts" }),
+      /* @__PURE__ */ react_default.createElement(Inputs_default, { key: "inputs" }),
+      /* @__PURE__ */ react_default.createElement(IconGallery_default, { key: "icon-gallery" }),
+      /* @__PURE__ */ react_default.createElement(Shapes_default, { key: "shapes" }),
+      /* @__PURE__ */ react_default.createElement(Image_default, { key: "images" }),
+      /* @__PURE__ */ react_default.createElement(Markdown_default2, { key: "markdown" })
+    ];
+  }, [props.layoutType]);
+  return /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), buttons);
+};
+var VisualizationGroup_default = VisualizationGroup;
+//# sourceMappingURL=VisualizationGroup.js.map