@splunk/dashboard-toolbar 29.0.0

package/buttons/GridLineSwitch.js

@@ -0,0 +1,145 @@
+/* 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 __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/GridLineSwitch.tsx
+var GridLineSwitch_exports = {};
+__export(GridLineSwitch_exports, {
+  default: () => GridLineSwitch_default
+});
+module.exports = __toCommonJS(GridLineSwitch_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/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
+});
+var defaultImport3 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:@splunk/react-ui/Switch
+var Switch_exports = {};
+__export(Switch_exports, {
+  default: () => Switch_default
+});
+var defaultImport4 = __toESM(require("@splunk/react-ui/Switch"));
+__reExport(Switch_exports, require("@splunk/react-ui/Switch"));
+var Switch_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:@splunk/dashboard-state
+var dashboard_state_exports = {};
+__export(dashboard_state_exports, {
+  default: () => dashboard_state_default
+});
+var defaultImport5 = __toESM(require("@splunk/dashboard-state"));
+__reExport(dashboard_state_exports, require("@splunk/dashboard-state"));
+var dashboard_state_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;
+
+// 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/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;
+//# sourceMappingURL=GridLineSwitch.js.map

package/buttons/GridLineSwitch.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/buttons/GridLineSwitch.tsx", "react", "styled-components", "@splunk/ui-utils/i18n", "@splunk/react-ui/Switch", "@splunk/dashboard-state", "@splunk/themes", "../src/components/ItemSeparator.tsx"],
+  "sourcesContent": ["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", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\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/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Switch\";\nexport * from \"@splunk/react-ui/Switch\";\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", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\nimport { variables } from '@splunk/themes';\n\nconst ItemSeparator = styled.div`\n    border-left-width: 1px;\n    border-left-style: solid;\n    border-left-color: ${variables.interactiveColorBorder};\n    width: 0px;\n    height: ${variables.inputHeight};\n`;\n\nexport default ItemSeparator;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AACA,oBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAa,gBAA8B,wBAAU;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAA,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,yBAAc;AACd,IAAO,eAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,oCAAc;AACd,IAAO,0BAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACArE,IAAM,gBAAgB,0BAAO;AAAA;AAAA;AAAA,yBAGJ,yBAAU,sBAAsB;AAAA;AAAA,cAE3C,yBAAU,WAAW;AAAA;AAGnC,IAAO,wBAAQ;;;APCf,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": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
+}

package/buttons/HelpButton.js

@@ -0,0 +1,277 @@
+/* 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/HelpButton.tsx
+var HelpButton_exports = {};
+__export(HelpButton_exports, {
+  default: () => HelpButton_default
+});
+module.exports = __toCommonJS(HelpButton_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/react-icons/QuestionCircle
+var QuestionCircle_exports = {};
+__export(QuestionCircle_exports, {
+  default: () => QuestionCircle_default
+});
+var defaultImport2 = __toESM(require("@splunk/react-icons/QuestionCircle"));
+__reExport(QuestionCircle_exports, require("@splunk/react-icons/QuestionCircle"));
+var QuestionCircle_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:@splunk/react-ui/Dropdown
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  default: () => Dropdown_default
+});
+var defaultImport3 = __toESM(require("@splunk/react-ui/Dropdown"));
+__reExport(Dropdown_exports, require("@splunk/react-ui/Dropdown"));
+var Dropdown_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:@splunk/react-ui/Menu
+var Menu_exports = {};
+__export(Menu_exports, {
+  default: () => Menu_default
+});
+var defaultImport4 = __toESM(require("@splunk/react-ui/Menu"));
+__reExport(Menu_exports, require("@splunk/react-ui/Menu"));
+var Menu_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// 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:styled-components
+var styled_components_exports = {};
+__export(styled_components_exports, {
+  default: () => styled_components_default
+});
+var defaultImport6 = __toESM(require("styled-components"));
+__reExport(styled_components_exports, require("styled-components"));
+var styled_components_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// 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 defaultImport7 = __toESM(require("@splunk/react-icons/CaretDown"));
+__reExport(CaretDown_exports, require("@splunk/react-icons/CaretDown"));
+var CaretDown_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// esm-externals:@splunk/react-ui/ScreenReaderContent
+var ScreenReaderContent_exports = {};
+__export(ScreenReaderContent_exports, {
+  default: () => ScreenReaderContent_default
+});
+var defaultImport8 = __toESM(require("@splunk/react-ui/ScreenReaderContent"));
+__reExport(ScreenReaderContent_exports, require("@splunk/react-ui/ScreenReaderContent"));
+var ScreenReaderContent_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// esm-externals:@splunk/react-ui/Button
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+var defaultImport9 = __toESM(require("@splunk/react-ui/Button"));
+__reExport(Button_exports, require("@splunk/react-ui/Button"));
+var Button_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// 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/HelpButton.tsx
+var focusToggleReasons = [];
+var HelpIcon = prepareIcon({
+  Icon: QuestionCircle_default,
+  screenReaderContent: (0, i18n_exports._)("Help links"),
+  isMenu: true
+});
+var ButtonToggle = /* @__PURE__ */ react_default.createElement(
+  StyledDropdownButton,
+  {
+    appearance: "subtle",
+    "data-clickable": true,
+    "data-test": "help-button",
+    icon: HelpIcon
+  }
+);
+var HelpButton = ({ helpLinks = [] }) => {
+  const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
+    isContentClickClose: true
+  });
+  const HelpLinks = (0, react_exports.useMemo)(() => {
+    if (helpLinks.length === 0) {
+      return [
+        /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            "data-test": "no-links-provided",
+            key: "no-links-provided",
+            disabled: true
+          },
+          (0, i18n_exports._)("No Links")
+        )
+      ];
+    }
+    return helpLinks.map((link) => {
+      const { label = "", description = "", url } = link;
+      const key = label.replace(/\s/g, "");
+      return /* @__PURE__ */ react_default.createElement(
+        Menu_default.Item,
+        {
+          "data-test": "help-link",
+          "data-test-clickable": true,
+          to: url,
+          description,
+          key: `help-link-${key}`,
+          openInNewContext: true
+        },
+        label
+      );
+    });
+  }, [helpLinks]);
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle
+    },
+    /* @__PURE__ */ react_default.createElement(Menu_default, null, HelpLinks)
+  ));
+};
+var HelpButton_default = HelpButton;
+//# sourceMappingURL=HelpButton.js.map

