@splunk/dashboard-toolbar 29.0.0

package/module/chunks/chunk-2QMHWIV5.js

@@ -0,0 +1,175 @@
+/* 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. */
+import {
+  dashboard_context_exports
+} from "./chunk-G6N5OMKL.js";
+import {
+  i18n_exports
+} from "./chunk-BSMCGXVQ.js";
+import {
+  ScreenReaderContent_default,
+  ScreenReaderContent_exports,
+  iconSize
+} from "./chunk-GWAXQYWY.js";
+import {
+  Button_default,
+  Button_exports
+} from "./chunk-YKT3CRI6.js";
+import {
+  dashboard_state_exports
+} from "./chunk-NJF2IOVV.js";
+import {
+  themes_exports
+} from "./chunk-IGGLU44N.js";
+import {
+  react_default,
+  react_exports
+} from "./chunk-NWVLNDCF.js";
+import {
+  styled_components_default,
+  styled_components_exports
+} from "./chunk-BRGYD3MR.js";
+import {
+  __export,
+  __reExport
+} from "./chunk-VQIRZ53C.js";
+
+// esm-externals:@splunk/react-ui/TransitionOpen
+var TransitionOpen_exports = {};
+__export(TransitionOpen_exports, {
+  default: () => TransitionOpen_default
+});
+__reExport(TransitionOpen_exports, TransitionOpen_star);
+import * as defaultImport from "@splunk/react-ui/TransitionOpen";
+import * as TransitionOpen_star from "@splunk/react-ui/TransitionOpen";
+var TransitionOpen_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+// esm-externals:@splunk/react-icons/ChevronRight
+var ChevronRight_exports = {};
+__export(ChevronRight_exports, {
+  default: () => ChevronRight_default
+});
+__reExport(ChevronRight_exports, ChevronRight_star);
+import * as defaultImport2 from "@splunk/react-icons/ChevronRight";
+import * as ChevronRight_star from "@splunk/react-icons/ChevronRight";
+var ChevronRight_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:@splunk/react-icons/ChevronLeft
+var ChevronLeft_exports = {};
+__export(ChevronLeft_exports, {
+  default: () => ChevronLeft_default
+});
+__reExport(ChevronLeft_exports, ChevronLeft_star);
+import * as defaultImport3 from "@splunk/react-icons/ChevronLeft";
+import * as ChevronLeft_star from "@splunk/react-icons/ChevronLeft";
+var ChevronLeft_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// src/CollapsibleToolbar.tsx
+var TOOLBAR_HEIGHT = 48;
+var ToolbarWrapper = styled_components_default.div`
+    display: flex;
+    align-items: center;
+    position: absolute;
+    right: 0;
+    z-index: 6;
+    height: ${TOOLBAR_HEIGHT}px;
+    background-color: ${themes_exports.variables.backgroundColorNavigation};
+    color: ${themes_exports.variables.contentColorDefault};
+    box-shadow: ${themes_exports.variables.overlayShadow};
+    border-radius: 0 0 0 20px;
+`;
+var StyledTransitionOpen = styled_components_default(TransitionOpen_default)`
+    border-right: ${({ open }) => open ? "solid" : "none"};
+    border-width: 0 1px 0 0;
+    border-color: ${themes_exports.variables.interactiveColorBorder};
+`;
+var ToolbarItemsWrapper = styled_components_default.div`
+    display: flex;
+    padding: 2px 4px 2px 8px;
+    gap: ${themes_exports.variables.spacingSmall};
+    margin-inline-end: ${themes_exports.variables.spacingSmall};
+`;
+var transition = styled_components_exports.css`
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in-out;
+`;
+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"};
+        transition-property: border-radius, height, width, margin-right;
+        ${transition}
+    }
+`;
+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 = ({
+  preset = DEFAULT_PRESET_MAP,
+  dashboardApi,
+  initialExpanded = true,
+  mode = "view",
+  toolbarItems = []
+}) => {
+  const apiRegistry = (0, dashboard_context_exports.useApiRegistry)();
+  const [expanded, setExpanded] = (0, react_exports.useState)(initialExpanded);
+  const handleExpandToggle = (0, react_exports.useCallback)(
+    () => setExpanded((prevExpanded) => !prevExpanded),
+    []
+  );
+  const layoutType = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectLayoutType);
+  const injectedToolbarItems = (0, react_exports.useMemo)(
+    () => toolbarItems.map(
+      (item) => (0, react_exports.cloneElement)(item, {
+        mode,
+        preset,
+        layoutType,
+        dashboardApi,
+        borders: false
+      })
+    ),
+    [toolbarItems, mode, preset, dashboardApi, layoutType]
+  );
+  const ExpandButtonIcon = (0, react_exports.useMemo)(
+    () => expanded ? expandedIcon : collapsedIcon,
+    [expanded]
+  );
+  (0, react_exports.useEffect)(() => {
+    const toolbarApiRef = {
+      toggle: () => handleExpandToggle(),
+      expand: () => setExpanded(true),
+      collapse: () => setExpanded(false)
+    };
+    apiRegistry.registerToolbarApi(toolbarApiRef);
+    return () => {
+      apiRegistry.removeToolbarApi();
+    };
+  }, [apiRegistry, handleExpandToggle]);
+  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,
+    {
+      "data-test": "expand-button",
+      expanded,
+      onClick: handleExpandToggle,
+      icon: ExpandButtonIcon,
+      "data-clickable": true
+    }
+  ));
+};
+CollapsibleToolbar.displayName = "CollapsibleToolbar";
+var CollapsibleToolbar_default = CollapsibleToolbar;
+
+export {
+  CollapsibleToolbar_default
+};
+//# sourceMappingURL=chunk-2QMHWIV5.js.map

package/module/chunks/chunk-2QMHWIV5.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["@splunk/react-ui/TransitionOpen", "@splunk/react-icons/ChevronRight", "@splunk/react-icons/ChevronLeft", "../../src/CollapsibleToolbar.tsx"],
+  "sourcesContent": ["\nimport * as defaultImport from \"@splunk/react-ui/TransitionOpen\";\nexport * from \"@splunk/react-ui/TransitionOpen\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/ChevronRight\";\nexport * from \"@splunk/react-icons/ChevronRight\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/ChevronLeft\";\nexport * from \"@splunk/react-icons/ChevronLeft\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, {\n    useState,\n    useCallback,\n    cloneElement,\n    useMemo,\n    useEffect,\n} from 'react';\nimport { useApiRegistry } from '@splunk/dashboard-context';\nimport styled, { css } from 'styled-components';\nimport Button from '@splunk/react-ui/Button';\nimport TransitionOpen from '@splunk/react-ui/TransitionOpen';\nimport { variables } from '@splunk/themes';\nimport ChevronRight from '@splunk/react-icons/ChevronRight';\nimport ChevronLeft from '@splunk/react-icons/ChevronLeft';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport { selectLayoutType, useSelector } from '@splunk/dashboard-state';\nimport type { PresetMap } from '@splunk/dashboard-types';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport type { CommonToolbarBaseProps } from './types/common';\nimport { iconSize } from './IconButton';\n\nconst TOOLBAR_HEIGHT = 48;\n\nconst ToolbarWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    z-index: 6;\n    height: ${TOOLBAR_HEIGHT}px;\n    background-color: ${variables.backgroundColorNavigation};\n    color: ${variables.contentColorDefault};\n    box-shadow: ${variables.overlayShadow};\n    border-radius: 0 0 0 20px;\n`;\n\nconst StyledTransitionOpen = styled(TransitionOpen)`\n    border-right: ${({ open }) => (open ? 'solid' : 'none')};\n    border-width: 0 1px 0 0;\n    border-color: ${variables.interactiveColorBorder};\n`;\n\nconst ToolbarItemsWrapper = styled.div`\n    display: flex;\n    padding: 2px 4px 2px 8px;\n    gap: ${variables.spacingSmall};\n    margin-inline-end: ${variables.spacingSmall};\n`;\n\n// Keep the button and toolbar container animating at the same speed\nconst transition = css`\n    transition-duration: 0.2s;\n    transition-timing-function: ease-in-out;\n`;\nconst ExpandButton = styled(Button)<{\n    expanded: boolean;\n}>`\n    // To get specific enough to override the default Button styling\n    && {\n        // We shrink the button a bit when the toolbar is expanded since it\n        // switches to a circle button and needs a bit more space to breath\n        height: ${({ expanded }) =>\n            expanded ? `${TOOLBAR_HEIGHT - 4}px` : `${TOOLBAR_HEIGHT}px`};\n        width: ${({ expanded }) =>\n            expanded ? `${TOOLBAR_HEIGHT - 4}px` : `${TOOLBAR_HEIGHT}px`};\n        margin: ${({ expanded }) => (expanded ? '0 4px 0 4px' : '0')};\n        padding: 0;\n        border: none;\n        box-shadow: none;\n        background-color: ${variables.backgroundColorNavigation};\n        border-radius: ${(props) => (props.expanded ? '40px' : '0 0 0 20px')};\n        transition-property: border-radius, height, width, margin-right;\n        ${transition}\n    }\n`;\n\nconst expandedIcon = (\n    <>\n        <ChevronRight width={iconSize} height={iconSize} />\n        <ScreenReaderContent>{_('Expanded')}</ScreenReaderContent>\n    </>\n);\n\nconst collapsedIcon = (\n    <>\n        <ChevronLeft width={iconSize} height={iconSize} />\n        <ScreenReaderContent>{_('Collapsed')}</ScreenReaderContent>\n    </>\n);\n\nexport type CollapsibleToolbarProps = CommonToolbarBaseProps & {\n    initialExpanded?: boolean;\n    toolbarItems?: React.ReactElement[];\n};\n\nconst DEFAULT_PRESET_MAP = Object.freeze({} as PresetMap);\n\nconst CollapsibleToolbar = ({\n    preset = DEFAULT_PRESET_MAP,\n    dashboardApi,\n    initialExpanded = true,\n    mode = 'view',\n    toolbarItems = [],\n}: CollapsibleToolbarProps): React.ReactElement | null => {\n    const apiRegistry = useApiRegistry();\n    const [expanded, setExpanded] = useState(initialExpanded);\n    const handleExpandToggle = useCallback(\n        () => setExpanded((prevExpanded) => !prevExpanded),\n        []\n    );\n\n    const layoutType = useSelector(selectLayoutType);\n\n    const injectedToolbarItems = useMemo(\n        () =>\n            toolbarItems.map((item) =>\n                cloneElement(item, {\n                    mode,\n                    preset,\n                    layoutType,\n                    dashboardApi,\n                    borders: false,\n                })\n            ),\n        [toolbarItems, mode, preset, dashboardApi, layoutType]\n    );\n\n    const ExpandButtonIcon = useMemo(\n        () => (expanded ? expandedIcon : collapsedIcon),\n        [expanded]\n    );\n\n    useEffect(() => {\n        const toolbarApiRef = {\n            toggle: () => handleExpandToggle(),\n            expand: () => setExpanded(true),\n            collapse: () => setExpanded(false),\n        };\n\n        apiRegistry.registerToolbarApi(toolbarApiRef);\n\n        return () => {\n            apiRegistry.removeToolbarApi();\n        };\n    }, [apiRegistry, handleExpandToggle]);\n\n    return (\n        <ToolbarWrapper data-test=\"dashboard-toolbar\">\n            <StyledTransitionOpen animation=\"slideFromRight\" open={expanded}>\n                <ToolbarItemsWrapper data-test=\"toolbar-items\">\n                    {injectedToolbarItems}\n                </ToolbarItemsWrapper>\n            </StyledTransitionOpen>\n            <ExpandButton\n                data-test=\"expand-button\"\n                expanded={expanded}\n                onClick={handleExpandToggle}\n                icon={ExpandButtonIcon}\n                data-clickable\n            />\n        </ToolbarWrapper>\n    );\n};\n\nCollapsibleToolbar.displayName = 'CollapsibleToolbar';\n\nexport default CollapsibleToolbar;\n"],
+  "mappings": "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",
+  "names": ["defaultImport", "defaultImport"]
+}

