@splunk/dashboard-toolbar 29.3.4 → 29.5.0

package/.storybook/index.ts

@@ -0,0 +1,2 @@
+export { withDashboardContext } from './withDashboardContext';
+export { withDashboardApiContext } from './withDashboardApiContext';

package/.storybook/withDashboardApiContext.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Decorator } from '@udf/storybook-helpers';
+import { DashboardApiProvider } from '@splunk/dashboard-context';
+import type { DashboardApi } from '@splunk/dashboard-types';
+
+/**
+ * Decorator that wraps stories with DashboardApiProvider.
+ * Reads parameters from parameters.dashboardApiContext
+ */
+export const withDashboardApiContext: Decorator = (Story, { parameters }) => {
+    return (
+        <DashboardApiProvider
+            value={parameters?.dashboardApiContext?.api as DashboardApi}
+        >
+            <Story />
+        </DashboardApiProvider>
+    );
+};

package/.storybook/withDashboardContext.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { Decorator } from '@udf/storybook-helpers';
+import { DashboardContextProvider } from '@splunk/dashboard-context';
+import type { PresetMap } from '@splunk/dashboard-types';
+
+/**
+ * Decorator that wraps stories with DashboardContextProvider.
+ * Used for components that need basic dashboard context without the full API.
+ *
+ * @param Story - The story component to wrap
+ * @param parameters.dashboardContext.preset - Optional custom preset (defaults to empty preset)
+ * @param parameters.dashboardContext.initialDefinition - Optional initial definition (defaults to empty object)
+ * @param parameters.dashboardContext.initialSelectedItems - Optional initial selected items (defaults to empty array)
+ */
+export const withDashboardContext: Decorator = (Story, { parameters }) => {
+    const preset =
+        parameters?.dashboardContext?.preset ?? ({} as unknown as PresetMap);
+    const initialDefinition =
+        parameters?.dashboardContext?.initialDefinition ?? {};
+    const initialSelectedItems =
+        parameters?.dashboardContext?.initialSelectedItems ?? [];
+    const initialMode = parameters?.dashboardContext?.initialMode ?? 'view';
+
+    return (
+        <DashboardContextProvider
+            preset={preset}
+            initialDefinition={initialDefinition}
+            initialSelectedItems={initialSelectedItems}
+            initialMode={initialMode}
+        >
+            <Story />
+        </DashboardContextProvider>
+    );
+};

package/CollapsibleToolbar.js

@@ -63,7 +63,7 @@ __export(styled_components_exports, {
 });
 var defaultImport3 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+var styled_components_default = defaultImport3.default;
 
 // esm-externals:@splunk/react-ui/Button
 var Button_exports = {};
@@ -173,6 +173,9 @@ 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};
+    // this has to be done to avoid a random scrollbar showing up during the animation
+    ${({ $isAnimating }) => $isAnimating && "overflow: hidden;"}
+    max-width: fit-content;
 `;
 var ToolbarItemsWrapper = styled_components_default.div`
     display: flex;
