@perses-dev/dashboards 0.52.0 → 0.53.0-beta.1

package/dist/cjs/components/PanelDrawer/PanelPreview.js

@@ -25,13 +25,16 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _Panel = require("../Panel");
+const _context = require("../../context");
 const PANEL_PREVIEW_HEIGHT = 300;
 const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
 function PanelPreview({ panelDefinition }) {
     const boxRef = (0, _react.useRef)(null);
     let width = PANEL_PREVIEW_DEFAULT_WIDTH;
+    const panelEditorContext = (0, _react.useContext)(_context.PanelEditorContext);
     if (boxRef.current !== null) {
         width = boxRef.current.getBoundingClientRect().width;
+        panelEditorContext?.preview?.setPreviewPanelWidth?.(width);
     }
     const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
     const { data: plugin, isLoading } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js

@@ -21,17 +21,12 @@ Object.defineProperty(exports, "PanelGroupDialog", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
 const _react = require("react");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _components = require("@perses-dev/components");
+const _material = require("@mui/material");
 const _context = require("../../context");
 const _PanelGroupEditorForm = require("./PanelGroupEditorForm");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function PanelGroupDialog() {
     const panelGroupEditor = (0, _context.usePanelGroupEditor)();
     const variables = (0, _pluginsystem.useVariableValues)();
@@ -53,30 +48,20 @@ function PanelGroupDialog() {
         panelGroupEditor.applyChanges(values);
         handleClose();
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Dialog, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog, {
         open: isOpen,
         TransitionProps: {
             onExited: handleExited
         },
         children: panelGroupEditor !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogTitle, {
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Header, {
                     children: [
                         panelGroupEditor.mode,
                         " Panel Group"
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                    "aria-label": "Close",
-                    onClick: panelGroupEditor.close,
-                    sx: (theme)=>({
-                            position: 'absolute',
-                            top: theme.spacing(0.5),
-                            right: theme.spacing(0.5)
-                        }),
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {})
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Content, {
                     dividers: true,
                     sx: {
                         width: '500px'
@@ -87,7 +72,7 @@ function PanelGroupDialog() {
                         onSubmit: handleSubmit
                     })
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogActions, {
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Actions, {
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                             variant: "contained",

package/dist/cjs/components/QueryViewerDialog/QueryViewerDialog.js

@@ -0,0 +1,121 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "QueryViewerDialog", {
+    enumerable: true,
+    get: function() {
+        return QueryViewerDialog;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _components = require("@perses-dev/components");
+const _material = require("@mui/material");
+const _pluginsystem = require("@perses-dev/plugin-system");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function QueryViewerDialog({ open, queryDefinitions, onClose }) {
+    const queryRows = (0, _react.useMemo)(()=>{
+        if (!queryDefinitions?.length) return null;
+        const queryItems = [];
+        queryDefinitions.forEach((query, index)=>{
+            if (query?.spec?.plugin?.kind && query?.kind) {
+                queryItems.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.default.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginSpecEditor, {
+                            value: query.spec.plugin.spec,
+                            pluginSelection: {
+                                kind: query.spec.plugin.kind,
+                                type: query.kind
+                            },
+                            onChange: ()=>{},
+                            isReadonly: true
+                        }),
+                        index < queryDefinitions.length - 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                            sx: {
+                                my: 2
+                            }
+                        })
+                    ]
+                }, `query-${index}`));
+            }
+        });
+        return queryItems;
+    }, [
+        queryDefinitions
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog, {
+        open: open,
+        onClose: onClose,
+        maxWidth: "lg",
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Header, {
+                children: "Query Viewer"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Content, {
+                children: queryRows
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Actions, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    variant: "outlined",
+                    color: "secondary",
+                    onClick: onClose,
+                    children: "Close"
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/components/QueryViewerDialog/index.js

@@ -0,0 +1,30 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./QueryViewerDialog"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -32,15 +32,19 @@ const SaveChangesConfirmationDialog = ()=>{
     const { saveChangesConfirmationDialog: dialog } = (0, _context.useSaveChangesConfirmationDialog)();
     const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
     const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
+    const isSavedRefreshIntervalModified = dialog?.isSavedRefreshIntervalModified ?? true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
+    const [saveDefaultRefreshInterval, setDefaultRefreshInterval] = (0, _react.useState)(isSavedRefreshIntervalModified);
     const { getSavedVariablesStatus } = (0, _context.useVariableDefinitionActions)();
     const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
-    const { timeRange } = (0, _pluginsystem.useTimeRange)();
+    const { timeRange, refreshInterval } = (0, _pluginsystem.useTimeRange)();
     const currentTimeRangeText = (0, _core.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
-    const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
-    const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
+    const saveTimeRangeMessage = `Save current time range as new default ${currentTimeRangeText}`;
+    const saveVariableMessage = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
+    const refreshIntervalDisplay = _pluginsystem.DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i)=>i.display === refreshInterval) ? refreshInterval : _pluginsystem.DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i)=>i.value.pastDuration === refreshInterval)?.display;
+    const saveRefreshIntervalMessage = `Save current refresh interval as new default ${refreshIntervalDisplay ? `(${refreshIntervalDisplay})` : 'refresh interval not modified'}`;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog, {
         open: isOpen,
         children: dialog !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
@@ -63,7 +67,15 @@ const SaveChangesConfirmationDialog = ()=>{
                                         checked: saveDefaultTimeRange && isSavedDurationModified && (0, _core.isRelativeTimeRange)(timeRange),
                                         onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
                                     }),
-                                    label: saveTimeRangeText
+                                    label: saveTimeRangeMessage
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                    control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                        disabled: !isSavedRefreshIntervalModified,
+                                        checked: saveDefaultRefreshInterval && isSavedRefreshIntervalModified,
+                                        onChange: (e)=>setDefaultRefreshInterval(e.target.checked)
+                                    }),
+                                    label: saveRefreshIntervalMessage
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
                                     control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
@@ -71,7 +83,7 @@ const SaveChangesConfirmationDialog = ()=>{
                                         checked: saveDefaultVariables && isSavedVariableModified,
                                         onChange: (e)=>setSaveDefaultVariables(e.target.checked)
                                     }),
-                                    label: saveVariablesText
+                                    label: saveVariableMessage
                                 })
                             ]
                         })