package/module/chunks/chunk-4OLWQA6K.js

@@ -0,0 +1,83 @@
+/* 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. */
+import {
+  ItemSeparator_default
+} from "./chunk-NIACHGAA.js";
+import {
+  i18n_exports
+} from "./chunk-BSMCGXVQ.js";
+import {
+  dashboard_state_exports
+} from "./chunk-NJF2IOVV.js";
+import {
+  themes_exports
+} from "./chunk-IGGLU44N.js";
+import {
+  react_default,
+  react_exports
+} from "./chunk-NWVLNDCF.js";
+import {
+  styled_components_default,
+  styled_components_exports
+} from "./chunk-BRGYD3MR.js";
+import {
+  __export,
+  __reExport
+} from "./chunk-VQIRZ53C.js";
+
+// esm-externals:@splunk/react-ui/Switch
+var Switch_exports = {};
+__export(Switch_exports, {
+  default: () => Switch_default
+});
+__reExport(Switch_exports, Switch_star);
+import * as defaultImport from "@splunk/react-ui/Switch";
+import * as Switch_star from "@splunk/react-ui/Switch";
+var Switch_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+// src/buttons/GridLineSwitch.tsx
+var SwitchContainer = styled_components_default.div`
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: ${themes_exports.variables.spacingSmall};
+`;
+var GridLineSwitch = ({
+  dashboardApi,
+  mode,
+  showSeparator,
+  layoutType
+}) => {
+  var _a;
+  const showGrid = (_a = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectAreGridLinesEnabled)) != null ? _a : false;
+  const handleClick = (0, react_exports.useCallback)(() => {
+    dashboardApi == null ? void 0 : dashboardApi.toggleGridLines(!showGrid);
+  }, [dashboardApi, showGrid]);
+  const separator = (0, react_exports.useMemo)(
+    () => showSeparator ? /* @__PURE__ */ react_default.createElement(ItemSeparator_default, { key: "item-separator" }) : null,
+    [showSeparator]
+  );
+  if (!dashboardApi || mode !== "edit" || layoutType === "grid") {
+    return null;
+  }
+  return /* @__PURE__ */ react_default.createElement(SwitchContainer, { key: "grid-line-switch" }, /* @__PURE__ */ react_default.createElement(
+    Switch_default,
+    {
+      onClick: handleClick,
+      selected: showGrid,
+      selectedLabel: (0, i18n_exports._)("Gridlines displayed"),
+      unselectedLabel: (0, i18n_exports._)("Gridlines not displayed"),
+      appearance: "toggle",
+      "data-test": "gridline-toggle",
+      "data-clickable": true
+    },
+    (0, i18n_exports._)("Gridlines")
+  ), separator);
+};
+var GridLineSwitch_default = GridLineSwitch;
+
+export {
+  GridLineSwitch_default
+};
+//# sourceMappingURL=chunk-4OLWQA6K.js.map

