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

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

@@ -35,6 +35,7 @@ const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _constants = require("../../constants");
+const _ListVariableListBox = require("./ListVariableListBox");
 function variableOptionToVariableValue(options) {
     if (options === null) {
         return null;
@@ -91,22 +92,8 @@ function useListVariableState(spec, state, variablesOptionsQuery) {
             ...options
         ] : [];
         if (!sort || sort === 'none') return opts;
-        switch(sort){
-            case 'alphabetical-asc':
-                return opts.sort((a, b)=>a.label > b.label ? 1 : -1);
-            case 'alphabetical-desc':
-                return opts.sort((a, b)=>a.label > b.label ? -1 : 1);
-            case 'numerical-asc':
-                return opts.sort((a, b)=>parseInt(a.label) > parseInt(b.label) ? 1 : -1);
-            case 'numerical-desc':
-                return opts.sort((a, b)=>parseInt(a.label) < parseInt(b.label) ? 1 : -1);
-            case 'alphabetical-ci-asc':
-                return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1);
-            case 'alphabetical-ci-desc':
-                return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1);
-            default:
-                return opts;
-        }
+        const sortMethod = _pluginsystem.SORT_METHODS[sort];
+        return !sortMethod ? opts : sortMethod.sort(opts);
     }, [
         options,
         sort
@@ -214,6 +201,15 @@ function ListVariable({ name, source }) {
     const title = definition?.spec.display?.name ?? name;
     const allowMultiple = definition?.spec.allowMultiple === true;
     const allowAllValue = definition?.spec.allowAllValue === true;
+    const filterOptions = (0, _material.createFilterOptions)({});
+    const filteredOptions = (0, _react.useMemo)(()=>filterOptions(viewOptions, {
+            inputValue,
+            getOptionLabel: (o)=>o.label
+        }), [
+        inputValue,
+        viewOptions,
+        filterOptions
+    ]);
     // Update value when changed
     (0, _react.useEffect)(()=>{
         if (value) {
@@ -245,64 +241,160 @@ function ListVariable({ name, source }) {
         options,
         source
     ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
-                disablePortal: true,
-                disableCloseOnSelect: allowMultiple,
-                multiple: allowMultiple,
-                fullWidth: true,
-                limitTags: 3,
-                size: "small",
-                disableClearable: true,
-                slots: {
-                    popper: StyledPopper
-                },
-                renderInput: (params)=>{
-                    return allowMultiple ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        ...params,
-                        label: title,
-                        onChange: (e)=>setInputValue(e.target.value)
-                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        ...params,
-                        label: title,
-                        style: {
-                            width: `${inputWidth}px`
-                        }
-                    });
-                },
-                sx: {
-                    '& .MuiInputBase-root': {
-                        minHeight: '38px'
-                    },
-                    '& .MuiAutocomplete-tag': {
-                        margin: '1px 2px'
-                    }
-                },
-                value: selectedOptions,
-                onChange: (_, value)=>{
-                    if ((value === null || Array.isArray(value) && value.length === 0) && allowAllValue) {
-                        setVariableValue(name, _core.DEFAULT_ALL_VALUE, source);
-                    } else {
-                        setVariableValue(name, variableOptionToVariableValue(value), source);
-                    }
-                },
-                inputValue: allowMultiple ? inputValue : undefined,
-                onInputChange: (_, newInputValue)=>{
-                    if (!allowMultiple) {
-                        setInputWidth(getWidthPx(newInputValue, 'list'));
-                    }
+    const handleGlobalSelect = (0, _react.useCallback)((options)=>{
+        setVariableValue(name, variableOptionToVariableValue(options), source);
+    }, [
+        name,
+        setVariableValue,
+        source
+    ]);
+    const listBoxProviderValue = (0, _react.useMemo)(()=>({
+            options: viewOptions,
+            selectedOptions: selectedOptions,
+            filteredOptions: filteredOptions,
+            allowAllValue,
+            onChange: handleGlobalSelect
+        }), [
+        allowAllValue,
+        filteredOptions,
+        handleGlobalSelect,
+        selectedOptions,
+        viewOptions
+    ]);
+    const autocompleteComponent = (0, _react.useMemo)(()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+            disablePortal: true,
+            loading: loading,
+            disableCloseOnSelect: allowMultiple,
+            multiple: allowMultiple,
+            fullWidth: true,
+            limitTags: 3,
+            size: "small",
+            disableClearable: true,
+            slotProps: {
+                listbox: {
+                    component: allowMultiple ? _ListVariableListBox.ListVariableListBox : undefined
+                }
+            },
+            slots: {
+                popper: StyledPopper
+            },
+            sx: {
+                '& .MuiInputBase-root': {
+                    minHeight: '38px'
                 },
-                onBlur: ()=>{
-                    if (allowMultiple) {
-                        setInputValue('');
+                '& .MuiAutocomplete-tag': {
+                    margin: '1px 2px'
+                }
+            },
+            filterOptions: filterOptions,
+            options: viewOptions,
+            value: selectedOptions,
+            onChange: (_, value)=>{
+                if ((value === null || Array.isArray(value) && value.length === 0) && allowAllValue) {
+                    setVariableValue(name, _core.DEFAULT_ALL_VALUE, source);
+                } else {
+                    setVariableValue(name, variableOptionToVariableValue(value), source);
+                }
+            },
+            inputValue: allowMultiple ? inputValue : undefined,
+            onInputChange: (_, newInputValue)=>{
+                if (!allowMultiple) {
+                    setInputWidth(getWidthPx(newInputValue, 'list'));
+                }
+            },
+            onBlur: ()=>{
+                if (allowMultiple) {
+                    setInputValue('');
+                }
+            },
+            renderInput: (params)=>{
+                return allowMultiple ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    ...params,
+                    label: title,
+                    onChange: (e)=>setInputValue(e.target.value)
+                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    ...params,
+                    label: title,
+                    style: {
+                        width: `${inputWidth}px`
                     }
-                },
-                options: viewOptions
-            }),
-            loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.LinearProgress, {})
-        ]
-    });
+                });
+            },
+            renderOption: (props, option, { selected })=>{
+                const { key, ...optionProps } = props;
+                return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
+                    ...optionProps,
+                    style: {
+                        padding: 0
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                            style: {
+                                marginRight: 8
+                            },
+                            checked: selected
+                        }),
+                        option.label
+                    ]
+                }, key);
+            },
+            renderTags: (value, getTagProps, ownerState)=>{
+                // When focused, if there are too much value selected, it will use all screen place. Putting limit to 200px (~6 lines of chips)
+                if (ownerState.focused) {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        sx: {
+                            maxHeight: 200,
+                            overflowY: 'auto'
+                        },
+                        children: value.map((option, index)=>/*#__PURE__*/ (0, _react.createElement)(_material.Chip, {
+                                ...getTagProps({
+                                    index
+                                }),
+                                key: index,
+                                label: option.label,
+                                size: "small"
+                            }))
+                    });
+                }
+                const limitTags = ownerState.limitTags;
+                const numTags = value.length;
+                return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                    children: [
+                        value.slice(0, limitTags).map((option, index)=>/*#__PURE__*/ (0, _react.createElement)(_material.Chip, {
+                                ...getTagProps({
+                                    index
+                                }),
+                                key: index,
+                                label: option.label,
+                                size: "small"
+                            })),
+                        limitTags && numTags > limitTags && ` +${numTags - limitTags}`
+                    ]
+                });
+            }
+        });
+    }, [
+        allowAllValue,
+        allowMultiple,
+        filterOptions,
+        inputValue,
+        inputWidth,
+        loading,
+        name,
+        selectedOptions,
+        setVariableValue,
+        source,
+        title,
+        viewOptions
+    ]);
+    if (allowMultiple) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListVariableListBox.ListVariableListBoxProvider, {
+            value: listBoxProviderValue,
+            children: autocompleteComponent
+        });
+    }
+    return autocompleteComponent;
 }
 function TextVariable({ name, source }) {
     const ctx = (0, _context.useVariableDefinitionAndState)(name, source);

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

@@ -63,6 +63,6 @@ function VariableListItem({ spec, source }) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variable.Variable, {
             name: spec.name,
             source: source
-        }, (spec.name + source) ?? '')
-    }, (spec.name + source) ?? '');
+        }, spec.name + (source ?? ''))
+    }, spec.name + (source ?? ''));
 }

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

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./BuiltinVariableAccordions"), exports);
 _export_star(require("./EditVariablesButton"), exports);