@@ -207,10 +210,14 @@ var CollapsibleToolbar = ({
 }) => {
   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 [isAnimating, setIsAnimating] = (0, react_exports.useState)(true);
+  const handleExpandToggle = (0, react_exports.useCallback)(() => {
+    setIsAnimating(true);
+    setExpanded((prevExpanded) => !prevExpanded);
+  }, []);
+  const handleAnimationEnd = (0, react_exports.useCallback)(() => {
+    setIsAnimating(false);
+  }, []);
   const layoutType = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectLayoutType);
   const injectedToolbarItems = (0, react_exports.useMemo)(
     () => toolbarItems.map(
@@ -239,7 +246,16 @@ var CollapsibleToolbar = ({
       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(
+  return /* @__PURE__ */ react_default.createElement(ToolbarWrapper, { "data-test": "dashboard-toolbar" }, /* @__PURE__ */ react_default.createElement(
+    StyledTransitionOpen,
+    {
+      animation: "slideFromRight",
+      open: expanded,
+      onAnimationEnd: handleAnimationEnd,
+      $isAnimating: isAnimating
+    },
+    /* @__PURE__ */ react_default.createElement(ToolbarItemsWrapper, { "data-test": "toolbar-items" }, injectedToolbarItems)
+  ), /* @__PURE__ */ react_default.createElement(
     ExpandButton,
     {
       appearance: "subtle",

package/CollapsibleToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/CollapsibleToolbar.tsx", "esm-externals:react", "esm-externals:@splunk/dashboard-context", "esm-externals:styled-components", "esm-externals:@splunk/react-ui/Button", "esm-externals:@splunk/react-ui/TransitionOpen", "esm-externals:@splunk/themes", "esm-externals:@splunk/react-icons/ChevronRight", "esm-externals:@splunk/react-icons/ChevronLeft", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/dashboard-state", "esm-externals:@splunk/react-ui/ScreenReaderContent", "esm-externals:@splunk/react-icons/CaretDown", "src/Item.tsx", "src/IconButton.tsx"],
-  "sourcesContent": ["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        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        border-radius: ${(props) => (props.expanded ? '' : '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                appearance=\"subtle\"\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", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-context\";\nexport * from \"@splunk/dashboard-context\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\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", "\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/themes\";\nexport * from \"@splunk/themes\";\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", "\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/dashboard-state\";\nexport * from \"@splunk/dashboard-state\";\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-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\n\nexport default styled.div``;\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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",
+  "sourcesContent": ["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)<{ $isAnimating: boolean }>`\n    border-right: ${({ open }) => (open ? 'solid' : 'none')};\n    border-width: 0 1px 0 0;\n    border-color: ${variables.interactiveColorBorder};\n    // this has to be done to avoid a random scrollbar showing up during the animation\n    ${({ $isAnimating }) => $isAnimating && 'overflow: hidden;'}\n    max-width: fit-content;\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        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        border-radius: ${(props) => (props.expanded ? '' : '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 [isAnimating, setIsAnimating] = useState(true);\n    const handleExpandToggle = useCallback(() => {\n        setIsAnimating(true);\n        setExpanded((prevExpanded) => !prevExpanded);\n    }, []);\n\n    const handleAnimationEnd = useCallback(() => {\n        setIsAnimating(false);\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\n                animation=\"slideFromRight\"\n                open={expanded}\n                onAnimationEnd={handleAnimationEnd}\n                $isAnimating={isAnimating}\n            >\n                <ToolbarItemsWrapper data-test=\"toolbar-items\">\n                    {injectedToolbarItems}\n                </ToolbarItemsWrapper>\n            </StyledTransitionOpen>\n            <ExpandButton\n                appearance=\"subtle\"\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", "import * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/dashboard-context\";\nexport * from \"@splunk/dashboard-context\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default defaultImport.default;\n", "import * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-ui/TransitionOpen\";\nexport * from \"@splunk/react-ui/TransitionOpen\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-icons/ChevronRight\";\nexport * from \"@splunk/react-icons/ChevronRight\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-icons/ChevronLeft\";\nexport * from \"@splunk/react-icons/ChevronLeft\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/dashboard-state\";\nexport * from \"@splunk/dashboard-state\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\n\nexport default styled.div``;\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", "defaultImport", "defaultImport", "defaultImport"]
 }

package/IconButton.js

@@ -110,7 +110,7 @@ __export(styled_components_exports, {
 });
 var defaultImport5 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+var styled_components_default = defaultImport5.default;
 
 // src/Item.tsx
 var Item_default = styled_components_default.div``;

package/IconButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/IconButton.tsx", "esm-externals:react", "esm-externals:@splunk/react-icons/CaretDown", "esm-externals:@splunk/react-ui/ScreenReaderContent", "esm-externals:@splunk/react-ui/Button", "esm-externals:styled-components", "src/Item.tsx"],
-  "sourcesContent": ["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", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\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", "\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"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;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,8BAAc;AACd,IAAO,oBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,wCAAc;AACd,IAAO,8BAAS,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,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACDrE,IAAO,eAAQ,0BAAO;;;ANOtB,IAAM,qBAAqB,0BAAO,iBAAY;AAAA;AAAA;AAIvC,IAAM,WAAW;AACjB,IAAM,eAAe;AAoBrB,IAAM,cAAc,CAAC,OAKJ;AALI,eACxB;AAAA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EArCb,IAkC4B,IAIrB,kBAJqB,IAIrB;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,OAAO,SAAS,eAAe;AACrC,SACI,0EACI,4CAAC,uBAAK,OAAO,MAAM,QAAQ,QAAU,MAAO,GAC3C,UACG,4CAAC,sBAAmB,SAAQ,UAAS,OAAO,GAAG,QAAQ,MAAM,GAEhE,uBACG,4CAAC,mCAAqB,mBAAoB,CAElD;AAER;AAWA,IAAM,aAAa,CAAC,OAQgB;AARhB,eAChB;AAAA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,EArEJ,IA+DoB,IAOb,iBAPa,IAOb;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACI,4CAAC,iCAAgB,OACb;AAAA,IAAC;AAAA;AAAA,MACG,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,YAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX,kBAAc;AAAA;AAAA,EAClB,CACJ;AAER;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["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 * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default defaultImport.default;\n", "import styled from 'styled-components';\n\nexport default styled.div``;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AAAA,oBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAa,gBAA8B,wBAAU;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAA,iBAA+B;AAC/B,8BAAc;AACd,IAAO,oBAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,wCAAc;AACd,IAAO,8BAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAsB;;;ACA7B,IAAO,eAAQ,0BAAO;;;ANOtB,IAAM,qBAAqB,0BAAO,iBAAY;AAAA;AAAA;AAIvC,IAAM,WAAW;AACjB,IAAM,eAAe;AAoBrB,IAAM,cAAc,CAAC,OAKJ;AALI,eACxB;AAAA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EArCb,IAkC4B,IAIrB,kBAJqB,IAIrB;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,OAAO,SAAS,eAAe;AACrC,SACI,0EACI,4CAAC,uBAAK,OAAO,MAAM,QAAQ,QAAU,MAAO,GAC3C,UACG,4CAAC,sBAAmB,SAAQ,UAAS,OAAO,GAAG,QAAQ,MAAM,GAEhE,uBACG,4CAAC,mCAAqB,mBAAoB,CAElD;AAER;AAWA,IAAM,aAAa,CAAC,OAQgB;AARhB,eAChB;AAAA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,EArEJ,IA+DoB,IAOb,iBAPa,IAOb;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACI,4CAAC,iCAAgB,OACb;AAAA,IAAC;AAAA;AAAA,MACG,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,YAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX,kBAAc;AAAA;AAAA,EAClB,CACJ;AAER;AAEA,IAAO,qBAAQ;",
   "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport"]
 }

package/Item.js

@@ -45,7 +45,7 @@ __export(styled_components_exports, {
 });
 var defaultImport = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+var styled_components_default = defaultImport.default;
 
 // src/Item.tsx
 var Item_default = styled_components_default.div``;

package/Item.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/Item.tsx", "esm-externals:styled-components"],
-  "sourcesContent": ["import styled from 'styled-components';\n\nexport default styled.div``;\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AACA,oBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAa,gBAA8B,wBAAU;;;ADDrE,IAAO,eAAQ,0BAAO;",
+  "sourcesContent": ["import styled from 'styled-components';\n\nexport default styled.div``;\n", "import * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default defaultImport.default;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AAAA,oBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAsB;;;ADA7B,IAAO,eAAQ,0BAAO;",
   "names": []
 }

package/ItemGroup.js

@@ -68,7 +68,7 @@ __export(styled_components_exports, {
 });
 var defaultImport2 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+var styled_components_default = defaultImport2.default;
 
 // esm-externals:@splunk/dashboard-utils
 var dashboard_utils_exports = {};

package/ItemGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/ItemGroup.tsx", "esm-externals:react", "esm-externals:styled-components", "esm-externals:@splunk/dashboard-utils", "esm-externals:@splunk/themes", "src/components/ItemSeparator.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport type { ButtonClickHandler } from '@splunk/react-ui/Button';\nimport { toPx } from '@splunk/dashboard-utils';\nimport type { ToolbarButtonProps } from './types/common';\nimport ItemSeparator from './components/ItemSeparator';\n\nconst Group = styled.div.attrs({\n    'data-test': 'toolbar-item-group',\n})<{ gap: string }>`\n    display: flex;\n    flex-direction: row;\n    gap: ${(props) => props.gap};\n`;\n\nexport type ItemGroupProps = {\n    borders?: boolean;\n    children?: React.ReactNode;\n    align?: 'left' | 'right';\n    sourceButtonOnClick?: ButtonClickHandler;\n    gap?: number | string;\n    [key: string]: unknown;\n} & ToolbarButtonProps;\n\nconst ItemGroup = ({\n    children,\n    borders = true,\n    gap,\n    ...rest\n}: ItemGroupProps) => {\n    const items = React.Children.map(\n        children,\n        (child) => child && React.cloneElement(child as JSX.Element, rest)\n    );\n    const separator = borders ? <ItemSeparator /> : null;\n    return (\n        <>\n            <Group gap={toPx(gap, 2)}>{items}</Group>\n            {separator}\n        </>\n    );\n};\n\nexport default ItemGroup;\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/dashboard-utils\";\nexport * from \"@splunk/dashboard-utils\";\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,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;;;ALJf,IAAM,QAAQ,0BAAO,IAAI,MAAM;AAAA,EAC3B,aAAa;AACjB,CAAC;AAAA;AAAA;AAAA,WAGU,CAAC,UAAU,MAAM,GAAG;AAAA;AAY/B,IAAM,YAAY,CAAC,OAKG;AALH,eACf;AAAA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EA3BJ,IAwBmB,IAIZ,iBAJY,IAIZ;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,QAAQ,cAAM,SAAS;AAAA,IACzB;AAAA,IACA,CAAC,UAAU,SAAS,cAAM,aAAa,OAAsB,IAAI;AAAA,EACrE;AACA,QAAM,YAAY,UAAU,4CAAC,2BAAc,IAAK;AAChD,SACI,0EACI,4CAAC,SAAM,SAAK,8BAAK,KAAK,CAAC,KAAI,KAAM,GAChC,SACL;AAER;AAEA,IAAO,oBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport type { ButtonClickHandler } from '@splunk/react-ui/Button';\nimport { toPx } from '@splunk/dashboard-utils';\nimport type { ToolbarButtonProps } from './types/common';\nimport ItemSeparator from './components/ItemSeparator';\n\nconst Group = styled.div.attrs({\n    'data-test': 'toolbar-item-group',\n})<{ gap: string }>`\n    display: flex;\n    flex-direction: row;\n    gap: ${(props) => props.gap};\n`;\n\nexport type ItemGroupProps = {\n    borders?: boolean;\n    children?: React.ReactNode;\n    align?: 'left' | 'right';\n    sourceButtonOnClick?: ButtonClickHandler;\n    gap?: number | string;\n    [key: string]: unknown;\n} & ToolbarButtonProps;\n\nconst ItemGroup = ({\n    children,\n    borders = true,\n    gap,\n    ...rest\n}: ItemGroupProps) => {\n    const items = React.Children.map(\n        children,\n        (child) => child && React.cloneElement(child as JSX.Element, rest)\n    );\n    const separator = borders ? <ItemSeparator /> : null;\n    return (\n        <>\n            <Group gap={toPx(gap, 2)}>{items}</Group>\n            {separator}\n        </>\n    );\n};\n\nexport default ItemGroup;\n", "import * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default defaultImport.default;\n", "import * as defaultImport from \"@splunk/dashboard-utils\";\nexport * from \"@splunk/dashboard-utils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * 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;AAAA,oBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAa,gBAA8B,wBAAU;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAA,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAsB;;;ACF7B;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,oCAAc;AACd,IAAO,0BAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACCrE,IAAM,gBAAgB,0BAAO;AAAA;AAAA;AAAA,yBAGJ,yBAAU,sBAAsB;AAAA;AAAA,cAE3C,yBAAU,WAAW;AAAA;AAGnC,IAAO,wBAAQ;;;ALJf,IAAM,QAAQ,0BAAO,IAAI,MAAM;AAAA,EAC3B,aAAa;AACjB,CAAC;AAAA;AAAA;AAAA,WAGU,CAAC,UAAU,MAAM,GAAG;AAAA;AAY/B,IAAM,YAAY,CAAC,OAKG;AALH,eACf;AAAA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EA3BJ,IAwBmB,IAIZ,iBAJY,IAIZ;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,QAAQ,cAAM,SAAS;AAAA,IACzB;AAAA,IACA,CAAC,UAAU,SAAS,cAAM,aAAa,OAAsB,IAAI;AAAA,EACrE;AACA,QAAM,YAAY,UAAU,4CAAC,2BAAc,IAAK;AAChD,SACI,0EACI,4CAAC,SAAM,SAAK,8BAAK,KAAK,CAAC,KAAI,KAAM,GAChC,SACL;AAER;AAEA,IAAO,oBAAQ;",
   "names": ["defaultImport", "defaultImport", "defaultImport"]
 }

package/PopoverItemButton.js

@@ -54,7 +54,7 @@ __export(styled_components_exports, {
 });
 var defaultImport2 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+var styled_components_default = defaultImport2.default;
 
 // src/PopoverItemButton.tsx
 var StyledContentWrapper = styled_components_default.span`

package/PopoverItemButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/PopoverItemButton.tsx", "esm-externals:react", "esm-externals:styled-components"],
-  "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledContentWrapper = styled.span`\n    display: flex;\n    flex-direction: row;\n    justify-content: left;\n    align-items: center;\n    max-width: 100%;\n`;\n\nconst StyledIcon = styled.span`\n    display: inline-block;\n    padding-right: 8px;\n`;\n\nconst StyledLabel = styled.span`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    flex: 0 1 auto;\n`;\n\nexport interface PopoverItemButtonProps extends ToolbarButtonProps {\n    icon: JSX.Element;\n    label?: string;\n}\n\n/**\n * Custom button component for popovers created for specific styling - aligning text to the left\n */\nconst PopoverItemButton = ({ icon, label }: PopoverItemButtonProps) => (\n    <StyledContentWrapper>\n        {icon && <StyledIcon>{icon}</StyledIcon>}\n        {label && <StyledLabel data-test=\"label-title\">{label}</StyledLabel>}\n    </StyledContentWrapper>\n);\n\nexport default PopoverItemButton;\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"],
-  "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;;;AFCrE,IAAM,uBAAuB,0BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpC,IAAM,aAAa,0BAAO;AAAA;AAAA;AAAA;AAK1B,IAAM,cAAc,0BAAO;AAAA;AAAA;AAAA;AAAA;AAc3B,IAAM,oBAAoB,CAAC,EAAE,MAAM,MAAM,MACrC,4CAAC,4BACI,QAAQ,4CAAC,kBAAY,IAAK,GAC1B,SAAS,4CAAC,eAAY,aAAU,iBAAe,KAAM,CAC1D;AAGJ,IAAO,4BAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledContentWrapper = styled.span`\n    display: flex;\n    flex-direction: row;\n    justify-content: left;\n    align-items: center;\n    max-width: 100%;\n`;\n\nconst StyledIcon = styled.span`\n    display: inline-block;\n    padding-right: 8px;\n`;\n\nconst StyledLabel = styled.span`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    flex: 0 1 auto;\n`;\n\nexport interface PopoverItemButtonProps extends ToolbarButtonProps {\n    icon: JSX.Element;\n    label?: string;\n}\n\n/**\n * Custom button component for popovers created for specific styling - aligning text to the left\n */\nconst PopoverItemButton = ({ icon, label }: PopoverItemButtonProps) => (\n    <StyledContentWrapper>\n        {icon && <StyledIcon>{icon}</StyledIcon>}\n        {label && <StyledLabel data-test=\"label-title\">{label}</StyledLabel>}\n    </StyledContentWrapper>\n);\n\nexport default PopoverItemButton;\n", "import * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default defaultImport.default;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AAAA,oBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAa,gBAA8B,wBAAU;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAA,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAsB;;;AFE7B,IAAM,uBAAuB,0BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpC,IAAM,aAAa,0BAAO;AAAA;AAAA;AAAA;AAK1B,IAAM,cAAc,0BAAO;AAAA;AAAA;AAAA;AAAA;AAc3B,IAAM,oBAAoB,CAAC,EAAE,MAAM,MAAM,MACrC,4CAAC,4BACI,QAAQ,4CAAC,kBAAY,IAAK,GAC1B,SAAS,4CAAC,eAAY,aAAU,iBAAe,KAAM,CAC1D;AAGJ,IAAO,4BAAQ;",
   "names": ["defaultImport"]
 }

package/README.md

@@ -6,4 +6,4 @@ The dashboard toolbar is an array of menus that users can add to the Dashboard c
 
 ## Documentation
 
-Please reference the [Splunk Dashboard Framework documentation](https://splunkui.splunk.com/Packages/dashboard-docs/?path=/Toolbar) for more details on how to use this component in concert with the rest of the dashboard framework library.
+Please reference the [Splunk Dashboard Framework documentation](https://splunkui.splunk.com/Packages/dashboard-docs/Toolbar) for more details on how to use this component in concert with the rest of the dashboard framework library.

package/Toolbar.js

@@ -54,7 +54,7 @@ __export(styled_components_exports, {
 });
 var defaultImport2 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+var styled_components_default = defaultImport2.default;
 
 // esm-externals:@splunk/themes
 var themes_exports = {};

package/Toolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/Toolbar.tsx", "esm-externals:react", "esm-externals:styled-components", "esm-externals:@splunk/themes", "esm-externals:@splunk/themes/mixins", "esm-externals:@splunk/dashboard-state"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport styled from 'styled-components';\nimport { variables } from '@splunk/themes';\nimport { reset } from '@splunk/themes/mixins';\nimport { selectLayoutType, useSelector } from '@splunk/dashboard-state';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst ToolbarWrapper = styled.div`\n    ${reset('flex')};\n    justify-content: space-between;\n    color: ${variables.contentColorDefault};\n    padding: 5px 5px 5px 8px;\n    border-bottom-width: 1px;\n    border-bottom-style: solid;\n    border-bottom-color: ${variables.borderColor};\n    flex-wrap: wrap;\n    flex-shrink: 0;\n    background-color: ${variables.backgroundColorNavigation};\n`;\n\nconst LeftAlignItems = styled.div`\n    flex-grow: 1;\n    display: flex;\n    flex-direction: row;\n    gap: ${variables.spacingSmall};\n`;\n\nconst RightAlignItems = styled.div`\n    flex-basis: auto;\n    display: flex;\n    flex-direction: row;\n    gap: ${variables.spacingSmall};\n    margin-inline-end: ${variables.spacingSmall};\n`;\n\nexport type ToolbarProps = ToolbarButtonProps & {\n    toolbarItems: React.ReactElement[];\n};\n\n/**\n * Dashboard Toolbar\n */\nconst Toolbar = ({\n    activePanel,\n    dashboardApi,\n    mode,\n    preset,\n    toolbarItems,\n}: ToolbarProps) => {\n    const layoutType = useSelector(selectLayoutType);\n    const toolbarRef = useRef<HTMLDivElement | null>(null);\n\n    /**\n     * merge dashboard props with current item props\n     * so that item have access to dashboard api and other stuff\n     */\n    const injectDashboardProps = useCallback(\n        (items: React.ReactElement[]): React.ReactElement[] => {\n            const buttonProps: ToolbarButtonProps = {\n                activePanel,\n                dashboardApi,\n                layoutType,\n                mode,\n                preset,\n            };\n\n            return items.map((item) => React.cloneElement(item, buttonProps));\n        },\n        [activePanel, dashboardApi, layoutType, mode, preset]\n    );\n\n    const leftAlignItems = useMemo(() => {\n        const items = toolbarItems.filter(\n            (item) => item.props?.align !== 'right'\n        );\n        return injectDashboardProps(items);\n    }, [toolbarItems, injectDashboardProps]);\n\n    const rightAlignItems = useMemo(() => {\n        const items = toolbarItems.filter(\n            (item) => item.props?.align === 'right'\n        );\n        return injectDashboardProps(items);\n    }, [toolbarItems, injectDashboardProps]);\n\n    const observerRef = useRef<MutationObserver | null>(null);\n    const isFirstRender = useRef(true);\n\n    useEffect(() => {\n        if (isFirstRender.current) {\n            isFirstRender.current = false;\n            return undefined;\n        }\n\n        observerRef.current = new MutationObserver(() => {\n            const firstFocusableButton = toolbarRef.current?.querySelector(\n                'button:not([disabled]):not([aria-disabled=\"true\"]):not([tabindex=\"-1\"])'\n            ) as HTMLButtonElement;\n\n            firstFocusableButton?.focus();\n            observerRef.current?.disconnect();\n        });\n\n        if (toolbarRef.current) {\n            observerRef.current.observe(toolbarRef.current, {\n                childList: true,\n                subtree: true,\n            });\n        }\n\n        return () => {\n            observerRef.current?.disconnect();\n        };\n    }, [mode]);\n\n    if (!toolbarItems.length) {\n        return null;\n    }\n\n    return (\n        <ToolbarWrapper data-test=\"dashboard-toolbar\" ref={toolbarRef}>\n            <LeftAlignItems key=\"left-align-items\" data-test=\"left-align-items\">\n                {leftAlignItems}\n            </LeftAlignItems>\n            <RightAlignItems\n                key=\"right-align-items\"\n                data-test=\"right-align-items\"\n            >\n                {rightAlignItems}\n            </RightAlignItems>\n        </ToolbarWrapper>\n    );\n};\n\nToolbar.displayName = 'Toolbar';\nexport default Toolbar;\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/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes/mixins\";\nexport * from \"@splunk/themes/mixins\";\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"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport styled from 'styled-components';\nimport { variables } from '@splunk/themes';\nimport { reset } from '@splunk/themes/mixins';\nimport { selectLayoutType, useSelector } from '@splunk/dashboard-state';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst ToolbarWrapper = styled.div`\n    ${reset('flex')};\n    justify-content: space-between;\n    color: ${variables.contentColorDefault};\n    padding: 5px 5px 5px 8px;\n    border-bottom-width: 1px;\n    border-bottom-style: solid;\n    border-bottom-color: ${variables.borderColor};\n    flex-wrap: wrap;\n    flex-shrink: 0;\n    background-color: ${variables.backgroundColorNavigation};\n`;\n\nconst LeftAlignItems = styled.div`\n    flex-grow: 1;\n    display: flex;\n    flex-direction: row;\n    gap: ${variables.spacingSmall};\n`;\n\nconst RightAlignItems = styled.div`\n    flex-basis: auto;\n    display: flex;\n    flex-direction: row;\n    gap: ${variables.spacingSmall};\n    margin-inline-end: ${variables.spacingSmall};\n`;\n\nexport type ToolbarProps = ToolbarButtonProps & {\n    toolbarItems: React.ReactElement[];\n};\n\n/**\n * Dashboard Toolbar\n */\nconst Toolbar = ({\n    activePanel,\n    dashboardApi,\n    mode,\n    preset,\n    toolbarItems,\n}: ToolbarProps) => {\n    const layoutType = useSelector(selectLayoutType);\n    const toolbarRef = useRef<HTMLDivElement | null>(null);\n\n    /**\n     * merge dashboard props with current item props\n     * so that item have access to dashboard api and other stuff\n     */\n    const injectDashboardProps = useCallback(\n        (items: React.ReactElement[]): React.ReactElement[] => {\n            const buttonProps: ToolbarButtonProps = {\n                activePanel,\n                dashboardApi,\n                layoutType,\n                mode,\n                preset,\n            };\n\n            return items.map((item) => React.cloneElement(item, buttonProps));\n        },\n        [activePanel, dashboardApi, layoutType, mode, preset]\n    );\n\n    const leftAlignItems = useMemo(() => {\n        const items = toolbarItems.filter(\n            (item) => item.props?.align !== 'right'\n        );\n        return injectDashboardProps(items);\n    }, [toolbarItems, injectDashboardProps]);\n\n    const rightAlignItems = useMemo(() => {\n        const items = toolbarItems.filter(\n            (item) => item.props?.align === 'right'\n        );\n        return injectDashboardProps(items);\n    }, [toolbarItems, injectDashboardProps]);\n\n    const observerRef = useRef<MutationObserver | null>(null);\n    const isFirstRender = useRef(true);\n\n    useEffect(() => {\n        if (isFirstRender.current) {\n            isFirstRender.current = false;\n            return undefined;\n        }\n\n        observerRef.current = new MutationObserver(() => {\n            const firstFocusableButton = toolbarRef.current?.querySelector(\n                'button:not([disabled]):not([aria-disabled=\"true\"]):not([tabindex=\"-1\"])'\n            ) as HTMLButtonElement;\n\n            firstFocusableButton?.focus();\n            observerRef.current?.disconnect();\n        });\n\n        if (toolbarRef.current) {\n            observerRef.current.observe(toolbarRef.current, {\n                childList: true,\n                subtree: true,\n            });\n        }\n\n        return () => {\n            observerRef.current?.disconnect();\n        };\n    }, [mode]);\n\n    if (!toolbarItems.length) {\n        return null;\n    }\n\n    return (\n        <ToolbarWrapper data-test=\"dashboard-toolbar\" ref={toolbarRef}>\n            <LeftAlignItems key=\"left-align-items\" data-test=\"left-align-items\">\n                {leftAlignItems}\n            </LeftAlignItems>\n            <RightAlignItems\n                key=\"right-align-items\"\n                data-test=\"right-align-items\"\n            >\n                {rightAlignItems}\n            </RightAlignItems>\n        </ToolbarWrapper>\n    );\n};\n\nToolbar.displayName = 'Toolbar';\nexport default Toolbar;\n", "import * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default defaultImport.default;\n", "import * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/themes/mixins\";\nexport * from \"@splunk/themes/mixins\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/dashboard-state\";\nexport * from \"@splunk/dashboard-state\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n"],
+  "mappings": "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",
   "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport"]
 }

package/buttons/Charts.js

@@ -90,7 +90,7 @@ __export(styled_components_exports, {
 });
 var defaultImport3 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+var styled_components_default = defaultImport3.default;
 
 // esm-externals:@splunk/react-ui/Dropdown
 var Dropdown_exports = {};

package/buttons/Charts.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/buttons/Charts.tsx", "esm-externals:react", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:styled-components", "esm-externals:@splunk/react-ui/Dropdown", "esm-externals:@splunk/react-ui/Menu", "esm-externals:@splunk/themes", "esm-externals:@splunk/react-icons/ChartColumn", "esm-externals:@splunk/dashboard-ui", "esm-externals:@splunk/dashboard-context", "esm-externals:@splunk/dashboard-state", "../src/Item.tsx", "../src/hooks/useDropdown.ts", "esm-externals:@splunk/react-icons/CaretDown", "esm-externals:@splunk/react-ui/ScreenReaderContent", "esm-externals:@splunk/react-ui/Button", "../src/IconButton.tsx", "../src/components/StyledButton.tsx"],
-  "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport styled from 'styled-components';\nimport Dropdown, {\n    type DropdownChildrenRenderer,\n    type DropdownPossibleCloseReason,\n} from '@splunk/react-ui/Dropdown';\nimport Menu from '@splunk/react-ui/Menu';\nimport { SplunkThemeProvider, useSplunkTheme } from '@splunk/themes';\n\nimport AddChartDropdown from '@splunk/react-icons/ChartColumn';\n\nimport { VisualizationFilter, type Taxonomy } from '@splunk/dashboard-ui';\nimport { useFeatureFlags } from '@splunk/dashboard-context';\nimport { batch } from '@splunk/dashboard-state';\nimport ToolbarItem from '../Item';\nimport useDropdown from '../hooks/useDropdown';\nimport type { ToolbarButtonProps } from '../types/common';\nimport { prepareIcon } from '../IconButton';\nimport { StyledDropdownButton } from '../components/StyledButton';\n\ninterface ScrollableMenuProps {\n    maxHeight?: number | null;\n}\n\nconst ScrollableMenu = styled(Menu).attrs<ScrollableMenuProps>(\n    ({ maxHeight }) => ({\n        style: {\n            maxHeight: maxHeight ?? undefined,\n        },\n    })\n)<ScrollableMenuProps>`\n    overflow-y: auto;\n`;\n\nconst chartsDropdown = prepareIcon({\n    Icon: AddChartDropdown,\n    isMenu: true,\n    screenReaderContent: _('Add chart'),\n});\n\nconst ButtonToggle = (\n    <StyledDropdownButton\n        data-test=\"charts-button\"\n        data-clickable\n        appearance=\"subtle\"\n        icon={chartsDropdown}\n    />\n);\n\nconst focusToggleReasons: DropdownPossibleCloseReason[] = [\n    'escapeKey',\n    'tabKey',\n];\n\ntype Visualizations = Taxonomy[number]['visualizations'];\n\n/**\n * export for unit testing\n * @private\n */\nexport const getVisualizationListFromTaxonomy = ({\n    taxonomy,\n    handleCreateVisualization,\n}: {\n    taxonomy: Taxonomy;\n    handleCreateVisualization: (opt: {\n        type: string;\n        options: Record<string, unknown>;\n    }) => () => void;\n}): JSX.Element[] =>\n    taxonomy.reduce(\n        (list: React.ReactElement[], { visualizations, category }) => {\n            const availableVisualizations: Visualizations =\n                visualizations.filter((props) => props.includeInToolbar);\n\n            if (availableVisualizations.length === 0) {\n                return list;\n            }\n\n            list.push(<Menu.Divider key={`menu-divider-${category}`} />);\n\n            return list.concat(\n                availableVisualizations.map((vizProps) => {\n                    const { label, type, initialOptions } = vizProps;\n                    const Icon = vizProps.icon as React.JSXElementConstructor<\n                        Record<string, unknown>\n                    > | null;\n\n                    if (!type) {\n                        return null;\n                    }\n\n                    const onClick = handleCreateVisualization({\n                        type,\n                        options: initialOptions as Record<string, unknown>,\n                    });\n\n                    return (\n                        <Menu.Item\n                            data-test={`add-${type}-button`}\n                            data-test-clickable\n                            onClick={onClick}\n                            startAdornment={!!Icon && <Icon size=\"18px\" />}\n                            key={`add-${type}-button`}\n                        >\n                            {label}\n                        </Menu.Item>\n                    );\n                }) as JSX.Element[]\n            );\n        },\n        []\n    );\n\n/**\n * Charts button that has a dropdown menu.\n */\nconst Charts = ({ dashboardApi, preset }: ToolbarButtonProps): JSX.Element => {\n    const { showNewDataForViz = true } = useFeatureFlags();\n\n    const { family } = useSplunkTheme();\n    const { handleForceClose, handleRequestClose, handleRequestOpen, isOpen } =\n        useDropdown({\n            isContentClickClose: false,\n        });\n\n    const taxonomy: Taxonomy = useMemo(\n        () => new VisualizationFilter(preset).taxonomy,\n        [preset]\n    );\n\n    const handleCreateVisualization = useCallback(\n        ({\n            type,\n            options,\n        }: {\n            type: string;\n            options: Record<string, unknown>;\n        }) =>\n            () => {\n                batch(() => {\n                    dashboardApi?.createVisualization({\n                        visualizationDefinition: { type, options },\n                    });\n\n                    if (showNewDataForViz) {\n                        dashboardApi?.openPanel({\n                            activePanel: 'connectData',\n                            panelProps: {\n                                bindingType: 'primary',\n                                from: {\n                                    activePanel: 'config',\n                                },\n                            },\n                        });\n                    }\n                });\n\n                handleForceClose();\n            },\n        [dashboardApi, showNewDataForViz, handleForceClose]\n    );\n\n    const visualizationList = useMemo(\n        () =>\n            getVisualizationListFromTaxonomy({\n                taxonomy,\n                handleCreateVisualization,\n            }),\n        [taxonomy, handleCreateVisualization]\n    );\n\n    const renderScrollableMenu = useCallback<DropdownChildrenRenderer>(\n        ({ maxHeight }) => (\n            <SplunkThemeProvider\n                density={family === 'enterprise' ? 'comfortable' : 'compact'}\n            >\n                <ScrollableMenu\n                    maxHeight={maxHeight}\n                    data-test=\"add-chart-menu\"\n                >\n                    {visualizationList}\n                </ScrollableMenu>\n            </SplunkThemeProvider>\n        ),\n        [family, visualizationList]\n    );\n\n    return (\n        <ToolbarItem>\n            <Dropdown\n                focusToggleReasons={focusToggleReasons}\n                onRequestClose={handleRequestClose}\n                onRequestOpen={handleRequestOpen}\n                open={isOpen}\n                toggle={ButtonToggle}\n            >\n                {renderScrollableMenu}\n            </Dropdown>\n        </ToolbarItem>\n    );\n};\n\nexport default Charts;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Dropdown\";\nexport * from \"@splunk/react-ui/Dropdown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Menu\";\nexport * from \"@splunk/react-ui/Menu\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/ChartColumn\";\nexport * from \"@splunk/react-icons/ChartColumn\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-ui\";\nexport * from \"@splunk/dashboard-ui\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-context\";\nexport * from \"@splunk/dashboard-context\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-state\";\nexport * from \"@splunk/dashboard-state\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\n\nexport default styled.div``;\n", "import type { DropdownRequestCloseHandler } from '@splunk/react-ui/Dropdown';\nimport { useCallback, useRef, useState } from 'react';\n\ninterface UseDropdownArgs {\n    isContentClickClose?: boolean;\n}\n\ninterface UseDropdownReturn {\n    isOpen: boolean;\n    handleRequestClose: DropdownRequestCloseHandler;\n    handleRequestOpen: () => void;\n    handleForceClose: () => void;\n    setHasChildModal: (value: boolean) => void;\n}\n\n/**\n * Custom React Hook for the controlled SUI Dropdown component.\n *\n * @param {Object} config\n * @param {Boolean} config.isContentClickClose Control if dropdown children onClick's will close the dropdown automatically\n * @returns {Object} value\n * @returns {Boolean} value.isOpen The only state of this hook\n * @returns {Function} value.handleRequestOpen Event handler to open the dropdown\n * @returns {Function} value.handleRequestClose Event handler that SUI Dropdown calls when requested to close\n * @returns {Function} value.handleForceClose Event handler to forcefully close the dropdown\n */\nconst useDropdown = ({\n    isContentClickClose = true,\n}: UseDropdownArgs): UseDropdownReturn => {\n    const [isOpen, setIsOpen] = useState(false);\n    const hasChildModal = useRef(false);\n\n    const handleRequestClose = useCallback<DropdownRequestCloseHandler>(\n        ({ reason }) => {\n            if (reason === 'contentClick' && !isContentClickClose) {\n                // This return results in the dropdown not closing.\n                return;\n            }\n\n            // If there is a child modal then don't close the root on ESC press\n            if (reason === 'escapeKey' && hasChildModal.current) {\n                return;\n            }\n\n            setIsOpen(false);\n        },\n        [isContentClickClose]\n    );\n\n    const handleRequestOpen = useCallback(() => {\n        setIsOpen(true);\n    }, []);\n\n    const handleForceClose = useCallback(() => {\n        setIsOpen(false);\n    }, []);\n\n    const setHasChildModal = useCallback((value: boolean) => {\n        hasChildModal.current = value;\n    }, []);\n\n    return {\n        isOpen,\n        handleRequestOpen,\n        handleRequestClose,\n        handleForceClose,\n        setHasChildModal,\n    };\n};\n\nexport default useDropdown;\n", "\nimport * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React from 'react';\nimport type SVG from '@splunk/react-icons/SVG';\nimport DropdownIcon from '@splunk/react-icons/CaretDown';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport Button, { type ButtonPropsBase } from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\nimport ToolbarItem from './Item';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledDropdownIcon = styled(DropdownIcon)`\n    margin-left: -5px;\n`;\n\nexport const iconSize = 24;\nexport const menuIconSize = 20;\n\ninterface PrepareIconProps extends React.ComponentProps<typeof SVG> {\n    Icon: React.ComponentType<React.ComponentProps<typeof SVG>>;\n    screenReaderContent?: string;\n    isMenu?: boolean;\n    variant?: 'filled' | 'outline' | 'none';\n}\n\n/**\n * Button adds a bunch of padding when there's any child elements even if they don't display anything (screenReaderContent)\n * This bundles the primary icon, a menu caret and screenReaderContent as an icon when needed.\n * Additionally accepts any properties of any react-icons element to be applied to primary icon\n * @param {Object} arg\n * @param {React.ElementType} arg.Icon The primary icon\n * @param {boolean} [arg.isMenu=false] Display a menu caret\n * @param {string} [arg.screenReaderContent] A label for the icon\n * @param {string} [arg.variant] Fill the icon, or not\n * @returns {JSX.Element}\n */\nexport const prepareIcon = ({\n    Icon,\n    screenReaderContent,\n    isMenu = false,\n    ...props\n}: PrepareIconProps) => {\n    const size = isMenu ? menuIconSize : iconSize;\n    return (\n        <>\n            <Icon width={size} height={size} {...props} />\n            {isMenu && (\n                <StyledDropdownIcon variant=\"filled\" width={9} height={size} />\n            )}\n            {screenReaderContent && (\n                <ScreenReaderContent>{screenReaderContent}</ScreenReaderContent>\n            )}\n        </>\n    );\n};\n\nexport interface IconButtonProps extends ToolbarButtonProps {\n    icon?: JSX.Element;\n    onClick?: ButtonPropsBase['onClick'];\n    label?: string;\n    buttonRef?: React.RefObject<HTMLButtonElement>;\n    testLabel?: string;\n    disabled?: boolean;\n}\n\nconst IconButton = ({\n    icon,\n    buttonRef,\n    disabled = false,\n    onClick,\n    label,\n    testLabel,\n    ...rest\n}: IconButtonProps): JSX.Element => {\n    return (\n        <ToolbarItem {...rest}>\n            <Button\n                elementRef={buttonRef}\n                onClick={onClick}\n                disabled={disabled}\n                appearance=\"subtle\"\n                icon={icon}\n                label={label}\n                data-test={testLabel}\n                data-clickable\n            />\n        </ToolbarItem>\n    );\n};\n\nexport default IconButton;\n", "import Button from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\n\nexport const StyledDropdownButton = styled(Button)`\n    max-width: '50px';\n`;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;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,yBAAc;AACd,IAAO,eAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,6BAAc;AACd,IAAO,mBAAS,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,gCAAc;AACd,IAAO,sBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,iCAAc;AACd,IAAO,uBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,kBAA+B;AAC/B,oCAAc;AACd,IAAO,0BAAS,aAAaA,kBAA8B,0BAAUA;;;ACDrE,IAAO,eAAQ,0BAAO;;;ACwBtB,IAAM,cAAc,CAAC;AAAA,EACjB,sBAAsB;AAC1B,MAA0C;AACtC,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAS,KAAK;AAC1C,QAAM,oBAAgB,sBAAO,KAAK;AAElC,QAAM,yBAAqB;AAAA,IACvB,CAAC,EAAE,OAAO,MAAM;AACZ,UAAI,WAAW,kBAAkB,CAAC,qBAAqB;AAEnD;AAAA,MACJ;AAGA,UAAI,WAAW,eAAe,cAAc,SAAS;AACjD;AAAA,MACJ;AAEA,gBAAU,KAAK;AAAA,IACnB;AAAA,IACA,CAAC,mBAAmB;AAAA,EACxB;AAEA,QAAM,wBAAoB,2BAAY,MAAM;AACxC,cAAU,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,2BAAY,MAAM;AACvC,cAAU,KAAK;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,2BAAY,CAAC,UAAmB;AACrD,kBAAc,UAAU;AAAA,EAC5B,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AAEA,IAAO,sBAAQ;;;ACtEf;AAAA;AAAA;AAAA;AACA,IAAAC,kBAA+B;AAC/B,8BAAc;AACd,IAAO,oBAAS,aAAaA,kBAA8B,0BAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,kBAA+B;AAC/B,wCAAc;AACd,IAAO,8BAAS,aAAaA,kBAA8B,0BAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,kBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,kBAA8B,0BAAUA;;;ACMrE,IAAM,qBAAqB,0BAAO,iBAAY;AAAA;AAAA;AAIvC,IAAM,WAAW;AACjB,IAAM,eAAe;AAoBrB,IAAM,cAAc,CAAC,OAKJ;AALI,eACxB;AAAA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EArCb,IAkC4B,IAIrB,kBAJqB,IAIrB;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,OAAO,SAAS,eAAe;AACrC,SACI,0EACI,4CAAC,uBAAK,OAAO,MAAM,QAAQ,QAAU,MAAO,GAC3C,UACG,4CAAC,sBAAmB,SAAQ,UAAS,OAAO,GAAG,QAAQ,MAAM,GAEhE,uBACG,4CAAC,mCAAqB,mBAAoB,CAElD;AAER;;;ACjDO,IAAM,uBAAuB,0BAAO,cAAM;AAAA;AAAA;;;AjBsBjD,IAAM,iBAAiB,0BAAO,YAAI,EAAE;AAAA,EAChC,CAAC,EAAE,UAAU,OAAO;AAAA,IAChB,OAAO;AAAA,MACH,WAAW,gCAAa;AAAA,IAC5B;AAAA,EACJ;AACJ;AAAA;AAAA;AAIA,IAAM,iBAAiB,YAAY;AAAA,EAC/B,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,yBAAqB,gBAAE,WAAW;AACtC,CAAC;AAED,IAAM,eACF;AAAA,EAAC;AAAA;AAAA,IACG,aAAU;AAAA,IACV,kBAAc;AAAA,IACd,YAAW;AAAA,IACX,MAAM;AAAA;AACV;AAGJ,IAAM,qBAAoD;AAAA,EACtD;AAAA,EACA;AACJ;AAQO,IAAM,mCAAmC,CAAC;AAAA,EAC7C;AAAA,EACA;AACJ,MAOI,SAAS;AAAA,EACL,CAAC,MAA4B,EAAE,gBAAgB,SAAS,MAAM;AAC1D,UAAM,0BACF,eAAe,OAAO,CAAC,UAAU,MAAM,gBAAgB;AAE3D,QAAI,wBAAwB,WAAW,GAAG;AACtC,aAAO;AAAA,IACX;AAEA,SAAK,KAAK,4CAAC,aAAK,SAAL,EAAa,KAAK,gBAAgB,QAAQ,IAAI,CAAE;AAE3D,WAAO,KAAK;AAAA,MACR,wBAAwB,IAAI,CAAC,aAAa;AACtC,cAAM,EAAE,OAAO,MAAM,eAAe,IAAI;AACxC,cAAM,OAAO,SAAS;AAItB,YAAI,CAAC,MAAM;AACP,iBAAO;AAAA,QACX;AAEA,cAAM,UAAU,0BAA0B;AAAA,UACtC;AAAA,UACA,SAAS;AAAA,QACb,CAAC;AAED,eACI;AAAA,UAAC,aAAK;AAAA,UAAL;AAAA,YACG,aAAW,OAAO,IAAI;AAAA,YACtB,uBAAmB;AAAA,YACnB;AAAA,YACA,gBAAgB,CAAC,CAAC,QAAQ,4CAAC,QAAK,MAAK,QAAO;AAAA,YAC5C,KAAK,OAAO,IAAI;AAAA;AAAA,UAEf;AAAA,QACL;AAAA,MAER,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EACA,CAAC;AACL;AAKJ,IAAM,SAAS,CAAC,EAAE,cAAc,OAAO,MAAuC;AAC1E,QAAM,EAAE,oBAAoB,KAAK,QAAI,2CAAgB;AAErD,QAAM,EAAE,OAAO,QAAI,+BAAe;AAClC,QAAM,EAAE,kBAAkB,oBAAoB,mBAAmB,OAAO,IACpE,oBAAY;AAAA,IACR,qBAAqB;AAAA,EACzB,CAAC;AAEL,QAAM,eAAqB;AAAA,IACvB,MAAM,IAAI,yCAAoB,MAAM,EAAE;AAAA,IACtC,CAAC,MAAM;AAAA,EACX;AAEA,QAAM,gCAA4B;AAAA,IAC9B,CAAC;AAAA,MACG;AAAA,MACA;AAAA,IACJ,MAII,MAAM;AACF,yCAAM,MAAM;AACR,qDAAc,oBAAoB;AAAA,UAC9B,yBAAyB,EAAE,MAAM,QAAQ;AAAA,QAC7C;AAEA,YAAI,mBAAmB;AACnB,uDAAc,UAAU;AAAA,YACpB,aAAa;AAAA,YACb,YAAY;AAAA,cACR,aAAa;AAAA,cACb,MAAM;AAAA,gBACF,aAAa;AAAA,cACjB;AAAA,YACJ;AAAA,UACJ;AAAA,QACJ;AAAA,MACJ,CAAC;AAED,uBAAiB;AAAA,IACrB;AAAA,IACJ,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,EACtD;AAEA,QAAM,wBAAoB;AAAA,IACtB,MACI,iCAAiC;AAAA,MAC7B;AAAA,MACA;AAAA,IACJ,CAAC;AAAA,IACL,CAAC,UAAU,yBAAyB;AAAA,EACxC;AAEA,QAAM,2BAAuB;AAAA,IACzB,CAAC,EAAE,UAAU,MACT;AAAA,MAAC;AAAA;AAAA,QACG,SAAS,WAAW,eAAe,gBAAgB;AAAA;AAAA,MAEnD;AAAA,QAAC;AAAA;AAAA,UACG;AAAA,UACA,aAAU;AAAA;AAAA,QAET;AAAA,MACL;AAAA,IACJ;AAAA,IAEJ,CAAC,QAAQ,iBAAiB;AAAA,EAC9B;AAEA,SACI,4CAAC,oBACG;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,MAAM;AAAA,MACN,QAAQ;AAAA;AAAA,IAEP;AAAA,EACL,CACJ;AAER;AAEA,IAAO,iBAAQ;",
+  "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport styled from 'styled-components';\nimport Dropdown, {\n    type DropdownChildrenRenderer,\n    type DropdownPossibleCloseReason,\n} from '@splunk/react-ui/Dropdown';\nimport Menu from '@splunk/react-ui/Menu';\nimport { SplunkThemeProvider, useSplunkTheme } from '@splunk/themes';\n\nimport AddChartDropdown from '@splunk/react-icons/ChartColumn';\n\nimport { VisualizationFilter, type Taxonomy } from '@splunk/dashboard-ui';\nimport { useFeatureFlags } from '@splunk/dashboard-context';\nimport { batch } from '@splunk/dashboard-state';\nimport ToolbarItem from '../Item';\nimport useDropdown from '../hooks/useDropdown';\nimport type { ToolbarButtonProps } from '../types/common';\nimport { prepareIcon } from '../IconButton';\nimport { StyledDropdownButton } from '../components/StyledButton';\n\ninterface ScrollableMenuProps {\n    maxHeight?: number | null;\n}\n\nconst ScrollableMenu = styled(Menu).attrs<ScrollableMenuProps>(\n    ({ maxHeight }) => ({\n        style: {\n            maxHeight: maxHeight ?? undefined,\n        },\n    })\n)<ScrollableMenuProps>`\n    overflow-y: auto;\n`;\n\nconst chartsDropdown = prepareIcon({\n    Icon: AddChartDropdown,\n    isMenu: true,\n    screenReaderContent: _('Add chart'),\n});\n\nconst ButtonToggle = (\n    <StyledDropdownButton\n        data-test=\"charts-button\"\n        data-clickable\n        appearance=\"subtle\"\n        icon={chartsDropdown}\n    />\n);\n\nconst focusToggleReasons: DropdownPossibleCloseReason[] = [\n    'escapeKey',\n    'tabKey',\n];\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", "import * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default defaultImport.default;\n", "import * as defaultImport from \"@splunk/react-ui/Dropdown\";\nexport * from \"@splunk/react-ui/Dropdown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-ui/Menu\";\nexport * from \"@splunk/react-ui/Menu\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-icons/ChartColumn\";\nexport * from \"@splunk/react-icons/ChartColumn\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/dashboard-ui\";\nexport * from \"@splunk/dashboard-ui\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/dashboard-context\";\nexport * from \"@splunk/dashboard-context\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/dashboard-state\";\nexport * from \"@splunk/dashboard-state\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\n\nexport default styled.div``;\n", "import type { DropdownRequestCloseHandler } from '@splunk/react-ui/Dropdown';\nimport { useCallback, useRef, useState } from 'react';\n\ninterface UseDropdownArgs {\n    isContentClickClose?: boolean;\n}\n\ninterface UseDropdownReturn {\n    isOpen: boolean;\n    handleRequestClose: DropdownRequestCloseHandler;\n    handleRequestOpen: () => void;\n    handleForceClose: () => void;\n    setHasChildModal: (value: boolean) => void;\n}\n\n/**\n * Custom React Hook for the controlled SUI Dropdown component.\n *\n * @param {Object} config\n * @param {Boolean} config.isContentClickClose Control if dropdown children onClick's will close the dropdown automatically\n * @returns {Object} value\n * @returns {Boolean} value.isOpen The only state of this hook\n * @returns {Function} value.handleRequestOpen Event handler to open the dropdown\n * @returns {Function} value.handleRequestClose Event handler that SUI Dropdown calls when requested to close\n * @returns {Function} value.handleForceClose Event handler to forcefully close the dropdown\n */\nconst useDropdown = ({\n    isContentClickClose = true,\n}: UseDropdownArgs): UseDropdownReturn => {\n    const [isOpen, setIsOpen] = useState(false);\n    const hasChildModal = useRef(false);\n\n    const handleRequestClose = useCallback<DropdownRequestCloseHandler>(\n        ({ reason }) => {\n            if (reason === 'contentClick' && !isContentClickClose) {\n                // This return results in the dropdown not closing.\n                return;\n            }\n\n            // If there is a child modal then don't close the root on ESC press\n            if (reason === 'escapeKey' && hasChildModal.current) {\n                return;\n            }\n\n            setIsOpen(false);\n        },\n        [isContentClickClose]\n    );\n\n    const handleRequestOpen = useCallback(() => {\n        setIsOpen(true);\n    }, []);\n\n    const handleForceClose = useCallback(() => {\n        setIsOpen(false);\n    }, []);\n\n    const setHasChildModal = useCallback((value: boolean) => {\n        hasChildModal.current = value;\n    }, []);\n\n    return {\n        isOpen,\n        handleRequestOpen,\n        handleRequestClose,\n        handleForceClose,\n        setHasChildModal,\n    };\n};\n\nexport default useDropdown;\n", "import * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React from 'react';\nimport type SVG from '@splunk/react-icons/SVG';\nimport DropdownIcon from '@splunk/react-icons/CaretDown';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport Button, { type ButtonPropsBase } from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\nimport ToolbarItem from './Item';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledDropdownIcon = styled(DropdownIcon)`\n    margin-left: -5px;\n`;\n\nexport const iconSize = 24;\nexport const menuIconSize = 20;\n\ninterface PrepareIconProps extends React.ComponentProps<typeof SVG> {\n    Icon: React.ComponentType<React.ComponentProps<typeof SVG>>;\n    screenReaderContent?: string;\n    isMenu?: boolean;\n    variant?: 'filled' | 'outline' | 'none';\n}\n\n/**\n * Button adds a bunch of padding when there's any child elements even if they don't display anything (screenReaderContent)\n * This bundles the primary icon, a menu caret and screenReaderContent as an icon when needed.\n * Additionally accepts any properties of any react-icons element to be applied to primary icon\n * @param {Object} arg\n * @param {React.ElementType} arg.Icon The primary icon\n * @param {boolean} [arg.isMenu=false] Display a menu caret\n * @param {string} [arg.screenReaderContent] A label for the icon\n * @param {string} [arg.variant] Fill the icon, or not\n * @returns {JSX.Element}\n */\nexport const prepareIcon = ({\n    Icon,\n    screenReaderContent,\n    isMenu = false,\n    ...props\n}: PrepareIconProps) => {\n    const size = isMenu ? menuIconSize : iconSize;\n    return (\n        <>\n            <Icon width={size} height={size} {...props} />\n            {isMenu && (\n                <StyledDropdownIcon variant=\"filled\" width={9} height={size} />\n            )}\n            {screenReaderContent && (\n                <ScreenReaderContent>{screenReaderContent}</ScreenReaderContent>\n            )}\n        </>\n    );\n};\n\nexport interface IconButtonProps extends ToolbarButtonProps {\n    icon?: JSX.Element;\n    onClick?: ButtonPropsBase['onClick'];\n    label?: string;\n    buttonRef?: React.RefObject<HTMLButtonElement>;\n    testLabel?: string;\n    disabled?: boolean;\n}\n\nconst IconButton = ({\n    icon,\n    buttonRef,\n    disabled = false,\n    onClick,\n    label,\n    testLabel,\n    ...rest\n}: IconButtonProps): JSX.Element => {\n    return (\n        <ToolbarItem {...rest}>\n            <Button\n                elementRef={buttonRef}\n                onClick={onClick}\n                disabled={disabled}\n                appearance=\"subtle\"\n                icon={icon}\n                label={label}\n                data-test={testLabel}\n                data-clickable\n            />\n        </ToolbarItem>\n    );\n};\n\nexport default IconButton;\n", "import Button from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\n\nexport const StyledDropdownButton = styled(Button)`\n    max-width: '50px';\n`;\n"],
+  "mappings": "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",
   "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
 }

package/buttons/Config.js

@@ -134,7 +134,7 @@ __export(styled_components_exports, {
 });
 var defaultImport8 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+var styled_components_default = defaultImport8.default;
 
 // src/Item.tsx
 var Item_default = styled_components_default.div``;

package/buttons/Config.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/buttons/Config.tsx", "esm-externals:react", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/react-icons/Cog", "esm-externals:@splunk/dashboard-context", "esm-externals:@splunk/react-icons/CaretDown", "esm-externals:@splunk/react-ui/ScreenReaderContent", "esm-externals:@splunk/react-ui/Button", "esm-externals:styled-components", "../src/Item.tsx", "../src/IconButton.tsx"],
-  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport Configuration from '@splunk/react-icons/Cog';\nimport { useToolbarRef } from '@splunk/dashboard-context';\nimport IconButton, { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst configurationIcon = prepareIcon({\n    Icon: Configuration,\n    screenReaderContent: _('Configuration'),\n});\n\n/**\n * Button that toggle open config panel\n */\nconst Config = ({ dashboardApi }: ToolbarButtonProps) => {\n    const configButtonRef = useToolbarRef('config');\n\n    const handleClick = useCallback(() => {\n        const isOpen = dashboardApi?.getOpenedPanel() === 'config';\n        if (isOpen) {\n            dashboardApi?.closePanel();\n        } else {\n            // Open config panel\n            dashboardApi?.openPanel({\n                activePanel: 'config',\n                panelProps: {\n                    focusOnOpen: true,\n                },\n            });\n        }\n    }, [dashboardApi]);\n\n    return (\n        <IconButton\n            buttonRef={configButtonRef}\n            testLabel=\"config-button\"\n            onClick={handleClick}\n            icon={configurationIcon}\n        />\n    );\n};\n\nexport default Config;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/Cog\";\nexport * from \"@splunk/react-icons/Cog\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-context\";\nexport * from \"@splunk/dashboard-context\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/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", "\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 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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",
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport Configuration from '@splunk/react-icons/Cog';\nimport { useToolbarRef } from '@splunk/dashboard-context';\nimport IconButton, { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst configurationIcon = prepareIcon({\n    Icon: Configuration,\n    screenReaderContent: _('Configuration'),\n});\n\n/**\n * Button that toggle open config panel\n */\nconst Config = ({ dashboardApi }: ToolbarButtonProps) => {\n    const configButtonRef = useToolbarRef('config');\n\n    const handleClick = useCallback(() => {\n        const isOpen = dashboardApi?.getOpenedPanel() === 'config';\n        if (isOpen) {\n            dashboardApi?.closePanel();\n        } else {\n            // Open config panel\n            dashboardApi?.openPanel({\n                activePanel: 'config',\n                panelProps: {\n                    focusOnOpen: true,\n                },\n            });\n        }\n    }, [dashboardApi]);\n\n    return (\n        <IconButton\n            buttonRef={configButtonRef}\n            testLabel=\"config-button\"\n            onClick={handleClick}\n            icon={configurationIcon}\n        />\n    );\n};\n\nexport default Config;\n", "import * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-icons/Cog\";\nexport * from \"@splunk/react-icons/Cog\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/dashboard-context\";\nexport * from \"@splunk/dashboard-context\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default defaultImport.default;\n", "import styled from 'styled-components';\n\nexport default styled.div``;\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"]
 }

package/buttons/ContentExport.js

@@ -125,7 +125,7 @@ __export(styled_components_exports, {
 });
 var defaultImport7 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+var styled_components_default = defaultImport7.default;
 
 // src/Item.tsx
 var Item_default = styled_components_default.div``;