package/module/chunks/chunk-4OLWQA6K.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["@splunk/react-ui/Switch", "../../src/buttons/GridLineSwitch.tsx"],
+  "sourcesContent": ["\nimport * as defaultImport from \"@splunk/react-ui/Switch\";\nexport * from \"@splunk/react-ui/Switch\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React, { useCallback, useMemo } from 'react';\nimport styled from 'styled-components';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport Switch from '@splunk/react-ui/Switch';\nimport {\n    selectAreGridLinesEnabled,\n    useSelector,\n} from '@splunk/dashboard-state';\nimport { variables } from '@splunk/themes';\nimport ItemSeparator from '../components/ItemSeparator';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst SwitchContainer = styled.div`\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    gap: ${variables.spacingSmall};\n`;\n\nexport interface GridLineSwitchProps extends ToolbarButtonProps {\n    showSeparator?: boolean;\n}\n\nconst GridLineSwitch = ({\n    dashboardApi,\n    mode,\n    showSeparator,\n    layoutType,\n}: GridLineSwitchProps) => {\n    const showGrid = useSelector(selectAreGridLinesEnabled) ?? false;\n\n    const handleClick = useCallback(() => {\n        dashboardApi?.toggleGridLines(!showGrid);\n    }, [dashboardApi, showGrid]);\n\n    const separator = useMemo(\n        () => (showSeparator ? <ItemSeparator key=\"item-separator\" /> : null),\n        [showSeparator]\n    );\n\n    if (!dashboardApi || mode !== 'edit' || layoutType === 'grid') {\n        return null;\n    }\n\n    return (\n        <SwitchContainer key=\"grid-line-switch\">\n            <Switch\n                onClick={handleClick}\n                selected={showGrid}\n                selectedLabel={_('Gridlines displayed')}\n                unselectedLabel={_('Gridlines not displayed')}\n                appearance=\"toggle\"\n                data-test=\"gridline-toggle\"\n                data-clickable\n            >\n                {_('Gridlines')}\n            </Switch>\n            {separator}\n        </SwitchContainer>\n    );\n};\n\nexport default GridLineSwitch;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAEA;AADA,YAAY,mBAAmB;AAC/B,6BAAc;AACd,IAAO,iBAAS,aAAa,gBAA8B,wBAAU;;;ACSrE,IAAM,kBAAkB,0BAAO;AAAA;AAAA;AAAA;AAAA,WAIpB,yBAAU,YAAY;AAAA;AAOjC,IAAM,iBAAiB,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAA2B;AA5B3B;AA6BI,QAAM,YAAW,8CAAY,iDAAyB,MAArC,YAA0C;AAE3D,QAAM,kBAAc,2BAAY,MAAM;AAClC,iDAAc,gBAAgB,CAAC;AAAA,EACnC,GAAG,CAAC,cAAc,QAAQ,CAAC;AAE3B,QAAM,gBAAY;AAAA,IACd,MAAO,gBAAgB,4CAAC,yBAAc,KAAI,kBAAiB,IAAK;AAAA,IAChE,CAAC,aAAa;AAAA,EAClB;AAEA,MAAI,CAAC,gBAAgB,SAAS,UAAU,eAAe,QAAQ;AAC3D,WAAO;AAAA,EACX;AAEA,SACI,4CAAC,mBAAgB,KAAI,sBACjB;AAAA,IAAC;AAAA;AAAA,MACG,SAAS;AAAA,MACT,UAAU;AAAA,MACV,mBAAe,gBAAE,qBAAqB;AAAA,MACtC,qBAAiB,gBAAE,yBAAyB;AAAA,MAC5C,YAAW;AAAA,MACX,aAAU;AAAA,MACV,kBAAc;AAAA;AAAA,QAEb,gBAAE,WAAW;AAAA,EAClB,GACC,SACL;AAER;AAEA,IAAO,yBAAQ;",
+  "names": []
+}

