@splunk/dashboard-toolbar 29.3.4 → 29.5.0

package/buttons/Shapes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/buttons/Shapes.tsx", "esm-externals:react", "esm-externals:@splunk/react-ui/Menu", "esm-externals:@splunk/react-icons/Circle", "esm-externals:@splunk/react-icons/Square", "esm-externals:@splunk/react-icons/Line", "esm-externals:@splunk/react-ui/Dropdown", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/react-icons/ShapesVariety", "esm-externals:@splunk/react-ui/Button", "esm-externals:styled-components", "../src/components/StyledButton.tsx", "../src/hooks/useDropdown.ts", "../src/Item.tsx", "../src/PopoverItemButton.tsx", "esm-externals:@splunk/react-icons/CaretDown", "esm-externals:@splunk/react-ui/ScreenReaderContent", "../src/IconButton.tsx"],
-  "sourcesContent": ["import React, { useCallback } from 'react';\nimport Menu from '@splunk/react-ui/Menu';\nimport Circle from '@splunk/react-icons/Circle';\nimport BoxUnchecked from '@splunk/react-icons/Square';\nimport Line from '@splunk/react-icons/Line';\nimport Dropdown, {\n    type DropdownPossibleCloseReason,\n} from '@splunk/react-ui/Dropdown';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport AddShapeDropdown from '@splunk/react-icons/ShapesVariety';\nimport type {\n    StructureItemType,\n    VisualizationDefinition,\n} from '@splunk/dashboard-types';\nimport { StyledDropdownButton } from '../components/StyledButton';\nimport useDropdown from '../hooks/useDropdown';\nimport ToolbarItem from '../Item';\nimport PopoverItemButton from '../PopoverItemButton';\nimport type { ToolbarButtonProps } from '../types/common';\nimport { prepareIcon } from '../IconButton';\n\nconst shapesDropdown = prepareIcon({\n    Icon: AddShapeDropdown,\n    screenReaderContent: _('Add shape'),\n    isMenu: true,\n});\n\nconst ButtonToggle = (\n    <StyledDropdownButton\n        appearance=\"subtle\"\n        data-clickable\n        data-test=\"shapes-button\"\n        icon={shapesDropdown}\n    />\n);\n\nconst focusToggleReasons: DropdownPossibleCloseReason[] = [\n    'escapeKey',\n    'tabKey',\n];\n\nconst circleIcon = <Circle />;\nconst uncheckedBoxIcon = <BoxUnchecked />;\nconst lineIcon = <Line />;\n\n/**\n *  Shapes button that has a dropdown menu.\n */\nconst Shapes = ({ dashboardApi, layoutType }: ToolbarButtonProps) => {\n    const supportLine = layoutType === 'absolute';\n\n    const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown({\n        isContentClickClose: true,\n    });\n\n    const handleCreateVizButtonClick = useCallback(\n        (\n            vizToCreate: VisualizationDefinition<Record<string, unknown>>,\n            layoutItemType?: StructureItemType\n        ) => {\n            return () => {\n                dashboardApi?.createVisualization({\n                    visualizationDefinition: vizToCreate,\n                    layoutItemType,\n                });\n                dashboardApi?.openPanel({ activePanel: 'config' });\n            };\n        },\n        [dashboardApi]\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                <Menu data-test=\"shapes-dropdown-children-container\">\n                    <Menu.Item\n                        data-test=\"ellipse-button\"\n                        onClick={handleCreateVizButtonClick({\n                            type: 'splunk.ellipse',\n                        })}\n                    >\n                        <PopoverItemButton\n                            icon={circleIcon}\n                            label={_('Ellipse')}\n                        />\n                    </Menu.Item>\n                    <Menu.Item\n                        data-test=\"rectangle-button\"\n                        onClick={handleCreateVizButtonClick({\n                            type: 'splunk.rectangle',\n                        })}\n                    >\n                        <PopoverItemButton\n                            icon={uncheckedBoxIcon}\n                            label={_('Rectangle')}\n                        />\n                    </Menu.Item>\n                    {supportLine && (\n                        <Menu.Item\n                            data-test=\"line-button\"\n                            onClick={handleCreateVizButtonClick(\n                                {\n                                    type: 'abslayout.line',\n                                },\n                                'line'\n                            )}\n                        >\n                            <PopoverItemButton\n                                icon={lineIcon}\n                                label={_('Line')}\n                            />\n                        </Menu.Item>\n                    )}\n                </Menu>\n            </Dropdown>\n        </ToolbarItem>\n    );\n};\n\nexport default Shapes;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\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/react-icons/Circle\";\nexport * from \"@splunk/react-icons/Circle\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/Square\";\nexport * from \"@splunk/react-icons/Square\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/Line\";\nexport * from \"@splunk/react-icons/Line\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Dropdown\";\nexport * from \"@splunk/react-ui/Dropdown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/ShapesVariety\";\nexport * from \"@splunk/react-icons/ShapesVariety\";\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 Button from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\n\nexport const StyledDropdownButton = styled(Button)`\n    max-width: '50px';\n`;\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 styled from 'styled-components';\n\nexport default styled.div``;\n", "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 \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React from 'react';\nimport type SVG from '@splunk/react-icons/SVG';\nimport DropdownIcon from '@splunk/react-icons/CaretDown';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport Button, { type ButtonPropsBase } from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\nimport ToolbarItem from './Item';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledDropdownIcon = styled(DropdownIcon)`\n    margin-left: -5px;\n`;\n\nexport const iconSize = 24;\nexport const menuIconSize = 20;\n\ninterface PrepareIconProps extends React.ComponentProps<typeof SVG> {\n    Icon: React.ComponentType<React.ComponentProps<typeof SVG>>;\n    screenReaderContent?: string;\n    isMenu?: boolean;\n    variant?: 'filled' | 'outline' | 'none';\n}\n\n/**\n * Button adds a bunch of padding when there's any child elements even if they don't display anything (screenReaderContent)\n * This bundles the primary icon, a menu caret and screenReaderContent as an icon when needed.\n * Additionally accepts any properties of any react-icons element to be applied to primary icon\n * @param {Object} arg\n * @param {React.ElementType} arg.Icon The primary icon\n * @param {boolean} [arg.isMenu=false] Display a menu caret\n * @param {string} [arg.screenReaderContent] A label for the icon\n * @param {string} [arg.variant] Fill the icon, or not\n * @returns {JSX.Element}\n */\nexport const prepareIcon = ({\n    Icon,\n    screenReaderContent,\n    isMenu = false,\n    ...props\n}: PrepareIconProps) => {\n    const size = isMenu ? menuIconSize : iconSize;\n    return (\n        <>\n            <Icon width={size} height={size} {...props} />\n            {isMenu && (\n                <StyledDropdownIcon variant=\"filled\" width={9} height={size} />\n            )}\n            {screenReaderContent && (\n                <ScreenReaderContent>{screenReaderContent}</ScreenReaderContent>\n            )}\n        </>\n    );\n};\n\nexport interface IconButtonProps extends ToolbarButtonProps {\n    icon?: JSX.Element;\n    onClick?: ButtonPropsBase['onClick'];\n    label?: string;\n    buttonRef?: React.RefObject<HTMLButtonElement>;\n    testLabel?: string;\n    disabled?: boolean;\n}\n\nconst IconButton = ({\n    icon,\n    buttonRef,\n    disabled = false,\n    onClick,\n    label,\n    testLabel,\n    ...rest\n}: IconButtonProps): JSX.Element => {\n    return (\n        <ToolbarItem {...rest}>\n            <Button\n                elementRef={buttonRef}\n                onClick={onClick}\n                disabled={disabled}\n                appearance=\"subtle\"\n                icon={icon}\n                label={label}\n                data-test={testLabel}\n                data-clickable\n            />\n        </ToolbarItem>\n    );\n};\n\nexport default IconButton;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,2BAAc;AACd,IAAO,iBAAS,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,yBAAc;AACd,IAAO,eAAS,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,kCAAc;AACd,IAAO,wBAAS,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,kBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,kBAA8B,0BAAUA;;;ACA9D,IAAM,uBAAuB,0BAAO,cAAM;AAAA;AAAA;;;ACuBjD,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;;;ACpEf,IAAO,eAAQ,0BAAO;;;ACEtB,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;;;ACtCf;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;;;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;;;AjB/BA,IAAM,iBAAiB,YAAY;AAAA,EAC/B,MAAM;AAAA,EACN,yBAAqB,gBAAE,WAAW;AAAA,EAClC,QAAQ;AACZ,CAAC;AAED,IAAM,eACF;AAAA,EAAC;AAAA;AAAA,IACG,YAAW;AAAA,IACX,kBAAc;AAAA,IACd,aAAU;AAAA,IACV,MAAM;AAAA;AACV;AAGJ,IAAM,qBAAoD;AAAA,EACtD;AAAA,EACA;AACJ;AAEA,IAAM,aAAa,4CAAC,oBAAO;AAC3B,IAAM,mBAAmB,4CAAC,oBAAa;AACvC,IAAM,WAAW,4CAAC,kBAAK;AAKvB,IAAM,SAAS,CAAC,EAAE,cAAc,WAAW,MAA0B;AACjE,QAAM,cAAc,eAAe;AAEnC,QAAM,EAAE,oBAAoB,mBAAmB,OAAO,IAAI,oBAAY;AAAA,IAClE,qBAAqB;AAAA,EACzB,CAAC;AAED,QAAM,iCAA6B;AAAA,IAC/B,CACI,aACA,mBACC;AACD,aAAO,MAAM;AACT,qDAAc,oBAAoB;AAAA,UAC9B,yBAAyB;AAAA,UACzB;AAAA,QACJ;AACA,qDAAc,UAAU,EAAE,aAAa,SAAS;AAAA,MACpD;AAAA,IACJ;AAAA,IACA,CAAC,YAAY;AAAA,EACjB;AAEA,SACI,4CAAC,oBACG;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,MAAM;AAAA,MACN,QAAQ;AAAA;AAAA,IAER,4CAAC,gBAAK,aAAU,wCACZ;AAAA,MAAC,aAAK;AAAA,MAAL;AAAA,QACG,aAAU;AAAA,QACV,SAAS,2BAA2B;AAAA,UAChC,MAAM;AAAA,QACV,CAAC;AAAA;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAO,gBAAE,SAAS;AAAA;AAAA,MACtB;AAAA,IACJ,GACA;AAAA,MAAC,aAAK;AAAA,MAAL;AAAA,QACG,aAAU;AAAA,QACV,SAAS,2BAA2B;AAAA,UAChC,MAAM;AAAA,QACV,CAAC;AAAA;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAO,gBAAE,WAAW;AAAA;AAAA,MACxB;AAAA,IACJ,GACC,eACG;AAAA,MAAC,aAAK;AAAA,MAAL;AAAA,QACG,aAAU;AAAA,QACV,SAAS;AAAA,UACL;AAAA,YACI,MAAM;AAAA,UACV;AAAA,UACA;AAAA,QACJ;AAAA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAO,gBAAE,MAAM;AAAA;AAAA,MACnB;AAAA,IACJ,CAER;AAAA,EACJ,CACJ;AAER;AAEA,IAAO,iBAAQ;",
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport Menu from '@splunk/react-ui/Menu';\nimport Circle from '@splunk/react-icons/Circle';\nimport BoxUnchecked from '@splunk/react-icons/Square';\nimport Line from '@splunk/react-icons/Line';\nimport Dropdown, {\n    type DropdownPossibleCloseReason,\n} from '@splunk/react-ui/Dropdown';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport AddShapeDropdown from '@splunk/react-icons/ShapesVariety';\nimport type {\n    StructureItemType,\n    VisualizationDefinition,\n} from '@splunk/dashboard-types';\nimport { StyledDropdownButton } from '../components/StyledButton';\nimport useDropdown from '../hooks/useDropdown';\nimport ToolbarItem from '../Item';\nimport PopoverItemButton from '../PopoverItemButton';\nimport type { ToolbarButtonProps } from '../types/common';\nimport { prepareIcon } from '../IconButton';\n\nconst shapesDropdown = prepareIcon({\n    Icon: AddShapeDropdown,\n    screenReaderContent: _('Add shape'),\n    isMenu: true,\n});\n\nconst ButtonToggle = (\n    <StyledDropdownButton\n        appearance=\"subtle\"\n        data-clickable\n        data-test=\"shapes-button\"\n        icon={shapesDropdown}\n    />\n);\n\nconst focusToggleReasons: DropdownPossibleCloseReason[] = [\n    'escapeKey',\n    'tabKey',\n];\n\nconst circleIcon = <Circle />;\nconst uncheckedBoxIcon = <BoxUnchecked />;\nconst lineIcon = <Line />;\n\n/**\n *  Shapes button that has a dropdown menu.\n */\nconst Shapes = ({ dashboardApi, layoutType }: ToolbarButtonProps) => {\n    const supportLine = layoutType === 'absolute';\n\n    const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown({\n        isContentClickClose: true,\n    });\n\n    const handleCreateVizButtonClick = useCallback(\n        (\n            vizToCreate: VisualizationDefinition<Record<string, unknown>>,\n            layoutItemType?: StructureItemType\n        ) => {\n            return () => {\n                dashboardApi?.createVisualization({\n                    visualizationDefinition: vizToCreate,\n                    layoutItemType,\n                });\n                dashboardApi?.openPanel({ activePanel: 'config' });\n            };\n        },\n        [dashboardApi]\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                <Menu data-test=\"shapes-dropdown-children-container\">\n                    <Menu.Item\n                        data-test=\"ellipse-button\"\n                        onClick={handleCreateVizButtonClick({\n                            type: 'splunk.ellipse',\n                        })}\n                    >\n                        <PopoverItemButton\n                            icon={circleIcon}\n                            label={_('Ellipse')}\n                        />\n                    </Menu.Item>\n                    <Menu.Item\n                        data-test=\"rectangle-button\"\n                        onClick={handleCreateVizButtonClick({\n                            type: 'splunk.rectangle',\n                        })}\n                    >\n                        <PopoverItemButton\n                            icon={uncheckedBoxIcon}\n                            label={_('Rectangle')}\n                        />\n                    </Menu.Item>\n                    {supportLine && (\n                        <Menu.Item\n                            data-test=\"line-button\"\n                            onClick={handleCreateVizButtonClick(\n                                {\n                                    type: 'abslayout.line',\n                                },\n                                'line'\n                            )}\n                        >\n                            <PopoverItemButton\n                                icon={lineIcon}\n                                label={_('Line')}\n                            />\n                        </Menu.Item>\n                    )}\n                </Menu>\n            </Dropdown>\n        </ToolbarItem>\n    );\n};\n\nexport default Shapes;\n", "import * as defaultImport from \"react\";\nexport * from \"react\";\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/react-icons/Circle\";\nexport * from \"@splunk/react-icons/Circle\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-icons/Square\";\nexport * from \"@splunk/react-icons/Square\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as defaultImport from \"@splunk/react-icons/Line\";\nexport * from \"@splunk/react-icons/Line\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\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/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/ShapesVariety\";\nexport * from \"@splunk/react-icons/ShapesVariety\";\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 Button from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\n\nexport const StyledDropdownButton = styled(Button)`\n    max-width: '50px';\n`;\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 styled from 'styled-components';\n\nexport default styled.div``;\n", "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 \"@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 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,yBAAc;AACd,IAAO,eAAS,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,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,yBAAc;AACd,IAAO,eAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,6BAAc;AACd,IAAO,mBAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,yBAAc;AACd,IAAO,eAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,kCAAc;AACd,IAAO,wBAAS,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,kBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAsB;;;ACCtB,IAAM,uBAAuB,0BAAO,cAAM;AAAA;AAAA;;;ACuBjD,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;;;ACpEf,IAAO,eAAQ,0BAAO;;;ACEtB,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;;;ACtCf;AAAA;AAAA;AAAA;AAAA,IAAAC,kBAA+B;AAC/B,8BAAc;AACd,IAAO,oBAAS,aAAaA,kBAA8B,0BAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,kBAA+B;AAC/B,wCAAc;AACd,IAAO,8BAAS,aAAaA,kBAA8B,0BAAUA;;;ACOrE,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;;;AjB/BA,IAAM,iBAAiB,YAAY;AAAA,EAC/B,MAAM;AAAA,EACN,yBAAqB,gBAAE,WAAW;AAAA,EAClC,QAAQ;AACZ,CAAC;AAED,IAAM,eACF;AAAA,EAAC;AAAA;AAAA,IACG,YAAW;AAAA,IACX,kBAAc;AAAA,IACd,aAAU;AAAA,IACV,MAAM;AAAA;AACV;AAGJ,IAAM,qBAAoD;AAAA,EACtD;AAAA,EACA;AACJ;AAEA,IAAM,aAAa,4CAAC,oBAAO;AAC3B,IAAM,mBAAmB,4CAAC,oBAAa;AACvC,IAAM,WAAW,4CAAC,kBAAK;AAKvB,IAAM,SAAS,CAAC,EAAE,cAAc,WAAW,MAA0B;AACjE,QAAM,cAAc,eAAe;AAEnC,QAAM,EAAE,oBAAoB,mBAAmB,OAAO,IAAI,oBAAY;AAAA,IAClE,qBAAqB;AAAA,EACzB,CAAC;AAED,QAAM,iCAA6B;AAAA,IAC/B,CACI,aACA,mBACC;AACD,aAAO,MAAM;AACT,qDAAc,oBAAoB;AAAA,UAC9B,yBAAyB;AAAA,UACzB;AAAA,QACJ;AACA,qDAAc,UAAU,EAAE,aAAa,SAAS;AAAA,MACpD;AAAA,IACJ;AAAA,IACA,CAAC,YAAY;AAAA,EACjB;AAEA,SACI,4CAAC,oBACG;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,MAAM;AAAA,MACN,QAAQ;AAAA;AAAA,IAER,4CAAC,gBAAK,aAAU,wCACZ;AAAA,MAAC,aAAK;AAAA,MAAL;AAAA,QACG,aAAU;AAAA,QACV,SAAS,2BAA2B;AAAA,UAChC,MAAM;AAAA,QACV,CAAC;AAAA;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAO,gBAAE,SAAS;AAAA;AAAA,MACtB;AAAA,IACJ,GACA;AAAA,MAAC,aAAK;AAAA,MAAL;AAAA,QACG,aAAU;AAAA,QACV,SAAS,2BAA2B;AAAA,UAChC,MAAM;AAAA,QACV,CAAC;AAAA;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAO,gBAAE,WAAW;AAAA;AAAA,MACxB;AAAA,IACJ,GACC,eACG;AAAA,MAAC,aAAK;AAAA,MAAL;AAAA,QACG,aAAU;AAAA,QACV,SAAS;AAAA,UACL;AAAA,YACI,MAAM;AAAA,UACV;AAAA,UACA;AAAA,QACJ;AAAA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAO,gBAAE,MAAM;AAAA;AAAA,MACnB;AAAA,IACJ,CAER;AAAA,EACJ,CACJ;AAER;AAEA,IAAO,iBAAQ;",
   "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
 }

package/buttons/Source.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/Source.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/buttons/Source.tsx", "esm-externals:react", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/react-icons/WindowChevronsSlash", "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, type ComponentProps } from 'react';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport SourceIcon from '@splunk/react-icons/WindowChevronsSlash';\nimport { useRestoreFocus, useToolbarRef } from '@splunk/dashboard-context';\nimport type { ButtonClickHandler } from '@splunk/react-ui/Button';\nimport IconButton, { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nexport interface SourceProps extends ToolbarButtonProps {\n    onClick?: ComponentProps<typeof IconButton>['onClick'];\n    disabled?: boolean;\n}\n\nconst icon = prepareIcon({\n    Icon: SourceIcon,\n    screenReaderContent: _('Source code'),\n});\n\n/**\n * Button that toggles source mode\n */\nconst Source = ({ disabled = false, onClick }: SourceProps) => {\n    const sourceButtonRef = useToolbarRef('source');\n    const setReturnPoint = useRestoreFocus(sourceButtonRef);\n\n    const onSourceClick = useCallback<ButtonClickHandler>(\n        (event, data) => {\n            if (onClick) {\n                onClick(event, data);\n                setReturnPoint();\n            }\n        },\n        [onClick, setReturnPoint]\n    );\n\n    return (\n        <IconButton\n            testLabel=\"source-button\"\n            onClick={onSourceClick}\n            disabled={disabled}\n            icon={icon}\n            buttonRef={sourceButtonRef}\n        />\n    );\n};\n\nexport default Source;\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/WindowChevronsSlash\";\nexport * from \"@splunk/react-icons/WindowChevronsSlash\";\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, type ComponentProps } from 'react';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport SourceIcon from '@splunk/react-icons/WindowChevronsSlash';\nimport { useRestoreFocus, useToolbarRef } from '@splunk/dashboard-context';\nimport type { ButtonClickHandler } from '@splunk/react-ui/Button';\nimport IconButton, { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nexport interface SourceProps extends ToolbarButtonProps {\n    onClick?: ComponentProps<typeof IconButton>['onClick'];\n    disabled?: boolean;\n}\n\nconst icon = prepareIcon({\n    Icon: SourceIcon,\n    screenReaderContent: _('Source code'),\n});\n\n/**\n * Button that toggles source mode\n */\nconst Source = ({ disabled = false, onClick }: SourceProps) => {\n    const sourceButtonRef = useToolbarRef('source');\n    const setReturnPoint = useRestoreFocus(sourceButtonRef);\n\n    const onSourceClick = useCallback<ButtonClickHandler>(\n        (event, data) => {\n            if (onClick) {\n                onClick(event, data);\n                setReturnPoint();\n            }\n        },\n        [onClick, setReturnPoint]\n    );\n\n    return (\n        <IconButton\n            testLabel=\"source-button\"\n            onClick={onSourceClick}\n            disabled={disabled}\n            icon={icon}\n            buttonRef={sourceButtonRef}\n        />\n    );\n};\n\nexport default Source;\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/WindowChevronsSlash\";\nexport * from \"@splunk/react-icons/WindowChevronsSlash\";\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", "icon"]
 }

