@splunk/dashboard-toolbar 29.0.0

package/buttons/ImageGallery.js

@@ -0,0 +1,300 @@
+/* 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);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/buttons/ImageGallery.tsx
+var ImageGallery_exports = {};
+__export(ImageGallery_exports, {
+  default: () => ImageGallery_default
+});
+module.exports = __toCommonJS(ImageGallery_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/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/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
+});
+var defaultImport4 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:@splunk/react-icons/Picture
+var Picture_exports = {};
+__export(Picture_exports, {
+  default: () => Picture_default
+});
+var defaultImport5 = __toESM(require("@splunk/react-icons/Picture"));
+__reExport(Picture_exports, require("@splunk/react-icons/Picture"));
+var Picture_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:@splunk/dashboard-ui
+var dashboard_ui_exports = {};
+__export(dashboard_ui_exports, {
+  default: () => dashboard_ui_default
+});
+var defaultImport6 = __toESM(require("@splunk/dashboard-ui"));
+__reExport(dashboard_ui_exports, require("@splunk/dashboard-ui"));
+var dashboard_ui_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;
+
+// src/components/StyledButton.tsx
+var StyledDropdownButton = styled_components_default(Button_default)`
+    max-width: '50px';
+`;
+
+// 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 defaultImport8 = __toESM(require("@splunk/react-icons/CaretDown"));
+__reExport(CaretDown_exports, require("@splunk/react-icons/CaretDown"));
+var CaretDown_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// esm-externals:@splunk/react-ui/ScreenReaderContent
+var ScreenReaderContent_exports = {};
+__export(ScreenReaderContent_exports, {
+  default: () => ScreenReaderContent_default
+});
+var defaultImport9 = __toESM(require("@splunk/react-ui/ScreenReaderContent"));
+__reExport(ScreenReaderContent_exports, require("@splunk/react-ui/ScreenReaderContent"));
+var ScreenReaderContent_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/buttons/ImageGallery.tsx
+var MenusContainer = styled_components_default.div`
+    display: flex;
+    padding: 5px;
+`;
+var imageGalleryDropdown = prepareIcon({
+  Icon: Picture_default,
+  screenReaderContent: (0, i18n_exports._)("Add image"),
+  isMenu: true
+});
+var ButtonToggle = /* @__PURE__ */ react_default.createElement(
+  StyledDropdownButton,
+  {
+    "data-test": "image-gallery-button",
+    "data-clickable": true,
+    appearance: "subtle",
+    icon: imageGalleryDropdown
+  }
+);
+var focusToggleReasons = [];
+var ImageGallery = ({ dashboardApi }) => {
+  const {
+    handleForceClose,
+    handleRequestClose,
+    handleRequestOpen,
+    setHasChildModal,
+    isOpen
+  } = useDropdown_default({
+    isContentClickClose: false
+  });
+  const handlePanelClick = (0, react_exports.useCallback)(
+    (imageUrl) => __async(void 0, null, function* () {
+      dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+        visualizationDefinition: {
+          type: "splunk.image",
+          options: {
+            preserveAspectRatio: true,
+            src: imageUrl
+          }
+        }
+      });
+      dashboardApi == null ? void 0 : dashboardApi.openPanel({
+        activePanel: "config"
+      });
+      handleForceClose();
+    }),
+    [dashboardApi, handleForceClose]
+  );
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle
+    },
+    /* @__PURE__ */ react_default.createElement(MenusContainer, null, /* @__PURE__ */ react_default.createElement(
+      dashboard_ui_exports.ImageGallery,
+      {
+        onClick: handlePanelClick,
+        setHasChildModal
+      }
+    ))
+  ));
+};
+var ImageGallery_default = ImageGallery;
+//# sourceMappingURL=ImageGallery.js.map