package/module/chunks/chunk-52TYQW2Y.js

@@ -0,0 +1,23 @@
+/* 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. */
+import {
+  __export,
+  __reExport
+} from "./chunk-VQIRZ53C.js";
+
+// esm-externals:@splunk/react-icons/Square
+var Square_exports = {};
+__export(Square_exports, {
+  default: () => Square_default
+});
+__reExport(Square_exports, Square_star);
+import * as defaultImport from "@splunk/react-icons/Square";
+import * as Square_star from "@splunk/react-icons/Square";
+var Square_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+export {
+  Square_default,
+  Square_exports
+};
+//# sourceMappingURL=chunk-52TYQW2Y.js.map

package/module/chunks/chunk-52TYQW2Y.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["@splunk/react-icons/Square"],
+  "sourcesContent": ["\nimport * as defaultImport from \"@splunk/react-icons/Square\";\nexport * from \"@splunk/react-icons/Square\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n"],
+  "mappings": ";;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAEA;AADA,YAAY,mBAAmB;AAC/B,6BAAc;AACd,IAAO,iBAAS,aAAa,gBAA8B,wBAAU;",
+  "names": []
+}

package/module/chunks/chunk-72YLBMXL.js

@@ -0,0 +1,199 @@
+/* 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. */
+import {
+  dashboard_ui_exports
+} from "./chunk-HIICL66H.js";
+import {
+  Menu_default,
+  Menu_exports
+} from "./chunk-X7ATHE2S.js";
+import {
+  StyledDropdownButton
+} from "./chunk-JLYV2H24.js";
+import {
+  Dropdown_default,
+  Dropdown_exports,
+  useDropdown_default
+} from "./chunk-RODBPKID.js";
+import {
+  dashboard_context_exports
+} from "./chunk-G6N5OMKL.js";
+import {
+  i18n_exports
+} from "./chunk-BSMCGXVQ.js";
+import {
+  prepareIcon
+} from "./chunk-GWAXQYWY.js";
+import {
+  Item_default
+} from "./chunk-E2DI77AU.js";
+import {
+  dashboard_state_exports
+} from "./chunk-NJF2IOVV.js";
+import {
+  themes_exports
+} from "./chunk-IGGLU44N.js";
+import {
+  react_default,
+  react_exports
+} from "./chunk-NWVLNDCF.js";
+import {
+  styled_components_default,
+  styled_components_exports
+} from "./chunk-BRGYD3MR.js";
+import {
+  __export,
+  __reExport
+} from "./chunk-VQIRZ53C.js";
+
+// esm-externals:@splunk/react-icons/ChartColumn
+var ChartColumn_exports = {};
+__export(ChartColumn_exports, {
+  default: () => ChartColumn_default
+});
+__reExport(ChartColumn_exports, ChartColumn_star);
+import * as defaultImport from "@splunk/react-icons/ChartColumn";
+import * as ChartColumn_star from "@splunk/react-icons/ChartColumn";
+var ChartColumn_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+// 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;
+
+export {
+  getVisualizationListFromTaxonomy,
+  Charts_default
+};
+//# sourceMappingURL=chunk-72YLBMXL.js.map