+_export_star(require("./ListVariableListBox"), exports);
 _export_star(require("./Variable"), exports);
 _export_star(require("./VariableEditor"), exports);
 _export_star(require("./VariableList"), exports);

package/dist/cjs/components/index.js

@@ -24,8 +24,8 @@ _export_star(require("./DeletePanelDialog"), exports);
 _export_star(require("./DeletePanelGroupDialog"), exports);
 _export_star(require("./DiscardChangesConfirmationDialog"), exports);
 _export_star(require("./DownloadButton"), exports);
-_export_star(require("./EditJsonButton"), exports);
 _export_star(require("./EditJsonDialog"), exports);
+_export_star(require("./EditJsonButton"), exports);
 _export_star(require("./EmptyDashboard"), exports);
 _export_star(require("./GridLayout"), exports);
 _export_star(require("./LeaveDialog"), exports);
@@ -33,6 +33,7 @@ _export_star(require("./Panel"), exports);
 _export_star(require("./PanelDrawer"), exports);
 _export_star(require("./PanelGroupDialog"), exports);
 _export_star(require("./QuerySummaryTable"), exports);
+_export_star(require("./QueryViewerDialog"), exports);
 _export_star(require("./SaveChangesConfirmationDialog"), exports);
 _export_star(require("./SaveDashboardButton"), exports);
 _export_star(require("./Variables"), exports);

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/context/DashboardProvider/delete-panel-slice.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/context/DashboardProvider/duplicate-panel-slice.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/context/DashboardProvider/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/context/DashboardProvider/panel-editor-slice.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/context/DashboardProvider/panel-group-slice.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -32,16 +32,10 @@ _export(exports, {
     },
     createPanelGroupSlice: function() {
         return createPanelGroupSlice;
-    },
-    isPanelGroupItemIdEqual: function() {
-        return isPanelGroupItemIdEqual;
     }
 });
 const _core = require("@perses-dev/core");
 const _common = require("./common");
