@splunk/dashboard-toolbar 29.5.0 → 29.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CollapsibleToolbar.js +9 -0
- package/CollapsibleToolbar.js.map +4 -4
- package/IconButton.js +16 -4
- package/IconButton.js.map +4 -4
- package/buttons/Charts.js +26 -4
- package/buttons/Charts.js.map +4 -4
- package/buttons/Config.js +19 -7
- package/buttons/Config.js.map +4 -4
- package/buttons/ContentExport.js +19 -7
- package/buttons/ContentExport.js.map +4 -4
- package/buttons/Data.js +19 -7
- package/buttons/Data.js.map +4 -4
- package/buttons/EmptyVisualization.js +19 -7
- package/buttons/EmptyVisualization.js.map +4 -4
- package/buttons/Fullscreen.js +19 -7
- package/buttons/Fullscreen.js.map +4 -4
- package/buttons/HelpButton.js +25 -3
- package/buttons/HelpButton.js.map +4 -4
- package/buttons/IconGallery.js +29 -7
- package/buttons/IconGallery.js.map +4 -4
- package/buttons/Image.js +19 -7
- package/buttons/Image.js.map +4 -4
- package/buttons/ImageGallery.js +29 -7
- package/buttons/ImageGallery.js.map +4 -4
- package/buttons/Inputs.js +28 -9
- package/buttons/Inputs.js.map +4 -4
- package/buttons/Markdown.js +19 -7
- package/buttons/Markdown.js.map +4 -4
- package/buttons/Redo.js +19 -7
- package/buttons/Redo.js.map +4 -4
- package/buttons/Shapes.js +31 -9
- package/buttons/Shapes.js.map +4 -4
- package/buttons/Source.js +19 -7
- package/buttons/Source.js.map +4 -4
- package/buttons/Undo.js +19 -7
- package/buttons/Undo.js.map +4 -4
- package/buttons/index.js +66 -61
- package/buttons/index.js.map +2 -2
- package/groups/ControlGroup.js +83 -33
- package/groups/ControlGroup.js.map +3 -3
- package/groups/EditingGroup.js +73 -30
- package/groups/EditingGroup.js.map +3 -3
- package/groups/EditorGroup.js +83 -33
- package/groups/EditorGroup.js.map +3 -3
- package/groups/EditorsControlGroup.js +93 -48
- package/groups/EditorsControlGroup.js.map +3 -3
- package/groups/HistoryGroup.js +85 -34
- package/groups/HistoryGroup.js.map +3 -3
- package/groups/SidebarControlGroup.js +91 -47
- package/groups/SidebarControlGroup.js.map +3 -3
- package/groups/VisualizationGroup.js +68 -45
- package/groups/VisualizationGroup.js.map +3 -3
- package/groups/index.js +86 -64
- package/groups/index.js.map +3 -3
- package/index.js +81 -76
- package/index.js.map +4 -4
- package/module/CollapsibleToolbar.js +2 -2
- package/module/IconButton.js +1 -1
- package/module/buttons/Charts.js +3 -3
- package/module/buttons/Config.js +2 -2
- package/module/buttons/ContentExport.js +2 -2
- package/module/buttons/Data.js +2 -2
- package/module/buttons/EmptyVisualization.js +2 -2
- package/module/buttons/Fullscreen.js +2 -2
- package/module/buttons/HelpButton.js +3 -3
- package/module/buttons/IconGallery.js +3 -3
- package/module/buttons/Image.js +2 -2
- package/module/buttons/ImageGallery.js +3 -3
- package/module/buttons/Inputs.js +3 -3
- package/module/buttons/Markdown.js +2 -2
- package/module/buttons/Redo.js +2 -2
- package/module/buttons/Shapes.js +3 -3
- package/module/buttons/Source.js +2 -2
- package/module/buttons/Undo.js +2 -2
- package/module/buttons/index.js +19 -19
- package/module/chunks/{chunk-PFKZCA73.js → chunk-5IFDFRGD.js} +2 -2
- package/module/chunks/{chunk-LEEGJTZT.js → chunk-6RWX6HA7.js} +5 -5
- package/module/chunks/chunk-6RWX6HA7.js.map +7 -0
- package/module/chunks/chunk-BDFUA6X7.js +44 -0
- package/module/chunks/chunk-BDFUA6X7.js.map +7 -0
- package/module/chunks/{chunk-C7TXRFKI.js → chunk-DM27U6AI.js} +5 -5
- package/module/chunks/chunk-DM27U6AI.js.map +7 -0
- package/module/chunks/{chunk-DQPRUHAE.js → chunk-DQZGTQ2Z.js} +5 -5
- package/module/chunks/chunk-DQZGTQ2Z.js.map +7 -0
- package/module/chunks/{chunk-WLLGLYOO.js → chunk-E3IBH4RN.js} +2 -2
- package/module/chunks/{chunk-COV2OGVE.js → chunk-E7EUH33R.js} +5 -5
- package/module/chunks/{chunk-IWFH2PBS.js → chunk-EUFLSUPO.js} +5 -5
- package/module/chunks/chunk-EUFLSUPO.js.map +7 -0
- package/module/chunks/{chunk-YDVHOHRE.js → chunk-FMSKWHRK.js} +8 -8
- package/module/chunks/{chunk-NNGZB36V.js → chunk-HMQY5XLG.js} +5 -5
- package/module/chunks/chunk-HMQY5XLG.js.map +7 -0
- package/module/chunks/{chunk-PFHSMP6M.js → chunk-KDWTCNVM.js} +5 -5
- package/module/chunks/chunk-KDWTCNVM.js.map +7 -0
- package/module/chunks/{chunk-GD75KGSO.js → chunk-KMWIB6DC.js} +3 -3
- package/module/chunks/{chunk-XIT2UXG2.js → chunk-P5YTSVEV.js} +5 -5
- package/module/chunks/chunk-P5YTSVEV.js.map +7 -0
- package/module/chunks/{chunk-CMTNN2GG.js → chunk-PUNHFOXB.js} +2 -2
- package/module/chunks/{chunk-CS7TUOVQ.js → chunk-QH53L2XQ.js} +4 -4
- package/module/chunks/{chunk-S6LWLEQ4.js → chunk-RS2VRN2X.js} +5 -5
- package/module/chunks/chunk-RS2VRN2X.js.map +7 -0
- package/module/chunks/{chunk-FK3PXQBK.js → chunk-RZRB3MPG.js} +20 -36
- package/module/chunks/chunk-RZRB3MPG.js.map +7 -0
- package/module/chunks/{chunk-OC4QIR2D.js → chunk-RZWTF3BK.js} +18 -3
- package/module/chunks/chunk-RZWTF3BK.js.map +7 -0
- package/module/chunks/{chunk-5DYPICGQ.js → chunk-SJNT4MK5.js} +5 -5
- package/module/chunks/chunk-SJNT4MK5.js.map +7 -0
- package/module/chunks/{chunk-EZS4433X.js → chunk-TQIO5WSS.js} +5 -5
- package/module/chunks/{chunk-EZS4433X.js.map → chunk-TQIO5WSS.js.map} +2 -2
- package/module/chunks/{chunk-JW4TMLMZ.js → chunk-U5YCUIDK.js} +5 -5
- package/module/chunks/chunk-U5YCUIDK.js.map +7 -0
- package/module/chunks/{chunk-NGEW5KQQ.js → chunk-UNYHHA4F.js} +5 -5
- package/module/chunks/{chunk-NGEW5KQQ.js.map → chunk-UNYHHA4F.js.map} +2 -2
- package/module/chunks/{chunk-GPLJNXKE.js → chunk-UUMIWWJE.js} +5 -5
- package/module/chunks/chunk-UUMIWWJE.js.map +7 -0
- package/module/chunks/{chunk-F3BPX66Z.js → chunk-VGHYIDZA.js} +2 -2
- package/module/chunks/{chunk-53UCFOI6.js → chunk-YH3LWJKQ.js} +6 -6
- package/module/chunks/chunk-YH3LWJKQ.js.map +7 -0
- package/module/chunks/{chunk-J7M7QRC7.js → chunk-YMIK47DX.js} +5 -5
- package/module/chunks/chunk-YMIK47DX.js.map +7 -0
- package/module/chunks/{chunk-NSCDFVBR.js → chunk-ZEITW5IL.js} +5 -5
- package/module/chunks/chunk-ZEITW5IL.js.map +7 -0
- package/module/groups/ControlGroup.js +20 -20
- package/module/groups/EditingGroup.js +20 -20
- package/module/groups/EditorGroup.js +20 -20
- package/module/groups/EditorsControlGroup.js +20 -20
- package/module/groups/HistoryGroup.js +20 -20
- package/module/groups/SidebarControlGroup.js +20 -20
- package/module/groups/VisualizationGroup.js +20 -20
- package/module/groups/index.js +26 -26
- package/module/index.js +27 -27
- package/package.json +15 -15
- package/types/IconButton.d.ts +2 -1
- package/types/IconButton.d.ts.map +1 -1
- package/types/buttons/Config.d.ts.map +1 -1
- package/types/buttons/ContentExport.d.ts.map +1 -1
- package/types/buttons/Data.d.ts.map +1 -1
- package/types/buttons/EmptyVisualization.d.ts.map +1 -1
- package/types/buttons/Fullscreen.d.ts.map +1 -1
- package/types/buttons/IconGallery.d.ts.map +1 -1
- package/types/buttons/Image.d.ts.map +1 -1
- package/types/buttons/Markdown.d.ts.map +1 -1
- package/types/buttons/Redo.d.ts.map +1 -1
- package/types/buttons/Source.d.ts.map +1 -1
- package/types/buttons/Undo.d.ts.map +1 -1
- package/types/buttons/tokenManager/TokenManager.d.ts.map +1 -1
- package/types/components/StyledButton.d.ts +10 -1
- package/types/components/StyledButton.d.ts.map +1 -1
- package/module/chunks/chunk-53UCFOI6.js.map +0 -7
- package/module/chunks/chunk-5DYPICGQ.js.map +0 -7
- package/module/chunks/chunk-C7TXRFKI.js.map +0 -7
- package/module/chunks/chunk-DQPRUHAE.js.map +0 -7
- package/module/chunks/chunk-EZJSIK72.js +0 -21
- package/module/chunks/chunk-EZJSIK72.js.map +0 -7
- package/module/chunks/chunk-FK3PXQBK.js.map +0 -7
- package/module/chunks/chunk-GPLJNXKE.js.map +0 -7
- package/module/chunks/chunk-IWFH2PBS.js.map +0 -7
- package/module/chunks/chunk-J7M7QRC7.js.map +0 -7
- package/module/chunks/chunk-JW4TMLMZ.js.map +0 -7
- package/module/chunks/chunk-LEEGJTZT.js.map +0 -7
- package/module/chunks/chunk-NNGZB36V.js.map +0 -7
- package/module/chunks/chunk-NSCDFVBR.js.map +0 -7
- package/module/chunks/chunk-OC4QIR2D.js.map +0 -7
- package/module/chunks/chunk-PFHSMP6M.js.map +0 -7
- package/module/chunks/chunk-S6LWLEQ4.js.map +0 -7
- package/module/chunks/chunk-XIT2UXG2.js.map +0 -7
- /package/module/chunks/{chunk-PFKZCA73.js.map → chunk-5IFDFRGD.js.map} +0 -0
- /package/module/chunks/{chunk-WLLGLYOO.js.map → chunk-E3IBH4RN.js.map} +0 -0
- /package/module/chunks/{chunk-COV2OGVE.js.map → chunk-E7EUH33R.js.map} +0 -0
- /package/module/chunks/{chunk-YDVHOHRE.js.map → chunk-FMSKWHRK.js.map} +0 -0
- /package/module/chunks/{chunk-GD75KGSO.js.map → chunk-KMWIB6DC.js.map} +0 -0
- /package/module/chunks/{chunk-CMTNN2GG.js.map → chunk-PUNHFOXB.js.map} +0 -0
- /package/module/chunks/{chunk-CS7TUOVQ.js.map → chunk-QH53L2XQ.js.map} +0 -0
- /package/module/chunks/{chunk-F3BPX66Z.js.map → chunk-VGHYIDZA.js.map} +0 -0
package/CollapsibleToolbar.js
CHANGED
|
@@ -146,6 +146,15 @@ var defaultImport12 = __toESM(require("@splunk/react-icons/CaretDown"));
|
|
|
146
146
|
__reExport(CaretDown_exports, require("@splunk/react-icons/CaretDown"));
|
|
147
147
|
var CaretDown_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
|
|
148
148
|
|
|
149
|
+
// esm-externals:@splunk/react-ui/Tooltip
|
|
150
|
+
var Tooltip_exports = {};
|
|
151
|
+
__export(Tooltip_exports, {
|
|
152
|
+
default: () => Tooltip_default
|
|
153
|
+
});
|
|
154
|
+
var defaultImport13 = __toESM(require("@splunk/react-ui/Tooltip"));
|
|
155
|
+
__reExport(Tooltip_exports, require("@splunk/react-ui/Tooltip"));
|
|
156
|
+
var Tooltip_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
|
|
157
|
+
|
|
149
158
|
// src/Item.tsx
|
|
150
159
|
var Item_default = styled_components_default.div``;
|
|
151
160
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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"],
|
|
4
|
-
"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"],
|
|
5
|
-
"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,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAsB;;;ACF7B;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,mCAAc;AACd,IAAO,yBAAS,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,iCAAc;AACd,IAAO,uBAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,gCAAc;AACd,IAAO,sBAAS,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,kBAA+B;AAC/B,oCAAc;AACd,IAAO,0BAAS,aAAaA,kBAA8B,0BAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,kBAA+B;AAC/B,wCAAc;AACd,IAAO,8BAAS,aAAaA,kBAA8B,0BAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,kBAA+B;AAC/B,8BAAc;AACd,IAAO,oBAAS,aAAaA,kBAA8B,0BAAUA;;;ACArE,IAAO,eAAQ,0BAAO;;;
|
|
6
|
-
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
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", "esm-externals:@splunk/react-ui/Tooltip", "src/Item.tsx", "src/IconButton.tsx"],
|
|
4
|
+
"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 * as defaultImport from \"@splunk/react-ui/Tooltip\";\nexport * from \"@splunk/react-ui/Tooltip\";\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 Tooltip from '@splunk/react-ui/Tooltip';\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 tooltipContent?: 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 tooltipContent,\n testLabel,\n ...rest\n}: IconButtonProps): JSX.Element => {\n const button = (\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 );\n\n return (\n <ToolbarItem {...rest}>\n {tooltipContent ? (\n <Tooltip contentRelationship=\"label\" content={tooltipContent}>\n {button}\n </Tooltip>\n ) : (\n button\n )}\n </ToolbarItem>\n );\n};\n\nexport default IconButton;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/IconButton.js
CHANGED
|
@@ -103,14 +103,23 @@ var defaultImport4 = __toESM(require("@splunk/react-ui/Button"));
|
|
|
103
103
|
__reExport(Button_exports, require("@splunk/react-ui/Button"));
|
|
104
104
|
var Button_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
|
|
105
105
|
|
|
106
|
+
// esm-externals:@splunk/react-ui/Tooltip
|
|
107
|
+
var Tooltip_exports = {};
|
|
108
|
+
__export(Tooltip_exports, {
|
|
109
|
+
default: () => Tooltip_default
|
|
110
|
+
});
|
|
111
|
+
var defaultImport5 = __toESM(require("@splunk/react-ui/Tooltip"));
|
|
112
|
+
__reExport(Tooltip_exports, require("@splunk/react-ui/Tooltip"));
|
|
113
|
+
var Tooltip_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
|
|
114
|
+
|
|
106
115
|
// esm-externals:styled-components
|
|
107
116
|
var styled_components_exports = {};
|
|
108
117
|
__export(styled_components_exports, {
|
|
109
118
|
default: () => styled_components_default
|
|
110
119
|
});
|
|
111
|
-
var
|
|
120
|
+
var defaultImport6 = __toESM(require("styled-components"));
|
|
112
121
|
__reExport(styled_components_exports, require("styled-components"));
|
|
113
|
-
var styled_components_default =
|
|
122
|
+
var styled_components_default = defaultImport6.default;
|
|
114
123
|
|
|
115
124
|
// src/Item.tsx
|
|
116
125
|
var Item_default = styled_components_default.div``;
|
|
@@ -141,6 +150,7 @@ var IconButton = (_a) => {
|
|
|
141
150
|
disabled = false,
|
|
142
151
|
onClick,
|
|
143
152
|
label,
|
|
153
|
+
tooltipContent,
|
|
144
154
|
testLabel
|
|
145
155
|
} = _b, rest = __objRest(_b, [
|
|
146
156
|
"icon",
|
|
@@ -148,9 +158,10 @@ var IconButton = (_a) => {
|
|
|
148
158
|
"disabled",
|
|
149
159
|
"onClick",
|
|
150
160
|
"label",
|
|
161
|
+
"tooltipContent",
|
|
151
162
|
"testLabel"
|
|
152
163
|
]);
|
|
153
|
-
|
|
164
|
+
const button = /* @__PURE__ */ react_default.createElement(
|
|
154
165
|
Button_default,
|
|
155
166
|
{
|
|
156
167
|
elementRef: buttonRef,
|
|
@@ -162,7 +173,8 @@ var IconButton = (_a) => {
|
|
|
162
173
|
"data-test": testLabel,
|
|
163
174
|
"data-clickable": true
|
|
164
175
|
}
|
|
165
|
-
)
|
|
176
|
+
);
|
|
177
|
+
return /* @__PURE__ */ react_default.createElement(Item_default, __spreadValues({}, rest), tooltipContent ? /* @__PURE__ */ react_default.createElement(Tooltip_default, { contentRelationship: "label", content: tooltipContent }, button) : button);
|
|
166
178
|
};
|
|
167
179
|
var IconButton_default = IconButton;
|
|
168
180
|
//# sourceMappingURL=IconButton.js.map
|
package/IconButton.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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"],
|
|
4
|
-
"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
|
|
5
|
-
"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;;;
|
|
6
|
-
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
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:@splunk/react-ui/Tooltip", "esm-externals:styled-components", "src/Item.tsx"],
|
|
4
|
+
"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 Tooltip from '@splunk/react-ui/Tooltip';\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 tooltipContent?: 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 tooltipContent,\n testLabel,\n ...rest\n}: IconButtonProps): JSX.Element => {\n const button = (\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 );\n\n return (\n <ToolbarItem {...rest}>\n {tooltipContent ? (\n <Tooltip contentRelationship=\"label\" content={tooltipContent}>\n {button}\n </Tooltip>\n ) : (\n button\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 \"@splunk/react-ui/Tooltip\";\nexport * from \"@splunk/react-ui/Tooltip\";\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"],
|
|
5
|
+
"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,4BAAc;AACd,IAAO,kBAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAsB;;;ACA7B,IAAO,eAAQ,0BAAO;;;APQtB,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,EAtCb,IAmC4B,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;AAYA,IAAM,aAAa,CAAC,OASgB;AAThB,eAChB;AAAA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAxEJ,IAiEoB,IAQb,iBARa,IAQb;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,SACF;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;AAGJ,SACI,4CAAC,iCAAgB,OACZ,iBACG,4CAAC,mBAAQ,qBAAoB,SAAQ,SAAS,kBACzC,MACL,IAEA,MAER;AAER;AAEA,IAAO,qBAAQ;",
|
|
6
|
+
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/buttons/Charts.js
CHANGED
|
@@ -4,7 +4,9 @@ in part without a valid written license from Splunk Inc. is PROHIBITED. */
|
|
|
4
4
|
"use strict";
|
|
5
5
|
var __create = Object.create;
|
|
6
6
|
var __defProp = Object.defineProperty;
|
|
7
|
+
var __defProps = Object.defineProperties;
|
|
7
8
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
9
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
8
10
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
9
11
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
10
12
|
var __getProtoOf = Object.getPrototypeOf;
|
|
@@ -22,6 +24,7 @@ var __spreadValues = (a, b) => {
|
|
|
22
24
|
}
|
|
23
25
|
return a;
|
|
24
26
|
};
|
|
27
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
28
|
var __objRest = (source, exclude) => {
|
|
26
29
|
var target = {};
|
|
27
30
|
for (var prop in source)
|
|
@@ -222,6 +225,15 @@ var defaultImport13 = __toESM(require("@splunk/react-ui/Button"));
|
|
|
222
225
|
__reExport(Button_exports, require("@splunk/react-ui/Button"));
|
|
223
226
|
var Button_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
|
|
224
227
|
|
|
228
|
+
// esm-externals:@splunk/react-ui/Tooltip
|
|
229
|
+
var Tooltip_exports = {};
|
|
230
|
+
__export(Tooltip_exports, {
|
|
231
|
+
default: () => Tooltip_default
|
|
232
|
+
});
|
|
233
|
+
var defaultImport14 = __toESM(require("@splunk/react-ui/Tooltip"));
|
|
234
|
+
__reExport(Tooltip_exports, require("@splunk/react-ui/Tooltip"));
|
|
235
|
+
var Tooltip_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
|
|
236
|
+
|
|
225
237
|
// src/IconButton.tsx
|
|
226
238
|
var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
227
239
|
margin-left: -5px;
|
|
@@ -243,9 +255,19 @@ var prepareIcon = (_a) => {
|
|
|
243
255
|
};
|
|
244
256
|
|
|
245
257
|
// src/components/StyledButton.tsx
|
|
246
|
-
var
|
|
258
|
+
var BaseDropdownButton = styled_components_default(Button_default)`
|
|
247
259
|
max-width: '50px';
|
|
248
260
|
`;
|
|
261
|
+
var StyledDropdownButton = react_default.forwardRef((_a, ref) => {
|
|
262
|
+
var _b = _a, { tooltipContent } = _b, props = __objRest(_b, ["tooltipContent"]);
|
|
263
|
+
const button = /* @__PURE__ */ react_default.createElement(
|
|
264
|
+
BaseDropdownButton,
|
|
265
|
+
__spreadProps(__spreadValues({}, props), {
|
|
266
|
+
elementRef: ref
|
|
267
|
+
})
|
|
268
|
+
);
|
|
269
|
+
return tooltipContent ? /* @__PURE__ */ react_default.createElement(Tooltip_default, { contentRelationship: "label", content: tooltipContent }, button) : button;
|
|
270
|
+
});
|
|
249
271
|
|
|
250
272
|
// src/buttons/Charts.tsx
|
|
251
273
|
var ScrollableMenu = styled_components_default(Menu_default).attrs(
|
|
@@ -259,8 +281,7 @@ var ScrollableMenu = styled_components_default(Menu_default).attrs(
|
|
|
259
281
|
`;
|
|
260
282
|
var chartsDropdown = prepareIcon({
|
|
261
283
|
Icon: ChartColumn_default,
|
|
262
|
-
isMenu: true
|
|
263
|
-
screenReaderContent: (0, i18n_exports._)("Add chart")
|
|
284
|
+
isMenu: true
|
|
264
285
|
});
|
|
265
286
|
var ButtonToggle = /* @__PURE__ */ react_default.createElement(
|
|
266
287
|
StyledDropdownButton,
|
|
@@ -268,7 +289,8 @@ var ButtonToggle = /* @__PURE__ */ react_default.createElement(
|
|
|
268
289
|
"data-test": "charts-button",
|
|
269
290
|
"data-clickable": true,
|
|
270
291
|
appearance: "subtle",
|
|
271
|
-
icon: chartsDropdown
|
|
292
|
+
icon: chartsDropdown,
|
|
293
|
+
tooltipContent: (0, i18n_exports._)("Add chart")
|
|
272
294
|
}
|
|
273
295
|
);
|
|
274
296
|
var focusToggleReasons = [
|
package/buttons/Charts.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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"],
|
|
4
|
-
"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"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
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", "esm-externals:@splunk/react-ui/Tooltip", "../src/IconButton.tsx", "../src/components/StyledButton.tsx"],
|
|
4
|
+
"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});\n\nconst ButtonToggle = (\n <StyledDropdownButton\n data-test=\"charts-button\"\n data-clickable\n appearance=\"subtle\"\n icon={chartsDropdown}\n tooltipContent={_('Add chart')}\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 * as defaultImport from \"@splunk/react-ui/Tooltip\";\nexport * from \"@splunk/react-ui/Tooltip\";\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 Tooltip from '@splunk/react-ui/Tooltip';\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 tooltipContent?: 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 tooltipContent,\n testLabel,\n ...rest\n}: IconButtonProps): JSX.Element => {\n const button = (\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 );\n\n return (\n <ToolbarItem {...rest}>\n {tooltipContent ? (\n <Tooltip contentRelationship=\"label\" content={tooltipContent}>\n {button}\n </Tooltip>\n ) : (\n button\n )}\n </ToolbarItem>\n );\n};\n\nexport default IconButton;\n", "import React from 'react';\nimport Button, { type ButtonPropsBase } from '@splunk/react-ui/Button';\nimport Tooltip from '@splunk/react-ui/Tooltip';\nimport styled from 'styled-components';\n\nconst BaseDropdownButton = styled(Button)`\n max-width: '50px';\n`;\n\nexport interface StyledDropdownButtonProps\n extends Pick<ButtonPropsBase, 'appearance' | 'icon' | 'disabled'> {\n children?: React.ReactNode;\n className?: string;\n 'data-clickable'?: boolean;\n 'data-test'?: string;\n tooltipContent?: string;\n}\n\nexport const StyledDropdownButton = React.forwardRef<\n HTMLButtonElement,\n StyledDropdownButtonProps\n>(({ tooltipContent, ...props }, ref): JSX.Element => {\n const button = (\n <BaseDropdownButton\n {...props}\n elementRef={ref as React.RefObject<HTMLButtonElement>}\n />\n );\n\n return tooltipContent ? (\n <Tooltip contentRelationship=\"label\" content={tooltipContent}>\n {button}\n </Tooltip>\n ) : (\n button\n );\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/buttons/Config.js
CHANGED
|
@@ -127,14 +127,23 @@ var defaultImport7 = __toESM(require("@splunk/react-ui/Button"));
|
|
|
127
127
|
__reExport(Button_exports, require("@splunk/react-ui/Button"));
|
|
128
128
|
var Button_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
|
|
129
129
|
|
|
130
|
+
// esm-externals:@splunk/react-ui/Tooltip
|
|
131
|
+
var Tooltip_exports = {};
|
|
132
|
+
__export(Tooltip_exports, {
|
|
133
|
+
default: () => Tooltip_default
|
|
134
|
+
});
|
|
135
|
+
var defaultImport8 = __toESM(require("@splunk/react-ui/Tooltip"));
|
|
136
|
+
__reExport(Tooltip_exports, require("@splunk/react-ui/Tooltip"));
|
|
137
|
+
var Tooltip_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
|
|
138
|
+
|
|
130
139
|
// esm-externals:styled-components
|
|
131
140
|
var styled_components_exports = {};
|
|
132
141
|
__export(styled_components_exports, {
|
|
133
142
|
default: () => styled_components_default
|
|
134
143
|
});
|
|
135
|
-
var
|
|
144
|
+
var defaultImport9 = __toESM(require("styled-components"));
|
|
136
145
|
__reExport(styled_components_exports, require("styled-components"));
|
|
137
|
-
var styled_components_default =
|
|
146
|
+
var styled_components_default = defaultImport9.default;
|
|
138
147
|
|
|
139
148
|
// src/Item.tsx
|
|
140
149
|
var Item_default = styled_components_default.div``;
|
|
@@ -165,6 +174,7 @@ var IconButton = (_a) => {
|
|
|
165
174
|
disabled = false,
|
|
166
175
|
onClick,
|
|
167
176
|
label,
|
|
177
|
+
tooltipContent,
|
|
168
178
|
testLabel
|
|
169
179
|
} = _b, rest = __objRest(_b, [
|
|
170
180
|
"icon",
|
|
@@ -172,9 +182,10 @@ var IconButton = (_a) => {
|
|
|
172
182
|
"disabled",
|
|
173
183
|
"onClick",
|
|
174
184
|
"label",
|
|
185
|
+
"tooltipContent",
|
|
175
186
|
"testLabel"
|
|
176
187
|
]);
|
|
177
|
-
|
|
188
|
+
const button = /* @__PURE__ */ react_default.createElement(
|
|
178
189
|
Button_default,
|
|
179
190
|
{
|
|
180
191
|
elementRef: buttonRef,
|
|
@@ -186,14 +197,14 @@ var IconButton = (_a) => {
|
|
|
186
197
|
"data-test": testLabel,
|
|
187
198
|
"data-clickable": true
|
|
188
199
|
}
|
|
189
|
-
)
|
|
200
|
+
);
|
|
201
|
+
return /* @__PURE__ */ react_default.createElement(Item_default, __spreadValues({}, rest), tooltipContent ? /* @__PURE__ */ react_default.createElement(Tooltip_default, { contentRelationship: "label", content: tooltipContent }, button) : button);
|
|
190
202
|
};
|
|
191
203
|
var IconButton_default = IconButton;
|
|
192
204
|
|
|
193
205
|
// src/buttons/Config.tsx
|
|
194
206
|
var configurationIcon = prepareIcon({
|
|
195
|
-
Icon: Cog_default
|
|
196
|
-
screenReaderContent: (0, i18n_exports._)("Configuration")
|
|
207
|
+
Icon: Cog_default
|
|
197
208
|
});
|
|
198
209
|
var Config = ({ dashboardApi }) => {
|
|
199
210
|
const configButtonRef = (0, dashboard_context_exports.useToolbarRef)("config");
|
|
@@ -216,7 +227,8 @@ var Config = ({ dashboardApi }) => {
|
|
|
216
227
|
buttonRef: configButtonRef,
|
|
217
228
|
testLabel: "config-button",
|
|
218
229
|
onClick: handleClick,
|
|
219
|
-
icon: configurationIcon
|
|
230
|
+
icon: configurationIcon,
|
|
231
|
+
tooltipContent: (0, i18n_exports._)("Configuration")
|
|
220
232
|
}
|
|
221
233
|
);
|
|
222
234
|
};
|
package/buttons/Config.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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"],
|
|
4
|
-
"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
|
|
5
|
-
"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,wBAAc;AACd,IAAO,cAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACFrE;AAAA;AAAA;AAAA;AAAA,IAAAC,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;;;
|
|
6
|
-
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
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:@splunk/react-ui/Tooltip", "esm-externals:styled-components", "../src/Item.tsx", "../src/IconButton.tsx"],
|
|
4
|
+
"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});\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 tooltipContent={_('Configuration')}\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 \"@splunk/react-ui/Tooltip\";\nexport * from \"@splunk/react-ui/Tooltip\";\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 Tooltip from '@splunk/react-ui/Tooltip';\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 tooltipContent?: 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 tooltipContent,\n testLabel,\n ...rest\n}: IconButtonProps): JSX.Element => {\n const button = (\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 );\n\n return (\n <ToolbarItem {...rest}>\n {tooltipContent ? (\n <Tooltip contentRelationship=\"label\" content={tooltipContent}>\n {button}\n </Tooltip>\n ) : (\n button\n )}\n </ToolbarItem>\n );\n};\n\nexport default IconButton;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/buttons/ContentExport.js
CHANGED
|
@@ -118,14 +118,23 @@ var defaultImport6 = __toESM(require("@splunk/react-ui/Button"));
|
|
|
118
118
|
__reExport(Button_exports, require("@splunk/react-ui/Button"));
|
|
119
119
|
var Button_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
|
|
120
120
|
|
|
121
|
+
// esm-externals:@splunk/react-ui/Tooltip
|
|
122
|
+
var Tooltip_exports = {};
|
|
123
|
+
__export(Tooltip_exports, {
|
|
124
|
+
default: () => Tooltip_default
|
|
125
|
+
});
|
|
126
|
+
var defaultImport7 = __toESM(require("@splunk/react-ui/Tooltip"));
|
|
127
|
+
__reExport(Tooltip_exports, require("@splunk/react-ui/Tooltip"));
|
|
128
|
+
var Tooltip_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
|
|
129
|
+
|
|
121
130
|
// esm-externals:styled-components
|
|
122
131
|
var styled_components_exports = {};
|
|
123
132
|
__export(styled_components_exports, {
|
|
124
133
|
default: () => styled_components_default
|
|
125
134
|
});
|
|
126
|
-
var
|
|
135
|
+
var defaultImport8 = __toESM(require("styled-components"));
|
|
127
136
|
__reExport(styled_components_exports, require("styled-components"));
|
|
128
|
-
var styled_components_default =
|
|
137
|
+
var styled_components_default = defaultImport8.default;
|
|
129
138
|
|
|
130
139
|
// src/Item.tsx
|
|
131
140
|
var Item_default = styled_components_default.div``;
|
|
@@ -156,6 +165,7 @@ var IconButton = (_a) => {
|
|
|
156
165
|
disabled = false,
|
|
157
166
|
onClick,
|
|
158
167
|
label,
|
|
168
|
+
tooltipContent,
|
|
159
169
|
testLabel
|
|
160
170
|
} = _b, rest = __objRest(_b, [
|
|
161
171
|
"icon",
|
|
@@ -163,9 +173,10 @@ var IconButton = (_a) => {
|
|
|
163
173
|
"disabled",
|
|
164
174
|
"onClick",
|
|
165
175
|
"label",
|
|
176
|
+
"tooltipContent",
|
|
166
177
|
"testLabel"
|
|
167
178
|
]);
|
|
168
|
-
|
|
179
|
+
const button = /* @__PURE__ */ react_default.createElement(
|
|
169
180
|
Button_default,
|
|
170
181
|
{
|
|
171
182
|
elementRef: buttonRef,
|
|
@@ -177,14 +188,14 @@ var IconButton = (_a) => {
|
|
|
177
188
|
"data-test": testLabel,
|
|
178
189
|
"data-clickable": true
|
|
179
190
|
}
|
|
180
|
-
)
|
|
191
|
+
);
|
|
192
|
+
return /* @__PURE__ */ react_default.createElement(Item_default, __spreadValues({}, rest), tooltipContent ? /* @__PURE__ */ react_default.createElement(Tooltip_default, { contentRelationship: "label", content: tooltipContent }, button) : button);
|
|
181
193
|
};
|
|
182
194
|
var IconButton_default = IconButton;
|
|
183
195
|
|
|
184
196
|
// src/buttons/ContentExport.tsx
|
|
185
197
|
var icon = prepareIcon({
|
|
186
|
-
Icon: ArrowBroadUnderbarDown_default
|
|
187
|
-
screenReaderContent: (0, i18n_exports._)("Export")
|
|
198
|
+
Icon: ArrowBroadUnderbarDown_default
|
|
188
199
|
});
|
|
189
200
|
var ContentExport = ({ disabled, onClick }) => /* @__PURE__ */ react_default.createElement(
|
|
190
201
|
IconButton_default,
|
|
@@ -192,7 +203,8 @@ var ContentExport = ({ disabled, onClick }) => /* @__PURE__ */ react_default.cre
|
|
|
192
203
|
testLabel: "content-export-button",
|
|
193
204
|
onClick,
|
|
194
205
|
disabled: !!disabled,
|
|
195
|
-
icon
|
|
206
|
+
icon,
|
|
207
|
+
tooltipContent: (0, i18n_exports._)("Export")
|
|
196
208
|
}
|
|
197
209
|
);
|
|
198
210
|
var ContentExport_default = ContentExport;
|