@grafana/scenes 4.13.1--canary.711.8884688944.0 → 4.14.0--canary.709.8892811931.0

package/dist/index.js

@@ -39,19 +39,19 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactGridLayout__default = /*#__PURE__*/_interopDefaultLegacy(ReactGridLayout);
 var AutoSizer__default = /*#__PURE__*/_interopDefaultLegacy(AutoSizer);
 
-var __defProp$K = Object.defineProperty;
-var __getOwnPropSymbols$K = Object.getOwnPropertySymbols;
-var __hasOwnProp$K = Object.prototype.hasOwnProperty;
-var __propIsEnum$K = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$K = (obj, key, value) => key in obj ? __defProp$K(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$K = (a, b) => {
+var __defProp$L = Object.defineProperty;
+var __getOwnPropSymbols$L = Object.getOwnPropertySymbols;
+var __hasOwnProp$L = Object.prototype.hasOwnProperty;
+var __propIsEnum$L = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$L = (obj, key, value) => key in obj ? __defProp$L(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$L = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$K.call(b, prop))
-      __defNormalProp$K(a, prop, b[prop]);
-  if (__getOwnPropSymbols$K)
-    for (var prop of __getOwnPropSymbols$K(b)) {
-      if (__propIsEnum$K.call(b, prop))
-        __defNormalProp$K(a, prop, b[prop]);
+    if (__hasOwnProp$L.call(b, prop))
+      __defNormalProp$L(a, prop, b[prop]);
+  if (__getOwnPropSymbols$L)
+    for (var prop of __getOwnPropSymbols$L(b)) {
+      if (__propIsEnum$L.call(b, prop))
+        __defNormalProp$L(a, prop, b[prop]);
     }
   return a;
 };
@@ -60,7 +60,7 @@ function useAppQueryParams() {
   return runtime.locationSearchToObject(location.search || "");
 }
 function getUrlWithAppState(path, preserveParams) {
-  const paramsCopy = __spreadValues$K({}, runtime.locationService.getSearchObject());
+  const paramsCopy = __spreadValues$L({}, runtime.locationService.getSearchObject());
   if (preserveParams) {
     for (const key of Object.keys(paramsCopy)) {
       if (!preserveParams.includes(key)) {
@@ -74,31 +74,31 @@ function renderSceneComponentWithRouteProps(sceneObject, routeProps) {
   return React__default["default"].createElement(sceneObject.Component, { model: sceneObject, routeProps });
 }
 
-var __defProp$J = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$J = Object.getOwnPropertySymbols;
-var __hasOwnProp$J = Object.prototype.hasOwnProperty;
-var __propIsEnum$J = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$J = (obj, key, value) => key in obj ? __defProp$J(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$J = (a, b) => {
+var __defProp$K = Object.defineProperty;
+var __defProps$t = Object.defineProperties;
+var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$K = Object.getOwnPropertySymbols;
+var __hasOwnProp$K = Object.prototype.hasOwnProperty;
+var __propIsEnum$K = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$K = (obj, key, value) => key in obj ? __defProp$K(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$K = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$J.call(b, prop))
-      __defNormalProp$J(a, prop, b[prop]);
-  if (__getOwnPropSymbols$J)
-    for (var prop of __getOwnPropSymbols$J(b)) {
-      if (__propIsEnum$J.call(b, prop))
-        __defNormalProp$J(a, prop, b[prop]);
+    if (__hasOwnProp$K.call(b, prop))
+      __defNormalProp$K(a, prop, b[prop]);
+  if (__getOwnPropSymbols$K)
+    for (var prop of __getOwnPropSymbols$K(b)) {
+      if (__propIsEnum$K.call(b, prop))
+        __defNormalProp$K(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
 const runtimePanelPlugins = /* @__PURE__ */ new Map();
 function registerRuntimePanelPlugin({ pluginId, plugin }) {
   if (runtimePanelPlugins.has(pluginId)) {
     throw new Error(`A runtime panel plugin with id ${pluginId} has already been registered`);
   }
-  plugin.meta = __spreadProps$s(__spreadValues$J({}, plugin.meta), {
+  plugin.meta = __spreadProps$t(__spreadValues$K({}, plugin.meta), {
     id: pluginId,
     name: pluginId,
     module: "runtime plugin",
@@ -126,39 +126,39 @@ function loadPanelPluginSync(pluginId) {
   return (_a = getPanelPluginFromCache(pluginId)) != null ? _a : runtimePanelPlugins.get(pluginId);
 }
 
-var __defProp$I = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$I = Object.getOwnPropertySymbols;
-var __hasOwnProp$I = Object.prototype.hasOwnProperty;
-var __propIsEnum$I = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$I = (obj, key, value) => key in obj ? __defProp$I(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$I = (a, b) => {
+var __defProp$J = Object.defineProperty;
+var __defProps$s = Object.defineProperties;
+var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$J = Object.getOwnPropertySymbols;
+var __hasOwnProp$J = Object.prototype.hasOwnProperty;
+var __propIsEnum$J = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$J = (obj, key, value) => key in obj ? __defProp$J(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$J = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$I.call(b, prop))
-      __defNormalProp$I(a, prop, b[prop]);
-  if (__getOwnPropSymbols$I)
-    for (var prop of __getOwnPropSymbols$I(b)) {
-      if (__propIsEnum$I.call(b, prop))
-        __defNormalProp$I(a, prop, b[prop]);
+    if (__hasOwnProp$J.call(b, prop))
+      __defNormalProp$J(a, prop, b[prop]);
+  if (__getOwnPropSymbols$J)
+    for (var prop of __getOwnPropSymbols$J(b)) {
+      if (__propIsEnum$J.call(b, prop))
+        __defNormalProp$J(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
-var __objRest$3 = (source, exclude) => {
+var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$I.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$J.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$I)
-    for (var prop of __getOwnPropSymbols$I(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$I.call(source, prop))
+  if (source != null && __getOwnPropSymbols$J)
+    for (var prop of __getOwnPropSymbols$J(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$J.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function SceneComponentWrapperWithoutMemo(_a) {
-  var _b = _a, { model } = _b, otherProps = __objRest$3(_b, ["model"]);
+  var _b = _a, { model } = _b, otherProps = __objRest$4(_b, ["model"]);
   var _a2;
   const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
   const [_, setValue] = React.useState(0);
@@ -170,7 +170,7 @@ function SceneComponentWrapperWithoutMemo(_a) {
   if (!model.isActive) {
     return null;
   }
-  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$r(__spreadValues$I({}, otherProps), {
+  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$s(__spreadValues$J({}, otherProps), {
     model
   }));
 }
@@ -216,19 +216,19 @@ class SceneObjectRef {
 }
 _ref = new WeakMap();
 
-var __defProp$H = Object.defineProperty;
-var __getOwnPropSymbols$H = Object.getOwnPropertySymbols;
-var __hasOwnProp$H = Object.prototype.hasOwnProperty;
-var __propIsEnum$H = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$H = (obj, key, value) => key in obj ? __defProp$H(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$H = (a, b) => {
+var __defProp$I = Object.defineProperty;
+var __getOwnPropSymbols$I = Object.getOwnPropertySymbols;
+var __hasOwnProp$I = Object.prototype.hasOwnProperty;
+var __propIsEnum$I = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$I = (obj, key, value) => key in obj ? __defProp$I(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$I = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$H.call(b, prop))
-      __defNormalProp$H(a, prop, b[prop]);
-  if (__getOwnPropSymbols$H)
-    for (var prop of __getOwnPropSymbols$H(b)) {
-      if (__propIsEnum$H.call(b, prop))
-        __defNormalProp$H(a, prop, b[prop]);
+    if (__hasOwnProp$I.call(b, prop))
+      __defNormalProp$I(a, prop, b[prop]);
+  if (__getOwnPropSymbols$I)
+    for (var prop of __getOwnPropSymbols$I(b)) {
+      if (__propIsEnum$I.call(b, prop))
+        __defNormalProp$I(a, prop, b[prop]);
     }
   return a;
 };
@@ -288,7 +288,7 @@ class SceneObjectBase {
   }
   setState(update) {
     const prevState = this._state;
-    const newState = __spreadValues$H(__spreadValues$H({}, this._state), update);
+    const newState = __spreadValues$I(__spreadValues$I({}, this._state), update);
     this._state = Object.freeze(newState);
     this._setParent(update);
     this._handleActivationOfChangedStateProps(prevState, newState);
@@ -458,19 +458,19 @@ function forEachChild(state, callback) {
   }
 }
 
-var __defProp$G = Object.defineProperty;
-var __getOwnPropSymbols$G = Object.getOwnPropertySymbols;
-var __hasOwnProp$G = Object.prototype.hasOwnProperty;
-var __propIsEnum$G = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$G = (obj, key, value) => key in obj ? __defProp$G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$G = (a, b) => {
+var __defProp$H = Object.defineProperty;
+var __getOwnPropSymbols$H = Object.getOwnPropertySymbols;
+var __hasOwnProp$H = Object.prototype.hasOwnProperty;
+var __propIsEnum$H = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$H = (obj, key, value) => key in obj ? __defProp$H(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$H = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$G.call(b, prop))
-      __defNormalProp$G(a, prop, b[prop]);
-  if (__getOwnPropSymbols$G)
-    for (var prop of __getOwnPropSymbols$G(b)) {
-      if (__propIsEnum$G.call(b, prop))
-        __defNormalProp$G(a, prop, b[prop]);
+    if (__hasOwnProp$H.call(b, prop))
+      __defNormalProp$H(a, prop, b[prop]);
+  if (__getOwnPropSymbols$H)
+    for (var prop of __getOwnPropSymbols$H(b)) {
+      if (__propIsEnum$H.call(b, prop))
+        __defNormalProp$H(a, prop, b[prop]);
     }
   return a;
 };
@@ -479,7 +479,7 @@ function cloneSceneObject(sceneObject, withState) {
   return new sceneObject.constructor(clonedState);
 }
 function cloneSceneObjectState(sceneState, withState) {
-  const clonedState = __spreadValues$G({}, sceneState);
+  const clonedState = __spreadValues$H({}, sceneState);
   for (const key in clonedState) {
     const propValue = clonedState[key];
     if (propValue instanceof SceneObjectBase) {
@@ -657,25 +657,25 @@ function isUrlValueEqual(currentUrlValue, newUrlValue) {
   return lodash.isEqual(currentUrlValue, newUrlValue);
 }
 
-var __defProp$F = Object.defineProperty;
-var __getOwnPropSymbols$F = Object.getOwnPropertySymbols;
-var __hasOwnProp$F = Object.prototype.hasOwnProperty;
-var __propIsEnum$F = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$F = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$F = (a, b) => {
+var __defProp$G = Object.defineProperty;
+var __getOwnPropSymbols$G = Object.getOwnPropertySymbols;
+var __hasOwnProp$G = Object.prototype.hasOwnProperty;
+var __propIsEnum$G = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$G = (obj, key, value) => key in obj ? __defProp$G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$G = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$F.call(b, prop))
-      __defNormalProp$F(a, prop, b[prop]);
-  if (__getOwnPropSymbols$F)
-    for (var prop of __getOwnPropSymbols$F(b)) {
-      if (__propIsEnum$F.call(b, prop))
-        __defNormalProp$F(a, prop, b[prop]);
+    if (__hasOwnProp$G.call(b, prop))
+      __defNormalProp$G(a, prop, b[prop]);
+  if (__getOwnPropSymbols$G)
+    for (var prop of __getOwnPropSymbols$G(b)) {
+      if (__propIsEnum$G.call(b, prop))
+        __defNormalProp$G(a, prop, b[prop]);
     }
   return a;
 };
 class SceneDataNode extends SceneObjectBase {
   constructor(state) {
-    super(__spreadValues$F({
+    super(__spreadValues$G({
       data: emptyPanelData
     }, state));
   }
@@ -756,19 +756,19 @@ function evaluateTimeRange(from, to, timeZone, fiscalYearStartMonth, delay) {
   };
 }
 
-var __defProp$E = Object.defineProperty;
-var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
-var __hasOwnProp$E = Object.prototype.hasOwnProperty;
-var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$E = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$E = (a, b) => {
+var __defProp$F = Object.defineProperty;
+var __getOwnPropSymbols$F = Object.getOwnPropertySymbols;
+var __hasOwnProp$F = Object.prototype.hasOwnProperty;
+var __propIsEnum$F = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$F = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$F = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$E.call(b, prop))
-      __defNormalProp$E(a, prop, b[prop]);
-  if (__getOwnPropSymbols$E)
-    for (var prop of __getOwnPropSymbols$E(b)) {
-      if (__propIsEnum$E.call(b, prop))
-        __defNormalProp$E(a, prop, b[prop]);
+    if (__hasOwnProp$F.call(b, prop))
+      __defNormalProp$F(a, prop, b[prop]);
+  if (__getOwnPropSymbols$F)
+    for (var prop of __getOwnPropSymbols$F(b)) {
+      if (__propIsEnum$F.call(b, prop))
+        __defNormalProp$F(a, prop, b[prop]);
     }
   return a;
 };
@@ -785,7 +785,7 @@ class SceneTimeRange extends SceneObjectBase {
       state.fiscalYearStartMonth,
       state.UNSAFE_nowDelay
     );
-    super(__spreadValues$E({ from, to, timeZone, value }, state));
+    super(__spreadValues$F({ from, to, timeZone, value }, state));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["from", "to", "timezone"] });
     this.onTimeRangeChange = (timeRange) => {
       const update = {};
@@ -1695,25 +1695,25 @@ function collectAllVariables(sceneObject, record = {}) {
   return record;
 }
 
-var __defProp$D = Object.defineProperty;
-var __defProps$q = Object.defineProperties;
-var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
-var __hasOwnProp$D = Object.prototype.hasOwnProperty;
-var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$D = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$D = (a, b) => {
+var __defProp$E = Object.defineProperty;
+var __defProps$r = Object.defineProperties;
+var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
+var __hasOwnProp$E = Object.prototype.hasOwnProperty;
+var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$E = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$E = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$D.call(b, prop))
-      __defNormalProp$D(a, prop, b[prop]);
-  if (__getOwnPropSymbols$D)
-    for (var prop of __getOwnPropSymbols$D(b)) {
-      if (__propIsEnum$D.call(b, prop))
-        __defNormalProp$D(a, prop, b[prop]);
+    if (__hasOwnProp$E.call(b, prop))
+      __defNormalProp$E(a, prop, b[prop]);
+  if (__getOwnPropSymbols$E)
+    for (var prop of __getOwnPropSymbols$E(b)) {
+      if (__propIsEnum$E.call(b, prop))
+        __defNormalProp$E(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
+var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
 function getTemplateProxyForField(field, frame, frames) {
   return new Proxy(
     {},
@@ -1729,7 +1729,7 @@ function getTemplateProxyForField(field, frame, frames) {
           if (!field.labels) {
             return "";
           }
-          return __spreadProps$q(__spreadValues$D({}, field.labels), {
+          return __spreadProps$r(__spreadValues$E({}, field.labels), {
             __values: Object.values(field.labels).sort().join(", "),
             toString: () => {
               return data.formatLabels(field.labels, "", true);
@@ -2191,19 +2191,19 @@ class VariableValueRecorder {
   }
 }
 
-var __defProp$C = Object.defineProperty;
-var __getOwnPropSymbols$C = Object.getOwnPropertySymbols;
-var __hasOwnProp$C = Object.prototype.hasOwnProperty;
-var __propIsEnum$C = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$C = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$C = (a, b) => {
+var __defProp$D = Object.defineProperty;
+var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
+var __hasOwnProp$D = Object.prototype.hasOwnProperty;
+var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$D = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$D = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$C.call(b, prop))
-      __defNormalProp$C(a, prop, b[prop]);
-  if (__getOwnPropSymbols$C)
-    for (var prop of __getOwnPropSymbols$C(b)) {
-      if (__propIsEnum$C.call(b, prop))
-        __defNormalProp$C(a, prop, b[prop]);
+    if (__hasOwnProp$D.call(b, prop))
+      __defNormalProp$D(a, prop, b[prop]);
+  if (__getOwnPropSymbols$D)
+    for (var prop of __getOwnPropSymbols$D(b)) {
+      if (__propIsEnum$D.call(b, prop))
+        __defNormalProp$D(a, prop, b[prop]);
     }
   return a;
 };
@@ -2224,7 +2224,7 @@ const DEFAULT_COMPARE_OPTIONS = [
 ];
 class SceneTimeRangeCompare extends SceneObjectBase {
   constructor(state) {
-    super(__spreadValues$C({ compareOptions: DEFAULT_COMPARE_OPTIONS }, state));
+    super(__spreadValues$D({ compareOptions: DEFAULT_COMPARE_OPTIONS }, state));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["compareWith"] });
     this._onActivate = () => {
       const sceneTimeRange = sceneGraph.getTimeRange(this);
@@ -2314,7 +2314,7 @@ class SceneTimeRangeCompare extends SceneObjectBase {
 SceneTimeRangeCompare.Component = SceneTimeRangeCompareRenderer;
 function SceneTimeRangeCompareRenderer({ model }) {
   var _a;
-  const styles = ui.useStyles2(getStyles$a);
+  const styles = ui.useStyles2(getStyles$9);
   const { compareWith, compareOptions } = model.useState();
   const [previousCompare, setPreviousCompare] = React__default["default"].useState(compareWith);
   const previousValue = (_a = compareOptions.find(({ value: value2 }) => value2 === previousCompare)) != null ? _a : PREVIOUS_PERIOD_COMPARE_OPTION;
@@ -2354,7 +2354,7 @@ function SceneTimeRangeCompareRenderer({ model }) {
     isOpen: false
   }, previousValue.label));
 }
-function getStyles$a(theme) {
+function getStyles$9(theme) {
   return {
     previewButton: css.css({
       "&:disabled": {
@@ -2368,32 +2368,32 @@ function getStyles$a(theme) {
 
 const getCompareSeriesRefId = (refId) => `${refId}-compare`;
 
-var __defProp$B = Object.defineProperty;
-var __defProps$p = Object.defineProperties;
-var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
-var __hasOwnProp$B = Object.prototype.hasOwnProperty;
-var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$B = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$B = (a, b) => {
+var __defProp$C = Object.defineProperty;
+var __defProps$q = Object.defineProperties;
+var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$C = Object.getOwnPropertySymbols;
+var __hasOwnProp$C = Object.prototype.hasOwnProperty;
+var __propIsEnum$C = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$C = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$C = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$B.call(b, prop))
-      __defNormalProp$B(a, prop, b[prop]);
-  if (__getOwnPropSymbols$B)
-    for (var prop of __getOwnPropSymbols$B(b)) {
-      if (__propIsEnum$B.call(b, prop))
-        __defNormalProp$B(a, prop, b[prop]);
+    if (__hasOwnProp$C.call(b, prop))
+      __defNormalProp$C(a, prop, b[prop]);
+  if (__getOwnPropSymbols$C)
+    for (var prop of __getOwnPropSymbols$C(b)) {
+      if (__propIsEnum$C.call(b, prop))
+        __defNormalProp$C(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
+var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
 function timeShiftQueryResponseOperator(data$1) {
   return data$1.pipe(
     rxjs.map(([p, s]) => {
       const diff = s.timeRange.from.diff(p.timeRange.from);
       s.series.forEach((series) => {
         series.refId = getCompareSeriesRefId(series.refId || "");
-        series.meta = __spreadProps$p(__spreadValues$B({}, series.meta), {
+        series.meta = __spreadProps$q(__spreadValues$C({}, series.meta), {
           timeCompare: {
             diffMs: diff,
             isTimeShiftQuery: true
@@ -2405,7 +2405,7 @@ function timeShiftQueryResponseOperator(data$1) {
               return diff < 0 ? v - diff : v + diff;
             });
           }
-          field.config = __spreadProps$p(__spreadValues$B({}, field.config), {
+          field.config = __spreadProps$q(__spreadValues$C({}, field.config), {
             color: {
               mode: "fixed",
               fixedColor: runtime.config.theme.palette.gray60
@@ -2414,32 +2414,32 @@ function timeShiftQueryResponseOperator(data$1) {
           return field;
         });
       });
-      return __spreadProps$p(__spreadValues$B({}, p), {
+      return __spreadProps$q(__spreadValues$C({}, p), {
         series: [...p.series, ...s.series]
       });
     })
   );
 }
 
-var __defProp$A = Object.defineProperty;
-var __defProps$o = Object.defineProperties;
-var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
-var __hasOwnProp$A = Object.prototype.hasOwnProperty;
-var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$A = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$A = (a, b) => {
+var __defProp$B = Object.defineProperty;
+var __defProps$p = Object.defineProperties;
+var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
+var __hasOwnProp$B = Object.prototype.hasOwnProperty;
+var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$B = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$B = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$A.call(b, prop))
-      __defNormalProp$A(a, prop, b[prop]);
-  if (__getOwnPropSymbols$A)
-    for (var prop of __getOwnPropSymbols$A(b)) {
-      if (__propIsEnum$A.call(b, prop))
-        __defNormalProp$A(a, prop, b[prop]);
+    if (__hasOwnProp$B.call(b, prop))
+      __defNormalProp$B(a, prop, b[prop]);
+  if (__getOwnPropSymbols$B)
+    for (var prop of __getOwnPropSymbols$B(b)) {
+      if (__propIsEnum$B.call(b, prop))
+        __defNormalProp$B(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
+var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
 function filterAnnotations(data, filters) {
   var _a;
   if (!Array.isArray(data) || data.length === 0) {
@@ -2490,11 +2490,11 @@ function filterAnnotations(data, filters) {
           continue;
         }
       }
-      fields.push(__spreadProps$o(__spreadValues$A({}, field), {
+      fields.push(__spreadProps$p(__spreadValues$B({}, field), {
         values: buffer
       }));
     }
-    processed.push(__spreadProps$o(__spreadValues$A({}, frame), {
+    processed.push(__spreadProps$p(__spreadValues$B({}, frame), {
       fields,
       length: frameLength
     }));
@@ -2847,6 +2847,158 @@ class CustomAllValue {
   }
 }
 
+var __defProp$A = Object.defineProperty;
+var __defProps$o = Object.defineProperties;
+var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
+var __hasOwnProp$A = Object.prototype.hasOwnProperty;
+var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$A = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$A = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$A.call(b, prop))
+      __defNormalProp$A(a, prop, b[prop]);
+  if (__getOwnPropSymbols$A)
+    for (var prop of __getOwnPropSymbols$A(b)) {
+      if (__propIsEnum$A.call(b, prop))
+        __defNormalProp$A(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
+var __objRest$3 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$A.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$A)
+    for (var prop of __getOwnPropSymbols$A(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$A.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function VariableValueSelect({ model }) {
+  const { value, key } = model.useState();
+  const onInputChange = model.onSearchChange ? (value2, meta) => {
+    if (meta.action === "input-change") {
+      model.onSearchChange(value2);
+    }
+  } : void 0;
+  return /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
+    id: key,
+    placeholder: "Select value",
+    width: "auto",
+    value,
+    allowCustomValue: true,
+    virtualized: true,
+    tabSelectsValue: false,
+    onInputChange,
+    options: model.getOptionsForSelect(),
+    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
+    onChange: (newValue) => {
+      model.changeValueTo(newValue.value, newValue.label);
+    }
+  });
+}
+function VariableValueSelectMulti({ model }) {
+  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
+  const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
+  const options = model.getOptionsForSelect();
+  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
+  const [inputValue, setInputValue] = React.useState("");
+  React.useEffect(() => {
+    setUncommittedValue(arrayValue);
+  }, [arrayValue]);
+  const onInputChange = (value2, { action }) => {
+    if (action === "input-change") {
+      setInputValue(value2);
+      if (model.onSearchChange) {
+        model.onSearchChange(value2);
+      }
+      return value2;
+    }
+    if (action === "input-blur") {
+      setInputValue("");
+      return "";
+    }
+    return inputValue;
+  };
+  const placeholder = options.length > 0 ? "Select value" : "";
+  return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
+    id: key,
+    placeholder,
+    width: "auto",
+    inputValue,
+    value: uncommittedValue,
+    noMultiValueWrap: true,
+    maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
+    tabSelectsValue: false,
+    virtualized: true,
+    allowCustomValue: true,
+    options: model.getOptionsForSelect(),
+    closeMenuOnSelect: false,
+    components: { Option: OptionWithCheckbox },
+    isClearable: true,
+    hideSelectedOptions: false,
+    onInputChange,
+    onBlur: () => {
+      model.changeValueTo(uncommittedValue);
+    },
+    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
+    onChange: (newValue, action) => {
+      if (action.action === "clear" && noValueOnClear) {
+        model.changeValueTo([]);
+      }
+      setUncommittedValue(newValue.map((x) => x.value));
+    }
+  });
+}
+const OptionWithCheckbox = ({
+  children,
+  data,
+  innerProps,
+  innerRef,
+  isFocused,
+  isSelected,
+  renderOptionLabel
+}) => {
+  const _a = innerProps, rest = __objRest$3(_a, ["onMouseMove", "onMouseOver"]);
+  const theme = ui.useTheme2();
+  const selectStyles = ui.getSelectStyles(theme);
+  const optionStyles = ui.useStyles2(getOptionStyles);
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$o(__spreadValues$A({
+    ref: innerRef,
+    className: css.cx(selectStyles.option, isFocused && selectStyles.optionFocused)
+  }, rest), {
+    "aria-label": "Select option",
+    title: data.title
+  }), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: optionStyles.checkbox
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Checkbox, {
+    value: isSelected
+  })), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: selectStyles.optionBody
+  }, /* @__PURE__ */ React__default["default"].createElement("span", null, children)));
+};
+OptionWithCheckbox.displayName = "SelectMenuOptions";
+const getOptionStyles = (theme) => ({
+  checkbox: css.css({
+    marginRight: theme.spacing(2)
+  })
+});
+function renderSelectForVariable(model) {
+  if (model.state.isMulti) {
+    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelectMulti, {
+      model
+    });
+  } else {
+    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelect, {
+      model
+    });
+  }
+}
+
 var __defProp$z = Object.defineProperty;
 var __defProps$n = Object.defineProperties;
 var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
@@ -2972,21 +3124,32 @@ function GroupByVariableRenderer({ model }) {
   const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
   const [isFetchingOptions, setIsFetchingOptions] = React.useState(false);
   const [isOptionsOpen, setIsOptionsOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
   const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
   React.useEffect(() => {
     setUncommittedValue(arrayValue);
   }, [arrayValue]);
-  const onInputChange = model.onSearchChange ? (value2, meta) => {
-    if (meta.action === "input-change") {
-      model.onSearchChange(value2);
+  const onInputChange = (value2, { action }) => {
+    if (action === "input-change") {
+      setInputValue(value2);
+      if (model.onSearchChange) {
+        model.onSearchChange(value2);
+      }
+      return value2;
     }
-  } : void 0;
+    if (action === "input-blur") {
+      setInputValue("");
+      return "";
+    }
+    return inputValue;
+  };
   const placeholder = "Select value";
   return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
     "data-testid": `GroupBySelect-${key}`,
     id: key,
     placeholder,
     width: "auto",
+    inputValue,
     value: uncommittedValue,
     noMultiValueWrap: true,
     maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
@@ -2997,7 +3160,9 @@ function GroupByVariableRenderer({ model }) {
     closeMenuOnSelect: false,
     isOpen: isOptionsOpen,
     isClearable: true,
+    hideSelectedOptions: false,
     isLoading: isFetchingOptions,
+    components: { Option: OptionWithCheckbox },
     onInputChange,
     onBlur: () => {
       model.changeValueTo(uncommittedValue);
@@ -3035,7 +3200,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$9);
+  const styles = ui.useStyles2(getStyles$8);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3098,7 +3263,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$9 = (theme) => ({
+const getStyles$8 = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -3160,7 +3325,7 @@ function keyLabelToOption(key, label) {
 }
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b;
-  const styles = ui.useStyles2(getStyles$8);
+  const styles = ui.useStyles2(getStyles$7);
   const [state, setState] = React.useState({});
   const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
   const valueValue = keyLabelToOption(filter.value, filter.valueLabel);
@@ -3253,7 +3418,7 @@ function AdHocFilterRenderer({ filter, model }) {
     onClick: () => model._removeFilter(filter)
   }));
 }
-const getStyles$8 = (theme) => ({
+const getStyles$7 = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -3547,7 +3712,7 @@ function renderExpression(builder, filters) {
 }
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
-  const styles = ui.useStyles2(getStyles$7);
+  const styles = ui.useStyles2(getStyles$6);
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.wrapper
   }, filters.map((filter, index) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, {
@@ -3561,7 +3726,7 @@ function AdHocFiltersVariableRenderer({ model }) {
     addFilterButtonText
   }));
 }
-const getStyles$7 = (theme) => ({
+const getStyles$6 = (theme) => ({
   wrapper: css.css({
     display: "flex",
     gap: theme.spacing(2),
@@ -6030,12 +6195,22 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
   if (state.hide === data.VariableHide.hideVariable && !showAlways) {
     return null;
   }
+  if (layout === "vertical") {
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: verticalContainer,
+      "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
+    }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
+      variable,
+      layout
+    }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
+      model: variable
+    }));
+  }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: css.cx(containerStyle, { [verticalContainer]: layout === "vertical" }),
+    className: containerStyle,
     "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
   }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
-    variable,
-    layout
+    variable
   }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
     model: variable
   }));
@@ -6051,15 +6226,18 @@ function VariableLabel({ variable, layout }) {
   return /* @__PURE__ */ React__default["default"].createElement(ControlsLabel, {
     htmlFor: elementId,
     isLoading: state.loading,
-    onCancel: variable.onCancel,
+    onCancel: () => {
+      var _a2;
+      return (_a2 = variable.onCancel) == null ? void 0 : _a2.call(variable);
+    },
     label: labelOrName,
     error: state.error,
     layout,
     description: (_b = state.description) != null ? _b : void 0
   });
 }
-const containerStyle = css.css({ display: "flex", overflow: "hidden" });
-const verticalContainer = css.css({ flexDirection: "column" });
+const containerStyle = css.css({ display: "flex" });
+const verticalContainer = css.css({ display: "flex", flexDirection: "column" });
 
 class VariableValueControl extends SceneObjectBase {
 }
@@ -6348,90 +6526,6 @@ class ConstantVariable extends SceneObjectBase {
   }
 }
 
-function VariableValueSelect({ model }) {
-  const { value, key } = model.useState();
-  const styles = ui.useStyles2(getStyles$6);
-  const onInputChange = model.onSearchChange ? (value2, meta) => {
-    if (meta.action === "input-change") {
-      model.onSearchChange(value2);
-    }
-  } : void 0;
-  return /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
-    id: key,
-    placeholder: "Select value",
-    width: "auto",
-    value,
-    allowCustomValue: true,
-    virtualized: true,
-    tabSelectsValue: false,
-    onInputChange,
-    options: model.getOptionsForSelect(),
-    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
-    onChange: (newValue) => {
-      model.changeValueTo(newValue.value, newValue.label);
-    },
-    className: styles.overflow
-  });
-}
-function VariableValueSelectMulti({ model }) {
-  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
-  const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
-  const options = model.getOptionsForSelect();
-  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
-  React.useEffect(() => {
-    setUncommittedValue(arrayValue);
-  }, [arrayValue]);
-  const onInputChange = model.onSearchChange ? (value2, meta) => {
-    if (meta.action === "input-change") {
-      model.onSearchChange(value2);
-    }
-  } : void 0;
-  const placeholder = options.length > 0 ? "Select value" : "";
-  const styles = ui.useStyles2(getStyles$6);
-  return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
-    id: key,
-    placeholder,
-    width: "auto",
-    value: uncommittedValue,
-    noMultiValueWrap: true,
-    maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
-    tabSelectsValue: false,
-    virtualized: true,
-    allowCustomValue: true,
-    options: model.getOptionsForSelect(),
-    closeMenuOnSelect: false,
-    isClearable: true,
-    onInputChange,
-    onBlur: () => {
-      model.changeValueTo(uncommittedValue);
-    },
-    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
-    onChange: (newValue, action) => {
-      if (action.action === "clear" && noValueOnClear) {
-        model.changeValueTo([]);
-      }
-      setUncommittedValue(newValue.map((x) => x.value));
-    },
-    className: styles.overflow
-  });
-}
-function renderSelectForVariable(model) {
-  if (model.state.isMulti) {
-    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelectMulti, {
-      model
-    });
-  } else {
-    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelect, {
-      model
-    });
-  }
-}
-const getStyles$6 = () => ({
-  overflow: css.css({
-    overflow: "hidden"
-  })
-});
-
 var __defProp$i = Object.defineProperty;
 var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
 var __hasOwnProp$i = Object.prototype.hasOwnProperty;