package/buttons/Undo.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``;

package/buttons/Undo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/buttons/Undo.tsx", "esm-externals:react", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/react-icons/ArrowBowLeft", "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, useEffect, useState } from 'react';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport UndoIcon from '@splunk/react-icons/ArrowBowLeft';\nimport IconButton, { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst icon = prepareIcon({\n    Icon: UndoIcon,\n    screenReaderContent: _('Undo'),\n});\n\nconst Undo = ({ dashboardApi }: ToolbarButtonProps) => {\n    // TODO: replace when history management is done in redux\n    // mode changes can cause the button to mount while there is an undo state\n    const [canUndo, setCanUndo] = useState(\n        () => dashboardApi?.canUndo() ?? false\n    );\n\n    const onDefinitionChange = useCallback(() => {\n        setCanUndo(dashboardApi?.canUndo() ?? false);\n    }, [dashboardApi]);\n\n    useEffect(() => {\n        if (!dashboardApi?.historyManager) {\n            return () => undefined;\n        }\n        // Dirty hack to get the history manager.\n        return dashboardApi.historyManager.subscribe({\n            onAdd: onDefinitionChange,\n            onUndo: onDefinitionChange,\n            onRedo: onDefinitionChange,\n        });\n    }, [dashboardApi, onDefinitionChange]);\n\n    const handleClick = useCallback(() => {\n        if (!dashboardApi) {\n            return;\n        }\n\n        dashboardApi.undo({ source: 'toolbar' });\n    }, [dashboardApi]);\n\n    return (\n        <IconButton\n            testLabel=\"undo-button\"\n            onClick={handleClick}\n            disabled={!canUndo}\n            icon={icon}\n        />\n    );\n};\n\nexport default Undo;\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/ArrowBowLeft\";\nexport * from \"@splunk/react-icons/ArrowBowLeft\";\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, useEffect, useState } from 'react';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport UndoIcon from '@splunk/react-icons/ArrowBowLeft';\nimport IconButton, { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst icon = prepareIcon({\n    Icon: UndoIcon,\n    screenReaderContent: _('Undo'),\n});\n\nconst Undo = ({ dashboardApi }: ToolbarButtonProps) => {\n    // TODO: replace when history management is done in redux\n    // mode changes can cause the button to mount while there is an undo state\n    const [canUndo, setCanUndo] = useState(\n        () => dashboardApi?.canUndo() ?? false\n    );\n\n    const onDefinitionChange = useCallback(() => {\n        setCanUndo(dashboardApi?.canUndo() ?? false);\n    }, [dashboardApi]);\n\n    useEffect(() => {\n        if (!dashboardApi?.historyManager) {\n            return () => undefined;\n        }\n        // Dirty hack to get the history manager.\n        return dashboardApi.historyManager.subscribe({\n            onAdd: onDefinitionChange,\n            onUndo: onDefinitionChange,\n            onRedo: onDefinitionChange,\n        });\n    }, [dashboardApi, onDefinitionChange]);\n\n    const handleClick = useCallback(() => {\n        if (!dashboardApi) {\n            return;\n        }\n\n        dashboardApi.undo({ source: 'toolbar' });\n    }, [dashboardApi]);\n\n    return (\n        <IconButton\n            testLabel=\"undo-button\"\n            onClick={handleClick}\n            disabled={!canUndo}\n            icon={icon}\n        />\n    );\n};\n\nexport default Undo;\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/ArrowBowLeft\";\nexport * from \"@splunk/react-icons/ArrowBowLeft\";\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", "icon"]
 }

