@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/buttons/IconGallery.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)
|
|
@@ -156,7 +157,7 @@ var StyledDropdownButton = styled_components_default(Button_default)`
|
|
|
156
157
|
var Item_default = styled_components_default.div``;
|
|
157
158
|
|
|
158
159
|
// src/hooks/useDropdown.ts
|
|
159
|
-
var useDropdown = ({
|
|
160
|
+
var useDropdown = /* @__PURE__ */ __name(({
|
|
160
161
|
isContentClickClose = true
|
|
161
162
|
}) => {
|
|
162
163
|
const [isOpen, setIsOpen] = (0, react_exports.useState)(false);
|
|
@@ -189,7 +190,7 @@ var useDropdown = ({
|
|
|
189
190
|
handleForceClose,
|
|
190
191
|
setHasChildModal
|
|
191
192
|
};
|
|
192
|
-
};
|
|
193
|
+
}, "useDropdown");
|
|
193
194
|
var useDropdown_default = useDropdown;
|
|
194
195
|
|
|
195
196
|
// esm-externals:@splunk/react-icons/CaretDown
|
|
@@ -216,7 +217,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
|
216
217
|
`;
|
|
217
218
|
var iconSize = 24;
|
|
218
219
|
var menuIconSize = 20;
|
|
219
|
-
var prepareIcon = (_a) => {
|
|
220
|
+
var prepareIcon = /* @__PURE__ */ __name((_a) => {
|
|
220
221
|
var _b = _a, {
|
|
221
222
|
Icon,
|
|
222
223
|
screenReaderContent,
|
|
@@ -228,7 +229,7 @@ var prepareIcon = (_a) => {
|
|
|
228
229
|
]);
|
|
229
230
|
const size = isMenu ? menuIconSize : iconSize;
|
|
230
231
|
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));
|
|
231
|
-
};
|
|
232
|
+
}, "prepareIcon");
|
|
232
233
|
|
|
233
234
|
// src/buttons/IconGallery.tsx
|
|
234
235
|
var MenusContainer = styled_components_default.div`
|
|
@@ -240,8 +241,11 @@ var iconGalleryDropdown = prepareIcon({
|
|
|
240
241
|
screenReaderContent: (0, i18n_exports._)("Add icon"),
|
|
241
242
|
isMenu: true
|
|
242
243
|
});
|
|
243
|
-
var focusToggleReasons = [
|
|
244
|
-
|
|
244
|
+
var focusToggleReasons = [
|
|
245
|
+
"escapeKey",
|
|
246
|
+
"tabKey"
|
|
247
|
+
];
|
|
248
|
+
var IconGallery = /* @__PURE__ */ __name(({ dashboardApi }) => {
|
|
245
249
|
const {
|
|
246
250
|
handleForceClose,
|
|
247
251
|
handleRequestClose,
|
|
@@ -264,7 +268,7 @@ var IconGallery = ({ dashboardApi }) => {
|
|
|
264
268
|
[]
|
|
265
269
|
);
|
|
266
270
|
const handlePanelClick = (0, react_exports.useCallback)(
|
|
267
|
-
(iconURL) => __async(
|
|
271
|
+
(iconURL) => __async(null, null, function* () {
|
|
268
272
|
dashboardApi == null ? void 0 : dashboardApi.createVisualization({
|
|
269
273
|
visualizationDefinition: {
|
|
270
274
|
type: "splunk.singlevalueicon",
|
|
@@ -298,6 +302,6 @@ var IconGallery = ({ dashboardApi }) => {
|
|
|
298
302
|
}
|
|
299
303
|
))
|
|
300
304
|
));
|
|
301
|
-
};
|
|
305
|
+
}, "IconGallery");
|
|
302
306
|
var IconGallery_default = IconGallery;
|
|
303
307
|
//# sourceMappingURL=IconGallery.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/buttons/IconGallery.tsx", "react", "styled-components", "
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport styled from 'styled-components';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport Dropdown from '@splunk/react-ui/Dropdown';\n\nimport AddIconDropdown from '@splunk/react-icons/ChartSingleValueIcon';\nimport { IconGallery as IconGalleryPanel } from '@splunk/dashboard-ui';\n\nimport { StyledDropdownButton } from '../components/StyledButton';\nimport ToolbarItem from '../Item';\nimport useDropdown from '../hooks/useDropdown';\nimport { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst MenusContainer = styled.div`\n display: flex;\n padding: 5px;\n`;\n\nconst iconGalleryDropdown = prepareIcon({\n Icon: AddIconDropdown,\n screenReaderContent: _('Add icon'),\n isMenu: true,\n});\n\nconst focusToggleReasons: never[] = [];\n\n/**\n * Icon Gallery button that has as a dropdown menu.\n */\nconst IconGallery = ({ dashboardApi }: ToolbarButtonProps) => {\n const {\n handleForceClose,\n handleRequestClose,\n handleRequestOpen,\n setHasChildModal,\n isOpen,\n } = useDropdown({\n isContentClickClose: false,\n });\n\n const ButtonToggle = useMemo(\n () => (\n <StyledDropdownButton\n data-test=\"icon-gallery-button\"\n data-clickable\n appearance=\"subtle\"\n icon={iconGalleryDropdown}\n />\n ),\n []\n );\n const handlePanelClick = useCallback(\n async (iconURL: string) => {\n dashboardApi?.createVisualization({\n visualizationDefinition: {\n type: 'splunk.singlevalueicon',\n options: {\n showValue: false,\n icon: iconURL,\n },\n },\n });\n dashboardApi?.openPanel({\n activePanel: 'config',\n });\n handleForceClose();\n },\n [dashboardApi, handleForceClose]\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 <MenusContainer data-test=\"icon-menu\" data-open={isOpen}>\n <IconGalleryPanel\n onClick={handlePanelClick}\n setHasChildModal={setHasChildModal}\n />\n </MenusContainer>\n </Dropdown>\n </ToolbarItem>\n );\n};\n\nexport default IconGallery;\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/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\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-icons/ChartSingleValueIcon\";\nexport * from \"@splunk/react-icons/ChartSingleValueIcon\";\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/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import Button from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\n\nexport const StyledDropdownButton = styled(Button)`\n max-width: '50px';\n`;\n", "import 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", "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": "
|
|
3
|
+
"sources": ["../src/buttons/IconGallery.tsx", "esm-externals:react", "esm-externals:styled-components", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/react-ui/Dropdown", "esm-externals:@splunk/react-icons/ChartSingleValueIcon", "esm-externals:@splunk/dashboard-ui", "esm-externals:@splunk/react-ui/Button", "../src/components/StyledButton.tsx", "../src/Item.tsx", "../src/hooks/useDropdown.ts", "esm-externals:@splunk/react-icons/CaretDown", "esm-externals:@splunk/react-ui/ScreenReaderContent", "../src/IconButton.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport styled from 'styled-components';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport Dropdown, {\n type DropdownPossibleCloseReason,\n} from '@splunk/react-ui/Dropdown';\n\nimport AddIconDropdown from '@splunk/react-icons/ChartSingleValueIcon';\nimport { IconGallery as IconGalleryPanel } from '@splunk/dashboard-ui';\n\nimport { StyledDropdownButton } from '../components/StyledButton';\nimport ToolbarItem from '../Item';\nimport useDropdown from '../hooks/useDropdown';\nimport { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst MenusContainer = styled.div`\n display: flex;\n padding: 5px;\n`;\n\nconst iconGalleryDropdown = prepareIcon({\n Icon: AddIconDropdown,\n screenReaderContent: _('Add icon'),\n isMenu: true,\n});\n\nconst focusToggleReasons: DropdownPossibleCloseReason[] = [\n 'escapeKey',\n 'tabKey',\n];\n\n/**\n * Icon Gallery button that has as a dropdown menu.\n */\nconst IconGallery = ({ dashboardApi }: ToolbarButtonProps) => {\n const {\n handleForceClose,\n handleRequestClose,\n handleRequestOpen,\n setHasChildModal,\n isOpen,\n } = useDropdown({\n isContentClickClose: false,\n });\n\n const ButtonToggle = useMemo(\n () => (\n <StyledDropdownButton\n data-test=\"icon-gallery-button\"\n data-clickable\n appearance=\"subtle\"\n icon={iconGalleryDropdown}\n />\n ),\n []\n );\n const handlePanelClick = useCallback(\n async (iconURL: string) => {\n dashboardApi?.createVisualization({\n visualizationDefinition: {\n type: 'splunk.singlevalueicon',\n options: {\n showValue: false,\n icon: iconURL,\n },\n },\n });\n dashboardApi?.openPanel({\n activePanel: 'config',\n });\n handleForceClose();\n },\n [dashboardApi, handleForceClose]\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 <MenusContainer data-test=\"icon-menu\" data-open={isOpen}>\n <IconGalleryPanel\n onClick={handlePanelClick}\n setHasChildModal={setHasChildModal}\n />\n </MenusContainer>\n </Dropdown>\n </ToolbarItem>\n );\n};\n\nexport default IconGallery;\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/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\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-icons/ChartSingleValueIcon\";\nexport * from \"@splunk/react-icons/ChartSingleValueIcon\";\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/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import Button from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\n\nexport const StyledDropdownButton = styled(Button)`\n max-width: '50px';\n`;\n", "import 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", "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", "IconGalleryPanel"]
|
|
7
7
|
}
|
package/buttons/Image.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)
|
|
@@ -156,7 +157,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
|
156
157
|
`;
|
|
157
158
|
var iconSize = 24;
|
|
158
159
|
var menuIconSize = 20;
|
|
159
|
-
var prepareIcon = (_a) => {
|
|
160
|
+
var prepareIcon = /* @__PURE__ */ __name((_a) => {
|
|
160
161
|
var _b = _a, {
|
|
161
162
|
Icon,
|
|
162
163
|
screenReaderContent,
|
|
@@ -168,8 +169,8 @@ var prepareIcon = (_a) => {
|
|
|
168
169
|
]);
|
|
169
170
|
const size = isMenu ? menuIconSize : iconSize;
|
|
170
171
|
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));
|
|
171
|
-
};
|
|
172
|
-
var IconButton = (_a) => {
|
|
172
|
+
}, "prepareIcon");
|
|
173
|
+
var IconButton = /* @__PURE__ */ __name((_a) => {
|
|
173
174
|
var _b = _a, {
|
|
174
175
|
icon: icon2,
|
|
175
176
|
buttonRef,
|
|
@@ -198,7 +199,7 @@ var IconButton = (_a) => {
|
|
|
198
199
|
"data-clickable": true
|
|
199
200
|
}
|
|
200
201
|
));
|
|
201
|
-
};
|
|
202
|
+
}, "IconButton");
|
|
202
203
|
var IconButton_default = IconButton;
|
|
203
204
|
|
|
204
205
|
// src/buttons/Image.tsx
|
|
@@ -206,8 +207,8 @@ var icon = prepareIcon({
|
|
|
206
207
|
Icon: Picture_default,
|
|
207
208
|
screenReaderContent: (0, i18n_exports._)("Add image")
|
|
208
209
|
});
|
|
209
|
-
var Image = ({ dashboardApi }) => {
|
|
210
|
-
const handleClick = (0, react_exports.useCallback)(() => __async(
|
|
210
|
+
var Image = /* @__PURE__ */ __name(({ dashboardApi }) => {
|
|
211
|
+
const handleClick = (0, react_exports.useCallback)(() => __async(null, null, function* () {
|
|
211
212
|
dashboardApi == null ? void 0 : dashboardApi.createVisualization({
|
|
212
213
|
visualizationDefinition: {
|
|
213
214
|
type: "splunk.image",
|
|
@@ -228,6 +229,6 @@ var Image = ({ dashboardApi }) => {
|
|
|
228
229
|
icon
|
|
229
230
|
}
|
|
230
231
|
);
|
|
231
|
-
};
|
|
232
|
+
}, "Image");
|
|
232
233
|
var Image_default = Image;
|
|
233
234
|
//# sourceMappingURL=Image.js.map
|
package/buttons/Image.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/buttons/Image.tsx", "react", "
|
|
3
|
+
"sources": ["../src/buttons/Image.tsx", "esm-externals:react", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/react-icons/Picture", "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';\n\nimport { _ } from '@splunk/ui-utils/i18n';\nimport Picture from '@splunk/react-icons/Picture';\n\nimport IconButton, { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst icon = prepareIcon({\n Icon: Picture,\n screenReaderContent: _('Add image'),\n});\n\n/**\n * Button that create a empty image\n */\nconst Image = ({ dashboardApi }: ToolbarButtonProps) => {\n const handleClick = useCallback(async () => {\n dashboardApi?.createVisualization({\n visualizationDefinition: {\n type: 'splunk.image',\n options: {\n preserveAspectRatio: true,\n },\n },\n });\n\n dashboardApi?.openPanel({\n activePanel: 'config',\n });\n }, [dashboardApi]);\n\n return (\n <IconButton\n testLabel=\"image-button\"\n onClick={handleClick}\n icon={icon}\n />\n );\n};\n\nexport default Image;\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/Picture\";\nexport * from \"@splunk/react-icons/Picture\";\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AACA,oBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAa,gBAA8B,wBAAU;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAA,iBAA+B;AAC/B,yBAAc;AACd,IAAO,eAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,4BAAc;AACd,IAAO,kBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,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;;;ACOtB,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,UAAAC;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,MAAMA;AAAA,MACN;AAAA,MACA,aAAW;AAAA,MACX,kBAAc;AAAA;AAAA,EAClB,CACJ;AAER,GAvBmB;AAyBnB,IAAO,qBAAQ;;;AThFf,IAAM,OAAO,YAAY;AAAA,EACrB,MAAM;AAAA,EACN,yBAAqB,gBAAE,WAAW;AACtC,CAAC;AAKD,IAAM,QAAQ,wBAAC,EAAE,aAAa,MAA0B;AACpD,QAAM,kBAAc,2BAAY,MAAY;AACxC,iDAAc,oBAAoB;AAAA,MAC9B,yBAAyB;AAAA,QACrB,MAAM;AAAA,QACN,SAAS;AAAA,UACL,qBAAqB;AAAA,QACzB;AAAA,MACJ;AAAA,IACJ;AAEA,iDAAc,UAAU;AAAA,MACpB,aAAa;AAAA,IACjB;AAAA,EACJ,IAAG,CAAC,YAAY,CAAC;AAEjB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAU;AAAA,MACV,SAAS;AAAA,MACT;AAAA;AAAA,EACJ;AAER,GAvBc;AAyBd,IAAO,gBAAQ;",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "icon"]
|
|
7
7
|
}
|
package/buttons/ImageGallery.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)
|
|
@@ -156,7 +157,7 @@ var StyledDropdownButton = styled_components_default(Button_default)`
|
|
|
156
157
|
var Item_default = styled_components_default.div``;
|
|
157
158
|
|
|
158
159
|
// src/hooks/useDropdown.ts
|
|
159
|
-
var useDropdown = ({
|
|
160
|
+
var useDropdown = /* @__PURE__ */ __name(({
|
|
160
161
|
isContentClickClose = true
|
|
161
162
|
}) => {
|
|
162
163
|
const [isOpen, setIsOpen] = (0, react_exports.useState)(false);
|
|
@@ -189,7 +190,7 @@ var useDropdown = ({
|
|
|
189
190
|
handleForceClose,
|
|
190
191
|
setHasChildModal
|
|
191
192
|
};
|
|
192
|
-
};
|
|
193
|
+
}, "useDropdown");
|
|
193
194
|
var useDropdown_default = useDropdown;
|
|
194
195
|
|
|
195
196
|
// esm-externals:@splunk/react-icons/CaretDown
|
|
@@ -216,7 +217,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
|
216
217
|
`;
|
|
217
218
|
var iconSize = 24;
|
|
218
219
|
var menuIconSize = 20;
|
|
219
|
-
var prepareIcon = (_a) => {
|
|
220
|
+
var prepareIcon = /* @__PURE__ */ __name((_a) => {
|
|
220
221
|
var _b = _a, {
|
|
221
222
|
Icon,
|
|
222
223
|
screenReaderContent,
|
|
@@ -228,7 +229,7 @@ var prepareIcon = (_a) => {
|
|
|
228
229
|
]);
|
|
229
230
|
const size = isMenu ? menuIconSize : iconSize;
|
|
230
231
|
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));
|
|
231
|
-
};
|
|
232
|
+
}, "prepareIcon");
|
|
232
233
|
|
|
233
234
|
// src/buttons/ImageGallery.tsx
|
|
234
235
|
var MenusContainer = styled_components_default.div`
|
|
@@ -250,7 +251,7 @@ var ButtonToggle = /* @__PURE__ */ react_default.createElement(
|
|
|
250
251
|
}
|
|
251
252
|
);
|
|
252
253
|
var focusToggleReasons = [];
|
|
253
|
-
var ImageGallery = ({ dashboardApi }) => {
|
|
254
|
+
var ImageGallery = /* @__PURE__ */ __name(({ dashboardApi }) => {
|
|
254
255
|
const {
|
|
255
256
|
handleForceClose,
|
|
256
257
|
handleRequestClose,
|
|
@@ -261,7 +262,7 @@ var ImageGallery = ({ dashboardApi }) => {
|
|
|
261
262
|
isContentClickClose: false
|
|
262
263
|
});
|
|
263
264
|
const handlePanelClick = (0, react_exports.useCallback)(
|
|
264
|
-
(imageUrl) => __async(
|
|
265
|
+
(imageUrl) => __async(null, null, function* () {
|
|
265
266
|
dashboardApi == null ? void 0 : dashboardApi.createVisualization({
|
|
266
267
|
visualizationDefinition: {
|
|
267
268
|
type: "splunk.image",
|
|
@@ -295,6 +296,6 @@ var ImageGallery = ({ dashboardApi }) => {
|
|
|
295
296
|
}
|
|
296
297
|
))
|
|
297
298
|
));
|
|
298
|
-
};
|
|
299
|
+
}, "ImageGallery");
|
|
299
300
|
var ImageGallery_default = ImageGallery;
|
|
300
301
|
//# sourceMappingURL=ImageGallery.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/buttons/ImageGallery.tsx", "react", "styled-components", "
|
|
3
|
+
"sources": ["../src/buttons/ImageGallery.tsx", "esm-externals:react", "esm-externals:styled-components", "esm-externals:@splunk/react-ui/Dropdown", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/react-icons/Picture", "esm-externals:@splunk/dashboard-ui", "esm-externals:@splunk/react-ui/Button", "../src/components/StyledButton.tsx", "../src/Item.tsx", "../src/hooks/useDropdown.ts", "esm-externals:@splunk/react-icons/CaretDown", "esm-externals:@splunk/react-ui/ScreenReaderContent", "../src/IconButton.tsx"],
|
|
4
4
|
"sourcesContent": ["import React, { useCallback } from 'react';\nimport styled from 'styled-components';\n\nimport Dropdown from '@splunk/react-ui/Dropdown';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nimport AddImage from '@splunk/react-icons/Picture';\n\nimport { ImageGallery as ImageGalleryPanel } from '@splunk/dashboard-ui';\n\nimport { StyledDropdownButton } from '../components/StyledButton';\nimport ToolbarItem from '../Item';\nimport useDropdown from '../hooks/useDropdown';\nimport { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst MenusContainer = styled.div`\n display: flex;\n padding: 5px;\n`;\n\nconst imageGalleryDropdown = prepareIcon({\n Icon: AddImage,\n screenReaderContent: _('Add image'),\n isMenu: true,\n});\n\nconst ButtonToggle = (\n <StyledDropdownButton\n data-test=\"image-gallery-button\"\n data-clickable\n appearance=\"subtle\"\n icon={imageGalleryDropdown}\n />\n);\n\nconst focusToggleReasons: never[] = [];\n\n/**\n * Image Gallery button that has as a dropdown menu.\n */\nconst ImageGallery = ({ dashboardApi }: ToolbarButtonProps) => {\n const {\n handleForceClose,\n handleRequestClose,\n handleRequestOpen,\n setHasChildModal,\n isOpen,\n } = useDropdown({\n isContentClickClose: false,\n });\n\n const handlePanelClick = useCallback(\n async (imageUrl: string) => {\n dashboardApi?.createVisualization({\n visualizationDefinition: {\n type: 'splunk.image',\n options: {\n preserveAspectRatio: true,\n src: imageUrl,\n },\n },\n });\n dashboardApi?.openPanel({\n activePanel: 'config',\n });\n handleForceClose();\n },\n [dashboardApi, handleForceClose]\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 <MenusContainer>\n <ImageGalleryPanel\n onClick={handlePanelClick}\n setHasChildModal={setHasChildModal}\n />\n </MenusContainer>\n </Dropdown>\n </ToolbarItem>\n );\n};\n\nexport default ImageGallery;\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/react-ui/Dropdown\";\nexport * from \"@splunk/react-ui/Dropdown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/Picture\";\nexport * from \"@splunk/react-icons/Picture\";\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/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import Button from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\n\nexport const StyledDropdownButton = styled(Button)`\n max-width: '50px';\n`;\n", "import 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", "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", "ImageGalleryPanel"]
|
|
7
7
|
}
|
package/buttons/Inputs.js
CHANGED
|
@@ -25,6 +25,7 @@ var __spreadValues = (a, b) => {
|
|
|
25
25
|
return a;
|
|
26
26
|
};
|
|
27
27
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
28
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
28
29
|
var __objRest = (source, exclude) => {
|
|
29
30
|
var target = {};
|
|
30
31
|
for (var prop in source)
|
|
@@ -154,7 +155,7 @@ var StyledDropdownButton = styled_components_default(Button_default)`
|
|
|
154
155
|
`;
|
|
155
156
|
|
|
156
157
|
// src/hooks/useDropdown.ts
|
|
157
|
-
var useDropdown = ({
|
|
158
|
+
var useDropdown = /* @__PURE__ */ __name(({
|
|
158
159
|
isContentClickClose = true
|
|
159
160
|
}) => {
|
|
160
161
|
const [isOpen, setIsOpen] = (0, react_exports.useState)(false);
|
|
@@ -187,7 +188,7 @@ var useDropdown = ({
|
|
|
187
188
|
handleForceClose,
|
|
188
189
|
setHasChildModal
|
|
189
190
|
};
|
|
190
|
-
};
|
|
191
|
+
}, "useDropdown");
|
|
191
192
|
var useDropdown_default = useDropdown;
|
|
192
193
|
|
|
193
194
|
// src/Item.tsx
|
|
@@ -217,7 +218,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
|
217
218
|
`;
|
|
218
219
|
var iconSize = 24;
|
|
219
220
|
var menuIconSize = 20;
|
|
220
|
-
var prepareIcon = (_a) => {
|
|
221
|
+
var prepareIcon = /* @__PURE__ */ __name((_a) => {
|
|
221
222
|
var _b = _a, {
|
|
222
223
|
Icon,
|
|
223
224
|
screenReaderContent,
|
|
@@ -229,10 +230,13 @@ var prepareIcon = (_a) => {
|
|
|
229
230
|
]);
|
|
230
231
|
const size = isMenu ? menuIconSize : iconSize;
|
|
231
232
|
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));
|
|
232
|
-
};
|
|
233
|
+
}, "prepareIcon");
|
|
233
234
|
|
|
234
235
|
// src/buttons/Inputs.tsx
|
|
235
|
-
var focusToggleReasons = [
|
|
236
|
+
var focusToggleReasons = [
|
|
237
|
+
"escapeKey",
|
|
238
|
+
"tabKey"
|
|
239
|
+
];
|
|
236
240
|
var DEFAULT_PRESET_MAP = Object.freeze({});
|
|
237
241
|
var addInputIcon = prepareIcon({
|
|
238
242
|
Icon: SlidersTripleHorizontal_default,
|
|
@@ -248,7 +252,7 @@ var ButtonToggle = /* @__PURE__ */ react_default.createElement(
|
|
|
248
252
|
icon: addInputIcon
|
|
249
253
|
}
|
|
250
254
|
);
|
|
251
|
-
var onCreateInputClickFactory = ({
|
|
255
|
+
var onCreateInputClickFactory = /* @__PURE__ */ __name(({
|
|
252
256
|
type,
|
|
253
257
|
defaultConfig,
|
|
254
258
|
tokenPrefix,
|
|
@@ -269,8 +273,8 @@ var onCreateInputClickFactory = ({
|
|
|
269
273
|
}
|
|
270
274
|
dashboardApi.addInput(newConfig);
|
|
271
275
|
dashboardApi.openPanel({ activePanel: "config" });
|
|
272
|
-
};
|
|
273
|
-
var Inputs = ({
|
|
276
|
+
}, "onCreateInputClickFactory");
|
|
277
|
+
var Inputs = /* @__PURE__ */ __name(({
|
|
274
278
|
dashboardApi,
|
|
275
279
|
preset = DEFAULT_PRESET_MAP
|
|
276
280
|
}) => {
|
|
@@ -343,6 +347,6 @@ var Inputs = ({
|
|
|
343
347
|
},
|
|
344
348
|
/* @__PURE__ */ react_default.createElement(Menu_default, null, InputTypeButtons)
|
|
345
349
|
));
|
|
346
|
-
};
|
|
350
|
+
}, "Inputs");
|
|
347
351
|
var Inputs_default = Inputs;
|
|
348
352
|
//# sourceMappingURL=Inputs.js.map
|
package/buttons/Inputs.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/buttons/Inputs.tsx", "react", "lodash", "
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { each } from 'lodash';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport Dropdown from '@splunk/react-ui/Dropdown';\nimport Menu from '@splunk/react-ui/Menu';\nimport Input from '@splunk/react-icons/SlidersTripleHorizontal';\nimport { DashboardDefinition } from '@splunk/dashboard-definition';\nimport type {\n PresetMap,\n InputConfig,\n DashboardApi,\n} from '@splunk/dashboard-types';\n\nimport { StyledDropdownButton } from '../components/StyledButton';\nimport useDropdown from '../hooks/useDropdown';\nimport ToolbarItem from '../Item';\nimport { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst focusToggleReasons: never[] = [];\n\nconst DEFAULT_PRESET_MAP = Object.freeze({} as PresetMap);\nconst addInputIcon = prepareIcon({\n Icon: Input,\n screenReaderContent: _('Add input'),\n isMenu: true,\n});\n\nconst ButtonToggle = (\n <StyledDropdownButton\n appearance=\"subtle\"\n data-clickable\n data-test=\"inputs-button\"\n icon={addInputIcon}\n />\n);\n\ninterface AddInputFactoryArgs {\n type: string;\n defaultConfig: {\n options?: Record<string, unknown>;\n [x: string]: unknown;\n };\n tokenPrefix: string;\n showToken: boolean;\n dashboardApi?: DashboardApi;\n}\n\n// click handler factory\nconst onCreateInputClickFactory =\n ({\n type,\n defaultConfig,\n tokenPrefix,\n showToken,\n dashboardApi,\n }: AddInputFactoryArgs) =>\n () => {\n if (!dashboardApi) {\n return;\n }\n\n const newConfig = {\n ...defaultConfig,\n type,\n options: {\n ...defaultConfig.options,\n },\n };\n // showToken flags whether or not the input has a token assigned on creation\n if (showToken) {\n newConfig.options.token = DashboardDefinition.fromJSON(\n dashboardApi?.getDefinition()\n ).nextTokenId(tokenPrefix);\n }\n dashboardApi.addInput(newConfig);\n dashboardApi.openPanel({ activePanel: 'config' });\n };\n\n/**\n * Add Input button that has a dropdown menu.\n */\nconst Inputs = ({\n dashboardApi,\n preset = DEFAULT_PRESET_MAP,\n}: ToolbarButtonProps) => {\n const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown({\n isContentClickClose: true,\n });\n\n const InputTypeButtons = useMemo(() => {\n const buttons = [];\n\n const inputs = preset?.inputs as Record<\n string,\n {\n config: InputConfig;\n }\n >;\n\n each(inputs, (InputImpl, type) => {\n const {\n baseShape = {},\n label = _(`${type} Input`),\n description = '',\n tokenPrefix = 'token',\n includeInToolbar = true,\n icon: Icon = Input,\n // showToken flags whether or not the input has a token assigned on creation\n showToken = true,\n } = InputImpl.config || {};\n\n if (!includeInToolbar) {\n return;\n }\n\n const handleClick = onCreateInputClickFactory({\n type,\n defaultConfig: baseShape,\n tokenPrefix,\n showToken,\n dashboardApi,\n });\n\n const inputIcon = <Icon width=\"24px\" height=\"24px\" />;\n\n buttons.push(\n <Menu.Item\n data-test={`add-${type}-button`}\n data-test-clickable\n onClick={handleClick}\n startAdornment={inputIcon}\n description={description}\n key={`add-${type}-button`}\n >\n {label}\n </Menu.Item>\n );\n });\n\n if (buttons.length === 0) {\n buttons.push(\n <Menu.Item\n data-test=\"no-inputs-in-preset\"\n key=\"no-inputs-in-preset\"\n disabled\n >\n {_('No Inputs')}\n </Menu.Item>\n );\n }\n\n return buttons;\n }, [preset, dashboardApi]);\n\n return (\n <ToolbarItem>\n <Dropdown\n focusToggleReasons={focusToggleReasons}\n onRequestClose={handleRequestClose}\n onRequestOpen={handleRequestOpen}\n open={isOpen}\n toggle={ButtonToggle}\n >\n <Menu>{InputTypeButtons}</Menu>\n </Dropdown>\n </ToolbarItem>\n );\n};\n\nexport default Inputs;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"lodash\";\nexport * from \"lodash\";\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-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/react-icons/SlidersTripleHorizontal\";\nexport * from \"@splunk/react-icons/SlidersTripleHorizontal\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-definition\";\nexport * from \"@splunk/dashboard-definition\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import Button from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\n\nexport const StyledDropdownButton = styled(Button)`\n max-width: '50px';\n`;\n", "import type { DropdownRequestCloseHandler } from '@splunk/react-ui/Dropdown';\nimport { useCallback, useRef, useState } from 'react';\n\ninterface UseDropdownArgs {\n isContentClickClose?: boolean;\n}\n\ninterface UseDropdownReturn {\n isOpen: boolean;\n handleRequestClose: DropdownRequestCloseHandler;\n handleRequestOpen: () => void;\n handleForceClose: () => void;\n setHasChildModal: (value: boolean) => void;\n}\n\n/**\n * Custom React Hook for the controlled SUI Dropdown component.\n *\n * @param {Object} config\n * @param {Boolean} config.isContentClickClose Control if dropdown children onClick's will close the dropdown automatically\n * @returns {Object} value\n * @returns {Boolean} value.isOpen The only state of this hook\n * @returns {Function} value.handleRequestOpen Event handler to open the dropdown\n * @returns {Function} value.handleRequestClose Event handler that SUI Dropdown calls when requested to close\n * @returns {Function} value.handleForceClose Event handler to forcefully close the dropdown\n */\nconst useDropdown = ({\n isContentClickClose = true,\n}: UseDropdownArgs): UseDropdownReturn => {\n const [isOpen, setIsOpen] = useState(false);\n const hasChildModal = useRef(false);\n\n const handleRequestClose = useCallback<DropdownRequestCloseHandler>(\n ({ reason }) => {\n if (reason === 'contentClick' && !isContentClickClose) {\n // This return results in the dropdown not closing.\n return;\n }\n\n // If there is a child modal then don't close the root on ESC press\n if (reason === 'escapeKey' && hasChildModal.current) {\n return;\n }\n\n setIsOpen(false);\n },\n [isContentClickClose]\n );\n\n const handleRequestOpen = useCallback(() => {\n setIsOpen(true);\n }, []);\n\n const handleForceClose = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const setHasChildModal = useCallback((value: boolean) => {\n hasChildModal.current = value;\n }, []);\n\n return {\n isOpen,\n handleRequestOpen,\n handleRequestClose,\n handleForceClose,\n setHasChildModal,\n };\n};\n\nexport default useDropdown;\n", "import styled from 'styled-components';\n\nexport default styled.div``;\n", "\nimport * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React from 'react';\nimport type SVG from '@splunk/react-icons/SVG';\nimport DropdownIcon from '@splunk/react-icons/CaretDown';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport Button, { type ButtonPropsBase } from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\nimport ToolbarItem from './Item';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledDropdownIcon = styled(DropdownIcon)`\n margin-left: -5px;\n`;\n\nexport const iconSize = 24;\nexport const menuIconSize = 20;\n\ninterface PrepareIconProps extends React.ComponentProps<typeof SVG> {\n Icon: React.ComponentType<React.ComponentProps<typeof SVG>>;\n screenReaderContent?: string;\n isMenu?: boolean;\n variant?: 'filled' | 'outline' | 'none';\n}\n\n/**\n * Button adds a bunch of padding when there's any child elements even if they don't display anything (screenReaderContent)\n * This bundles the primary icon, a menu caret and screenReaderContent as an icon when needed.\n * Additionally accepts any properties of any react-icons element to be applied to primary icon\n * @param {Object} arg\n * @param {React.ElementType} arg.Icon The primary icon\n * @param {boolean} [arg.isMenu=false] Display a menu caret\n * @param {string} [arg.screenReaderContent] A label for the icon\n * @param {string} [arg.variant] Fill the icon, or not\n * @returns {JSX.Element}\n */\nexport const prepareIcon = ({\n Icon,\n screenReaderContent,\n isMenu = false,\n ...props\n}: PrepareIconProps) => {\n const size = isMenu ? menuIconSize : iconSize;\n return (\n <>\n <Icon width={size} height={size} {...props} />\n {isMenu && (\n <StyledDropdownIcon variant=\"filled\" width={9} height={size} />\n )}\n {screenReaderContent && (\n <ScreenReaderContent>{screenReaderContent}</ScreenReaderContent>\n )}\n </>\n );\n};\n\nexport interface IconButtonProps extends ToolbarButtonProps {\n icon?: JSX.Element;\n onClick?: ButtonPropsBase['onClick'];\n label?: string;\n buttonRef?: React.RefObject<HTMLButtonElement>;\n testLabel?: string;\n disabled?: boolean;\n}\n\nconst IconButton = ({\n icon,\n buttonRef,\n disabled = false,\n onClick,\n label,\n testLabel,\n ...rest\n}: IconButtonProps): JSX.Element => {\n return (\n <ToolbarItem {...rest}>\n <Button\n elementRef={buttonRef}\n onClick={onClick}\n disabled={disabled}\n appearance=\"subtle\"\n icon={icon}\n label={label}\n data-test={testLabel}\n data-clickable\n />\n </ToolbarItem>\n );\n};\n\nexport default IconButton;\n"],
|
|
5
|
-
"mappings": "
|
|
3
|
+
"sources": ["../src/buttons/Inputs.tsx", "esm-externals:react", "esm-externals:lodash", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/react-ui/Dropdown", "esm-externals:@splunk/react-ui/Menu", "esm-externals:@splunk/react-icons/SlidersTripleHorizontal", "esm-externals:@splunk/dashboard-definition", "esm-externals:@splunk/react-ui/Button", "esm-externals:styled-components", "../src/components/StyledButton.tsx", "../src/hooks/useDropdown.ts", "../src/Item.tsx", "esm-externals:@splunk/react-icons/CaretDown", "esm-externals:@splunk/react-ui/ScreenReaderContent", "../src/IconButton.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { each } from 'lodash';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport Dropdown, {\n type DropdownPossibleCloseReason,\n} from '@splunk/react-ui/Dropdown';\nimport Menu from '@splunk/react-ui/Menu';\nimport Input from '@splunk/react-icons/SlidersTripleHorizontal';\nimport { DashboardDefinition } from '@splunk/dashboard-definition';\nimport type {\n PresetMap,\n InputConfig,\n DashboardApi,\n} from '@splunk/dashboard-types';\n\nimport { StyledDropdownButton } from '../components/StyledButton';\nimport useDropdown from '../hooks/useDropdown';\nimport ToolbarItem from '../Item';\nimport { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst focusToggleReasons: DropdownPossibleCloseReason[] = [\n 'escapeKey',\n 'tabKey',\n];\n\nconst DEFAULT_PRESET_MAP = Object.freeze({} as PresetMap);\nconst addInputIcon = prepareIcon({\n Icon: Input,\n screenReaderContent: _('Add input'),\n isMenu: true,\n});\n\nconst ButtonToggle = (\n <StyledDropdownButton\n appearance=\"subtle\"\n data-clickable\n data-test=\"inputs-button\"\n icon={addInputIcon}\n />\n);\n\ninterface AddInputFactoryArgs {\n type: string;\n defaultConfig: {\n options?: Record<string, unknown>;\n [x: string]: unknown;\n };\n tokenPrefix: string;\n showToken: boolean;\n dashboardApi?: DashboardApi;\n}\n\n// click handler factory\nconst onCreateInputClickFactory =\n ({\n type,\n defaultConfig,\n tokenPrefix,\n showToken,\n dashboardApi,\n }: AddInputFactoryArgs) =>\n () => {\n if (!dashboardApi) {\n return;\n }\n\n const newConfig = {\n ...defaultConfig,\n type,\n options: {\n ...defaultConfig.options,\n },\n };\n // showToken flags whether or not the input has a token assigned on creation\n if (showToken) {\n newConfig.options.token = DashboardDefinition.fromJSON(\n dashboardApi?.getDefinition()\n ).nextTokenId(tokenPrefix);\n }\n dashboardApi.addInput(newConfig);\n dashboardApi.openPanel({ activePanel: 'config' });\n };\n\n/**\n * Add Input button that has a dropdown menu.\n */\nconst Inputs = ({\n dashboardApi,\n preset = DEFAULT_PRESET_MAP,\n}: ToolbarButtonProps) => {\n const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown({\n isContentClickClose: true,\n });\n\n const InputTypeButtons = useMemo(() => {\n const buttons = [];\n\n const inputs = preset?.inputs as Record<\n string,\n {\n config: InputConfig;\n }\n >;\n\n each(inputs, (InputImpl, type) => {\n const {\n baseShape = {},\n label = _(`${type} Input`),\n description = '',\n tokenPrefix = 'token',\n includeInToolbar = true,\n icon: Icon = Input,\n // showToken flags whether or not the input has a token assigned on creation\n showToken = true,\n } = InputImpl.config || {};\n\n if (!includeInToolbar) {\n return;\n }\n\n const handleClick = onCreateInputClickFactory({\n type,\n defaultConfig: baseShape,\n tokenPrefix,\n showToken,\n dashboardApi,\n });\n\n const inputIcon = <Icon width=\"24px\" height=\"24px\" />;\n\n buttons.push(\n <Menu.Item\n data-test={`add-${type}-button`}\n data-test-clickable\n onClick={handleClick}\n startAdornment={inputIcon}\n description={description}\n key={`add-${type}-button`}\n >\n {label}\n </Menu.Item>\n );\n });\n\n if (buttons.length === 0) {\n buttons.push(\n <Menu.Item\n data-test=\"no-inputs-in-preset\"\n key=\"no-inputs-in-preset\"\n disabled\n >\n {_('No Inputs')}\n </Menu.Item>\n );\n }\n\n return buttons;\n }, [preset, dashboardApi]);\n\n return (\n <ToolbarItem>\n <Dropdown\n focusToggleReasons={focusToggleReasons}\n onRequestClose={handleRequestClose}\n onRequestOpen={handleRequestOpen}\n open={isOpen}\n toggle={ButtonToggle}\n >\n <Menu>{InputTypeButtons}</Menu>\n </Dropdown>\n </ToolbarItem>\n );\n};\n\nexport default Inputs;\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"lodash\";\nexport * from \"lodash\";\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-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/react-icons/SlidersTripleHorizontal\";\nexport * from \"@splunk/react-icons/SlidersTripleHorizontal\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/dashboard-definition\";\nexport * from \"@splunk/dashboard-definition\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Button\";\nexport * from \"@splunk/react-ui/Button\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import Button from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\n\nexport const StyledDropdownButton = styled(Button)`\n max-width: '50px';\n`;\n", "import type { DropdownRequestCloseHandler } from '@splunk/react-ui/Dropdown';\nimport { useCallback, useRef, useState } from 'react';\n\ninterface UseDropdownArgs {\n isContentClickClose?: boolean;\n}\n\ninterface UseDropdownReturn {\n isOpen: boolean;\n handleRequestClose: DropdownRequestCloseHandler;\n handleRequestOpen: () => void;\n handleForceClose: () => void;\n setHasChildModal: (value: boolean) => void;\n}\n\n/**\n * Custom React Hook for the controlled SUI Dropdown component.\n *\n * @param {Object} config\n * @param {Boolean} config.isContentClickClose Control if dropdown children onClick's will close the dropdown automatically\n * @returns {Object} value\n * @returns {Boolean} value.isOpen The only state of this hook\n * @returns {Function} value.handleRequestOpen Event handler to open the dropdown\n * @returns {Function} value.handleRequestClose Event handler that SUI Dropdown calls when requested to close\n * @returns {Function} value.handleForceClose Event handler to forcefully close the dropdown\n */\nconst useDropdown = ({\n isContentClickClose = true,\n}: UseDropdownArgs): UseDropdownReturn => {\n const [isOpen, setIsOpen] = useState(false);\n const hasChildModal = useRef(false);\n\n const handleRequestClose = useCallback<DropdownRequestCloseHandler>(\n ({ reason }) => {\n if (reason === 'contentClick' && !isContentClickClose) {\n // This return results in the dropdown not closing.\n return;\n }\n\n // If there is a child modal then don't close the root on ESC press\n if (reason === 'escapeKey' && hasChildModal.current) {\n return;\n }\n\n setIsOpen(false);\n },\n [isContentClickClose]\n );\n\n const handleRequestOpen = useCallback(() => {\n setIsOpen(true);\n }, []);\n\n const handleForceClose = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const setHasChildModal = useCallback((value: boolean) => {\n hasChildModal.current = value;\n }, []);\n\n return {\n isOpen,\n handleRequestOpen,\n handleRequestClose,\n handleForceClose,\n setHasChildModal,\n };\n};\n\nexport default useDropdown;\n", "import styled from 'styled-components';\n\nexport default styled.div``;\n", "\nimport * as defaultImport from \"@splunk/react-icons/CaretDown\";\nexport * from \"@splunk/react-icons/CaretDown\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/ScreenReaderContent\";\nexport * from \"@splunk/react-ui/ScreenReaderContent\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React from 'react';\nimport type SVG from '@splunk/react-icons/SVG';\nimport DropdownIcon from '@splunk/react-icons/CaretDown';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport Button, { type ButtonPropsBase } from '@splunk/react-ui/Button';\nimport styled from 'styled-components';\nimport ToolbarItem from './Item';\nimport type { ToolbarButtonProps } from './types/common';\n\nconst StyledDropdownIcon = styled(DropdownIcon)`\n margin-left: -5px;\n`;\n\nexport const iconSize = 24;\nexport const menuIconSize = 20;\n\ninterface PrepareIconProps extends React.ComponentProps<typeof SVG> {\n Icon: React.ComponentType<React.ComponentProps<typeof SVG>>;\n screenReaderContent?: string;\n isMenu?: boolean;\n variant?: 'filled' | 'outline' | 'none';\n}\n\n/**\n * Button adds a bunch of padding when there's any child elements even if they don't display anything (screenReaderContent)\n * This bundles the primary icon, a menu caret and screenReaderContent as an icon when needed.\n * Additionally accepts any properties of any react-icons element to be applied to primary icon\n * @param {Object} arg\n * @param {React.ElementType} arg.Icon The primary icon\n * @param {boolean} [arg.isMenu=false] Display a menu caret\n * @param {string} [arg.screenReaderContent] A label for the icon\n * @param {string} [arg.variant] Fill the icon, or not\n * @returns {JSX.Element}\n */\nexport const prepareIcon = ({\n Icon,\n screenReaderContent,\n isMenu = false,\n ...props\n}: PrepareIconProps) => {\n const size = isMenu ? menuIconSize : iconSize;\n return (\n <>\n <Icon width={size} height={size} {...props} />\n {isMenu && (\n <StyledDropdownIcon variant=\"filled\" width={9} height={size} />\n )}\n {screenReaderContent && (\n <ScreenReaderContent>{screenReaderContent}</ScreenReaderContent>\n )}\n </>\n );\n};\n\nexport interface IconButtonProps extends ToolbarButtonProps {\n icon?: JSX.Element;\n onClick?: ButtonPropsBase['onClick'];\n label?: string;\n buttonRef?: React.RefObject<HTMLButtonElement>;\n testLabel?: string;\n disabled?: boolean;\n}\n\nconst IconButton = ({\n icon,\n buttonRef,\n disabled = false,\n onClick,\n label,\n testLabel,\n ...rest\n}: IconButtonProps): JSX.Element => {\n return (\n <ToolbarItem {...rest}>\n <Button\n elementRef={buttonRef}\n onClick={onClick}\n disabled={disabled}\n appearance=\"subtle\"\n icon={icon}\n label={label}\n data-test={testLabel}\n data-clickable\n />\n </ToolbarItem>\n );\n};\n\nexport default IconButton;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
|
|
7
7
|
}
|
package/buttons/Markdown.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)
|
|
@@ -136,7 +137,7 @@ var StyledDropdownIcon = styled_components_default(CaretDown_default)`
|
|
|
136
137
|
`;
|
|
137
138
|
var iconSize = 24;
|
|
138
139
|
var menuIconSize = 20;
|
|
139
|
-
var prepareIcon = (_a) => {
|
|
140
|
+
var prepareIcon = /* @__PURE__ */ __name((_a) => {
|
|
140
141
|
var _b = _a, {
|
|
141
142
|
Icon,
|
|
142
143
|
screenReaderContent,
|
|
@@ -148,8 +149,8 @@ var prepareIcon = (_a) => {
|
|
|
148
149
|
]);
|
|
149
150
|
const size = isMenu ? menuIconSize : iconSize;
|
|
150
151
|
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));
|
|
151
|
-
};
|
|
152
|
-
var IconButton = (_a) => {
|
|
152
|
+
}, "prepareIcon");
|
|
153
|
+
var IconButton = /* @__PURE__ */ __name((_a) => {
|
|
153
154
|
var _b = _a, {
|
|
154
155
|
icon: icon2,
|
|
155
156
|
buttonRef,
|
|
@@ -178,7 +179,7 @@ var IconButton = (_a) => {
|
|
|
178
179
|
"data-clickable": true
|
|
179
180
|
}
|
|
180
181
|
));
|
|
181
|
-
};
|
|
182
|
+
}, "IconButton");
|
|
182
183
|
var IconButton_default = IconButton;
|
|
183
184
|
|
|
184
185
|
// src/buttons/Markdown.tsx
|
|
@@ -186,7 +187,7 @@ var icon = prepareIcon({
|
|
|
186
187
|
Icon: Markdown_default,
|
|
187
188
|
screenReaderContent: (0, i18n_exports._)("Add markdown text")
|
|
188
189
|
});
|
|
189
|
-
var Markdown = ({ dashboardApi }) => {
|
|
190
|
+
var Markdown = /* @__PURE__ */ __name(({ dashboardApi }) => {
|
|
190
191
|
const handleClick = (0, react_exports.useCallback)(() => {
|
|
191
192
|
dashboardApi == null ? void 0 : dashboardApi.createVisualization({
|
|
192
193
|
visualizationDefinition: {
|
|
@@ -208,6 +209,6 @@ var Markdown = ({ dashboardApi }) => {
|
|
|
208
209
|
icon
|
|
209
210
|
}
|
|
210
211
|
);
|
|
211
|
-
};
|
|
212
|
+
}, "Markdown");
|
|
212
213
|
var Markdown_default2 = Markdown;
|
|
213
214
|
//# sourceMappingURL=Markdown.js.map
|
package/buttons/Markdown.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/buttons/Markdown.tsx", "react", "
|
|
3
|
+
"sources": ["../src/buttons/Markdown.tsx", "esm-externals:react", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/react-icons/Markdown", "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 MarkdownIcon from '@splunk/react-icons/Markdown';\nimport IconButton, { prepareIcon } from '../IconButton';\nimport type { ToolbarButtonProps } from '../types/common';\n\nconst icon = prepareIcon({\n Icon: MarkdownIcon,\n screenReaderContent: _('Add markdown text'),\n});\n\n/**\n * Button that creates a empty markdown viz\n */\nconst Markdown = ({ dashboardApi }: ToolbarButtonProps): JSX.Element => {\n const handleClick = useCallback(() => {\n dashboardApi?.createVisualization({\n visualizationDefinition: {\n type: 'splunk.markdown',\n options: {\n markdown: '',\n },\n },\n });\n dashboardApi?.openPanel({\n activePanel: 'config',\n });\n }, [dashboardApi]);\n\n return (\n <IconButton\n testLabel=\"markdown-button\"\n onClick={handleClick}\n icon={icon}\n />\n );\n};\n\nexport default Markdown;\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/Markdown\";\nexport * from \"@splunk/react-icons/Markdown\";\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": ["Markdown_exports", "Markdown_default", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "icon", "Markdown_default"]
|
|
7
7
|
}
|