@splunk/dashboard-toolbar 29.0.0 → 29.1.0
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 +6 -5
- package/CollapsibleToolbar.js.map +2 -2
- package/IconButton.js +5 -4
- package/IconButton.js.map +2 -2
- package/Item.js.map +1 -1
- package/ItemGroup.js +3 -2
- package/ItemGroup.js.map +2 -2
- package/PopoverItemButton.js +2 -1
- package/PopoverItemButton.js.map +2 -2
- package/README.md +1 -1
- package/Toolbar.js +3 -2
- package/Toolbar.js.map +2 -2
- package/buttons/Charts.js +13 -9
- package/buttons/Charts.js.map +3 -3
- package/buttons/Config.js +7 -6
- package/buttons/Config.js.map +2 -2
- package/buttons/ContentExport.js +7 -6
- package/buttons/ContentExport.js.map +2 -2
- package/buttons/Data.js +7 -6
- package/buttons/Data.js.map +2 -2
- package/buttons/EmptyVisualization.js +8 -7
- package/buttons/EmptyVisualization.js.map +2 -2
- package/buttons/ExportDashboardButton.js +3 -2
- package/buttons/ExportDashboardButton.js.map +2 -2
- package/buttons/Fullscreen.js +7 -6
- package/buttons/Fullscreen.js.map +2 -2
- package/buttons/GridLineSwitch.js +3 -2
- package/buttons/GridLineSwitch.js.map +2 -2
- package/buttons/HelpButton.js +7 -6
- package/buttons/HelpButton.js.map +2 -2
- package/buttons/IconGallery.js +12 -8
- package/buttons/IconGallery.js.map +3 -3
- package/buttons/Image.js +8 -7
- package/buttons/Image.js.map +2 -2
- package/buttons/ImageGallery.js +8 -7
- package/buttons/ImageGallery.js.map +2 -2
- package/buttons/Inputs.js +13 -9
- package/buttons/Inputs.js.map +3 -3
- package/buttons/Markdown.js +7 -6
- package/buttons/Markdown.js.map +2 -2
- package/buttons/ModeSwitch.js +3 -2
- package/buttons/ModeSwitch.js.map +2 -2
- package/buttons/Redo.js +7 -6
- package/buttons/Redo.js.map +2 -2
- package/buttons/Shapes.js +12 -8
- package/buttons/Shapes.js.map +3 -3
- package/buttons/Source.js +7 -6
- package/buttons/Source.js.map +2 -2
- package/buttons/Undo.js +7 -6
- package/buttons/Undo.js.map +2 -2
- package/buttons/index.js +84 -67
- package/buttons/index.js.map +3 -3
- package/groups/ActionsGroup.js +5 -4
- package/groups/ActionsGroup.js.map +2 -2
- package/groups/ControlGroup.js +10 -9
- package/groups/ControlGroup.js.map +3 -3
- package/groups/EditingGroup.js +19 -18
- package/groups/EditingGroup.js.map +3 -3
- package/groups/EditorGroup.js +11 -10
- package/groups/EditorGroup.js.map +3 -3
- package/groups/EditorsControlGroup.js +51 -15
- package/groups/EditorsControlGroup.js.map +3 -3
- package/groups/HistoryGroup.js +12 -11
- package/groups/HistoryGroup.js.map +3 -3
- package/groups/SidebarControlGroup.js +47 -11
- package/groups/SidebarControlGroup.js.map +3 -3
- package/groups/VisualizationGroup.js +49 -36
- package/groups/VisualizationGroup.js.map +3 -3
- package/groups/index.js +118 -70
- package/groups/index.js.map +3 -3
- package/index.js +107 -90
- package/index.js.map +3 -3
- package/module/CollapsibleToolbar.js +11 -11
- package/module/IconButton.js +6 -6
- package/module/Item.js +3 -3
- package/module/ItemGroup.js +7 -7
- package/module/PopoverItemButton.js +4 -4
- package/module/Toolbar.js +6 -6
- package/module/buttons/Charts.js +15 -15
- package/module/buttons/Config.js +9 -9
- package/module/buttons/ContentExport.js +9 -9
- package/module/buttons/Data.js +10 -10
- package/module/buttons/EmptyVisualization.js +9 -9
- package/module/buttons/ExportDashboardButton.js +8 -8
- package/module/buttons/Fullscreen.js +9 -9
- package/module/buttons/GridLineSwitch.js +8 -8
- package/module/buttons/HelpButton.js +11 -11
- package/module/buttons/IconGallery.js +11 -11
- package/module/buttons/Image.js +9 -9
- package/module/buttons/ImageGallery.js +12 -12
- package/module/buttons/Inputs.js +11 -11
- package/module/buttons/Markdown.js +8 -8
- package/module/buttons/ModeSwitch.js +9 -9
- package/module/buttons/Redo.js +8 -8
- package/module/buttons/Shapes.js +13 -13
- package/module/buttons/Source.js +8 -8
- package/module/buttons/Undo.js +8 -8
- package/module/buttons/index.js +40 -40
- package/module/chunks/chunk-2G23SAZZ.js +29 -0
- package/module/chunks/{chunk-KJLRQLFH.js.map → chunk-2G23SAZZ.js.map} +1 -1
- package/module/chunks/{chunk-YPVMTO2L.js → chunk-2GRHFRZD.js} +16 -15
- package/module/chunks/{chunk-YPVMTO2L.js.map → chunk-2GRHFRZD.js.map} +1 -1
- package/module/chunks/{chunk-IAEE4XLH.js → chunk-3DNLXDXA.js} +9 -8
- package/module/chunks/{chunk-IAEE4XLH.js.map → chunk-3DNLXDXA.js.map} +2 -2
- package/module/chunks/{chunk-IQG5GSSX.js → chunk-3NDLE64O.js} +8 -7
- package/module/chunks/{chunk-IQG5GSSX.js.map → chunk-3NDLE64O.js.map} +2 -2
- package/module/chunks/{chunk-YKT3CRI6.js → chunk-3QT355V5.js} +2 -2
- package/module/chunks/{chunk-YKT3CRI6.js.map → chunk-3QT355V5.js.map} +1 -1
- package/module/chunks/{chunk-NCPTJ5RB.js → chunk-3R73WRRN.js} +18 -14
- package/module/chunks/chunk-3R73WRRN.js.map +7 -0
- package/module/chunks/{chunk-BRGYD3MR.js → chunk-4L4BWEM7.js} +2 -2
- package/module/chunks/{chunk-BRGYD3MR.js.map → chunk-4L4BWEM7.js.map} +1 -1
- package/module/chunks/{chunk-RODBPKID.js → chunk-4PUMQWA5.js} +6 -5
- package/module/chunks/{chunk-RODBPKID.js.map → chunk-4PUMQWA5.js.map} +2 -2
- package/module/chunks/{chunk-L4ZPYLUY.js → chunk-5CXOMUN4.js} +7 -6
- package/module/chunks/{chunk-L4ZPYLUY.js.map → chunk-5CXOMUN4.js.map} +1 -1
- package/module/chunks/{chunk-X7ATHE2S.js → chunk-5TGHI5GV.js} +2 -2
- package/module/chunks/{chunk-X7ATHE2S.js.map → chunk-5TGHI5GV.js.map} +1 -1
- package/module/chunks/{chunk-NJF2IOVV.js → chunk-6L4PTRMO.js} +2 -2
- package/module/chunks/{chunk-NJF2IOVV.js.map → chunk-6L4PTRMO.js.map} +1 -1
- package/module/chunks/{chunk-E2DI77AU.js → chunk-6VIKADMF.js} +2 -2
- package/module/chunks/{chunk-UPZBDSS7.js → chunk-7CJM54O3.js} +11 -8
- package/module/chunks/{chunk-UPZBDSS7.js.map → chunk-7CJM54O3.js.map} +1 -1
- package/module/chunks/{chunk-GWAXQYWY.js → chunk-AD6EIRYL.js} +11 -10
- package/module/chunks/{chunk-GWAXQYWY.js.map → chunk-AD6EIRYL.js.map} +2 -2
- package/module/chunks/{chunk-J5CY2G3T.js → chunk-AG73TP3S.js} +12 -9
- package/module/chunks/{chunk-J5CY2G3T.js.map → chunk-AG73TP3S.js.map} +1 -1
- package/module/chunks/{chunk-BLXVTG4B.js → chunk-AIH4ILPH.js} +12 -9
- package/module/chunks/{chunk-BLXVTG4B.js.map → chunk-AIH4ILPH.js.map} +1 -1
- package/module/chunks/{chunk-GRIJP4FT.js → chunk-ANTP4L4N.js} +18 -14
- package/module/chunks/chunk-ANTP4L4N.js.map +7 -0
- package/module/chunks/{chunk-4OLWQA6K.js → chunk-AROBR6WM.js} +11 -10
- package/module/chunks/{chunk-4OLWQA6K.js.map → chunk-AROBR6WM.js.map} +2 -2
- package/module/chunks/{chunk-VQIRZ53C.js → chunk-B5OBVUF5.js} +3 -1
- package/module/chunks/{chunk-NIACHGAA.js → chunk-BDLV2ADM.js} +3 -3
- package/module/chunks/{chunk-CFGNNO2V.js → chunk-BR42RPXM.js} +9 -8
- package/module/chunks/{chunk-CFGNNO2V.js.map → chunk-BR42RPXM.js.map} +2 -2
- package/module/chunks/{chunk-HIICL66H.js → chunk-BXDA2XH4.js} +2 -2
- package/module/chunks/{chunk-HIICL66H.js.map → chunk-BXDA2XH4.js.map} +1 -1
- package/module/chunks/{chunk-NWVLNDCF.js → chunk-CXXSJOFS.js} +2 -2
- package/module/chunks/{chunk-NWVLNDCF.js.map → chunk-CXXSJOFS.js.map} +1 -1
- package/module/chunks/{chunk-OSDOIGWB.js → chunk-DU4JCIM3.js} +2 -2
- package/module/chunks/{chunk-OSDOIGWB.js.map → chunk-DU4JCIM3.js.map} +1 -1
- package/module/chunks/{chunk-FVGABOJM.js → chunk-E5POXMHH.js} +15 -11
- package/module/chunks/chunk-E5POXMHH.js.map +7 -0
- package/module/chunks/chunk-FLMBGMR4.js +32 -0
- package/module/chunks/chunk-FLMBGMR4.js.map +7 -0
- package/module/chunks/{chunk-734QWOYU.js → chunk-GIXERSIF.js} +11 -10
- package/module/chunks/{chunk-734QWOYU.js.map → chunk-GIXERSIF.js.map} +1 -1
- package/module/chunks/{chunk-JXPIKVRZ.js → chunk-GUWB2JIP.js} +11 -10
- package/module/chunks/{chunk-JXPIKVRZ.js.map → chunk-GUWB2JIP.js.map} +1 -1
- package/module/chunks/{chunk-SIFZZCPT.js → chunk-HPEHWRJP.js} +31 -26
- package/module/chunks/chunk-HPEHWRJP.js.map +7 -0
- package/module/chunks/{chunk-52TYQW2Y.js → chunk-HTZYYFJO.js} +2 -2
- package/module/chunks/{chunk-52TYQW2Y.js.map → chunk-HTZYYFJO.js.map} +1 -1
- package/module/chunks/{chunk-JLYV2H24.js → chunk-HXK4QHPR.js} +3 -3
- package/module/chunks/{chunk-BSMCGXVQ.js → chunk-I7XN7DKU.js} +2 -2
- package/module/chunks/{chunk-BSMCGXVQ.js.map → chunk-I7XN7DKU.js.map} +1 -1
- package/module/chunks/{chunk-AWNWXBE4.js → chunk-JHFAWC4B.js} +9 -8
- package/module/chunks/{chunk-AWNWXBE4.js.map → chunk-JHFAWC4B.js.map} +2 -2
- package/module/chunks/{chunk-XUK4ZKWN.js → chunk-KDMM6KX4.js} +9 -8
- package/module/chunks/{chunk-XUK4ZKWN.js.map → chunk-KDMM6KX4.js.map} +1 -1
- package/module/chunks/{chunk-G6N5OMKL.js → chunk-L2MCGOFY.js} +2 -2
- package/module/chunks/{chunk-G6N5OMKL.js.map → chunk-L2MCGOFY.js.map} +1 -1
- package/module/chunks/{chunk-OIQNUT2X.js → chunk-LATZ7CUV.js} +7 -4
- package/module/chunks/{chunk-OIQNUT2X.js.map → chunk-LATZ7CUV.js.map} +1 -1
- package/module/chunks/{chunk-ECEBJH6K.js → chunk-LKIWD6NR.js} +12 -11
- package/module/chunks/{chunk-ECEBJH6K.js.map → chunk-LKIWD6NR.js.map} +2 -2
- package/module/chunks/{chunk-2QMHWIV5.js → chunk-N3HJVTLY.js} +16 -15
- package/module/chunks/{chunk-2QMHWIV5.js.map → chunk-N3HJVTLY.js.map} +2 -2
- package/module/chunks/{chunk-J2TRUM5N.js → chunk-PHOUPWEN.js} +2 -2
- package/module/chunks/{chunk-J2TRUM5N.js.map → chunk-PHOUPWEN.js.map} +1 -1
- package/module/chunks/{chunk-HXY4TSUO.js → chunk-PMXVITCC.js} +2 -2
- package/module/chunks/{chunk-HXY4TSUO.js.map → chunk-PMXVITCC.js.map} +1 -1
- package/module/chunks/{chunk-B2LPQWLD.js → chunk-Q4EASNDZ.js} +10 -9
- package/module/chunks/{chunk-B2LPQWLD.js.map → chunk-Q4EASNDZ.js.map} +2 -2
- package/module/chunks/{chunk-IGGLU44N.js → chunk-QPUZLO5O.js} +2 -2
- package/module/chunks/{chunk-IGGLU44N.js.map → chunk-QPUZLO5O.js.map} +1 -1
- package/module/chunks/{chunk-QU7RW3YZ.js → chunk-SELLU76G.js} +10 -7
- package/module/chunks/{chunk-QU7RW3YZ.js.map → chunk-SELLU76G.js.map} +1 -1
- package/module/chunks/{chunk-JILFF3WY.js → chunk-SMDUMR2P.js} +18 -14
- package/module/chunks/chunk-SMDUMR2P.js.map +7 -0
- package/module/chunks/{chunk-72YLBMXL.js → chunk-SPVRIPCR.js} +23 -19
- package/module/chunks/chunk-SPVRIPCR.js.map +7 -0
- package/module/chunks/{chunk-KEARZQAT.js → chunk-SRI3BMZH.js} +11 -10
- package/module/chunks/{chunk-KEARZQAT.js.map → chunk-SRI3BMZH.js.map} +1 -1
- package/module/chunks/{chunk-ETJ5YPF3.js → chunk-TLNR3NED.js} +9 -8
- package/module/chunks/{chunk-ETJ5YPF3.js.map → chunk-TLNR3NED.js.map} +1 -1
- package/module/chunks/{chunk-OTGQ73VF.js → chunk-UERW7LTA.js} +8 -7
- package/module/chunks/{chunk-OTGQ73VF.js.map → chunk-UERW7LTA.js.map} +2 -2
- package/module/chunks/{chunk-A3BAVEME.js → chunk-WPBXWBTX.js} +8 -7
- package/module/chunks/{chunk-A3BAVEME.js.map → chunk-WPBXWBTX.js.map} +2 -2
- package/module/chunks/{chunk-X2HLBQUA.js → chunk-YBGLF5LF.js} +14 -13
- package/module/chunks/{chunk-X2HLBQUA.js.map → chunk-YBGLF5LF.js.map} +1 -1
- package/module/chunks/{chunk-FSOMEJXM.js → chunk-ZCC73T4R.js} +8 -7
- package/module/chunks/{chunk-FSOMEJXM.js.map → chunk-ZCC73T4R.js.map} +2 -2
- package/module/groups/ActionsGroup.js +7 -7
- package/module/groups/ControlGroup.js +42 -42
- package/module/groups/EditingGroup.js +42 -42
- package/module/groups/EditorGroup.js +42 -42
- package/module/groups/EditorsControlGroup.js +42 -42
- package/module/groups/HistoryGroup.js +42 -42
- package/module/groups/SidebarControlGroup.js +42 -42
- package/module/groups/VisualizationGroup.js +42 -42
- package/module/groups/index.js +49 -49
- package/module/index.js +51 -51
- package/package.json +18 -18
- package/types/buttons/Charts.d.ts.map +1 -1
- package/types/buttons/IconGallery.d.ts.map +1 -1
- package/types/buttons/Inputs.d.ts.map +1 -1
- package/types/buttons/Shapes.d.ts.map +1 -1
- package/types/buttons/tokenManager/TokenManager.d.ts +1 -1
- package/types/buttons/tokenManager/TokenManager.d.ts.map +1 -1
- package/types/groups/EditorsControlGroup.d.ts.map +1 -1
- package/types/groups/SidebarControlGroup.d.ts.map +1 -1
- package/module/chunks/chunk-72YLBMXL.js.map +0 -7
- package/module/chunks/chunk-FVGABOJM.js.map +0 -7
- package/module/chunks/chunk-GRIJP4FT.js.map +0 -7
- package/module/chunks/chunk-JILFF3WY.js.map +0 -7
- package/module/chunks/chunk-KJLRQLFH.js +0 -28
- package/module/chunks/chunk-NCPTJ5RB.js.map +0 -7
- package/module/chunks/chunk-SIFZZCPT.js.map +0 -7
- package/module/chunks/chunk-WFAY6ABE.js +0 -28
- package/module/chunks/chunk-WFAY6ABE.js.map +0 -7
- package/tsconfig.json +0 -9
- /package/module/chunks/{chunk-E2DI77AU.js.map → chunk-6VIKADMF.js.map} +0 -0
- /package/module/chunks/{chunk-VQIRZ53C.js.map → chunk-B5OBVUF5.js.map} +0 -0
- /package/module/chunks/{chunk-NIACHGAA.js.map → chunk-BDLV2ADM.js.map} +0 -0
- /package/module/chunks/{chunk-JLYV2H24.js.map → chunk-HXK4QHPR.js.map} +0 -0
package/CollapsibleToolbar.js
CHANGED
|
@@ -8,6 +8,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
8
8
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
9
9
|
var __getProtoOf = Object.getPrototypeOf;
|
|
10
10
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
11
12
|
var __export = (target, all) => {
|
|
12
13
|
for (var name in all)
|
|
13
14
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -204,7 +205,7 @@ var ExpandButton = styled_components_default(Button_default)`
|
|
|
204
205
|
var expandedIcon = /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(ChevronRight_default, { width: iconSize, height: iconSize }), /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, null, (0, i18n_exports._)("Expanded")));
|
|
205
206
|
var collapsedIcon = /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(ChevronLeft_default, { width: iconSize, height: iconSize }), /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, null, (0, i18n_exports._)("Collapsed")));
|
|
206
207
|
var DEFAULT_PRESET_MAP = Object.freeze({});
|
|
207
|
-
var CollapsibleToolbar = ({
|
|
208
|
+
var CollapsibleToolbar = /* @__PURE__ */ __name(({
|
|
208
209
|
preset = DEFAULT_PRESET_MAP,
|
|
209
210
|
dashboardApi,
|
|
210
211
|
initialExpanded = true,
|
|
@@ -236,9 +237,9 @@ var CollapsibleToolbar = ({
|
|
|
236
237
|
);
|
|
237
238
|
(0, react_exports.useEffect)(() => {
|
|
238
239
|
const toolbarApiRef = {
|
|
239
|
-
toggle: () => handleExpandToggle(),
|
|
240
|
-
expand: () => setExpanded(true),
|
|
241
|
-
collapse: () => setExpanded(false)
|
|
240
|
+
toggle: /* @__PURE__ */ __name(() => handleExpandToggle(), "toggle"),
|
|
241
|
+
expand: /* @__PURE__ */ __name(() => setExpanded(true), "expand"),
|
|
242
|
+
collapse: /* @__PURE__ */ __name(() => setExpanded(false), "collapse")
|
|
242
243
|
};
|
|
243
244
|
apiRegistry.registerToolbarApi(toolbarApiRef);
|
|
244
245
|
return () => {
|
|
@@ -255,7 +256,7 @@ var CollapsibleToolbar = ({
|
|
|
255
256
|
"data-clickable": true
|
|
256
257
|
}
|
|
257
258
|
));
|
|
258
|
-
};
|
|
259
|
+
}, "CollapsibleToolbar");
|
|
259
260
|
CollapsibleToolbar.displayName = "CollapsibleToolbar";
|
|
260
261
|
var CollapsibleToolbar_default = CollapsibleToolbar;
|
|
261
262
|
//# sourceMappingURL=CollapsibleToolbar.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["src/CollapsibleToolbar.tsx", "react", "
|
|
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
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)`\n border-right: ${({ open }) => (open ? 'solid' : 'none')};\n border-width: 0 1px 0 0;\n border-color: ${variables.interactiveColorBorder};\n`;\n\nconst ToolbarItemsWrapper = styled.div`\n display: flex;\n padding: 2px 4px 2px 8px;\n gap: ${variables.spacingSmall};\n margin-inline-end: ${variables.spacingSmall};\n`;\n\n// Keep the button and toolbar container animating at the same speed\nconst transition = css`\n transition-duration: 0.2s;\n transition-timing-function: ease-in-out;\n`;\nconst ExpandButton = styled(Button)<{\n expanded: boolean;\n}>`\n // To get specific enough to override the default Button styling\n && {\n // We shrink the button a bit when the toolbar is expanded since it\n // switches to a circle button and needs a bit more space to breath\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 padding: 0;\n border: none;\n box-shadow: none;\n background-color: ${variables.backgroundColorNavigation};\n border-radius: ${(props) => (props.expanded ? '40px' : '0 0 0 20px')};\n transition-property: border-radius, height, width, margin-right;\n ${transition}\n }\n`;\n\nconst expandedIcon = (\n <>\n <ChevronRight width={iconSize} height={iconSize} />\n <ScreenReaderContent>{_('Expanded')}</ScreenReaderContent>\n </>\n);\n\nconst collapsedIcon = (\n <>\n <ChevronLeft width={iconSize} height={iconSize} />\n <ScreenReaderContent>{_('Collapsed')}</ScreenReaderContent>\n </>\n);\n\nexport type CollapsibleToolbarProps = CommonToolbarBaseProps & {\n initialExpanded?: boolean;\n toolbarItems?: React.ReactElement[];\n};\n\nconst DEFAULT_PRESET_MAP = Object.freeze({} as PresetMap);\n\nconst CollapsibleToolbar = ({\n preset = DEFAULT_PRESET_MAP,\n dashboardApi,\n initialExpanded = true,\n mode = 'view',\n toolbarItems = [],\n}: CollapsibleToolbarProps): React.ReactElement | null => {\n const apiRegistry = useApiRegistry();\n const [expanded, setExpanded] = useState(initialExpanded);\n const handleExpandToggle = useCallback(\n () => setExpanded((prevExpanded) => !prevExpanded),\n []\n );\n\n const layoutType = useSelector(selectLayoutType);\n\n const injectedToolbarItems = useMemo(\n () =>\n toolbarItems.map((item) =>\n cloneElement(item, {\n mode,\n preset,\n layoutType,\n dashboardApi,\n borders: false,\n })\n ),\n [toolbarItems, mode, preset, dashboardApi, layoutType]\n );\n\n const ExpandButtonIcon = useMemo(\n () => (expanded ? expandedIcon : collapsedIcon),\n [expanded]\n );\n\n useEffect(() => {\n const toolbarApiRef = {\n toggle: () => handleExpandToggle(),\n expand: () => setExpanded(true),\n collapse: () => setExpanded(false),\n };\n\n apiRegistry.registerToolbarApi(toolbarApiRef);\n\n return () => {\n apiRegistry.removeToolbarApi();\n };\n }, [apiRegistry, handleExpandToggle]);\n\n return (\n <ToolbarWrapper data-test=\"dashboard-toolbar\">\n <StyledTransitionOpen animation=\"slideFromRight\" open={expanded}>\n <ToolbarItemsWrapper data-test=\"toolbar-items\">\n {injectedToolbarItems}\n </ToolbarItemsWrapper>\n </StyledTransitionOpen>\n <ExpandButton\n data-test=\"expand-button\"\n expanded={expanded}\n onClick={handleExpandToggle}\n icon={ExpandButtonIcon}\n data-clickable\n />\n </ToolbarWrapper>\n );\n};\n\nCollapsibleToolbar.displayName = 'CollapsibleToolbar';\n\nexport default CollapsibleToolbar;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-context\";\nexport * from \"@splunk/dashboard-context\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/TransitionOpen\";\nexport * from \"@splunk/react-ui/TransitionOpen\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/ChevronRight\";\nexport * from \"@splunk/react-icons/ChevronRight\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/ChevronLeft\";\nexport * from \"@splunk/react-icons/ChevronLeft\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-state\";\nexport * from \"@splunk/dashboard-state\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\n\nexport default styled.div``;\n", "import React from 'react';\nimport type SVG from '@splunk/react-icons/SVG';\nimport DropdownIcon from '@splunk/react-icons/CaretDown';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport Button, { type ButtonPropsBase } from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\nimport ToolbarItem from './Item';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledDropdownIcon = styled(DropdownIcon)`\n margin-left: -5px;\n`;\n\nexport const iconSize = 24;\nexport const menuIconSize = 20;\n\ninterface PrepareIconProps extends React.ComponentProps<typeof SVG> {\n Icon: React.ComponentType<React.ComponentProps<typeof SVG>>;\n screenReaderContent?: string;\n isMenu?: boolean;\n variant?: 'filled' | 'outline' | 'none';\n}\n\n/**\n * Button adds a bunch of padding when there's any child elements even if they don't display anything (screenReaderContent)\n * This bundles the primary icon, a menu caret and screenReaderContent as an icon when needed.\n * Additionally accepts any properties of any react-icons element to be applied to primary icon\n * @param {Object} arg\n * @param {React.ElementType} arg.Icon The primary icon\n * @param {boolean} [arg.isMenu=false] Display a menu caret\n * @param {string} [arg.screenReaderContent] A label for the icon\n * @param {string} [arg.variant] Fill the icon, or not\n * @returns {JSX.Element}\n */\nexport const prepareIcon = ({\n Icon,\n screenReaderContent,\n isMenu = false,\n ...props\n}: PrepareIconProps) => {\n const size = isMenu ? menuIconSize : iconSize;\n return (\n <>\n <Icon width={size} height={size} {...props} />\n {isMenu && (\n <StyledDropdownIcon variant=\"filled\" width={9} height={size} />\n )}\n {screenReaderContent && (\n <ScreenReaderContent>{screenReaderContent}</ScreenReaderContent>\n )}\n </>\n );\n};\n\nexport interface IconButtonProps extends ToolbarButtonProps {\n icon?: JSX.Element;\n onClick?: ButtonPropsBase['onClick'];\n label?: string;\n buttonRef?: React.RefObject<HTMLButtonElement>;\n testLabel?: string;\n disabled?: boolean;\n}\n\nconst IconButton = ({\n icon,\n buttonRef,\n disabled = false,\n onClick,\n label,\n testLabel,\n ...rest\n}: IconButtonProps): JSX.Element => {\n return (\n <ToolbarItem {...rest}>\n <Button\n elementRef={buttonRef}\n onClick={onClick}\n disabled={disabled}\n appearance=\"subtle\"\n icon={icon}\n label={label}\n data-test={testLabel}\n data-clickable\n />\n </ToolbarItem>\n );\n};\n\nexport default IconButton;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/IconButton.js
CHANGED
|
@@ -22,6 +22,7 @@ var __spreadValues = (a, b) => {
|
|
|
22
22
|
}
|
|
23
23
|
return a;
|
|
24
24
|
};
|
|
25
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
25
26
|
var __objRest = (source, exclude) => {
|
|
26
27
|
var target = {};
|
|
27
28
|
for (var prop in source)
|
|
@@ -121,7 +122,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
|
121
122
|
`;
|
|
122
123
|
var iconSize = 24;
|
|
123
124
|
var menuIconSize = 20;
|
|
124
|
-
var prepareIcon = (_a) => {
|
|
125
|
+
var prepareIcon = /* @__PURE__ */ __name((_a) => {
|
|
125
126
|
var _b = _a, {
|
|
126
127
|
Icon,
|
|
127
128
|
screenReaderContent,
|
|
@@ -133,8 +134,8 @@ var prepareIcon = (_a) => {
|
|
|
133
134
|
]);
|
|
134
135
|
const size = isMenu ? menuIconSize : iconSize;
|
|
135
136
|
return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(Icon, __spreadValues({ width: size, height: size }, props)), isMenu && /* @__PURE__ */ react_default.createElement(StyledDropdownIcon, { variant: "filled", width: 9, height: size }), screenReaderContent && /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, null, screenReaderContent));
|
|
136
|
-
};
|
|
137
|
-
var IconButton = (_a) => {
|
|
137
|
+
}, "prepareIcon");
|
|
138
|
+
var IconButton = /* @__PURE__ */ __name((_a) => {
|
|
138
139
|
var _b = _a, {
|
|
139
140
|
icon,
|
|
140
141
|
buttonRef,
|
|
@@ -163,6 +164,6 @@ var IconButton = (_a) => {
|
|
|
163
164
|
"data-clickable": true
|
|
164
165
|
}
|
|
165
166
|
));
|
|
166
|
-
};
|
|
167
|
+
}, "IconButton");
|
|
167
168
|
var IconButton_default = IconButton;
|
|
168
169
|
//# sourceMappingURL=IconButton.js.map
|
package/IconButton.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["src/IconButton.tsx", "react", "
|
|
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
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 return (\n <ToolbarItem {...rest}>\n <Button\n elementRef={buttonRef}\n onClick={onClick}\n disabled={disabled}\n appearance=\"subtle\"\n icon={icon}\n label={label}\n data-test={testLabel}\n data-clickable\n />\n </ToolbarItem>\n );\n};\n\nexport default IconButton;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\n\nexport default styled.div``;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AACA,oBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAa,gBAA8B,wBAAU;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAA,iBAA+B;AAC/B,8BAAc;AACd,IAAO,oBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,wCAAc;AACd,IAAO,8BAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACDrE,IAAO,eAAQ,0BAAO;;;ANOtB,IAAM,qBAAqB,0BAAO,iBAAY;AAAA;AAAA;AAIvC,IAAM,WAAW;AACjB,IAAM,eAAe;AAoBrB,IAAM,cAAc,wBAAC,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,GAlB2B;AA6B3B,IAAM,aAAa,wBAAC,OAQgB;AARhB,eAChB;AAAA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,EArEJ,IA+DoB,IAOb,iBAPa,IAOb;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACI,4CAAC,iCAAgB,OACb;AAAA,IAAC;AAAA;AAAA,MACG,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,YAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX,kBAAc;AAAA;AAAA,EAClB,CACJ;AAER,GAvBmB;AAyBnB,IAAO,qBAAQ;",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/Item.js.map
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["src/Item.tsx", "styled-components"],
|
|
3
|
+
"sources": ["src/Item.tsx", "esm-externals:styled-components"],
|
|
4
4
|
"sourcesContent": ["import styled from 'styled-components';\n\nexport default styled.div``;\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AACA,oBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAa,gBAA8B,wBAAU;;;ADDrE,IAAO,eAAQ,0BAAO;",
|
|
6
6
|
"names": []
|
package/ItemGroup.js
CHANGED
|
@@ -10,6 +10,7 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
|
10
10
|
var __getProtoOf = Object.getPrototypeOf;
|
|
11
11
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
12
12
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
13
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
13
14
|
var __objRest = (source, exclude) => {
|
|
14
15
|
var target = {};
|
|
15
16
|
for (var prop in source)
|
|
@@ -106,7 +107,7 @@ var Group = styled_components_default.div.attrs({
|
|
|
106
107
|
flex-direction: row;
|
|
107
108
|
gap: ${(props) => props.gap};
|
|
108
109
|
`;
|
|
109
|
-
var ItemGroup = (_a) => {
|
|
110
|
+
var ItemGroup = /* @__PURE__ */ __name((_a) => {
|
|
110
111
|
var _b = _a, {
|
|
111
112
|
children,
|
|
112
113
|
borders = true,
|
|
@@ -122,6 +123,6 @@ var ItemGroup = (_a) => {
|
|
|
122
123
|
);
|
|
123
124
|
const separator = borders ? /* @__PURE__ */ react_default.createElement(ItemSeparator_default, null) : null;
|
|
124
125
|
return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(Group, { gap: (0, dashboard_utils_exports.toPx)(gap, 2) }, items), separator);
|
|
125
|
-
};
|
|
126
|
+
}, "ItemGroup");
|
|
126
127
|
var ItemGroup_default = ItemGroup;
|
|
127
128
|
//# sourceMappingURL=ItemGroup.js.map
|
package/ItemGroup.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["src/ItemGroup.tsx", "react", "styled-components", "
|
|
3
|
+
"sources": ["src/ItemGroup.tsx", "esm-externals:react", "esm-externals:styled-components", "esm-externals:@splunk/dashboard-utils", "esm-externals:@splunk/themes", "src/components/ItemSeparator.tsx"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport type { ButtonClickHandler } from '@splunk/react-ui/Button';\nimport { toPx } from '@splunk/dashboard-utils';\nimport type { ToolbarButtonProps } from './types/common';\nimport ItemSeparator from './components/ItemSeparator';\n\nconst Group = styled.div.attrs({\n 'data-test': 'toolbar-item-group',\n})<{ gap: string }>`\n display: flex;\n flex-direction: row;\n gap: ${(props) => props.gap};\n`;\n\nexport type ItemGroupProps = {\n borders?: boolean;\n children?: React.ReactNode;\n align?: 'left' | 'right';\n sourceButtonOnClick?: ButtonClickHandler;\n gap?: number | string;\n [key: string]: unknown;\n} & ToolbarButtonProps;\n\nconst ItemGroup = ({\n children,\n borders = true,\n gap,\n ...rest\n}: ItemGroupProps) => {\n const items = React.Children.map(\n children,\n (child) => child && React.cloneElement(child as JSX.Element, rest)\n );\n const separator = borders ? <ItemSeparator /> : null;\n return (\n <>\n <Group gap={toPx(gap, 2)}>{items}</Group>\n {separator}\n </>\n );\n};\n\nexport default ItemGroup;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-utils\";\nexport * from \"@splunk/dashboard-utils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\nimport { variables } from '@splunk/themes';\n\nconst ItemSeparator = styled.div`\n border-left-width: 1px;\n border-left-style: solid;\n border-left-color: ${variables.interactiveColorBorder};\n width: 0px;\n height: ${variables.inputHeight};\n`;\n\nexport default ItemSeparator;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AACA,oBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAa,gBAA8B,wBAAU;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAA,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,oCAAc;AACd,IAAO,0BAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACArE,IAAM,gBAAgB,0BAAO;AAAA;AAAA;AAAA,yBAGJ,yBAAU,sBAAsB;AAAA;AAAA,cAE3C,yBAAU,WAAW;AAAA;AAGnC,IAAO,wBAAQ;;;ALJf,IAAM,QAAQ,0BAAO,IAAI,MAAM;AAAA,EAC3B,aAAa;AACjB,CAAC;AAAA;AAAA;AAAA,WAGU,CAAC,UAAU,MAAM,GAAG;AAAA;AAY/B,IAAM,YAAY,wBAAC,OAKG;AALH,eACf;AAAA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EA3BJ,IAwBmB,IAIZ,iBAJY,IAIZ;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,QAAQ,cAAM,SAAS;AAAA,IACzB;AAAA,IACA,CAAC,UAAU,SAAS,cAAM,aAAa,OAAsB,IAAI;AAAA,EACrE;AACA,QAAM,YAAY,UAAU,4CAAC,2BAAc,IAAK;AAChD,SACI,0EACI,4CAAC,SAAM,SAAK,8BAAK,KAAK,CAAC,KAAI,KAAM,GAChC,SACL;AAER,GAjBkB;AAmBlB,IAAO,oBAAQ;",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/PopoverItemButton.js
CHANGED
|
@@ -8,6 +8,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
8
8
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
9
9
|
var __getProtoOf = Object.getPrototypeOf;
|
|
10
10
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
11
12
|
var __export = (target, all) => {
|
|
12
13
|
for (var name in all)
|
|
13
14
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -73,6 +74,6 @@ var StyledLabel = styled_components_default.span`
|
|
|
73
74
|
overflow: hidden;
|
|
74
75
|
flex: 0 1 auto;
|
|
75
76
|
`;
|
|
76
|
-
var PopoverItemButton = ({ icon, label }) => /* @__PURE__ */ react_default.createElement(StyledContentWrapper, null, icon && /* @__PURE__ */ react_default.createElement(StyledIcon, null, icon), label && /* @__PURE__ */ react_default.createElement(StyledLabel, { "data-test": "label-title" }, label));
|
|
77
|
+
var PopoverItemButton = /* @__PURE__ */ __name(({ icon, label }) => /* @__PURE__ */ react_default.createElement(StyledContentWrapper, null, icon && /* @__PURE__ */ react_default.createElement(StyledIcon, null, icon), label && /* @__PURE__ */ react_default.createElement(StyledLabel, { "data-test": "label-title" }, label)), "PopoverItemButton");
|
|
77
78
|
var PopoverItemButton_default = PopoverItemButton;
|
|
78
79
|
//# sourceMappingURL=PopoverItemButton.js.map
|
package/PopoverItemButton.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["src/PopoverItemButton.tsx", "react", "styled-components"],
|
|
3
|
+
"sources": ["src/PopoverItemButton.tsx", "esm-externals:react", "esm-externals:styled-components"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledContentWrapper = styled.span`\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items: center;\n max-width: 100%;\n`;\n\nconst StyledIcon = styled.span`\n display: inline-block;\n padding-right: 8px;\n`;\n\nconst StyledLabel = styled.span`\n text-overflow: ellipsis;\n overflow: hidden;\n flex: 0 1 auto;\n`;\n\nexport interface PopoverItemButtonProps extends ToolbarButtonProps {\n icon: JSX.Element;\n label?: string;\n}\n\n/**\n * Custom button component for popovers created for specific styling - aligning text to the left\n */\nconst PopoverItemButton = ({ icon, label }: PopoverItemButtonProps) => (\n <StyledContentWrapper>\n {icon && <StyledIcon>{icon}</StyledIcon>}\n {label && <StyledLabel data-test=\"label-title\">{label}</StyledLabel>}\n </StyledContentWrapper>\n);\n\nexport default PopoverItemButton;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AACA,oBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAa,gBAA8B,wBAAU;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAA,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;AFCrE,IAAM,uBAAuB,0BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpC,IAAM,aAAa,0BAAO;AAAA;AAAA;AAAA;AAK1B,IAAM,cAAc,0BAAO;AAAA;AAAA;AAAA;AAAA;AAc3B,IAAM,oBAAoB,wBAAC,EAAE,MAAM,MAAM,MACrC,4CAAC,4BACI,QAAQ,4CAAC,kBAAY,IAAK,GAC1B,SAAS,4CAAC,eAAY,aAAU,iBAAe,KAAM,CAC1D,GAJsB;AAO1B,IAAO,4BAAQ;",
|
|
6
6
|
"names": ["defaultImport"]
|
|
7
7
|
}
|
package/README.md
CHANGED
|
@@ -6,4 +6,4 @@ The dashboard toolbar is an array of menus that users can add to the Dashboard c
|
|
|
6
6
|
|
|
7
7
|
## Documentation
|
|
8
8
|
|
|
9
|
-
Please reference the [Splunk Dashboard Framework documentation](https://splunkui.
|
|
9
|
+
Please reference the [Splunk Dashboard Framework documentation](https://splunkui.splunk.com/Packages/dashboard-docs/?path=/Toolbar) for more details on how to use this component in concert with the rest of the dashboard framework library.
|
package/Toolbar.js
CHANGED
|
@@ -8,6 +8,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
8
8
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
9
9
|
var __getProtoOf = Object.getPrototypeOf;
|
|
10
10
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
11
12
|
var __export = (target, all) => {
|
|
12
13
|
for (var name in all)
|
|
13
14
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -109,7 +110,7 @@ var RightAlignItems = styled_components_default.div`
|
|
|
109
110
|
gap: ${themes_exports.variables.spacingSmall};
|
|
110
111
|
margin-inline-end: ${themes_exports.variables.spacingSmall};
|
|
111
112
|
`;
|
|
112
|
-
var Toolbar = ({
|
|
113
|
+
var Toolbar = /* @__PURE__ */ __name(({
|
|
113
114
|
activePanel,
|
|
114
115
|
dashboardApi,
|
|
115
116
|
mode,
|
|
@@ -186,7 +187,7 @@ var Toolbar = ({
|
|
|
186
187
|
},
|
|
187
188
|
rightAlignItems
|
|
188
189
|
));
|
|
189
|
-
};
|
|
190
|
+
}, "Toolbar");
|
|
190
191
|
Toolbar.displayName = "Toolbar";
|
|
191
192
|
var Toolbar_default = Toolbar;
|
|
192
193
|
//# sourceMappingURL=Toolbar.js.map
|
package/Toolbar.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["src/Toolbar.tsx", "react", "styled-components", "
|
|
3
|
+
"sources": ["src/Toolbar.tsx", "esm-externals:react", "esm-externals:styled-components", "esm-externals:@splunk/themes", "esm-externals:@splunk/themes/mixins", "esm-externals:@splunk/dashboard-state"],
|
|
4
4
|
"sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport styled from 'styled-components';\nimport { variables } from '@splunk/themes';\nimport { reset } from '@splunk/themes/mixins';\nimport { selectLayoutType, useSelector } from '@splunk/dashboard-state';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst ToolbarWrapper = styled.div`\n ${reset('flex')};\n justify-content: space-between;\n color: ${variables.contentColorDefault};\n padding: 5px 5px 5px 8px;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: ${variables.borderColor};\n flex-wrap: wrap;\n flex-shrink: 0;\n background-color: ${variables.backgroundColorNavigation};\n`;\n\nconst LeftAlignItems = styled.div`\n flex-grow: 1;\n display: flex;\n flex-direction: row;\n gap: ${variables.spacingSmall};\n`;\n\nconst RightAlignItems = styled.div`\n flex-basis: auto;\n display: flex;\n flex-direction: row;\n gap: ${variables.spacingSmall};\n margin-inline-end: ${variables.spacingSmall};\n`;\n\nexport type ToolbarProps = ToolbarButtonProps & {\n toolbarItems: React.ReactElement[];\n};\n\n/**\n * Dashboard Toolbar\n */\nconst Toolbar = ({\n activePanel,\n dashboardApi,\n mode,\n preset,\n toolbarItems,\n}: ToolbarProps) => {\n const layoutType = useSelector(selectLayoutType);\n const toolbarRef = useRef<HTMLDivElement | null>(null);\n\n /**\n * merge dashboard props with current item props\n * so that item have access to dashboard api and other stuff\n */\n const injectDashboardProps = useCallback(\n (items: React.ReactElement[]): React.ReactElement[] => {\n const buttonProps: ToolbarButtonProps = {\n activePanel,\n dashboardApi,\n layoutType,\n mode,\n preset,\n };\n\n return items.map((item) => React.cloneElement(item, buttonProps));\n },\n [activePanel, dashboardApi, layoutType, mode, preset]\n );\n\n const leftAlignItems = useMemo(() => {\n const items = toolbarItems.filter(\n (item) => item.props?.align !== 'right'\n );\n return injectDashboardProps(items);\n }, [toolbarItems, injectDashboardProps]);\n\n const rightAlignItems = useMemo(() => {\n const items = toolbarItems.filter(\n (item) => item.props?.align === 'right'\n );\n return injectDashboardProps(items);\n }, [toolbarItems, injectDashboardProps]);\n\n const observerRef = useRef<MutationObserver | null>(null);\n const isFirstRender = useRef(true);\n\n useEffect(() => {\n if (isFirstRender.current) {\n isFirstRender.current = false;\n return undefined;\n }\n\n observerRef.current = new MutationObserver(() => {\n const firstFocusableButton = toolbarRef.current?.querySelector(\n 'button:not([disabled]):not([aria-disabled=\"true\"]):not([tabindex=\"-1\"])'\n ) as HTMLButtonElement;\n\n firstFocusableButton?.focus();\n observerRef.current?.disconnect();\n });\n\n if (toolbarRef.current) {\n observerRef.current.observe(toolbarRef.current, {\n childList: true,\n subtree: true,\n });\n }\n\n return () => {\n observerRef.current?.disconnect();\n };\n }, [mode]);\n\n if (!toolbarItems.length) {\n return null;\n }\n\n return (\n <ToolbarWrapper data-test=\"dashboard-toolbar\" ref={toolbarRef}>\n <LeftAlignItems key=\"left-align-items\" data-test=\"left-align-items\">\n {leftAlignItems}\n </LeftAlignItems>\n <RightAlignItems\n key=\"right-align-items\"\n data-test=\"right-align-items\"\n >\n {rightAlignItems}\n </RightAlignItems>\n </ToolbarWrapper>\n );\n};\n\nToolbar.displayName = 'Toolbar';\nexport default Toolbar;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes/mixins\";\nexport * from \"@splunk/themes/mixins\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-state\";\nexport * from \"@splunk/dashboard-state\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AACA,oBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAa,gBAA8B,wBAAU;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAA,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,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,oCAAc;AACd,IAAO,0BAAS,aAAaA,iBAA8B,yBAAUA;;;ALIrE,IAAM,iBAAiB,0BAAO;AAAA,UACxB,sBAAM,MAAM,CAAC;AAAA;AAAA,aAEN,yBAAU,mBAAmB;AAAA;AAAA;AAAA;AAAA,2BAIf,yBAAU,WAAW;AAAA;AAAA;AAAA,wBAGxB,yBAAU,yBAAyB;AAAA;AAG3D,IAAM,iBAAiB,0BAAO;AAAA;AAAA;AAAA;AAAA,WAInB,yBAAU,YAAY;AAAA;AAGjC,IAAM,kBAAkB,0BAAO;AAAA;AAAA;AAAA;AAAA,WAIpB,yBAAU,YAAY;AAAA,yBACR,yBAAU,YAAY;AAAA;AAU/C,IAAM,UAAU,wBAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAoB;AAChB,QAAM,iBAAa,qCAAY,wCAAgB;AAC/C,QAAM,iBAAa,sBAA8B,IAAI;AAMrD,QAAM,2BAAuB;AAAA,IACzB,CAAC,UAAsD;AACnD,YAAM,cAAkC;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAEA,aAAO,MAAM,IAAI,CAAC,SAAS,cAAM,aAAa,MAAM,WAAW,CAAC;AAAA,IACpE;AAAA,IACA,CAAC,aAAa,cAAc,YAAY,MAAM,MAAM;AAAA,EACxD;AAEA,QAAM,qBAAiB,uBAAQ,MAAM;AACjC,UAAM,QAAQ,aAAa;AAAA,MACvB,CAAC,SAAM;AAzEnB;AAyEsB,2BAAK,UAAL,mBAAY,WAAU;AAAA;AAAA,IACpC;AACA,WAAO,qBAAqB,KAAK;AAAA,EACrC,GAAG,CAAC,cAAc,oBAAoB,CAAC;AAEvC,QAAM,sBAAkB,uBAAQ,MAAM;AAClC,UAAM,QAAQ,aAAa;AAAA,MACvB,CAAC,SAAM;AAhFnB;AAgFsB,2BAAK,UAAL,mBAAY,WAAU;AAAA;AAAA,IACpC;AACA,WAAO,qBAAqB,KAAK;AAAA,EACrC,GAAG,CAAC,cAAc,oBAAoB,CAAC;AAEvC,QAAM,kBAAc,sBAAgC,IAAI;AACxD,QAAM,oBAAgB,sBAAO,IAAI;AAEjC,+BAAU,MAAM;AACZ,QAAI,cAAc,SAAS;AACvB,oBAAc,UAAU;AACxB,aAAO;AAAA,IACX;AAEA,gBAAY,UAAU,IAAI,iBAAiB,MAAM;AA9FzD;AA+FY,YAAM,wBAAuB,gBAAW,YAAX,mBAAoB;AAAA,QAC7C;AAAA;AAGJ,mEAAsB;AACtB,wBAAY,YAAZ,mBAAqB;AAAA,IACzB,CAAC;AAED,QAAI,WAAW,SAAS;AACpB,kBAAY,QAAQ,QAAQ,WAAW,SAAS;AAAA,QAC5C,WAAW;AAAA,QACX,SAAS;AAAA,MACb,CAAC;AAAA,IACL;AAEA,WAAO,MAAM;AA9GrB;AA+GY,wBAAY,YAAZ,mBAAqB;AAAA,IACzB;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,aAAa,QAAQ;AACtB,WAAO;AAAA,EACX;AAEA,SACI,4CAAC,kBAAe,aAAU,qBAAoB,KAAK,cAC/C,4CAAC,kBAAe,KAAI,oBAAmB,aAAU,sBAC5C,cACL,GACA;AAAA,IAAC;AAAA;AAAA,MACG,KAAI;AAAA,MACJ,aAAU;AAAA;AAAA,IAET;AAAA,EACL,CACJ;AAER,GA1FgB;AA4FhB,QAAQ,cAAc;AACtB,IAAO,kBAAQ;",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/buttons/Charts.js
CHANGED
|
@@ -22,6 +22,7 @@ var __spreadValues = (a, b) => {
|
|
|
22
22
|
}
|
|
23
23
|
return a;
|
|
24
24
|
};
|
|
25
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
25
26
|
var __objRest = (source, exclude) => {
|
|
26
27
|
var target = {};
|
|
27
28
|
for (var prop in source)
|
|
@@ -159,7 +160,7 @@ var dashboard_state_default = "default" in defaultImport10 ? defaultImport10.def
|
|
|
159
160
|
var Item_default = styled_components_default.div``;
|
|
160
161
|
|
|
161
162
|
// src/hooks/useDropdown.ts
|
|
162
|
-
var useDropdown = ({
|
|
163
|
+
var useDropdown = /* @__PURE__ */ __name(({
|
|
163
164
|
isContentClickClose = true
|
|
164
165
|
}) => {
|
|
165
166
|
const [isOpen, setIsOpen] = (0, react_exports.useState)(false);
|
|
@@ -192,7 +193,7 @@ var useDropdown = ({
|
|
|
192
193
|
handleForceClose,
|
|
193
194
|
setHasChildModal
|
|
194
195
|
};
|
|
195
|
-
};
|
|
196
|
+
}, "useDropdown");
|
|
196
197
|
var useDropdown_default = useDropdown;
|
|
197
198
|
|
|
198
199
|
// esm-externals:@splunk/react-icons/CaretDown
|
|
@@ -228,7 +229,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
|
228
229
|
`;
|
|
229
230
|
var iconSize = 24;
|
|
230
231
|
var menuIconSize = 20;
|
|
231
|
-
var prepareIcon = (_a) => {
|
|
232
|
+
var prepareIcon = /* @__PURE__ */ __name((_a) => {
|
|
232
233
|
var _b = _a, {
|
|
233
234
|
Icon,
|
|
234
235
|
screenReaderContent,
|
|
@@ -240,7 +241,7 @@ var prepareIcon = (_a) => {
|
|
|
240
241
|
]);
|
|
241
242
|
const size = isMenu ? menuIconSize : iconSize;
|
|
242
243
|
return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(Icon, __spreadValues({ width: size, height: size }, props)), isMenu && /* @__PURE__ */ react_default.createElement(StyledDropdownIcon, { variant: "filled", width: 9, height: size }), screenReaderContent && /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, null, screenReaderContent));
|
|
243
|
-
};
|
|
244
|
+
}, "prepareIcon");
|
|
244
245
|
|
|
245
246
|
// src/components/StyledButton.tsx
|
|
246
247
|
var StyledDropdownButton = styled_components_default(Button_default)`
|
|
@@ -271,8 +272,11 @@ var ButtonToggle = /* @__PURE__ */ react_default.createElement(
|
|
|
271
272
|
icon: chartsDropdown
|
|
272
273
|
}
|
|
273
274
|
);
|
|
274
|
-
var focusToggleReasons = [
|
|
275
|
-
|
|
275
|
+
var focusToggleReasons = [
|
|
276
|
+
"escapeKey",
|
|
277
|
+
"tabKey"
|
|
278
|
+
];
|
|
279
|
+
var getVisualizationListFromTaxonomy = /* @__PURE__ */ __name(({
|
|
276
280
|
taxonomy,
|
|
277
281
|
handleCreateVisualization
|
|
278
282
|
}) => taxonomy.reduce(
|
|
@@ -308,8 +312,8 @@ var getVisualizationListFromTaxonomy = ({
|
|
|
308
312
|
);
|
|
309
313
|
},
|
|
310
314
|
[]
|
|
311
|
-
);
|
|
312
|
-
var Charts = ({ dashboardApi, preset }) => {
|
|
315
|
+
), "getVisualizationListFromTaxonomy");
|
|
316
|
+
var Charts = /* @__PURE__ */ __name(({ dashboardApi, preset }) => {
|
|
313
317
|
const { showNewDataForViz = true } = (0, dashboard_context_exports.useFeatureFlags)();
|
|
314
318
|
const { family } = (0, themes_exports.useSplunkTheme)();
|
|
315
319
|
const { handleForceClose, handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
|
|
@@ -379,6 +383,6 @@ var Charts = ({ dashboardApi, preset }) => {
|
|
|
379
383
|
},
|
|
380
384
|
renderScrollableMenu
|
|
381
385
|
));
|
|
382
|
-
};
|
|
386
|
+
}, "Charts");
|
|
383
387
|
var Charts_default = Charts;
|
|
384
388
|
//# sourceMappingURL=Charts.js.map
|
package/buttons/Charts.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/buttons/Charts.tsx", "react", "
|
|
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\ntype Visualizations = Taxonomy[number]['visualizations'];\n\n/**\n * export for unit testing\n * @private\n */\nexport const getVisualizationListFromTaxonomy = ({\n taxonomy,\n handleCreateVisualization,\n}: {\n taxonomy: Taxonomy;\n handleCreateVisualization: (opt: {\n type: string;\n options: Record<string, unknown>;\n }) => () => void;\n}): JSX.Element[] =>\n taxonomy.reduce(\n (list: React.ReactElement[], { visualizations, category }) => {\n const availableVisualizations: Visualizations =\n visualizations.filter((props) => props.includeInToolbar);\n\n if (availableVisualizations.length === 0) {\n return list;\n }\n\n list.push(<Menu.Divider key={`menu-divider-${category}`} />);\n\n return list.concat(\n availableVisualizations.map((vizProps) => {\n const { label, type, initialOptions } = vizProps;\n const Icon = vizProps.icon as React.JSXElementConstructor<\n Record<string, unknown>\n > | null;\n\n if (!type) {\n return null;\n }\n\n const onClick = handleCreateVisualization({\n type,\n options: initialOptions as Record<string, unknown>,\n });\n\n return (\n <Menu.Item\n data-test={`add-${type}-button`}\n data-test-clickable\n onClick={onClick}\n startAdornment={!!Icon && <Icon size=\"18px\" />}\n key={`add-${type}-button`}\n >\n {label}\n </Menu.Item>\n );\n }) as JSX.Element[]\n );\n },\n []\n );\n\n/**\n * Charts button that has a dropdown menu.\n */\nconst Charts = ({ dashboardApi, preset }: ToolbarButtonProps): JSX.Element => {\n const { showNewDataForViz = true } = useFeatureFlags();\n\n const { family } = useSplunkTheme();\n const { handleForceClose, handleRequestClose, handleRequestOpen, isOpen } =\n useDropdown({\n isContentClickClose: false,\n });\n\n const taxonomy: Taxonomy = useMemo(\n () => new VisualizationFilter(preset).taxonomy,\n [preset]\n );\n\n const handleCreateVisualization = useCallback(\n ({\n type,\n options,\n }: {\n type: string;\n options: Record<string, unknown>;\n }) =>\n () => {\n batch(() => {\n dashboardApi?.createVisualization({\n visualizationDefinition: { type, options },\n });\n\n if (showNewDataForViz) {\n dashboardApi?.openPanel({\n activePanel: 'connectData',\n panelProps: {\n bindingType: 'primary',\n from: {\n activePanel: 'config',\n },\n },\n });\n }\n });\n\n handleForceClose();\n },\n [dashboardApi, showNewDataForViz, handleForceClose]\n );\n\n const visualizationList = useMemo(\n () =>\n getVisualizationListFromTaxonomy({\n taxonomy,\n handleCreateVisualization,\n }),\n [taxonomy, handleCreateVisualization]\n );\n\n const renderScrollableMenu = useCallback<DropdownChildrenRenderer>(\n ({ maxHeight }) => (\n <SplunkThemeProvider\n density={family === 'enterprise' ? 'comfortable' : 'compact'}\n >\n <ScrollableMenu\n maxHeight={maxHeight}\n data-test=\"add-chart-menu\"\n >\n {visualizationList}\n </ScrollableMenu>\n </SplunkThemeProvider>\n ),\n [family, visualizationList]\n );\n\n return (\n <ToolbarItem>\n <Dropdown\n focusToggleReasons={focusToggleReasons}\n onRequestClose={handleRequestClose}\n onRequestOpen={handleRequestOpen}\n open={isOpen}\n toggle={ButtonToggle}\n >\n {renderScrollableMenu}\n </Dropdown>\n </ToolbarItem>\n );\n};\n\nexport default Charts;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Dropdown\";\nexport * from \"@splunk/react-ui/Dropdown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Menu\";\nexport * from \"@splunk/react-ui/Menu\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/ChartColumn\";\nexport * from \"@splunk/react-icons/ChartColumn\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-ui\";\nexport * from \"@splunk/dashboard-ui\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-context\";\nexport * from \"@splunk/dashboard-context\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-state\";\nexport * from \"@splunk/dashboard-state\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\n\nexport default styled.div``;\n", "import type { DropdownRequestCloseHandler } from '@splunk/react-ui/Dropdown';\nimport { useCallback, useRef, useState } from 'react';\n\ninterface UseDropdownArgs {\n isContentClickClose?: boolean;\n}\n\ninterface UseDropdownReturn {\n isOpen: boolean;\n handleRequestClose: DropdownRequestCloseHandler;\n handleRequestOpen: () => void;\n handleForceClose: () => void;\n setHasChildModal: (value: boolean) => void;\n}\n\n/**\n * Custom React Hook for the controlled SUI Dropdown component.\n *\n * @param {Object} config\n * @param {Boolean} config.isContentClickClose Control if dropdown children onClick's will close the dropdown automatically\n * @returns {Object} value\n * @returns {Boolean} value.isOpen The only state of this hook\n * @returns {Function} value.handleRequestOpen Event handler to open the dropdown\n * @returns {Function} value.handleRequestClose Event handler that SUI Dropdown calls when requested to close\n * @returns {Function} value.handleForceClose Event handler to forcefully close the dropdown\n */\nconst useDropdown = ({\n isContentClickClose = true,\n}: UseDropdownArgs): UseDropdownReturn => {\n const [isOpen, setIsOpen] = useState(false);\n const hasChildModal = useRef(false);\n\n const handleRequestClose = useCallback<DropdownRequestCloseHandler>(\n ({ reason }) => {\n if (reason === 'contentClick' && !isContentClickClose) {\n // This return results in the dropdown not closing.\n return;\n }\n\n // If there is a child modal then don't close the root on ESC press\n if (reason === 'escapeKey' && hasChildModal.current) {\n return;\n }\n\n setIsOpen(false);\n },\n [isContentClickClose]\n );\n\n const handleRequestOpen = useCallback(() => {\n setIsOpen(true);\n }, []);\n\n const handleForceClose = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const setHasChildModal = useCallback((value: boolean) => {\n hasChildModal.current = value;\n }, []);\n\n return {\n isOpen,\n handleRequestOpen,\n handleRequestClose,\n handleForceClose,\n setHasChildModal,\n };\n};\n\nexport default useDropdown;\n", "\nimport * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React from 'react';\nimport type SVG from '@splunk/react-icons/SVG';\nimport DropdownIcon from '@splunk/react-icons/CaretDown';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport Button, { type ButtonPropsBase } from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\nimport ToolbarItem from './Item';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledDropdownIcon = styled(DropdownIcon)`\n margin-left: -5px;\n`;\n\nexport const iconSize = 24;\nexport const menuIconSize = 20;\n\ninterface PrepareIconProps extends React.ComponentProps<typeof SVG> {\n Icon: React.ComponentType<React.ComponentProps<typeof SVG>>;\n screenReaderContent?: string;\n isMenu?: boolean;\n variant?: 'filled' | 'outline' | 'none';\n}\n\n/**\n * Button adds a bunch of padding when there's any child elements even if they don't display anything (screenReaderContent)\n * This bundles the primary icon, a menu caret and screenReaderContent as an icon when needed.\n * Additionally accepts any properties of any react-icons element to be applied to primary icon\n * @param {Object} arg\n * @param {React.ElementType} arg.Icon The primary icon\n * @param {boolean} [arg.isMenu=false] Display a menu caret\n * @param {string} [arg.screenReaderContent] A label for the icon\n * @param {string} [arg.variant] Fill the icon, or not\n * @returns {JSX.Element}\n */\nexport const prepareIcon = ({\n Icon,\n screenReaderContent,\n isMenu = false,\n ...props\n}: PrepareIconProps) => {\n const size = isMenu ? menuIconSize : iconSize;\n return (\n <>\n <Icon width={size} height={size} {...props} />\n {isMenu && (\n <StyledDropdownIcon variant=\"filled\" width={9} height={size} />\n )}\n {screenReaderContent && (\n <ScreenReaderContent>{screenReaderContent}</ScreenReaderContent>\n )}\n </>\n );\n};\n\nexport interface IconButtonProps extends ToolbarButtonProps {\n icon?: JSX.Element;\n onClick?: ButtonPropsBase['onClick'];\n label?: string;\n buttonRef?: React.RefObject<HTMLButtonElement>;\n testLabel?: string;\n disabled?: boolean;\n}\n\nconst IconButton = ({\n icon,\n buttonRef,\n disabled = false,\n onClick,\n label,\n testLabel,\n ...rest\n}: IconButtonProps): JSX.Element => {\n return (\n <ToolbarItem {...rest}>\n <Button\n elementRef={buttonRef}\n onClick={onClick}\n disabled={disabled}\n appearance=\"subtle\"\n icon={icon}\n label={label}\n data-test={testLabel}\n data-clickable\n />\n </ToolbarItem>\n );\n};\n\nexport default IconButton;\n", "import Button from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\n\nexport const StyledDropdownButton = styled(Button)`\n max-width: '50px';\n`;\n"],
|
|
5
|
-
"mappings": "
|
|
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", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Dropdown\";\nexport * from \"@splunk/react-ui/Dropdown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Menu\";\nexport * from \"@splunk/react-ui/Menu\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/ChartColumn\";\nexport * from \"@splunk/react-icons/ChartColumn\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-ui\";\nexport * from \"@splunk/dashboard-ui\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-context\";\nexport * from \"@splunk/dashboard-context\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-state\";\nexport * from \"@splunk/dashboard-state\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\n\nexport default styled.div``;\n", "import type { DropdownRequestCloseHandler } from '@splunk/react-ui/Dropdown';\nimport { useCallback, useRef, useState } from 'react';\n\ninterface UseDropdownArgs {\n isContentClickClose?: boolean;\n}\n\ninterface UseDropdownReturn {\n isOpen: boolean;\n handleRequestClose: DropdownRequestCloseHandler;\n handleRequestOpen: () => void;\n handleForceClose: () => void;\n setHasChildModal: (value: boolean) => void;\n}\n\n/**\n * Custom React Hook for the controlled SUI Dropdown component.\n *\n * @param {Object} config\n * @param {Boolean} config.isContentClickClose Control if dropdown children onClick's will close the dropdown automatically\n * @returns {Object} value\n * @returns {Boolean} value.isOpen The only state of this hook\n * @returns {Function} value.handleRequestOpen Event handler to open the dropdown\n * @returns {Function} value.handleRequestClose Event handler that SUI Dropdown calls when requested to close\n * @returns {Function} value.handleForceClose Event handler to forcefully close the dropdown\n */\nconst useDropdown = ({\n isContentClickClose = true,\n}: UseDropdownArgs): UseDropdownReturn => {\n const [isOpen, setIsOpen] = useState(false);\n const hasChildModal = useRef(false);\n\n const handleRequestClose = useCallback<DropdownRequestCloseHandler>(\n ({ reason }) => {\n if (reason === 'contentClick' && !isContentClickClose) {\n // This return results in the dropdown not closing.\n return;\n }\n\n // If there is a child modal then don't close the root on ESC press\n if (reason === 'escapeKey' && hasChildModal.current) {\n return;\n }\n\n setIsOpen(false);\n },\n [isContentClickClose]\n );\n\n const handleRequestOpen = useCallback(() => {\n setIsOpen(true);\n }, []);\n\n const handleForceClose = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const setHasChildModal = useCallback((value: boolean) => {\n hasChildModal.current = value;\n }, []);\n\n return {\n isOpen,\n handleRequestOpen,\n handleRequestClose,\n handleForceClose,\n setHasChildModal,\n };\n};\n\nexport default useDropdown;\n", "\nimport * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React from 'react';\nimport type SVG from '@splunk/react-icons/SVG';\nimport DropdownIcon from '@splunk/react-icons/CaretDown';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport Button, { type ButtonPropsBase } from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\nimport ToolbarItem from './Item';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledDropdownIcon = styled(DropdownIcon)`\n margin-left: -5px;\n`;\n\nexport const iconSize = 24;\nexport const menuIconSize = 20;\n\ninterface PrepareIconProps extends React.ComponentProps<typeof SVG> {\n Icon: React.ComponentType<React.ComponentProps<typeof SVG>>;\n screenReaderContent?: string;\n isMenu?: boolean;\n variant?: 'filled' | 'outline' | 'none';\n}\n\n/**\n * Button adds a bunch of padding when there's any child elements even if they don't display anything (screenReaderContent)\n * This bundles the primary icon, a menu caret and screenReaderContent as an icon when needed.\n * Additionally accepts any properties of any react-icons element to be applied to primary icon\n * @param {Object} arg\n * @param {React.ElementType} arg.Icon The primary icon\n * @param {boolean} [arg.isMenu=false] Display a menu caret\n * @param {string} [arg.screenReaderContent] A label for the icon\n * @param {string} [arg.variant] Fill the icon, or not\n * @returns {JSX.Element}\n */\nexport const prepareIcon = ({\n Icon,\n screenReaderContent,\n isMenu = false,\n ...props\n}: PrepareIconProps) => {\n const size = isMenu ? menuIconSize : iconSize;\n return (\n <>\n <Icon width={size} height={size} {...props} />\n {isMenu && (\n <StyledDropdownIcon variant=\"filled\" width={9} height={size} />\n )}\n {screenReaderContent && (\n <ScreenReaderContent>{screenReaderContent}</ScreenReaderContent>\n )}\n </>\n );\n};\n\nexport interface IconButtonProps extends ToolbarButtonProps {\n icon?: JSX.Element;\n onClick?: ButtonPropsBase['onClick'];\n label?: string;\n buttonRef?: React.RefObject<HTMLButtonElement>;\n testLabel?: string;\n disabled?: boolean;\n}\n\nconst IconButton = ({\n icon,\n buttonRef,\n disabled = false,\n onClick,\n label,\n testLabel,\n ...rest\n}: IconButtonProps): JSX.Element => {\n return (\n <ToolbarItem {...rest}>\n <Button\n elementRef={buttonRef}\n onClick={onClick}\n disabled={disabled}\n appearance=\"subtle\"\n icon={icon}\n label={label}\n data-test={testLabel}\n data-clickable\n />\n </ToolbarItem>\n );\n};\n\nexport default IconButton;\n", "import Button from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\n\nexport const StyledDropdownButton = styled(Button)`\n max-width: '50px';\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/buttons/Config.js
CHANGED
|
@@ -22,6 +22,7 @@ var __spreadValues = (a, b) => {
|
|
|
22
22
|
}
|
|
23
23
|
return a;
|
|
24
24
|
};
|
|
25
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
25
26
|
var __objRest = (source, exclude) => {
|
|
26
27
|
var target = {};
|
|
27
28
|
for (var prop in source)
|
|
@@ -145,7 +146,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
|
145
146
|
`;
|
|
146
147
|
var iconSize = 24;
|
|
147
148
|
var menuIconSize = 20;
|
|
148
|
-
var prepareIcon = (_a) => {
|
|
149
|
+
var prepareIcon = /* @__PURE__ */ __name((_a) => {
|
|
149
150
|
var _b = _a, {
|
|
150
151
|
Icon,
|
|
151
152
|
screenReaderContent,
|
|
@@ -157,8 +158,8 @@ var prepareIcon = (_a) => {
|
|
|
157
158
|
]);
|
|
158
159
|
const size = isMenu ? menuIconSize : iconSize;
|
|
159
160
|
return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(Icon, __spreadValues({ width: size, height: size }, props)), isMenu && /* @__PURE__ */ react_default.createElement(StyledDropdownIcon, { variant: "filled", width: 9, height: size }), screenReaderContent && /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, null, screenReaderContent));
|
|
160
|
-
};
|
|
161
|
-
var IconButton = (_a) => {
|
|
161
|
+
}, "prepareIcon");
|
|
162
|
+
var IconButton = /* @__PURE__ */ __name((_a) => {
|
|
162
163
|
var _b = _a, {
|
|
163
164
|
icon,
|
|
164
165
|
buttonRef,
|
|
@@ -187,7 +188,7 @@ var IconButton = (_a) => {
|
|
|
187
188
|
"data-clickable": true
|
|
188
189
|
}
|
|
189
190
|
));
|
|
190
|
-
};
|
|
191
|
+
}, "IconButton");
|
|
191
192
|
var IconButton_default = IconButton;
|
|
192
193
|
|
|
193
194
|
// src/buttons/Config.tsx
|
|
@@ -195,7 +196,7 @@ var configurationIcon = prepareIcon({
|
|
|
195
196
|
Icon: Cog_default,
|
|
196
197
|
screenReaderContent: (0, i18n_exports._)("Configuration")
|
|
197
198
|
});
|
|
198
|
-
var Config = ({ dashboardApi }) => {
|
|
199
|
+
var Config = /* @__PURE__ */ __name(({ dashboardApi }) => {
|
|
199
200
|
const configButtonRef = (0, dashboard_context_exports.useToolbarRef)("config");
|
|
200
201
|
const handleClick = (0, react_exports.useCallback)(() => {
|
|
201
202
|
const isOpen = (dashboardApi == null ? void 0 : dashboardApi.getOpenedPanel()) === "config";
|
|
@@ -219,6 +220,6 @@ var Config = ({ dashboardApi }) => {
|
|
|
219
220
|
icon: configurationIcon
|
|
220
221
|
}
|
|
221
222
|
);
|
|
222
|
-
};
|
|
223
|
+
}, "Config");
|
|
223
224
|
var Config_default = Config;
|
|
224
225
|
//# sourceMappingURL=Config.js.map
|
package/buttons/Config.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/buttons/Config.tsx", "react", "
|
|
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
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 screenReaderContent: _('Configuration'),\n});\n\n/**\n * Button that toggle open config panel\n */\nconst Config = ({ dashboardApi }: ToolbarButtonProps) => {\n const configButtonRef = useToolbarRef('config');\n\n const handleClick = useCallback(() => {\n const isOpen = dashboardApi?.getOpenedPanel() === 'config';\n if (isOpen) {\n dashboardApi?.closePanel();\n } else {\n // Open config panel\n dashboardApi?.openPanel({\n activePanel: 'config',\n panelProps: {\n focusOnOpen: true,\n },\n });\n }\n }, [dashboardApi]);\n\n return (\n <IconButton\n buttonRef={configButtonRef}\n testLabel=\"config-button\"\n onClick={handleClick}\n icon={configurationIcon}\n />\n );\n};\n\nexport default Config;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/Cog\";\nexport * from \"@splunk/react-icons/Cog\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-context\";\nexport * from \"@splunk/dashboard-context\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\n\nexport default styled.div``;\n", "import React from 'react';\nimport type SVG from '@splunk/react-icons/SVG';\nimport DropdownIcon from '@splunk/react-icons/CaretDown';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport Button, { type ButtonPropsBase } from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\nimport ToolbarItem from './Item';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledDropdownIcon = styled(DropdownIcon)`\n margin-left: -5px;\n`;\n\nexport const iconSize = 24;\nexport const menuIconSize = 20;\n\ninterface PrepareIconProps extends React.ComponentProps<typeof SVG> {\n Icon: React.ComponentType<React.ComponentProps<typeof SVG>>;\n screenReaderContent?: string;\n isMenu?: boolean;\n variant?: 'filled' | 'outline' | 'none';\n}\n\n/**\n * Button adds a bunch of padding when there's any child elements even if they don't display anything (screenReaderContent)\n * This bundles the primary icon, a menu caret and screenReaderContent as an icon when needed.\n * Additionally accepts any properties of any react-icons element to be applied to primary icon\n * @param {Object} arg\n * @param {React.ElementType} arg.Icon The primary icon\n * @param {boolean} [arg.isMenu=false] Display a menu caret\n * @param {string} [arg.screenReaderContent] A label for the icon\n * @param {string} [arg.variant] Fill the icon, or not\n * @returns {JSX.Element}\n */\nexport const prepareIcon = ({\n Icon,\n screenReaderContent,\n isMenu = false,\n ...props\n}: PrepareIconProps) => {\n const size = isMenu ? menuIconSize : iconSize;\n return (\n <>\n <Icon width={size} height={size} {...props} />\n {isMenu && (\n <StyledDropdownIcon variant=\"filled\" width={9} height={size} />\n )}\n {screenReaderContent && (\n <ScreenReaderContent>{screenReaderContent}</ScreenReaderContent>\n )}\n </>\n );\n};\n\nexport interface IconButtonProps extends ToolbarButtonProps {\n icon?: JSX.Element;\n onClick?: ButtonPropsBase['onClick'];\n label?: string;\n buttonRef?: React.RefObject<HTMLButtonElement>;\n testLabel?: string;\n disabled?: boolean;\n}\n\nconst IconButton = ({\n icon,\n buttonRef,\n disabled = false,\n onClick,\n label,\n testLabel,\n ...rest\n}: IconButtonProps): JSX.Element => {\n return (\n <ToolbarItem {...rest}>\n <Button\n elementRef={buttonRef}\n onClick={onClick}\n disabled={disabled}\n appearance=\"subtle\"\n icon={icon}\n label={label}\n data-test={testLabel}\n data-clickable\n />\n </ToolbarItem>\n );\n};\n\nexport default IconButton;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|