-function isPanelGroupItemIdEqual(a, b) {
-    return a?.panelGroupId === b?.panelGroupId && a?.panelGroupItemLayoutId === b?.panelGroupItemLayoutId;
-}
 function createPanelGroupSlice(layouts) {
     const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);
     // Return the state creator function for Zustand

package/dist/cjs/context/DashboardProvider/view-panel-slice.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -22,7 +22,6 @@ Object.defineProperty(exports, "DatasourceStoreProvider", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 function DatasourceStoreProvider(props) {
     const { projectName, datasourceApi, onCreate, children } = props;
@@ -30,7 +29,7 @@ function DatasourceStoreProvider(props) {
     const [savedDatasources, setSavedDatasources] = (0, _react.useState)(props.savedDatasources ?? {});
     const project = projectName ?? dashboardResource?.metadata.project;
     const { getPlugin, listPluginMetadata } = (0, _pluginsystem.usePluginRegistry)();
-    const findDatasource = (0, _core.useEvent)(async (selector)=>{
+    const findDatasource = (0, _pluginsystem.useEvent)(async (selector)=>{
         // Try to find it in dashboard spec
         if (dashboardResource) {
             const { datasources } = dashboardResource.spec;
@@ -98,7 +97,7 @@ function DatasourceStoreProvider(props) {
         getPlugin,
         onCreate
     ]);
-    const listDatasourceSelectItems = (0, _core.useEvent)(async (datasourcePluginName)=>{
+    const listDatasourceSelectItems = (0, _pluginsystem.useEvent)(async (datasourcePluginName)=>{
         const [pluginMetadata, datasources, globalDatasources] = await Promise.all([
             listPluginMetadata([
                 'Datasource'

package/dist/cjs/context/PanelEditorProvider/PanelEditorProvider.js

@@ -0,0 +1,49 @@
+// 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, {
+    PanelEditorContext: function() {
+        return PanelEditorContext;
+    },
+    PanelEditorProvider: function() {
+        return PanelEditorProvider;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const PanelEditorContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+const PanelEditorProvider = ({ children })=>{
+    const [previewPanelWidth, setPreviewPanelWidth] = (0, _react.useState)(undefined);
+    const ctx = (0, _react.useMemo)(()=>({
+            preview: {
+                previewPanelWidth,
+                setPreviewPanelWidth
+            }
+        }), [
+        previewPanelWidth,
+        setPreviewPanelWidth
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelEditorContext.Provider, {
+        value: ctx,
+        children: children
+    });
+};

package/dist/cjs/context/PanelEditorProvider/index.js

@@ -0,0 +1,23 @@
+// 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, "PanelEditorContext", {
+    enumerable: true,
+    get: function() {
+        return _PanelEditorProvider.PanelEditorContext;
+    }
+});
+const _PanelEditorProvider = require("./PanelEditorProvider");

package/dist/cjs/context/VariableProvider/VariableProvider.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/dist/cjs/context/VariableProvider/hydrationUtils.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/dist/cjs/context/VariableProvider/index.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/dist/cjs/context/VariableProvider/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/dist/cjs/context/index.js

@@ -18,6 +18,7 @@ _export_star(require("./DashboardProvider"), exports);
 _export_star(require("./DatasourceStoreProvider"), exports);
 _export_star(require("./VariableProvider"), exports);
 _export_star(require("./useDashboard"), exports);
+_export_star(require("./PanelEditorProvider"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/context/useDashboard.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/dist/cjs/utils/panelUtils.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAKL,OAAO,EACP,KAAK,EAIN,MAAM,eAAe,CAAC;AAMvB,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,YAAY,CAuEvF"}
+{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAKL,OAAO,EACP,KAAK,EAIN,MAAM,eAAe,CAAC;AAMvB,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,YAAY,CAsEvF"}

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -48,8 +48,6 @@ export function DashboardStickyToolbar(props) {
                         display: "flex",
                         flexWrap: !isSticky && isBiggerThanMd ? 'wrap' : 'nowrap',
                         maxWidth: isSticky || !isBiggerThanMd ? '100vw' : '100%',
-                        maxHeight: "150px" // Limit the vertical space used to ~3 rows of variables
-                        ,
                         pt: 1,
                         pl: isSticky ? 1 : 0,
                         mt: isSticky && isBiggerThanMd ? 0.5 : 0,

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport {\n  AppBar,\n  Box,\n  IconButton,\n  Stack,\n  SxProps,\n  Theme,\n  useMediaQuery,\n  useScrollTrigger,\n  useTheme,\n} from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { VariableList } from '../Variables';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps): ReactElement {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"space-between\"\n          sx={{\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexWrap={!isSticky && isBiggerThanMd ? 'wrap' : 'nowrap'}\n            maxWidth={isSticky || !isBiggerThanMd ? '100vw' : '100%'}\n            maxHeight=\"150px\" // Limit the vertical space used to ~3 rows of variables\n            pt={1}\n            pl={isSticky ? 1 : 0}\n            mt={isSticky && isBiggerThanMd ? 0.5 : 0}\n            ml={isSticky && isBiggerThanMd ? 0.5 : 0}\n            sx={{\n              overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',\n              // Firefox:\n              scrollbarWidth: 'thin',\n              // Safari and Chrome:\n              '&::-webkit-scrollbar': {\n                height: '8px',\n                backgroundColor: (theme) => theme.palette.grey['300'],\n              },\n              '&::-webkit-scrollbar-thumb': {\n                background: (theme) => theme.palette.grey['600'],\n              },\n            }}\n            gap={1}\n          >\n            <VariableList />\n            {props.initialVariableIsSticky && (\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => setIsPin(!isPin)}>\n                {isPin ? <PinOutline /> : <PinOffOutline />}\n              </IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Stack\n              m={isBiggerThanMd ? 1.5 : 1}\n              mt={isBiggerThanMd ? 1.5 : 0}\n              ml={isBiggerThanMd ? 1.5 : 'auto'}\n              direction=\"row\"\n              justifyContent=\"end\"\n            >\n              <TimeRangeControls />\n            </Stack>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","Stack","useMediaQuery","useScrollTrigger","useTheme","PinOutline","PinOffOutline","TimeRangeControls","VariableList","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","isBiggerThanMd","breakpoints","up","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexDirection","flexWrap","maxWidth","maxHeight","pt","pl","mt","ml","overflowX","scrollbarWidth","height","theme","palette","grey","background","gap","style","width","onClick","m","direction"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SACEC,MAAM,EACNC,GAAG,EACHC,UAAU,EACVC,KAAK,EAGLC,aAAa,EACbC,gBAAgB,EAChBC,QAAQ,QACH,gBAAgB;AACvB,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,YAAY,QAAQ,eAAe;AAO5C,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGf,SAASa,MAAMG,uBAAuB;IAEhE,MAAMC,gBAAgBX,iBAAiB;QAAEY,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,uBAAuB,IAAIF;IAEnE,MAAMM,iBAAiBf,cAAcE,WAAWc,WAAW,CAACC,EAAE,CAAC;IAE/D,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACpB;QAAIqB,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACvB;YACCwB,OAAM;YACNC,UAAUP,WAAW,UAAU;YAC/BQ,WAAWR,WAAW,IAAI;YAC1BS,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGhB,MAAMe,EAAE;YAAC;sBAE9C,cAAA,MAAC1B;gBACC4B,SAAQ;gBACRC,gBAAe;gBACfH,IAAI;oBACFI,eAAeZ,iBAAiB,QAAQ;gBAC1C;;kCAEA,MAAClB;wBACC4B,SAAQ;wBACRG,UAAU,CAACd,YAAYC,iBAAiB,SAAS;wBACjDc,UAAUf,YAAY,CAACC,iBAAiB,UAAU;wBAClDe,WAAU,QAAQ,wDAAwD;;wBAC1EC,IAAI;wBACJC,IAAIlB,WAAW,IAAI;wBACnBmB,IAAInB,YAAYC,iBAAiB,MAAM;wBACvCmB,IAAIpB,YAAYC,iBAAiB,MAAM;wBACvCQ,IAAI;4BACFY,WAAW,CAACrB,YAAYC,iBAAiB,WAAW;4BACpD,WAAW;4BACXqB,gBAAgB;4BAChB,qBAAqB;4BACrB,wBAAwB;gCACtBC,QAAQ;gCACRb,iBAAiB,CAACc,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BACvD;4BACA,8BAA8B;gCAC5BC,YAAY,CAACH,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BAClD;wBACF;wBACAE,KAAK;;0CAEL,KAACpC;4BACAE,MAAMG,uBAAuB,kBAC5B,KAACb;gCAAW6C,OAAO;oCAAEC,OAAO;oCAAeP,QAAQ;gCAAc;gCAAGQ,SAAS,IAAMnC,SAAS,CAACD;0CAC1FA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAIhCU,0BACC,KAACf;wBACC+C,GAAG/B,iBAAiB,MAAM;wBAC1BkB,IAAIlB,iBAAiB,MAAM;wBAC3BmB,IAAInB,iBAAiB,MAAM;wBAC3BgC,WAAU;wBACVrB,gBAAe;kCAEf,cAAA,KAACrB;;;;;;AAOf"}
+{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport {\n  AppBar,\n  Box,\n  IconButton,\n  Stack,\n  SxProps,\n  Theme,\n  useMediaQuery,\n  useScrollTrigger,\n  useTheme,\n} from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { VariableList } from '../Variables';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps): ReactElement {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"space-between\"\n          sx={{\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexWrap={!isSticky && isBiggerThanMd ? 'wrap' : 'nowrap'}\n            maxWidth={isSticky || !isBiggerThanMd ? '100vw' : '100%'}\n            pt={1}\n            pl={isSticky ? 1 : 0}\n            mt={isSticky && isBiggerThanMd ? 0.5 : 0}\n            ml={isSticky && isBiggerThanMd ? 0.5 : 0}\n            sx={{\n              overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',\n              // Firefox:\n              scrollbarWidth: 'thin',\n              // Safari and Chrome:\n              '&::-webkit-scrollbar': {\n                height: '8px',\n                backgroundColor: (theme) => theme.palette.grey['300'],\n              },\n              '&::-webkit-scrollbar-thumb': {\n                background: (theme) => theme.palette.grey['600'],\n              },\n            }}\n            gap={1}\n          >\n            <VariableList />\n            {props.initialVariableIsSticky && (\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => setIsPin(!isPin)}>\n                {isPin ? <PinOutline /> : <PinOffOutline />}\n              </IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Stack\n              m={isBiggerThanMd ? 1.5 : 1}\n              mt={isBiggerThanMd ? 1.5 : 0}\n              ml={isBiggerThanMd ? 1.5 : 'auto'}\n              direction=\"row\"\n              justifyContent=\"end\"\n            >\n              <TimeRangeControls />\n            </Stack>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","Stack","useMediaQuery","useScrollTrigger","useTheme","PinOutline","PinOffOutline","TimeRangeControls","VariableList","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","isBiggerThanMd","breakpoints","up","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexDirection","flexWrap","maxWidth","pt","pl","mt","ml","overflowX","scrollbarWidth","height","theme","palette","grey","background","gap","style","width","onClick","m","direction"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SACEC,MAAM,EACNC,GAAG,EACHC,UAAU,EACVC,KAAK,EAGLC,aAAa,EACbC,gBAAgB,EAChBC,QAAQ,QACH,gBAAgB;AACvB,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,YAAY,QAAQ,eAAe;AAO5C,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGf,SAASa,MAAMG,uBAAuB;IAEhE,MAAMC,gBAAgBX,iBAAiB;QAAEY,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,uBAAuB,IAAIF;IAEnE,MAAMM,iBAAiBf,cAAcE,WAAWc,WAAW,CAACC,EAAE,CAAC;IAE/D,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACpB;QAAIqB,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACvB;YACCwB,OAAM;YACNC,UAAUP,WAAW,UAAU;YAC/BQ,WAAWR,WAAW,IAAI;YAC1BS,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGhB,MAAMe,EAAE;YAAC;sBAE9C,cAAA,MAAC1B;gBACC4B,SAAQ;gBACRC,gBAAe;gBACfH,IAAI;oBACFI,eAAeZ,iBAAiB,QAAQ;gBAC1C;;kCAEA,MAAClB;wBACC4B,SAAQ;wBACRG,UAAU,CAACd,YAAYC,iBAAiB,SAAS;wBACjDc,UAAUf,YAAY,CAACC,iBAAiB,UAAU;wBAClDe,IAAI;wBACJC,IAAIjB,WAAW,IAAI;wBACnBkB,IAAIlB,YAAYC,iBAAiB,MAAM;wBACvCkB,IAAInB,YAAYC,iBAAiB,MAAM;wBACvCQ,IAAI;4BACFW,WAAW,CAACpB,YAAYC,iBAAiB,WAAW;4BACpD,WAAW;4BACXoB,gBAAgB;4BAChB,qBAAqB;4BACrB,wBAAwB;gCACtBC,QAAQ;gCACRZ,iBAAiB,CAACa,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BACvD;4BACA,8BAA8B;gCAC5BC,YAAY,CAACH,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BAClD;wBACF;wBACAE,KAAK;;0CAEL,KAACnC;4BACAE,MAAMG,uBAAuB,kBAC5B,KAACb;gCAAW4C,OAAO;oCAAEC,OAAO;oCAAeP,QAAQ;gCAAc;gCAAGQ,SAAS,IAAMlC,SAAS,CAACD;0CAC1FA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAIhCU,0BACC,KAACf;wBACC8C,GAAG9B,iBAAiB,MAAM;wBAC1BiB,IAAIjB,iBAAiB,MAAM;wBAC3BkB,IAAIlB,iBAAiB,MAAM;wBAC3B+B,WAAU;wBACVpB,gBAAe;kCAEf,cAAA,KAACrB;;;;;;AAOf"}

package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeletePanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,YAAY,EAAE,MAAM,OAAO,CAAC;AAKhD,eAAO,MAAM,sBAAsB,QAAO,YA6CzC,CAAC"}
+{"version":3,"file":"DeletePanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,YAAY,EAAE,MAAM,OAAO,CAAC;AAKhD,eAAO,MAAM,sBAAsB,QAAO,YAmCzC,CAAC"}

package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
-import CloseIcon from 'mdi-material-ui/Close';
+import { Dialog } from '@perses-dev/components';
+import { Button } from '@mui/material';
 import { useDeletePanelGroupDialog, useViewPanel } from '../../context';
 export const DeletePanelGroupDialog = ()=>{
     const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();
@@ -30,23 +30,13 @@ export const DeletePanelGroupDialog = ()=>{
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: deletePanelGroupDialog !== undefined,
         children: [
-            /*#__PURE__*/ _jsx(DialogTitle, {
+            /*#__PURE__*/ _jsx(Dialog.Header, {
                 children: "Delete Panel Group"
             }),
-            /*#__PURE__*/ _jsx(IconButton, {
-                "aria-label": "Close",
-                onClick: ()=>closeDeletePanelGroupDialog(),
-                sx: (theme)=>({
-                        position: 'absolute',
-                        top: theme.spacing(0.5),
-                        right: theme.spacing(0.5)
-                    }),
-                children: /*#__PURE__*/ _jsx(CloseIcon, {})
-            }),
             /*#__PURE__*/ _jsxs("form", {
                 onSubmit: handleDelete,
                 children: [
-                    /*#__PURE__*/ _jsxs(DialogContent, {
+                    /*#__PURE__*/ _jsxs(Dialog.Content, {
                         dividers: true,
                         sx: {
                             width: '500px'
@@ -57,7 +47,7 @@ export const DeletePanelGroupDialog = ()=>{
                             "? This will delete all the panels within the group."
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(DialogActions, {
+                    /*#__PURE__*/ _jsxs(Dialog.Actions, {
                         children: [
                             /*#__PURE__*/ _jsx(Button, {
                                 variant: "contained",