@splunk/dashboard-toolbar 29.0.0

package/buttons/Charts.js

@@ -0,0 +1,384 @@
+/* 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 __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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 __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);
+
+// src/buttons/Charts.tsx
+var Charts_exports = {};
+__export(Charts_exports, {
+  default: () => Charts_default,
+  getVisualizationListFromTaxonomy: () => getVisualizationListFromTaxonomy
+});
+module.exports = __toCommonJS(Charts_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:@splunk/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
+});
+var defaultImport2 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:styled-components
+var styled_components_exports = {};
+__export(styled_components_exports, {
+  default: () => styled_components_default
+});
+var defaultImport3 = __toESM(require("styled-components"));
+__reExport(styled_components_exports, require("styled-components"));
+var styled_components_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:@splunk/react-ui/Dropdown
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  default: () => Dropdown_default
+});
+var defaultImport4 = __toESM(require("@splunk/react-ui/Dropdown"));
+__reExport(Dropdown_exports, require("@splunk/react-ui/Dropdown"));
+var Dropdown_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:@splunk/react-ui/Menu
+var Menu_exports = {};
+__export(Menu_exports, {
+  default: () => Menu_default
+});
+var defaultImport5 = __toESM(require("@splunk/react-ui/Menu"));
+__reExport(Menu_exports, require("@splunk/react-ui/Menu"));
+var Menu_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport6 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// esm-externals:@splunk/react-icons/ChartColumn
+var ChartColumn_exports = {};
+__export(ChartColumn_exports, {
+  default: () => ChartColumn_default
+});
+var defaultImport7 = __toESM(require("@splunk/react-icons/ChartColumn"));
+__reExport(ChartColumn_exports, require("@splunk/react-icons/ChartColumn"));
+var ChartColumn_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// esm-externals:@splunk/dashboard-ui
+var dashboard_ui_exports = {};
+__export(dashboard_ui_exports, {
+  default: () => dashboard_ui_default
+});
+var defaultImport8 = __toESM(require("@splunk/dashboard-ui"));
+__reExport(dashboard_ui_exports, require("@splunk/dashboard-ui"));
+var dashboard_ui_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// esm-externals:@splunk/dashboard-context
+var dashboard_context_exports = {};
+__export(dashboard_context_exports, {
+  default: () => dashboard_context_default
+});
+var defaultImport9 = __toESM(require("@splunk/dashboard-context"));
+__reExport(dashboard_context_exports, require("@splunk/dashboard-context"));
+var dashboard_context_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// esm-externals:@splunk/dashboard-state
+var dashboard_state_exports = {};
+__export(dashboard_state_exports, {
+  default: () => dashboard_state_default
+});
+var defaultImport10 = __toESM(require("@splunk/dashboard-state"));
+__reExport(dashboard_state_exports, require("@splunk/dashboard-state"));
+var dashboard_state_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+
+// 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 defaultImport11 = __toESM(require("@splunk/react-icons/CaretDown"));
+__reExport(CaretDown_exports, require("@splunk/react-icons/CaretDown"));
+var CaretDown_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+
+// esm-externals:@splunk/react-ui/ScreenReaderContent
+var ScreenReaderContent_exports = {};
+__export(ScreenReaderContent_exports, {
+  default: () => ScreenReaderContent_default
+});
+var defaultImport12 = __toESM(require("@splunk/react-ui/ScreenReaderContent"));
+__reExport(ScreenReaderContent_exports, require("@splunk/react-ui/ScreenReaderContent"));
+var ScreenReaderContent_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+
+// esm-externals:@splunk/react-ui/Button
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+var defaultImport13 = __toESM(require("@splunk/react-ui/Button"));
+__reExport(Button_exports, require("@splunk/react-ui/Button"));
+var Button_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+
+// 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));
+};
+
+// 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;
+//# sourceMappingURL=Charts.js.map

package/buttons/Charts.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/buttons/Charts.tsx", "react", "@splunk/ui-utils/i18n", "styled-components", "@splunk/react-ui/Dropdown", "@splunk/react-ui/Menu", "@splunk/themes", "@splunk/react-icons/ChartColumn", "@splunk/dashboard-ui", "@splunk/dashboard-context", "@splunk/dashboard-state", "../src/Item.tsx", "../src/hooks/useDropdown.ts", "@splunk/react-icons/CaretDown", "@splunk/react-ui/ScreenReaderContent", "@splunk/react-ui/Button", "../src/IconButton.tsx", "../src/components/StyledButton.tsx"],
+  "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport styled from 'styled-components';\nimport Dropdown, {\n    type DropdownChildrenRenderer,\n    type DropdownPossibleCloseReason,\n} from '@splunk/react-ui/Dropdown';\nimport Menu from '@splunk/react-ui/Menu';\nimport { SplunkThemeProvider, useSplunkTheme } from '@splunk/themes';\n\nimport AddChartDropdown from '@splunk/react-icons/ChartColumn';\n\nimport { VisualizationFilter, type Taxonomy } from '@splunk/dashboard-ui';\nimport { useFeatureFlags } from '@splunk/dashboard-context';\nimport { batch } from '@splunk/dashboard-state';\nimport ToolbarItem from '../Item';\nimport useDropdown from '../hooks/useDropdown';\nimport type { ToolbarButtonProps } from '../types/common';\nimport { prepareIcon } from '../IconButton';\nimport { StyledDropdownButton } from '../components/StyledButton';\n\ninterface ScrollableMenuProps {\n    maxHeight?: number | null;\n}\n\nconst ScrollableMenu = styled(Menu).attrs<ScrollableMenuProps>(\n    ({ maxHeight }) => ({\n        style: {\n            maxHeight: maxHeight ?? undefined,\n        },\n    })\n)<ScrollableMenuProps>`\n    overflow-y: auto;\n`;\n\nconst chartsDropdown = prepareIcon({\n    Icon: AddChartDropdown,\n    isMenu: true,\n    screenReaderContent: _('Add chart'),\n});\n\nconst ButtonToggle = (\n    <StyledDropdownButton\n        data-test=\"charts-button\"\n        data-clickable\n        appearance=\"subtle\"\n        icon={chartsDropdown}\n    />\n);\n\nconst focusToggleReasons: DropdownPossibleCloseReason[] = [];\n\ntype Visualizations = Taxonomy[number]['visualizations'];\n\n/**\n * export for unit testing\n * @private\n */\nexport const getVisualizationListFromTaxonomy = ({\n    taxonomy,\n    handleCreateVisualization,\n}: {\n    taxonomy: Taxonomy;\n    handleCreateVisualization: (opt: {\n        type: string;\n        options: Record<string, unknown>;\n    }) => () => void;\n}): JSX.Element[] =>\n    taxonomy.reduce(\n        (list: React.ReactElement[], { visualizations, category }) => {\n            const availableVisualizations: Visualizations =\n                visualizations.filter((props) => props.includeInToolbar);\n\n            if (availableVisualizations.length === 0) {\n                return list;\n            }\n\n            list.push(<Menu.Divider key={`menu-divider-${category}`} />);\n\n            return list.concat(\n                availableVisualizations.map((vizProps) => {\n                    const { label, type, initialOptions } = vizProps;\n                    const Icon = vizProps.icon as React.JSXElementConstructor<\n                        Record<string, unknown>\n                    > | null;\n\n                    if (!type) {\n                        return null;\n                    }\n\n                    const onClick = handleCreateVisualization({\n                        type,\n                        options: initialOptions as Record<string, unknown>,\n                    });\n\n                    return (\n                        <Menu.Item\n                            data-test={`add-${type}-button`}\n                            data-test-clickable\n                            onClick={onClick}\n                            startAdornment={!!Icon && <Icon size=\"18px\" />}\n                            key={`add-${type}-button`}\n                        >\n                            {label}\n                        </Menu.Item>\n                    );\n                }) as JSX.Element[]\n            );\n        },\n        []\n    );\n\n/**\n * Charts button that has a dropdown menu.\n */\nconst Charts = ({ dashboardApi, preset }: ToolbarButtonProps): JSX.Element => {\n    const { showNewDataForViz = true } = useFeatureFlags();\n\n    const { family } = useSplunkTheme();\n    const { handleForceClose, handleRequestClose, handleRequestOpen, isOpen } =\n        useDropdown({\n            isContentClickClose: false,\n        });\n\n    const taxonomy: Taxonomy = useMemo(\n        () => new VisualizationFilter(preset).taxonomy,\n        [preset]\n    );\n\n    const handleCreateVisualization = useCallback(\n        ({\n                type,\n                options,\n            }: {\n                type: string;\n                options: Record<string, unknown>;\n            }) =>\n            () => {\n                batch(() => {\n                    dashboardApi?.createVisualization({\n                        visualizationDefinition: { type, options },\n                    });\n\n                    if (showNewDataForViz) {\n                        dashboardApi?.openPanel({\n                            activePanel: 'connectData',\n                            panelProps: {\n                                bindingType: 'primary',\n                                from: {\n                                    activePanel: 'config',\n                                },\n                            },\n                        });\n                    }\n                });\n\n                handleForceClose();\n            },\n        [dashboardApi, showNewDataForViz, handleForceClose]\n    );\n\n    const visualizationList = useMemo(\n        () =>\n            getVisualizationListFromTaxonomy({\n                taxonomy,\n                handleCreateVisualization,\n            }),\n        [taxonomy, handleCreateVisualization]\n    );\n\n    const renderScrollableMenu = useCallback<DropdownChildrenRenderer>(\n        ({ maxHeight }) => (\n            <SplunkThemeProvider\n                density={family === 'enterprise' ? 'comfortable' : 'compact'}\n            >\n                <ScrollableMenu\n                    maxHeight={maxHeight}\n                    data-test=\"add-chart-menu\"\n                >\n                    {visualizationList}\n                </ScrollableMenu>\n            </SplunkThemeProvider>\n        ),\n        [family, visualizationList]\n    );\n\n    return (\n        <ToolbarItem>\n            <Dropdown\n                focusToggleReasons={focusToggleReasons}\n                onRequestClose={handleRequestClose}\n                onRequestOpen={handleRequestOpen}\n                open={isOpen}\n                toggle={ButtonToggle}\n            >\n                {renderScrollableMenu}\n            </Dropdown>\n        </ToolbarItem>\n    );\n};\n\nexport default Charts;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Dropdown\";\nexport * from \"@splunk/react-ui/Dropdown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Menu\";\nexport * from \"@splunk/react-ui/Menu\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/ChartColumn\";\nexport * from \"@splunk/react-icons/ChartColumn\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-ui\";\nexport * from \"@splunk/dashboard-ui\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-context\";\nexport * from \"@splunk/dashboard-context\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-state\";\nexport * from \"@splunk/dashboard-state\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\n\nexport default styled.div``;\n", "import type { DropdownRequestCloseHandler } from '@splunk/react-ui/Dropdown';\nimport { useCallback, useRef, useState } from 'react';\n\ninterface UseDropdownArgs {\n    isContentClickClose?: boolean;\n}\n\ninterface UseDropdownReturn {\n    isOpen: boolean;\n    handleRequestClose: DropdownRequestCloseHandler;\n    handleRequestOpen: () => void;\n    handleForceClose: () => void;\n    setHasChildModal: (value: boolean) => void;\n}\n\n/**\n * Custom React Hook for the controlled SUI Dropdown component.\n *\n * @param {Object} config\n * @param {Boolean} config.isContentClickClose Control if dropdown children onClick's will close the dropdown automatically\n * @returns {Object} value\n * @returns {Boolean} value.isOpen The only state of this hook\n * @returns {Function} value.handleRequestOpen Event handler to open the dropdown\n * @returns {Function} value.handleRequestClose Event handler that SUI Dropdown calls when requested to close\n * @returns {Function} value.handleForceClose Event handler to forcefully close the dropdown\n */\nconst useDropdown = ({\n    isContentClickClose = true,\n}: UseDropdownArgs): UseDropdownReturn => {\n    const [isOpen, setIsOpen] = useState(false);\n    const hasChildModal = useRef(false);\n\n    const handleRequestClose = useCallback<DropdownRequestCloseHandler>(\n        ({ reason }) => {\n            if (reason === 'contentClick' && !isContentClickClose) {\n                // This return results in the dropdown not closing.\n                return;\n            }\n\n            // If there is a child modal then don't close the root on ESC press\n            if (reason === 'escapeKey' && hasChildModal.current) {\n                return;\n            }\n\n            setIsOpen(false);\n        },\n        [isContentClickClose]\n    );\n\n    const handleRequestOpen = useCallback(() => {\n        setIsOpen(true);\n    }, []);\n\n    const handleForceClose = useCallback(() => {\n        setIsOpen(false);\n    }, []);\n\n    const setHasChildModal = useCallback((value: boolean) => {\n        hasChildModal.current = value;\n    }, []);\n\n    return {\n        isOpen,\n        handleRequestOpen,\n        handleRequestClose,\n        handleForceClose,\n        setHasChildModal,\n    };\n};\n\nexport default useDropdown;\n", "\nimport * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React from 'react';\nimport type SVG from '@splunk/react-icons/SVG';\nimport DropdownIcon from '@splunk/react-icons/CaretDown';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport Button, { type ButtonPropsBase } from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\nimport ToolbarItem from './Item';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledDropdownIcon = styled(DropdownIcon)`\n    margin-left: -5px;\n`;\n\nexport const iconSize = 24;\nexport const menuIconSize = 20;\n\ninterface PrepareIconProps extends React.ComponentProps<typeof SVG> {\n    Icon: React.ComponentType<React.ComponentProps<typeof SVG>>;\n    screenReaderContent?: string;\n    isMenu?: boolean;\n    variant?: 'filled' | 'outline' | 'none';\n}\n\n/**\n * Button adds a bunch of padding when there's any child elements even if they don't display anything (screenReaderContent)\n * This bundles the primary icon, a menu caret and screenReaderContent as an icon when needed.\n * Additionally accepts any properties of any react-icons element to be applied to primary icon\n * @param {Object} arg\n * @param {React.ElementType} arg.Icon The primary icon\n * @param {boolean} [arg.isMenu=false] Display a menu caret\n * @param {string} [arg.screenReaderContent] A label for the icon\n * @param {string} [arg.variant] Fill the icon, or not\n * @returns {JSX.Element}\n */\nexport const prepareIcon = ({\n    Icon,\n    screenReaderContent,\n    isMenu = false,\n    ...props\n}: PrepareIconProps) => {\n    const size = isMenu ? menuIconSize : iconSize;\n    return (\n        <>\n            <Icon width={size} height={size} {...props} />\n            {isMenu && (\n                <StyledDropdownIcon variant=\"filled\" width={9} height={size} />\n            )}\n            {screenReaderContent && (\n                <ScreenReaderContent>{screenReaderContent}</ScreenReaderContent>\n            )}\n        </>\n    );\n};\n\nexport interface IconButtonProps extends ToolbarButtonProps {\n    icon?: JSX.Element;\n    onClick?: ButtonPropsBase['onClick'];\n    label?: string;\n    buttonRef?: React.RefObject<HTMLButtonElement>;\n    testLabel?: string;\n    disabled?: boolean;\n}\n\nconst IconButton = ({\n    icon,\n    buttonRef,\n    disabled = false,\n    onClick,\n    label,\n    testLabel,\n    ...rest\n}: IconButtonProps): JSX.Element => {\n    return (\n        <ToolbarItem {...rest}>\n            <Button\n                elementRef={buttonRef}\n                onClick={onClick}\n                disabled={disabled}\n                appearance=\"subtle\"\n                icon={icon}\n                label={label}\n                data-test={testLabel}\n                data-clickable\n            />\n        </ToolbarItem>\n    );\n};\n\nexport default IconButton;\n", "import Button from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\n\nexport const StyledDropdownButton = styled(Button)`\n    max-width: '50px';\n`;\n"],
+  "mappings": "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",
+  "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
+}

package/buttons/Config.js

@@ -0,0 +1,224 @@
+/* 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 __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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 __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);
+
+// src/buttons/Config.tsx
+var Config_exports = {};
+__export(Config_exports, {
+  default: () => Config_default
+});
+module.exports = __toCommonJS(Config_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:@splunk/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
+});
+var defaultImport2 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:@splunk/react-icons/Cog
+var Cog_exports = {};
+__export(Cog_exports, {
+  default: () => Cog_default
+});
+var defaultImport3 = __toESM(require("@splunk/react-icons/Cog"));
+__reExport(Cog_exports, require("@splunk/react-icons/Cog"));
+var Cog_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:@splunk/dashboard-context
+var dashboard_context_exports = {};
+__export(dashboard_context_exports, {
+  default: () => dashboard_context_default
+});
+var defaultImport4 = __toESM(require("@splunk/dashboard-context"));
+__reExport(dashboard_context_exports, require("@splunk/dashboard-context"));
+var dashboard_context_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:@splunk/react-icons/CaretDown
+var CaretDown_exports = {};
+__export(CaretDown_exports, {
+  default: () => CaretDown_default
+});
+var defaultImport5 = __toESM(require("@splunk/react-icons/CaretDown"));
+__reExport(CaretDown_exports, require("@splunk/react-icons/CaretDown"));
+var CaretDown_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:@splunk/react-ui/ScreenReaderContent
+var ScreenReaderContent_exports = {};
+__export(ScreenReaderContent_exports, {
+  default: () => ScreenReaderContent_default
+});
+var defaultImport6 = __toESM(require("@splunk/react-ui/ScreenReaderContent"));
+__reExport(ScreenReaderContent_exports, require("@splunk/react-ui/ScreenReaderContent"));
+var ScreenReaderContent_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// esm-externals:@splunk/react-ui/Button
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+var defaultImport7 = __toESM(require("@splunk/react-ui/Button"));
+__reExport(Button_exports, require("@splunk/react-ui/Button"));
+var Button_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// esm-externals:styled-components
+var styled_components_exports = {};
+__export(styled_components_exports, {
+  default: () => styled_components_default
+});
+var defaultImport8 = __toESM(require("styled-components"));
+__reExport(styled_components_exports, require("styled-components"));
+var styled_components_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// src/Item.tsx
+var Item_default = styled_components_default.div``;
+
+// 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,
+    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,
+      label,
+      "data-test": testLabel,
+      "data-clickable": true
+    }
+  ));
+};
+var IconButton_default = IconButton;
+
+// src/buttons/Config.tsx
+var configurationIcon = prepareIcon({
+  Icon: Cog_default,
+  screenReaderContent: (0, i18n_exports._)("Configuration")
+});
+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";
+    if (isOpen) {
+      dashboardApi == null ? void 0 : dashboardApi.closePanel();
+    } else {
+      dashboardApi == null ? void 0 : dashboardApi.openPanel({
+        activePanel: "config",
+        panelProps: {
+          focusOnOpen: true
+        }
+      });
+    }
+  }, [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      buttonRef: configButtonRef,
+      testLabel: "config-button",
+      onClick: handleClick,
+      icon: configurationIcon
+    }
+  );
+};
+var Config_default = Config;
+//# sourceMappingURL=Config.js.map