@perses-dev/dashboards 0.38.0 → 0.40.0

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

@@ -14,32 +14,56 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TemplateVariableList", {
-    enumerable: true,
-    get: ()=>TemplateVariableList
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TemplateVariableList: function() {
+        return TemplateVariableList;
+    },
+    TemplateVariableListItem: function() {
+        return TemplateVariableListItem;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _context = require("../../context");
-const _templateVariable = require("./TemplateVariable");
+const _TemplateVariable = require("./TemplateVariable");
 const VARIABLE_INPUT_MIN_WIDTH = '120px';
-const VARIABLE_INPUT_MAX_WIDTH = '240px';
+const VARIABLE_INPUT_MAX_WIDTH = '500px';
 function TemplateVariableList() {
     const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: variableDefinitions.map((v)=>{
-            var ref;
-            /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
-                display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
-                minWidth: VARIABLE_INPUT_MIN_WIDTH,
-                maxWidth: VARIABLE_INPUT_MAX_WIDTH,
-                marginBottom: 1,
-                marginRight: 1,
-                "data-testid": "template-variable",
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_templateVariable.TemplateVariable, {
-                    name: v.spec.name
-                }, v.spec.name)
-            }, v.spec.name);
-        })
+    const externalVariableDefinitions = (0, _context.useTemplateExternalVariableDefinitions)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            externalVariableDefinitions.slice().reverse() // We reverse to have the most prioritized on top
+            .map((def)=>def.definitions.map((v)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(TemplateVariableListItem, {
+                        spec: v.spec,
+                        source: def.source
+                    }, v.spec.name + def.source))),
+            variableDefinitions.map((v)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(TemplateVariableListItem, {
+                    spec: v.spec
+                }, v.spec.name))
+        ]
     });
 }
+function TemplateVariableListItem({ spec , source  }) {
+    var _ctx_state, _spec_display;
+    const ctx = (0, _context.useTemplateVariable)(spec.name, source);
+    var _ref, _ref1;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        display: ((_ctx_state = ctx.state) === null || _ctx_state === void 0 ? void 0 : _ctx_state.overridden) || ((_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.hidden) ? 'none' : undefined,
+        minWidth: VARIABLE_INPUT_MIN_WIDTH,
+        maxWidth: VARIABLE_INPUT_MAX_WIDTH,
+        marginBottom: 1,
+        marginRight: 1,
+        "data-testid": "template-variable",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TemplateVariable.TemplateVariable, {
+            name: spec.name,
+            source: source
+        }, (_ref = spec.name + source) !== null && _ref !== void 0 ? _ref : '')
+    }, (_ref1 = spec.name + source) !== null && _ref1 !== void 0 ? _ref1 : '');
+}

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

@@ -14,18 +14,21 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./EditVariablesButton"), exports);
-_exportStar(require("./TemplateVariable"), exports);
-_exportStar(require("./VariableEditor"), exports);
-_exportStar(require("./VariableList"), exports);
-function _exportStar(from, to) {
+_export_star(require("./BuiltinVariableAccordions"), exports);
+_export_star(require("./EditVariablesButton"), exports);
+_export_star(require("./TemplateVariable"), exports);
+_export_star(require("./VariableEditor"), exports);
+_export_star(require("./VariableList"), 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];
-            }
-        });
+        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/index.js