package/buttons/ImageGallery.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/buttons/ImageGallery.tsx", "react", "styled-components", "@splunk/react-ui/Dropdown", "@splunk/ui-utils/i18n", "@splunk/react-icons/Picture", "@splunk/dashboard-ui", "@splunk/react-ui/Button", "../src/components/StyledButton.tsx", "../src/Item.tsx", "../src/hooks/useDropdown.ts", "@splunk/react-icons/CaretDown", "@splunk/react-ui/ScreenReaderContent", "../src/IconButton.tsx"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport styled from 'styled-components';\n\nimport Dropdown from '@splunk/react-ui/Dropdown';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport AddImage from '@splunk/react-icons/Picture';\n\nimport { ImageGallery as ImageGalleryPanel } from '@splunk/dashboard-ui';\n\nimport { StyledDropdownButton } from '../components/StyledButton';\nimport ToolbarItem from '../Item';\nimport useDropdown from '../hooks/useDropdown';\nimport { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst MenusContainer = styled.div`\n    display: flex;\n    padding: 5px;\n`;\n\nconst imageGalleryDropdown = prepareIcon({\n    Icon: AddImage,\n    screenReaderContent: _('Add image'),\n    isMenu: true,\n});\n\nconst ButtonToggle = (\n    <StyledDropdownButton\n        data-test=\"image-gallery-button\"\n        data-clickable\n        appearance=\"subtle\"\n        icon={imageGalleryDropdown}\n    />\n);\n\nconst focusToggleReasons: never[] = [];\n\n/**\n * Image Gallery button that has as a dropdown menu.\n */\nconst ImageGallery = ({ dashboardApi }: ToolbarButtonProps) => {\n    const {\n        handleForceClose,\n        handleRequestClose,\n        handleRequestOpen,\n        setHasChildModal,\n        isOpen,\n    } = useDropdown({\n        isContentClickClose: false,\n    });\n\n    const handlePanelClick = useCallback(\n        async (imageUrl: string) => {\n            dashboardApi?.createVisualization({\n                visualizationDefinition: {\n                    type: 'splunk.image',\n                    options: {\n                        preserveAspectRatio: true,\n                        src: imageUrl,\n                    },\n                },\n            });\n            dashboardApi?.openPanel({\n                activePanel: 'config',\n            });\n            handleForceClose();\n        },\n        [dashboardApi, handleForceClose]\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                <MenusContainer>\n                    <ImageGalleryPanel\n                        onClick={handlePanelClick}\n                        setHasChildModal={setHasChildModal}\n                    />\n                </MenusContainer>\n            </Dropdown>\n        </ToolbarItem>\n    );\n};\n\nexport default ImageGallery;\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/react-ui/Dropdown\";\nexport * from \"@splunk/react-ui/Dropdown\";\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-icons/Picture\";\nexport * from \"@splunk/react-icons/Picture\";\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/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\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", "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", "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"],
+  "mappings": "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",
+  "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "ImageGalleryPanel"]
+}

package/buttons/Inputs.js