package/buttons/index.js

@@ -179,7 +179,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``;
@@ -645,6 +645,9 @@ var Checkmark_default = "default" in defaultImport19 ? defaultImport19.default :
 var menuStyle = {
   minWidth: "150px"
 };
+var CheckmarkIcon = styled_components_default(Checkmark_default)`
+    color: ${themes_exports.variables.contentColorActive};
+`;
 var CheckmarkPlaceholder = styled_components_default.span`
     display: inline-block;
     width: 16px;
@@ -658,11 +661,23 @@ var Display = ({
   const hasGlobalInputs = ((_a = globalInputs == null ? void 0 : globalInputs.length) != null ? _a : 0) > 0;
   const areInputsCollapsed = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectAreGlobalItemsCollapsed);
   const showInputs = !areInputsCollapsed;
+  const description = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectDescription);
+  const { showTitleAndDescription = true } = (0, dashboard_state_exports.useSelector)(
+    dashboard_state_exports.selectLayoutGlobalOptions
+  );
+  const hasDescription = !!description && showTitleAndDescription;
+  const isDescriptionCollapsed = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectIsDescriptionCollapsed);
+  const showDescription = !isDescriptionCollapsed;
   const handleInputsToggle = (0, react_exports.useCallback)(() => {
     dashboardApi == null ? void 0 : dashboardApi.setAreGlobalInputsCollapsed({
       collapsed: !areInputsCollapsed
     });
   }, [dashboardApi, areInputsCollapsed]);
+  const handleDescriptionToggle = (0, react_exports.useCallback)(() => {
+    dashboardApi == null ? void 0 : dashboardApi.setIsDescriptionCollapsed({
+      collapsed: !isDescriptionCollapsed
+    });
+  }, [dashboardApi, isDescriptionCollapsed]);
   const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
     isContentClickClose: true
   });
@@ -680,11 +695,28 @@ var Display = ({
     ),
     [appearance]
   );
-  const checkmarkIcon = (0, react_exports.useMemo)(() => {
-    return showInputs ? /* @__PURE__ */ react_default.createElement(Checkmark_default, null) : /* @__PURE__ */ react_default.createElement(CheckmarkPlaceholder, null);
+  const inputsCheckmarkIcon = (0, react_exports.useMemo)(() => {
+    return showInputs ? /* @__PURE__ */ react_default.createElement(CheckmarkIcon, null) : /* @__PURE__ */ react_default.createElement(CheckmarkPlaceholder, null);
   }, [showInputs]);
+  const descriptionCheckmarkIcon = (0, react_exports.useMemo)(() => {
+    return showDescription ? /* @__PURE__ */ react_default.createElement(CheckmarkIcon, null) : /* @__PURE__ */ react_default.createElement(CheckmarkPlaceholder, null);
+  }, [showDescription]);
   const dropdownMenuChildren = (0, react_exports.useMemo)(() => {
     const items = [];
+    if (hasDescription) {
+      items.push(
+        /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            key: "description-item",
+            "data-test": "description-menu-item",
+            onClick: handleDescriptionToggle,
+            startAdornment: descriptionCheckmarkIcon
+          },
+          (0, i18n_exports._)("Dashboard description")
+        )
+      );
+    }
     if (hasGlobalInputs) {
       items.push(
         /* @__PURE__ */ react_default.createElement(
@@ -693,14 +725,21 @@ var Display = ({
             key: "inputs-item",
             "data-test": "inputs-menu-item",
             onClick: handleInputsToggle,
-            startAdornment: checkmarkIcon
+            startAdornment: inputsCheckmarkIcon
           },
           (0, i18n_exports._)("Inputs")
         )
       );
     }
     return items;
-  }, [hasGlobalInputs, handleInputsToggle, checkmarkIcon]);
+  }, [
+    hasDescription,
+    hasGlobalInputs,
+    handleDescriptionToggle,
+    handleInputsToggle,
+    descriptionCheckmarkIcon,
+    inputsCheckmarkIcon
+  ]);
   if (dropdownMenuChildren.length === 0) {
     return null;
   }
@@ -766,6 +805,10 @@ var EmptyVisualization_default = EmptyVisualization;
 
 // src/buttons/ExportDashboardButton.tsx
 var downloadIcon = /* @__PURE__ */ react_default.createElement(ArrowBroadUnderbarDown_default, null);
+var StyledButton = styled_components_default(Button_default)`
+    flex-shrink: 0;
+    flex-grow: 0;
+`;
 var ExportDashboardButton = ({
   appearance = "secondary",
   scale = 1
@@ -779,7 +822,7 @@ var ExportDashboardButton = ({
     setOpen(false);
   }, []);
   return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(
-    Button_default,
+    StyledButton,
     {
       elementRef: buttonRef,
       icon: downloadIcon,
@@ -811,6 +854,24 @@ var defaultImport21 = __toESM(require("@splunk/react-icons/ChevronsOut"));
 __reExport(ChevronsOut_exports, require("@splunk/react-icons/ChevronsOut"));
 var ChevronsOut_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
 
+// src/hooks/useToolbarButtonClick.ts
+var useToolbarButtonClick = (event, onClick) => {
+  const dispatch = (0, dashboard_state_exports.useDispatch)();
+  return (0, react_exports.useCallback)(
+    (...args) => {
+      if (dispatch && event) {
+        dispatch(
+          (0, dashboard_state_exports.toolbarButtonClicked)({
+            event
+          })
+        );
+      }
+      onClick == null ? void 0 : onClick(...args);
+    },
+    [dispatch, event, onClick]
+  );
+};
+
 // src/buttons/Fullscreen.tsx
 var icon3 = prepareIcon({
   Icon: ChevronsOut_default,
@@ -818,9 +879,10 @@ var icon3 = prepareIcon({
 });
 var FullScreen = ({ dashboardApi }) => {
   const isFullscreen = !!(0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectFullscreenElement);
-  const handleClick = (0, react_exports.useCallback)(() => {
-    dashboardApi == null ? void 0 : dashboardApi.enterFullscreen();
-  }, [dashboardApi]);
+  const enterFullscreen = (0, react_exports.useCallback)(() => __async(null, null, function* () {
+    yield dashboardApi == null ? void 0 : dashboardApi.enterFullscreen();
+  }), [dashboardApi]);
+  const handleClick = useToolbarButtonClick("fullscreen", enterFullscreen);
   return /* @__PURE__ */ react_default.createElement(
     IconButton_default,
     {
@@ -1020,7 +1082,7 @@ var HelpButton = ({ helpLinks = [] }) => {
     }
     return helpLinks.map((link) => {
       const { label = "", description = "", url } = link;
-      const key = label.replace(/\s/g, "");
+      const key = label.replaceAll(/\s/g, "");
       return /* @__PURE__ */ react_default.createElement(
         Menu_default.Item,
         {
@@ -1890,13 +1952,15 @@ var StyledNumber = styled_components_default(Number_default)`
 var StyledEndAdornment = styled_components_default.span`
     color: ${themes_exports.variables.contentColorActive};
 `;
+var percentAdornment = /* @__PURE__ */ react_default.createElement(StyledEndAdornment, null, "%");
 var ZoomNumber = ({
   currentScale,
   onScaleChange
 }) => {
   const onValueChange = (0, react_exports.useCallback)(
-    (e, value = 100) => {
-      onScaleChange(value)();
+    (_e, value = 100) => {
+      const v = typeof value === "string" ? Number.parseInt(value, 10) : value;
+      onScaleChange(v)();
     },
     [onScaleChange]
   );
@@ -1916,7 +1980,7 @@ var ZoomNumber = ({
       min: 1,
       max: 1e4,
       roundTo: 0,
-      endAdornment: /* @__PURE__ */ react_default.createElement(StyledEndAdornment, null, "%"),
+      endAdornment: percentAdornment,
       hideStepButtons: true,
       "data-test": "zoom-number",
       append: true