package/module/chunks/chunk-72YLBMXL.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["@splunk/react-icons/ChartColumn", "../../src/buttons/Charts.tsx"],
+  "sourcesContent": ["\nimport * as defaultImport from \"@splunk/react-icons/ChartColumn\";\nexport * from \"@splunk/react-icons/ChartColumn\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "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"],
+  "mappings": "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",
+  "names": []
+}

package/module/chunks/chunk-734QWOYU.js

@@ -0,0 +1,56 @@
+/* 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. */
+import {
+  Picture_default,
+  Picture_exports
+} from "./chunk-OSDOIGWB.js";
+import {
+  i18n_exports
+} from "./chunk-BSMCGXVQ.js";
+import {
+  IconButton_default,
+  prepareIcon
+} from "./chunk-GWAXQYWY.js";
+import {
+  react_default,
+  react_exports
+} from "./chunk-NWVLNDCF.js";
+import {
+  __async
+} from "./chunk-VQIRZ53C.js";
+
+// src/buttons/Image.tsx
+var icon = 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
+    }
+  );
+};
+var Image_default = Image;
+
+export {
+  Image_default
+};
+//# sourceMappingURL=chunk-734QWOYU.js.map

package/module/chunks/chunk-734QWOYU.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/buttons/Image.tsx"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\n\nimport { _ } from '@splunk/ui-utils/i18n';\nimport Picture from '@splunk/react-icons/Picture';\n\nimport IconButton, { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst icon = prepareIcon({\n    Icon: Picture,\n    screenReaderContent: _('Add image'),\n});\n\n/**\n * Button that create a empty image\n */\nconst Image = ({ dashboardApi }: ToolbarButtonProps) => {\n    const handleClick = useCallback(async () => {\n        dashboardApi?.createVisualization({\n            visualizationDefinition: {\n                type: 'splunk.image',\n                options: {\n                    preserveAspectRatio: true,\n                },\n            },\n        });\n\n        dashboardApi?.openPanel({\n            activePanel: 'config',\n        });\n    }, [dashboardApi]);\n\n    return (\n        <IconButton\n            testLabel=\"image-button\"\n            onClick={handleClick}\n            icon={icon}\n        />\n    );\n};\n\nexport default Image;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAM,OAAO,YAAY;AAAA,EACrB,MAAM;AAAA,EACN,yBAAqB,gBAAE,WAAW;AACtC,CAAC;AAKD,IAAM,QAAQ,CAAC,EAAE,aAAa,MAA0B;AACpD,QAAM,kBAAc,2BAAY,MAAY;AACxC,iDAAc,oBAAoB;AAAA,MAC9B,yBAAyB;AAAA,QACrB,MAAM;AAAA,QACN,SAAS;AAAA,UACL,qBAAqB;AAAA,QACzB;AAAA,MACJ;AAAA,IACJ;AAEA,iDAAc,UAAU;AAAA,MACpB,aAAa;AAAA,IACjB;AAAA,EACJ,IAAG,CAAC,YAAY,CAAC;AAEjB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAU;AAAA,MACV,SAAS;AAAA,MACT;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,gBAAQ;",
+  "names": []
+}