@@ -0,0 +1,348 @@
+/* Copyright © 2020 Splunk Inc.
+SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
+in part without a valid written license from Splunk Inc. is PROHIBITED. */
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/buttons/Inputs.tsx
+var Inputs_exports = {};
+__export(Inputs_exports, {
+  default: () => Inputs_default
+});
+module.exports = __toCommonJS(Inputs_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:lodash
+var lodash_exports = {};
+__export(lodash_exports, {
+  default: () => lodash_default
+});
+var defaultImport2 = __toESM(require("lodash"));
+__reExport(lodash_exports, require("lodash"));
+var lodash_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/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/react-icons/SlidersTripleHorizontal
+var SlidersTripleHorizontal_exports = {};
+__export(SlidersTripleHorizontal_exports, {
+  default: () => SlidersTripleHorizontal_default
+});
+var defaultImport6 = __toESM(require("@splunk/react-icons/SlidersTripleHorizontal"));
+__reExport(SlidersTripleHorizontal_exports, require("@splunk/react-icons/SlidersTripleHorizontal"));
+var SlidersTripleHorizontal_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// esm-externals:@splunk/dashboard-definition
+var dashboard_definition_exports = {};
+__export(dashboard_definition_exports, {
+  default: () => dashboard_definition_default
+});
+var defaultImport7 = __toESM(require("@splunk/dashboard-definition"));
+__reExport(dashboard_definition_exports, require("@splunk/dashboard-definition"));
+var dashboard_definition_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// esm-externals:@splunk/react-ui/Button
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+var defaultImport8 = __toESM(require("@splunk/react-ui/Button"));
+__reExport(Button_exports, require("@splunk/react-ui/Button"));
+var Button_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// esm-externals:styled-components
+var styled_components_exports = {};
+__export(styled_components_exports, {
+  default: () => styled_components_default
+});
+var defaultImport9 = __toESM(require("styled-components"));
+__reExport(styled_components_exports, require("styled-components"));
+var styled_components_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// src/components/StyledButton.tsx
+var StyledDropdownButton = styled_components_default(Button_default)`
+    max-width: '50px';
+`;
+
+// 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;
+
+// src/Item.tsx
+var Item_default = styled_components_default.div``;
+
+// esm-externals:@splunk/react-icons/CaretDown
+var CaretDown_exports = {};
+__export(CaretDown_exports, {
+  default: () => CaretDown_default
+});
+var defaultImport10 = __toESM(require("@splunk/react-icons/CaretDown"));
+__reExport(CaretDown_exports, require("@splunk/react-icons/CaretDown"));
+var CaretDown_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+
+// esm-externals:@splunk/react-ui/ScreenReaderContent
+var ScreenReaderContent_exports = {};
+__export(ScreenReaderContent_exports, {
+  default: () => ScreenReaderContent_default
+});
+var defaultImport11 = __toESM(require("@splunk/react-ui/ScreenReaderContent"));
+__reExport(ScreenReaderContent_exports, require("@splunk/react-ui/ScreenReaderContent"));
+var ScreenReaderContent_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+
+// 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/buttons/Inputs.tsx
+var focusToggleReasons = [];
+var DEFAULT_PRESET_MAP = Object.freeze({});
+var addInputIcon = prepareIcon({
+  Icon: SlidersTripleHorizontal_default,
+  screenReaderContent: (0, i18n_exports._)("Add input"),
+  isMenu: true
+});
+var ButtonToggle = /* @__PURE__ */ react_default.createElement(
+  StyledDropdownButton,
+  {
+    appearance: "subtle",
+    "data-clickable": true,
+    "data-test": "inputs-button",
+    icon: addInputIcon
+  }
+);
+var onCreateInputClickFactory = ({
+  type,
+  defaultConfig,
+  tokenPrefix,
+  showToken,
+  dashboardApi
+}) => () => {
+  if (!dashboardApi) {
+    return;
+  }
+  const newConfig = __spreadProps(__spreadValues({}, defaultConfig), {
+    type,
+    options: __spreadValues({}, defaultConfig.options)
+  });
+  if (showToken) {
+    newConfig.options.token = dashboard_definition_exports.DashboardDefinition.fromJSON(
+      dashboardApi == null ? void 0 : dashboardApi.getDefinition()
+    ).nextTokenId(tokenPrefix);
+  }
+  dashboardApi.addInput(newConfig);
+  dashboardApi.openPanel({ activePanel: "config" });
+};
+var Inputs = ({
+  dashboardApi,
+  preset = DEFAULT_PRESET_MAP
+}) => {
+  const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
+    isContentClickClose: true
+  });
+  const InputTypeButtons = (0, react_exports.useMemo)(() => {
+    const buttons = [];
+    const inputs = preset == null ? void 0 : preset.inputs;
+    (0, lodash_exports.each)(inputs, (InputImpl, type) => {
+      const {
+        baseShape = {},
+        label = (0, i18n_exports._)(`${type} Input`),
+        description = "",
+        tokenPrefix = "token",
+        includeInToolbar = true,
+        icon: Icon = SlidersTripleHorizontal_default,
+        // showToken flags whether or not the input has a token assigned on creation
+        showToken = true
+      } = InputImpl.config || {};
+      if (!includeInToolbar) {
+        return;
+      }
+      const handleClick = onCreateInputClickFactory({
+        type,
+        defaultConfig: baseShape,
+        tokenPrefix,
+        showToken,
+        dashboardApi
+      });
+      const inputIcon = /* @__PURE__ */ react_default.createElement(Icon, { width: "24px", height: "24px" });
+      buttons.push(
+        /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            "data-test": `add-${type}-button`,
+            "data-test-clickable": true,
+            onClick: handleClick,
+            startAdornment: inputIcon,
+            description,
+            key: `add-${type}-button`
+          },
+          label
+        )
+      );
+    });
+    if (buttons.length === 0) {
+      buttons.push(
+        /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            "data-test": "no-inputs-in-preset",
+            key: "no-inputs-in-preset",
+            disabled: true
+          },
+          (0, i18n_exports._)("No Inputs")
+        )
+      );
+    }
+    return buttons;
+  }, [preset, dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle
+    },
+    /* @__PURE__ */ react_default.createElement(Menu_default, null, InputTypeButtons)
+  ));
+};
+var Inputs_default = Inputs;
+//# sourceMappingURL=Inputs.js.map