@splunk/dashboard-toolbar 29.1.0 → 29.2.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 +7 -13
- package/CollapsibleToolbar.js.map +2 -2
- package/IconButton.js +4 -5
- package/IconButton.js.map +1 -1
- package/ItemGroup.js +2 -3
- package/ItemGroup.js.map +1 -1
- package/PopoverItemButton.js +1 -2
- package/PopoverItemButton.js.map +1 -1
- package/Toolbar.js +2 -3
- package/Toolbar.js.map +1 -1
- package/buttons/Charts.js +8 -9
- package/buttons/Charts.js.map +1 -1
- package/buttons/Config.js +6 -7
- package/buttons/Config.js.map +1 -1
- package/buttons/ContentExport.js +6 -7
- package/buttons/ContentExport.js.map +1 -1
- package/buttons/Data.js +6 -7
- package/buttons/Data.js.map +1 -1
- package/buttons/EmptyVisualization.js +6 -7
- package/buttons/EmptyVisualization.js.map +1 -1
- package/buttons/ExportDashboardButton.js +2 -3
- package/buttons/ExportDashboardButton.js.map +1 -1
- package/buttons/Fullscreen.js +6 -7
- package/buttons/Fullscreen.js.map +1 -1
- package/buttons/GridLineSwitch.js +2 -3
- package/buttons/GridLineSwitch.js.map +1 -1
- package/buttons/HelpButton.js +6 -7
- package/buttons/HelpButton.js.map +1 -1
- package/buttons/IconGallery.js +6 -7
- package/buttons/IconGallery.js.map +1 -1
- package/buttons/Image.js +6 -7
- package/buttons/Image.js.map +1 -1
- package/buttons/ImageGallery.js +6 -7
- package/buttons/ImageGallery.js.map +1 -1
- package/buttons/Inputs.js +8 -9
- package/buttons/Inputs.js.map +1 -1
- package/buttons/Markdown.js +6 -7
- package/buttons/Markdown.js.map +1 -1
- package/buttons/ModeSwitch.js +2 -3
- package/buttons/ModeSwitch.js.map +1 -1
- package/buttons/Redo.js +6 -7
- package/buttons/Redo.js.map +1 -1
- package/buttons/Shapes.js +7 -8
- package/buttons/Shapes.js.map +1 -1
- package/buttons/Source.js +6 -7
- package/buttons/Source.js.map +1 -1
- package/buttons/Undo.js +6 -7
- package/buttons/Undo.js.map +1 -1
- package/buttons/index.js +219 -187
- package/buttons/index.js.map +4 -4
- package/groups/ActionsGroup.js +4 -5
- package/groups/ActionsGroup.js.map +1 -1
- package/groups/ControlGroup.js +97 -107
- package/groups/ControlGroup.js.map +4 -4
- package/groups/EditingGroup.js +115 -128
- package/groups/EditingGroup.js.map +4 -4
- package/groups/EditorGroup.js +98 -108
- package/groups/EditorGroup.js.map +4 -4
- package/groups/EditorsControlGroup.js +115 -125
- package/groups/EditorsControlGroup.js.map +4 -4
- package/groups/HistoryGroup.js +99 -109
- package/groups/HistoryGroup.js.map +4 -4
- package/groups/SidebarControlGroup.js +101 -111
- package/groups/SidebarControlGroup.js.map +4 -4
- package/groups/VisualizationGroup.js +117 -127
- package/groups/VisualizationGroup.js.map +4 -4
- package/groups/index.js +146 -159
- package/groups/index.js.map +4 -4
- package/index.js +201 -174
- package/index.js.map +4 -4
- 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 +42 -40
- package/module/chunks/{chunk-E5POXMHH.js → chunk-2KANDQBI.js} +11 -12
- package/module/chunks/{chunk-E5POXMHH.js.map → chunk-2KANDQBI.js.map} +1 -1
- package/module/chunks/{chunk-HTZYYFJO.js → chunk-2KBENXG3.js} +2 -2
- package/module/chunks/{chunk-ZCC73T4R.js → chunk-2OAGCVHC.js} +7 -8
- package/module/chunks/{chunk-ZCC73T4R.js.map → chunk-2OAGCVHC.js.map} +1 -1
- package/module/chunks/{chunk-CXXSJOFS.js → chunk-2QBSLWJJ.js} +2 -2
- package/module/chunks/{chunk-AD6EIRYL.js → chunk-47MSCQAS.js} +10 -11
- package/module/chunks/{chunk-AD6EIRYL.js.map → chunk-47MSCQAS.js.map} +1 -1
- package/module/chunks/{chunk-LKIWD6NR.js → chunk-4CPQH3IK.js} +11 -12
- package/module/chunks/{chunk-LKIWD6NR.js.map → chunk-4CPQH3IK.js.map} +1 -1
- package/module/chunks/chunk-4NRVBOUP.js +28 -0
- package/module/chunks/{chunk-2G23SAZZ.js.map → chunk-4NRVBOUP.js.map} +1 -1
- package/module/chunks/{chunk-UERW7LTA.js → chunk-4Y6PRJOC.js} +7 -8
- package/module/chunks/{chunk-UERW7LTA.js.map → chunk-4Y6PRJOC.js.map} +1 -1
- package/module/chunks/{chunk-SMDUMR2P.js → chunk-56627Y63.js} +12 -13
- package/module/chunks/{chunk-SMDUMR2P.js.map → chunk-56627Y63.js.map} +1 -1
- package/module/chunks/{chunk-3QT355V5.js → chunk-5D7CUYUH.js} +2 -2
- package/module/chunks/{chunk-AG73TP3S.js → chunk-6MLJBCIJ.js} +9 -12
- package/module/chunks/{chunk-AG73TP3S.js.map → chunk-6MLJBCIJ.js.map} +1 -1
- package/module/chunks/{chunk-GIXERSIF.js → chunk-6SUOFSGJ.js} +9 -10
- package/module/chunks/{chunk-GIXERSIF.js.map → chunk-6SUOFSGJ.js.map} +1 -1
- package/module/chunks/{chunk-3NDLE64O.js → chunk-ACSHFRXI.js} +7 -8
- package/module/chunks/{chunk-3NDLE64O.js.map → chunk-ACSHFRXI.js.map} +1 -1
- package/module/chunks/{chunk-Q4EASNDZ.js → chunk-BSXRAEA2.js} +9 -10
- package/module/chunks/{chunk-Q4EASNDZ.js.map → chunk-BSXRAEA2.js.map} +1 -1
- package/module/chunks/{chunk-SELLU76G.js → chunk-C3NA7YCT.js} +7 -10
- package/module/chunks/{chunk-SELLU76G.js.map → chunk-C3NA7YCT.js.map} +1 -1
- package/module/chunks/{chunk-LATZ7CUV.js → chunk-D27CPPHI.js} +4 -7
- package/module/chunks/{chunk-LATZ7CUV.js.map → chunk-D27CPPHI.js.map} +1 -1
- package/module/chunks/{chunk-HXK4QHPR.js → chunk-FREEN2T3.js} +3 -3
- package/module/chunks/{chunk-I7XN7DKU.js → chunk-GAXH7J77.js} +2 -2
- package/module/chunks/{chunk-5TGHI5GV.js → chunk-GFSNM45K.js} +2 -2
- package/module/chunks/{chunk-GUWB2JIP.js → chunk-H7C24E7Q.js} +10 -11
- package/module/chunks/{chunk-GUWB2JIP.js.map → chunk-H7C24E7Q.js.map} +1 -1
- package/module/chunks/{chunk-L2MCGOFY.js → chunk-HOKI2CUB.js} +2 -2
- package/module/chunks/{chunk-QPUZLO5O.js → chunk-IIPBKMJD.js} +2 -2
- package/module/chunks/{chunk-JHFAWC4B.js → chunk-IITJ2NKO.js} +8 -9
- package/module/chunks/{chunk-JHFAWC4B.js.map → chunk-IITJ2NKO.js.map} +1 -1
- package/module/chunks/{chunk-HPEHWRJP.js → chunk-ILJYO5B3.js} +97 -63
- package/module/chunks/chunk-ILJYO5B3.js.map +7 -0
- package/module/chunks/{chunk-KDMM6KX4.js → chunk-JGTSF7O4.js} +8 -9
- package/module/chunks/{chunk-KDMM6KX4.js.map → chunk-JGTSF7O4.js.map} +1 -1
- package/module/chunks/{chunk-3R73WRRN.js → chunk-JOFJS4UX.js} +13 -14
- package/module/chunks/{chunk-3R73WRRN.js.map → chunk-JOFJS4UX.js.map} +1 -1
- package/module/chunks/{chunk-DU4JCIM3.js → chunk-KUPEYUWA.js} +2 -2
- package/module/chunks/{chunk-YBGLF5LF.js → chunk-LGNNSZ2O.js} +13 -14
- package/module/chunks/{chunk-YBGLF5LF.js.map → chunk-LGNNSZ2O.js.map} +1 -1
- package/module/chunks/chunk-LLLZNICJ.js +31 -0
- package/module/chunks/{chunk-FLMBGMR4.js.map → chunk-LLLZNICJ.js.map} +1 -1
- package/module/chunks/{chunk-BDLV2ADM.js → chunk-MRXRYL4Y.js} +3 -3
- package/module/chunks/{chunk-2GRHFRZD.js → chunk-MTPPRK4H.js} +14 -15
- package/module/chunks/{chunk-2GRHFRZD.js.map → chunk-MTPPRK4H.js.map} +1 -1
- package/module/chunks/{chunk-ANTP4L4N.js → chunk-MWYPBMHI.js} +13 -14
- package/module/chunks/{chunk-ANTP4L4N.js.map → chunk-MWYPBMHI.js.map} +1 -1
- package/module/chunks/{chunk-WPBXWBTX.js → chunk-NKC5QFQ5.js} +7 -8
- package/module/chunks/{chunk-WPBXWBTX.js.map → chunk-NKC5QFQ5.js.map} +1 -1
- package/module/chunks/{chunk-4L4BWEM7.js → chunk-O74T4JNL.js} +2 -2
- package/module/chunks/{chunk-AIH4ILPH.js → chunk-OQXE7KAJ.js} +9 -12
- package/module/chunks/{chunk-AIH4ILPH.js.map → chunk-OQXE7KAJ.js.map} +1 -1
- package/module/chunks/{chunk-PMXVITCC.js → chunk-OSX3RDKV.js} +2 -2
- package/module/chunks/{chunk-5CXOMUN4.js → chunk-PVT2JFAW.js} +6 -7
- package/module/chunks/{chunk-5CXOMUN4.js.map → chunk-PVT2JFAW.js.map} +1 -1
- package/module/chunks/{chunk-3DNLXDXA.js → chunk-Q67T3UVN.js} +8 -9
- package/module/chunks/{chunk-3DNLXDXA.js.map → chunk-Q67T3UVN.js.map} +1 -1
- package/module/chunks/{chunk-TLNR3NED.js → chunk-QPL25LDX.js} +8 -9
- package/module/chunks/{chunk-TLNR3NED.js.map → chunk-QPL25LDX.js.map} +1 -1
- package/module/chunks/{chunk-N3HJVTLY.js → chunk-RIR6YMJC.js} +17 -23
- package/module/chunks/chunk-RIR6YMJC.js.map +7 -0
- package/module/chunks/{chunk-BXDA2XH4.js → chunk-RQY6BB7F.js} +2 -2
- package/module/chunks/{chunk-6L4PTRMO.js → chunk-RZJ2PCV4.js} +2 -2
- package/module/chunks/{chunk-7CJM54O3.js → chunk-UOT4CE2C.js} +8 -11
- package/module/chunks/{chunk-7CJM54O3.js.map → chunk-UOT4CE2C.js.map} +1 -1
- package/module/chunks/{chunk-4PUMQWA5.js → chunk-VCWH2JHM.js} +5 -6
- package/module/chunks/{chunk-4PUMQWA5.js.map → chunk-VCWH2JHM.js.map} +1 -1
- package/module/chunks/{chunk-PHOUPWEN.js → chunk-VE4HUG27.js} +2 -2
- package/module/chunks/{chunk-B5OBVUF5.js → chunk-VQIRZ53C.js} +1 -3
- package/module/chunks/{chunk-SRI3BMZH.js → chunk-WADWICSE.js} +9 -10
- package/module/chunks/{chunk-SRI3BMZH.js.map → chunk-WADWICSE.js.map} +1 -1
- package/module/chunks/{chunk-AROBR6WM.js → chunk-X4VCE6GS.js} +10 -11
- package/module/chunks/{chunk-AROBR6WM.js.map → chunk-X4VCE6GS.js.map} +1 -1
- package/module/chunks/{chunk-6VIKADMF.js → chunk-XIZP3DYZ.js} +2 -2
- package/module/chunks/{chunk-BR42RPXM.js → chunk-YMZGQ7CB.js} +8 -9
- package/module/chunks/{chunk-BR42RPXM.js.map → chunk-YMZGQ7CB.js.map} +1 -1
- package/module/chunks/{chunk-SPVRIPCR.js → chunk-ZSBWP6MR.js} +18 -19
- package/module/chunks/{chunk-SPVRIPCR.js.map → chunk-ZSBWP6MR.js.map} +1 -1
- 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 +53 -51
- package/package.json +19 -21
- package/types/CollapsibleToolbar.d.ts.map +1 -1
- package/types/buttons/AIAssistant/AIAssistant.d.ts +3 -0
- package/types/buttons/AIAssistant/AIAssistant.d.ts.map +1 -0
- package/types/buttons/AIAssistant/index.d.ts +2 -0
- package/types/buttons/AIAssistant/index.d.ts.map +1 -0
- package/types/buttons/Zoom/Zoom.d.ts.map +1 -1
- package/types/buttons/index.d.ts +1 -0
- package/types/buttons/index.d.ts.map +1 -1
- package/module/chunks/chunk-2G23SAZZ.js +0 -29
- package/module/chunks/chunk-FLMBGMR4.js +0 -32
- package/module/chunks/chunk-HPEHWRJP.js.map +0 -7
- package/module/chunks/chunk-N3HJVTLY.js.map +0 -7
- /package/module/chunks/{chunk-HTZYYFJO.js.map → chunk-2KBENXG3.js.map} +0 -0
- /package/module/chunks/{chunk-CXXSJOFS.js.map → chunk-2QBSLWJJ.js.map} +0 -0
- /package/module/chunks/{chunk-3QT355V5.js.map → chunk-5D7CUYUH.js.map} +0 -0
- /package/module/chunks/{chunk-HXK4QHPR.js.map → chunk-FREEN2T3.js.map} +0 -0
- /package/module/chunks/{chunk-I7XN7DKU.js.map → chunk-GAXH7J77.js.map} +0 -0
- /package/module/chunks/{chunk-5TGHI5GV.js.map → chunk-GFSNM45K.js.map} +0 -0
- /package/module/chunks/{chunk-L2MCGOFY.js.map → chunk-HOKI2CUB.js.map} +0 -0
- /package/module/chunks/{chunk-QPUZLO5O.js.map → chunk-IIPBKMJD.js.map} +0 -0
- /package/module/chunks/{chunk-DU4JCIM3.js.map → chunk-KUPEYUWA.js.map} +0 -0
- /package/module/chunks/{chunk-BDLV2ADM.js.map → chunk-MRXRYL4Y.js.map} +0 -0
- /package/module/chunks/{chunk-4L4BWEM7.js.map → chunk-O74T4JNL.js.map} +0 -0
- /package/module/chunks/{chunk-PMXVITCC.js.map → chunk-OSX3RDKV.js.map} +0 -0
- /package/module/chunks/{chunk-BXDA2XH4.js.map → chunk-RQY6BB7F.js.map} +0 -0
- /package/module/chunks/{chunk-6L4PTRMO.js.map → chunk-RZJ2PCV4.js.map} +0 -0
- /package/module/chunks/{chunk-PHOUPWEN.js.map → chunk-VE4HUG27.js.map} +0 -0
- /package/module/chunks/{chunk-B5OBVUF5.js.map → chunk-VQIRZ53C.js.map} +0 -0
- /package/module/chunks/{chunk-6VIKADMF.js.map → chunk-XIZP3DYZ.js.map} +0 -0
package/CollapsibleToolbar.js
CHANGED
|
@@ -8,7 +8,6 @@ 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 });
|
|
12
11
|
var __export = (target, all) => {
|
|
13
12
|
for (var name in all)
|
|
14
13
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -188,16 +187,10 @@ var transition = styled_components_exports.css`
|
|
|
188
187
|
var ExpandButton = styled_components_default(Button_default)`
|
|
189
188
|
// To get specific enough to override the default Button styling
|
|
190
189
|
&& {
|
|
191
|
-
// We shrink the button a bit when the toolbar is expanded since it
|
|
192
|
-
// switches to a circle button and needs a bit more space to breath
|
|
193
190
|
height: ${({ expanded }) => expanded ? `${TOOLBAR_HEIGHT - 4}px` : `${TOOLBAR_HEIGHT}px`};
|
|
194
191
|
width: ${({ expanded }) => expanded ? `${TOOLBAR_HEIGHT - 4}px` : `${TOOLBAR_HEIGHT}px`};
|
|
195
192
|
margin: ${({ expanded }) => expanded ? "0 4px 0 4px" : "0"};
|
|
196
|
-
|
|
197
|
-
border: none;
|
|
198
|
-
box-shadow: none;
|
|
199
|
-
background-color: ${themes_exports.variables.backgroundColorNavigation};
|
|
200
|
-
border-radius: ${(props) => props.expanded ? "40px" : "0 0 0 20px"};
|
|
193
|
+
border-radius: ${(props) => props.expanded ? "" : "0 0 0 20px"};
|
|
201
194
|
transition-property: border-radius, height, width, margin-right;
|
|
202
195
|
${transition}
|
|
203
196
|
}
|
|
@@ -205,7 +198,7 @@ var ExpandButton = styled_components_default(Button_default)`
|
|
|
205
198
|
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")));
|
|
206
199
|
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")));
|
|
207
200
|
var DEFAULT_PRESET_MAP = Object.freeze({});
|
|
208
|
-
var CollapsibleToolbar =
|
|
201
|
+
var CollapsibleToolbar = ({
|
|
209
202
|
preset = DEFAULT_PRESET_MAP,
|
|
210
203
|
dashboardApi,
|
|
211
204
|
initialExpanded = true,
|
|
@@ -237,9 +230,9 @@ var CollapsibleToolbar = /* @__PURE__ */ __name(({
|
|
|
237
230
|
);
|
|
238
231
|
(0, react_exports.useEffect)(() => {
|
|
239
232
|
const toolbarApiRef = {
|
|
240
|
-
toggle:
|
|
241
|
-
expand:
|
|
242
|
-
collapse:
|
|
233
|
+
toggle: () => handleExpandToggle(),
|
|
234
|
+
expand: () => setExpanded(true),
|
|
235
|
+
collapse: () => setExpanded(false)
|
|
243
236
|
};
|
|
244
237
|
apiRegistry.registerToolbarApi(toolbarApiRef);
|
|
245
238
|
return () => {
|
|
@@ -249,6 +242,7 @@ var CollapsibleToolbar = /* @__PURE__ */ __name(({
|
|
|
249
242
|
return /* @__PURE__ */ react_default.createElement(ToolbarWrapper, { "data-test": "dashboard-toolbar" }, /* @__PURE__ */ react_default.createElement(StyledTransitionOpen, { animation: "slideFromRight", open: expanded }, /* @__PURE__ */ react_default.createElement(ToolbarItemsWrapper, { "data-test": "toolbar-items" }, injectedToolbarItems)), /* @__PURE__ */ react_default.createElement(
|
|
250
243
|
ExpandButton,
|
|
251
244
|
{
|
|
245
|
+
appearance: "subtle",
|
|
252
246
|
"data-test": "expand-button",
|
|
253
247
|
expanded,
|
|
254
248
|
onClick: handleExpandToggle,
|
|
@@ -256,7 +250,7 @@ var CollapsibleToolbar = /* @__PURE__ */ __name(({
|
|
|
256
250
|
"data-clickable": true
|
|
257
251
|
}
|
|
258
252
|
));
|
|
259
|
-
}
|
|
253
|
+
};
|
|
260
254
|
CollapsibleToolbar.displayName = "CollapsibleToolbar";
|
|
261
255
|
var CollapsibleToolbar_default = CollapsibleToolbar;
|
|
262
256
|
//# sourceMappingURL=CollapsibleToolbar.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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)`\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": "
|
|
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 height: ${({ expanded }) =>\n expanded ? `${TOOLBAR_HEIGHT - 4}px` : `${TOOLBAR_HEIGHT}px`};\n width: ${({ expanded }) =>\n expanded ? `${TOOLBAR_HEIGHT - 4}px` : `${TOOLBAR_HEIGHT}px`};\n margin: ${({ expanded }) => (expanded ? '0 4px 0 4px' : '0')};\n border-radius: ${(props) => (props.expanded ? '' : '0 0 0 20px')};\n transition-property: border-radius, height, width, margin-right;\n ${transition}\n }\n`;\n\nconst expandedIcon = (\n <>\n <ChevronRight width={iconSize} height={iconSize} />\n <ScreenReaderContent>{_('Expanded')}</ScreenReaderContent>\n </>\n);\n\nconst collapsedIcon = (\n <>\n <ChevronLeft width={iconSize} height={iconSize} />\n <ScreenReaderContent>{_('Collapsed')}</ScreenReaderContent>\n </>\n);\n\nexport type CollapsibleToolbarProps = CommonToolbarBaseProps & {\n initialExpanded?: boolean;\n toolbarItems?: React.ReactElement[];\n};\n\nconst DEFAULT_PRESET_MAP = Object.freeze({} as PresetMap);\n\nconst CollapsibleToolbar = ({\n preset = DEFAULT_PRESET_MAP,\n dashboardApi,\n initialExpanded = true,\n mode = 'view',\n toolbarItems = [],\n}: CollapsibleToolbarProps): React.ReactElement | null => {\n const apiRegistry = useApiRegistry();\n const [expanded, setExpanded] = useState(initialExpanded);\n const handleExpandToggle = useCallback(\n () => setExpanded((prevExpanded) => !prevExpanded),\n []\n );\n\n const layoutType = useSelector(selectLayoutType);\n\n const injectedToolbarItems = useMemo(\n () =>\n toolbarItems.map((item) =>\n cloneElement(item, {\n mode,\n preset,\n layoutType,\n dashboardApi,\n borders: false,\n })\n ),\n [toolbarItems, mode, preset, dashboardApi, layoutType]\n );\n\n const ExpandButtonIcon = useMemo(\n () => (expanded ? expandedIcon : collapsedIcon),\n [expanded]\n );\n\n useEffect(() => {\n const toolbarApiRef = {\n toggle: () => handleExpandToggle(),\n expand: () => setExpanded(true),\n collapse: () => setExpanded(false),\n };\n\n apiRegistry.registerToolbarApi(toolbarApiRef);\n\n return () => {\n apiRegistry.removeToolbarApi();\n };\n }, [apiRegistry, handleExpandToggle]);\n\n return (\n <ToolbarWrapper data-test=\"dashboard-toolbar\">\n <StyledTransitionOpen animation=\"slideFromRight\" open={expanded}>\n <ToolbarItemsWrapper data-test=\"toolbar-items\">\n {injectedToolbarItems}\n </ToolbarItemsWrapper>\n </StyledTransitionOpen>\n <ExpandButton\n appearance=\"subtle\"\n data-test=\"expand-button\"\n expanded={expanded}\n onClick={handleExpandToggle}\n icon={ExpandButtonIcon}\n data-clickable\n />\n </ToolbarWrapper>\n );\n};\n\nCollapsibleToolbar.displayName = 'CollapsibleToolbar';\n\nexport default CollapsibleToolbar;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-context\";\nexport * from \"@splunk/dashboard-context\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/TransitionOpen\";\nexport * from \"@splunk/react-ui/TransitionOpen\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/ChevronRight\";\nexport * from \"@splunk/react-icons/ChevronRight\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/ChevronLeft\";\nexport * from \"@splunk/react-icons/ChevronLeft\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-state\";\nexport * from \"@splunk/dashboard-state\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import styled from 'styled-components';\n\nexport default styled.div``;\n", "import React from 'react';\nimport type SVG from '@splunk/react-icons/SVG';\nimport DropdownIcon from '@splunk/react-icons/CaretDown';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport Button, { type ButtonPropsBase } from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\nimport ToolbarItem from './Item';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledDropdownIcon = styled(DropdownIcon)`\n margin-left: -5px;\n`;\n\nexport const iconSize = 24;\nexport const menuIconSize = 20;\n\ninterface PrepareIconProps extends React.ComponentProps<typeof SVG> {\n Icon: React.ComponentType<React.ComponentProps<typeof SVG>>;\n screenReaderContent?: string;\n isMenu?: boolean;\n variant?: 'filled' | 'outline' | 'none';\n}\n\n/**\n * Button adds a bunch of padding when there's any child elements even if they don't display anything (screenReaderContent)\n * This bundles the primary icon, a menu caret and screenReaderContent as an icon when needed.\n * Additionally accepts any properties of any react-icons element to be applied to primary icon\n * @param {Object} arg\n * @param {React.ElementType} arg.Icon The primary icon\n * @param {boolean} [arg.isMenu=false] Display a menu caret\n * @param {string} [arg.screenReaderContent] A label for the icon\n * @param {string} [arg.variant] Fill the icon, or not\n * @returns {JSX.Element}\n */\nexport const prepareIcon = ({\n Icon,\n screenReaderContent,\n isMenu = false,\n ...props\n}: PrepareIconProps) => {\n const size = isMenu ? menuIconSize : iconSize;\n return (\n <>\n <Icon width={size} height={size} {...props} />\n {isMenu && (\n <StyledDropdownIcon variant=\"filled\" width={9} height={size} />\n )}\n {screenReaderContent && (\n <ScreenReaderContent>{screenReaderContent}</ScreenReaderContent>\n )}\n </>\n );\n};\n\nexport interface IconButtonProps extends ToolbarButtonProps {\n icon?: JSX.Element;\n onClick?: ButtonPropsBase['onClick'];\n label?: string;\n buttonRef?: React.RefObject<HTMLButtonElement>;\n testLabel?: string;\n disabled?: boolean;\n}\n\nconst IconButton = ({\n icon,\n buttonRef,\n disabled = false,\n onClick,\n label,\n testLabel,\n ...rest\n}: IconButtonProps): JSX.Element => {\n return (\n <ToolbarItem {...rest}>\n <Button\n elementRef={buttonRef}\n onClick={onClick}\n disabled={disabled}\n appearance=\"subtle\"\n icon={icon}\n label={label}\n data-test={testLabel}\n data-clickable\n />\n </ToolbarItem>\n );\n};\n\nexport default IconButton;\n"],
|
|
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,7 +22,6 @@ var __spreadValues = (a, b) => {
|
|
|
22
22
|
}
|
|
23
23
|
return a;
|
|
24
24
|
};
|
|
25
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
26
25
|
var __objRest = (source, exclude) => {
|
|
27
26
|
var target = {};
|
|
28
27
|
for (var prop in source)
|
|
@@ -122,7 +121,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
|
122
121
|
`;
|
|
123
122
|
var iconSize = 24;
|
|
124
123
|
var menuIconSize = 20;
|
|
125
|
-
var prepareIcon =
|
|
124
|
+
var prepareIcon = (_a) => {
|
|
126
125
|
var _b = _a, {
|
|
127
126
|
Icon,
|
|
128
127
|
screenReaderContent,
|
|
@@ -134,8 +133,8 @@ var prepareIcon = /* @__PURE__ */ __name((_a) => {
|
|
|
134
133
|
]);
|
|
135
134
|
const size = isMenu ? menuIconSize : iconSize;
|
|
136
135
|
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));
|
|
137
|
-
}
|
|
138
|
-
var IconButton =
|
|
136
|
+
};
|
|
137
|
+
var IconButton = (_a) => {
|
|
139
138
|
var _b = _a, {
|
|
140
139
|
icon,
|
|
141
140
|
buttonRef,
|
|
@@ -164,6 +163,6 @@ var IconButton = /* @__PURE__ */ __name((_a) => {
|
|
|
164
163
|
"data-clickable": true
|
|
165
164
|
}
|
|
166
165
|
));
|
|
167
|
-
}
|
|
166
|
+
};
|
|
168
167
|
var IconButton_default = IconButton;
|
|
169
168
|
//# sourceMappingURL=IconButton.js.map
|
package/IconButton.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
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
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,CAAC,OAKJ;AALI,eACxB;AAAA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EArCb,IAkC4B,IAIrB,kBAJqB,IAIrB;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,OAAO,SAAS,eAAe;AACrC,SACI,0EACI,4CAAC,uBAAK,OAAO,MAAM,QAAQ,QAAU,MAAO,GAC3C,UACG,4CAAC,sBAAmB,SAAQ,UAAS,OAAO,GAAG,QAAQ,MAAM,GAEhE,uBACG,4CAAC,mCAAqB,mBAAoB,CAElD;AAER;AAWA,IAAM,aAAa,CAAC,OAQgB;AARhB,eAChB;AAAA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,EArEJ,IA+DoB,IAOb,iBAPa,IAOb;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACI,4CAAC,iCAAgB,OACb;AAAA,IAAC;AAAA;AAAA,MACG,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,YAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX,kBAAc;AAAA;AAAA,EAClB,CACJ;AAER;AAEA,IAAO,qBAAQ;",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/ItemGroup.js
CHANGED
|
@@ -10,7 +10,6 @@ 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 });
|
|
14
13
|
var __objRest = (source, exclude) => {
|
|
15
14
|
var target = {};
|
|
16
15
|
for (var prop in source)
|
|
@@ -107,7 +106,7 @@ var Group = styled_components_default.div.attrs({
|
|
|
107
106
|
flex-direction: row;
|
|
108
107
|
gap: ${(props) => props.gap};
|
|
109
108
|
`;
|
|
110
|
-
var ItemGroup =
|
|
109
|
+
var ItemGroup = (_a) => {
|
|
111
110
|
var _b = _a, {
|
|
112
111
|
children,
|
|
113
112
|
borders = true,
|
|
@@ -123,6 +122,6 @@ var ItemGroup = /* @__PURE__ */ __name((_a) => {
|
|
|
123
122
|
);
|
|
124
123
|
const separator = borders ? /* @__PURE__ */ react_default.createElement(ItemSeparator_default, null) : null;
|
|
125
124
|
return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(Group, { gap: (0, dashboard_utils_exports.toPx)(gap, 2) }, items), separator);
|
|
126
|
-
}
|
|
125
|
+
};
|
|
127
126
|
var ItemGroup_default = ItemGroup;
|
|
128
127
|
//# sourceMappingURL=ItemGroup.js.map
|
package/ItemGroup.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
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,CAAC,OAKG;AALH,eACf;AAAA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EA3BJ,IAwBmB,IAIZ,iBAJY,IAIZ;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,QAAQ,cAAM,SAAS;AAAA,IACzB;AAAA,IACA,CAAC,UAAU,SAAS,cAAM,aAAa,OAAsB,IAAI;AAAA,EACrE;AACA,QAAM,YAAY,UAAU,4CAAC,2BAAc,IAAK;AAChD,SACI,0EACI,4CAAC,SAAM,SAAK,8BAAK,KAAK,CAAC,KAAI,KAAM,GAChC,SACL;AAER;AAEA,IAAO,oBAAQ;",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/PopoverItemButton.js
CHANGED
|
@@ -8,7 +8,6 @@ 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 });
|
|
12
11
|
var __export = (target, all) => {
|
|
13
12
|
for (var name in all)
|
|
14
13
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -74,6 +73,6 @@ var StyledLabel = styled_components_default.span`
|
|
|
74
73
|
overflow: hidden;
|
|
75
74
|
flex: 0 1 auto;
|
|
76
75
|
`;
|
|
77
|
-
var PopoverItemButton =
|
|
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));
|
|
78
77
|
var PopoverItemButton_default = PopoverItemButton;
|
|
79
78
|
//# sourceMappingURL=PopoverItemButton.js.map
|
package/PopoverItemButton.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
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,CAAC,EAAE,MAAM,MAAM,MACrC,4CAAC,4BACI,QAAQ,4CAAC,kBAAY,IAAK,GAC1B,SAAS,4CAAC,eAAY,aAAU,iBAAe,KAAM,CAC1D;AAGJ,IAAO,4BAAQ;",
|
|
6
6
|
"names": ["defaultImport"]
|
|
7
7
|
}
|
package/Toolbar.js
CHANGED
|
@@ -8,7 +8,6 @@ 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 });
|
|
12
11
|
var __export = (target, all) => {
|
|
13
12
|
for (var name in all)
|
|
14
13
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -110,7 +109,7 @@ var RightAlignItems = styled_components_default.div`
|
|
|
110
109
|
gap: ${themes_exports.variables.spacingSmall};
|
|
111
110
|
margin-inline-end: ${themes_exports.variables.spacingSmall};
|
|
112
111
|
`;
|
|
113
|
-
var Toolbar =
|
|
112
|
+
var Toolbar = ({
|
|
114
113
|
activePanel,
|
|
115
114
|
dashboardApi,
|
|
116
115
|
mode,
|
|
@@ -187,7 +186,7 @@ var Toolbar = /* @__PURE__ */ __name(({
|
|
|
187
186
|
},
|
|
188
187
|
rightAlignItems
|
|
189
188
|
));
|
|
190
|
-
}
|
|
189
|
+
};
|
|
191
190
|
Toolbar.displayName = "Toolbar";
|
|
192
191
|
var Toolbar_default = Toolbar;
|
|
193
192
|
//# sourceMappingURL=Toolbar.js.map
|
package/Toolbar.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
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": "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",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/buttons/Charts.js
CHANGED
|
@@ -22,7 +22,6 @@ var __spreadValues = (a, b) => {
|
|
|
22
22
|
}
|
|
23
23
|
return a;
|
|
24
24
|
};
|
|
25
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
26
25
|
var __objRest = (source, exclude) => {
|
|
27
26
|
var target = {};
|
|
28
27
|
for (var prop in source)
|
|
@@ -160,7 +159,7 @@ var dashboard_state_default = "default" in defaultImport10 ? defaultImport10.def
|
|
|
160
159
|
var Item_default = styled_components_default.div``;
|
|
161
160
|
|
|
162
161
|
// src/hooks/useDropdown.ts
|
|
163
|
-
var useDropdown =
|
|
162
|
+
var useDropdown = ({
|
|
164
163
|
isContentClickClose = true
|
|
165
164
|
}) => {
|
|
166
165
|
const [isOpen, setIsOpen] = (0, react_exports.useState)(false);
|
|
@@ -193,7 +192,7 @@ var useDropdown = /* @__PURE__ */ __name(({
|
|
|
193
192
|
handleForceClose,
|
|
194
193
|
setHasChildModal
|
|
195
194
|
};
|
|
196
|
-
}
|
|
195
|
+
};
|
|
197
196
|
var useDropdown_default = useDropdown;
|
|
198
197
|
|
|
199
198
|
// esm-externals:@splunk/react-icons/CaretDown
|
|
@@ -229,7 +228,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
|
229
228
|
`;
|
|
230
229
|
var iconSize = 24;
|
|
231
230
|
var menuIconSize = 20;
|
|
232
|
-
var prepareIcon =
|
|
231
|
+
var prepareIcon = (_a) => {
|
|
233
232
|
var _b = _a, {
|
|
234
233
|
Icon,
|
|
235
234
|
screenReaderContent,
|
|
@@ -241,7 +240,7 @@ var prepareIcon = /* @__PURE__ */ __name((_a) => {
|
|
|
241
240
|
]);
|
|
242
241
|
const size = isMenu ? menuIconSize : iconSize;
|
|
243
242
|
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));
|
|
244
|
-
}
|
|
243
|
+
};
|
|
245
244
|
|
|
246
245
|
// src/components/StyledButton.tsx
|
|
247
246
|
var StyledDropdownButton = styled_components_default(Button_default)`
|
|
@@ -276,7 +275,7 @@ var focusToggleReasons = [
|
|
|
276
275
|
"escapeKey",
|
|
277
276
|
"tabKey"
|
|
278
277
|
];
|
|
279
|
-
var getVisualizationListFromTaxonomy =
|
|
278
|
+
var getVisualizationListFromTaxonomy = ({
|
|
280
279
|
taxonomy,
|
|
281
280
|
handleCreateVisualization
|
|
282
281
|
}) => taxonomy.reduce(
|
|
@@ -312,8 +311,8 @@ var getVisualizationListFromTaxonomy = /* @__PURE__ */ __name(({
|
|
|
312
311
|
);
|
|
313
312
|
},
|
|
314
313
|
[]
|
|
315
|
-
)
|
|
316
|
-
var Charts =
|
|
314
|
+
);
|
|
315
|
+
var Charts = ({ dashboardApi, preset }) => {
|
|
317
316
|
const { showNewDataForViz = true } = (0, dashboard_context_exports.useFeatureFlags)();
|
|
318
317
|
const { family } = (0, themes_exports.useSplunkTheme)();
|
|
319
318
|
const { handleForceClose, handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
|
|
@@ -383,6 +382,6 @@ var Charts = /* @__PURE__ */ __name(({ dashboardApi, preset }) => {
|
|
|
383
382
|
},
|
|
384
383
|
renderScrollableMenu
|
|
385
384
|
));
|
|
386
|
-
}
|
|
385
|
+
};
|
|
387
386
|
var Charts_default = Charts;
|
|
388
387
|
//# sourceMappingURL=Charts.js.map
|
package/buttons/Charts.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
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
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": "
|
|
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,7 +22,6 @@ var __spreadValues = (a, b) => {
|
|
|
22
22
|
}
|
|
23
23
|
return a;
|
|
24
24
|
};
|
|
25
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
26
25
|
var __objRest = (source, exclude) => {
|
|
27
26
|
var target = {};
|
|
28
27
|
for (var prop in source)
|
|
@@ -146,7 +145,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
|
146
145
|
`;
|
|
147
146
|
var iconSize = 24;
|
|
148
147
|
var menuIconSize = 20;
|
|
149
|
-
var prepareIcon =
|
|
148
|
+
var prepareIcon = (_a) => {
|
|
150
149
|
var _b = _a, {
|
|
151
150
|
Icon,
|
|
152
151
|
screenReaderContent,
|
|
@@ -158,8 +157,8 @@ var prepareIcon = /* @__PURE__ */ __name((_a) => {
|
|
|
158
157
|
]);
|
|
159
158
|
const size = isMenu ? menuIconSize : iconSize;
|
|
160
159
|
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));
|
|
161
|
-
}
|
|
162
|
-
var IconButton =
|
|
160
|
+
};
|
|
161
|
+
var IconButton = (_a) => {
|
|
163
162
|
var _b = _a, {
|
|
164
163
|
icon,
|
|
165
164
|
buttonRef,
|
|
@@ -188,7 +187,7 @@ var IconButton = /* @__PURE__ */ __name((_a) => {
|
|
|
188
187
|
"data-clickable": true
|
|
189
188
|
}
|
|
190
189
|
));
|
|
191
|
-
}
|
|
190
|
+
};
|
|
192
191
|
var IconButton_default = IconButton;
|
|
193
192
|
|
|
194
193
|
// src/buttons/Config.tsx
|
|
@@ -196,7 +195,7 @@ var configurationIcon = prepareIcon({
|
|
|
196
195
|
Icon: Cog_default,
|
|
197
196
|
screenReaderContent: (0, i18n_exports._)("Configuration")
|
|
198
197
|
});
|
|
199
|
-
var Config =
|
|
198
|
+
var Config = ({ dashboardApi }) => {
|
|
200
199
|
const configButtonRef = (0, dashboard_context_exports.useToolbarRef)("config");
|
|
201
200
|
const handleClick = (0, react_exports.useCallback)(() => {
|
|
202
201
|
const isOpen = (dashboardApi == null ? void 0 : dashboardApi.getOpenedPanel()) === "config";
|
|
@@ -220,6 +219,6 @@ var Config = /* @__PURE__ */ __name(({ dashboardApi }) => {
|
|
|
220
219
|
icon: configurationIcon
|
|
221
220
|
}
|
|
222
221
|
);
|
|
223
|
-
}
|
|
222
|
+
};
|
|
224
223
|
var Config_default = Config;
|
|
225
224
|
//# sourceMappingURL=Config.js.map
|
package/buttons/Config.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
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
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
|
}
|
package/buttons/ContentExport.js
CHANGED
|
@@ -22,7 +22,6 @@ var __spreadValues = (a, b) => {
|
|
|
22
22
|
}
|
|
23
23
|
return a;
|
|
24
24
|
};
|
|
25
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
26
25
|
var __objRest = (source, exclude) => {
|
|
27
26
|
var target = {};
|
|
28
27
|
for (var prop in source)
|
|
@@ -137,7 +136,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
|
137
136
|
`;
|
|
138
137
|
var iconSize = 24;
|
|
139
138
|
var menuIconSize = 20;
|
|
140
|
-
var prepareIcon =
|
|
139
|
+
var prepareIcon = (_a) => {
|
|
141
140
|
var _b = _a, {
|
|
142
141
|
Icon,
|
|
143
142
|
screenReaderContent,
|
|
@@ -149,8 +148,8 @@ var prepareIcon = /* @__PURE__ */ __name((_a) => {
|
|
|
149
148
|
]);
|
|
150
149
|
const size = isMenu ? menuIconSize : iconSize;
|
|
151
150
|
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));
|
|
152
|
-
}
|
|
153
|
-
var IconButton =
|
|
151
|
+
};
|
|
152
|
+
var IconButton = (_a) => {
|
|
154
153
|
var _b = _a, {
|
|
155
154
|
icon: icon2,
|
|
156
155
|
buttonRef,
|
|
@@ -179,7 +178,7 @@ var IconButton = /* @__PURE__ */ __name((_a) => {
|
|
|
179
178
|
"data-clickable": true
|
|
180
179
|
}
|
|
181
180
|
));
|
|
182
|
-
}
|
|
181
|
+
};
|
|
183
182
|
var IconButton_default = IconButton;
|
|
184
183
|
|
|
185
184
|
// src/buttons/ContentExport.tsx
|
|
@@ -187,7 +186,7 @@ var icon = prepareIcon({
|
|
|
187
186
|
Icon: ArrowBroadUnderbarDown_default,
|
|
188
187
|
screenReaderContent: (0, i18n_exports._)("Export")
|
|
189
188
|
});
|
|
190
|
-
var ContentExport =
|
|
189
|
+
var ContentExport = ({ disabled, onClick }) => /* @__PURE__ */ react_default.createElement(
|
|
191
190
|
IconButton_default,
|
|
192
191
|
{
|
|
193
192
|
testLabel: "content-export-button",
|
|
@@ -195,6 +194,6 @@ var ContentExport = /* @__PURE__ */ __name(({ disabled, onClick }) => /* @__PURE
|
|
|
195
194
|
disabled: !!disabled,
|
|
196
195
|
icon
|
|
197
196
|
}
|
|
198
|
-
)
|
|
197
|
+
);
|
|
199
198
|
var ContentExport_default = ContentExport;
|
|
200
199
|
//# sourceMappingURL=ContentExport.js.map
|