package/buttons/HelpButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/buttons/HelpButton.tsx", "react", "@splunk/react-icons/QuestionCircle", "@splunk/react-ui/Dropdown", "@splunk/react-ui/Menu", "@splunk/ui-utils/i18n", "styled-components", "../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, { useMemo } from 'react';\nimport Help from '@splunk/react-icons/QuestionCircle';\nimport Dropdown from '@splunk/react-ui/Dropdown';\nimport Menu from '@splunk/react-ui/Menu';\nimport { _ } from '@splunk/ui-utils/i18n';\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\nexport interface ToolbarHelpLink {\n    label: string;\n    description?: string;\n    url: string;\n}\n\ninterface HelpProps extends ToolbarButtonProps {\n    helpLinks?: ToolbarHelpLink[];\n}\n\nconst focusToggleReasons: never[] = [];\n\nconst HelpIcon = prepareIcon({\n    Icon: Help,\n    screenReaderContent: _('Help links'),\n    isMenu: true,\n});\n\nconst ButtonToggle = (\n    <StyledDropdownButton\n        appearance=\"subtle\"\n        data-clickable\n        data-test=\"help-button\"\n        icon={HelpIcon}\n    />\n);\n\n/**\n * Help button which expands dropdown full of links\n */\nconst HelpButton = ({ helpLinks = [] }: HelpProps) => {\n    const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown({\n        isContentClickClose: true,\n    });\n\n    const HelpLinks = useMemo(() => {\n        if (helpLinks.length === 0) {\n            return [\n                <Menu.Item\n                    data-test=\"no-links-provided\"\n                    key=\"no-links-provided\"\n                    disabled\n                >\n                    {_('No Links')}\n                </Menu.Item>,\n            ];\n        }\n\n        return helpLinks.map((link: ToolbarHelpLink) => {\n            const { label = '', description = '', url } = link;\n            const key = label.replace(/\\s/g, '');\n\n            return (\n                <Menu.Item\n                    data-test=\"help-link\"\n                    data-test-clickable\n                    to={url}\n                    description={description}\n                    key={`help-link-${key}`}\n                    openInNewContext\n                >\n                    {label}\n                </Menu.Item>\n            );\n        });\n    }, [helpLinks]);\n\n    return (\n        <ToolbarItem>\n            <Dropdown\n                focusToggleReasons={focusToggleReasons}\n                onRequestClose={handleRequestClose}\n                onRequestOpen={handleRequestOpen}\n                open={isOpen}\n                toggle={ButtonToggle}\n            >\n                <Menu>{HelpLinks}</Menu>\n            </Dropdown>\n        </ToolbarItem>\n    );\n};\n\nexport default HelpButton;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/QuestionCircle\";\nexport * from \"@splunk/react-icons/QuestionCircle\";\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/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", "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"]
+}