@@ -81,7 +93,7 @@ const SaveChangesConfirmationDialog = ()=>{
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.PrimaryButton, {
                             onClick: ()=>{
-                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);
+                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables);
                             },
                             children: "Save Changes"
                         }),

package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js

@@ -31,24 +31,28 @@ const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
     const { dashboard, setDashboard } = (0, _context.useDashboard)();
     const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _context.useVariableDefinitionActions)();
     const { isSavedVariableModified } = getSavedVariablesStatus();
-    const { timeRange } = (0, _pluginsystem.useTimeRange)();
+    const { timeRange, refreshInterval } = (0, _pluginsystem.useTimeRange)();
     const { setEditMode } = (0, _context.useEditMode)();
     const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = (0, _context.useSaveChangesConfirmationDialog)();
     const onSaveButtonClick = ()=>{
         const isSavedDurationModified = (0, _core.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
+        const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;
         // Save dashboard
         // - if active timeRange from plugin-system is relative and different from currently saved
         // - or if the saved variables are different from currently saved
-        if (isSavedDurationModified || isSavedVariableModified) {
+        if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {
             openSaveChangesConfirmationDialog({
-                onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{
-                    if ((0, _core.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange === true) {
+                onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables)=>{
+                    if ((0, _core.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange) {
                         dashboard.spec.duration = timeRange.pastDuration;
                     }
-                    if (saveDefaultVariables === true) {
+                    if (saveDefaultVariables) {
                         const variables = setVariableDefaultValues();
                         dashboard.spec.variables = variables;
                     }
+                    if (saveDefaultRefreshInterval && isSavedRefreshIntervalModified) {
+                        dashboard.spec.refreshInterval = refreshInterval;
+                    }
                     setDashboard(dashboard);
                     saveDashboard();
                 },
@@ -56,7 +60,8 @@ const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
                     closeSaveChangesConfirmationDialog();
                 },
                 isSavedDurationModified,
-                isSavedVariableModified
+                isSavedVariableModified,
+                isSavedRefreshIntervalModified
             });
         } else {
             saveDashboard();

package/dist/cjs/components/Variables/ListVariableListBox.js

@@ -0,0 +1,201 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ListVariableListBox: function() {
+        return ListVariableListBox;
+    },
+    ListVariableListBoxProvider: function() {
+        return ListVariableListBoxProvider;
+    },
+    useListVariableListBoxContext: function() {
+        return useListVariableListBoxContext;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const ListVariableListBoxContext = /*#__PURE__*/ _react.default.createContext(undefined);
+function useListVariableListBoxContext() {
+    const ctx = (0, _react.useContext)(ListVariableListBoxContext);
+    if (!ctx) throw new Error('ListVariableListBoxContext not found');
+    return ctx;
+}
+/*
+ * Handles the logic for toggling the global select checkbox in the ListBox header.
+ *
+ * If all options are selected, it will deselect all options.
+ * Except if filteredOptions is a subset of options, then it will only deselect the filtered options.
+ *
+ * If some options are selected, it will select all filtered options.
+ *
+ * If no options are selected, it will select all filtered options.
+ * Should be not possible since a ListVariable has always at least one value.
+ *
+ * If allowAllValue is true, it will handle the special "All" option logic.
+ * Main difference is if some options are selected and there is no filter, it will select the "All" option
+ */ function handleGlobalSelectToggle(options, selectedOptions, filteredOptions, isIndeterminate, isAllSelected, allowAllValue, onChange) {
+    if (isAllSelected) {
+        if (filteredOptions.length !== options.length) {
+            onChange(selectedOptions.filter((o)=>!filteredOptions.includes(o)));
+        } else {
+            onChange([]);
+        }
+        return;
+    }
+    if (isIndeterminate) {
+        if (allowAllValue) {
+            if (filteredOptions.length === options.length) {
+                if (selectedOptions[0]?.value === _core.DEFAULT_ALL_VALUE) {
+                    onChange(options.filter((o)=>o.value !== _core.DEFAULT_ALL_VALUE));
+                } else {
+                    onChange([
+                        {
+                            label: _core.DEFAULT_ALL_VALUE,
+                            value: _core.DEFAULT_ALL_VALUE
+                        }
+                    ]);
+                }
+            } else {
+                if (filteredOptions.every((o)=>selectedOptions.includes(o))) {
+                    onChange(selectedOptions.filter((o)=>!filteredOptions.includes(o)));
+                } else {
+                    onChange([
+                        ...selectedOptions,
+                        ...filteredOptions.filter((o)=>o.value !== _core.DEFAULT_ALL_VALUE)
+                    ]);
+                }
+            }
+        } else {
+            if (filteredOptions.length === options.length) {
+                onChange(options);
+            } else {
+                if (filteredOptions.every((o)=>selectedOptions.includes(o))) {
+                    onChange(selectedOptions.filter((o)=>!filteredOptions.includes(o)));
+                } else {
+                    onChange([
+                        ...selectedOptions,
+                        ...filteredOptions
+                    ]);
+                }
+            }
+        }
+        return;
+    }
+    // Nothing selected, so select filtered options
+    onChange(filteredOptions);
+}
+function ListVariableListBoxProvider({ value, children }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(ListVariableListBoxContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+const ListVariableListBox = /*#__PURE__*/ (0, _react.forwardRef)(function ListVariableListBox(props, ref) {
+    const { children, ...rest } = props;
+    const { options, selectedOptions, filteredOptions, allowAllValue, onChange } = useListVariableListBoxContext();
+    // Derived selection metadata for context listbox header
+    const selectedCount = (0, _react.useMemo)(()=>selectedOptions.length, [
+        selectedOptions
+    ]);
+    const isIndeterminate = (0, _react.useMemo)(()=>options.length > 0 && selectedCount > 0 && selectedCount !== options.length, [
+        selectedCount,
+        options
+    ]);
+    const isAllSelected = (0, _react.useMemo)(()=>options.length > 0 && selectedCount === options.length, [
+        selectedCount,
+        options
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("ul", {
+        ...rest,
+        ref: ref,
+        role: "listbox",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                        indeterminate: isIndeterminate,
+                        checked: isAllSelected,
+                        // intentionally not passing event to underlying handler to mimic previous behavior
+                        onChange: ()=>handleGlobalSelectToggle(options, selectedOptions, filteredOptions, isIndeterminate, isAllSelected, allowAllValue, onChange)
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
+                                children: selectedCount
+                            }),
+                            " Selected"
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
+            children
+        ]
+    });
+});