@@ -14,36 +14,38 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./AddGroupButton"), exports);
-_exportStar(require("./AddPanelButton"), exports);
-_exportStar(require("./Dashboard"), exports);
-_exportStar(require("./DashboardToolbar"), exports);
-_exportStar(require("./DashboardStickyToolbar"), exports);
-_exportStar(require("./DeletePanelDialog"), exports);
-_exportStar(require("./DeletePanelGroupDialog"), exports);
-_exportStar(require("./DiscardChangesConfirmationDialog"), exports);
-_exportStar(require("./DownloadButton"), exports);
-_exportStar(require("./EditJsonButton"), exports);
-_exportStar(require("./EditJsonDialog"), exports);
-_exportStar(require("./EmptyDashboard"), exports);
-_exportStar(require("./GridLayout"), exports);
-_exportStar(require("./Panel"), exports);
-_exportStar(require("./PanelDrawer"), exports);
-_exportStar(require("./PanelGroupDialog"), exports);
-_exportStar(require("./QuerySummaryTable"), exports);
-_exportStar(require("./SaveChangesConfirmationDialog"), exports);
-_exportStar(require("./SaveDashboardButton"), exports);
-_exportStar(require("./TimeRangeControls"), exports);
-_exportStar(require("./ToolbarIconButton"), exports);
-_exportStar(require("./Variables"), exports);
-function _exportStar(from, to) {
+_export_star(require("./AddGroupButton"), exports);
+_export_star(require("./AddPanelButton"), exports);
+_export_star(require("./Dashboard"), exports);
+_export_star(require("./DashboardToolbar"), exports);
+_export_star(require("./DashboardStickyToolbar"), exports);
+_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("./EmptyDashboard"), exports);
+_export_star(require("./GridLayout"), exports);
+_export_star(require("./Panel"), exports);
+_export_star(require("./PanelDrawer"), exports);
+_export_star(require("./PanelGroupDialog"), exports);
+_export_star(require("./QuerySummaryTable"), exports);
+_export_star(require("./SaveChangesConfirmationDialog"), exports);
+_export_star(require("./SaveDashboardButton"), exports);
+_export_star(require("./TimeRangeControls"), exports);
+_export_star(require("./ToolbarIconButton"), exports);
+_export_star(require("./Variables"), 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];
-            }
-        });
+        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/constants/grid-layout-config.js

@@ -21,8 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    GRID_LAYOUT_COLS: ()=>GRID_LAYOUT_COLS,
-    GRID_LAYOUT_SMALL_BREAKPOINT: ()=>GRID_LAYOUT_SMALL_BREAKPOINT
+    GRID_LAYOUT_COLS: function() {
+        return GRID_LAYOUT_COLS;
+    },
+    GRID_LAYOUT_SMALL_BREAKPOINT: function() {
+        return GRID_LAYOUT_SMALL_BREAKPOINT;
+    }
 });
 const GRID_LAYOUT_COLS = {
     sm: 24,

package/dist/cjs/constants/index.js

@@ -14,16 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./grid-layout-config"), exports);
-_exportStar(require("./user-interface-text"), exports);
-function _exportStar(from, to) {
+_export_star(require("./grid-layout-config"), exports);
+_export_star(require("./user-interface-text"), 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];
-            }
-        });
+        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/constants/user-interface-text.js

@@ -21,8 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TOOLTIP_TEXT: ()=>TOOLTIP_TEXT,
-    ARIA_LABEL_TEXT: ()=>ARIA_LABEL_TEXT
+    TOOLTIP_TEXT: function() {
+        return TOOLTIP_TEXT;
+    },
+    ARIA_LABEL_TEXT: function() {
+        return ARIA_LABEL_TEXT;
+    }
 });
 const TOOLTIP_TEXT = {
     // Toolbar buttons

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

@@ -21,28 +21,34 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    DashboardContext: ()=>DashboardContext,
-    useDashboardStore: ()=>useDashboardStore,
-    DashboardProvider: ()=>DashboardProvider
+    DashboardContext: function() {
+        return DashboardContext;
+    },
+    useDashboardStore: function() {
+        return useDashboardStore;
+    },
+    DashboardProvider: function() {
+        return DashboardProvider;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _zustand = require("zustand");
 const _middleware = require("zustand/middleware");
 const _immer = require("zustand/middleware/immer");
 const _shallow = require("zustand/shallow");
 const _react = require("react");
 const _core = require("@perses-dev/core");
-const _pluginSystem = require("@perses-dev/plugin-system");
-const _panelGroupEditorSlice = require("./panel-group-editor-slice");
-const _panelGroupSlice = require("./panel-group-slice");
-const _panelEditorSlice = require("./panel-editor-slice");
-const _panelSlice = require("./panel-slice");
-const _deletePanelGroupSlice = require("./delete-panel-group-slice");
-const _deletePanelSlice = require("./delete-panel-slice");
-const _discardChangesDialogSlice = require("./discard-changes-dialog-slice");
-const _saveChangesDialogSlice = require("./save-changes-dialog-slice");
-const _duplicatePanelSlice = require("./duplicate-panel-slice");
-const _editJsonDialogSlice = require("./edit-json-dialog-slice");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _panelgroupeditorslice = require("./panel-group-editor-slice");
+const _panelgroupslice = require("./panel-group-slice");
+const _paneleditorslice = require("./panel-editor-slice");
+const _panelslice = require("./panel-slice");
+const _deletepanelgroupslice = require("./delete-panel-group-slice");
+const _deletepanelslice = require("./delete-panel-slice");
+const _discardchangesdialogslice = require("./discard-changes-dialog-slice");
+const _savechangesdialogslice = require("./save-changes-dialog-slice");
+const _duplicatepanelslice = require("./duplicate-panel-slice");
+const _editjsondialogslice = require("./edit-json-dialog-slice");
 const _common = require("./common");
 const DashboardContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDashboardStore(selector) {
@@ -57,10 +63,10 @@ function DashboardProvider(props) {
         props
     ]);
     // load plugin to retrieve initial spec if default panel kind is defined
-    const { defaultPluginKinds  } = (0, _pluginSystem.usePluginRegistry)();
-    var ref;
-    const defaultPanelKind = (ref = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds['Panel']) !== null && ref !== void 0 ? ref : '';
-    const { data: plugin  } = (0, _pluginSystem.usePlugin)('Panel', defaultPanelKind);
+    const { defaultPluginKinds  } = (0, _pluginsystem.usePluginRegistry)();
+    var _defaultPluginKinds_Panel;
+    const defaultPanelKind = (_defaultPluginKinds_Panel = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds['Panel']) !== null && _defaultPluginKinds_Panel !== void 0 ? _defaultPluginKinds_Panel : '';
+    const { data: plugin  } = (0, _pluginsystem.usePlugin)('Panel', defaultPanelKind);
     const [store] = (0, _react.useState)(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders
     (0, _react.useEffect)(()=>{
         if (plugin === undefined) return;
@@ -76,31 +82,31 @@ function DashboardProvider(props) {
         store,
         defaultPanelKind
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(DashboardContext.Provider, {
         value: store,
         children: props.children
     });
 }
 function initStore(props) {
-    const { initialState: { dashboardResource , isEditMode  } ,  } = props;
-    const { spec: { display , duration , refreshInterval =_core.DEFAULT_REFRESH_INTERVAL  } , metadata ,  } = dashboardResource;
-    let { spec: { layouts , panels  } ,  } = dashboardResource;
+    const { initialState: { dashboardResource , isEditMode  }  } = props;
+    const { spec: { display , duration , refreshInterval =_core.DEFAULT_REFRESH_INTERVAL  } , metadata  } = dashboardResource;
+    let { spec: { layouts , panels  }  } = dashboardResource;
     // Set fallbacks in case the frontend is used with a non-Perses backend
     layouts = layouts !== null && layouts !== void 0 ? layouts : [];
     panels = panels !== null && panels !== void 0 ? panels : {};
     const store = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
         const [set] = args;
         return {
-            /* Groups */ ...(0, _panelGroupSlice.createPanelGroupSlice)(layouts)(...args),
-            ...(0, _panelGroupEditorSlice.createPanelGroupEditorSlice)(...args),
-            ...(0, _deletePanelGroupSlice.createDeletePanelGroupSlice)(...args),
-            /* Panels */ ...(0, _panelSlice.createPanelSlice)(panels)(...args),
-            ...(0, _panelEditorSlice.createPanelEditorSlice)()(...args),
-            ...(0, _deletePanelSlice.createDeletePanelSlice)()(...args),
-            ...(0, _duplicatePanelSlice.createDuplicatePanelSlice)()(...args),
-            /* General */ ...(0, _discardChangesDialogSlice.createDiscardChangesDialogSlice)(...args),
-            ...(0, _editJsonDialogSlice.createEditJsonDialogSlice)(...args),
-            ...(0, _saveChangesDialogSlice.createSaveChangesDialogSlice)(...args),
+            /* Groups */ ...(0, _panelgroupslice.createPanelGroupSlice)(layouts)(...args),
+            ...(0, _panelgroupeditorslice.createPanelGroupEditorSlice)(...args),
+            ...(0, _deletepanelgroupslice.createDeletePanelGroupSlice)(...args),
+            /* Panels */ ...(0, _panelslice.createPanelSlice)(panels)(...args),
+            ...(0, _paneleditorslice.createPanelEditorSlice)()(...args),
+            ...(0, _deletepanelslice.createDeletePanelSlice)()(...args),
+            ...(0, _duplicatepanelslice.createDuplicatePanelSlice)()(...args),
+            /* General */ ...(0, _discardchangesdialogslice.createDiscardChangesDialogSlice)(...args),
+            ...(0, _editjsondialogslice.createEditJsonDialogSlice)(...args),
+            ...(0, _savechangesdialogslice.createSaveChangesDialogSlice)(...args),
             metadata,
             display,
             duration,
@@ -114,7 +120,7 @@ function initStore(props) {
                     state.metadata = metadata;
                     state.display = display;
                     state.panels = panels;
-                    const { panelGroups , panelGroupOrder  } = (0, _panelGroupSlice.convertLayoutsToPanelGroups)(layouts);
+                    const { panelGroups , panelGroupOrder  } = (0, _panelgroupslice.convertLayoutsToPanelGroups)(layouts);
                     state.panelGroups = panelGroups;
                     state.panelGroupOrder = panelGroupOrder;
                     state.duration = duration;

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

@@ -21,8 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    generateId: ()=>generateId,
-    createPanelDefinition: ()=>createPanelDefinition
+    generateId: function() {
+        return generateId;
+    },
+    createPanelDefinition: function() {
+        return createPanelDefinition;
+    }
 });
 function generateId() {
     if (globalThis.dashboardStoreId === undefined) {

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

@@ -21,31 +21,63 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    useEditMode: ()=>useEditMode,
-    useDashboardActions: ()=>useDashboardActions,
-    usePanelGroupIds: ()=>usePanelGroupIds,
-    useListPanelGroups: ()=>useListPanelGroups,
-    usePanelGroup: ()=>usePanelGroup,
-    usePanelGroupActions: ()=>usePanelGroupActions,
-    usePanelGroupEditor: ()=>usePanelGroupEditor,
-    useDeletePanelGroupDialog: ()=>useDeletePanelGroupDialog,
-    usePanel: ()=>usePanel,
-    usePanelActions: ()=>usePanelActions,
-    usePanelEditor: ()=>usePanelEditor,
-    useDeletePanelDialog: ()=>useDeletePanelDialog,
-    useDashboardDuration: ()=>useDashboardDuration,
-    useSaveChangesConfirmationDialog: ()=>useSaveChangesConfirmationDialog,
-    useDiscardChangesConfirmationDialog: ()=>useDiscardChangesConfirmationDialog,
-    useEditJsonDialog: ()=>useEditJsonDialog
+    useEditMode: function() {
+        return useEditMode;
+    },
+    useDashboardActions: function() {
+        return useDashboardActions;
+    },
+    usePanelGroupIds: function() {
+        return usePanelGroupIds;
+    },
+    useListPanelGroups: function() {
+        return useListPanelGroups;
+    },
+    usePanelGroup: function() {
+        return usePanelGroup;
+    },
+    usePanelGroupActions: function() {
+        return usePanelGroupActions;
+    },
+    usePanelGroupEditor: function() {
+        return usePanelGroupEditor;
+    },
+    useDeletePanelGroupDialog: function() {
+        return useDeletePanelGroupDialog;
+    },
+    usePanel: function() {
+        return usePanel;
+    },
+    usePanelActions: function() {
+        return usePanelActions;
+    },
+    usePanelEditor: function() {
+        return usePanelEditor;
+    },
+    useDeletePanelDialog: function() {
+        return useDeletePanelDialog;
+    },
+    useDashboardDuration: function() {
+        return useDashboardDuration;
+    },
+    useSaveChangesConfirmationDialog: function() {
+        return useSaveChangesConfirmationDialog;
+    },
+    useDiscardChangesConfirmationDialog: function() {
+        return useDiscardChangesConfirmationDialog;
+    },
+    useEditJsonDialog: function() {
+        return useEditJsonDialog;
+    }
 });
 const _react = require("react");
-const _dashboardProvider = require("./DashboardProvider");
+const _DashboardProvider = require("./DashboardProvider");
 const selectEditMode = ({ isEditMode , setEditMode  })=>({
         isEditMode,
         setEditMode
     });
 function useEditMode() {
-    return (0, _dashboardProvider.useDashboardStore)(selectEditMode);
+    return (0, _DashboardProvider.useDashboardStore)(selectEditMode);
 }
 const selectDashboardActions = ({ setDashboard , openAddPanelGroup , openAddPanel  })=>({
         setDashboard,
@@ -53,7 +85,7 @@ const selectDashboardActions = ({ setDashboard , openAddPanelGroup , openAddPane
         openAddPanel
     });
 function useDashboardActions() {
-    const { setDashboard , openAddPanelGroup , openAddPanel  } = (0, _dashboardProvider.useDashboardStore)(selectDashboardActions);
+    const { setDashboard , openAddPanelGroup , openAddPanel  } = (0, _DashboardProvider.useDashboardStore)(selectDashboardActions);
     return {
         setDashboard,
         openAddPanelGroup: ()=>openAddPanelGroup(),
@@ -62,12 +94,12 @@ function useDashboardActions() {
 }
 const selectPanelGroupOrder = (state)=>state.panelGroupOrder;
 function usePanelGroupIds() {
-    return (0, _dashboardProvider.useDashboardStore)(selectPanelGroupOrder);
+    return (0, _DashboardProvider.useDashboardStore)(selectPanelGroupOrder);
 }
 const selectPanelGroups = (state)=>state.panelGroups;
 function useListPanelGroups() {
     const panelGroupIds = usePanelGroupIds();
-    const panelGroups = (0, _dashboardProvider.useDashboardStore)(selectPanelGroups);
+    const panelGroups = (0, _DashboardProvider.useDashboardStore)(selectPanelGroups);
     return (0, _react.useMemo)(()=>{
         return panelGroupIds.map((id)=>{
             const group = panelGroups[id];
@@ -82,7 +114,7 @@ function useListPanelGroups() {
     ]);
 }
 function usePanelGroup(panelGroupId) {
-    const panelGroup = (0, _dashboardProvider.useDashboardStore)((0, _react.useCallback)((state)=>state.panelGroups[panelGroupId], [
+    const panelGroup = (0, _DashboardProvider.useDashboardStore)((0, _react.useCallback)((state)=>state.panelGroups[panelGroupId], [
         panelGroupId
     ]));
     if (panelGroup === undefined) {
@@ -98,7 +130,7 @@ const selectPanelGroupActions = ({ openEditPanelGroup , deletePanelGroup , openA
     });
 function usePanelGroupActions(panelGroupId) {
     const { moveUp , moveDown  } = useMovePanelGroup(panelGroupId);
-    const { openEditPanelGroup , deletePanelGroup , openAddPanel , updatePanelGroupLayouts  } = (0, _dashboardProvider.useDashboardStore)(selectPanelGroupActions);
+    const { openEditPanelGroup , deletePanelGroup , openAddPanel , updatePanelGroupLayouts  } = (0, _DashboardProvider.useDashboardStore)(selectPanelGroupActions);
     return {
         openEditPanelGroup: ()=>openEditPanelGroup(panelGroupId),
         deletePanelGroup: ()=>deletePanelGroup(panelGroupId),
@@ -114,11 +146,11 @@ const selectPanelGroupsLength = (state)=>state.panelGroupOrder.length;
  * Returns functions for moving a panel group up or down. A function will be undefined if the panel group can't be
  * moved in that direction.
  */ function useMovePanelGroup(panelGroupId) {
-    const currentIndex = (0, _dashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>store.panelGroupOrder.findIndex((id)=>id === panelGroupId), [
+    const currentIndex = (0, _DashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>store.panelGroupOrder.findIndex((id)=>id === panelGroupId), [
         panelGroupId
     ]));
-    const panelGroupsLength = (0, _dashboardProvider.useDashboardStore)(selectPanelGroupsLength);
-    const swapPanelGroups = (0, _dashboardProvider.useDashboardStore)(selectSwapPanelGroups);
+    const panelGroupsLength = (0, _DashboardProvider.useDashboardStore)(selectPanelGroupsLength);
+    const swapPanelGroups = (0, _DashboardProvider.useDashboardStore)(selectSwapPanelGroups);
     if (currentIndex < 0) {
         throw new Error(`Could not find panel group with Id ${panelGroupId} in order array`);
     }
@@ -131,7 +163,7 @@ const selectPanelGroupsLength = (state)=>state.panelGroupOrder.length;
 }
 const selectPanelGroupEditor = (state)=>state.panelGroupEditor;
 function usePanelGroupEditor() {
-    return (0, _dashboardProvider.useDashboardStore)(selectPanelGroupEditor);
+    return (0, _DashboardProvider.useDashboardStore)(selectPanelGroupEditor);
 }
 const selectDeletePanelGroupDialog = ({ deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  })=>({
         deletePanelGroupDialog,
@@ -140,7 +172,7 @@ const selectDeletePanelGroupDialog = ({ deletePanelGroupDialog , openDeletePanel
         deletePanelGroup
     });
 function useDeletePanelGroupDialog() {
-    const { deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  } = (0, _dashboardProvider.useDashboardStore)(selectDeletePanelGroupDialog);
+    const { deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  } = (0, _DashboardProvider.useDashboardStore)(selectDeletePanelGroupDialog);
     return {
         deletePanelGroupDialog,
         deletePanelGroup,
@@ -150,9 +182,9 @@ function useDeletePanelGroupDialog() {
 }
 function usePanel(panelGroupItemId) {
     const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
-    const panel = (0, _dashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>{
-        var ref;
-        const panelKey = (ref = store.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.itemPanelKeys[panelGroupLayoutId];
+    const panel = (0, _DashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>{
+        var _store_panelGroups_panelGroupId;
+        const panelKey = (_store_panelGroups_panelGroupId = store.panelGroups[panelGroupId]) === null || _store_panelGroups_panelGroupId === void 0 ? void 0 : _store_panelGroups_panelGroupId.itemPanelKeys[panelGroupLayoutId];
         if (panelKey === undefined) return;
         return store.panels[panelKey];
     }, [
@@ -170,7 +202,7 @@ const selectPanelActions = ({ openEditPanel , openDeletePanelDialog , duplicateP
         duplicatePanel
     });
 function usePanelActions(panelGroupItemId) {
-    const { openEditPanel , openDeletePanelDialog , duplicatePanel  } = (0, _dashboardProvider.useDashboardStore)(selectPanelActions);
+    const { openEditPanel , openDeletePanelDialog , duplicatePanel  } = (0, _DashboardProvider.useDashboardStore)(selectPanelActions);
     return {
         openEditPanel: ()=>openEditPanel(panelGroupItemId),
         openDeletePanelDialog: ()=>openDeletePanelDialog(panelGroupItemId),
@@ -179,7 +211,7 @@ function usePanelActions(panelGroupItemId) {
 }
 const selectPanelEditor = (state)=>state.panelEditor;
 function usePanelEditor() {
-    return (0, _dashboardProvider.useDashboardStore)(selectPanelEditor);
+    return (0, _DashboardProvider.useDashboardStore)(selectPanelEditor);
 }
 const selectDeletePanelDialog = ({ deletePanelDialog , deletePanel , closeDeletePanelDialog  })=>({
         deletePanelDialog,
@@ -188,11 +220,11 @@ const selectDeletePanelDialog = ({ deletePanelDialog , deletePanel , closeDelete
     });
 function useDeletePanelDialog() {
     // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself
-    return (0, _dashboardProvider.useDashboardStore)(selectDeletePanelDialog);
+    return (0, _DashboardProvider.useDashboardStore)(selectDeletePanelDialog);
 }
 const selectDashboardDuration = (state)=>state.duration;
 function useDashboardDuration() {
-    return (0, _dashboardProvider.useDashboardStore)(selectDashboardDuration);
+    return (0, _DashboardProvider.useDashboardStore)(selectDashboardDuration);
 }
 const selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog , openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  })=>({
         saveChangesConfirmationDialog,
@@ -200,7 +232,7 @@ const selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog , o
         closeSaveChangesConfirmationDialog
     });
 function useSaveChangesConfirmationDialog() {
-    return (0, _dashboardProvider.useDashboardStore)(selectSaveChangesConfirmationDialog);
+    return (0, _DashboardProvider.useDashboardStore)(selectSaveChangesConfirmationDialog);
 }
 const selectDiscardChangesConfirmationDialog = ({ discardChangesConfirmationDialog , openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  })=>({
         discardChangesConfirmationDialog,
@@ -208,7 +240,7 @@ const selectDiscardChangesConfirmationDialog = ({ discardChangesConfirmationDial
         closeDiscardChangesConfirmationDialog
     });
 function useDiscardChangesConfirmationDialog() {
-    return (0, _dashboardProvider.useDashboardStore)(selectDiscardChangesConfirmationDialog);
+    return (0, _DashboardProvider.useDashboardStore)(selectDiscardChangesConfirmationDialog);
 }
 const selectEditJsonDialog = ({ editJsonDialog , openEditJsonDialog , closeEditJsonDialog  })=>({
         editJsonDialog,
@@ -216,5 +248,5 @@ const selectEditJsonDialog = ({ editJsonDialog , openEditJsonDialog , closeEditJ
         closeEditJsonDialog
     });
 function useEditJsonDialog() {
-    return (0, _dashboardProvider.useDashboardStore)(selectEditJsonDialog);
+    return (0, _DashboardProvider.useDashboardStore)(selectEditJsonDialog);
 }

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

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "createDeletePanelGroupSlice", {
     enumerable: true,
-    get: ()=>createDeletePanelGroupSlice
+    get: function() {
+        return createDeletePanelGroupSlice;
+    }
 });
 const createDeletePanelGroupSlice = (set, get)=>({
         deletePanelGroup (panelGroupId) {

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

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "createDeletePanelSlice", {
     enumerable: true,
-    get: ()=>createDeletePanelSlice
+    get: function() {
+        return createDeletePanelSlice;
+    }
 });
 function createDeletePanelSlice() {
     // Return the state creator function for Zustand that uses the panels provided as intitial state
@@ -58,11 +60,11 @@ function createDeletePanelSlice() {
                     throw new Error(`Could not find panel ${panelKey}`);
                 }
                 set((state)=>{
-                    var _title;
+                    var _panelGroup_title;
                     state.deletePanelDialog = {
                         panelGroupItemId: panelGroupItemId,
                         panelName: panel.spec.display.name,
-                        panelGroupName: (_title = panelGroup.title) !== null && _title !== void 0 ? _title : ''
+                        panelGroupName: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : ''
                     };
                 });
             },